亮学长
亮学长

attachShadow样式隔离和JavaScript 沙箱

微服务样式隔离的原理是利用 Shadow DOM 技术来隔离各个微前端应用的样式。Shadow DOM 是 Web 标准的一部分，它允许将 DOM 树封装到一个隔离的影子 DOM 中，这样各个微前端应用的样式就不会相互影响，从而实现样式的隔离。
Qiankun 在每个微前端应用中使用 Shadow DOM 来包裹应用内部的 DOM 结构，以及应用所需的 CSS 样式。这样一来，即使各个微前端应用使用了相同的 CSS 类名，它们也不会相互影响，从而确保了样式的隔离。

dom的attachShadow创建影子节点，节点内和节点之外有什么关联吗？会互相影响？

attachShadow 方法创建的影子节点（shadow root）与宿主元素存在一定的关联，但是它们之间具有一定的隔离性，不会互相影响。

宿主元素（host element）是指通过 attachShadow 创建影子节点的元素，它拥有一个独立的影子节点。在影子节点内部定义的样式和元素，以及事件处理程序，都会局限在影子节点内部生效，不会泄漏到宿主元素所在的文档中。

具体来说，影子节点内的样式（CSS）不会影响到宿主元素，宿主元素的样式也不会影响影子节点内的元素。这意味着你可以在影子节点内定义特定的样式，而不用担心与外部样式的冲突。

同样，影子节点内的事件处理程序也是隔离的。在影子节点内注册的事件处理程序只会响应影子节点内的事件，不会响应宿主元素或其他元素的事件。这样可以确保影子节点内的事件逻辑不会影响到宿主元素及其周围的元素。

需要注意的是，影子节点内部的内容可以与宿主元素内部的内容进行交互。例如，在影子节点内部触发的事件可以通过事件冒泡机制传递到宿主元素或其他位于宿主元素之外的元素。但是，它们仍然保持了相对的独立性和隔离性。

通过使用 Shadow DOM 技术，我们可以将页面的功能和样式封装到独立的影子节点中，从而实现更好的代码组织和维护性，避免全局样式和事件的冲突，并改善模块化的开发体验。

Shadow DOM 技术原理，用代码去表达出来

当然可以！下面是一个更详细的代码示例，使用中文解释 Shadow DOM 技术的原理：

DOCTYPE html>
<html>
<head>
  <style>
    /* 外部样式 */
    .container {
      border: 1px solid #ccc;
      padding: 10px;
    }
  style>
head>
<body>
  
  <div id="host-element" class="container">
    
    <p>这是宿主元素内的文本。p>
    <button>点击我button>
  div>

  <script>
    // 获取宿主元素
    const hostElement = document.getElementById('host-element');

    // 创建影子根节点
    const shadowRoot = hostElement.attachShadow({ mode: 'open' });

    // 创建影子 DOM 的样式
    const styles = `
      /* 影子 DOM 样式 */
      .container {
        background-color: #f5f5f5;
        border: 1px solid #999;
        padding: 20px;
      }
      p {
        color: blue;
      }
    `;

    // 创建样式元素并将样式添加到影子根节点中
    const stylesElement = document.createElement('style');
    stylesElement.textContent = styles;
    shadowRoot.appendChild(stylesElement);

    // 创建影子 DOM 中的内容
    const shadowContent = document.createElement('div');
    shadowContent.textContent = '这是影子 DOM 内的文本。';
    shadowRoot.appendChild(shadowContent);

    // 在影子 DOM 中注册事件
    shadowContent.addEventListener('click', () => {
      console.log('点击了影子 DOM 内的内容');
    });
    
    // 将影子元素添加到影子根节点中
    shadowRoot.appendChild(shadowElement);
  script>
body>
html>

在这个示例中，我们有一个 HTML 文档，其中包含了一个宿主元素（

），宿主元素内有一些文本内容和一个按钮。

通过 JavaScript，我们首先获取了宿主元素，并使用 attachShadow 方法为它创建了一个影子根节点（shadow root），并指定 mode: 'open' 以允许外部访问影子 DOM。这样宿主元素就有了一个独立的影子 DOM。

