浏览器的工作原理及页面性能优化

发表于 2016-11-02 | 分类于笔记

简介

浏览器很可能是使用最广的软件。接下来我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入 google.com 直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么，以及如何以最快速度展示出来。

目前使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。本文中以开放源代码浏览器为例，即 Firefox、Chrome 浏览器和 Safari（部分开源）。由此可见，如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。

目前存在的问题

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。

浏览器结构

用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和呈现引擎之间传送指令。呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。用户界面后端 -
用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 JavaScript
解释器。用于解析和执行 JavaScript 代码。数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

呈现引擎

呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。
然后进行如下所示的基本流程：

呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。

呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

一般，先HTML解析，再CSS解析，再JS解析

主流程示例

Webkit主要流程

Gecko主要流程

其实，可以看出，两种内核虽然一些步骤叫法不一样，但是整体流程基本相同。

阅读全文 »

React 搭配 Redux

发表于 2016-10-17 | 分类于笔记

介绍

动机

redux是管理State的一个东东，所有State都需要经过redux来操作。

基本概念

redux中有三个基本概念，Action，Reducer，Store。

基础

Action

Actions 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。用法是通过 store.dispatch() 把 action 传到 store。

Action 有两个作用。

用Action来分辨具体的执行动作。比如是create 还是delete？或者是update？
操作数据首先得有数据。比如添加数据得有数据，删除数据得有ID。。action就是存这些数据的地方。

Reducer

Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。这是 reducer 要做的事情。

Action就像leader，告诉我们应该做哪些事，并且给我们提供‘资源（就是上面说的数据）’，真正干活的是苦逼的Reducer。

Store

一个应用只有一个Store。

上面章节中，我们学会了使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。

Store 就是把它们联系到一起的对象。Store 有以下职责：

维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器。

Store提供了一些方法。让我们很方便的操作数据。
我们不用关心Reducer和Action是怎么关联在一起的，Store已经帮我们做了这些事。

React 加强篇（一）

发表于 2016-10-13 | 分类于笔记

基础

state 定义简写

getInitialState(){
  return{
    n:1,
    b:2
  }
},
...
render(){
  const {n,b}=this.state;
  ...
  retrun(
    <div>
      {n}-{b}
    </div>
  )
}

扩展

ImmutableJS

ImmutableJs

首先，它虽然和React同期出现且跟React配合很爽，但它可不是React工具集里的（它的光芒被掩盖了），它是一个完全独立的库，无论基于什么框架都可以用它。意义在于它弥补了Javascript没有不可变数据结构的问题。不可变数据结构是函数式编程中必备的。前端工程师被OOP洗脑太久了，组件根本上就是函数用法，FP的特点更适用于前端开发。

API

fromJS()
生成不可变的对象
is()
判断两个数据结构是否相等
List
有序可重复的列表，对应于Array
Set
有序且不可重复的列表
setIn取值
Map
键值对集合，对应于 Object，ES6
get
获取List索引的元素
通过getIn访问嵌套数组中的数据
merge
合并对象
immutableB = immutableA.merge(immutableC)

node使用commander.js创建文件

发表于 2016-09-26 | 分类于笔记

今天说的是commander.js命令行来创建文件及文件夹。

使用背景

最近项目中使用了React组建化开发，每次新建组建都要复制或手动写一大堆的重复代码，无形中增加了自己的工作量。目前前端都已经大量引入node来工程化管理了，自己觉得应该改造一下目前的工作流程。
从网络上看了一些资料，觉得commander.js是一个不错的东西，下面就说一下怎么用。

怎么用

安装包
1
npm install commander --save

引入需要的包：

1 2	var fs = require("fs"); var program = require("commander");

定义新建的文件夹或者文件

var fileTree = (e)=> {
  return {
    "index.html": [ //index.html文件
        '<html>\n',
        '<head>\n',
        '  <meta charset="utf-8"/>\n',
        '  <title>M-'+e+'模块</title>\n',
        '  <link href="/dist/lib/main-pc.css" rel="stylesheet">\n',
        '  <link href="/dist/module/'+_o+'/m/index.css" rel="stylesheet">\n',
        '</head>\n',
        '<body>\n',
        '\n',
        '  <div id="hdM'+e+'"></div>\n',
        '\n',
        '</body>\n',
        '<script type="text/javascript" src="/app/module/'+_o+'/m/data.js"></script>\n',
        '</html>'
    ].join(''),
    "images": {}, //images文件夹
  }

};

新建文件或者文件夹时的逻辑

