index.json

[{"content":"\nState的使用方式是在组件的构造函数中初始化State，在合适的地方调用setState方法，首先来看官方的例子，官方给出了一个文字闪烁的效果：\n```js\nclass Blink extends Component {\n  constructor(props) {\n      super(props);\n      this.state = {showText: true};//这里设置了一个showText，默认值为true\n      // Toggle the state every second\n      setInterval(() =\u003e {\n        this.setState({ showText: !this.state.showText });\n      }, 1000);//这里是一个定时器，每1s会执行一次，调用定时器中的方法，重新给state赋值，注意this.state.showText是获取当前showText的值，同时需要注意的是调用this.setState()后回自动调用 render() 方法从而实现界面的刷新。\n    }\n    render() {\n      let display = this.state.showText ? this.props.text : ' ';//这里通过showText 的值决定diaplay的值，如果为ture 则显示this.props.text属性的值，否则显示‘ ’，this.props.text为自定义属性，let等同于var；\n      return (\n        \u003cText\u003e{display}\u003c/Text\u003e\n      );\n    }\n  }\n```\n在启动组件中使用\n```js\nclass BlinkApp extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cBlink text='I love to blink' /\u003e\n        \u003cBlink text='Yes blinking is so great' /\u003e\n        \u003cBlink text='Why did they ever take this out of HTML' /\u003e\n        \u003cBlink text='Look at me look at me look at me' /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n","cover":"","link":"react-native-state.html","preview":"\u003cp\u003eReact native的组件可以通过两种方式进行状态控制，一种是Props用来设置不会改变的数据，另一种就是State，用来设置会变换的数据。State相当重要，所有的UI界面变化都离不开State。\u003c/p\u003e\n","title":"React Native爬坑之路 03 State"},{"content":"\nProps官网的介绍是：\n\n\u003e Most components can be customized when they are created, with different parameters. These creation parameters are called props.\n\n意思是：组件可以在创建时使用不同的参数进行自定义，这些参数就是Props。\n官网给我们举了一个例子：\n```js\nimport React, { Component } from 'react';\nimport { AppRegistry, Image } from 'react-native';\n\nclass Bananas extends Component {\n  render() {\n    return (\n      \u003cImage source={{ uri: 'https://www.x.com/xxoo.jpg'}} style={{width: 10, height: 20}}/\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('Bananas', () =\u003e Bananas);\n```\nsource就是Image 这个组件的一个属性，同理 style也是。\n再来看一个button的例子\n```js\nrender(){\n  return(\n    \u003cButton\n      onPress={onButtonPress}\n      title=\"Press Me\"\n      accessibilityLabel=\"See an informative alert\"\n    /\u003e\n  );\n  }\n```\n到这里我们应该基本了解了什么是Props吧，在以后实际开发过程中，可以通过API了解各个组件的属性。\n\n以上说的都是已有组件的属性那么我们自定义组件时该如何设置属性呢？官网给的解决办法是：在自定义组件的渲染函数（render）中通过this.props定义你的属性即可。\n还是来看官网的例子（略微修改了一下）\n```js\nclass Greeting extends Component {\n  render() {\n    return (\n      \u003cText\u003e{this.props.name}\u003c/Text\u003e\n    );\n  }\n}\n```\n我们在Greeting 这个自定义组件的渲染函数中通过\u003cText\u003e组件定义了一个名为name的属性，注意看name前边的this.props，同时注意this.props.name是被{}包裹起来的。\n如何使用\n```js\nclass LotsOfGreetings extends Component {\n  render() {\n    return (\n      \u003cView \u003e\n           \u003cGreeting name='Android'\u003e\u003c/Greeting\u003e\n           \u003cGreeting name='iOS'\u003e\u003c/Greeting\u003e\n           \u003cGreeting name='WindowPhone'\u003e\u003c/Greeting\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n\n修改一下Greeting的属性\n```js\nclass Greeting extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e{this.props.name}\u003c/Text\u003e\n        \u003cText\u003e{this.props.subname}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nclass LotsOfGreetings extends Component {\n  render() {\n    return (\n      \u003cView \u003e\n           \u003cGreeting name='Android' subname='iOS'\u003e\u003c/Greeting\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n实现了同样的效果，所以说属性的使用方式还是很灵活的官网其实也说了，实际开发过程中可能需要自定义各种各样的组件，合理使用好组件的属性，从而达到想要的效果。\n","cover":"","link":"react-native-props.html","preview":"\u003cp\u003eProps是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递）。\u003c/p\u003e\n","title":"React Native爬坑之路 02 Props"},{"content":"\n![](http://7rf9ir.com1.z0.glb.clouddn.com/3-3-component-lifecycle.jpg)\n\n如图，可以把组件生命周期大致分为三个阶段:\n\n* 第一阶段:是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；\n* 第二阶段:是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；\n* 第三阶段:是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。\n\n## 生命周期回调函数\n下面来详细介绍生命周期中的各回调函数。\n\n* getDefaultProps\n\n在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。\n\n* componentWillMount\n\n然后，准备加载组件，会调用 componentWillMount()，其原型如下:\n```js\nvoid componentWillMount()\n```\n这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。\n\n* componentDidMount\n\n在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。函数原型如下:\n```js\nvoid componentDidMount()  \n```\n这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。\n\n* componentWillReceiveProps\n\n如果组件收到新的属性（props），就会调用 componentWillReceiveProps()，其原型如下:\n```js\nvoid componentWillReceiveProps(  \n  object nextProps\n)\n```\n输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下:\n```js\ncomponentWillReceiveProps: function(nextProps) {  \n  this.setState({\n    likesIncreasing: nextProps.likeCount \u003e this.props.likeCount\n  });\n}\n```\n\n* shouldComponentUpdate\n\n当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(...)，函数原型如下:\n```js\nboolean shouldComponentUpdate(  \n  object nextProps, object nextState\n)\n```\n输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。\n\n默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。\n\n* componentWillUpdate\n\n如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下:\n```js\nvoid componentWillUpdate(  \n  object nextProps, object nextState\n)\n```\n输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。\n\n* componentDidUpdate\n\n调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下:\n```js\nvoid componentDidUpdate(  \n  object prevProps, object prevState\n)\n```\n因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。\n\n* componentWillUnmount\n\n当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下:\n```js\nvoid componentWillUnmount()  \n```\n在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。\n\n## 总结\n介绍完了完整的生命周期，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格:\n\n生命周期|调用次数|能否setSate?\n:-:|:-:|:-:\ngetDefaultProps|1(全局调用一次)|no\ngetInitialState|1|no\ncomponentWillMount|1|yes\nrender|\u003e=1|no\ncomponentDidMount|1|yes\ncomponentWillReceiveProps|\u003e=0|yes\nshouldComponentUpdate|\u003e=0|no\ncomponentWillUpdate|\u003e=0|no\ncomponentDidUpdate|\u003e=0|no\ncomponentWillUnmount|1|no\n","cover":"","link":"react-native-lifecycle.html","preview":"\u003cp\u003e与Activity类似，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。\u003c/p\u003e\n","title":"React Native爬坑之路 01 生命周期"},{"content":"\n处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就是你。\n我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。\n\nReact 组件之间交流的方式，可以分为以下 3 种：\n\n* 【父组件】向【子组件】传值；\n* 【子组件】向【父组件】传值；\n* 没有任何嵌套关系的组件之间传值（如：兄弟组件之间传值）\n\n## 一、【父组件】向【子组件】传值\n这个是相当容易的，在使用 React 开发的过程中经常会使用到，主要是利用 props 来进行交流。例子如下：\n\n```js\n// 父组件\nvar MyContainer = React.createClass({\n    getInitialState: function () {\n        return {\n            checked: true\n        };\n    },\n    render: function() {\n        return (\n            \u003cToggleButton text=\"Toggle me\" checked={this.state.checked} /\u003e\n        );\n    }\n});\n\n// 子组件\nvar ToggleButton = React.createClass({\n    render: function () {\n        // 从【父组件】获取的值\n        var checked = this.props.checked,\n                text = this.props.text;\n\n        return (\n                \u003clabel\u003e{text}: \u003cinput type=\"checkbox\" checked={checked} /\u003e\u003c/label\u003e\n        );\n    }\n});\n```\n\n如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过 props 传递值的优势就不那么明显了。（PS：所以我建议尽可能的减少组件的层次，就像写 HTML 一样，简单清晰的结构更惹人爱）\n\n```js\n// 父组件\nvar MyContainer = React.createClass({\n    render: function() {\n        return (\n            \u003cIntermediate text=\"where is my son?\" /\u003e\n        );\n    }\n});\n\n// 子组件1：中间嵌套的组件\nvar Intermediate = React.createClass({\n    render: function () {\n        return (\n            \u003cChild text={this.props.text} /\u003e\n        );\n    }\n});\n\n// 子组件2：子组件1的子组件\nvar Child = React.createClass({\n    render: function () {\n        return (\n            \u003cspan\u003e{this.props.text}\u003c/span\u003e\n        );\n    }\n});\n```\n\n### 二、【子组件】向【父组件】传值\n接下来，【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来。因此，我们添加一个 change 事件来做交互。\n\n```js\n// 父组件\nvar MyContainer = React.createClass({\n    getInitialState: function () {\n        return {\n            checked: false\n        };\n    },\n    onChildChanged: function (newState) {\n        this.setState({\n            checked: newState\n        });\n    },\n    render: function() {\n        var isChecked = this.state.checked ? \"yes\" : \"no\";\n        return (\n            \u003cdiv\u003e\n                \u003cdiv\u003eAre you checked: {isChecked}\u003c/div\u003e\n                \u003cToggleButton text=\"Toggle me\"\n                    initialChecked={this.state.checked}\n                    callbackParent={this.onChildChanged}\n                    /\u003e\n            \u003c/div\u003e\n        );\n    }\n});\n\n// 子组件\nvar ToggleButton = React.createClass({\n    getInitialState: function () {\n        return {\n            checked: this.props.initialChecked\n        };\n    },\n    onTextChange: function () {\n        var newState = !this.state.checked;\n        this.setState({\n            checked: newState\n        });\n        // 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值\n        this.props.callbackParent(newState);\n    },\n    render: function () {\n        // 从【父组件】获取的值\n        var text = this.props.text;\n        // 组件自身的状态数据\n        var checked = this.state.checked;\n\n        return (\n                \u003clabel\u003e{text}: \u003cinput type=\"checkbox\" checked={checked} onChange={this.onTextChange} /\u003e\u003c/label\u003e\n        );\n    }\n});\n```\n``这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但是在没有任何工具的情况下也是一种简单的实现方式``\n\n这里会出现一个我们在之前讨论的问题，就是组件有多层嵌套的情况下，你必须要一次传入回调函数给 props 来实现子组件向父组件传值或者操作。\n\n#### Tiny-Tip: React Event System\n在 onChange 事件或者其他 React 事件中，你能够获取以下东西：\n\n* 【this】：指向你的组件\n* 【一个参数】：这个参数是一个 React 合成事件，SyntheticEvent。\n\nReact 对所有事件的管理都是自己实现的，与我们之前使用的 onclick、onchange 事件不一样。从根本上来说，他们都是绑定到 body 上。\n``document.on(\"change\", \"input[data-reactid=\".0.2\"]\", function () {...});``\n上面这份代码不是来自于 React，只是打一个比方而已。\n\n如果我没有猜错的话，React 真正处理一个事件的代码如下：\n\n```js\nvar listenTo = ReactBrowserEventEmitter.listenTo;\n...\nfunction putListener(id, registrationName, listener, transaction) {\n    ...\n    var container = ReactMount.findReactContainerForID(id);\n    if (container) {\n        var doc = container.nodeType === ELEMENT_NODE_TYPE ? container.ownerDocument : container;\n        listenTo(registrationName, doc);\n        }\n    ...\n}\n// 在监听事件的内部，我们能发现如下：\ntarget.addEventListener(eventType, callback, false);\n```\n\n``多个子组件使用同一个回调的情况``\n\n```js\n// 父组件\nvar MyContainer = React.createClass({\n    getInitialState: function () {\n        return {\n            totalChecked: 0\n        };\n    },\n    onChildChanged: function (newState) {\n        var newToral = this.state.totalChecked\n            + (newState ? 1 : -1);\n        this.setState({\n            totalChecked: newToral\n        });\n    },\n    render: function() {\n        var totalChecked = this.state.totalChecked;\n        return (\n            \u003cdiv\u003e\n                \u003cdiv\u003eHow many are checked: {totalChecked}\u003c/div\u003e\n                \u003cToggleButton text=\"Toggle me\"\n                    initialChecked={this.state.checked}\n                    callbackParent={this.onChildChanged}\n                    /\u003e\n                \u003cToggleButton text=\"Toggle me too\"\n                        initialChecked={this.state.checked}\n                        callbackParent={this.onChildChanged}\n                        /\u003e\n                    \u003cToggleButton text=\"And me\"\n                        initialChecked={this.state.checked}\n                        callbackParent={this.onChildChanged}\n                        /\u003e\n            \u003c/div\u003e\n        );\n    }\n});\n\n// 子组件\nvar ToggleButton = React.createClass({\n    getInitialState: function () {\n        return {\n            checked: this.props.initialChecked\n        };\n    },\n    onTextChange: function () {\n        var newState = !this.state.checked;\n        this.setState({\n            checked: newState\n        });\n        // 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值\n        this.props.callbackParent(newState);\n    },\n    render: function () {\n        // 从【父组件】获取的值\n        var text = this.props.text;\n        // 组件自身的状态数据\n        var checked = this.state.checked;\n\n        return (\n                \u003clabel\u003e{text}: \u003cinput type=\"checkbox\" checked={checked} onChange={this.onTextChange} /\u003e\u003c/label\u003e\n        );\n    }\n});\n```\n\n这是非常容易理解的，在父组件中我们增加了一个【totalChecked】来替代之前例子中的【checked】，当子组件改变的时候，使用同一个子组件的回调函数给父组件返回值。\n\n### 三、没有任何嵌套关系的组件之间传值\n如果组件之间没有任何关系，组件嵌套层次比较深（个人认为 2 层以上已经算深了），或者你为了一些组件能够订阅、写入一些信号，不想让组件之间插入一个组件，让两个组件处于独立的关系。对于事件系统，这里有 2 个基本操作步骤：订阅（subscribe）/监听（listen）一个事件通知，并发送（send）/触发（trigger）/发布（publish）/发送（dispatch）一个事件通知那些想要的组件。\n\n下面讲介绍 3 种模式来处理事件，你能点击这里来比较一下它们。\n\n简单总结一下：\n\n- Event Emitter/Target/Dispatcher\n特点：需要一个指定的订阅源\n\n```js\n// to subscribe\notherObject.addEventListener(‘click’, function() { alert(‘click!’); });\n// to dispatch\nthis.dispatchEvent(‘click’);\n```\n\n- Publish / Subscribe\n特点：触发事件的时候，你不需要指定一个特定的源，因为它是使用一个全局对象来处理事件（其实就是一个全局 广播的方式来处理事件）\n\n```js\n// to subscribe\nglobalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); });\n// to dispatch\nglobalBroadcaster.publish(‘click’);\n```\n\n- Signals\n特点：与Event Emitter/Target/Dispatcher相似，但是你不要使用随机的字符串作为事件触发的引用。触发事件的每一个对象都需要一个确切的名字（就是类似硬编码类的去写事件名字），并且在触发的时候，也必须要指定确切的事件。（看例子吧，很好理解）\n\n```js\n// to subscribe\notherObject.clicked.add(function() { alert(‘click’); });\n// to dispatch\nthis.clicked.dispatch();\n```\n\n如果你只想简单的使用一下，并不需要其他操作，可以用简单的方式来实现：\n\n```js\n// 简单实现了一下 subscribe 和 dispatch\nvar EventEmitter = {\n        _events: {},\n        dispatch: function (event, data) {\n                if (!this._events[event]) { // 没有监听事件\n                    return;\n                }\n                for (var i = 0; i \u003c this._events[event].length; i++) {\n                        this._events[event][i](data);\n                }\n        },\n        subscribe: function (event, callback) {\n            // 创建一个新事件数组\n            if (!this._events[event]) {\n                this._events[event] = [];\n            }\n            this._events[event].push(callback);\n        }\n};\notherObject.subscribe(\"namechanged\", function(data) { alert(data.name); });\nthis.dispatch(\"namechanged\", { name: \"John\" });\n```\n\n如果你想使用 Publish/Subscribe 模型，可以使用：PubSubJS\nReact 团队使用的是：js-signals 它基于 Signals 模式，用起来相当不错。\n\n### Events in React\n使用 React 事件的时候，必须关注下面两个方法：\n* componentDidMount\n* componentWillUnmount\n在处理事件的时候，需要注意：\n\n在 componentDidMount 事件中，如果组件挂载（mounted）完成，再订阅事件；当组件卸载（unmounted）的时候，在 componentWillUnmount 事件中取消事件的订阅。\n（如果不是很清楚可以查阅 React 对生命周期介绍的文档，里面也有描述。原文中介绍的是 componentWillMount 个人认为应该是挂载完成后订阅事件，比如Animation这个就必须挂载，并且不能动态的添加，谨慎点更好）\n因为组件的渲染和销毁是由 React 来控制的，我们不知道怎么引用他们，所以EventEmitter 模式在处理组件的时候用处不大。\n\npub/sub 模式可以使用，你不需要知道引用。\n\n下面来一个例子：实现有多个 product 组件，点击他们的时候，展示 product 的名字。\n(我在例子中引入了之前推荐的 PubSubJS 库，如果你觉得引入代价太大，也可以手写一个简版，还是比较容易的，很好用哈，大家也可以体验，但是我还是不推荐全局广播的方式)\n\n```js\n// 定义一个容器\nvar ProductList = React.createClass({\n        render: function () {\n            return (\n                \u003cdiv\u003e\n                    \u003cProductSelection /\u003e\n                    \u003cProduct name=\"product 1\" /\u003e\n                    \u003cProduct name=\"product 2\" /\u003e\n                    \u003cProduct name=\"product 3\" /\u003e\n                \u003c/div\u003e\n            );\n        }\n});\n// 用于展示点击的产品信息容器\nvar ProductSelection = React.createClass({\n    getInitialState: function() {\n        return {\n            selection: \"none\"\n        };\n    },\n    componentDidMount: function () {\n        this.pubsub_token = PubSub.subscribe(\"products\", function (topic, product) {\n            this.setState({\n                selection: product\n            });\n        }.bind(this));\n    },\n    componentWillUnmount: function () {\n        PubSub.unsubscribe(this.pubsub_token);\n    },\n    render: function () {\n        return (\n            \u003cp\u003eYou have selected the product : {this.state.selection}\u003c/p\u003e\n        );\n    }\n});\nvar Product = React.createClass({\n    onclick: function () {\n        PubSub.publish(\"products\", this.props.name);\n    },\n    render: function() {\n        return \u003cdiv onClick={this.onclick}\u003e{this.props.name}\u003c/div\u003e;\n    }\n});\n```\n\n### ES6: yield and js-csp\nES6 中有一种传递信息的方式，使用生成函数(generators)和 yield 关键字。\n\n```js\nfunction* list() {\n        for(var i = 0; i \u003c arguments.length; i++) {\n                yield arguments[i];\n        }\n        return \"done.\";\n}\nvar o = list(1, 2, 3);\nvar cur = o.next;\nwhile(!cur.done) {\n        cur = o.next();\n        console.log(cur);\n}\n```\n\n通常来说，你有一个队列，对象在里面都能找到一个引用，在定义的时候锁住，当发生的时候，立即打开锁执行。js-csp 是一种解决办法，也许以后还会有其他解决办法。\n\n### 结尾\n在实际应用中，按照实际要解决的需求选择解决办法。对于小应用程序，你可以使用 props 和回调的方法进行组件之间的数据交换。你可以通过 pub/sub 模式，以避免污染你的组件。在这里，我们不是在谈论数据，只是组件。对于数据的请求、数据的变化等场景，可以使用 Facebook 的 Flux、Relay、GraphQL 来处理，都非常的好用。","cover":"","link":"react-component-communicate.html","preview":"\u003cp\u003e今天群里面有很多都在讨论关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。\u003c/p\u003e\n","title":"React 组件之间交流"},{"content":"\n熟悉 React 的思想后，我们先来尝试开发一个单纯的小组件，可以对比一下是不是比以前的开发模式更加舒适了，这里我主要以一个 Loading 组件来举栗子，实现了几个基本的功能：\n\n* 一种类型的 loading（菊花转）\n* 能够设置 loading 的三个属性：width height color\n* 能够控制 loading 的显示和隐藏\n\n其实对于一个简单需求来说，这三个属性已经很实用了。但是去网上看一些外国大神写的组件，有一些不明白的地方，所以自己就慢慢搞，do it！\n\n#### 设计\n我想这样用 loadding 组件：\n```js\nvar loadingClasses = cx({\n\tloadding: true,\n\tactive: this.state.isActiveLoading\n\t});\n\n\t\u003cLoading width={30} height={30} color={#000} className={loadingClasses} /\u003e\n```\n所以我定义这个组件的基本结构如下：\n```js\nvar Loading = React.createClass({\n    // 控制组件属性的类型\n    propTypes: {},\n    // 控制组件属性的默认值\n    getDefaultProps: function () {},\n    // 组装基本的内联样式\n    getComponentStyle: function () {},\n    // 渲染基本的组件，拆分 render 方法的粒度\n    renderBaseComp: function () {},\n    // 最终的渲染方法\n    render: function () {}\n});\n```\n这个组件中，我使用的 内联样式 来控制组件的内部基本样式的稳定。其实有时候我们会觉得内联样式不好，但是我个人觉得每一种设置 CSS 形式的方法，用在合适的场景中就是正确的。\n\n每部分的具体实现如下，代码中有一些讲解（这里我不会介绍具体 loading 效果是怎么出来的，看代码应该就会明白，主要介绍一个 react 制作简单组件的思路和写法）对于扩展性来说，\n```\n你还可以加入 className 和 type 这些修饰性的属性，但是我更倾向于迭代式的组件开发，\n小组件就要具有良好的封闭性，使用接口简单。大组件才考虑更好的鲁棒性和可扩展性，\n这样开发一个组件的性价比才高。需要注意对 getDefaultProps的理解，\n只有当使用接口的人代码中根本没有写那个属性的时候，才会使用定义的默认值。\n```\n\n#### 实现\n```js\nvar Loading = React.createClass({\n    propTypes: {\n        width: React.PropTypes.oneOfType([\n            React.PropTypes.number,\n            React.PropTypes.string\n        ]),\n        height: React.PropTypes.oneOfType([\n            React.PropTypes.number,\n            React.PropTypes.string\n        ]),\n        color: React.PropTypes.string,\n        active: React.PropTypes.bool\n    },\n    getDefaultProps: function() {\n        return {\n            color: \"#00be9c\",\n            height: 30,\n            width: 30,\n            active: false\n        };\n    },\n\n    getComponentStyle: function() {\n        var width = this.props.width,\n            height = this.props.height,\n            color = this.props.color;\n        /* 中间圆心 */\n        var cWidth = 0.4 * width,\n            cHeight = 0.4 * height,\n            cMarginLeft = -0.5 * cWidth,\n            cMarginTop = -0.5 * cHeight;\n\n        /* 基本样式 */\n        return {\n            loadingStyle: { // loadding 容器\n                width: width,\n                height: height\n            },\n            lineStyle: { // loadding 元件样式\n                background: color\n            },\n            centerStyle: { // loadding 圆心样式\n                width: cWidth,\n                height: cHeight,\n                marginLeft: cMarginLeft,\n                marginTop: cMarginTop\n            }\n        };\n    },\n\n    renderBaseComp: function(compStyle) {\n        /* 生成动画元件 */\n        var n = 4; // 元件个数，todo: 定制个数\n        var lines = []; // 元件元素集合\n        for (var i = 0; i \u003c n; i++) {\n            lines.push(\n                \u003cdiv className=\"line\"\u003e\n                    \u003cspan className=\"top\" style={ compStyle.lineStyle }\u003e\u003c/span\u003e\n                    \u003cspan className=\"bottom\" style={ compStyle.lineStyle }\u003e\u003c/span\u003e\n                \u003c/div\u003e\n            );\n        }\n        return lines;\n    },\n\n    render: function() {\n        /* 生成组件自己的样式 */\n        var compStyle = this.getComponentStyle();\n        /* 模拟渲染基本动画元件 */\n        var lines = this.renderBaseComp(compStyle);\n\n        // loadding 的class，控制交互\n        var loadingClasses = cx({\n            loading: true,\n            active: this.props.active\n        });\n\n        return (\n            \u003cdiv className={ loadingClasses } style={ compStyle.loadingStyle }\u003e\n                {lines}\n                \u003cdiv className=\"loading-center\" style={ compStyle.centerStyle }\u003e\u003c/div\u003e\n            \u003c/div\u003e\n\n        );\n    }\n\n});\n```\n\n##### 最后，下面是基本的 SASS（不考虑不支持的情况，不支持都不用开发，直接用图，性价比更高）\n\n```css\n@include keyframes(load) {\n    0% {\n        opacity: 0;\n    }\n    25% {\n        opacity: .25;\n    }\n    50% {\n        opacity: .5;\n    }\n    75% {\n        opacity: .75;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n.loading {\n    display: none;\n    position: absolute;\n    \u0026.active {\n        display: block;\n    }\n    .loading-center {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        background: #fff;\n        border-radius: 50%;\n    }\n    .line {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        .top {\n            content: \"\";\n            display: block;\n            width: 1px;\n            font-size: 0;\n            height: 50%;\n        }\n        .bottom {\n            @extend .top;\n        }\n        @for $i from 1 through 4 {\n            \u0026:nth-child(#{$i}) {\n                transform:rotate(45deg * ($i - 1));\n                .top {\n                    @include animation(load, 0.8s, linear, 0s, infinite);\n                }\n                .bottom {\n                    @include animation(load, 0.8s, linear, 0.4s + $i/10, infinite);\n                }\n            }\n        }\n    }\n}\n```\n里面用到的一个 animation 混淆方法：\n```css\n@mixin keyframes($name) {\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-ms-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation ($name, $duration, $func, $delay, $count, $direction: normal) {\n    -webkit-animation: $name $duration $func $delay $count $direction;\n    -moz-animation: $name $duration $func $delay $count $direction;\n    -o-animation: $name $duration $func $delay $count $direction;\n    animation: $name $duration $func $delay $count $direction;\n}\n```","cover":"","link":"induction-react-component.html","preview":"\u003cp\u003e熟悉 React 的思想后，我们先来尝试开发一个单纯的小组件，可以对比一下是不是比以前的开发模式更加舒适了。\u003c/p\u003e\n","title":"React 组件开发入门"},{"content":"\nasync 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。\n想较于 Generator，Async 函数的改进在于下面四点：\n* 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样\n* 更好的语义。async 和 await 相较于 * 和 yield 更加语义化\n* 更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）\n* 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用\n\n## Async 与其他异步操作的对比\n\n先定义一个 Fetch 方法用于获取用户信息：\n```js\nfunction fetchUser() {\n    return new Promise((resolve, reject) =\u003e {\n        fetch('www.xxx.com')\n        .then((data) =\u003e {\n            resolve(data.json());\n        }, (error) =\u003e {\n            reject(error);\n        })\n    });\n}\n```\n\n* Promise 方式\n\n```js\nfunction getUserByPromise() {\n    fetchUser()\n        .then((data) =\u003e {\n            console.log(data);\n        }, (error) =\u003e {\n            console.log(error);\n        })\n}\ngetUserByPromise();\n```\nPromise 的方式虽然解决了 callback hell，但是这种方式充满了 Promise的 then() 方法，如果处理流程复杂的话，整段代码将充满 then。语义化不明显，代码流程不能很好的表示执行流程。\n\n* Generator 方式\n\n```js\nfunction* fetchUserByGenerator() {\n    const user = yield fetchUser();\n    return user;\n}\n\nconst g = fetchUserByGenerator();\nconst result = g.next().value;\nresult.then((v) =\u003e {\n    console.log(v);\n}, (error) =\u003e {\n    console.log(error);\n})\n```\nGenerator 的方式解决了 Promise 的一些问题，流程更加直观、语义化。但是 Generator 的问题在于，函数的执行需要依靠执行器，每次都需要通过 g.next() 的方式去执行。\n\n* async 方式\n\n```js\n async function getUserByAsync(){\n     let user = await fetchUser();\n     return user;\n }\ngetUserByAsync()\n.then(v =\u003e console.log(v));\n```\nasync 函数完美的解决了上面两种方式的问题。流程清晰，直观、语义明显。操作异步流程就如同操作同步流程。同时 async 函数自带执行器，执行的时候无需手动加载。\n\n## 语法\n\nasync 函数返回一个 Promise 对象\n\nasync 函数内部 return 返回的值。会成为 then 方法回调函数的参数。\n```js\nasync function  f() {\n    return 'hello world'\n};\nf().then( (v) =\u003e console.log(v)) // hello world\n```\n如果 async 函数内部抛出异常，则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。\n```js\nasync function e(){\n    throw new Error('error');\n}\ne().then(v =\u003e console.log(v))\n.catch( e =\u003e console.log(e));\n```\n\nasync 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变\n也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。\n```js\nconst delay = timeout =\u003e new Promise(resolve=\u003e setTimeout(resolve, timeout));\nasync function f(){\n    await delay(1000);\n    await delay(2000);\n    await delay(3000);\n    return 'done';\n}\n\nf().then(v =\u003e console.log(v)); // 等待6s后才输出 'done'\n```\n正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise\n如下面这个例子：\n```js\nasync function  f() {\n    return await 1\n};\nf().then( (v) =\u003e console.log(v)) // 1\n```\n如果返回的是 reject 的状态，则会被 catch 方法捕获。\n\n## Async 函数的错误处理\n\nasync 函数的语法不难，难在错误处理上。\n先来看下面的例子：\n```js\nlet a;\nasync function f() {\n    await Promise.reject('error');\n    a = await 1; // 这段 await 并没有执行\n}\nf().then(v =\u003e console.log(a));\n```\n如上面所示，当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。\n解决办法：可以添加 try/catch。\n```js\n// 正确的写法\nlet a;\nasync function correct() {\n    try {\n        await Promise.reject('error')\n    } catch (error) {\n        console.log(error);\n    }\n    a = await 1;\n    return a;\n}\n\ncorrect().then(v =\u003e console.log(a)); // 1\n```\n如果有多个 await 则可以将其都放在 try/catch 中。\n\n## 如何在项目中使用\n\n依然是通过 babel 来使用。\n只需要设置 presets 为 stage-3 即可。\n安装依赖：\n```js\nnpm i babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-transform-runtime\n```\n修改.babelrc:\n```json\n\"presets\": [\"es2015\", \"stage-3\"],\n\"plugins\": [\"transform-runtime\"]\n```\n这样就可以在项目中使用 async 函数了。\n","cover":"","link":"async-await.html","preview":"\u003cp\u003e刚出来不久的 ES8 包含了 async 函数，它的出现，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。\u003c/p\u003e\n","title":"理(瞎)解(说) async/await"},{"content":"\n由于 FetchAPI 是基于 Promise 设计，有必要先学习一下 Promise\n\n## 语法说明\n\n```js\nfetch(url, options).then((res) =\u003e {\n    // handle HTTP response\n}).catch((err) =\u003e {\n\t// handle network error\n})\n```\n\n## 参数说明\n\n### url\n\n定义要获取的资源。这可能是：\n\n* 一个 USVString 字符串，包含要获取资源的 URL。\n* 一个 Request 对象。\n\n### options（可选）\n\n一个配置项对象，包括所有对请求的设置。可选的参数有：\n\n* method: 请求使用的方法，如 GET、POST。\n* headers: 请求的头信息，形式为 Headers 对象或 ByteString。\n* body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。\n* mode: 请求的模式，如 cors、 no-cors 或者 same-origin。\n* credentials: 请求的 credentials，如 omit、same-origin 或者 include。\n* cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。\n\n### response\n\n一个 Promise，resolve 时回传 Response 对象：\n\n* 属性：\n\n1. status (number) - HTTP请求结果参数，在100–599 范围\n2. statusText (String) - 服务器返回的状态报告\n3. ok (boolean) - 如果返回200表示请求成功则为true\n4. headers (Headers) - 返回头部信息，下面详细介绍\n5. url (String) - 请求的地址\n\n* 方法：\n\n1. text() - 以string的形式生成请求text\n2. json() - 生成JSON.parse(responseText)的结果\n3. blob() - 生成一个Blob\n4. arrayBuffer() - 生成一个ArrayBuffer\n5. formData() - 生成格式化的数据，可用于其他的请求\n\n* 其他方法：\n\n1. clone()\n2. Response.error()\n3. Response.redirect()\n\n### response.headers\n\n- has(name) (boolean) - 判断是否存在该信息头\n- get(name) (String) - 获取信息头的数据\n- getAll(name) (Array) - 获取所有头部数据\n- set(name, value) - 设置信息头的参数\n- append(name, value) - 添加header的内容\n- delete(name) - 删除header的信息\n- forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息\n\n## 使用案例\n* GET\n\n```js\nfetch('/user').then((res) =\u003e {\n    return res.text()\n  }).then((res) =\u003e {\n    console.log(res)\n  })\n```\n\n* POST\n\n```js\nfetch('/users', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json'\n  },\n  body: JSON.stringify({\n    name: 'robot',\n    code: '198964',\n  })\n}).then((res) =\u003e {\n\tconsole.log(res)\n})\n```\n\n## 封装fetch\n\n```js\n/**\n * 将对象转成 a=1\u0026b=2的形式\n * @param obj 对象\n */\nfunction obj2String(obj, arr = [], idx = 0) {\n  for (let item in obj) {\n    arr[idx++] = [item, obj[item]]\n  }\n  return new URLSearchParams(arr).toString()\n}\n\n/**\n * 真正的请求\n * @param url 请求地址\n * @param options 请求参数\n * @param method 请求方式\n */\nfunction commonFetcdh(url, options, method = 'GET') {\n  const searchStr = obj2String(options)\n  let initObj = {}\n  if (method === 'GET') { // 如果是GET请求，拼接url\n    url += '?' + searchStr\n    initObj = {\n      method: method,\n      credentials: 'include'\n    }\n  } else {\n    initObj = {\n      method: method,\n      credentials: 'include',\n      headers: new Headers({\n        'Accept': 'application/json',\n        'Content-Type': 'application/json'\n      }),\n      body: searchStr\n    }\n  }\n  fetch(url, initObj).then((res) =\u003e {\n    return res.json()\n  }).then((res) =\u003e {\n    return res\n  })\n}\n\n/**\n * GET请求\n * @param url 请求地址\n * @param options 请求参数\n */\nfunction GET(url, options) {\n  return commonFetcdh(url, options, 'GET')\n}\n\n/**\n * POST请求\n * @param url 请求地址\n * @param options 请求参数\n */\nfunction POST(url, options) {\n  return commonFetcdh(url, options, 'POST')\n}\n```\n\n```http\nGET('https://www.xxxxxx.com/search/error.html', {a:1,b:2})\nPOST('https://www.xxxxxx.com/search/error.html', {a:1,b:2})\n```\n\n## CORS跨域\n如果服务器支持 CORS, 则在客户端设置相应的  ``Access-Control-Allow-Origin``  即可得到数据。\n\n```js\nlet myHeaders = new Headers({\n    'Access-Control-Allow-Origin': '*',\n    'Content-Type': 'text/plain'\n});\nfetch(url, {\n    method: 'GET',\n    headers: myHeaders,\n    mode: 'cors'\n}).then((res) =\u003e {\n    // TODO \n})\n```\n","cover":"","link":"introduction-to-fetch.html","preview":"\u003cp\u003efetch能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它的主要区别是，Fetch API 使用了 Promise，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。\u003c/p\u003e\n","title":"浅谈fetch及跨域"},{"content":"\n## 1. 路由变化页面数据不刷新问题\n出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据。\n\n- 解决方法：watch监听路由是否变化。\n\n```js\n watch: {\n // 方法1\n  '$route' (to, from) { //监听路由是否变化\n    if(this.$route.params.articleId){// 判断条件1  判断传递值的变化\n      //获取文章数据\n    }\n  }\n  //方法2\n  '$route'(to, from) {\n    if (to.path == \"/page\") {    /// 判断条件2  监听路由名 监听你从什么路由跳转过来的\n       this.message = this.$route.query.msg     \n    }\n  }\n  \n}\n```\n\n## 2. 异步回调函数中使用this无法指向vue实例对象\n- 解决方法：变量赋值和箭头函数。\n\n```js\n //使用变量访问this实例\nlet self=this;   \n    setTimeout(function () {  \n      console.log(self);//使用self变量访问this实例\n    },1000);\n    \n //箭头函数访问this实例 因为箭头函数本身没有绑定this\n setTimeout(() =\u003e { \n   console.log(this);\n }, 500);\n ```\n\n## 3. setInterval路由跳转继续运行并没有及时进行销毁\n比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。\n\n- 解决办法：在组件生命周期beforeDestroy停止setInterval。\n\n```js\n//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。\nbeforeDestroy(){\n     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。\n    clearInterval(this.intervalId);\n},\n```\n\n## 4. 实现vue路由拦截浏览器的需求,进行一系列操作 草稿保存等等\n为了防止用户失误点错关闭按钮等等，导致没有保存已输入的信息(关键信息)。\n\n- 解决方法：(见下方代码)\n\n```js\nbeforeRouteLeave (to, from, next) {\n  if(用户已经输入信息){\n    //出现弹窗提醒保存草稿，或者自动后台为其保存\n  }else{\n    next(true);//用户离开\n  }\n}\n```\n\n## 5. vue本地代理配置 解决跨域问题,仅限于dev环境\n这个本地代理用来解决开发环境下的跨域问题,跨域可谓老生常谈的问题了，proxy 在vue中配置代理非常简单。\n\n- 解决方法：(见下方代码)\n\n```js\n//比方说你要访问 http://192.168.1.xxx:8888/backEnd/paper这个接口\n//配置  config.js下面proxyTable对象\nproxyTable: {\n            '/backEnd':{\n                target:'http://192.168.1.xxx:8888', //目标接口域名有端口可以把端口也写上\n                changeOrigin:true\n            }\n},\n// 发送request请求\n   axios.get('/backEnd/page')  //按代理配置 匹配到/backEnd就代理到目标target地址\n    .then((res) =\u003e {\n       console.log(res) // 数据完全拿得到  配置成功\n      this.newsList = res.data\n    }, (err) =\u003e {\n      console.log(err)\n    })\n```","cover":"","link":"vue-vulnerable.html","preview":"\u003cp\u003evue如今可谓是一匹黑马，github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了，本篇是我在使用vue过程中遇到的一些惊(坑)喜(爹)。\u003c/p\u003e\n","title":"Vue 使用中踩过的坑"},{"content":"\n因项目登录界面用到Loading和Toast, 网上逛了一圈, 全是一整套组件, 有些东西又用不上, 太冗余了, 无奈自己撸个。\n\n### 定义js和css\n\n* JS\n\n```js\nvar Toast = {};\nvar showToast = false,\n  showLoad = false,\n  toastVM = null,\n  loadNode = null;\n\nToast.install = function (Vue, options) {\n  var opt = {\n    defaultType: 'bottom',\n    duration: '2500',\n    wordWrap: false\n  };\n  for (var property in options) {\n    opt[property] = options[property];\n  }\n\n  Vue.prototype.$toast = function (tips, type) {\n    var curType = type ? type : opt.defaultType;\n    var wordWrap = opt.wordWrap ? 'lx-word-wrap' : '';\n    var style = opt.width ? 'style=\"width: ' + opt.width + '\"' : '';\n    var tmp = '\u003cdiv v-show=\"show\" :class=\"type\" class=\"lx-toast ' + wordWrap + '\" ' + style + '\u003e{{tip}}\u003c/div\u003e';\n\n    if (showToast) {\n      return;\n    }\n    if (!toastVM) {\n      var toastTpl = Vue.extend({\n        data: function () {\n          return {\n            show: showToast,\n            tip: tips,\n            type: 'lx-toast-' + curType\n          }\n        },\n        template: tmp\n      });\n      toastVM = new toastTpl()\n      var tpl = toastVM.$mount().$el;\n      document.body.appendChild(tpl);\n    }\n    toastVM.type = 'lx-toast-' + curType;\n    toastVM.tip = tips;\n    toastVM.show = showToast = true;\n\n    setTimeout(function () {\n      toastVM.show = showToast = false;\n    }, opt.duration)\n  };\n\n  ['bottom', 'center', 'top'].forEach(function (type) {\n    Vue.prototype.$toast[type] = function (tips) {\n      return Vue.prototype.$toast(tips, type)\n    }\n  });\n\n  Vue.prototype.$loading = function (tips, type) {\n    if (type == 'close') {\n      loadNode.show = showLoad = false;\n    } else {\n      if (showLoad) {\n        return;\n      }\n      var loadTpl = Vue.extend({\n        data: function () {\n          return {\n            show: showLoad\n          }\n        },\n        template: '\u003cdiv v-show=\"show\" class=\"lx-load-mark\"\u003e\u003cdiv class=\"lx-load-box\"\u003e\u003cdiv class=\"lx-loading\"\u003e\u003cdiv class=\"loading loading_0\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_1\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_2\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_3\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_4\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_5\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_6\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_7\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_8\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_9\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_10\"\u003e\u003c/div\u003e\u003cdiv class=\"loading loading_11\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"lx-load-content\"\u003e' + tips + '\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e'\n      });\n      loadNode = new loadTpl();\n      var tpl = loadNode.$mount().$el;\n      document.body.appendChild(tpl);\n      loadNode.show = showLoad = true;\n    }\n  };\n\n  ['open', 'close'].forEach(function (type) {\n    Vue.prototype.$loading[type] = function (tips) {\n      return Vue.prototype.$loading(tips, type)\n    }\n  });\n}\n\nmodule.exports = Toast;\n```\n\n* CSS\n\n```css\n.lx-toast {position:fixed;bottom:100px;left:50%;box-sizing:border-box;max-width:80%;height:40px;line-height:20px;padding:10px 20px;transform:translateX(-50%);-webkit-transform:translateX(-50%);text-align:center;z-index:9999;font-size:14px;color:#fff;border-radius:5px;background:rgba(0,0,0,0.7);animation:show-toast .5s;-webkit-animation:show-toast .5s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.lx-toast.lx-word-wrap {width:80%;white-space:inherit;height:auto;}\n.lx-toast.lx-toast-top {top:50px;bottom:inherit;}\n.lx-toast.lx-toast-center {top:50%;margin-top:-20px;bottom:inherit;}\n@keyframes show-toast {from {opacity:0;transform:translate(-50%,-10px);-webkit-transform:translate(-50%,-10px);}\nto {opacity:1;transform:translate(-50%,0);-webkit-transform:translate(-50%,0);}\n}\n.lx-load-mark {position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;}\n.lx-load-box {position:fixed;z-index:3;width:7.6em;min-height:7.6em;top:180px;left:50%;margin-left:-3.8em;background:rgba(0,0,0,0.7);text-align:center;border-radius:5px;color:#FFFFFF;}\n.lx-load-content {margin-top:64%;font-size:14px;}\n.lx-loading {position:absolute;width:0px;left:50%;top:38%;}\n.loading {position:absolute;top:-1px;opacity:0.25;}\n.loading:before {content:\" \";position:absolute;width:9.14px;height:3.08px;background:#d1d1d5;box-shadow:rgba(0,0,0,0.0980392) 0px 0px 1px;border-radius:1px;-webkit-transform-origin:left 50% 0px;transform-origin:left 50% 0px;}\n.loading_0 {-webkit-animation:opacity-0 1.25s linear infinite;animation:opacity-0 1.25s linear infinite;}\n.loading_0:before {-webkit-transform:rotate(0deg) translate(7.92px,0px);transform:rotate(0deg) translate(7.92px,0px);}\n.loading_1 {-webkit-animation:opacity-1 1.25s linear infinite;animation:opacity-1 1.25s linear infinite;}\n.loading_1:before {-webkit-transform:rotate(30deg) translate(7.92px,0px);transform:rotate(30deg) translate(7.92px,0px);}\n.loading_2 {-webkit-animation:opacity-2 1.25s linear infinite;animation:opacity-2 1.25s linear infinite;}\n.loading_2:before {-webkit-transform:rotate(60deg) translate(7.92px,0px);transform:rotate(60deg) translate(7.92px,0px);}\n.loading_3 {-webkit-animation:opacity-3 1.25s linear infinite;animation:opacity-3 1.25s linear infinite;}\n.loading_3:before {-webkit-transform:rotate(90deg) translate(7.92px,0px);transform:rotate(90deg) translate(7.92px,0px);}\n.loading_4 {-webkit-animation:opacity-4 1.25s linear infinite;animation:opacity-4 1.25s linear infinite;}\n.loading_4:before {-webkit-transform:rotate(120deg) translate(7.92px,0px);transform:rotate(120deg) translate(7.92px,0px);}\n.loading_5 {-webkit-animation:opacity-5 1.25s linear infinite;animation:opacity-5 1.25s linear infinite;}\n.loading_5:before {-webkit-transform:rotate(150deg) translate(7.92px,0px);transform:rotate(150deg) translate(7.92px,0px);}\n.loading_6 {-webkit-animation:opacity-6 1.25s linear infinite;animation:opacity-6 1.25s linear infinite;}\n.loading_6:before {-webkit-transform:rotate(180deg) translate(7.92px,0px);transform:rotate(180deg) translate(7.92px,0px);}\n.loading_7 {-webkit-animation:opacity-7 1.25s linear infinite;animation:opacity-7 1.25s linear infinite;}\n.loading_7:before {-webkit-transform:rotate(210deg) translate(7.92px,0px);transform:rotate(210deg) translate(7.92px,0px);}\n.loading_8 {-webkit-animation:opacity-8 1.25s linear infinite;animation:opacity-8 1.25s linear infinite;}\n.loading_8:before {-webkit-transform:rotate(240deg) translate(7.92px,0px);transform:rotate(240deg) translate(7.92px,0px);}\n.loading_9 {-webkit-animation:opacity-9 1.25s linear infinite;animation:opacity-9 1.25s linear infinite;}\n.loading_9:before {-webkit-transform:rotate(270deg) translate(7.92px,0px);transform:rotate(270deg) translate(7.92px,0px);}\n.loading_10 {-webkit-animation:opacity-10 1.25s linear infinite;animation:opacity-10 1.25s linear infinite;}\n.loading_10:before {-webkit-transform:rotate(300deg) translate(7.92px,0px);transform:rotate(300deg) translate(7.92px,0px);}\n.loading_11 {-webkit-animation:opacity-11 1.25s linear infinite;animation:opacity-11 1.25s linear infinite;}\n.loading_11:before {-webkit-transform:rotate(330deg) translate(7.92px,0px);transform:rotate(330deg) translate(7.92px,0px);}\n@-webkit-keyframes opacity-0 {0% {opacity:0.25;}\n0.01% {opacity:0.25;}\n0.02% {opacity:1;}\n60.01% {opacity:0.25;}\n100% {opacity:0.25;}\n}\n@-webkit-keyframes opacity-1 {0% {opacity:0.25;}\n8.34333% {opacity:0.25;}\n8.35333% {opacity:1;}\n68.3433% {opacity:0.25;}\n100% {opacity:0.25;}\n}\n@-webkit-keyframes opacity-2 {0% {opacity:0.25;}\n16.6767% {opacity:0.25;}\n16.6867% {opacity:1;}\n76.6767% {opacity:0.25;}\n100% {opacity:0.25;}\n}\n@-webkit-keyframes opacity-3 {0% {opacity:0.25;}\n25.01% {opacity:0.25;}\n25.02% {opacity:1;}\n85.01% {opacity:0.25;}\n100% {opacity:0.25;}\n}\n@-webkit-keyframes opacity-4 {0% {opacity:0.25;}\n33.3433% {opacity:0.25;}\n33.3533% {opacity:1;}\n93.3433% {opacity:0.25;}\n100% {opacity:0.25;}\n}\n@-webkit-keyframes opacity-5 {0% {opacity:0.270958333333333;}\n41.6767% {opacity:0.25;}\n41.6867% {opacity:1;}\n1.67667% {opacity:0.25;}\n100% {opacity:0.270958333333333;}\n}\n@-webkit-keyframes opacity-6 {0% {opacity:0.375125;}\n50.01% {opacity:0.25;}\n50.02% {opacity:1;}\n10.01% {opacity:0.25;}\n100% {opacity:0.375125;}\n}\n@-webkit-keyframes opacity-7 {0% {opacity:0.479291666666667;}\n58.3433% {opacity:0.25;}\n58.3533% {opacity:1;}\n18.3433% {opacity:0.25;}\n100% {opacity:0.479291666666667;}\n}\n@-webkit-keyframes opacity-8 {0% {opacity:0.583458333333333;}\n66.6767% {opacity:0.25;}\n66.6867% {opacity:1;}\n26.6767% {opacity:0.25;}\n100% {opacity:0.583458333333333;}\n}\n@-webkit-keyframes opacity-9 {0% {opacity:0.687625;}\n75.01% {opacity:0.25;}\n75.02% {opacity:1;}\n35.01% {opacity:0.25;}\n100% {opacity:0.687625;}\n}\n@-webkit-keyframes opacity-10 {0% {opacity:0.791791666666667;}\n83.3433% {opacity:0.25;}\n83.3533% {opacity:1;}\n43.3433% {opacity:0.25;}\n100% {opacity:0.791791666666667;}\n}\n@-webkit-keyframes opacity-11 {0% {opacity:0.895958333333333;}\n91.6767% {opacity:0.25;}\n91.6867% {opacity:1;}\n51.6767% {opacity:0.25;}\n100% {opacity:0.895958333333333;}\n}\n```\n\n### Main.js引入Toast\n\n```js\nimport './components/Toast/toast.css';\nimport Toast from './components/Toast/toast.js';\n\nVue.use(Toast);\n```\n\n### 页面调用\n\n```js\nthis.$toast.top('要显示内容'); //在顶部显示\n```\n\n```js\nthis.$toast.center('要显示内容'); //在中部显示\n```\n\n```js\nthis.$toast.bottom('要显示内容'); //在低部显示(默认在底部显示)\n```\n\n```js\nthis.$loading('要显示内容'); //显示Loading\n```\n\n```js\nthis.$loading.close(); //关闭Loading\n```\n","cover":"","link":"vue-loading-toast.html","preview":"\u003cp\u003e因项目登录界面用到Loading和Toast, 网上逛了一圈, 全是一整套组件, 有些东西又用不上, 太冗余了, 无奈自己撸个。\u003c/p\u003e\n","title":"Vue自定义Loading、Toast组件"},{"content":"\n\u003e 首先说一下我遇到的需求。\n\n\u003e 有一个商品列表页，当列表滚动到底部时，继续往上拉，加载更多商品，里面的数据都是后端返回的，接口情况大致如下：\n\n\u003e www.xxx.com/?``limit``=xxx\u0026``offset``=xxx\n\n\u003e ``limit``是控制每次上拉刷新的数量，``offset``是控制从当前商品开始往下加载。\n\n# 实现原理\n当第一次访问接口时，传递2个必备参数（即limit和offset参数），后台返回数据过来，在请求成功的回调函数中，取出数据，渲染到视图层，并把Toast在列表显示出来；当判断返回的数据长度为0时，则没有数据可取，并把“没有更多了”显示出来。\n当用户已经滚动到列表底部（这里使用到小程序提供的onReachBottom事件），当每次触发onReachBottom事件，offset就会增加，再把2个必备参数（第2次加载，需要返回数据的个数）给后台，后台把其余的数据返回给前台，前台在原来数据的基础上往下增加新的商品数据。\n\n```js\n  Page({\n  \tdata: {\n  \t\torigin_limit: 6,   //控制每次加载的数量\n  \t\torigin_offset: 0, //先初始化商品起始点\n  \t\tproList: [] //放置返回数据的数组  \n  \t｝\n  })\n```\n\n```js \n//下拉加载更多\n  onReachBottom(){\n    let that = this;\n    let prolistAdd = that.data.proList;\n\n    wx.showLoading({         //滚动到底部，弹出Loading。\n      title: '拼命加载中..',\n      duration: 5000\n    })\n\n    wx.request({\n      url: 'www.xxx.com',\n      data: {\n        limit: that.data.orgin_limit,\n        offset: that.data.orgin_offset\n      },\n      success: function (res) {\n        wx.hideLoading();  //当请求成功时，隐藏Loading。\n        that.setData({\n          proList: prolistAdd.concat(res.data.objects), //在原来数据的基础上，增加新加载的商品数据并渲染到视图层。\n          orgin_offset: that.data.orgin_offset + 6  //当每次触发上拉事件，offset就会在原数值上增加6。\n        })\n        if (res.data.objects.length == 0) {  //当判断返回的数据长度为0，则没有数据可取，并把“没有更多了”显示出来。\n            wx.showToast({\n              title: '没有更多了',\n              icon: 'none',\n              duration: 3000\n            })\n        }\n      }\n    })\n  },\n```\n\n```js\n//把下拉加载更多放到onLoad里面即可\n  onLoad: function () {\n    this.onReachBottom();\n  },\n```","cover":"","link":"weapp-loadmore.html","preview":"\u003cp\u003e微信小程序开发中遇到的坑, 总有些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~当用户打开一个页面时，假设后台数据量庞大时，一次性地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次性返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。\u003c/p\u003e\n","title":"微信小程序上拉加载更多的思(坑)路"},{"content":"\nTalk is cheap, show your code: \n\n```js\n\u003ctemplate\u003e\n    \u003cdiv class=\"loadmore\"\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n        \u003cslot name=\"bottom\"\u003e\n        \u003c/slot\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n    .loadmore{\n        width:100%;\n    }\n\u003c/style\u003e\n\n\u003cscript\u003e\n    export default {\n        name: 'loadmore',\n        props: {\n            maxDistance: {\n                type: Number,\n                default: 0\n            },\n            autoFill: {\n                type: Boolean,\n                default: true\n            },\n            distanceIndex: {\n                type: Number,\n                default: 2\n            },\n            bottomPullText: {\n                type: String,\n                default: '上拉刷新'\n            },\n            bottomDropText: {\n                type: String,\n                default: '释放更新'\n            },\n            bottomLoadingText: {\n                type: String,\n                default: '加载中...'\n            },\n            bottomDistance: {\n                type: Number,\n                default: 70\n            },\n            bottomMethod: {\n                type: Function\n            },\n            bottomAllLoaded: {\n                type: Boolean,\n                default: false\n            },\n        },\n        data() {\n            return {\n                // 最下面出现的div的位移\n                translate: 0,\n                // 选择滚动事件的监听对象\n                scrollEventTarget: null,\n                containerFilled: false,\n                bottomText: '',\n                // class类名\n                bottomDropped: false,\n                // 获取监听滚动元素的scrollTop\n                bottomReached: false,\n                // 滑动的方向   down---向下互动；up---向上滑动\n                direction: '',\n                startY: 0,\n                startScrollTop: 0,\n                // 实时的clientY位置\n                currentY: 0,\n                topStatus: '',\n                //  上拉加载的状态    ''     pull: 上拉中\n                bottomStatus: '',\n            };\n        },\n        watch: {\n            // 改变当前加载在状态\n            bottomStatus(val) {\n                this.$emit('bottom-status-change', val);\n                switch (val) {\n                    case 'pull':\n                        this.bottomText = this.bottomPullText;\n                        break;\n                    case 'drop':\n                        this.bottomText = this.bottomDropText;\n                        break;\n                    case 'loading':\n                        this.bottomText = this.bottomLoadingText;\n                        break;\n                }\n            }\n        },\n        methods: {\n            onBottomLoaded() {\n                this.bottomStatus = 'pull';\n                this.bottomDropped = false;\n                this.$nextTick(() =\u003e {\n                    if (this.scrollEventTarget === window) {\n                    document.body.scrollTop += 50;\n                } else {\n                    this.scrollEventTarget.scrollTop += 50;\n                }\n                this.translate = 0;\n            });\n                // 注释\n                if (!this.bottomAllLoaded \u0026\u0026 !this.containerFilled) {\n                    this.fillContainer();\n                }\n            },\n\n            getScrollEventTarget(element) {\n                let currentNode = element;\n                while (currentNode \u0026\u0026 currentNode.tagName !== 'HTML' \u0026\u0026\n                currentNode.tagName !== 'BODY' \u0026\u0026 currentNode.nodeType === 1) {\n                    let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;\n                    if (overflowY === 'scroll' || overflowY === 'auto') {\n                        return currentNode;\n                    }\n                    currentNode = currentNode.parentNode;\n                }\n                return window;\n            },\n            //  获取scrollTop\n            getScrollTop(element) {\n                if (element === window) {\n                    return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);\n                } else {\n                    return element.scrollTop;\n                }\n            },\n            bindTouchEvents() {\n                this.$el.addEventListener('touchstart', this.handleTouchStart);\n                this.$el.addEventListener('touchmove', this.handleTouchMove);\n                this.$el.addEventListener('touchend', this.handleTouchEnd);\n            },\n            init() {\n                this.bottomStatus = 'pull';\n                // 选择滚动事件的监听对象\n                this.scrollEventTarget = this.getScrollEventTarget(this.$el);\n                if (typeof this.bottomMethod === 'function') {\n                    // autoFill 属性的实现   注释\n                    this.fillContainer();\n                    // 绑定滑动事件\n                    this.bindTouchEvents();\n                }\n            },\n            //  autoFill 属性的实现   注释\n            fillContainer() {\n                if (this.autoFill) {\n                    this.$nextTick(() =\u003e {\n                        if (this.scrollEventTarget === window) {\n                        this.containerFilled = this.$el.getBoundingClientRect().bottom \u003e=\n                                document.documentElement.getBoundingClientRect().bottom;\n                    } else {\n                        this.containerFilled = this.$el.getBoundingClientRect().bottom \u003e=\n                                this.scrollEventTarget.getBoundingClientRect().bottom;\n                    }\n                    if (!this.containerFilled) {\n                        this.bottomStatus = 'loading';\n                        this.bottomMethod();\n                    }\n                });\n                }\n            },\n            //  获取监听滚动元素的scrollTop\n            checkBottomReached() {\n                if (this.scrollEventTarget === window) {\n                    return document.body.scrollTop + document.documentElement.clientHeight \u003e= document.body.scrollHeight;\n                } else {\n                    // getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。\n                    return this.$el.getBoundingClientRect().bottom \u003c= this.scrollEventTarget.getBoundingClientRect().bottom + 1;\n                }\n            },\n            // ontouchstart 事件\n            handleTouchStart(event) {\n                // 获取起点的y坐标\n                this.startY = event.touches[0].clientY;\n                this.startScrollTop = this.getScrollTop(this.scrollEventTarget);\n                this.bottomReached = false;\n                if (this.bottomStatus !== 'loading') {\n                    this.bottomStatus = 'pull';\n                    this.bottomDropped = false;\n                }\n            },\n            // ontouchmove事件\n            handleTouchMove(event) {\n                if (this.startY \u003c this.$el.getBoundingClientRect().top \u0026\u0026 this.startY \u003e this.$el.getBoundingClientRect().bottom) {\n                    // 没有在需要滚动的范围内滚动，不再监听scroll\n                    return;\n                }\n                // 实时的clientY位置\n                this.currentY = event.touches[0].clientY;\n                //  distance 移动位置和开始位置的差值        distanceIndex---\n                let distance = (this.currentY - this.startY) / this.distanceIndex;\n                // 根据 distance 判断滑动的方向  并赋予变量   direction  down---向下互动；up---向上滑动\n                this.direction = distance \u003e 0 ? 'down' : 'up';\n                if (this.direction === 'up') {\n                    // 获取监听滚动元素的scrollTop\n                    this.bottomReached = this.bottomReached || this.checkBottomReached();\n                }\n                if (typeof this.bottomMethod === 'function' \u0026\u0026 this.direction === 'up' \u0026\u0026\n                        this.bottomReached \u0026\u0026 this.bottomStatus !== 'loading' \u0026\u0026 !this.bottomAllLoaded) {\n                    // 有加载函数，是向上拉，有滚动距离，不是正在加载ajax，没有加载到最后一页\n                    event.preventDefault();\n                    event.stopPropagation();\n                    if (this.maxDistance \u003e 0) {\n                        this.translate = Math.abs(distance) \u003c= this.maxDistance\n                                ? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;\n                    } else {\n                        this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;\n                    }\n                    if (this.translate \u003e 0) {\n                        this.translate = 0;\n                    }\n                    this.bottomStatus = -this.translate \u003e= this.bottomDistance ? 'drop' : 'pull';\n                }\n            },\n            // ontouchend事件\n            handleTouchEnd() {\n                if (this.direction === 'up' \u0026\u0026 this.bottomReached \u0026\u0026 this.translate \u003c 0) {\n                    this.bottomDropped = true;\n                    this.bottomReached = false;\n                    if (this.bottomStatus === 'drop') {\n                        this.translate = '-50';\n                        this.bottomStatus = 'loading';\n                        this.bottomMethod();\n                    } else {\n                        this.translate = '0';\n                        this.bottomStatus = 'pull';\n                    }\n                }\n                this.direction = '';\n            }\n        },\n        mounted() {\n            this.init();\n        }\n    };\n\u003c/script\u003e\n```\n建议抽出来放到common目录下，然后哪个页面需要，就在哪个页面import即可, 然后在引入他的页面写法如下：\n```js\n\u003ctemplate\u003e\n  \u003csection class=\"finan\"\u003e\n    \u003c!-- 上拉加载更多 --\u003e\n    \u003cload-more\n    :bottom-method=\"loadBottom\"\n    :bottom-all-loaded=\"allLoaded\"\n    :bottomPullText='bottomText'\n    :auto-fill=\"false\"\n    @bottom-status-change=\"handleBottomChange\"\n    ref=\"loadmore\"\u003e\n        \u003cdiv\u003e\n\t  这里写你需要的另外的模块\n        \u003c/div\u003e\n        \u003cdiv v-show=\"loading\" slot=\"bottom\" class=\"loading\"\u003e 这个div是为让上拉加载的时候显示一张加载的gif图\n          \u003cimg src=\"./../../assets/main/uploading.gif\"\u003e\n        \u003c/div\u003e\n    \u003c/load-more\u003e\n  \u003c/section\u003e\n\u003c/template\u003e\n```\n然后在data里和methods设置如下：\n```js\nexport default {\n        name: 'FinancialGroup',\n        props:{\n\t\t\n        },\n        data () {\n            return {\n                //  上拉加载数据\n                scrollHeight: 0,\n                scrollTop: 0,\n                containerHeight: 0,\n                loading: false,\n                allLoaded: false,\n                bottomText: '上拉加载更多...',\n                bottomStatus: '',\n                pageNo: 1,\n                totalCount: '',\n            }\n        },\n        methods: {\n        /* 下拉加载 */\n        _scroll: function(ev) {\n            ev = ev || event;\n            this.scrollHeight = this.$refs.innerScroll.scrollHeight;\n            this.scrollTop = this.$refs.innerScroll.scrollTop;\n            this.containerHeight = this.$refs.innerScroll.offsetHeight;\n        },\n        loadBottom: function() {\n            this.loading = true;\n            this.pageNo += 1;   // 每次更迭加载的页数\n            if (this.pageNo == this.totalGetCount) {\n                // 当allLoaded = true时上拉加载停止\n                this.loading = false;\n                this.allLoaded = true;\n            }\n            api.commonApi.then(res =\u003e {\n                setTimeout(() =\u003e {\n \t          要使用的后台返回的数据写在setTimeout里面\n                  this.$nextTick(() =\u003e {\n                    this.loading = false;\n            \t  })\n            }, 1000)\n         });\n        },\n        handleBottomChange(status) {\n            this.bottomStatus = status;\n        },\n    }\n```","cover":"","link":"vue-loadmore.html","preview":"\u003cp\u003e菩提本无树，明镜亦非台，本来无一物，何处惹尘埃。世上本有坑, 踩得多了也就释然了。\u003c/p\u003e\n","title":"基于Vue写的上拉加载更多"},{"content":"\nVue应用在组件化之后，通常存在着 父子组件、兄弟组件、跨级组件 等组件关系，那么组件之间如何进行通信；Vue2.4提供了两种新的组件通讯方法。\n\n在 Vue 中，父子组件的关系可以总结为 props down、events up。\n\n* 父子组件通信 ：父组件通过 props 向下传递数据给子组件\n* 子父组件通信 ：子组件通过 events 给父组件发送消息\n - 使用 $on(eventName) 监听事件 \n - 使用 $emit(eventName) 触发事件\n\n* 非父子组件通信 ：使用一个空的 Vue 实例作为中央事件总线\n\n在Vue 2.4 版本引入了组件通讯的新方式。\n\n#### 1. 重新引入 .sync 修饰符\n\n熟悉 Vue1.x 的朋友一定对 .sync 修饰器并不陌生。在Vue1.x 中我们可能会需要对一个 prop 进行『双向绑定』。当一个 子组件 改变了一个 prop的值时，这个变化也会 同步到父组件中 所绑定的值。\n\n因为它破坏了『单向数据流』的假设， .sync 在2.0版本被移除，引起了广泛的讨论。在2.3.0版本 .sync 又回来了，不过与1.x不同。\n\n这次只是原有语法的语法糖(syntax sugar)包装而成，其背后实现原理是，在组件上自动扩充一个额外的 v-on 监听器：\n\n代码如下：\n```html\n\u003ccomp:foo.sync=\"bar\"\u003e\u003c/comp\u003e\n```\n\n会被扩充为：\n```html\n\u003cchild:bar=\"foo\"@update:bar=\"e =\u003e foo = e\"\u003e\n```\n对于子组件，如果想要更新 foo 的值，则需要显式地触发一个事件，而不是直接修改 prop：\n```js\nthis.$emit('update:bar', newValue)\n```\n#### 2. $attrs 与 $listeners\n\n多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。\n\n* 2.1 interitAttrs\n\n在版本 2.4 之前，默认情况下父作用域的不被作为props特性绑定的属性，将会作为普通的 HTML 属性，应用在跟元素上。\n```html\n // parent.vue\n\u003ctemplate\u003e\n    \u003cchild-commpent:foo=\"f\":boo=\"b\"\u003e\u003c/child-comment\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nconst childComment = ()=\u003e import('./childCom.vue')\nexport default {\n    data () {\n      return {\n        f: 'Hello world!'\n        b: 'Hello Vue!'\n      }  \n    }\n}\n\u003c/script\u003e\n```\n```html\n// childComment.vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e{{ foo }}\u003cdiv\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    props: ['foo'] //父作用域的boo不被作为props绑定\n}\n\u003c/script\u003e\n```\n//boo会作为普通的 HTML 属性，应用在跟元素上。\n```html\n\u003cdiv boo=\"Hello Vue!\"\u003eHello world!\u003c/div\u003e\n```html\n设置 interitAttrs 为 false，之后，不会应用到跟元素上。\n```html\n// childCom.vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e{{ foo }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    props: ['foo'],\n    inheritAttrs: false\n  }\n\u003c/script\u003e\n```\n\n//boo会作为普通的 HTML 属性，应用在跟元素上。\n```html\n\u003cdiv\u003eHello world!\u003c/div\u003e\n```\n\n* 2.2 $attrs, $listeners\n\n在Vue 2.4 版本,配合 interitAttrs选项， 父组件中未被props(v-on)绑定的属性(事件) 可以在子组件中，通过 $attrs ， $listeners 获取。\n```html\n// demo.vue\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003cchild-com:foo=\"foo\":boo=\"boo\":coo=\"coo\":doo=\"doo\"\u003e\u003c/child-com\u003e\n    \u003c/div\u003e\n  \u003c/tempalte\u003e\n  \u003cscript\u003e\n  const childCom = ()=\u003e import('./childCom1.vue')\n  export default {\n    data () {\n      return {\n        foo: 'Hello World!',\n        boo: 'Hello Javascript!',\n        coo: 'Hello Vue',\n        doo: 'Last'\n      }\n    },\n    components: { childCom }\n  }\n  \u003c/script\u003e\n```\n```html\n// childCom1.vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cp\u003efoo: {{ foo }}\u003c/p\u003e\n    \u003cp\u003eattrs: {{ $attrs }}\u003c/p\u003e\n    \u003cchild-com2v-bind=\"$attrs\"\u003e\u003c/child-com2\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nconst childCom2 = ()=\u003e import('./childCom2.vue')\nexport default {\n  props: ['foo'],  // foo作为props属性绑定\n  inheritAttrs: false,\n  created () {\n    console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }\n  }\n}\n\u003c/script\u003e\n```\n```html\n// childCom2.vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n   \u003cp\u003eboo: {{ boo }}\u003c/p\u003e\n   \u003cp\u003eattrs: {{ $attrs }}\u003c/p\u003e\n   \u003cchild-com3v-bind=\"$attrs\"\u003e\u003c/child-com3\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nconst childCom3 = ()=\u003e import('./childCom3.vue')\nexport default {\n  props: ['boo'] // boo作为props属性绑定\n  inheritAttrs: false,\n  created () {\n    console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }\n  }\n}\n\u003c/script\u003e\n```\n#### 小结\n在Vue2.0被移除的 .sync 被重新加入到2.4版本，不同的是需要显式地触发一个事件，而不是直接修改 prop。\nVue2.4提供了 $attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。","cover":"","link":"vue-component-transmit.html","preview":"\u003cp\u003eVue应用在组件化之后，通常存在着 父子组件、兄弟组件、跨级组件等组件关系，那么组件之间如何进行通信；Vue2.4提供了两种新的组件通讯方法。\u003c/p\u003e\n","title":"吼啊! Vue2.4组件间通信新姿势"},{"content":"\n# flex属性\n一个flex布局的页面所具有的元素可分为2类。\n\n* 1.弹性容器\n* 2.弹性元素（包含在弹性容器内的元素）\n\n## 弹性容器\n弹性容器拥有横轴(main)和纵轴(cross)2种方向来决定着整体flex布局的流向，默认布局：横轴从左(main start)到右(main end)，纵轴从上(cross start)到下(cross end)\n\n![](https://sfault-image.b0.upaiyun.com/134/028/1340284239-58c253c58c759_articlex)\n\n* flex-direction\n\n\u003e 指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。\n\nrow：默认，保持原布局不变，按照横轴方向布局，即从左(main start)到右(main end)\n\nrow-reverse：按照横方向布局，置换横默认方向，即从右(main end)到左(main start)\n\ncolumn： 按照纵轴默认方向布局，即从上(cross start)到下(cross end)\n\ncolumn-reverse：按照纵轴方向布局，置换纵轴默认方向，即从下(cross start)到上(cross end)\n\n![](https://sfault-image.b0.upaiyun.com/622/085/622085148-58c24de3a0d99_articlex)\n\n``注：flex-direction的值即为整个flex布局的主轴，flex-direction:row | row-reverse则于横轴为主轴，flex-direction:column | column-reverse则于纵轴为主轴，另外的为侧轴``\n\n* flex-wrap\n\n\u003e 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向\n\nnowrap： 默认，单行显示，假如宽度溢出，则自动压缩相应元素的宽度（压缩比例与flex-shrink相关），保持单行。\n\nwrap： 多行显示，假如宽度溢出，自动换行。\n\nwrap-reverse：多行显示，置换侧轴的方向。\n\n![](https://sfault-image.b0.upaiyun.com/363/850/3638502166-58c24eef71680_articlex)\n\n* flex-flow\n\n\u003e flex-direction 和 flex-wrap 的简写\n\n```css\n.class{\n    flex-flow: column-reverse wrap;/*默认属性*/\n}\n```\n\n* justify-content\n\n\u003e 属性定义弹性元素在主轴方向的排列\n\nflex-start： 默认值，按照主轴方向进行排列\n\nflex-end： 置换主轴方向进行排列\n\ncenter： 向中点居中排列\n\nspace-between： 在主轴上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。\n\nspace-around：在主轴上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。\n\n![](https://sfault-image.b0.upaiyun.com/348/615/3486154553-58c24f36cebc7_articlex)\n\n* align-items\n\n\u003e 属性定义了弹性元素在侧轴方向的排列\n\nflex-start： 默认值，按照侧轴方向排列\n\nflex-end： 置换侧轴方向进行排列，主轴不变\n\ncenter： 向中点居中排列\n\nbaseline： 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线(不是很明白，MDN上面的解释)\n\nstretch：拉伸弹性元素，填充侧轴空间\n\n![](https://sfault-image.b0.upaiyun.com/262/251/2622514220-58c24f56a61c0_articlex)\n\n* align-content\n\n\u003e 属性定义了当弹性元素超过一行时，元素在纵轴上的排列方式\n\nflex-start： 默认值，紧贴前一行，第一行紧贴边缘，与主轴排列方式有关\n\nflex-end： 置换侧轴方向进行排列，紧贴前一行\n\ncenter： 向中点居中排列，紧贴前一行\n\nspace-between： 所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐\n\nspace-around：所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半\n\nstretch：平均分配侧轴空间，相邻行间距相等\n\n![](https://sfault-image.b0.upaiyun.com/174/364/1743644599-58c24f6beed1f_articlex)\n\n## 弹性元素\n包含在弹性容器里的每个节点都可以称为弹性元素，相应的，弹性元素也有自身的CSS属性\n\n* order\n\n\u003e 弹性元素根据自身order的值来进行排序\n\n![](https://sfault-image.b0.upaiyun.com/178/889/1788892906-58c24f83de31c_articlex)\n\n* align-self\n\n\u003e 属性和左右与align-items相同，但由于是直接作用在弹性元素上面，优先级比align-items高\n\n![](https://sfault-image.b0.upaiyun.com/336/214/3362144820-58c24fa3663e5_articlex)\n\n* flex-grow\n\n\u003e 定义弹性元素侧轴拉伸因子\n\n![](https://sfault-image.b0.upaiyun.com/256/359/256359781-58c24fb4858a3_articlex)\n\n* flex-shrink\n\n\u003e 与flex-grow相反，定义弹性元素的压缩比例，当弹性元素的总长度超过容器长度时，各自的压缩率(默认是1)\n\n![](https://sfault-image.b0.upaiyun.com/257/534/2575344999-58c24fc86313f_articlex)\n\n* flex-basis\n\n\u003e 用来代替width，优先级比width高（如果flex-basis和width有一个值为auto，那么另外一个非auto优先级更高）\n\n![](https://sfault-image.b0.upaiyun.com/206/563/2065634934-58c24fdb4953c_articlex)\n\n* flex\n\n\u003e flex-grow、flex-shrink、flex-basis的缩写\n\n```css\n.flex1{\n    flex:none;\n    /*\n    相当于\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: auto;\n    */\n}\n\n.flex2{\n    flex:1;\n    /*\n    相当于\n    flex-grow: 1;\n    flex-shrink: 0;\n    flex-basis: auto;\n    */\n}\n\n.flex3{\n    flex: 1 30px;\n    /*\n    相当于\n    flex-grow: 1;\n    flex-shrink: 0;\n    flex-basis: 30px;\n    */\n}\n```\n","cover":"","link":"flex-basic.html","preview":"\u003cp\u003e使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。\u003c/p\u003e\n","title":"Flex基础布局详解"},{"content":"\n## 传值\n\n```js\n// 定义参数\nlet params = {\n  workItemId: 1,\n  flowInstId: 21,\n  itemStatus: false,\n  type: type,\n  srcId: srcId\n}\n// 保存参数\nthis.$store.dispatch('approvalParams', params);\n```\n\n* index.js\n\n```js\n\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nimport actions from './actions'\nimport mutations from './mutations'\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n  modules:{\n    mutations\n  },\n  actions\n});\n```\n\n* types.js\n\n```js\n// 审批历史页请求参数\nexport const APPROVAL_HISTORY_PARAMS = 'APPROVAL_HISTORY_PARAMS';\n```\n\n* actions.js\n\n```js\n// 引入 状态(类型),用于提交到mutations\nimport * as types from './types'\n\n// 导出\nexport default {\n  // 保存 请求参数 approvalHistoryParams为上面的\"action名\"\n  approvalHistoryParams: ({commit}, res) =\u003e {\n    // 此处是触发mutation的 STORE_MOVIE_ID为\"mutation名\"\n    commit(types.APPROVAL_HISTORY_PARAMS, res);\n  }\n}\n```\n\n* mutations.js\n\n```js\nimport {\n  APPROVAL_HISTORY_PARAMS // 审批历史参数\n} from './types'\n\n// 引入 getters\nimport getters from './getters'\n\n// 定义、初始化数据\nconst state = {\n  approvalHistoryParams:{}\n}\n\n// 定义 mutations\nconst mutations = {\n  // 匹配actions通过commit传过来的值,并改变state上的属性的值\n  // 审批历史页 请求参数\n  [APPROVAL_HISTORY_PARAMS](state, res){\n    state.approvalHistoryParams = res;   //state.数据名 = data\n  }\n}\n\n// 导出\nexport default {\n  state,\n  mutations,\n  getters\n}\n```\n\n * getters.js\n\n```js\n// 导出\nexport default {\n  // 获取 审批历史参数\n  approvalHistoryParams: (state) =\u003e {\n    return state.approvalHistoryParams;\n  }\n}\n```\n\n## 取值\n\n```js\nimport { mapGetters } from 'vuex';\n\nexport default {\n  computed: {\n    ...mapGetters([//...函数名 使用对象展开运算符将此对象混入到外部对象中\n      'approvalHistoryParams'\n    ])\n  },\n  methods: {\n    fetchData(){\n      console.log(this.approvalHistoryParams.name);\n    }\n  }\n}\n```\n\n## PS\n\n* dispatch\n\n异步操作，例如向后台提交数据，写法：**this.$store.dispatch('mutations_name', val)**\n\n* commit\n\n同步操作，写法：**this.$store.commit('mutations_name', val)**\n","cover":"","link":"vuex-practice.html","preview":"\u003cp\u003e每天都要进步一点点。\u003c/p\u003e\n","title":"Vuex存值、取值的操作"},{"content":"\n对于很多新手来说，只是阅读文档是不好消化，我的建议是看看 vuex 的实例，通过研究实例来学习vuex。这样就会好理解多了。如果还是不能理解，最好办法就是先把store 的四个属性：state， getters, mutations, actions 记下来，然后再分析四个属性的特点，什么地方会用到，是怎样连接在一起的？通过这样问自己问题来进行学习。\n\n简单来说，vuex 就是使用一个 store 对象来包含所有的应用层级状态，也就是数据的来源。当然如果应用比较庞大，我们可以将 store 模块化，也就是每个模块都有自己的 store。一个 store 有四个属性：state, getters, mutations, actions。\n#### 1、State\nstate 上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：\n\n其实就是把 state 上保存的变量转移到计算属性上。当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。\n```js\ncomputed: mapState([\n  // 映射 this.count 为 store.state.count\n  'count'\n])\n```\n为了更好地理解这个函数的作用，我们可以看看它的源代码。\n可以看到，mapstate 即可以接受对象，也可以接受数组。最终返回的是一个对象。并且 res[key] 的值都是来于 store 里的，红色那条代码就是。这样就把两个不相关的属性连接起来了,这也是映射。其他几个辅助函数也是类似的。\n\n#### 2、Getters\ngetters上简单来说就是存放一些公共函数供组件调用。getters 会暴露为 store.getters 对象，也就是说可以通过 store .getters[属性]来进行相应的调用。mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，跟解构类似。具体如下图这样我们就可以将 getters 中的 evenOrOdd 属性值传给对应组件中的 evenOrOdd 上。Getters 接受 state 作为其第一个参数，Getters 也可以接受其他 getters 作为第二个参数。\n\n#### 3、Mutations\nmutations 与事件类似，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。所以 mutations 上存放的一般就是我们要改变 state 的一些方法。\n\n```js\nconst store = new Vuex.Store({\n  state: {\n    count: 1\n  },\n  mutations: {\n    increment (state) {\n      // 变更状态\n      state.count++\n    }\n  }\n})\n```\n我们不能直接调用一个 mutation handler。 这个选项更像是事件注册 ：“当触发一个类型为 increment 的 mutation 时，调用此函数 。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：\n```js\nstore.commit('increment')\n```\n当 mutation 事件类型比较多的时候，我们可以使用常量替代 mutation 事件类型。同时把这些常量放在单独的文件中可以让我们的代码合作者对整个 app 包含的 mutation 一目了然：\n一条重要的原则就是要记住 mutation 必须是同步函数 。\n\n#### 4、Actions\n\n前面说了， mutation 像事件注册，需要相应的触发条件。而 Action 就那个管理触发条件的。\nAction 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。\n```js\nactions: {\n    increment (context) {\n      context.commit('increment')\n    }\n  }\n```\nAction 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。\n\n实践中，我们会经常会用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）\n```js\nactions: {\n  increment ({ commit }) {\n    commit('increment')\n  }\n}\n```\n还记得我们前面说过 mutation 像事件类型吗？因此需要我们给定某个动作来进行触发。而这就是分发 action。Action 通过 store.dispatch 方法触发：\n```js\nstore.dispatch('increment')\n```\n此外，我们还可以在我们可以在 action 内部执行 异步 操作：\n```js\nactions: {\n  incrementAsync ({ commit }) {\n    setTimeout(() =\u003e {\n      commit('increment')\n    }, 1000)\n  }\n}\n```\n你在组件中使用``this.$store.dispatch('xxx')`` 分发 action，或者使用``mapActions``辅助函数将组件的 methods 映射为``store.dispatch``调用（需要先在根节点注入 store ）：\n```js\nimport { mapActions } from 'vuex'\nexport default {\n  // ...\n  methods: {\n    ...mapActions([\n      'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')\n    ]),\n    ...mapActions({\n      add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')\n    })\n  }\n}\n```\n这句话意思其实是，当你使用了 ``mapActions``， 你就不需要再次使用 ``this.$store.dispatch('xxx')``，当你没使用的话，你可以需要手动去分法。\n什么时候用大家要根据情况而定的。","cover":"","link":"vuex-summary.html","preview":"\u003cp\u003e对于很多新手来说，只是阅读文档是不好消化，我的建议是看看 vuex的实例，通过研究实例来学习vuex。这样就会好理解多了。如果还是不能理解，最好办法就是先把store 的四个属性：state， getters, mutations, actions。\u003c/p\u003e\n","title":"Vuex 学习总结"},{"content":"\n### 父组件与子组件\n在vue中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。\n\n父组件\n``` vue\n\u003ctemplate\u003e \n     \u003cdiv class=\"components-bus-container\"\u003e\n        \u003cchildren-one :fatherDataOne=\"fatherDataOne\"\u003e\u003c/children-one\u003e\n     \u003c/div\u003e \n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n        return {\n            fatherDataOne: '',\n        };\n    },\n}\n\u003c/script\u003e\n```\n子组件\n``` vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"children-one-content\"\u003e\n        \u003cdiv\u003e{{fatherDataOne}}\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n    },\n    props: ['fatherDataOne']\n}\n\u003c/script\u003e\n```\n`:fatherDataOne`为数据绑定写法，可以灵活的进行数据设置，如果直接绑定数据，写成`fatherDataOne=\"someData\"`即可\n\n### 子组件与父组件通信\n对于子组件将数据传给父组件，是通过`$emit`事件来实现的，在图中也可以体现，具体实现如下：\n子组件\n``` vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"children-one-content\"\u003e\n        \u003cdiv\u003e{{fatherDataOne}}\u003c/div\u003e\n        \u003cdiv @click=\"tellParent\"\u003e点击传递数据\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    data() {\n    },\n    props: ['fatherDataOne']，\n    methods: {\n        tellParent() {\n          this.$emit('listenOne', 'from childrenOne');\n        }\n    }\n}\n\u003c/script\u003e\n```\n父组件\n``` vue\n\u003ctemplate\u003e \n     \u003cdiv class=\"components-bus-container\"\u003e\n        \u003cchildren-one :fatherDataOne=\"fatherDataOne\" @listenOne='getCompomentOne'\u003e\u003c/children-one\u003e\n     \u003c/div\u003e \n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n      return {\n          fatherDataOne: '',\n      };\n  },\n  methods: {\n    getCompomentOne(param) {\n      console.log(param);\n    }\n  }\n}\n\u003c/script\u003e\n```\n在父组件中绑定一个`listenOne`的事件，然后给这个事件添加`getCompomentOne`方法，当子组件children-one通过点击事件`tellParent`触发`listenOne`的时候，父组件里面的`getCompomentOne`方法就会执行，并且数据通过参数的形式传递给父组件，从而实现通信的功能。\n\n### 同级组件间通信\n对于同级间组件进行通信处理的方法是，新建一个Vue实例作为事件总线，具体实现如下：\n1.需要进行通信的同级组件引入`event.js`\n``` javascript\n\timport Vue from 'vue'; \n\tlet bus = new Vue(); \n\texport default bus; \n```\n2.组件`children-one`通过点击事件`sendMsgToTwo`触发`dataFromOne`\nchildren-one\n``` vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"children-one-content\"\u003e\n        \u003cdiv\u003e{{fatherDataOne}}\u003c/div\u003e\n        \u003cdiv @click=\"tellParent\"\u003e点击向父组件通信\u003c/div\u003e\n        \u003cdiv @click=\"tellChildTwo\"\u003e点击向子组件2通信\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport bus from 'path/event'\nexport default {\n  data() {\n  },\n  props: ['fatherDataOne']，\n  methods: {\n    tellParent() {\n      this.$emit('listenOne', 'from childrenOne');\n    },\n    tellChildTwo() {\n      bus.$emit('dataFromOne', 'dataFromOne');\n    }\n  }\n}\n\u003c/script\u003e\n```\n3.组件`children-two`中监听事件 `dataFromOne`\nchildren-two\n``` vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"children-two-content\"\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport bus from 'path/event'\nexport default {\n  data() {\n  },\n  methods: {\n    getMsgFromOne() {\n      bus.$on('dataFromOne', data =\u003e {\n        console.log(data);\n      });\n    }\n  },\n  mounted() {\n    this.getMsgFromOne();\n  }\n}\n\u003c/script\u003e\n```\n当`children-one`触发`dataFromOne`时，组件`children-two`中的监听事件`dataFromOne`就会被触发，数据通过参数的形式传入，从而实现同级组件间通信。\n\n### 扩展\n##### 1.父组件操作子组件的方法\n利用$refs实现这个功能\n父组件\n``` vue\n\u003cchildren-one :fatherDataOne=\"fatherDataOne\" @listenOne='getCompomentOne' ref=\"childrenOne\"\u003e\u003c/children-one\u003e\n```\n那么就可以通过`this.$refs.childrenOne.childenFunction()`来操作子组件中的方法。\n##### 2.父组件将数据传给子组件，出现`undefined`情况\n当父组件传递的数据是异步取值的时候，可能出现首先传过去是空值，然后异步刷新。对于这种情况处理的方法是`v-if`，当父组件拿到数据后，将其设置为true，从而避免undefined的情况。\n \n### 高级用法\n对于一些简单的组件间的通信个人觉得这些方式够用了，如果一个页面涉及到很多的组件，那么也许这种方法不是那么简洁了，这是就需要用到`vue`中很重要的一个插件了`vuex`,以下为官网对`vuex`的介绍：\n[vuex](https://vuex.vuejs.org/)是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 [devtools extension](https://github.com/vuejs/vue-devtools)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。\n如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。","cover":"","link":"vue-component-communication.html","preview":"\u003cp\u003e最近在学习vue方面的的知识，毫无疑问，对于vue来说，组件化是其一个很大的特点，一方面可以提高代码的可读性，另一方面可以少写很多的代码，利于代码的维护。对于组件之间数据通信是一个必须要掌握的知识点，通信之间的方式一共可以分为三种，父组件与子组件，子组件与父组件，同级组件间通信。\u003c/p\u003e\n","title":"Vue组件之间通信"},{"content":"\nVue用$emit与$on来进行兄弟组件之间的通信\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdom-a\u003e\u003c/dom-a\u003e   \n    \u003cdom-b\u003e\u003c/dom-b\u003e   \n    \u003cdom-c\u003e\u003c/dom-c\u003e   \n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\n  \u003cscript\u003e\n  var Event = new Vue();\n\n  //组件A\n  var A = {\n    template: `\n      \u003cdiv\u003e\n        \u003cspan\u003e我是A组件的数据-\u003e{{a}}\u003c/span\u003e\n        \u003cinput type=\"button\" value=\"把A数据传给C\" @click=\"send\"\u003e\n      \u003c/div\u003e\n    `,\n    methods: {\n      send () {\n        Event.$emit(\"a-msg\", this.a);\n      }\n    },\n    data () {\n      return {\n        a: \"我是a组件中数据\"\n      }\n    }\n  };\n  //组件B\n  var B = {\n    template: `\n      \u003cdiv\u003e\n        \u003cspan\u003e我是B组件的数据-\u003e{{a}}\u003c/span\u003e\n        \u003cinput type=\"button\" value=\"把B数据传给C\" @click = \"send\"\u003e\n      \u003c/div\u003e\n    `,\n    methods: {\n      send () {\n        Event.$emit(\"b-msg\", this.a);\n      }\n    },\n    data () {\n      return {\n        a: \"我是b组件中数据\"\n      }\n    }\n  };\n  //组件C\n  var C = {\n    template: `\n      \u003cdiv\u003e\n        \u003ch3\u003e我是C组件\u003c/h3\u003e\n        \u003cspan\u003e接收过来A的数据为: {{a}}\u003c/span\u003e\n        \u003cbr\u003e\n        \u003cspan\u003e接收过来B的数据为: {{b}}\u003c/span\u003e\n      \u003c/div\u003e\n    `,\n    mounted () {\n      //接收A组件的数据\n      Event.$on(\"a-msg\", function (a) {\n        this.a = a;\n      }.bind(this));\n\n      //接收B组件的数据\n      Event.$on(\"b-msg\", function (a) {\n        this.b = a;\n      }.bind(this));\n    },\n    data () {\n      return {\n        a: \"\",\n        b: \"\"\n      }\n    }\n  };\n  window.onload = function () {\n    new Vue({\n      el: \"#app\",\n      components: {\n        \"dom-a\": A,\n        \"dom-b\": B,\n        \"dom-c\": C\n      }\n    });\n  };\n  \u003c/script\u003e\n```\nVue用$emit与$on来进行跨页面之间的数据传输通信\non和emit的事件必须是在一个公共的实例上，才能触发。\n```js\nimport Vue from 'vue'\n\nexport var bus = new Vue()\nApp.vue里created方法里定义事件\nimport { bus } from 'bus.js'\n\ncreated () {\n  bus.$on('tip', (text) =\u003e {\n    alert(text)\n  })\n}\nTest.vue组件内调用\nimport { bus } from 'bus.js'\nbus.$emit('tip', '123')\n```","cover":"","link":"vue-emit-on.html","preview":"","title":"Vue用$emit与$on来进行兄弟组件之间的通信"},{"content":"\n如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？\n\n\n#### 1、$refs\n\n首先你的给子组件做标记。\n```html\n\u003cfirstchild ref=\"one\"\u003e\u003c/firstchild\u003e\n```\n\n然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数\n\n#### 2、$children\n\n他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；\n```js\nfor(let i=0;i\u003cthis.$children.length;i++){\n       console.log(this.$children[i].msg); //输出子组件的msg数据；\n }\n```\n接下来就来一个点的demo\n\n首先定义一个父组件：parentcomponent，\n\n在父组件中我又是使用了两个自组件（假如有一百个自组件） [明确一点，组件只能有一个根节点 ]，根节点是啥，我不知道。。。。。。\n```html\n\u003ctemplate id=\"parentcomponent\"\u003e\n    \u003cdiv \u003e\n        \u003cp\u003ethis is a parent-component\u003c/p\u003e\n        \u003cfirstchild  ref=\"f1\"\u003e\u003c/firstchild\u003e\n        \u003csecondchild ref=\"f2\"\u003e\u003c/secondchild\u003e\n        \u003cbutton @click='show_child_of_parents'\u003eshow child msg\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n分别给出两个字组件的定义：（第2个使用的是template,第1个是script）\n```html\n\u003cscript type=\"text/x-template\" id=\"childOne\"\u003e\n    \u003cdiv\u003e\n        \u003cp\u003ethis is first child\u003c/p\u003e\n      \n        //使用stop阻止默认事件（vue的事件处理机制）\n        \u003cbutton @click.stop='getParent'\u003eget parent msg\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n\n\u003ctemplate id=\"childSec\"\u003e\n    \u003cdiv\u003e\n        \u003cp\u003ethis is second child\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n组件模板定义好了，就是用：\n\n- 挂在元素：\n\n```js\n\u003cscript\u003e\n    new Vue({\n        el:\"#app\",\n        data:{},\n        components:{\n            \"parent-component\":{\n                template:'#parentcomponent', \n                data(){\n                    return{msg:'这是父组件中的内容'}                    \n                },\n                methods:{\n                    show_child_of_parents(){\n                        //children方式访问自组件\n　　　　　　　　　　　　　　 for(let i=0;i\u003cthis.$children.length;i++){\n                                console.log(this.$children[i].msg);\n                        }\n　　　　　　　　　　　　　　　//通过$ref打标记，访问子组件　\n                        console.log(this.$refs.f1.msg);\n 　　　　　　　　　　　　　　this.$refs.f1.getParent();\n                    },                                    \n                },    \n　　　　　　　　　　     \n                components:{\n                    'firstchild':{\n                        template:'#childOne',\n                        data(){\n                            return {msg:'这是第一个子组件'};\n                        },\n                        methods:{\n                            getParent(){\n                                let a=1;\n                                console.log(a);\n                                alert(this.$parent.msg);\n                                \n                            }\n                        },\n                    },\n                    \n                    'secondchild':{\n                        template:'#childSec',\n                        data(){\n                            return {msg:\"这是第二个组件\"};\n                        }\n                    }\n                    \n                }\n                                \n            }\n        }\n        \n    });\n\n\u003c/script\u003e\n```\n- 使用父组件了\n\n```html\n    \u003cbody\u003e\n        \u003cp\u003e\u003cstrong\u003e可以通过$refs访问父组件的子组件\u003c/strong\u003e\u003c/p\u003e\n        \u003cdiv id=\"app\"\u003e\n            \u003cparent-component\u003e\u003c/parent-component\u003e\n        \u003c/div\u003e\n    \u003c/body\u003e\n```\n\n#### 小结\n\n- 组件只能一个根节点\n\n- 可以在自组件中使用this.$parent.属性值，或者函数\n\n- 在父组件中可以使用this.$refs.组件的标记访问子组件，或者this.$children[i].属性访问子组件\n\n- 你需要注意this的指向","cover":"","link":"vue-children-refs-parent.html","preview":"\u003cp\u003e如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？\u003c/p\u003e\n","title":"Vue组件($children,$refs,$parent)的使用"},{"content":"\n### Babel\n\nES6标准虽然已经发布了，但是很多浏览器环境都还不支持，webpack是通过Babel这个转码器将ES6代码转为ES5，从而在现有环境执行。babel是在webpack的配置文件webpack.config.js的module参数中的loaders中配置，如下：\n\n```js\nmodule.exports = {\n\t...\n\tmodule: {\n\t\tloaders: [\n\t\t{\n\t\t\ttest: /\\.js$/,\n\t\t\tloader: 'babel',\n\t\t\texclude: /node_modules/\n\t\t},\n\t\t...\n\t\t]\n\t}\n}\n```\n\n配置完成后还需要安装”babel-loader”模块\n\n```js\nnpm i babel-loader -D\n```\n\n然后webpack就可以对用了ES6语法的js文件进行转码了。下面总结一些常用到的ES6语法。\n\n### let和const命令\n\n* let命令\n\nES6中let命令用来声明变量，用法类似于var，但是let所声明的变量是局部变量，只在let命令所在的代码块内有效。所以在for循环中很适合用let变量做计数器。\nlet变量不会像var变量那样会进行变量提升，变量一定要在声明后使用，否则会报错。\n只要块级作用域内存在let命令，它所声明的所有变量都绑定这个作业域，不收外部变量的影响，即形成了一个封闭的作用域。\nlet不允许在相同作用域内重复声明同一个变量。可以看出，let变量实际上为JavaScript新增了块级作用域\n\n* const命令\n\nconst声明一个只读的常量，一旦声明，值就不能改变。所以，const一旦声明就必须立即初始化，不能只声明不初始化。\nconst作用域和let命令相同，只在声明所在的块级作用域中有效。const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。\n\n### 函数的扩展\n\n* 函数参数的默认值\n\n在ES6之前不能直接为函数的参数指定默认值，只能采用变通的方法。ES6允许为函数参数设置默认值，直接写在参数定义的后面。\n\n```js\nfunction log(x, y='World') {\n\tconsole.log(x, y);\n}\nlog('Hello')\n```\n\n* 参数默认值的位置\n\n通常定义了默认值的参数应该是函数的尾参数，如果是非尾部的参数设置默认值，实际上这个参数是没法省略的。除非显式输入undefined。\n\n* 箭头函数\n\nES6允许使用“箭头”（=\u003e）定义函数。\n\n```js\nvar f = v =\u003e v;\n```\n\n上述函数等同于：\n\n```js\nvar f = function(v) {\n\treturn v;\n};\n```\n\n若箭头函数不需要参数或者需要多于一个参数，就使用一个圆括号代表参数部分。\n\n```js\nvar f = () =\u003e 5;\n// 等同于\nvar f = function() {\n\treturn 5;\n}\n```\n\n```js\nvar sum = (num1, num2) =\u003e num1 + num2;\n// 等同于\nvar sum = function(num1, num2) {\n\treturn num1 + num2;\n}\n```\n\n若箭头函数的代码部分多于一条语句，就要使用大括号将他们括起来，并且使用return语句返回。\n\n```js\nvar sum = (num1, num2) =\u003e { return num1 + num2; }\n```\n\n#### 使用注意点\n\n函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。\n不可当做构造函数，不可以使用new命令，否则会抛出错误。\n不可使用arguments对象，该对象在函数体内不存在，可以用Rest参数代替。\n\n### Module\n\nES6之前，JavaScript一直没有模块（module）体系，ES6在语言规格的层面上，实现了模块功能，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。\nES6模块不是对象，而是通过export命令显式指定输出的代码，输入时采用静态命令的形式。\n\n```js\nimport {stat, exists, readFile} from 'fs';\n```\n\n上面代码就是从fs模块加载3个方法，其他方法不加载。这种加载成为“编译时加载”。ES6可以在编译时就完成模块加载，效率要比CommonJS模块的加载方式高。\n\n### export命令\n\n模块功能主要由两个命令构成，export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。\n一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。\n\n```js\nexport var firstName = 'Michael';\nexport var lastName = 'Jackson';\nexport var year = 1958;\n```\n\n还可以如下写：\n\n```js\nvar firstName = 'Michael';\nvar lastName = 'Jackson';\nvar year = 1958;\nexport {firstName, lastName, year};\n```\n\nexport除了输出变量通用可以输出函数或者类，export输出的变量还可以用as关键字重命名。\n\n```js\nfunction v1() { ... }\nfunction v2() { ... }\nexport {\n  v1 as streamV1,\n  v2 as streamV2,\n  v2 as streamLatestVersion\n};\n```\n\n### import命令\n\n使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。用法上面已经有介绍，如果想为输入的变量重命名，使用as关键字。\n\n```js\nimport { lastName as surname } from './profile';\n```","cover":"","link":"webpack-vue-es6.html","preview":"\u003cp\u003eES6标准虽然已经发布了，但是很多浏览器环境都还不支持，webpack是通过Babel这个转码器将ES6代码转为ES5，从而在现有环境执行。babel是在webpack的配置文件webpack.config.js的module参数中的loaders中配置。\u003c/p\u003e\n","title":"webpack+vue项目中常用ES6语法总结"},{"content":"\n### vue-router 传参\n在使用 vue-router 进行页面跳转的时候，有以下两种方式可以实现：\n* 声明式: `\u003crouter-link\u003eHome\u003c/router-link\u003e`\n\n``` html\n\u003c!-- 字符串 --\u003e\n\u003crouter-link to=\"home\"\u003eHome\u003c/router-link\u003e\n\u003c!-- 渲染结果 --\u003e\n\u003ca href=\"home\"\u003eHome\u003c/a\u003e\n\n\u003c!-- 使用 v-bind 的 JS 表达式 --\u003e\n\u003crouter-link v-bind:to=\"'home'\"\u003eHome\u003c/router-link\u003e\n\n\u003c!-- 不写 v-bind 也可以，就像绑定别的属性一样 --\u003e\n\u003crouter-link :to=\"'home'\"\u003eHome\u003c/router-link\u003e\n\n\u003c!-- 同上 --\u003e\n\u003crouter-link :to=\"{ path: 'home' }\"\u003eHome\u003c/router-link\u003e\n\n\u003c!-- 命名的路由 --\u003e\n\u003crouter-link :to=\"{ name: 'user', params: { userId: 123 }}\"\u003eUser\u003c/router-link\u003e\n\n\u003c!-- 带查询参数，下面的结果为 /register?plan=private --\u003e\n\u003crouter-link :to=\"{ path: 'register', query: { plan: 'private' }}\"\u003eRegister\u003c/router-link\u003e\n```\n* 编程式: `router.push(...)`\n\n该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：\n\n``` javascript\n// 字符串\nrouter.push('home')\n\n// 对象\nrouter.push({ path: 'home' })\n\n// 命名的路由\nrouter.push({ name: 'user', params: { userId: 123 }})\n\n// 带查询参数，变成 /register?plan=private\nrouter.push({ path: 'register', query: { plan: 'private' }})\n```\n注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：\n\n``` javascript\nconst userId = 123\nrouter.push({ name: 'user', params: { userId }}) // -\u003e /user/123\nrouter.push({ path: `/user/${userId}` }) // -\u003e /user/123\n// 这里的 params 不生效\nrouter.push({ path: '/user', params: { userId }}) // -\u003e /user\n```\n\n这两种方式传递参数的方式其实是一样的，从写法也可以大致看出，下面就对参数的传递方式进行介绍\n首先创建一个Router实例\n``` javascript\nconst router = new VueRouter({\n  routes: [\n    {\n      path: '/user',\n      name: 'user',\n      component: User\n    }\n  ]\n})\n```\n#### 1.使用params方式\n``` javascript\nrouter.push({ name: 'user', params: { userId: 123 }}) // -\u003e /user\n```\n获取参数:\n``` javascript\nrouter.params.userId  //123\n```\n这种方式看上去不错，对于传递的参数没有在浏览器的地址栏显示，而是隐藏了。但是当我们再次刷新的时候,`router.params.userId`就变成了`undefined`，对于这个解决方法如下:\n修改Router实例，在路由路径上增加该参数\n``` javascript\nconst router = new VueRouter({\n  routes: [\n    {\n      path: '/user/:userId',\n      name: 'user',\n      component: User\n    }\n  ]\n})\n```\n此时，浏览器的地址栏就会变成:/user/123,然后不管怎么刷新也会取到参数。其实使用`query`方式传递参数也可以避免这个问题。\n\n#### 2.使用query方式\n\n``` javascript\nrouter.push({ path: '/user', query: { userId: 123 }}) // -\u003e/user?userId=123\n```\n获取参数:\n``` javascript\nrouter.query.userId  //123\n```","cover":"","link":"vue-router.html","preview":"\u003cp\u003e一直对 vue-router 有点敬畏之心，因为总感觉对它的理解模模糊糊的，今天看了一下官网文档，有了一点点的理解，时来兴起，就有了这篇文章。\u003c/p\u003e\n","title":"Vue-router的一些记录"},{"content":"\nJavaScript在过去几年里发生了很大的变化。这里有12个新功能，您可以学习使用它们！\n\n![](http://css88.b0.upaiyun.com/css88/2016/10/es6-core-features-overview-large.png)\n## JavaScript历史\n\n新增加的语言称为ECMAScript 6。它也称为ES6或ES2015 +。\n\n自从 1995年提出的JavaScript构想以来，发展进展非常缓慢。每隔几年新增一次。1997年以来 ECMAScript 一直作为JavaScript实现的基础，引导JavaScript 发展。它已经发布了好几个版本，如ES3，ES5，ES6等。\n\n\u003e ECMAScript与JavaScript的关系：\n\n\u003e ECMA-262标准的描述如下：“ ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言时与任何特定的宿主环境分开进行规定的。”简单地说，ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象等。\n\n\u003e ECMAScript是JavaScript的一个重要标准，但它并不是JavaScript唯一的部分，当然，也不是唯一被标准化的部分。比如在WEB前端开发中，Web浏览器对于ECMAScript来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境(例如目前很火的Node.js\n)。一个完整的JavaScript实现是由以下3个不同部分组成的：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。\n\n\u003e 正如你所看到的，ES3，ES5和ES6之间分别存在10年和6年的时间间隔。目前ECMAScript发展的新模式是每年进行少量变更。而不是像ES6一样做大量的更改。\n\n## 浏览器支持\n\n![](http://css88.b0.upaiyun.com/css88/2016/10/es6-javascript-support.png)\n\n所有现代浏览器和环境都已经支持ES6了！Chrome，MS Edge，Firefox，Safari，Node等等已经内置支持JavaScript ES6的大部分功能。所以，你在本教程中学到的一切，你可以立即开始使用它。\n\n让我们开始使用 ECMAScript 6 吧！\n\n## 核心ES6特性\n\n变量的块作用域\n\n在过去声明变量使用 var，而在ES6中，声明变量还可以使用 let / const。\n\nvar 有什么问题？\n\nvar 的问题是变量会被泄漏到其他代码块，例如 for 循环或 if 代码块。\n```js\nES5 代码:\nvar x = 'outer';\nfunction test(inner) {\n  if (inner) {\n    var x = 'inner'; // 作用域是整个function\n    return x;\n  }\n  return x; //被重新定义，因为第4行声明被提升\n}\ntest(false); // undefined \ntest(true); // inner\n```\n上面代码中，对于test(false) 你可能期望的是返回 outer, 但是不是, 你得到的是 undefined。\n\n为什么?\n\n因为即使 if 代码块没有被执行，第4行中的表达式var x也是被提升的。\n\n\u003e var 变量提升\n\u003e var是函数作用域。它在整个函数中是可用的，甚至在被声明之前。\n\u003e 初始化 不 提升。如果你使用var ，请总是在顶部声明你的变量。\n\u003e 应用提升规则后我们可以更好地了解发生了什么：\n\n```js\nES5 代码:\nvar x = 'outer';\nfunction test(inner) {\n  var x; // 提升声明\n  if (inner) {\n    x = 'inner'; // 初始化不提升\n    return x;\n  }\n  return x;\n}\n```\n用ECMAScript 6 来拯救：\n```js\nES6 代码:\nlet x = 'outer';\nfunction test(inner) {\n  if (inner) {\n    let x = 'inner';\n    return x;\n  }\n  return x; // 从第1行获得预期结果\n}\ntest(false); // outer\ntest(true); // inner\n```\n从var改用 let,使代码按你设想的那样执行。 if 代码块没有被执行，变量x不会从if 代码块中被提升。\n\nlet 提升 和 “暂时性死区”\n\n在ES6中，let将把变量提升到代码块的顶部（不是像ES5那样的函数顶部）。\n但是，代码块中，在变量声明之前引用这个变量会导致一个 ReferenceError 错误。\nlet是块作用域。在声明之前不能使用它。\n“暂时性死区”是指从代码块开始直到变量被声明的区域。\n## IIFE\n\n在解释LIFE之前，让我们举个例子。 看看这里：\n```js\nES5 代码:\n{\n  var private = 1;\n}\nconsole.log(private); // 1\n```\n正如你所看到的，变量private 被泄漏到了代码块外面。你需要使用IIFE（immediately-invoked function expression，即：立即调用函数表达式）来包含它：\n\n```js\nES5 代码:\n(function(){\n  var private2 = 1;\n})();\nconsole.log(private2); // 未捕获 ReferenceError\n```\n\n如果你看看jQuery / lodash或其他开源项目，您将注意到他们使用IIFE以避免污染全局环境并只是在全局定义，如 _，$ 或 jQuery 。\n\n在ES6中更干净，如果我们只是现在某个代码块中使用使用某个变量，我们可以使用let，再也不需要使用IIFE了：\n```js\nES6 代码:\n{\n  let private3 = 1;\n}\nconsole.log(private3); // 未捕获 ReferenceError\n```\n## Const\n\n如果你想要一个变量一直不改变，你也可以使用 const。\n\n![](http://css88.b0.upaiyun.com/css88/2016/10/javascript-es6-const-variables-example.png)\n\n底线：var 区分 let 和 const。\n\n对于所有引用使用const; 避免使用var。\n如果你必须重新分配引用（愚人码头注：变量需要重新赋值的），使用let而不是const。\n\n## 模板字面量(Template Literals)\n\n当我们有了模板字面量，我们就不需要做更多的嵌套连接。看一看：\n```js\nES5 代码:\nvar first = 'Adrian';\nvar last = 'Mejia';\nconsole.log('Your name is ' + first + ' ' + last + '.');\n```\n现在你可以使用反引号 ( ` ` ) 和插值字符串 ${};\n```js\nES6 代码:\nconst first = 'Adrian';\nconst last = 'Mejia';\nconsole.log(`Your name is ${first} ${last}.`);\n```\nES6的模板字面量没有转义、循环、条件判断等内置语法，感觉功能还很弱。\n\n## 多行字符串\n\n我们不必在连接字符串时需要加 \\n，就像这样：\n```js\nES5 代码:\nvar template = '\u003cli *ngFor=\"let todo of todos\" [ngClass]=\"{completed: todo.isDone}\" \u003e\\n' +\n'  \u003cdiv class=\"view\"\u003e\\n' +\n'    \u003cinput class=\"toggle\" type=\"checkbox\" [checked]=\"todo.isDone\"\u003e\\n' +\n'    \u003clabel\u003e\u003c/label\u003e\\n' +\n'    \u003cbutton class=\"destroy\"\u003e\u003c/button\u003e\\n' +\n'  \u003c/div\u003e\\n' +\n'  \u003cinput class=\"edit\" value=\"\"\u003e\\n' +\n'\u003c/li\u003e';\nconsole.log(template);\n```\n在ES6中，我们可以再次使用反引号来解决这个问题：\n```js\nES6 代码:\nconst template = `\u003cli *ngFor=\"let todo of todos\" [ngClass]=\"{completed: todo.isDone}\" \u003e\n  \u003cdiv class=\"view\"\u003e\n    \u003cinput class=\"toggle\" type=\"checkbox\" [checked]=\"todo.isDone\"\u003e\n    \u003clabel\u003e\u003c/label\u003e\n    \u003cbutton class=\"destroy\"\u003e\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"edit\" value=\"\"\u003e\n\u003c/li\u003e`;\nconsole.log(template);\n```\n这两段代码将等到完全相同的结果。\n\n## 解构分配\n\nES6解构非常有用和简洁。 按照这个例子：\n\n从数组中获取元素\n```js\nES5 代码:\nvar array = [1, 2, 3, 4];\nvar first = array[0];\nvar third = array[2];\nconsole.log(first, third); // 1 3\n```\n等价于：\n```js\nES6 代码:\nconst array = [1, 2, 3, 4];\nconst [first, ,third] = array;\nconsole.log(first, third); // 1 3\n```\n交换值\n```js\nES5 代码:\nvar a = 1;\nvar b = 2;\nvar tmp = a;\na = b;\nb = tmp;\nconsole.log(a, b); // 2 1\n```\n等价于：\n```js\nES6 代码:\nlet a = 1;\nlet b = 2;\n[a, b] = [b, a];\nconsole.log(a, b); // 2 1\n```\n多个返回值的解构\n```js\nES5 代码:\nfunction margin() {\n  var left=1, right=2, top=3, bottom=4;\n  return { left: left, right: right, top: top, bottom: bottom };\n}\nvar data = margin();\nvar left = data.left;\nvar bottom = data.bottom;\nconsole.log(left, bottom); // 1 4\n```\n在第3行，你也可以在一个数组中返回它像这样（并保存一些类型）：\n```js\njs 代码:\nreturn [left, right, top, bottom];\n```\n但是调用者需要顾及到返回数据的顺序。\n```js\njs 代码:\nvar left = data[0];\nvar bottom = data[3];\n```\n使用ES6，调用者只需要选择他们需要的数据（第6行）：\n```js\nES6 代码:\nfunction margin() {\n  const left=1, right=2, top=3, bottom=4;\n  return { left, right, top, bottom };\n}\nconst { left, bottom } = margin();\nconsole.log(left, bottom); // 1 4\n```\n注意：第3行，我们可以看到ES6的一些其他特性。我们可以压缩{left：left}为{left}。看看它比 ES5 简洁了很多。是不是很酷？\n\n## 参数匹配的解构\n```js\nES5 代码:\nvar user = {firstName: 'Adrian', lastName: 'Mejia'};\nfunction getFullName(user) {\n  var firstName = user.firstName;\n  var lastName = user.lastName;\n  return firstName + ' ' + lastName;\n}\nconsole.log(getFullName(user)); // Adrian Mejia\n```\n等价于：\n```js\nES6 代码:\nconst user = {firstName: 'Adrian', lastName: 'Mejia'};\nfunction getFullName({ firstName, lastName }) {\n  return `${firstName} ${lastName}`;\n}\nconsole.log(getFullName(user)); // Adrian Mejia\n```\n## 深度匹配\n```js\nES5 代码:\nfunction settings() {\n  return { display: { color: 'red' }, keyboard: { layout: 'querty'} };\n}\nvar tmp = settings();\nvar displayColor = tmp.display.color;\nvar keyboardLayout = tmp.keyboard.layout;\nconsole.log(displayColor, keyboardLayout); // red querty\n```\n等价于：\n```js\nES6 代码:\nfunction settings() {\n  return { display: { color: 'red' }, keyboard: { layout: 'querty'} };\n}\nconst { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();\nconsole.log(displayColor, keyboardLayout); // red querty\n```\n这也称为对象解构。\n\n正如你所看到的，解构是非常有用的，并鼓励良好的编码风格。\n\n最佳实践：\n\n使用数组解构来获取元素或交换变量。它可以避免创建临时引用。\n对于函数多个返回值不要使用数组解构，而使用对象解构。\n\n## 类与对象\n\n使用ECMAScript 6，我们可以从“构造函数”过渡到“类”。\n\n在JavaScript中每一个对象都有一个原型，这是另一个对象。所有JavaScript对象继承了它们原型中的方法和属性。\n\n在ES5中，我们面向对象编程（OOP）需要使用构造函数来创建对象，如下：\n```js\nES5 代码:\nvar Animal = (function () {\n  function MyConstructor(name) {\n    this.name = name;\n  }\n  MyConstructor.prototype.speak = function speak() {\n    console.log(this.name + ' makes a noise.');\n  };\n  return MyConstructor;\n})();\nvar animal = new Animal('animal');\nanimal.speak(); // animal makes a noise.\n```\n在ES6中，我们有一些语法糖。我们可以用较少的板式代码，以及class和constructor等新的关键字做同样的事情。\n另外，请注意我们如何清楚地定义方法constructor.prototype.speak = function () vs speak()：\n```js\nES6 代码:\nclass Animal {\n  constructor(name) {\n    this.name = name;\n  }\n  speak() {\n    console.log(this.name + ' makes a noise.');\n  }\n}\nconst animal = new Animal('animal');\nanimal.speak(); // animal makes a noise.\n```\n正如你所看到的，两种样式（ES5/6）在幕后产生相同的结果，并且可以以相同的方式使用。\n\n最佳实践：\n\n始终使用class语法，并避免直接操作 prototype。为什么？因为它使代码更简洁和更容易理解。\n避免使用空的构造函数。如果没有指定，类有一个默认构造函数。\n\n## 继承\n\n基于前面的Animal类。假设我们想要扩展它并定义Lion类。\n\n在ES5中，它更多地涉及原型继承。\n```js\nES5 代码:\nvar Lion = (function () {\n  function MyConstructor(name){\n    Animal.call(this, name);\n  }\n \n  // prototypal inheritance\n  MyConstructor.prototype = Object.create(Animal.prototype);\n  MyConstructor.prototype.constructor = Animal;\n \n  MyConstructor.prototype.speak = function speak() {\n    Animal.prototype.speak.call(this);\n    console.log(this.name + ' roars ');\n  };\n  return MyConstructor;\n})();\nvar lion = new Lion('Simba');\nlion.speak(); // Simba makes a noise.\n// Simba roars.\n```\n我不详细描述所有细节，但请注意：\n\n* 第3行，我们用参数显式调用Animal构造函数。\n* 第7-8行，我们将Lion原型分配给Animal原型。\n* 第11行，我们从父类Animal中调用speak方法。\n* 在ES6中，我们有2个新的关键字extends和super。\n\n```js\nES6 代码:\nclass Lion extends Animal {\n  speak() {\n    super.speak();\n    console.log(this.name + ' roars ');\n  }\n}\nconst lion = new Lion('Simba');\nlion.speak(); // Simba makes a noise.\n// Simba roars.\n```\n看看ES6的代码比ES5看起来清晰了很多，并且他们做的事情完全一样。\n\n最佳实践：\n\n使用extends内置继承方式来实现继承。\n\n## 原生的 Promises\n\n从回调地狱 到 promises\n```js\nES5 代码:\nfunction printAfterTimeout(string, timeout, done){\n  setTimeout(function(){\n    done(string);\n  }, timeout);\n}\nprintAfterTimeout('Hello ', 2e3, function(result){\n  console.log(result);\n  // nested callback\n  printAfterTimeout(result + 'Reader', 2e3, function(result){\n    console.log(result);\n  });\n});\n```\n我们有一个函数接收一个回调，当done时执行。我们必须一个接一个地两度执行它。这就是为什么我们在回调中第二次调用printAfterTimeout的原因。\n\n如果你需要第3或第4次回调，那么你很快就凌乱了。让我们看看我们如何使用promises：\n```js\nES6 代码:\nfunction printAfterTimeout(string, timeout){\n  return new Promise((resolve, reject) =\u003e {\n    setTimeout(function(){\n      resolve(string);\n    }, timeout);\n  });\n}\nprintAfterTimeout('Hello ', 2e3).then((result) =\u003e {\n  console.log(result);\n  return printAfterTimeout(result + 'Reader', 2e3);\n}).then((result) =\u003e {\n  console.log(result);\n});\n```\n正如你说看到的，使用 promises，我们可以使用then在一个函数完成后做另一些事情。不再需要嵌套函数。\n\n## 箭头函数\n\nES6没有删除函数表达式，但它添加了一个新的函数表达式，称为箭头函数。\n\n在ES5中，对于this我们有一些疑问：\n```js\nES5 代码:\nvar _this = this; // 需要保持一个引用\n$('.btn').click(function(event){\n  _this.sendData(); // 引用函数外层的 this\n});\n$('.input').on('change',function(event){\n  this.sendData(); // 引用函数外层的 this\n}.bind(this)); // 绑定函数外层的 this\n```\n你需要使用一个临时的 this ，以便在函数内部引用，或使用bind。在ES6中，可以使用箭头函数！\n```js\nES6 代码:\n// this 将引用外部的那个 this\n$('.btn').click((event) =\u003e  this.sendData());\n// 隐式返回\nconst ids = [291, 288, 984];\nconst messages = ids.map(value =\u003e `ID is ${value}`);\n```\n## For…of\n\n从 for 到 forEach 再到 for...of:\n```js\nES5 代码:\n// for\nvar array = ['a', 'b', 'c', 'd'];\nfor (var i = 0; i \u003c array.length; i++) {\n  var element = array[i];\n  console.log(element);\n}\n// forEach\narray.forEach(function (element) {\n  console.log(element);\n});\n```\nES6 的 for...of 同样允许我们迭代。\n```js\nES6 代码:\n// for ...of\nconst array = ['a', 'b', 'c', 'd'];\nfor (const element of array) {\n    console.log(element);\n}\n```\n## 默认参数\n\n从检查变量是否被定义 到 分配一个值给默认参数。你以前做过类似的事情吗？\n```js\nES5 代码:\nfunction point(x, y, isFlag){\n  x = x || 0;\n  y = y || -1;\n  isFlag = isFlag || true;\n  console.log(x,y, isFlag);\n}\npoint(0, 0) // 0 -1 true \npoint(0, 0, false) // 0 -1 true \npoint(1) // 1 -1 true\npoint() // 0 -1 true\n```\n肯定这些做过吧？这是一个常见的模式来检查是变量是否赋值，否则分配一个默认值。但是，注意有一些问题：\n* 第7行，我们传递0, 0，得到0, -1。\n* 第8行，我们传递false，但得到true。\n如果你将一个布尔值作为默认参数或将值设置为0，它就不正常工作了。你知道为什么吗？？？我将在ES6示例后面告诉你;）\n\n现在，如果你用ES6，可以用更少的代码做的更好！\n```js\nES6 代码:\nfunction point(x = 0, y = -1, isFlag = true){\n  console.log(x,y, isFlag);\n}\npoint(0, 0) // 0 0 true\npoint(0, 0, false) // 0 0 false\npoint(1) // 1 -1 true\npoint() // 0 -1 true\n```\n注意第4行和第5行， 我们得到了预期的结果。ES5的示例则没有正常工作。我们必须属性检查  undefined,因为false，null，undefined和0是假（falsy）值。我们需要更加多的代码来修复这个问题：\n```js\nES5 代码:\nfunction point(x, y, isFlag){\n  x = x || 0;\n  y = typeof(y) === 'undefined' ? -1 : y;\n  isFlag = typeof(isFlag) === 'undefined' ? true : isFlag;\n  console.log(x,y, isFlag);\n}\npoint(0, 0) // 0 0 true\npoint(0, 0, false) // 0 0 false\npoint(1) // 1 -1 true\npoint() // 0 -1 true\n```\n我们检查 undefined，现在它就能按预期工作了。\n\n## Rest参数（多余参数）\n\n从 arguments 到 rest参数 和 扩展运算符。\n\n在ES5中，获取任意数量的参数是非常麻烦的：\n```js\nES5 代码:\nfunction printf(format) {\n  var params = [].slice.call(arguments, 1);\n  console.log('params: ', params);\n  console.log('format: ', format);\n}\nprintf('%s %d %.2f', 'adrian', 321, Math.PI);\n```\n我们可以使用rest运算符...做同样的事情。\n```js\nES6 代码:\nfunction printf(format, ...params) {\n  console.log('params: ', params);\n  console.log('format: ', format);\n}\nprintf('%s %d %.2f', 'adrian', 321, Math.PI);\n```\n## 扩展运算符\n\n从apply()到扩展运算符，我们有 ... 拯救：\n\n提醒：我们使用apply() 将数组转换为一个参数列表。例如，Math.max()获取参数列表，但是如果我们有一个数组，我们可以使用apply来使它工作。\n\n![](http://css88.b0.upaiyun.com/css88/2016/10/javascript-math-apply-arrays.png)\n\n正如我们在前面看到的，我们可以使用apply将数组作为参数列表传递：\n```js\nES5 代码:\nMath.max.apply(Math, [2,100,1,6,43]) // 100\n```\n在ES6中，你可以使用 扩展运算符。\n```js\nES6 代码:\nMath.max(...[2,100,1,6,43]) // 100\n```\n另外，我们可以使用扩展运算符来 concat（合并）数组：\n```js\nES5 代码:\nvar array1 = [2,100,1,6,43];\nvar array2 = ['a', 'b', 'c', 'd'];\nvar array3 = [false, true, null, undefined];\nconsole.log(array1.concat(array2, array3));\n```\n在ES6中，可以使用扩展运算符合并数组：\n```js\nES6 代码:\nconst array1 = [2,100,1,6,43];\nconst array2 = ['a', 'b', 'c', 'd'];\nconst array3 = [false, true, null, undefined];\nconsole.log([...array1, ...array2, ...array3]);\n```","cover":"","link":"javascript-es6.html","preview":"\u003cp\u003eJavaScript在过去几年里发生了很大的变化。ECMAScript是JavaScript的一个重要标准，但它并不是JavaScript唯一的部分，当然，也不是唯一被标准化的部分。这里有12个新功能，您可以学习使用它们！\u003c/p\u003e\n","title":"JavaScript ES6核心特性概述"},{"content":"\n这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin\n\n## 1、安装extract-text-webpack-plugin\n```js\ncnpm install extract-text-webpack-plugin --save-dev\n```\n\u003c!-- more --\u003e\n\n## 2、配置文件添加对应配置\n\n首先require一下\n```js\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\n```\nplugins里面添加\n```js\nnew ExtractTextPlugin(\"styles.css\"),\n```\n我这里如下：\n```json\nplugins: [\n  new webpack.optimize.CommonsChunkPlugin('common.js'),\n  new ExtractTextPlugin(\"styles.css\"),\n],\n```\nmodules里面对css的处理修改为\n```js\n{test:/\\.css$/, loader: ExtractTextPlugin.extract(\"style-loader\", \"css-loader\")},\n```\n千万不要重复了，不然会不起作用的\n\n我这里如下：\n```json\nmodule: {\n  loaders: [\n    {test:/\\.css$/, loader: ExtractTextPlugin.extract(\"style-loader\", \"css-loader\")},\n    {test: /\\.scss$/, loader: \"style!css!sass\"},\n    {test: /\\.less$/, loader: \"style!css!less\"},\n  ]\n},\n```\n## 3、在引入文件里面添加需要的css\n```js\nrequire('../less/app.less');\nrequire('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');\nrequire('./bower_components/fancybox/source/jquery.fancybox.css');\n```","cover":"","link":"webpack-css.html","preview":"\u003cp\u003e这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin\u003c/p\u003e\n","title":"Webpack分离CSS单独打包"},{"content":"\n经过几天的瞎折腾实现了webpack可以与gulp完美结合的进行打包静态文件，并将静态文件上传到七牛云存储，当然也可以传到你想传的云存储了，这里只分享一个七牛的云存储方案。\n\n关于如何使用webpack打包静态代码，这个可以参考我之前的一些文章和方案。\n\n这里只分享一下gulp这边的操作，然后给一个例子实现如何一条命令打包静态文件并更新CDN文件的方法。\n\n```js\nconst gulp = require('gulp');\nconst uglify = require('gulp-uglify');\nconst concat = require('gulp-concat');\nconst shrink = require('gulp-cssshrink');\nconst webpack = require('gulp-webpack');\nconst qn = require('gulp-qn');\n\nconst rev = require('gulp-rev-qn');\nconst revCollector = require('gulp-rev-collector');\nconst runSequence = require('run-sequence');\nconst config = require('./webpack.config');\nconst qiniu_options = {\n  accessKey: 'xxxxxxxxxx',\n  secretKey: 'xxxxxxxxxx',\n  bucket: 'xxxxxxxxxxxxx',\n  domain: 'http://xxxxx.com'\n};\ngulp.task('publish-js', function () {\n  return gulp.src(['./build/js/*.js'])\n    .pipe(uglify())\n    .pipe(rev())\n    .pipe(gulp.dest('./build/js'))\n    .pipe(qn({\n      qiniu: qiniu_options,\n      prefix: 'js'\n    }))\n    .pipe(rev.manifest())\n    .pipe(gulp.dest('./build/rev/js'));\n});\ngulp.task('publish-font', function () {\n  return gulp.src(['./build/js/*.woff2','./build/js/*.ttf','./build/js/*.eot','./build/js/*.woff'])\n    .pipe(qn({\n      qiniu: qiniu_options,\n      prefix: 'js'\n    }));\n});\ngulp.task('publish-css', function () {\n  return gulp.src(['./build/js/*.css'])\n    .pipe(rev())\n    .pipe(gulp.dest('./build/js'))\n    .pipe(qn({\n      qiniu: qiniu_options,\n      prefix: 'css'\n    }))\n    .pipe(rev.manifest())\n    .pipe(gulp.dest('./build/rev/css'));\n});\ngulp.task('publish-html', function () {\n  return gulp.src(['./build/rev/**/*.json', './build/views/*.html'])\n    .pipe(revCollector({\n      dirReplacements: {\n        '/js/': ''\n      }\n    }))\n    .pipe(gulp.dest('./build/views'));\n});\ngulp.task('default',function(callback){\n  runSequence(\n    ['publish-css','publish-js','publish-font'],\n    'publish-html',\n    callback);\n});\n```\n## PS:\npublish-js：将js文件进行版本更新并上传到七牛。\n\npublish-css：将css文件进行版本更新并上传到七牛。\n\npublish-font：将字体文件上传到七牛。\n\npublish-html：将html文件中对应的js路径进行替换。","cover":"","link":"webpack-gulp-qiniu-cdn.html","preview":"\u003cp\u003e经过几天的瞎折腾实现了webpack可以与gulp完美结合的进行打包静态文件，并将静态文件上传到七牛云存储，当然也可以传到你想传的云存储了，这里只分享一个七牛的云存储方案。\u003c/p\u003e\n","title":"webpack+gulp 静态文件打包并自动上传到七牛云"},{"content":"\n# webpack是什么？\n\nweb开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。 官方网站中用下图清晰的描述了webpack采用不同的loader加载不同的资源文件，打包生成多个js文件，也可以根据设置生成独立的图片、css文件等。\n\n# why webpack？\n\n在以往的开发过程中，经常会遇到以下三种情况：\n\n* 项目中资源多样性和依赖性 - js、css、png、less、jade等 为了方便开发，我们经常会使用不同的语法来编写文档，用less、sass、jade等会提高开发效率，但同时我们需要借助gulp或grunt来编写任务编译文件或对图片进行压缩等。\n* js模块规范复杂化 - AMD、CommonJS、UMD、ES6等 requireJS主要用来处理AMD规范的js文件，若使用CommonJS规范的js库文件，需进行AMD规范的封装，才能正常使用。而browserify主要处理CommonJS规范的文件，其他规范也需要进行转化。近期ES6的兴起，前面两种打包工具已经不能满足我们的需求了。\n* 开发与线上文件不一致性（打包压缩造成影响）\n\nwebpack可以很好地解决上面的问题，它具有Grunt、Gulp对于静态资源自动化构建的能力，是一个出色的前端自动化构建工具、模块化工具、资源管理工具。\n\n# webpack 特性\n\nwebpack具有requireJs和browserify的功能，但仍有很多自己的新特性：\n\n1. 对 CommonJS 、 AMD 、ES6的语法做了兼容\n2. 对js、css、图片等资源文件都支持打包\n3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持\n4. 有独立的配置文件webpack.config.js\n5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间\n6. 支持 SourceUrls 和 SourceMaps，易于调试\n7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活\n8. webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快\n\n# webpack 安装及使用\n\nwebpack 可以作为全局的npm模块安装，也可以在当前项目中安装。\n\n```js\nnpm install -g webpack\n```\n\n```js\nnpm install --save-dev webpack\n```\n\nwebpack的使用通常有三种方式：\n\n* 命令行使用：webpack \u003centry.js\u003e \u003cresult.js\u003e 其中entry.js是入口文件，result.js是打包后的输出文件\n* node.js API使用：\n\n```js\nvar webpack = require('webpack');\nwebpack({\n//configuration\n}, function(err, stats){});\n```\n默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：webpack --config webpack.custom.config.js\n\n# webpack 常用命令\n\nwebpack的使用和browserify有些类似，下面列举几个常用命令：\n\n* ``webpack`` 最基本的启动webpack命令\n* ``webpack -w`` 提供watch方法，实时进行打包更新\n* ``webpack -p`` 对打包后的文件进行压缩\n* ``webpack -d`` 提供SourceMaps，方便调试\n* ``webpack --colors`` 输出结果带彩色，比如：会用红色显示耗时较长的步骤\n* ``webpack --profile`` 输出性能数据，可以看到每一步的耗时\n* ``webpack --display-modules`` 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块\n前面的四个命令比较基础，使用频率会比较大，后面的命令主要是用来定位打包时间较长的原因，方便改进配置文件，提高打包效率。\n\n# webpack 配置文件\n\n项目中静态资源文件较多，使用配置文件进行打包会方便很多。最简单的Webpack配置文件webpack.config.js如下所示：\n```js\nmodule.exports = {\n  entry:[\n    './entry.js',\n    ...\n  ],\n  output: {\n    path: __dirname + '/output/',\n    publicPath: \"/output/\",\n    filename: 'result.js'\n  }\n};\n```\n\n* 其中entry参数定义了打包后的入口文件，数组中的所有文件会打包生成一个filename文件\n* output参数定义了输出文件的位置及名字，其中参数path是指文件的绝对路径，publicPath是指访问路径，filename是指输出的文件名。\n\n开发中需要将多个页面的公用模块独立打包，从而可以利用浏览器缓存机制来提高页面加载效率，减少页面初次加载时间，只有当某功能被用到时，才去动态的加载。这就需要使用webpack中的CommonsChunkPlugin插件。具体配置如下：\n\n```js\nvar CommonsChunkPlugin = require(\"webpack/lib/optimize/CommonsChunkPlugin\");\nmodule.exports = {\n  entry: { a: \"./a\", b: \"./b\" },\n  output: { filename: \"[name].js\" },\n  plugins: [ new CommonsChunkPlugin(\"common.js\") ]\n}\n```\n在文件中根据下面的方式引用即可。\n```html\n\u003cscript src=\"common.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"a.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"b.js\"\u003e\u003c/script\u003e\n```\n# webpack 模块加载器\n\n在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。loader的配置可以写在配置文件中，通过正则表达式的方式对文件进行匹配，具体可参见下面的示例：\n```js\nmodule: {\n    loaders: [{\n        test: /\\.less/,\n        loader:  'style-loader!css-loader!less-loader'\n    }, {\n      test: /\\.(png|jpg)$/,\n      loader: 'url-loader?limit=10000\u0026name=build/[name].[ext]'\n    }]\n}\n```\nloader也支持在js文件中通过require的方式进行加载，只需要在require资源path的前面指定loader，用！来串联不同的loader和资源即可。\n\n```js\nrequire(\"style!css!less!./mystyles.less\");\n```\n\n# css文件独立打包\n\n在webpack中编写js文件时，可以通过require的方式引入其他的静态资源，可通过loader对文件自动解析并打包文件。通常会将js文件打包合并，css文件会在页面的header中嵌入style的方式载入页面。但开发过程中我们并不想将样式打在脚本中，最好可以独立生成css文件，以外链的形式加载。这时extract-text-webpack-plugin插件可以帮我们达到想要的效果。需要使用npm的方式加载插件，然后参见下面的配置，就可以将js中的css文件提取，并以指定的文件名来进行加载。\n\n```js\nnpm install extract-text-webpack-plugin –save-dev\n```\n```js\nplugins: [\n    new ExtractTextPlugin('styles.css')\n]\n```\n# 图片打包\n\nwebpack中对于图片的处理，可以通过url-loader来实现图片的压缩。\n```js\ndiv.img{\n    background: url(../image/xxx.jpg)\n}\n\n//或者\nvar img = document.createElement(\"img\");\nimg.src = require(\"../image/xxx.jpg\");\ndocument.body.appendChild(img);\n```\n针对上面的两种使用方式，loader可以自动识别并处理。根据loader中的设置，webpack会将小于指点大小的文件转化成 base64 格式的 dataUrl，其他图片会做适当的压缩并存放在指定目录中。\n```js\nmodule: {\n    {\n      test: /\\.(png|jpg)$/,\n      loader: 'url-loader?limit=10000\u0026name=build/[name].[ext]'\n    }]\n}\n```\n对于上面的配置，如果图片资源小于10kb就会转化成 base64 格式的 dataUrl，其他的图片会存放在build/文件夹下。\n\n# webpack-dev-server\n\nwebpack除了可以对模块进行打包，还提供了一个开发服务器。它的特点是：\n\n* 基于Node.js Express框架的轻量开发服务器\n* 静态资源Web服务器\n* 开发中会监听文件的变化在内存中实时打包\n\nwebpack-dev-server需要单独安装，命令如下：\n\n```js\nnpm install -g webpack-dev-server\n```\n\n可以使用webpack-dev-server直接启动，也可以增加参数来获取更多的功能，具体配置可以参见[官方文档](http://webpack.github.io/docs/webpack-dev-server.html)。默认启动端口8080，通过localhost:8080/webpack-dev-server/可以访问页面，文件修改后保存时会在页面头部看到sever的状态变化，并且会进行热替换，实现页面的自动刷新。\n\n# 双服务器模式\n\n项目开发中，仅有一台静态服务器是不能满足需求的，我们需要另启一台web服务器，且将静态服务器集成到web服务器中，就可以使用webpack的打包和加载功能。我们只需要修改一下配置文件就可以实现服务器的集成。\n```js\n entry: [\n    './src/page/main.js',\n    'webpack/hot/dev-server',\n    'webpack-dev-server/client?http://127.0.0.1:8080'\n  ]\n  output: {\n    path: __dirname,\n    filename: '[name].js',\n    publicPath: \"http://127.0.0.1:8080/assets/\"\n  }\n  plugins: [\n    new webpack.HotModuleReplacementPlugin()\n  ]\n```\n如果在开发中启动两个服务器并不是一个很好地选择，webpack提供了一个中间件webpack-dev-middleware，但其只能在生产环境中使用，可以实现在内存中实时打包生成虚拟文件，供浏览器访问以及调试。使用方式如下：\n```js\nvar webpackDevMiddleware = require(\"webpack-dev-middleware\");\nvar webpack = require(\"webpack\");\n\nvar compiler = webpack({\n    // configuration\n    output: { path: '/' }\n});\n\napp.use(webpackDevMiddleware(compiler, {\n    // options\n}));\n```\n# PS\n\n通过上面的介绍，基本涵盖了webpack的各个特性及简单的使用方法。最近出了个``hjs-webpack``，可以简化webpack中复杂的配置项，只需要安装开发中所需的loader，无需再module中配置，即可正确使用。有兴趣的同学可以尝试一下。","cover":"","link":"webpack-basic.html","preview":"\u003cp\u003eweb开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。\u003c/p\u003e\n","title":"Webpack 入门及实践"},{"content":"\n## gulp-sass\n\n本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢，建议使用`gulp-sass`\n\n----------\n\n\u003e Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。\n\n本章使用 `ruby-sass` 编译 css,若你没有安装 ruby 和 sass 请移步`使用ruby.taobao安装 Sass`\n\n\n安装\n---\n\n```\nnpm install gulp-ruby-sass\n```\n\n基本用法\n-------\n\n```js\n// 获取 gulp\nvar gulp = require('gulp')\n// 获取 gulp-ruby-sass 模块\nvar sass = require('gulp-ruby-sass')\n\n// 编译sass\n// 在命令行输入 gulp sass 启动此任务\ngulp.task('sass', function() {\n    return sass('sass/') \n    .on('error', function (err) {\n      console.error('Error!', err.message);\n   })\n    .pipe(gulp.dest('dist/css'))\n});\n\n\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 images 任务\n    gulp.watch('sass/**/*.scss', ['sass'])\n});\n\n// 使用 gulp.task('default') 定义默认任务\n// 在命令行使用 gulp 启动 sass 任务和 auto 任务\ngulp.task('default', ['sass', 'auto'])\n```\n\n\nSass 代码和编译后的 CSS 代码\n----------\n\nsass/a.scss\n\n```css\n.sass{\n    a{\n        color:pink;\n    }\n}\n```\n\nsass/import.scss\n\n\n```css\n@import \"a.scss\";\n.import{\n  a{\n    color:red;\n    }\n}\n```\n\nsass/a.css\n\n```css\n.sass a {\n  color: pink;\n}\n```\n\nsass/import.css\n\n```css\n.sass a {\n  color: pink;\n}\n.import a{\n  color: red;\n}\n```","cover":"","link":"gulp-sass.html","preview":"\u003cp\u003eSass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。\u003c/p\u003e\n","title":"使用 gulp 编译 Sass"},{"content":"\n## 1.安装gulp\n* npm install gulp\n\n## 2.全局安装Babel。\n* npm install -g babel-cli\n\n## 3.Babel的配置文件是.babelrc\nwindows下新建该文件会提示必须键入文件名，解决办法是文件名如下.babelrc.\n\n## 4.ES2015转码规则\n* npm install --save-dev babel-preset-es2015\n\n## 5.将规则加入到.babelrc文件中\n```json\n    {  \n        \"presets\": [  \n          \"es2015\"\n        ],  \n        \"plugins\": []  \n      }  \n```\n\n## 6.配置工具\n\n*  6.1 安装gulp-babel\n      npm install --save-dev gulp-babel\n\n*  6.2 配置gulpfile.js文件\n\n```js\nvar gulp = require(\"gulp\");  \nvar babel = require(\"gulp-babel\");  \n\ngulp.task(\"default\", function () {  \n  return gulp.src(\"src/a.js\")  \n    .pipe(babel())  \n    .pipe(gulp.dest(\"lib\"));  \n});\n```\n\n*  6.3实时转码\n     安装gulp-watch\n     - npm install --save-dev gulp-watch\n\n##### 配置gulpfile文件\n\n```js\n var gulp = require(\"gulp\"),  \n      babel = require(\"gulp-babel\"),\n     watch = require(\"gulp-watch\");  \n\n gulp.task(\"babeljs\", function () {  \n   return gulp.src(\"www/js/*.js\")  \n     .pipe(babel())  \n     .pipe(gulp.dest(\"dist/js\"));  \n });  \n gulp.task(\"watch\",function(){\n    gulp.watch('www/js/*.js',['babeljs']);\n })\n\n gulp.task('default',['watch','babeljs']);\n```\n","cover":"","link":"gulp-babel-es6.html","preview":"","title":"使用gulp+babel实时转es6"},{"content":"\n\u003e Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。\n\n安装\n---\n\n```\nnpm install gulp-less\n```\n\n基本用法\n-------\n\n```js\n// 获取 gulp\nvar gulp = require('gulp')\n// 获取 gulp-less 模块\nvar less = require('gulp-less')\n\n// 编译less\n// 在命令行输入 gulp less 启动此任务\ngulp.task('less', function () {\n    // 1. 找到 less 文件\n    gulp.src('less/**.less')\n    // 2. 编译为css\n        .pipe(less())\n    // 3. 另存文件\n        .pipe(gulp.dest('dist/css'))\n});\n\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 less 任务\n    gulp.watch('less/**.less', ['less'])\n})\n\n// 使用 gulp.task('default') 定义默认任务\n// 在命令行使用 gulp 启动 less 任务和 auto 任务\ngulp.task('default', ['less', 'auto'])\n```\n\n你可以访问 [gulp-less](https://github.com/plus3network/gulp-less) 以查看更多用法。\n\nLESS 代码和编译后的CSS代码\n----------\n\nless/a.less\n\n```css\n.less{\n  a{\n        color:pink;\n    }\n}\n```\nless/import.less\n\n\n```css\n@import \"a.less\";\n.import{\n  a{\n    color:red;\n    }\n}\n```\nless/a.css\n\n```css\n.less a {\n  color: pink;\n}\n```\nless/import.css\n\n```css\n.less a {\n  color: pink;\n}\n.import a{\n  color: red;\n}\n```\n","cover":"","link":"gulp-less.html","preview":"\u003cp\u003eLess 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。\u003c/p\u003e\n","title":"使用 gulp 编译 LESS"},{"content":"\n\n相信做前端的同学都做过这样的事情，为优化图片，减少请求会把拿到切好的图标图片，通过ps（或者其他工具）把图片合并到一张图里面，再通过css定位把对于的样式写出来引用的html里面。对于一些图片较多的项目，这个过程可能要花费我们一天的时间，来实现这步。今天我给大家带来一个工具，将这一步缩短到几秒钟就能完成，究竟是什么工具这么神奇呢，他就是gulp的一个插件gulp.spritesmith。下面一张图来说明他能做什么。\n\n![](http://p1.bpimg.com/567571/e55bcb8c0182dab2.png)\n看到这个图片介绍，相信大家已经对gulp.spritesmith能做到什么一目了然了，其他的不多说，下面说直接开撸：\n\n## 安装gulp.spritesmith\n```js\nnpm install gulp.spritesmith --save-dev\n```\n\n## 编写Gulpfile.js\n```js\n/引入gulp\nvar gulp=require(\"gulp\"),\n    spritesmith=require('gulp.spritesmith');\n\ngulp.task('default', function () {\n    return gulp.src('images/*.png')//需要合并的图片地址\n        .pipe(spritesmith({\n            imgName: 'sprite.png',//保存合并后图片的地址\n            cssName: 'css/sprite.css',//保存合并后对于css样式的地址\n            padding:5,//合并时两个图片的间距\n            algorithm: 'binary-tree',//注释1\n            cssTemplate:\"css/handlebarsStr.css\"//注释2\n        }))\n        .pipe(gulp.dest('dist/'));\n});\n```\n## 注释一：\n\nAlgorithm 有四个可选值分别为top-down、left-right、diagonal、alt-diagonal、binary-tree\n\n对应如下：\n![](http://p1.bpimg.com/567571/3e5e6867f51ea2a3.png)\n\n\n## 注释二：\n\ncssTemplate 是生成css的模板文件可以是字符串也可以是函数。是字符串是对于相对于的模板地址 对于模板文件样式格式是：\n```css\n{{#sprites}}\n.icon-{{name}}{\n    background-image: url(\"{{escaped_image}}\");\n    background-position: {{px.offset_x}} {{px.offset_y}};\n    width: {{px.width}};\n    height: {{px.height}};\n}\n{{/sprites}}\n```\n\n如果是函数的话，这可以这样写：\n```js\n//引入gulp\nvar gulp=require(\"gulp\"),\n    spritesmith=require('gulp.spritesmith');\n\ngulp.task('default', function () {\n\n    return gulp.src('images/*.png')//需要合并的图片地址\n        .pipe(spritesmith({\n            imgName: 'sprite.png',//保存合并后图片的地址\n            cssName: 'css/sprite.css',//保存合并后对于css样式的地址\n            padding:5,//合并时两个图片的间距\n            algorithm: 'binary-tree',//注释1\n            cssTemplate: function (data) {\n                var arr=[];\n                data.sprites.forEach(function (sprite) {\n                    arr.push(\".icon-\"+sprite.name+\n                    \"{\" +\n                    \"background-image: url('\"+sprite.escaped_image+\"');\"+\n                    \"background-position: \"+sprite.px.offset_x+\"px \"+sprite.px.offset_y+\"px;\"+\n                    \"width:\"+sprite.px.width+\";\"+\n                    \"height:\"+sprite.px.height+\";\"+\n                    \"}\\n\");\n                });\n                return arr.join(\"\");\n            }\n\n        }))\n        .pipe(gulp.dest('dist/'));\n});\n```\n以上就是实现将css代码中的切片图片合并成雪碧图的实现，有问题的大家可以留言","cover":"","link":"gulp-sprite.html","preview":"\u003cp\u003e相信做前端的同学都做过这样的事情，为优化图片，减少请求会把拿到切好的图标图片，通过ps（或者其他工具）把图片合并到一张图里面，再通过css定位把对于的样式写出来引用的html里面。\u003c/p\u003e\n","title":"使用gulp自动合成雪碧图"},{"content":"\n压缩 图片文件可降低文件大小，提高图片加载速度。\n\n找到规律转换为 gulp 代码\n\n\n---\n找到 `images/` 目录下的所有文件，压缩它们，将压缩后的文件存放在 `dist/images/` 目录下。\n\ngulp 代码\n---------\n\n**一、安装 gulp-imagemin** 模块\n\n提示：你需要使用命令行的 `cd` 切换至对应目录再进行安装操作和 gulp 启动操作。\n\n在命令行输入\n\n```bash\nnpm install gulp-imagemin\n```\n\n安装成功后你会看到如下信息：(安装时间可能会比较长)\n\n```bash\ngulp-imagemin@2.2.1 node_modules/gulp-imagemin\n├── object-assign@2.0.0\n├── pretty-bytes@1.0.3 (get-stdin@4.0.1)\n├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)\n├── through2-concurrent@0.3.1 (through2@0.6.3)\n├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)\n└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)\n```\n\n**二、创建 `gulpfile.js` 文件编写代码**\n\n在对应目录创建 `gulpfile.js` 文件并写入如下内容：\n\n```js\n// 获取 gulp\nvar gulp = require('gulp');\n\n// 获取 gulp-imagemin 模块\nvar imagemin = require('gulp-imagemin')\n\n// 压缩图片任务\n// 在命令行输入 gulp images 启动此任务\ngulp.task('images', function () {\n    // 1. 找到图片\n    gulp.src('images/*.*')\n    // 2. 压缩图片\n        .pipe(imagemin({\n            progressive: true\n        }))\n    // 3. 另存图片\n        .pipe(gulp.dest('dist/images'))\n});\n\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 images 任务\n    gulp.watch('images/*.*)', ['images'])\n});\n\n// 使用 gulp.task('default') 定义默认任务\n// 在命令行使用 gulp 启动 images 任务和 auto 任务\ngulp.task('default', ['images', 'auto'])\n```\n\n你可以访问 [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) 以查看更多用法。\n\n------\n\n**三、在 `images/` 目录下存放图片**\n\n在 `gulpfile.js` 对应目录创建 `images` 文件夹，并在 `images/` 目录下存放图片。\n\n--------\n\n**四、运行 gulp 查看效果**\n\n在命令行输入 `gulp` +回车\n\n你将看到命令行出现如下提示\n\n```\ngulp\n[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js\n[18:10:42] Starting 'images'...\n[18:10:42] Finished 'images' after 5.72 ms\n[18:10:42] Starting 'auto'...\n[18:10:42] Finished 'auto' after 6.39 ms\n[18:10:42] Starting 'default'...\n[18:10:42] Finished 'default' after 5.91 μs\n[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)\n```","cover":"","link":"gulp-compress-img.html","preview":"\u003cp\u003e压缩 图片文件可降低文件大小，提高图片加载速度。找到规律转换为 gulp 代码\u003c/p\u003e\n","title":"使用 gulp 压缩图片"},{"content":"\n\n压缩 css 代码可降低 css 文件大小，提高页面打开速度。\n\n我们接着将规律转换为 gulp 代码\n\n---\n找到 `css/` 目录下的所有 css 文件，压缩它们，将压缩后的文件存放在 `dist/css/` 目录下。\n\ngulp 代码\n---------\n\n当熟悉`使用 gulp 压缩 JS`的方法后，配置压缩 CSS 的 gulp 代码就变得很轻松。\n\n\n**一、安装 gulp-minify-css** 模块\n\n提示：你需要使用命令行的 `cd` 切换到对应目录后进行安装操作。\n\n在命令行输入\n\n```\nnpm install gulp-minify-css\n```\n\n安装成功后你会看到如下信息：(安装时间可能会比较长)\n\n```\ngulp-minify-css@1.0.0 node_modules/gulp-minify-css\n├── object-assign@2.0.0\n├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)\n├── clean-css@3.1.8 (commander@2.6.0, source-map@0.1.43)\n├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)\n├── vinyl-bufferstream@1.0.1 (bufferstreams@1.0.1)\n└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, multipipe@0.1.2, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.3.2, dateformat@1.0.11)\n```\n\n**二、参照`使用 gulp 压缩 JS`创建 `gulpfile.js` 文件编写代码**\n\n在对应目录创建 `gulpfile.js` 文件并写入如下内容：\n\n```js\n// 获取 gulp\nvar gulp = require('gulp')\n\n// 获取 minify-css 模块（用于压缩 CSS）\nvar minifyCSS = require('gulp-minify-css')\n\n// 压缩 css 文件\n// 在命令行使用 gulp css 启动此任务\ngulp.task('css', function () {\n    // 1. 找到文件\n    gulp.src('css/*.css')\n    // 2. 压缩文件\n        .pipe(minifyCSS())\n    // 3. 另存为压缩文件\n        .pipe(gulp.dest('dist/css'))\n})\n\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 css 任务\n    gulp.watch('css/*.css', ['css'])\n});\n\n// 使用 gulp.task('default') 定义默认任务\n// 在命令行使用 gulp 启动 css 任务和 auto 任务\ngulp.task('default', ['css', 'auto'])\n```\n\n你可以访问 [gulp-minify-css](https://github.com/jonathanepollack/gulp-minify-css) 以查看更多用法。\n\n------\n\n**三、创建 css 文件**\n\n在 `gulpfile.js` 对应目录创建 `css` 文件夹，并在 `css/` 目录下创建 `a.css` 文件。\n\n```css\n/* a.css */\nbody a{\n    color:pink;\n}\n```\n\n--------\n\n**四、运行 gulp 查看效果**\n\n在命令行输入 `gulp` +回车\n\n你将看到命令行出现如下提示\n\n```\ngulp\n[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js\n[17:01:19] Starting 'css'...\n[17:01:19] Finished 'css' after 6.21 ms\n[17:01:19] Starting 'auto'...\n[17:01:19] Finished 'auto' after 5.42 ms\n[17:01:19] Starting 'default'...\n[17:01:19] Finished 'default' after 5.71 μs\n```\n\ngulp 会创建 `dist/css` 目录，并创建 `a.css` 文件，此文件存放压缩后的 css 代码。","cover":"","link":"gulp-compress-css.html","preview":"\u003cp\u003e压缩 css 代码可降低 css 文件大小，提高页面打开速度。我们接着将规律转换为 gulp 代码\u003c/p\u003e\n","title":"使用 gulp 压缩 CSS"},{"content":"\n压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。\n\n所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。\n\n\n---\n\n找到 `js/` 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 `dist/js/` 目录下。\n\ngulp 代码\n----\n\n**建议**：你可以只阅读下面的代码与注释或同时阅读代码解释\n\ngulp 的所有配置代码都写在 `gulpfile.js` 文件。\n\n**一、新建一个 `gulpfile.js` 文件**\n```\nchapter2\n└── gulpfile.js\n```\n\n---------\n\n**二、在 `gulpfile.js` 中编写代码**\n\n```js\n// 获取 gulp\nvar gulp = require('gulp')\n```\n\n\u003e `require()` 是 node （CommonJS）中获取模块的语法。\n\u003e \n\u003e 在 gulp 中你只需要理解 `require()` 可以获取模块。\n\n---------\n\n**三、获取 `gulp-uglify` 组件**\n\n```js\n// 获取 uglify 模块（用于压缩 JS）\nvar uglify = require('gulp-uglify')\n```\n\n---------\n\n**四、创建压缩任务**\n\n```js\n// 压缩 js 文件\n// 在命令行使用 gulp script 启动此任务\ngulp.task('script', function() {\n    // 1. 找到文件\n    gulp.src('js/*.js')\n    // 2. 压缩文件\n        .pipe(uglify())\n    // 3. 另存压缩后的文件\n        .pipe(gulp.dest('dist/js'))\n})\n```\n\n- `gulp.task(name, fn)` - 定义任务，第一个参数是任务名，第二个参数是任务内容。\n- `gulp.src(path)` - 选择文件，传入参数是文件路径。\n- `gulp.dest(path)` - 输出文件\n- `gulp.pipe()` - 管道，你可以暂时将 pipe 理解为将操作加入执行队列\n\n参考：[gulp API文档](http://www.gulpjs.com.cn/docs/api/)\n\n---------\n\n**五、跳转至 `gulpfile.js` 所在目录**\n\n打开命令行使用 `cd` 命令跳转至 `gulpfile.js` 文件所在目录。\n\n例如我的 `gulpfile.js` 文件保存在 `C:\\gulp-book\\demo\\chapter2\\gulpfile.js`。\n\n那么就需要在命令行输入\n```\ncd C:\\gulp-book\\demo\\chapter2\n```\n\n\u003e Mac 用户可使用 `cd Documents/gulp-book/demo/chapter2/` 跳转\n\n---------\n\n**六、使用命令行运行 script 任务**\n\n在控制台输入 `gulp 任务名` 可运行任务，此处我们输入 `gulp script` 回车。\n\n注意：输入 `gulp script` 后命令行将会提示错误信息\n```\n// 在命令行输入\ngulp script\n\nError: Cannot find module 'gulp-uglify'\n    at Function.Module._resolveFilename (module.js:338:15)\n    at Function.Module._load (module.js:280:25)\n```\n\n`Cannot find module 'gulp-uglify'` 没有找到 `gulp-uglify` 模块。\n\n----------\n\n**七、安装 `gulp-uglify` 模块**\n\n因为我们并没有安装 `gulp-uglify` 模块到本地，所以找不到此模块。\n\n使用 npm 安装 `gulp-uglify` 到本地\n\n```\nnpm install gulp-uglify\n```\n\n安装成功后你会看到如下信息：\n```\ngulp-uglify@1.1.0 node_modules/gulp-uglify\n├── deepmerge@0.2.7\n├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)\n├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)\n├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)\n└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)\nchapter2 $\n```\n\n在你的文件夹中会新增一个 `node_modules` 文件夹，这里面存放着 npm 安装的模块。\n\n目录结构：\n```\n├── gulpfile.js\n└── node_modules\n    └── gulp-uglify\n```\n\n接着输入 `gulp script` 执行任务\n\n```\ngulp script\n[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js\n[13:34:57] Starting 'script'...\n[13:34:57] Finished 'script' after 6.13 ms\n```\n\n------------\n\n**八、编写 js 文件**\n\n我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 `.js` 后缀文件。\n\n创建 `a.js` 文件，并编写如下内容\n\n```\n// a.js\nfunction demo (msg) {\n    alert('--------\\r\\n' + msg + '\\r\\n--------')\n}\n\ndemo('Hi')\n```\n\n目录结构：\n```\n├── gulpfile.js\n├──  js\n│   └── a.js\n└── node_modules\n    └── gulp-uglify\n```\n\n接着在命令行输入 `gulp script` 执行任务\n\ngulp 会在命令行当前目录下创建 `dist/js/` 文件夹，并创建压缩后的 `a.js` 文件。\n\n目录结构：\n```\n├── gulpfile.js\n├──  js\n│   └── a.js\n├──  dist\n│   └── js\n│       └── a.js\n└── node_modules\n    └── gulp-uglify\n```\n\n[dist/js/a.js](https://github.com/nimojs/gulp-book/blob/master/demo/chapter2/dist/js/a.js)\n```js\nfunction demo(n){alert(\"--------\\r\\n\"+n+\"\\r\\n--------\")}demo(\"Hi\");\n```\n\n---------\n\n**九、检测代码修改自动执行任务**\n\n`js/a.js`一旦有修改 就必须重新在命令行输入 `gulp script` ，这很麻烦。\n\n可以使用 `gulp.watch(src, fn)` 检测指定目录下文件的修改后执行任务。\n\n在 `gulpfile.js` 中编写如下代码：\n```\n// 监听文件修改，当文件被修改则执行 script 任务\ngulp.watch('js/*.js', ['script']);\n```\n\n但是没有命令可以运行 `gulp.watch()`，需要将 `gulp.watch()` 包含在一个任务中。\n\n```\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 script 任务\n    gulp.watch('js/*.js', ['script'])\n})\n```\n\n接着在命令行输入 `gulp auto`，自动监听 `js/*.js` 文件的修改后压缩js。\n\n```\n$gulp auto\n[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js\n[21:09:45] Starting 'auto'...\n[21:09:45] Finished 'auto' after 9.19 ms\n```\n\n此时修改 `js/a.js` 中的代码并保存。命令行将会出现提示，表示检测到文件修改并压缩文件。\n\n```\n[21:11:01] Starting 'script'...\n[21:11:01] Finished 'script' after 2.85 ms\n```\n至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。\n\n**注意：**使用 `gulp.watch` 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 `Ctrl + C` 停止 gulp。\n\n\u003e Mac 下使用 `control + C` 停止 gulp\n\n**十、使用 gulp.task('default', fn) 定义默认任务**\n\n增加如下代码\n\n```js\ngulp.task('default', ['script', 'auto']);\n```\n\n此时你可以在命令行直接输入 `gulp` +回车，运行 `script` 和 `auto` 任务。\n\n最终代码如下：\n\n```js\n// 获取 gulp\nvar gulp = require('gulp')\n\n// 获取 uglify 模块（用于压缩 JS）\nvar uglify = require('gulp-uglify')\n\n// 压缩 js 文件\n// 在命令行使用 gulp script 启动此任务\ngulp.task('script', function() {\n    // 1. 找到文件\n    gulp.src('js/*.js')\n    // 2. 压缩文件\n        .pipe(uglify())\n    // 3. 另存压缩后的文件\n        .pipe(gulp.dest('dist/js'))\n})\n\n// 在命令行使用 gulp auto 启动此任务\ngulp.task('auto', function () {\n    // 监听文件修改，当文件被修改则执行 script 任务\n    gulp.watch('js/*.js', ['script'])\n})\n\n\n// 使用 gulp.task('default') 定义默认任务\n// 在命令行使用 gulp 启动 script 任务和 auto 任务\ngulp.task('default', ['script', 'auto'])\n```\n\n去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还有一些性能问题和缺少容错性，将在后面的章节详细说明。\n\n\n你可以访问 [gulp-uglify](https://github.com/terinjokes/gulp-uglify) 以查看更多用法。","cover":"","link":"gulp-compress-js.html","preview":"\u003cp\u003e压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。\u003c/p\u003e\n","title":"使用 gulp 压缩 JS"},{"content":"\n# 1. Browserify简介\n\u003e \"Browserify lets you require('modules') in the browser by bundling up all of your dependencies.\" - Browserify.org\n\n上面的描述是摘自 browserify 官网；用通俗的话讲就是：browserify 是一个浏览器端代码模块化工具，可以处理模块之间的依赖关系，让服务器端的 CommonJS 格式的模块可以运行在浏览器端。\n\n\n![](https://cloud.githubusercontent.com/assets/3995814/11768221/b22531fe-a200-11e5-8e98-8e36d8471bf8.png)\n\nbrowserify的原理：\n\n* 处理代码依赖，将模块打包到一起\n\n打包为单个文件存在的问题：\n\n* 暂时用不到的代码也会被打包，体积大，首次加载速度慢\n\n* 只要一个模块更新，整个文件缓存失效\n\n注：暂时用不到的代码指不同的页面有不同的 JS 文件，不需要在当前页面引用其他页面的代码即为暂时用不到的代码\n\nBrowserify的解决方案：\n\n* entry point：入口点技术，每个入口点打包一个文件，两个入口点的相同依赖模块单独打包为common.js\n\n### 安装与配置\n安装 browserify\n\n``npm install -g browserify``\n\n引入 browserify\n\n``import  browserify from 'browserify'``\n\n基本配置\n```js\nglup.taks('browserify', function() {\n  browserify({\n     //先处理依赖，入口文件\n     entries: ['./foo.js','./main.js'],\n     //进行转化\n     transform: []\n  })\n   .bundle() // 多个文件打包成一个文件\n   .pipe(source()) // browserify的输出不能直接用做gulp输入，所以需要source进行处理 \n   .pipe(gulp.dest('./'));  \n})\n```\n### 安装一些依赖插件\n```bash\nnpm install --save-dev vinyl-source-stream vinyl-buffer gulp-sourcemaps\n```\n\n``vinyl-source-stream``: browserify的输出不能直接用着gulp的输入，vinly-source-stream 主要是做一个转化\n\n``vinyl-buffer``: 用于将vinyl流转化为buffered vinyl文件（gulp-sourcemaps及大部分Gulp插件都需要这种格式）\n\n``gulp-sourcemaps``: Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置，便于调试\n\n``Watchify``: 加速 browserify 编译\n\n# 2. 编写 CommonJS 模块\n\n### 目录结构\n```\n|-- dist/\n   |-----bundle.js\n|-- src/\n   |-----foo.js\n   |-----main.js\n|--gulpfile.babel.js\n|--package.json\n```\n\n### 新建两个模块文件 foo.js, main.js\n``$ touch foo.js main.js``\n\n### 让我使用 CommonJs 规范来写一些代码\n\u003e CommonJS 规范是为了解决 JavaScript的作用域问题而定义的模块形式，可以使每个模块在它自身的命名空间中执行。\n\u003e 该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。\n\n```js\n// foo.js\n// 定义foo.js模块，通过 module.exports 导出对外的变量或接口\nlet variable = 8;\nlet sum = (a, b = 6) =\u003e (a + b);\nlet square = (b) =\u003e {\n    return b * b;\n};\nmodule.exports.variable = variable;\nmodule.exports.sum = sum;\nmodule.exports.square = square;\n\n// mian.js\n// 通过 require() 来导入 foo.js 模块\nvar bar = require('./foo')\nconsole.log(bar);  // Object\nconsole.log(bar.variable); // 8\nconsole.log(bar.sum(1)); // 7\nconsole.log(bar.square(5)); // 25\n```\n\u003e 上面我们使用 ES6 的语法写了两个模块，分别是 foo.js 和 main.js; 在 foo.js 中通过 module.exports 导出对外的变量或接口;在 main.js 中通过 require() 来导入 foo.js 模块，那我们就可以在 mian.js 模块中使用 foo.js 中的变量和接口了。这就是一个最基本的 CommonJs 示例了\n\n### 配置 browserify\n通过第一小节的学习，我们知道要在浏览器中运行 CommonJs 风格的模块代码，就需要借助 browserify 来作为转换工具，下面我们在 gulp.babel.js 中来配置 browserify：\n```js\n// set browserify task\ngulp.task('browserify',()=\u003e {\n    browserify({\n        entries: ['src/js/main.js','src/js/foo.js'],\n        debug: true, // 告知Browserify在运行同时生成内联sourcemap用于调试\n    })\n        .transform(\"babelify\", {presets: [\"es2015\"]})\n        .bundle()\n        .pipe(source('bundle.js'))\n        .pipe(buffer()) // 缓存文件内容\n        .pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件载入 map\n        .pipe(sourcemaps.write('.')) // 写入 .map 文件\n        .pipe(gulp.dest('dist/js'))\n        .pipe(notify({ message: 'browserify task complete' }));\n})\n```\n\n运行\n``gulp-browserify``\n\n![](https://cloud.githubusercontent.com/assets/3995814/11768266/592159dc-a202-11e5-8be3-2d4ddaefe5c3.png)\n\n### 打开浏览器，查看运行结果(见上面main.js文件的注释)\n\n# 编写 ES6 Module 模块\n\n上面的代码主要是 CommonJs 模块化的写法，我们再来看看最近火热的 ES6 提供的 Module；让我们使用 ES6 Module 来改写上面的代码：\n```js\n// foo.js\n// 定义foo.js模块，通过 exports 导出对外的变量或接口\nlet variable = 8;\nlet sum = (a, b = 6) =\u003e (a + b);\nlet square = (b) =\u003e {\n    return b * b;\n};\nexport { variable, sum, square };\n\n// main.js\n// 测试一：\n// 通过 import 来导入 foo.js 模块\nimport {variable, sum, square} from './foo';\nconsole.log(variable); // 8\nconsole.log(sum(1)); // 7\nconsole.log(square(5)); // 25\n\n// 测试二：\n// 直接引用整个 foo 模块\nimport bar from './foo';\nconsole.log(bar); // 输出值是undefined，后面做解释\n\n// 测试三：\n// 通过 ES6 的语法加载整个 foo模块\nimport * as bar from './foo'\nconsole.log(bar); // Object\n```\n\n## 总结 CommonJs 和 ES6 Module\n\n### CommonJs\n* 根据 CommonJS 规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（包括函数和类），都是私有的，对其他文件是不可见的\n* 通过 module.exports 对象，定义对外接口，其他文件加载该模块，实际上就是读取 module.exports 变量\n* 通过 require 命令加载模块文件，然后返回该模块的exports对象\n### ES6 Module\n* 通过 export 命令用于规定模块的对外接口\n* 通过 import 命令用于加载其他模块提供的功能\n### ES6 Module 与 CommonJs 的区别\n* 在ES6中使用 import 取代 require\n* 在ES6中使用 export 取代 module.exports\n* ES6 在编译时就能确定模块的依赖关系，以及输入和输出的变量，而 CommonJs 只能在运行时确定模块的依赖关系以及输入和输出的变量。\n- 运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”\n- 编译时加载: ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，输入时采用静态命令的形式。即在输入时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”\n注：上面提到 ES6 加载模块时是采用指定加载某个输出值的形式，如果你要想加载整个模块，你可以这么做：\n``import * as customName from './moduleFileName';``","cover":"","link":"gulp-commonjs-es6.html","preview":"\u003cp\u003eCommonJS 规范是为了解决 JavaScript的作用域问题而定义的模块形式，可以使每个模块在它自身的命名空间中执行。该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口，通过 require()来导入其他模块的输出到当前模块作用域中。\u003c/p\u003e\n","title":"使用 gulp 搭建CommonJs \u0026 ES6 模块化环境"},{"content":"\n是时候抛弃繁重的Grunt了。Gulp是一个直观的、配置的、基于流的任务发布系统，而且它更高效。\n\n\n![](http://p1.bpimg.com/567571/0440708ae3690092.jpg)\n\n为什么我会感兴趣呢？好问题。Gulp通过配置写代码不仅使得它编写任务简单，而且更加方便阅读和维护。\n\nGulp运用node.js的流，这使得它构建任务很快，因为没有磁盘文件的读写操作，如果你想了解更多关于流的知识，你可以看看[这个](https://github.com/substack/stream-handbook)。Gulp允许你输入源文件，然后在一系列的管道插件中处理，最后输出，不像Grunt你需要为每个插件配置输入和输出。下面就让我们通过一个sass编译的例子来看看Gulp和Grunt的差异吧。\n\n**Grunt:**\n\n```javascript\nsass: {\n  dist: {\n    options: {\n      style: 'expanded'\n    },\n    files: {\n      'dist/assets/css/main.css': 'src/styles/main.scss',\n    }\n  }\n},\n\nautoprefixer: {\n  dist: {\n    options: {\n      browsers: [\n        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'\n      ]\n    },\n    src: 'dist/assets/css/main.css',\n    dest: 'dist/assets/css/main.css'\n  }\n},\n\ngrunt.registerTask('styles', ['sass', 'autoprefixer']);\n```\n\nGrunt要求每个插件配置要相互独立、要分别为每个插件配置输入源和输出路径。如，我们在sass插件里面配置了一个输入文件，然后保存输出。接着我们需要配置Autoprefixer的输入为Sass的输出，然后再输出了一个文件。让我们来看看Gulp是怎么做的：\n\n**Gulp:**\n\n```javascript\ngulp.task('sass', function() {\n  return gulp.src('src/styles/main.scss')\n    .pipe(sass({ style: 'compressed' }))\n    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))\n    .pipe(gulp.dest('dist/assets/css'))\n});\n```\n\n在Gulp中我们只配置一次输入文件，然后依次通过Sass插件处理，再传给`Autoprefixer`插件处理，然后我们得到输出文件。整个过程没有读取和写入不必要的文件，效率大大提高。\n\n因此，你感兴趣了么？让我们从安装Gulp，创建基本的任务配置文件`gulpfile`开始吧。\n\n**安装gulp**\n\n在我们开始配置任务之前，我们先要安装gulp:\n\n```bash\nnpm install gulp -g\n```\n\n这样gulp就以全局的方式安装了，你可以在任何node命令行里面调用`gulp CLI`。然后我们需要在本地的某个项目里面使用`gulp`。使用`cd`命令进入到项目目录，运行下面的命令（先确保项目目录存在`package.json`文件）：\n\n```bash\nnpm install gulp --save-dev\n```\n\n这会把gulp安装到本地项目，并且把依赖的包写入到`package.json`文件的`devDependencies`里面\n\n**安装gulp插件**\n\n我们将会安装下列插件来开始我们的任务：\n\n- Sass 编译 ([gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass))\n- 添加浏览器前缀Autoprefixer([gulp-autoprefixer](https://github.com/Metrime/gulp-autoprefixer))\n- CSS压缩（[gulp-minify-css](https://github.com/jonathanepollack/gulp-minify-css)）\n- JS语法检查 ([gulp-jshint](https://github.com/wearefractal/gulp-jshint))\n- 文件合并 ([gulp-concat](https://github.com/wearefractal/gulp-concat))\n- JS压Uglify ([gulp-uglify](https://github.com/terinjokes/gulp-uglify))\n- 图片压缩([gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin))\n- LiveReload ([gulp-livereload](https://github.com/vohof/gulp-livereload))\n- 图片缓存，只压缩修改过的图片([gulp-cache](https://github.com/jgable/gulp-cache/))\n- 修改提醒([gulp-notify](https://github.com/mikaelbr/gulp-notify))\n- 文件清理 ([del](https://www.npmjs.org/package/del))\n\n运行下面的命令安装这些插件：\n\n```bash\nnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev\n```\n\n这将会安装所有的依赖插件，并写入到package.json的devDependencies里面。所有的gulp插件列表可以[在这里](http://gratimax.net/search-gulp-plugins/)看到。\n\n**加载插件**\n\n我们需要创建一个`gulpfile.js`，然后使用这些插件：\n\n```javascript\nvar gulp = require('gulp'),\n    sass = require('gulp-ruby-sass'),\n    autoprefixer = require('gulp-autoprefixer'),\n    minifycss = require('gulp-minify-css'),\n    jshint = require('gulp-jshint'),\n    uglify = require('gulp-uglify'),\n    imagemin = require('gulp-imagemin'),\n    rename = require('gulp-rename'),\n    concat = require('gulp-concat'),\n    notify = require('gulp-notify'),\n    cache = require('gulp-cache'),\n    livereload = require('gulp-livereload'),\n    del = require('del');\n```\n\n我们也可以像grunt那样自动加载插件：[auto load](https://github.com/jackfranklin/gulp-load-plugins)\n\n**创建任务**\n\n*编译sass、加前缀、压缩*\n\n```javascript\ngulp.task('styles', function() {\n  return gulp.src('src/styles/main.scss')\n    .pipe(sass({ style: 'expanded' }))\n    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))\n    .pipe(gulp.dest('dist/assets/css'))\n    .pipe(rename({suffix: '.min'}))\n    .pipe(minifycss())\n    .pipe(gulp.dest('dist/assets/css'))\n    .pipe(notify({ message: '样式任务完成' }));\n});\n```\n\n\u003e sass({ style: 'expanded' }：编译后保留原格式\n\n\n```javascript\ngulp.task('styles', function() { ... )};\n```\n\n`gulp.task`API是用来创建任务的。然后通过命令`gulp styles`运行这个任务。\n\n\t\n```javascript\nreturn gulp.src('src/styles/main.scss')\n```\n\n`gulp.src`API用来配置输入的源文件。也可以用模式匹配，如`/**/*.scss`匹配所有文件夹下面后缀为`.scss`的文件作为输入。通过返回流使得它是异步的，确保在提醒任务完成的时候任务是完成了的。\n\n```javascript\n.pipe(sass({ style: 'expanded' }))\n```\n\n通过`.pipe()`把源文件流入一个插件的管道中。然后我们可以去插件的官网看看这个插件的详细用法。\n\n```javascript\n.pipe(gulp.dest('dist/assets/css'));\n```\n\n`gulp.dest`API是用来告知输出文件的路径的。一个任务可以有多个输出，如一个用来输出原来的版本（即源文件），一个输出处理后的版本（即输出文件）。你可以在上面的`styles`任务中看到。\n\n建议去看[gulp api文档](https://github.com/gulpjs/gulp/blob/master/docs/API.md)，这样会更加清楚。\n\n**js语法检查、合并和压缩任务**\n\n```javascript\ngulp.task('scripts', function() {\n  return gulp.src('src/scripts/**/*.js')\n    .pipe(jshint('.jshintrc'))\n    .pipe(jshint.reporter('default'))\n    .pipe(concat('main.js'))\n    .pipe(gulp.dest('dist/assets/js'))\n    .pipe(rename({suffix: '.min'}))\n    .pipe(uglify())\n    .pipe(gulp.dest('dist/assets/js'))\n    .pipe(notify({ message: 'Scripts task complete' }));\n});\n```\n\n这里用的`JSHin`t插件，我们使用了默认的`JSHint Reporter`，可能适用于大多数人，想了解更多可以去[jshint官网](http://www.jshint.com/docs/reporters/)看\n\n**图片压缩任务**\n\n```javascript\ngulp.task('images', function() {\n  return gulp.src('src/images/**/*')\n    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))\n    .pipe(gulp.dest('dist/assets/img'))\n    .pipe(notify({ message: 'Images task complete' }));\n});\n```\n\n这里我们只用了`imagemin`插件，但是可以做的更好，我们可以缓存修改过的图片，或者只对修改过的图片进行再次的压缩操作，因此我们可以使用[gulp-cahce](https://github.com/jgable/gulp-cache)插件，因此我们需要将这行代码：\n\n```javascript\n.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))\n```\n\n改成：\n\n```javascript\n.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))\n```\n\n此时，只有新的图片或者改变过的图片才会被压缩。\n\n**文件清理**\n\n在再次发布之前，我们最好把目标文件的文件先清理掉，然后重新构建：\n\n```javascript\ngulp.task('clean', function(cb) {\n\t    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)\n\t});\n```\n\n**默认任务**\n\n我们可以通过`$ gulp`启动默认任务，然后在默认任务中调用其他任务：\n\n```javascript\ngulp.task('default', ['clean'], function() {\n\tgulp.start('styles', 'scripts', 'images');\n});\n```\n\n\n看到`gulp.task`里面的数组了吧？这里定义了任务的依赖，也就是说`default`任务依赖`clean`任务。在这个例子中，执行`gulp.start`之前会先运行`clean`任务。Gulp里面的任务同时进行，没有明确的顺序哪个先完成，所以我们要确保`clean`任务执行完之后再执行`gulp.start`里面的任务。\n\n\u003e 虽然不建议在执行依赖任务数组的时候使用`gulp.start`，但是在这里我们没有办法确保`clean`任务执行完毕后再执行其它任务，因此这里使用`gulp.start`貌似是最好的选择。\n\n\n**Watch任务**\n\n当文件发生变化的时候，我们可能需要重新执行任务，因此我们需要配置一个监听文件变化的任务：\n\n```javascript\ngulp.task('watch', function() {\n\n  // Watch .scss files\n  gulp.watch('src/styles/**/*.scss', ['styles']);\n\n  // Watch .js files\n  gulp.watch('src/scripts/**/*.js', ['scripts']);\n\n  // Watch image files\n  gulp.watch('src/images/**/*', ['images']);\n\n});\n```\n\n我们通过`gulp.watch`API来监听文件的变化，然后执行相关的依赖任务。现在我们可以执行`$ gulp watch`命令来执行我们的`watch`任务，监听`.scss`、`.js`或者图片文件的变化执行相应的任务。\n\n**LiveReload任务**\n\n当我们代码修改的时候，Gulp也可以主动帮我们刷新页面，此时我们需要配置`LiveReload`服务，并修改我们的`watch`任务：\n\n```javascript\ngulp.task('watch', function() {\n\n  // Create LiveReload server\n  livereload.listen();\n\n  // Watch any files in dist/, reload on change\n  gulp.watch(['dist/**']).on('change', livereload.changed);\n\n});\n```\n\n要让这个任务生效，我们还需要安装并开启浏览器LiveReload插件，我们也可以[手动添加代码片段](http://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually-)。\n\n**整合这些任务**\n\n把上面的这些任务综合起来，就构成了一个完整的`gulpfile`:\n\n```javascript\n// gulpfile.js\n// Load plugins\nvar gulp = require('gulp'),\n    sass = require('gulp-ruby-sass'),\n    autoprefixer = require('gulp-autoprefixer'),\n    minifycss = require('gulp-minify-css'),\n    jshint = require('gulp-jshint'),\n    uglify = require('gulp-uglify'),\n    imagemin = require('gulp-imagemin'),\n    rename = require('gulp-rename'),\n    concat = require('gulp-concat'),\n    notify = require('gulp-notify'),\n    cache = require('gulp-cache'),\n    livereload = require('gulp-livereload'),\n    del = require('del');\n \n// Styles\ngulp.task('styles', function() {\n  return gulp.src('src/styles/main.scss')\n    .pipe(sass({ style: 'expanded', }))\n    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))\n    .pipe(gulp.dest('dist/styles'))\n    .pipe(rename({ suffix: '.min' }))\n    .pipe(minifycss())\n    .pipe(gulp.dest('dist/styles'))\n    .pipe(notify({ message: 'Styles task complete' }));\n});\n \n// Scripts\ngulp.task('scripts', function() {\n  return gulp.src('src/scripts/**/*.js')\n    .pipe(jshint('.jshintrc'))\n    .pipe(jshint.reporter('default'))\n    .pipe(concat('main.js'))\n    .pipe(gulp.dest('dist/scripts'))\n    .pipe(rename({ suffix: '.min' }))\n    .pipe(uglify())\n    .pipe(gulp.dest('dist/scripts'))\n    .pipe(notify({ message: 'Scripts task complete' }));\n});\n \n// Images\ngulp.task('images', function() {\n  return gulp.src('src/images/**/*')\n    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))\n    .pipe(gulp.dest('dist/images'))\n    .pipe(notify({ message: 'Images task complete' }));\n});\n \n// Clean\ngulp.task('clean', function(cb) {\n    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)\n});\n \n// Default task\ngulp.task('default', ['clean'], function() {\n    gulp.start('styles', 'scripts', 'images');\n});\n \n// Watch\ngulp.task('watch', function() {\n \n  // Watch .scss files\n  gulp.watch('src/styles/**/*.scss', ['styles']);\n \n  // Watch .js files\n  gulp.watch('src/scripts/**/*.js', ['scripts']);\n \n  // Watch image files\n  gulp.watch('src/images/**/*', ['images']);\n \n  // Create LiveReload server\n  livereload.listen();\n \n  // Watch any files in dist/, reload on change\n  gulp.watch(['dist/**']).on('change', livereload.changed);\n \n});\n```","cover":"","link":"gulp-basic.html","preview":"\u003cp\u003e是时候抛弃繁重的Grunt了。Gulp运用node.js的流，这使得它构建任务很快，因为没有磁盘文件的读写操作\u003c/p\u003e\n","title":"Gulp入门指南"},{"content":"\nBootstrap3使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs ,col-sm,col-md,col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是extra small的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。 \n\n## 1、col-xs类\n用法是\u003ccode\u003e\u0026lt;div class=\"col-xs-*\"\u0026gt;\u003c/code\u003e。它星号代表1~12的数字。我们知道栅格系统总共有12列，我们在这里使用数字几就代表着该div占用几列的宽度。假如我们在给超级小屏幕开发界面，那么我们使用该类，该类没有任何行为，不管屏幕小到多少，都不会改变div的布局。\n\n## 2、col-sm类\n用法是\u003ccode\u003e\u0026lt;div class=\"col-sm-*\"\u0026gt;\u003c/code\u003e。星号的意义同上，但是该类适合屏幕宽度为`750px`的设备，如果在屏幕宽度小于750px的设别上，该div就会水平堆叠。\n这是在`大于750px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgo0fcs11eg114i150n8mtgdga.jpg)\n这是在`小于750px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgnv4oa1o2ni62183v8l61npea.jpg)\n\n\n## 3、col-md类\n用法是\u003ccode\u003e\u0026lt;div class=\"col-md-*\"\u0026gt;\u003c/code\u003e。该类适合`970px`以上屏幕。通上面讲的道理一样，假如使用屏幕尺寸小于`970px`的设备查看网页，div就会垂直堆叠。\n这是在`大于970px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgo0fcs11eg114i150n8mtgdga.jpg)\n这是在`小于970px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgnv4oa1o2ni62183v8l61npea.jpg)\n\n\n## 4、col-lg类\n用法是\u003ccode\u003e\u0026lt;div class=\"col-lg-*\"\u0026gt;\u003c/code\u003e。该类适合`1170px`以上屏幕。通上面讲的道理一样，假如使用屏幕尺寸小于`1170px`的设备查看网页，div就会垂直堆叠。\n这是在`大于1170px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgo0fcs11eg114i150n8mtgdga.jpg)\n这是在`小于1170px`屏幕上的样式：\n![](http://7xoatu.com1.z0.glb.clouddn.com/o_1ahgnv4oa1o2ni62183v8l61npea.jpg)\n\n如何组合使用这几个类?\n我们使用\u003ccode\u003e\u0026lt;div class=\"col-sm-10 col-md-8\"\u0026gt;\u003c/code\u003e这样的方式来表示：在中等屏幕设备上该div占用8列的宽度；在小屏幕上该div占用10列的宽度。","cover":"","link":"bootstrap-grid.html","preview":"\u003cp\u003eBootstrap3使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。\u003c/p\u003e\n","title":"Bootstrap详解：栅格系统"},{"content":"\n\nLESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS功能，使之更适合程序员。\n你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS，以更少的代码完成更多的样式。\n学习这些工具最好的方法是通过各种实例快速入门，今天我们向你介绍 10 个非常有用的使用 Less CSS 的实例。\n\n# 1、变量\n变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。\n```css\n  // LESS\n\n@color: #4D926F;\n\n#header {\n  color: @color;\n}\nh2 {\n  color: @color;\n}\n```\n\n/* 生成的 CSS */\n```css\n#header {\n  color: #4D926F;\n}\nh2 {\n  color: #4D926F;\n}\n```\n\n# 2、混合\n混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。\n```css\n// LESS\n\n.rounded-corners (@radius: 5px) {\n  border-radius: @radius;\n  -webkit-border-radius: @radius;\n  -moz-border-radius: @radius;\n}\n\n#header {\n  .rounded-corners;\n}\n#footer {\n  .rounded-corners(10px);\n}\n```\n/* 生成的 CSS */\n```css\n#header {\n  border-radius: 5px;\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n}\n#footer {\n  border-radius: 10px;\n  -webkit-border-radius: 10px;\n  -moz-border-radius: 10px;\n}\n```\n\n# 3、嵌套规则\n我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。\n```css\n// LESS\n\n#header {\n  h1 {\n    font-size: 26px;\n    font-weight: bold;\n  }\n  p { font-size: 12px;\n    a { text-decoration: none;\n      \u0026:hover { border-width: 1px }\n    }\n  }\n}\n```\n/* 生成的 CSS */\n```css\n#header h1 {\n  font-size: 26px;\n  font-weight: bold;\n}\n#header p {\n  font-size: 12px;\n}\n#header p a {\n  text-decoration: none;\n}\n#header p a:hover {\n  border-width: 1px;\n}\n```\n\n# 4、函数 \u0026 运算\n运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。\n```css\n// LESS\n\n@the-border: 1px;\n@base-color: #111;\n@red:        #842210;\n\n#header {\n  color: @base-color * 3;\n  border-left: @the-border;\n  border-right: @the-border * 2;\n}\n#footer { \n  color: @base-color + #003300;\n  border-color: desaturate(@red, 10%);\n}\n```\n/* 生成的 CSS */\n```css\n#header {\n  color: #333;\n  border-left: 1px;\n  border-right: 2px;\n}\n#footer { \n  color: #114411;\n  border-color: #7d2717;\n}\n```\n\n# 5、圆角\nCSS3 一个非常基本的新属性可以快速的生产圆角效果，如上图所示。要使用 CSS3 的圆角效果我们必须针对不同的浏览器定义各自的前缀，而如果使用了 LESS 就可以不用那么麻烦。\n* 简单的圆角半径\n我的第一个 LESS 代码是我最简单的 LESS 代码之一，我需要设置圆角的半径，而且我希望使用一个变量来调整这个半径大小。\n下面代码使用 mixin 技术，通过定义 .border-radius 并接收一个 radius 参数，该参数默认值是 5px，你可以在多个地方重复使用该 mixin 方法：\n```css\n/* Mixin */\n.border-radius (@radius: 5px) {\n    -webkit-border-radius: @radius;\n    -moz-border-radius: @radius;\n    border-radius: @radius;\n}\n \n/* Implementation */\n#somediv {\n    .border-radius(20px);\n}\n```\n将这个 less 编译成 css 后的结果是：\n```css\n/* Compiled CSS */\n#somediv {\n  -webkit-border-radius: 20px;\n  -moz-border-radius: 20px;\n  border-radius: 20px;\n}\n```\n* 四角的半径定制\n如果你希望用户可自由定制四个角的半径，那么我们需要对上面代码做下改进。\n使用4个变量分别代表四个边角的半径大小：\n\n```css\n/* Mixin */\n.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {\n    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;\n    -moz-border-radius: @topleft @topright @bottomright @bottomleft;\n    border-radius: @topleft @topright @bottomright @bottomleft;\n}\n \n/* Implementation */\n#somediv {\n    .border-radius-custom(20px, 20px, 0px, 0px);\n}\n```\n编译后的 CSS\n```css\n/* Compiled CSS */\n#somediv {\n  -webkit-border-radius: 20px 20px 0px 0px;\n  -moz-border-radius: 20px 20px 0px 0px;\n  border-radius: 20px 20px 0px 0px;\n}\n```","cover":"","link":"newbie-5-less-css.html","preview":"\u003cp\u003eLESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS功能，使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS，以更少的代码完成更多的样式。学习这些工具最好的方法是通过各种实例快速入门，今天我们向你介绍 10 个非常有用的使用 Less CSS 的实例。\u003c/p\u003e\n","title":"新手必须掌握5个LESS CSS"}]