接下来，我们创建了影子 DOM 的样式，定义在影子 DOM 内有效的 CSS 样式。我们通过创建一个样式元素，并设置其 textContent 为样式字符串，然后将样式元素添加到影子根节点中。这样，宿主元素内的样式不会影响到影子 DOM，而影子 DOM 内的样式也不会影响到宿主元素以及其他部分的样式。

然后，我们创建了影子 DOM 内的内容，这个例子中是一个 div 元素，内容为 “这是影子 DOM 内的文本。”。我们将内容元素添加到影子根节点中，这样影子 DOM 内的内容就与宿主元素内的内容进行了分离。

最后，我们在影子 DOM 中注册了一个点击事件的监听器，并打印了相关信息。这样，当点击影子 DOM 内的内容时，我们就会在控制台中看到相应的日志信息。这展示了影子 DOM 的事件隔离性，影子 DOM 内的事件不会影响到宿主元素以及其他部分。

通过 Shadow DOM 技术，我们可以实现样式和内容的封装、隔离和作用域限制，使得宿主元素和影子 DOM 内的元素可以独立开发和维护，相互之间不会产生冲突或干扰。

Shadow DOM 技术来隔离各个微前端应用的样式，进一步介绍Shadow DOM 技术底层原理

Shadow DOM 技术是 Web 标准中一种用于创建封装的、独立的 DOM 子树的技术。它的设计目的是为了将组件的样式、结构和行为封装起来，从而避免全局 CSS 样式或 JavaScript 代码的影响，特别适用于组件化开发和构建复杂的 Web 应用程序。

Shadow DOM 技术的底层原理：

  1. Shadow DOM 树：在使用 Shadow DOM 技术时，一个元素可以拥有一个或多个 Shadow DOM 树（shadow tree），每个 Shadow DOM 树是一个完全隔离的 DOM 子树。在 Shadow DOM 树中，可以包含自己的 HTML 结构、CSS 样式和 JavaScript 逻辑，与外部 DOM 结构相互独立。

  2. Shadow Host：拥有 Shadow DOM 的元素是其所属的 Shadow DOM 树的宿主元素，称为 Shadow Host。Shadow Host 可以是普通的 HTML 元素，也可以是自定义的 Web 组件。

  3. Shadow Root：每个 Shadow Host 对应一个 Shadow Root，它是 Shadow DOM 树的根节点，包含了该树的全部内容，包括 HTML 结构、CSS 样式和 JavaScript 逻辑。

  4. 封闭性：通过 Shadow DOM 技术创建的 Shadow DOM 树是封闭的，意味着它的内部内容对外部是不可见的。这意味着样式和脚本不会泄露或影响 Shadow DOM 外部的文档。

  5. 作用域 CSS：Shadow DOM 中的样式表会默认地被封装在 Shadow DOM 内部，这样它们不会影响到外部文档或其他 Shadow DOM 中的元素。这意味着即使使用全局选择器，也难以破坏 Shadow DOM 的封装性。

通过 Shadow DOM 技术，开发者可以创建独立的、封闭的 DOM 子树，每棵树都有自己的作用域和样式隔离，从而可以更好地构建大型 Web 应用中的组件化结构，并解决全局样式和脚本的污染问题。这种技术非常适合于构建现代的 Web 应用，特别是在微前端架构中实现独立应用的样式和行为隔离。

JavaScript 沙箱

JavaScript 沙箱的原理是通过使用浏览器的 JavaScript 的隔离机制来隔离各个微前端应用的 JavaScript 代码。Qiankun 利用了浏览器提供的 iframe 标签，将各个微前端应用作为独立的 iframe 加载到主应用中。每个 iframe 都有自己独立的 JavaScript 执行环境，因此它们之间的 JavaScript 代码是相互隔离的。

此外，在配合使用沙箱工具（如 openKyle 的 single-spa 库）时，Qiankun 还能对微前端应用中的一些敏感 DOM 操作进行拦截，通过代理机制和特定的沙箱环境来限制微前端应用对主应用的影响，从而保证了微前端应用之间的安全隔离。