var CreateDir = {

  base: './app/', //目录

  /**
  * 创建调用
  */

  add(dirName) { //添加的组件名称

    var path = CreateDir.base + dirName;
    if (fs.existsSync(path)) { 
        //文件存在时执行的方法
        
    }

    if (!fs.mkdirSync(path)) {
      //创建成功执行的方法
      CreateDir.create(path, fileTree(dirName));
    } else {
      //创建失败执行的方法
    }
  },

  /**
  * 创建方法
  */
  create(supPath, file) { //创建文件、文件夹
    for (var f in file) {

      var subPath = supPath + "/" + f;

      if (typeof file[f] == "string") { //文件
        if (!fs.writeFileSync(subPath, file[f])) {
          console.log(`文件${subPath} 写入成功！`);
        } else {
          console.log(`文件${subPath} 写入失败！`);
        }
      } 
      else if (typeof file[f] == "object") { //文件夹
        if (!fs.mkdirSync(subPath)) {
          console.log(`文件夹${subPath} 创建成功！`);
          CreateDir.create(subPath, file[f]);
        } else {
          console.error(`文件夹${subPath} 创建失败！`);
        }
      }
    }
  }
};

//调用
program.action((env) => {
  CreateDir.add(env);
});

program.parse(process.argv);

npm调用命令，可在scripts对象中通过npm run **方法调用以上的方法。例如：
1
2
3
"scripts": {
"add": "node add.js"
},

执行npm run add即可。

我们为什么要使用React

发表于 2016-08-29 | 分类于笔记

首先我觉得自己使用React有一段时间了，有必要来记录一些东西。

React很大的特点就是“轻”，再加上VDOM(虚拟DOM)这个很好的idea让React非常非常快（在上面那个测试里面0.3s左右就载入完毕）。另外React和Angular一个很大的不同就是React采用的是one-way data flow。

React是一个JavaScript库文件，使用它的目的在于能够解决构建大的应用和数据的实时变更。

生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，最终它的DOM表现也将有相应的变化，一个组件就是一个状态机：对于特定的输入，它总会返回一致的输出。 React为每个组件提供了生命周期钩子函数去响应不同的时刻，组件的生命周期分为三个部分：

实例化；
存在期；
销毁&清理期。
具体周期如下图所示：

实例化

创建在代码加载过程中至关重要，重要之处体现什么地方呢，这里粗略的简述几点，

实例化是首次加载js展示给用户最直观的内容，效率的高低直接决定体验的好坏；
实例化过程是对数据进行说明和描述的过程；

实例化过程完成了虚拟DOM和真实DOM的生成。下面看下示例来展示当前流程：

var React = require("react");
var ReactDOM = require("react-dom");

var List = React.createClass({
    //1.创建阶段
    getDefaultProps:function() {
        console.log("getDefaultProps");
        return {};
    },

    //2.实例化阶段
    getInitialState:function() {
        console.log("getInitialState");
        return {};
    },

    //render之前调用，业务逻辑都应该放在这里，如对state的操作等
    componentWillMount:function() {
        console.log("componentWillMount");
    },

    //渲染并返回一个虚拟DOM
    render:function() {
        console.log("render");
        return(
            <div> hello <strong> {this.props.name} </strong></div>
            );
    },

    //该方法发生在render方法之后。在该方法中，ReactJS会使用render生成返回的虚拟DOM对象来创建真实的DOM结构
    componentDidMount:function() {
        console.log("componentDidMount");
    },
});

ReactDOM.render(<List name="ReactJS">children</List>, document.body);

上面经历的实例化过程可细分成两个阶段：创建阶段和实例化阶段。

创建阶段

该阶段主要发生在创建组件类的时候，即调用React.createClass的时候。这个阶段只会触发一个getDefaultProps方法，该方法返回一个对象，并且缓存下来。然后与父组件指定的props对象合并，最后赋值给this.props作为该组件的默认属性。对于那些没有被父辈组件指定的props属性的新建实例来说，这个方法返回的对象可用于为实例设置默认的props值。
props属性又是什么呢，它是一个对象，是组件用来接收外面传来的参数的，组件内部是不允许修改自己的props属性的，只能通过父组件来修改。在getDefaultProps方法中，是可以设定props默认值的。

实例化阶段

该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候：

1	ReactDOM.render(<NewView name="ReactJS">children</NewView>, document.body);

调用顺序在demo结果中页：

getDefaultProps 这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合React.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式：

//es7
class Component {
  static defaultProps = {}
}
//或者也可以在外面定义es6
//Compnent.defaultProps

getInitialState 初始化组件的state的值，其返回值会赋值给组件的this.state属性。对于组件的每个实例来说，这个方法的调用次数有且只有一次。与getDefaultProps方法不同的是，每次实例创建时该方法都会被调用一次。getDefaultProps只适合React.createClass使用。使用ES6初始化state方法如下：

