Wang's Blog
Wang's Blog

React16源码: React中的completeWork对HostComponent处理的源码实现

HostComponent


1 ）概述

  • 在 completeWork 当中，我们需要对 HostComponent 的一些操作有哪些?
    • 首先在一次更新而不是初次渲染的情况下
    • 需要去 diffProperties 来计算，需要更新的内容
    • 也就是在 vdom 中去进行一个对比来判断这一个节点是否需要真的去更新它
    • 以此来最低程度的去更新整个 dom 的一个过程
    • 对于不同 dom property，它有一些不同的处理方式

2 ）源码

定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L581

找到 case HostComponent

case HostComponent: {
  // 跳过
  popHostContext(workInProgress);
  // 跳过
  const rootContainerInstance = getRootHostContainer();
  const type = workInProgress.type;
  // 不是第一次渲染，也就是更新的时候
  if (current !== null && workInProgress.stateNode != null) {
    updateHostComponent(
      current,
      workInProgress,
      type,
      newProps,
      rootContainerInstance,
    );

    if (current.ref !== workInProgress.ref) {
      markRef(workInProgress); // 跳过
    }
  } else {
    // 第一次挂载渲染
    // 没有 props 说明有问题，提示
    if (!newProps) {
      invariant(
        workInProgress.stateNode !== null,
        'We must have new props for new mounts. This error is likely ' +
          'caused by a bug in React. Please file an issue.',
      );
      // This can happen when we abort work.
      break;
    }
    // 跳过
    const currentHostContext = getHostContext();
    // TODO: Move createInstance to beginWork and keep it on a context
    // "stack" as the parent. Then append children as we go in beginWork
    // or completeWork depending on we want to add then top->down or
    // bottom->up. Top->down is faster in IE11.
    let wasHydrated = popHydrationState(workInProgress);
    if (wasHydrated) {
      // TODO: Move this and createInstance step into the beginPhase
      // to consolidate.
      if (
        prepareToHydrateHostInstance(
          workInProgress,
          rootContainerInstance,
          currentHostContext,
        )
      ) {
        // If changes to the hydrated node needs to be applied at the
        // commit-phase we mark this as such.
        markUpdate(workInProgress);
      }
    } else {
      // 第一次挂载
      // 注意，这里，创建 element的过程
      let instance = createInstance(
        type,
        newProps,
        rootContainerInstance,
        currentHostContext,
        workInProgress,
      );

      // 第一次渲染，要添加子节点
      appendAllChildren(instance, workInProgress, false, false);

      // Certain renderers require commit-time effects for initial mount.
      // (eg DOM renderer supports auto-focus for certain elements).
      // Make sure such renderers get scheduled for later work.
      if (
        // 主要功能: 对dom节点上面的可能的事件监听，需要初始化整个react的事件体系
        finalizeInitialChildren(
          instance,
          type,
          newProps,
          rootContainerInstance,
          currentHostContext,
        )
      ) {
        markUpdate(workInProgress);
      }
      workInProgress.stateNode = instance;
    }

    if (workInProgress.ref !== null) {
      // If there is a ref on a host node we need to schedule a callback
      markRef(workInProgress);
    }
  }
  break;
}
  • 进入 createInstance
    // packages/react-dom/src/client/ReactDOMHostConfig.js#L167