综合来看，Qiankun 借助 Shadow DOM 和 iframe 技术，以及相关的沙箱工具，实现了微服务样式隔离和 JavaScript 沙箱的功能，确保了各个微前端应用在样式和 JavaScript 代码上的相互隔离，从而使得多个微前端应用可以安全、独立地运行在同一个页面上。

qiankun 微服务的 JS 沙箱，是指 qiankun 在每个子应用之间搭建的一种隔离机制，使用该机制可以构建一个安全的 JavaScript 运行环境，防止应用之间的相互干扰和污染。

该机制的实现原理，是通过将各个子应用中的 JS 代码加以隔离，使用 iframe 创建子应用，并在 iframe 中启动应用的 JS 代码，使每个子应用之间的 JS 运行环境互相隔离。这种嵌套式的运行环境，像是每个子应用都运行在自己的“沙箱”中一样，避免了子应用之间的干扰和污染。

在实现上，qiankun 通过封装一个 proxy 对象，将子应用中通过 window 对象访问全局变量的方式进行拦截，并将其映射到子应用自己的沙箱运行环境中。这样，即使不同子应用中使用了相同的全局变量名，也不会产生冲突，保证子应用之间的隔离性。

下面是一个简单的示例，展示了如何在子应用中访问全局变量和局部变量，并进行拦截和映射：

// proxy 对象对外暴露了一个 get 方法，用于拦截对象的属性访问
const sandboxProxy = new Proxy(window, {
  get(target, key) {
    // 如果访问的是全局变量，将其映射到当前子应用的沙箱环境，避免与其他子应用冲突
    if (key in target) {
      return Reflect.get(target, key);
    }
    // 如果访问的是局部变量，则返回当前子应用自己的变量
    return Reflect.get(自己的变量, key);
  }
});

// 创建一个 iframe，并将其设置为子应用的沙箱环境
const appContainer = document.createElement('iframe');
appContainer.src = 'http://localhost:8080'; // 子应用的入口地址
appContainer.sandbox = 'allow-scripts'; // 允许执行 JS 脚本，但不允许访问同源策略外的内容
appContainer.contentWindow = sandboxProxy; // 使用自定义的 proxy 对象作为 window 对象
document.body.appendChild(appContainer);

通过使用 qiankun 微服务的 JS 沙箱，我们可以在微前端架构中实现各个子应用之间的隔离和安全性，提高应用的可维护性和可靠性。