class Component extends React.Component{
  constructor(){
    this.state = {
      render: true,
    }
  }
}

componentWillMount 此方法会在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。
render 生成页面需要的虚拟DOM结构，用来表示组件的输出。render方法需要满足：（1）只能通过this.props和this.state访问数据；（2）可以返回null、false或者任何React组件；（3）只能出现一个顶级组件；（4）必需纯净，意味着不能改变组件的状态或者修改DOM的输出。
componentDidMount 该方法发生在render方法成功调用并且真实的DOM已经被渲染之后，在该函数内部可以通过this.getDOMNode()来获取当前组件的节点。然后就可以像Web开发中的那样操作里面的DOM元素了。
上面提到了两个比较生分的术语——state和虚拟DOM
state：是组建的属性，主要用来存储组件自身需要的数据。它是可以改变的，它的每次改变都会引起组件的更新，这也是ReactJS中的关键点之一。每次数据的更新都是通过修改state属性的值，然后ReactJS内部会监听state属性的变化，一旦发生变化，就会主动出发组件的render方法来更新DOM结构。
虚拟DOM：它是ReactJS中提出的一个概念，是将真实的DOM结构映射成一个JSON数据结构，在有数据更改的时候更新真实的DOM，不需修改的时候不更新真实的DOM。

存在期

由1.1可知，此时组件已经渲染好并且用户可以与它进行交互，通常是通过一次鼠标点击、手指点按或者键盘事件来触发一个事件处理器。随着用户改变了组件或者整个应用的state，便会有新的state流入组件结构树。代码如下所示：

var React = require("react");
var ReactDOM = require("react-dom");

var NewView = React.createClass({
    //1.创建阶段
    getDefaultProps:function() {
        console.log("getDefaultProps");
        return {};
    },

    //2.实例化阶段
    getInitialState:function() {
        console.log("getInitialState");
        return {
            num:1
        };
    },

    //render之前调用，业务逻辑都应该放在这里，如对state的操作等
    componentWillMount:function() {
        console.log("componentWillMount");
    },

    //渲染并返回一个虚拟DOM
    render:function() {
        console.log("render");
        return(
            <div> hello <strong> {this.props.name} </strong>
                <button onClick={this.handleAddNumber}> hello <strong> {this.state.num} </strong></button>
            </div>
            );
    },

    //该方法发生在render方法之后。在该方法中，ReactJS会使用render生成返回的虚拟DOM对象来创建真实的DOM结构
    componentDidMount:function() {
        console.log("componentDidMount");
    },

    //3.更新阶段
    componentWillReceiveProps:function() {
        console.log("componentWillReceiveProps");
    },

    //是否需要更新
    shouldComponentUpdate:function() {
        console.log("shouldComponentUpdate");
        return true;
    },

    //将要更新
    componentWillUpdate:function() {
        console.log("componentWillUpdate");
    },

    //更新完毕
    componentDidUpdate:function() {
        console.log("componentDidUpdate");
    },

    //4.销毁阶段
    componentWillUnmount:function() {
        console.log("componentWillUnmount");
    },

    // 处理点击事件
    handleAddNumber:function() {
        console.log("add num");
        this.setState({num:this.state.num+1});
        this.setProps({name:"newName"});
    }
});
ReactDOM.render(<NewView name="ReactJS"></NewView>, document.body);

该段代码的目的是，经历第一阶段实例化阶段，然后提供button按钮，改变state状态，也是调用代码中的handleAddNumber:function()方法，实现第二阶段存在期的更新，该阶段在state状态f发生改变，组件逐渐受到影响。

