[webpack官网文档地址]:（http://webpack.github.io/docs/what-is-webpack.html）

[实践工程地址]: (https://github.com/silence717/webpack-practice )

本篇文章可切换到分支 step1查看源代码。

what is webpack?

官网对webpack的定义是MODULE BUNDLER，目的就是把有依赖关系的各种文件打包成一系列的静态资源。

简单分步实践

创建一个空文件夹，进入

1

cd /Users/silence/code/personal/webpack-practice

全局安装 webpack

1

npm install webpack -g

more >>

理解 node.js 中的 module.exports 与 exports

原文链接: https://www.sitepoint.com/understanding-module-exports-exports-node-js/

作为一个开发者，我们经常会遇到需要使用不熟悉的代码的情况。
在这个过程中遇到一个问题：我需要花费多少时间去理解这些代码，明白如何使用?
一个典型的回答就是：先让我可以开始coding，等到时间允许再去做深入研究。
接下来我们将对 module.exports 和 exports 在 node.js中的使用有一个更好地了解。

Note: 这篇文章包括了 node 中 module 的使用。如果你想了解浏览器内部 modules 的使用，可以参考这面这篇文章：
Understanding JavaScript Modules: Bundling & Transpiling

more >>

由于一直在项目上并没有使用过angular进行开发，目前会遇到一些比较弱智的问题，所以每次遇到耗时较多的问题都总结一下。

$apply问题

接到一个类似于dropdown这样的需求，点击按钮下拉选择展示，而它的关闭有3中场景。

1. 目前处于展开状态，再次点击按钮，下拉隐藏。
2. 点击里面的任一条件，下拉隐藏。
3. 点击空白处，下拉隐藏。

相信这样的使用场景一定不陌生，因为他经常出现。

一开始的时候想象了一下jquery多么美好，实现起来多么简单，其实angular也很容易。

思路解析：

外层设置一个状态值，通过添加ngClass控制下拉是否显示。设想都是美好的，也通过测试这样没有问题。

实现过程：

1.html书写

1
2
3
4
5
6
7
8

<div class="content" ng-class="{'open': vm.open}">
    <span class="show" ng-click="vm.toggle()">cilic me!</span>
    <div class="list">
        <ul>
            <li class="item" ng-repeat="item in list" ng-click="vm.itemClick();">{{item.title}}</li>
        </ul>
    </div>
</div>

2.css代码控制

1
2
3
4
5
6

.content .list{
    display: block;
}  
.content.open .list{
    display: block;
}

3.mock静态数据

1
2
3
4
5
6
7

vm.list = [
    {title: '下拉选项1'},
    {title: '下拉选项2'},
    {title: '下拉选项3'},
    {title: '下拉选项4'},
    {title: '下拉选项5'}
];

4.点击按钮控制显示隐藏，我只需要控制open状态为true或false即可。

1
2
3
4
5
6

// 设置初始状态为不显示
vm.open = false;
// 显示,关闭浮层
vm.toggle = function() {
    vm.open = !vm.open;
};

5.点击任一下拉选择，隐藏。

1
2
3

vm.itemClick = function() {
	vm.ticketOpen = false;
};

6.点击空白处，隐藏。

1
2
3

$document.off('click').on('click', function() {
	vm.open = false;
});

看到这样的代码，你觉得有问题吗？反正我当时觉得自己一定是对的，但调试结果就是不生效，下拉怎么都不会隐藏。
通过断点调试，页面输出open的值，发现js中的open确实已经发生改变，但是页面的值确没有改变，然后联想到双向数据绑定失效。

谁决定什么事件进入angular context,而哪些又不进入呢？$apply!

这里声明一点ng-click不需要单独去做处理是因为angular已经做了，因此点击带有ng-click的元素时，事件就会被封装到一个$apply调用。

所以上面的问题也显而易见，是因为没有调用$apply,事件没有进入angular context, $digest循环永远没有执行。
so将code修为：

1
2
3
4

$document.off('click').on('click', function() {
    vm.open = false;
    $scope.$apply();
});

这样一测，立马有用了。
$apply是$scope的一个函数，调用它会强制一次$digest循环.
然后看到网上有人说有种更好用的办法，尝试了一下确实有效：

1
2
3
4
5

$document.off('click').on('click', function() {
	$scope.$apply(function () {
		vm.open = false;
	});
});

解释为：

What’s the difference?
The difference is that in the first version, we are updating the values outside the angular context so if that throws an error, Angular will never know.
Obviously in this tiny toy example it won’t make much difference,
but imagine that we have an alert box to show errors to our users and we have a 3rd party library that does a network call and it fails.
If we don’t wrap it inside an $apply, Angular will never know about the failure and the alert box won’t be there.

参考文章地址： http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/

一 创建对象：

1. 对象直接量：由若干名/值对组成的映射表，名/值对中间使用冒号分离，明/值对之间用逗号分离，整个映射变使用花括号括起来。举例如下：

1
2
3
4
5
6
7
8
9

var book = {
    "main title": "javascript",                   // 属性名字里有空格,必须用字符串表示
    "sub-title": "The Definitive Guide",          // 属性名字里连字符,必须使用字符串便是
    "for": "all audiences",                       // "for"是保留字,因此必须用引号
    author: {                                     // 这里的属性值是一个对象
        firstName: "David",                       // 注意,这里的属性名都没有引号
        surname: "Flanagan"
    }
};

more >>

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性称为闭包。
简单点可以理解为：闭包就是能够读取其他函数内部变量的函数。由于在javascript语言中,只有函数内部的子函数才能读取局部变量，因此可以把闭包理解为“定义在一个函数内部的函数”。

闭包的用途：

1. 读取函数内部的变量。
2. 变量的值始终保持在内存中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function f1(){
    var n = 999;
    nAdd = function(){
        n += 1
    }
    function f2(){
        console.log(n);
    }
    return f2;
}
var result=f1();
result(); // => 999
nAdd();
result(); // => 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

more >>

github源码地址：https://github.com/angular-ui/ui-router

api地址 http://angular-ui.github.io/ui-router/site

安装

1

npm install --save angular-ui-router

使用angular-ui-router

备注： 以下所有示例代码来源于个人所写的练习.

地址为：https://github.com/silence717/angular-webpack-demo

导入angular-ui-router

1

import uiRouter from 'angular-ui-router';

在angular.module中注入angular-ui-router

1

angular.module('app',[uiRouter]);

为了方便使用，将$state与$stateParams全部挂载到$rootScope，在angular.module中初始化

1
2
3
4
5
6

function runBlock($rootScope, $state, $stateParams) {
	'ngInject';
	$rootScope.$state = $state;
	$rootScope.$stateParams = $stateParams;
}

more >>

####数组是值的有序集合。每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。javascript的数组是无类型的：数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。

一 创建数组

使用数组直接量是创建数组最简单的方法，在方括号中将数组元素用逗号隔开即可。例如：

1
2
3

var empty = [];              // 没有元素的数组
var arr = [1, 2, 3];         // 有5个数值得数组
var mix = [1, true, "a"];    // 3个不同类型元素

如果省略数组直接量中的某个值，省略的元素将被赋予undefined值。例如：

1

var count = [1, , 3];        // 数组有3个元素，第二个元素为undefined

调用构造函数Array()是创建数组的另一种方法。可以用三种方式：

调用时候没有参数

1

var a = new Array();

调用时有一个数值参数，它指定长度：

1

var a = new Array(10);

more >>