你可能感兴趣的:(javascript)

  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
    在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
    Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
  • JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发javascript笔记前端
    JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
  • 前端埋点解决方案 zhu_zhu_xia 前端
    一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
  • vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战vue.js前端javascript
    一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
  • APP UI自动化测试思路总结 程序员老鹰 ui测试工具开发语言软件测试经验分享程序人生程序员
    首先想要说明一下，APP自动化测试可能很多公司不用，但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的，所以为了更好的待遇，我们还是需要花时间去掌握的，毕竟谁也不会跟钱过不去。接下来，一起总结一下APPUI自动化测试的思路吧。一，开发语言选择通常用于自动化测试的编程语言有：Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自
  • JS的设计模式（23种） 是个车迷 JavaScriptjavascript设计模式开发语言
    JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象
  • JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？ 智伴科技 javascripthtmlcss
    下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven
  • 【大咖力荐 新手必备】软件开发入门，这300篇文章就够了！ 高校俱乐部 软件开发新手必备数据编码IP
    小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
  • 问了一下 GPT--当前基于 React + TypeScript 的生态中 一名前端工程师需要具备哪些能力？ zoe_ya 前端gptreact.js
    在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ
  • reactive 和ref区别和原理 小王学前端️ vue3vue.js前端javascript
    reactive和ref区别和原理在Vue3中，reactive和ref都是用来创建响应式数据的方法。它们的主要区别在于如何使用它们以及它们如何处理值.reactive是用来创建响应式对象的。当你传递一个普通的JavaScript对象给reactive，它会返回一个新的响应式对象，这个对象与原始对象具有相同的属性和值，但是当这些属性被修改时，Vue会自动跟踪这些更改并更新视图。import{rea
  • react 和vue区别 小王学前端️ vue3react.jsvue.js前端
    React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript
  • 爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析 洛可可白 前端专栏ecmascript前端javascript
    前言欢迎来到我的技术小宇宙！这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。洛可可白：个人主页个人专栏：✅前端技术✅后端技术个人博客：洛可可白博客代码获取：bestwishes0203封面壁纸：洛可可白wallpaper文章目录爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析基本语法1
  • 速盾：cdn分流是什么意思 速盾cdn 服务器安全
    CDN分流是一种通过内容分发网络（CDN）来优化网站访问速度和用户体验的技术。通过CDN分流，网站的静态资源可以被缓存到全球不同的CDN节点上，从而减少用户请求原始服务器的次数，提高了网站的响应速度和可靠性。本文将详细介绍CDN分流的原理、优势和应用场景。CDN分流的原理是通过将网站的静态资源（如HTML、CSS、JavaScript、图片、视频等）复制到CDN节点上，并将用户的请求转发到离用户最
  • vue的axios教程 可爱的小小小狼 前端vue.jsokhttp前端
    ajax技术：不重新加载整个页面的情况下，异步地与服务器进行通信，并更新页面的部分内容Ajax（AsynchronousJavaScriptandXML）是一种使用JavaScript向服务器发送和接收数据的技术。Ajax的工作原理基于以下关键组件：XMLHttpRequest对象：XMLHttpRequest是浏览器提供的API，用于创建HTTP请求，并与服务器进行通信。通过XMLHttpReq
  • JS中的八种继承方法 酥脆角 javascript开发语言ecmascript
    1.原型链继承：原型链继承是JavaScript中最基本的继承方式。每个对象都有一个原型对象，通过原型链将属性和方法沿着对象链传递下来。在原型链继承中，通过将子构造函数的原型对象指向父构造函数的实例，实现了继承。这意味着子对象可以访问父对象原型链上的属性和方法。functionParent(){this.name='Parent';}Parent.prototype.sayHello=functi
  • 原型对象与原型链 网站打工人 javascript原型模式开发语言
    原型对象实际上每一个构造函数都有一个名为prototype的属性，就是原型的意思，prototype的是对象类据类型，称为构造函数的原型对象，每个原型对象都具有constructor属性代表了该原型对象对应的构造函数。 functionPerson(){  }​ //每个函数都有prototype属性 console.log(Person.prototype);了解了JavaScript中构造函数
  • JS中的继承 浅墨_东 javascript开发语言ecmascript
    在JavaScript中，有多种实现继承的方法。下面介绍几种常见的继承方式以及它们的优缺点：原型链继承原型链继承是JavaScript中最基本的一种继承方式。它的原理是通过将父类的实例作为子类的原型（prototype）来实现继承。functionParent(){this.name='Parent';}Parent.prototype.sayHello=function(){console.lo
  • 【前端框架的发展史详细介绍】 程序员不想敲代码啊 前端框架
    前端框架的发展史前端框架的发展史可以追溯到1995年，当时微软推出了IE浏览器并开始支持CSS，随后，在1997年，W3C（万维网联盟）发布了CSS的第一个正式标准。在2003年，苹果推出了Safari浏览器，它支持Web标准，包括CSS和JavaScript。同年，Mozilla基金会发布了Firefox浏览器，也开始支持这些标准。2006年，jQuery库发布，它简化了JavaScript编程
  • JavaScript函数3:Math 天下vs栋哥
    2.Math2.1console.log(Math.PI)πconsole.log(Math.E)econsole.log(Math.ceil(4.01))5向上求整console.log(Math.floor(4.999999999))4向下求整console.log(Math.sqrt(9))求方根console.log(Math.pow(3,3))3^3console.log(Math.ab
  • uniapp 实现双击点赞出现特效 全栈^_^小菜鸟 uni-appjava前端
    更新一下老板改了需求要加上特效1.创建点赞按钮首先，在你的页面中创建一个点赞按钮全局点赞的话就写在最外面的标签就行了。你可以使用组件或者自定义一个视图组件。点赞这里我们使用了@click事件监听器来监听按钮的点击事件，并且使用了:class绑定来根据isDoubleTap的值改变按钮的样式（可选）。showHeart用于控制小心心的显示与隐藏。2.实现双击检测在JavaScript部分，你需要实现
  • 使用JavaScript写拖拽案例 诶呦我那个暴脾气 前端前端拖拽案例JavaScript
    //设置HTML标签中的css样式。//用全局选择器（*）把HTML中的默认样式去掉。//设置一个拖拽用的div盒子。使用绝对定位。css代码：*{margin:0;padding:0;list-style:none;}#box{width:100px;height:100px;background-color:hotpink;position:absolute;cursor:move;}HTML
  • js中怎样添加、移出、插入、复制、创建？ 一个大长腿 javascript开发语言ecmascript
    在JavaScript中，可以使用以下方法来添加、移除、插入、复制和创建元素：添加元素：使用appendChild()方法将一个子元素添加到指定父元素的末尾。使用insertBefore()方法将一个子元素插入到指定父元素的指定位置之前。移除元素：使用removeChild()方法从父元素中移除指定的子元素。插入元素：使用insertAdjacentHTML()方法在指定元素的相对位置插入HTML
  • 【javaScript/ES6】获取对象数组中其中一个属性值的集合（forEach、Array.from） 花间半盘棋 javaScriptjavascriptes6开发语言前端
    引入：有一个对象数组，但只需要其中的某一个属性值。举个栗子，有一个对象数组，其中不止有一个对象：letarr=[{name:'Luenay',age:10},{name:'Kitty',age:20}]但是我只需要包含name的集合；方法1：使用forEach；letresArr=[]arr.forEach(item=>{resArr.push(item.name)})方法2：使用Array.fr
  • 枚举的构造函数中抛出异常会怎样 bylijinnan javaenum单例
    首先从使用enum实现单例说起。 为什么要用enum来实现单例？ 这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
  • CMake 教程 aigo C++
    转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/   CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
  • cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 springWebgis
      cvc-complex-type.2.3: Element 'beans' cannot have character     Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
  • jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
    <script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的 高度，兼容ie,ff,chrome var top = document.documentElement.s
  • 将数据库中的数据转换成dbs文件 何必如此 sqldbs
    旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：         主要生成数据库配置文件(.conf文
  • 在IBATIS中配置SQL语句的IN方式 357029540 ibatis
    在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
  • Spring3 MVC 笔记（一） 7454103 springmvcbeanRESTJSF
             自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 要看业务，和整体的设计！      最近公司要求开发个新系统！
  • Timer与Spring Quartz 定时执行程序 darkranger springbean工作quartz
    有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
  • 大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
    大端小端转换，le32_to_cpu 和cpu_to_le32  字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html         小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
  • Nginx负载均衡配置实例详解 avords
    [导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 负载均衡 先来简单了解一下什么是负载均衡
  • 乱说的 houxinyou 框架敏捷开发软件测试
    从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！ 这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多， 瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。 也可以把软件开发理
  • 欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
    　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
  • 包冲突问题的解决方法 bingyingao eclipsemavenexclusions包冲突
    包冲突是开发过程中很常见的问题： 其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 抛如下异常： java.lang.NoClassDefFoundError: Could not in
  • 【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
    先来一段废话： 实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
  • sudoku solver in Haskell bookjovi sudokuhaskell
    这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。   现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
  • java apache ftpClient bro_feng java
    最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
  • 读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
  • 面试记录语 chenyu19891124 招聘
    或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
  • Fire Workflow 1.0正式版终于发布了 comsci 工作workflowGoogle
    Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了 正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
  • Python向脚本传参 daizj python脚本传参
    如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 需要模块：sys 参数个数：len(sys.argv) 脚本名：    sys.argv[0] 参数1：     sys.argv[1] 参数2：     sys.argv[
  • 管理用户分组的命令gpasswd dongwei_6688 passwd
    NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
  • 郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  • yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
    页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
  • linux mysql fypop linux
    enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
  • Scramble String hcx2013 String
    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
  • 跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
    历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。     ----广告-----------------------------------------------------
  • nginx日志切割并使用flume-ng收集日志 liyonghui160com
         nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
  • Oracle死锁解决方法 pda158 oracle
    　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
  • java之List排序 shiguanghui list排序
       在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
  • servlet单例多线程 utopialxw 单例多线程servlet
    转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和   http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他