componentWillReceiveProps 在任意时刻，组件的props都可以通过父辈组件来更改。当组件接收到新的props(这里不同于state）时，会触发该函数，我们同时也获得更改props对象及更新state的机会。
shouldComponentUpdate 该方法用来拦截新的props和state，然后开发者可以根据自己设定逻辑，做出要不要更新render的决定，让它更快。
componentWillUpdate 与componentWillMount方法类似，组件上会接收到新的props或者state渲染之前，调用该方法。但是不可以在该方法中更新state和props。
render 生成页面需要的虚拟DOM结构，并返回该结构
componentDidUpdate 与componentDidMount类似，更新已经渲染好的DOM。

生命周期之销毁&清理

每当react使用完一个组件，这个组件就必须从DOM中卸载随后被销毁。此时，仅有的一个钩子函数会做出响应，完成所有的清理与销毁工作，这很必要。

componentWillUnmount

最后，随着一个组件从它的层级结构中移除，这个组件的生命也就走到了尽头。该方法会在组件被移出之前调被调用。在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如说创建的定时器或者添加的事件监听等。

阅读全文 »

JavaScript arguments对象

发表于 2016-07-26 | 分类于笔记

什么是arguments

在 JavaScript 中，arguments 对象是比较特别的一个对象，实际上是当前函数的一个内置属性。 arguments 非常类似 Array ，但实际上又不是一个 Array 实例。可以通过如下代码得以证实（当然，实际上，在函数 funcArg 中，调用 arguments 是不必要写成 funcArg.arguments，直接写 arguments 即可）。

Array.prototype.testArg = "test";
function funcArg() {
    alert(funcArg.arguments.testArg);  
    alert(funcArg.arguments[0]);
}

alert(new Array().testArg); // result: "test"
funcArg(10);                // result: "undefined"  "10"

使用

在函数体内，标识符 arguments 是指向实参对象的引用，实参对象是一个类数组对象 arguments[0]，arguments.length。

<script type="text/javascript">
// 求圆形面积,矩形面积, 三角形面积
function area () {
　　if(arguments.length == 1) {
　　  alert(3.14 * arguments[0] * arguments[0]);
　　} else if(arguments.length == 2) {
　　  alert(arguments[0] * arguments[1]);
　　} else if(arguments.length == 3) {
　　  alert(arguments[0] + arguments[1] + arguments[2]);
　　} else {
　　  return null;
　　}
}
area(10,20,30);
　　
</script>

移动端Web开发调试之Weinre调试教程

发表于 2016-07-19 | 分类于软件使用

安装

环境配置

node环境安装；
npm install weinre -g npm 项目地址

测试运行

$ weinre 查看是否安装成功

使用

配置

$ weinre --boundHost 10.2.81.58 --httpPort 8910 浏览打开 http://10.2.81.58:8910 即可看到本地安装的 weinre 首页
项目中引入 <script src="http://10.2.81.58:8910/target/target-script-min.js#anonymous"></script>
浏览器访问 http://10.2.81.58:8910/client/#anonymous 即可对源码进行调试

可调式包括微信浏览器、Chrome、Safari等各种内核浏览器，佷方便。

CSS Overflow Hidden在 IOS 不起作用

发表于 2016-07-19 | 分类于笔记

最近在忙调试前端CSS的工作，中间遇到一个奇葩的问题：overflow hidden在ios上不起作用！其他浏览器和手机都可以，唯独Safari不行！幸好后面找到了方法，记录如下。

body {
    position:fixed;
    overflow-y:hidden;
}

这种方法在我的测试中是work的，但是可能会导致页面布局改变。

jQuery 实现的瀑布流

发表于 2016-07-14 | 分类于作品

直接上代码：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Jquery瀑布流布局（每行代码都有详细注释</title>
  <style type="text/css">
    body,
    ul,
    li,
    h3 {
      margin: 0;
      padding: 0;
      list-style: none;
      font: bold 12px "微软雅黑";
    }
    /*瀑布流布局样式*/
    
    #lxf-box {
      position: relative;
    }
    
    #lxf-box li {
      position: absolute;
      background: #fff;
      border: solid 1px #ccc;
      text-align: center;
      padding: 10px;
      left: 0px;
      top: 0;
    }
    
    h3 {
      padding-top: 8px;
    }
    
    img {
      width: 200px;
      height: auto;
      display: block;
      border: 0
    }
    /*css3动画*/
    
    li {
      -webkit-transition: all .7s ease-out .1s;
      -moz-transition: all .7s ease-out;
      -o-transition: all .7s ease-out .1s;
      transition: all .7s ease-out .1s
    }
  </style>
  <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
</head>