// 这个方法就是创建节点的过程
export function createInstance(
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
  internalInstanceHandle: Object,
): Instance {
  let parentNamespace: string;
  if (__DEV__) {
    // TODO: take namespace into account when validating.
    const hostContextDev = ((hostContext: any): HostContextDev);
    validateDOMNesting(type, null, hostContextDev.ancestorInfo);
    if (
      typeof props.children === 'string' ||
      typeof props.children === 'number'
    ) {
      const string = '' + props.children;
      const ownAncestorInfo = updatedAncestorInfo(
        hostContextDev.ancestorInfo,
        type,
      );
      validateDOMNesting(null, string, ownAncestorInfo);
    }
    parentNamespace = hostContextDev.namespace;
  } else {
    parentNamespace = ((hostContext: any): HostContextProd);
  }
  // 主要在这里
  const domElement: Instance = createElement(
    type,
    props,
    rootContainerInstance,
    parentNamespace,
  );
  // 后面会进入这个方法
  precacheFiberNode(internalInstanceHandle, domElement);
  // 同上
  updateFiberProps(domElement, props);
  return domElement;
}
  • 进入 createElement
    // 不展开这个方法里面调用的内容
export function createElement(
  type: string,
  props: Object,
  rootContainerElement: Element | Document,
  parentNamespace: string,
): Element {
  let isCustomComponentTag;

  // We create tags in the namespace of their parent container, except HTML
  // tags get no namespace.
  // 先要获取 document, 先要通过 document 的api来创建
  const ownerDocument: Document = getOwnerDocumentFromRootContainer(
    rootContainerElement,
  );
  let domElement: Element;
  let namespaceURI = parentNamespace;
  // 在React中有区分，不同节点类型，都会有一个定义，比如html普通节点, svg节点等
  if (namespaceURI === HTML_NAMESPACE) {
    namespaceURI = getIntrinsicNamespace(type);
  }
  // 如果是 html 类型节点，做一些特殊处理
  if (namespaceURI === HTML_NAMESPACE) {
    if (__DEV__) {
      isCustomComponentTag = isCustomComponent(type, props);
      // Should this check be gated by parent namespace? Not sure we want to
      // allow  or .
      warning(
        isCustomComponentTag || type === type.toLowerCase(),
        '<%s /> is using incorrect casing. ' +
          'Use PascalCase for React components, ' +
          'or lowercase for HTML elements.',
        type,
      );
    }
    // 对script节点进行特殊处理
    if (type === 'script') {
      // Create the script via .innerHTML so its "parser-inserted" flag is
      // set to true and it does not execute
      const div = ownerDocument.createElement('div');
      div.innerHTML = '

你可能感兴趣的:(React,React,Native,react.js,前端,前端框架)

  • 如何设置element ui选择结束时间为23:59:59？ weixin_42220130 前端elementui时间结束
    两个方法，不过都是针对于传值给后端做的处理，不包括前端展示1每次发送请求时更改结束时间给后端//请求函数getDataList(){this.dataListLoading=true;//请求参数手动更改if(this.searchForm.timeArray.length===2&&this.searchForm.timeArray[1]!==""){this.searchForm.timeAr
  • JavaScript 模块化开发：ES6 模块与 CommonJS 的对比与应用 程序员小羊！ Javajavascriptes6开发语言
    您好，我是程序员小羊！前言随着前端项目规模的增长，代码组织和管理变得越来越复杂。模块化开发成为解决这一问题的有效手段，能够帮助开发者将代码进行分割、复用和维护。JavaScript在发展过程中出现了多种模块化规范，其中最为广泛使用的有ES6模块（也称为ESModules）和CommonJS模块规范。本文将从原理、语法、应用场景和两者对比等多个方面深入探讨这两种模块化规范，帮助开发者更好地理解和应用
  • 滴滴前端日常实习一面 真的很上进 前端面试javascriptvuejava
    同步到csdn上一面水平居中、垂直居中的方法。align-item实现的是水平居中还是垂直居中。flex-direction为column的时候，是什么居中。js有什么数据类型。简单数据类型和复杂数据类型的区别深拷贝和浅拷贝的区别JSON.stringify有什么弊端怎么判断数组类型Vue3和Vue2的区别Vue生命周期钩子，activated和deactivated用过吗Vue里keep-ali
  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面 南北极之间 web前端特效源码前端javascripthtml网页设计代码实例css3
    效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
  • 基于Springboot和Vue的在线小说阅读平台系统(570) 源码出售和定制 vue.js前端springboot后端spring前端框架
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：Springboot3、项目图片4、演示视频基于Springboot和Vue的在线小说阅读平台系统(570)
  • html5 css3 JavaScript响应式中文静态网页模板js源代码 Yucool01 html5javascriptcss3
    该批次模板具备如下功能：首页，二级页面，三级页面登录页面均有，页面齐全，功能齐全，js+css+html,前端HTML纯静态页面，无后台，可用dreamweaver,sublime,webstorm等工具修改；部分网页模板效果图：有需要的同学可以下载学习一下：https://download.csdn.net/download/Yucool01/22408278https://download.c
  • 前端工程环境变量配置 比苦瓜苦 笔记前端
    前端工程环境变量配置以Vite为例1.创建.env环境变量文件2.配置package.json3.当执行script中的内容时mode会被传入vite.config.ts文件中的defineConfig，作为回调函数的参数以Vite为例1.创建.env环境变量文件在根目录创建文件内容：#生产环境下的环境变量配置#变量命名需要VITE_作为开头#apptitleVITE_APP_TITLE=生产#b
  • 前端配置环境 葱头的故事 前端
    工具类配置一、下载GitBash下载地址二、下载google浏览器下载地址三、下载微信开发者工具下载地址四、下载vscode下载地址1、安装中文包安装中文包教程2、安装插件3、vscode中使用git教程4、setting.json我自己常用的：{"editor.fontSize":18,"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vs
  • 测试老鸟汇总，接口测试总结与用例编写，一文策底概全... 软件测试老莫 接口测试
    1、为什么要做接口测试？1）现在很多系统前后端架构是分离的，因为不同端（前段，后端）的工作进度不一样，所以我们要针对最开始出来的接口，以及需要调用其他公司的（银行，支付宝，微信，qq等）一些接口进行接口测试及验证数据，从安全层面来说，只依赖前端进行限制已经完全不能满足系统的安全要求（绕过前端太容易了），需要后端同样进行控制，在这种情况下就需要从接口层面进行验证。在这种情况下就需要从接口层面进行验证
  • jmeter压力测试(踩坑)报错:java.net.BindException: Address already in use: connect 阿汤哥的程序之路 测试工具jmeter压力测试
    Jmeter压力测试报错：java.net.BindException:Addressalreadyinuse:connectatjava.base/sun.nio.ch.Net.connect0(NativeMethod)atjava.base/sun.nio.ch.Net.connect(Net.java:589)atjava.base/sun.nio.ch.Net.connect(Net.j
  • 【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程 秋说 前后端项目开发前端框架vue.js前端htmlcssJavaScript
    文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一：vite打包方法二：webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套：HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应
  • 【甲方安全建设】富文本编辑器XSS漏洞攻击及防御详析 秋说 网络安全xssweb安全富文本编辑器
    原创文章，禁止转载。文章目录调研背景搭建TinyMCE富文本编辑器靶场富文本编辑器前端过滤富文本编辑器后端攻击后端弱过滤弱过滤1弱过滤2后端有效过滤从甲方的视角看动态安全调研背景随着Web2.0技术的普及，富文本编辑器在各种Web应用中得到了广泛应用，用户、网站管理员等可以通过富文本编辑器在网页中添加并展示格式化文本、图片、视频等丰富内容。然而，由于富文本内容本质上涉及客户端输入，并且可能包含HT
  • 常见中高危漏洞修复建议（汇总） 落樱坠入星野 笔记网络安全系统安全web安全
    常见漏洞修复建议（汇总）1、未授权访问添加访问权限控制，对访问系统资源得用户身份进行标识，禁止未授权得情况下访问后台资源。2、敏感信息泄露1.后端控制严谨，用*号来隐藏敏感信息展现。2.密码策略要足够复杂，开启二步验证。3.服务配置严谨，对测试和生产资源做好访问控制。4.对员工培训相关安全意识。5、禁止在前端显示明文或密文信息。3、任意文件下载使用白名单限制下载路径，建议不要使用拼接文件路径参数的
  • tp6 购买商品送积分，上级也送积分，签到、推荐都送积分如何实现？ m0_69254007 开发语言php
    在ThinkPHP6中实现购买商品送积分、上级也送积分、签到、推荐都送积分的功能，需要涉及后端逻辑处理、数据库设计以及可能的前端交互。以下是一个大致的实现方案：1.数据库设计首先，需要设计几个关键的数据库表来支持这些功能：用户表（users）字段名字段类型字段含义idINT(11)UNSIGNED用户IDusernameVARCHAR(255)用户名integralINT(10)UNSIGNED用
  • C++ AMP异构并行编程解析 flyingleo1981
    C++AMP异构并行编程解析原文发表于《程序员》杂志2012年第4期，略有改动。文/陈冠诚微软在今年2月份的GoingNative大会上正式对外发布了C++AMP（AcceleratedMassiveParallelism）开放规范。C++AMP是微软于11年6月推出的一个异构并行编程框架，从VisualStudio11开发者预览版起，微软正式提供了C++AMP的支持。C++AMP的目标是降低在由
  • 【JavaWeb项目】——外卖订餐系统用户购买餐品、查询购物车、取消购物车餐品操作 Y小夜 Javaweb开发hivehadoop数据仓库java后端前端框架maven
    个人主页：【Y小夜】作者简介：一位双非学校的大二学生，编程爱好者，专注于基础和实战分享，欢迎私信咨询！入门专栏：【MySQL，Java基础，Rust】热门专栏：【Python，Javaweb，Vue框架】感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️目录购买餐品后端处理AddCarServlet部分代码解析查询购物车后端处理UshowCarServlet部分代码解析前端界面showC
  • 【Rust】——采用发布配置自定义构建 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客今日学习推荐：在当今这个飞速发展的信息时代，人工智能（AI）已经成为了一个不可或
  • 【Rust】——高级类型 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录为了类型安全和抽象而使用的newtype模式类型别名用来创建类型同义词不返回
  • vue中ref和reactive Lancelot212 vue.js前端javascript
    ref和reactive是Vue3中用于创建响应式数据的两个重要API，它们之间存在几个关键的区别，主要体现在数据类型、使用方式、访问方式以及设计理念上。1.数据类型不同ref：主要用于定义简单类型的数据（如字符串、数字、布尔值等）以及单一的对象。虽然它可以用于对象，但通常用于需要保持对其值响应式引用的场景。reactive：则主要用于包装JavaScript对象和数组等复杂类型的数据。它能够递归
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序 懒无名1 微信小程序uni-app小程序
    选择uni-app的原因是什么需要使用到的工具关于HBuilderX工具和微信小程序工具的介绍怎么下载HBuilderX工具和微信小程序工具如何使用HBuilderX工具如何使用微信小程序工具结尾什么是uni-appuni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝等)、快应
  • 前端请求两个不同的域名跨域 邱杉的博客
    The'Access-Control-Allow-Origin'headercontainsmultiplevalues
  • 项目实战-多子集循环嵌套 更新时的处理逻辑 ahauedu 项目实战与案例分析springboot后端
    项目实战多子集循环嵌套更新时的处理逻辑商品多子集循环嵌套更新场景时的处理逻辑场景背景：业务中，套餐下面有多个商品，每个商-品又有多个sku。目前分为套餐表、商品表、sku表，现在更新套餐时商品和sku都有可能出现增删改的情况，代码里如何区分是新增修改和删除呢假设我们是SpringBoot项目，在处理套餐、商品、SKU的增删改操作时，可以采用以下方案来区分并处理新增、修改和删除操作。一、前端传递完整
  • 前端PWA（Progressive Web App）技术（二） Good_tea_h 前端webapp
    三、PWA的优势相对于原生应用和传统Web应用，PWA具有以下显著优势：四、PWA的应用场景PWA技术因其独特的优势，在多个领域得到了广泛的应用，包括但不限于：五、结论PWA技术作为一种结合了Web应用和原生应用优点的新型应用开发模式，具有跨平台兼容性、可安装性、离线访问、快速加载、沉浸式体验等显著特点。这些特点使得PWA应用能够为用户提供更加流畅、便捷和安全的体验，同时也为开发者提供了更低的开发
  • Spring Boot入门（第十一章）：编辑页面 苍_之涛
    1、添加编辑页面我们将新增页面复制一个，修改几处地方我们设计我们的编辑页面的地址将会是/cms/post/edit/1这种形式，地址最后一块就是我们的文章id，所以我们先需要通过文章id获取原来的文章数据。2、添加页面导航方法修改PostController类在这里可以看到，其实我们也可以在后台获取文章id，将变量放到ftl模板里面去获取，为了以后我们更好的理解前后端分离，这里，我们还是通过前端的
  • 为了在前端项目打包后删除 console.log 日志，可以采用不同的方法来实现这一目标。以下是几种常见的方式，包括在 Webpack 和 Vite 中的具体实现。 云只上 前端javascriptvue.js
    在构建Vue应用时，为了提高生产环境的性能和安全性，通常会对代码进行一系列的优化。其中一个常见的优化是在生产环境中移除console.log日志，从而减少不必要的日志输出，提高应用性能webpack生产环境优化1.环境判断首先，我们需要判断当前环境是否为生产环境。这可以通过检查process.env.NODE_ENV环境变量来实现：constisProduction=process.env.NOD
  • Vue3 ElementPlus Table表格实现单选 云只上 vue.jsjavascript前端
    import{ref,reactive,toRefs}from'vue'consttaskTableRef=ref();//表格ref//变量定义conststate=reactive({tableData:[{name:'烬'},{name:'塞拉'},{name:'格温'}],});//主要方法//table选择项发生变化时会触发该事件constselectClick=(selection:a
  • Vue.js 样式绑定 wjs2024 开发语言
    Vue.js样式绑定Vue.js是一种流行的前端框架，它提供了一种简洁而强大的方式来绑定样式到元素上。样式绑定允许开发者根据组件的状态动态地改变元素的样式。在Vue中，样式绑定可以通过多种方式实现，包括类绑定、内联样式绑定和计算属性样式绑定。类绑定类绑定是Vue中最常用的样式绑定方式之一。它允许你根据组件的数据动态地切换元素的类。类绑定可以通过v-bind:class指令实现，也可以简写为:cla
  • 【面试经验】滴滴 秋招储备实习 前端面经 litterfinger 面试经验面试前端职场和发展
    滴滴秋招储备实习前端面经时间线：5.1511点半一面，下午2点半二面一面●自我介绍+项目介绍●拷打项目●文件断点续传+切片上传●不知道盒子宽高情况下水平垂直居中●transform的属性●scale是怎么放大盒子宽高的●数据类型●原型和原型链●做几道js题二面timeline：5.152:30自我介绍拷打项目（这次竟然没问文件上传的实现）v-if和v-show的区别，为什么要用v-show替换v-
  • 前端跨域请求的问题-解决方案2 Good_tea_h 前端
    在前端开发中，跨域请求是一个常见的问题，这主要是由于浏览器的同源策略限制所导致的。同源策略要求协议、域名和端口号三者必须完全相同，才能允许资源的交互。当这些条件不满足时，就会出现跨域问题。针对这个问题，前端有多种解决方案，下面我将详细介绍几种常见的跨域请求方法：1.JSONP（JSONwithPadding）原理：JSONP是一种非官方的跨域数据交互协议，它允许在服务器端集成Scripttags返
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。