<body>
  <ul id="lxf-box">
    <li>
      <a href="http://vsoui.com/"><img src="http://image6.huangye88.com/2013/03/28/2a569ac6dbab1216.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://img1.3lian.com/2015/a2/246/d/58.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://n1.itc.cn/img8/wb/recom/2016/07/14/146845457051493457.JPEG"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p3.so.qhimg.com/bdr/326__/t01d51d0555bd71a76d.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p3.so.qhimg.com/bdr/326__/t011ed903a04d9cf633.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p0.so.qhimg.com/bdr/326__/t019ee6b26618740ea0.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p3.so.qhimg.com/bdr/326__/t01d5e6034ec7672198.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p2.so.qhimg.com/bdr/326__/t01cdcd396d51ca617c.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p1.so.qhimg.com/bdr/326__/t01949ed9cd1e5a73e1.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p3.so.qhimg.com/bdr/326__/t01a86a588ac4ec80ad.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p1.so.qhimg.com/bdr/326__/t01043dc57977aa842b.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p1.so.qhimg.com/bdr/326__/t013001fc98983e1c81.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p0.so.qhimg.com/bdr/326__/t01e67b3890eee29025.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p1.so.qhimg.com/bdr/326__/t01d510ac3dd7f20d21.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p2.so.qhimg.com/bdr/326__/t0143ae2828de1a6897.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p0.so.qhimg.com/bdr/326__/t014407c4e3dfd6632a.jpg"></a>
      <h3>图片标题</h3>
    </li>
    <li>
      <a href="http://vsoui.com/"><img src="http://p4.so.qhimg.com/bdr/326__/t0144640b6809e793d9.jpg"></a>
      <h3>图片标题</h3>
    </li>
  </ul>
  <script>
    var margin = 10; //这里设置间距
    var li = $("li"); //这里是区块名称
    var li_W = li[0].offsetWidth + margin; //取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
    function vsoUi() { //定义成函数便于调用
      var h = []; //记录区块高度的数组
      var n = document.documentElement.offsetWidth / li_W | 0; //窗口的宽度除以区块宽度就是一行能放几个区块
      for (var i = 0; i < li.length; i++) { //有多少个li就循环多少次
        li_H = li[i].offsetHeight; //获取每个li的高度
        if (i < n) { //n是一行最多的li，所以小于n就是第一行了
          h[i] = li_H; //把每个li放到数组里面
          li.eq(i).css("top", 0); //第一行的Li的top值为0
          li.eq(i).css("left", i * li_W); //第i个li的左坐标就是i*li的宽度
        } else {
          min_H = Math.min.apply(null, h); //取得数组中的最小值，区块中高度值最小的那个
          minKey = getarraykey(h, min_H); //最小的值对应的指针
          h[minKey] += li_H + margin; //加上新高度后更新高度值
          li.eq(i).css("top", min_H + margin); //先得到高度最小的Li，然后把接下来的li放到它的下面
          li.eq(i).css("left", minKey * li_W); //第i个li的左坐标就是i*li的宽度
        }
        $("h3").eq(i).text("编号：" + i + "，高度：" + li_H); //把区块的序号和它的高度值写入对应的区块H3标题里面
      }
    }
    /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
    function getarraykey(s, v) {
      for (k in s) {
        if (s[k] == v) {
          return k;
        }
      }
    }
    /*这里一定要用onload，因为图片不加载完就不知道高度值*/
    window.onload = function() {
      vsoUi();
    };
    /*浏览器窗口改变时也运行函数*/
    window.onresize = function() {
      vsoUi();
    };
  </script>
</body>

</html>

React使用过程中常用的技术点记录

发表于 2016-07-01

最近在公司的项目中开始用 React ，没错就是原生的 React 而不是结合 Redux 等什么的，记录一下在开发过程中遇到的各种问题以及对应的解决方法，希望能对读者有所帮助。

React原则

React不多做介绍，就是Facebook的一个开源JS框架，专注的层面为View层，不包括数据访问层或者那种Hash路由（不过React 有插件支持），与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件，React认为一切页面元素都可以抽象成组件，比如一个表单，或者表单中的某一项。

常用的技术要点

props

每一个组件都有可变与不可变的属性，props就是不可变的属性，当props改变时，组件的绘制方法不会被调用。

states

states就是组件的可变属性，states的改变会触发组件的render函数，react与其他mvvm框架的最大的不同点就是，react 组件可以想象成一个状态机，状态的改变会重绘UI，然后根据 dom diff算法来绘制UI，而其他的mvvm框架则是对js对象的dirty check（Angularjs）或者defineProperty时指定的回调函数（Emberjs），因此，状态机制与dom diff的存在声称React更快。

Refs和findDOMNode()

为了同浏览器交互，我们有时候需要获取到真实的DOM节点。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。

查看官方源码

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('example')
);

componentWillMount

渲染前调用一次，这个时候DOM结构还没有渲染。

componentDidMount

渲染完成后调用一次，这个时候DOM结构已经渲染了。这个时候就可以初始化其他框架的设置了，如果利用jQuery绑定事件等等。

componentWillReceiveProps

初始化渲染不会调用，在接收到新的props时，会调用这个方法。

shouldComponentUpdate

初始化渲染不会调用，接收到新的props或state时调用。

componentWillUpdate

初始化渲染不会调用，更新前调用。

componentDidUpdate

初始化渲染不会调用，更新后调用。

componentWillUnmount

组件移除前调用。