还是自己遇到的一个坑的总结吧！与其说是坑不如说自己学艺不精，让我先哭一会！！

需求

简单就是获取一个css的height

（好吧 就是一个这么简单的需求）

实践

好吧 长时间的JQ 我已经对原生无能了 让我默哀3秒！！！

document.querySelector('.className').style.height;

这个果然不生效 好吧 看来我真的倒退不少！让我再哭一会！！（哭你妹 快去总结）

在学习中发现 其实js原生获取css的方法很多，上面写的就是其中一种，只不过情景不对啊！

getComputedStyle

• 说明 一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])

简单来说 读出你八辈祖宗的一个方法。

• 语法 window.getComputedStyle(dom, '伪元素')

看到伪元素、我就懵逼了 我只知道伪类啊 这有神马区别？

伪元素 其实就是 ::before :: after :: first-line ::first-letter ::content 等等
伪类 :hover :link :first-child :active 等等

• 用法

var oImg = document.getElementById('photo');

window.getComputedStyle(oImg, null).height;

dom.style

• 说明 获取元素style属性中的CSS样式， 简单说就是 能读能写 只能读你的外表
• 语法 dom.style.样式名称
• 用法

var oImg = document.getElementById('photo');

oImg.style.height;  // 只能获取css 样式表的

currentStyle

• 说明 返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）与getComputedStyle那个读你八辈祖宗的很像，但是不能获取伪元素。且他们获取的属性也有很大差异。
• 语法 element.currentStyle.样式
• 用法

var oImg = document.getElementById('photo');

oImg.currentStyle.height;  // 只能获取css 样式表的

getPropertyValue和getAttribute

• 说明 可以获取CSS样式申明对象上的属性值（直接属性名称），
  getPropertyValue可以不用驼峰，直接用其属性名
  getAttribute主要是为了兼容IE获取属性值,需要驼峰的写法
• 语法
  getPropertyValue("background-color")
getAttribute("backgroundColor")
• 用法

var oImg = document.getElementById('photo');
var oStyle = oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null); 
oStyle.getPropertyValue("background-color")
oStyle.getAttribute("backgroundColor")

总结

如果我想获取某个属性值可以 比如高度 ?
(dom.currentStyle? dom.currentStyle : window.getComputedStyle(dom, null)).height;

如果是复合的某个属性获取？
(oImg.currentStyle? oImg.currentStyle : window.getComputedStyle(oImg, null)).getPropertyValue("background-color")

如果我想给这个属性重新设置这个高度？
可以先用上面方法取到，然后用
dom.style.height = XX + 'px';
如果是复合的属性值，请注意是驼峰的写法！

其实在看了这些以后，我用了上面的这个方法我依然没有获取到这个图片的高度？为什么啊 ？

因为图片存在一个加载的问题，你刚进来获取当然无法获取到？ 其实可以用onload事件来解决，具体还有其他更多的方法。

最近在项目开发过程中，作为前端leader，发现前后端联调的时候，花费的时间特别多，按理说在接口定义清楚的前提下，联调是非常快速的。

然而事实上，当我仔细阅读接口文档后，发现很多东西，并未定义清楚，或者压根没有。

那么一个完善的接口文档应该是什么样的？

1.首先接口的设计，需要遵循REST原则，如果有同学不懂REST，可以看看这篇文章 #4
2.接口的名称及作用描述。
3.接口的URL和请求时使用的HTTP Method。
4.接口的请求格式及参数包括参数类型，参数默认值，参数描述。
5.接口可能返回的状态码，及每个状态码下的响应类型和格式。

以下是一个接口文档的示例：

ticket列表

用于获取ticket列表，带分页功能

接口：

GET /tickets

请求参数：

名称	类型	定义	必需	默认值(default)	说明
name	string	查询name		""	作用于name
pageNum	number	页码		1
pageSize	number	每页大小		10
status	number	ticket状态		-1	参考ticket状态枚举说明
orderBy	string	排序字段名称		"id"	可以使用"id"或"name"
order	string	排序方式		"asc"	可以为"asc"或"desc"

其他说明
ticket状态枚举 {-1: '全部'，0: '关闭'，1: '开启'}

响应：

成功：200

响应格式：JSON

   {
       "pageNum"：{number} {default: 从请求获得}，// 页码
       "pageSize":   {number} {default: 从请求获得}，// 每页大小
       "totalCount": {number} {default: 0}, // 总数
       "results": [ // {number}  结果集
           {
               "id": {number}, // 必填
               "name": {string} {default: null},  // ticket name
               "status": {number} {default: null}, // ticket状态 参考ticket枚举说明
               "createTime": {number} {default: null}, // 使用timestamp，方便前端转换
           },
           ...
       ]
   }

登录超时 / 未登录: 403

参考标准403响应

服务器内部错误: 500

参考标准500响应

另外我们还需要提供一些标准响应格式约定：

• 分页列表格式, 不分页列表格式

{
     "pageNum": {number} {default: 从请求获得}, // 页码, 不分页列表 为 null
     "pageSize":   {number} {default: 从请求获得}, // 每页大小，不分页列表 为 null
     "totalCount": {number} {default: 0}, // 总数， 不分页列表 为 null
     "results": [ // {number}  结果集
            ... ...
     ] 
}

• 删除，更改和添加后响应格式:
  • 成功: 返回操作实体的简单信息，方便前端通知用户
  • 失败: 用 HTTP 状态码 表示, 返回错误 message 和 errorCode 参见 500 相应格式

{
       "id": {number}, 
       "name": {string}
}

• 403响应
• 500响应

{
    "message": {string}, // 友好的错误信息，可选，如不提供前端应当使用默认的提示信息
    "errorCode": {number} // 可选择性提供 errorCode 便于后续问题排查，可选
}

后端可以针对不同的响应格式创建不同Java类，其他同学只需继承对应的class，而前端同学针对500和403可以使用AngularJS拦截器统一处理。

最后再强调一点，接口如果一旦定义清楚后，如果需要改动，一定要及时通知到相关同学，所以建议将修改接口权限控制在专门人手里。

关于接口的设计，可以参考
https://github.com/ecomfe/ub-ria/wiki

推荐一个接口定义工具 https://github.com/thx/RAP

angular-ui-router使用

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

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

安装

npm install --save angular-ui-router

使用angular-ui-router

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

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

导入angular-ui-router

import uiRouter from 'angular-ui-router';

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

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

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

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

    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}

定义路由规则，在angular.module中配置路由规则

export function routerConfig($urlRouterProvider) {
    'ngInject';

    // 默认路由设置
    $urlRouterProvider.otherwise('/home');

    // 无视浏览器中 url末尾的"/"
    // 设置时 url, 末尾不要添加 "/"
    $urlRouterProvider.rule(($injector, $location) => {
        const path = $location.path();
        const hashTrailingSlash = path[path.length -1] === '/';

        if (hashTrailingSlash) {
            return path.slice(0, path.length -1);
        }
    });
}

基于以上两部分的操作，完整的app初始化代码为

angular
    .module('app', [uiRouter])
    .config(routerConfig)
    .run(runBlock);

业务模块路由定义配置,我们通常建议将路由分散到自己的模块管理，所以只以单个作为示例

export const HomeRouter = {
    state: 'home',
    config: {
        url: '/home',
        views: {
            '@': {
                template: homeTpl,
                controller: 'HomeController',
                controllerAs: 'vm'
            }
        },
        title: '好玩的app'
    }
};

业务入口主文件导入，并且在angular.module中配置

import {HomeRouter} from './Routers';

function config($stateProvider) {
    'ngInject';
    $stateProvider.state(HomeRouter.state, HomeRouter.config);
}

export default angular
    .module('app.home', [])
    .config(config)
    .name;

页面的html如何书写

<ul class="nav navbar-nav">
    <li ui-sref-active="active"><a ui-sref="home">首页</a></li>
    <li ui-sref-active="active"><a ui-sref="album">相册</a></li>
    <li ui-sref-active="active"><a ui-sref="user.baseInfo">个人中心</a></li>
</ul>
<div ui-view=""></div>

在这里做一个简单常用的API的解释

directive

ui-sref：A directive that binds a link ( tag) to a state.

ui-sref-active: A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive.

ui-view: The ui-view directive tells $state where to place your templates.

ui-view使用有三种，分别为：

1. as element:

<ui-view></ui-view>

1. as attribute:

<ANY ui-view ></ANY>

1. as class:

<ANY class="ui-view"></ANY>

具体里面的参数不做介绍，自己查阅官方文档

上面的html代码会被compile为：

<ul class="nav navbar-nav">
    <li ui-sref-active="active" ui-sref-active-eq="" class="active"><a ui-sref="home" href="#/home">首页</a></li>
    <li ui-sref-active="active" class=""><a ui-sref="album" href="#/album">相册</a></li>
    <li ui-sref-active="active" class=""><a ui-sref="user.baseInfo" href="#/user/baseInfo">个人中心</a></li>
</ul>

$state使用

Methods

get 获取当前state的配置信息

    <a href="javascript:;" ng-click="vm.getConfig();">获取state配置</a>

    let config = this.state.get('user');
    console.log(config);
    // => Object {url: "/user", views: Object, title: "个人中心", name: "user"}...

go 跳转到一个新的state

    <a href="javascript:;" ng-click="vm.goUserCenter();">这是一个跳转链接...</a>

    // 不带参数跳转
    this.state.go('user.baseInfo');
    // 带参数跳转
    this.state.go('album.detail', {id: 1});

href 获取到当前state的href值

    console.log(this.state.href('album.detail', {id: 0}));
    // => #/album/0

includes 获取当前state是否包含某些state

    console.log(this.state.includes('album'));
    // => false

is Similar to $state.includes, but only checks for the full state name

    console.log(this.state.is('home'));   //=> true

events

$stateChangeStart 路由发生改变

function stateChangeStart($rootScope) {
    $rootScope.$on('$stateChangeStart',
        (event, toState, toParams, fromState, fromParams) => {
            // event.preventDefault();
            console.log('开始改变=====');
            console.log(toState);
            console.log(toParams);
            console.log(fromState);
            console.log(fromParams);
            // 开始改变=====
            // app.js:48Object {url: "/home", views: Object, title: "好玩的app", name: "home"}
            // app.js:49Object {}
            // app.js:50Object {name: "", url: "^", views: null, abstract: true}
            // app.js:51Object {}
            // client.js:55 [HMR] connected
        });
}

$stateChangeError 路由转变出错，参数基本与$stateChangeStart一致，多一个error参数

$stateChangeSuccess 路由转向成功，参数与$stateChangeStart完全一致

$stateNotFound 未找到路由,demo copy于参照官网

// somewhere, assume lazy.state has not been defined
$state.go("lazy.state", {a:1, b:2}, {inherit:false});

// somewhere else
$scope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams) {
    console.log(unfoundState.to); // "lazy.state"
    console.log(unfoundState.toParams); // {a:1, b:2}
    console.log(unfoundState.options); // {inherit:false} + default options
})

onEnter 可以配置进入路由to do something

onEnter: function() {
    console.log('enter user.footprint state');
}

onExit 退出路由做什么

onExit: function() {
    // 用于初始化一些数据什么的,清空表单...
    console.log('exit user.footprint state');
}

部分知识点单列：

一、问: 多个页面可能使用相同的html模板,我们是要同样的代码写N遍吗? 答案肯定不是.那么问题来了,一个页面有多个模板文件,肿么办?

1. 在html中给ui-view添加名字

<div ui-view="content"></div>
<div ng-show="vm.isShowThumb" class="module-content"  ui-view="thumbList"></div>
<div ng-show="vm.isShowDetail" ui-view="detailList"></div>

1. 在路由配置中添加配置信息

export const UserFootprintRouter = {
    state: 'user.footprint',
    config: {
        url: '/footprint',
        views: {
            'content@user': {
                template: footPrintTpl,
                controller: 'FootprintController',
                controllerAs: 'vm'
            },
            '[email protected]': {
                template: thumbListTpl
            },
            '[email protected]': {
                template: detailListTpl
            }
        },
        title: '我的足迹'
    }
};

个人理解就是: viewname@statename去设置template

二、 $stateParams使用，^^最后一个点

先看代码：

export const AlbumDetailRouter = {
    state: 'album.detail',
    config: {
        url: '/:id',
        views: {
            '@': {
                template: albumDetailTpl,
                controller: 'PhotoController',
                controllerAs: 'vm'
            }
        },
        title: '单张照片show'
    }
};

问: 我们经常会需要用到路由去传参,例如编辑一条信息,获取单个信息,应该如何去做呢?

答: angular-ui-router提供了一个$stateParams的service,可直接获取.在controller中的使用示例

export default class PhotoController {

    constructor(photoResource, $stateParams) {

        let vm = this;

        photoResource.success(data => {
            vm.detail = data[$stateParams.id];
        })
    }
}

有人肯定会疑问,$stateParams从何而来,在上面我们给angular.module中已经将其初始化,挂在到$rootScope.

三、这次真的是最后一个点了 most important: $urlRouterProvider

1. when() for redirection

    app.config(function($urlRouterProvider){
        $urlRouterProvider.when('', '/index');
    });

1. otherwise() for invalid routes

app.config(function($urlRouterProvider){
    $urlRouterProvider.otherwise('/home');
});

it's over! 所有以上仅代表个人理解,如有不对,请指出,虚心接受改正错误!

关于 AngularJS 1.x 中的 scope， 官方 guide 已经讲的很清楚了，大家自己阅读就行。

官方 guide (中文): http://docs.ngnice.com/guide/scope
官方 guide (英文): https://docs.angularjs.org/guide/scope

我在这里只强调几个 scope 技巧:

• scope 树状结构，类似于 dom 树, 在console中执行下面的代码， 看看是不是一颗树。

document.querySelectorAll('.ng-scope').forEach(function(node) {
    node.style.border = '1px solid red';
});

技巧1: 查看 dom 元素 上的 scope, 更多技巧，请参看 hjzheng/CUF_meeting_knowledge_share#40

angular.element($0).scope();

• 父 scope 和 子 scope 存在继承关系（这里实际上利用的是 JS 的原型继承， 请翻看 AngularJS 源码 关于scope中的 $new 方法），所以在父子 scope 中定义同名的变量，此时，你需要使用父元素上定义的变量，需要额外注意，防止被子 scope 的同名变量覆盖掉， 当然，现在都使用 controllerAs 的方式。
• 额外关注一些指令，因为它们会产生子的 scope， 例如 ngController, ngInclude, ngRepeat 等，相应的说明都可以参看官方 API， 因为上面有详细的说明
• scope 提供了$watch, $watchGroup, $watchCollection, 注意三者的区别， 并灵活运用
• scope 提供事件机制.
  事件优化 请参考 https://segmentfault.com/a/1190000000502981#articleHeader12
  • $emit
  • $broadcast
  • $on

技巧2：慎用事件传播，先用其他方式，使用双向数据绑定或共享service等方法来代替。
$on 和 $broadcast 的源码解读
$on 将注册的函数放入 scope 对象的 $$listeners 中。
$broadcast 对 scope 树进行的遍历（深度优先遍历），然后在 $$listeners 上找到注册的方法后，执
行，效率不高

• scope 的 $apply 和 $digest
  $apply 会使 ng 进入 $digest cycle, 并从 $rootScope 开始遍历(深度优先)检查数据变更。
  $digest 仅会检查该 scope 和它的子 scope，当你确定当前操作仅影响它们时，用 $digest 可以稍微提升性能。
• scope 与 指令 https://github.com/hjzheng/angular-directive-learning#lesson-3

通过设置 scope 的值 ，false 使用父 scope, true 产生一个子 scope 继承自父scope， {} 隔离scope

• 隔离 scope 传参 https://github.com/hjzheng/angular-directive-learning#lesson-4
• Angular 2 没有 scope 了，单向数据流
  

AngularJS如何实现复制到剪切板的功能？

实践方案

上网查资料时发现有很多实现这个功能的例子，我尝试了其中最简单的一种方法，就是利用原生JS
中的document.execCommand('copy')方法实现: 详见参考链接

js部分

toClipboard(content) {
    const copyElement = angular.element(`<span id="ngClipboardCopyId">${content}</span>`);
    const body = injector.get('$document').find('body').eq(0);

    body.append(injector.get('$compile')(copyElement)(injector.get('$rootScope')));
    const ngClipboardElement = angular.element(document.getElementById('ngClipboardCopyId'));
    const range = document.createRange();

    range.selectNode(ngClipboardElement[0]);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    copyElement.remove();
}

html部分

<input type="text" class="code-input" ng-model="vm.arrangeCode">
<button class="btn-function-normal" ng-click="vm.toClipboard(vm.arrangeCode)">复制</button>

用这种方法虽然实现了功能，但有太多的DOM操作，因此不是很理想的方案

其他方案：

1. 参考ng-clip源码，其中部分代码看不懂，求大神指点 参考链接
2. 安装依赖库angular-clipboard 参考链接

Express 是什么 ?

中文官网的回答: Express 是一个高度包容、快速而极简的 Node.js Web 框架。

如何使用

• 安装

npm install express --save

• 写一个 http server （可以作为模板）

var express = require('express'); 
var bodyParser = require('body-parser'); // 引入 body-parser 中间件, 记得 npm install
var router = express.Router();
var app = express();
var userRouter = require('./userRouter'); // 引入自己的路由

// 添加中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

app.use(express.static('public')); // 设置静态资源路径
app.use(userRouter); // 添加自己的路由

// 默认 路由到目录下的index.html
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

// 设置地址和端口
app.listen(3000, 'localhost', function(err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('Listening at http://localhost:3000');
});

mock 后端请求

• Mock JSON 数据

var users = [
    {id: 1, name: 'hjzheng', grade: 88},
    {id: 2, name: 'King', grade: 48},
    {id: 3, name: 'Sandy', grade: 98},
    {id: 4, name: 'Andy', grade: 78},
    {id: 5, name: 'Yun', grade: 92}
];
module.exports = users;

• Mock 各种请求

注意几个req参数方法
req.params http://expressjs.com/zh-cn/4x/api.html#req.params
req.query http://expressjs.com/zh-cn/4x/api.html#req.query
req.body http://expressjs.com/zh-cn/4x/api.html#req.body

// 使用路由， 单独文件
var express = require('express');
var _ = require('lodash'); // 引入 lodash 处理集合， 记得 npm install
var router = express.Router();
var users = require('./users');

router
    .get('/users/:id', function(req, res, next) {
        if (req.params.id) {
            res.json(_.find(users, { 'id': parseInt(req.params.id, 10)}));
        }
    })
    .get('/users', function(req, res, next) {
        res.json(users);
    })
    .put('/users/:id', function(req, res, next) {
        var user = _.find(users, { 'id': parseInt(req.params.id, 10)});
        _.merge(user, req.body);
        res.json({success: true});
    })
    .post('/users', function(req, res, next) {
        req.body.id = users[users.length - 1].id + 1;
        users.push(req.body);
        res.json({success: true});
    })
    .delete('/users/:id', function(req, res, next) {
        _.remove(users, function(u) {
            return u.id === parseInt(req.params.id, 10);
        });
        res.json({success: true});
    });

module.exports = router;

• Mock 服务器返回的状态
  使用res.status

res.status(403).end();
res.status(400).send('Bad Request');
res.status(404).sendFile('/absolute/path/to/404.png');

Strong Loop

使用 Strong Loop 自动生成 RESTful API

json-server

除了Strong Loop外，我们还有另一大杀器， 就是 json-server，只需提供简单的json数据，就会生成标准 RESTful API，很方便，很实用。
更多内容，请参考 json-server 的 README

通过配置生成后端 mock 请求， 受 wiremock 启发

代码在 newcomer 中

你只需要在conf中写一个简单的配置文件即可， 例如

module.exports = function(configurations) {
    // 传入一个对象
    configurations.add({
        request: {
            method: 'GET',
            urlPattern: '/update'
        },
        response: {
            status: 200,
            body: function(req) {
                if (req.query.id) {
                    return {success: true};
                } else {
                    return {success: false};
                }
            },
            headers: {
                'Content-Type': 'application/json',
                'Cache-Control': 'max-age=-1'
            }
        }
    });
}

ng中的事件机制

Scopes can propagate(传送) events in similar fashion(类似的方式) to DOM events. The event can be broadcasted(向下广播) to the scope children or emitted(向上发布) to scope parents.

ng中的作用域拥有发送事件，携带信息的能力，类似于DOM的事件类型，ng中的Scope拥有$emit向上发布到$rootScope，$broadcast向下广播到所有的子节点，当我们想在不同作用域之间做数据交互的时候，不免会考虑到使用事件机制携带数据，在指定的作用域上使用$on接受即可。

但我们在实际中使用事件机制来携带数据时，可能需要接受事件来获取数据的作用域只有一两处，而ng的事件模型却帮我们遍历了所有的子作用域或者父作用域，换句话说，我们使用了一种大范围的广播携带数据，却只在某一处有价值的使用了数据，这点，就造成了性能上的浪费。

参考《精通AngularJS》

如果不是全局的，异步的，关于状态变迁的通知，还是应该谨慎使用，通常可以依赖双向数据绑定，便捷的解决问题。

通过事件携带数据的目的

1. 事件的注册与触发拥有明显的前后条件逻辑
2. 在不同的作用域之间传递信息。

考虑到ng中服务全局可见，并且能够被依赖注入，所以，我们可以考虑利用服务来指定目标来传递数据，避免性能上的浪费。
服务传递数据很容易实现，但是如何给服务增加注册与触发的先后条件逻辑呢？我们先来看看事件的先后条件逻辑是如何形成的。

JS实现事件机制

事件携带数据很形象的模拟了一组交互过程，通过事件的注册，事件的触发，来完成所需要的逻辑。基于此，我们可以在js中来模拟事件传播机制。
事件的过程主要分为三个步骤：

1. 基于一个事件名，注册事件处理函数，在相应的事件发生时，该函数便会执行。

2. 在需要触发事件的地方，调用该事件的所有已注册函数。

3. 最重要的一点，我们如何能够将同一个事件的注册函数与事件发生对应起来，达到触发的效果呢。基于事件名与事件处理函数一对多的映射关系，我们使用js中的对象来储存这种映射关系，我们称之为事件队列。

   综上，我们的事件对象应该至少拥有

   1. 注册事件处理函数的方法。
   2. 触发事件的方法。
   3. 用于储存映射关系的事件队列。

               // 事件对象的构造函数，每个实例拥有一个subscribers 来储存自己的事件队列。
       var EventBus = function() {
           this.subscribers = [];
       };
              // 原型中拥有事件的注册方法和触发方法，为了方便管理，我们扩展除了删除事件队列的方法
       EventBus.prototype = {
           constructor: EventBus,
           // 注册方法，返回接收event标识符
           sub: function(evt, fn) {
               this.subscribers[evt] ? this.subscribers[evt].push(fn) : (this.subscribers[evt] = []) && this.subscribers[evt].push(fn);
               return '{"evt":"' + evt + '","fn":"' + (this.subscribers[evt].length - 1) + '"}';
           },
           // 触发方法，成功后返回自身
           pub: function() {
               var evt = arguments[0];
               var args = [].slice.call(arguments, 1);
               if (this.subscribers[evt]) {
                   for (var i in this.subscribers[evt]) {
                       if (angular.isFunction(this.subscribers[evt][i])) {
                           this.subscribers[evt][i].apply(null, args);
                       }
                   };
                   return this;
               }
               return false;
           },
           // 解除注册，需传入接收event标识符
           unsub: function(subId) {
               try {
                   var id = angular.fromJson(subId);
                   this.subscribers[id.evt][id.fn] = null;
                   delete this.subscribers[id.evt][id.fn];
               } catch (err) {
                   console.log(err);
               }
           }
       };

使用服务注入事件机制

通过以上逻辑，我们就可以实现自定义的事件机制。

那么，如何在不同作用域中使用我们的事件机制来携带数据呢，很简单，将EventBus 改写成可以被全局注入的服务即可。

巧妙的是，我们利用服务保存的不是需要传递的数据，而是事件队列，数据通过队列中方法的参数来传递。这样我们的事件机制与ng中的服务便完美的结合在一起了。

由于采用构造函数的写法，我们可以很方便的使用service方法来实现。

这样，我们自己的事件机制就可以使用了，由于我们的事件服务需要手动注入到需要使用的作用域内，不需要作用域的遍历，这样，相比使用scope的事件传播，具有简单明确的优点，精简了我们的逻辑。

随着互联网的发展，传统的文字已经不能满足人们生活交流的需要，有时一张图片，一个表情，更能传递想要表达的内容。(具体可参考微信斗图-_-! )如今比较有名的 emoji 已经可以被大部分设备所兼容，那么问题来了，如何在网页上显示一个emoji表情呢？

通常作为前端，我们接收到的表情不会是一张图片，而是类似 :smile : 、[微笑]、/微笑这样的字符串，那么如何将字符串转换为对应的表情就是问题的关键。毋庸置疑，通过正则表达式对相应的字符串作匹配替换，从而将对应的emoji表情显示出来是比较好的一个方法。

首先，本地要有一个emoji表情库，类似

或者一个雪碧图

本地表情文件的不同，对应的处理方法也会不一样。
有了这样的一个表情库文件，接下来就是对相应的表情字符串进行匹配。

其次：匹配，就免不了要用到正则表达式，针对不同的表情字符串，需要写不同的匹配规则。如需匹配[微笑]或者/微笑格式的表情，对应的正则如下

//对于元字符 如 [] {} + ? 等，需要转义
var reg = new RegExp("\\[" + emoji.name + "\\]|\\/" + emoji.name, "gm");

写好了匹配规则，接下来要对需要转换的字符串进行替换。
replace()很好的帮我们解决了这个问题。

var result  = input.replace(reg, '<img class="emoji" src="' + emoji.src + '"/>');

那么问题来了，在这两行code中，用到了emoji.name,emoji.src，这个emoji对象到底是个什么样的东西。其实这个emoji对象相当于一个emoji配置，他的code长这个样子：

var emojis = [{
        name: '微笑',
        src: 'emoji/default/0.png'
    }, {
        name: '撇嘴',
        src: 'emoji/default/1.png'
    }, {
        name: '发呆',
        src: 'emoji/default/3.png'
    }]

我们用到的emoji则是其中的一个个对象。最后，我们需要循环这个数组，将每个对应的字符串匹配成对应的表情。完整代码如下：

function filterEmoji(input, emoji) {
    var regexp = new RegExp('\\[' + emoji.name + '\\]|\\/' + emoji.name, 'gm');
    var result = input.replace(regexp, '<img class="emoji" src="' + emoji.src + '"/>');
    return result;
}

function emoji($sce) {
    return function(input) {
        // 循环emojis配置表，匹配对应表情
        emojis.forEach(function(emoji) {
            input = filterEmoji(input, emoji);
        });
                //这里由于angular的安全限制，使用$sce将匹配到的表情转换为可识别的标签。
        return $sce.trustAsHtml(input);
    };
}

最后，在需要转换表情的地方，加上这个emoji过滤器就Ok了。

当然，这种方法有一个弊端就是需要加载很多的emoji表情图片，可以优化为用一张雪碧图去搞定。
在写法上也要有一些变化。首先肯定不能再通过标签去显示每一张表情图片，而是通过css添加background来实现。我们需要一个css的配置文件去匹配每个表情对应的雪碧图的位置。

.emoji {
  display: inline-block;
  background: url(emoji/default/emoji.png) no-repeat;
  width: 21px;
  height: 21px
}
.emoji.emoji_dai {
  background-position: 0 0
}
.emoji.emoji_smile {
  background-position: -21px 0
}

emojis也需要做一些修改

var emojis = [{
        name: '微笑',
        css: 'emoji_smile'
    }, {
        name: '发呆',
        css: 'emoji_dai'
    }]

匹配函数修改为：

function filterEmoji(input, emoji) {
  var regexp = new RegExp('\\[' + emoji.name + '\\]|\\/' + emoji.name, 'gm');
  var result = input.replace(regexp,"<i class='emoji" + b + "></i>");

}

最后，一个完整的emoji表情匹配到底结束。

HTML表格

最近，项目中很多地方涉及到了表格，但是发现很多同学并没有使用表格，或者部分使用表格去实现html页面，其实这样是不符合语义化的，仔细询问后，发现大家对 table 的特性还不是很了解，其实我自己也不了解，但是当我再翻看 taobao和京东的订单页面的时候，发现它们都使用的 table。

表格都有哪些元素

我们来看一个例子:

<table>
  <thead>  
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead  
  <tfoot>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </tfoot>>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

我们有 table thead tr th tbody td 和 tfoot 注意 tfoot 和 thead元素

表格样式

表格的默认样式

table {
    display: table;
    border-collapse: separate; /* 控制 cell 之间的是否有空隙 */
    border-spacing: 2px;  /* 控制 cell 之间的空隙 */
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

重置样式

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

基本样式的使用

1.border-spacing 样式 控制 cell 之间的空隙大小

table {
  border-spacing: 0.5rem;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

2.border-collapse 控制 cell 之间是否有空隙

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

3.colspan 和 rowspan 合并 cell (关于这一块，我记有同学问过我，怎样使用ng-repeat处理这种结构的表格，使用ng-repeat-start 和 ng-repeat-end)

<table>
  <thead>
    <tr>
      <th colspan="2">Name</th>
      <th>Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HaoJu</td>
      <td>Zheng</td>
      <td rowspan="2">Customer Service</td>
    </tr>
    <tr>
      <td>Fang</td>
      <td>Yang</td>
    </tr>
    <tr>
      <td>Bao</td>
      <td>Xiao</td>
      <td>Other</td>
    </tr>
  </tbody>
</table>

4.table元素的特点与块级元素的特征类似，独占一行，但是它的宽度和高度取决于内容大小，如果它本身没有设置宽度，高度或者宽度，高度大于内容大小的话，也就是说它的最小宽度取决于内容宽度，最小高度取决于内容高度。

让其他元素具备 table 元素的行为(主要是通过 display 属性模拟)

那么为什么要这样做的，那是因为 table-cell 有这样的特点，里面的元素可以同行等高显示，宽度自动调节的特点，可以通过设置 vertical-align 去控制同行元素的高度，也可以设置 padding 但是设置margin 没有任何效果。

<div class="table">
  <header class="row">
    <div class="td">Name</div>
    <div class="td">Age</div>
    <div class="td">Team</div>
  </header>
  <div class="row">
    <div class="td">HaoJu Zheng</div>
    <div class="td">29</div>
    <div class="td">Customer Service</div>
  </div>
</div>

.table {
  display: table;
  border-collapse: collapse;
}

.td {
  border: 1px solid #999;
  padding: 0.5rem;
  display: table-cell;
}

.row {
  display: table-row;
}

一些重要样式对 table 的影响

vertical-align 控制 cell 中的元素垂直对齐位置
white-space 控制 cell 中文本的显示方式
border-collapse 在table上设置
border-spacing 在table上设置
width 固定列的宽度，该列上设置宽度
border td或th 需要设置边框

实战，自己找一个页面进行练习

参考资料:
https://css-tricks.com/complete-guide-table-element/#article-header-id-15
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html
https://www.sitepoint.com/solving-layout-problems-css-table-property/

本文中提及的都是一些简单易懂但平时容易忽略的JS属性，我已全部验证。现在整理出来供大家查阅，如有错误，欢迎指正。

width：

clientWidth：对象实际内容的宽度，不包含边线，最大不超过视口宽度
offsetWidth：对象实际宽度，包含边线，最大不超过视口宽度
scrollWidth：对象实际宽度，不包含边线，可超过视口宽度

height：（都可超过视口高度）

clientHeight：对象实际内容的高度，不包含边线
offsetHeight：对象实际高度，包含边线
scrollHeight：对象实际高度，不包含边线。如果对象为body，大于视口时为实际高度，小于视口时为视口高度

分辨率宽高：

window.screen.width：屏幕分辨率宽度
window.screen.height：屏幕分辨率高度
window.screen.availWidth：屏幕工作区宽度
window.screen.availHeight：屏幕工作区高度（不包含windows底边栏）

滚动距离：

scrollTop：对象被卷去的高度
scrollLeft：对象被卷去的宽度

偏移值：

event.clientX：相对文档的横向偏移值
event.clientY：相对文档的纵向偏移值
event.offsetX：相对当前对象的横向偏移值
event.offsetY：相对当前对象的纵向偏移值
offsetLeft：相对父元素的横向偏移值
offsetTop：相对父元素的纵向偏移值
window.screenTop：浏览器相对于屏幕左上角的横向偏移值
window.screenLeft：浏览器相对于屏幕左上角的纵向偏移值

边线： 滚动条和边框

Lodash 是目前最被依赖的 npm 包，但是如果你正在使用 ES6，实际上可以不需要它。围绕许多流行的使用场景，我们打算考虑使用可以帮助节约成本的原生集合方法与箭头函数以及其它新的 ES6 特性。

1. Map, Filter, Reduce

这些集合方法处理数据转换非常容易并且普遍都支持， 我们可以使用箭头函数配合它们，写出简洁的代码去代替 Lodash 提供的实现。

_.map([1, 2, 3], function(n) { return n * 3; });
// [3, 6, 9]
_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6
_.filter([1, 2, 3], function(n) { return n <= 2; });
// [1, 2]

// becomes

[1, 2, 3].map(n => n * 3);
[1, 2, 3].reduce((total, n) => total + n);
[1, 2, 3].filter(n => n <= 2);

不应该只有这些，如果使用 ES6 polyfill，我们也可以使用 find, some, every 和 reduceRight。

2. Head & Tail

解构语法 (Destructuring syntax) 允许我们可以在不使用 utility 函数取得一个列表的 head 和 tail。

_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]

// becomes

const [head, ...tail] = [1, 2, 3];

也可以使用相似的方式获取 initial 的元素和 last 元素。

_.initial([1, 2, 3]);
// -> [1, 2]
_.last([1, 2, 3]);
// 3

// becomes

const [last, ...initial] = [1, 2, 3].reverse();

如果你因为 reverse 方法改变数据结构而烦恼，可以在调用 reverse 之前使用展开操作克隆数组。

const xs = [1, 2, 3];
const [last, ...initial] = [...xs].reverse();

3. Rest & Spread

rest 和 spread 方法允许我们定义和调用接收可变参数的函数。ES6 为这些操作引入 dedicated syntaxes。

var say = _.rest(function(what, names) {
  var last = _.last(names);
  var initial = _.initial(names);
  var finalSeparator = (_.size(names) > 1 ? ', & ' : '');
  return what + ' ' + initial.join(', ') +
    finalSeparator + _.last(names);
});

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney, & pebbles"

// becomes

const say = (what, ...names) => {
  const [last, ...initial] = names.reverse();
  const finalSeparator = (names.length > 1 ? ', &' : '');
  return `${what} ${initial.join(', ')} ${finalSeparator} ${last}`;
};

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney, & pebbles"

4. Curry

不像一些高级别的语言例如 TypeScript 或 Flow，JS 无法提供 function 的类型信息，这使得柯里化相当困难。 当我们拿到一个柯里化的函数，很难知道有多少参数已经被提供和下次我们需要提供那些参数。使用箭头函数我们可以明确定义柯里化函数，使它们易于被其他程序员理解。

function add(a, b) {
  return a + b;
}
var curriedAdd = _.curry(add);
var add2 = curriedAdd(2);
add2(1);
// 3

// becomes

const add = a => b => a + b;
const add2 = add(2); // 与上面比很明显 a 是 2
add2(1); //与上面比很明显 b 是 1
// 3

使用箭头函数定义的柯里化函数特别适合调试。

var lodashAdd = _.curry(function(a, b) {
  return a + b;
});
var add3 = lodashAdd(3);
console.log(add3.length)
// 0
console.log(add3);
//function wrapper() {
//  var length = arguments.length,
//  args = Array(length),
//  index = length;
//
//  while (index--) {
//    args[index] = arguments[index];
//  }…

// becomes

const es6Add = a => b => a + b;
const add3 = es6Add(3);
console.log(add3.length);
// 1
console.log(add3);
// function b => a + b

如果我们正在使用函数式编程库，像 lodash/fp 或 ramda，我们也可以使用箭头函数去除必要的自动柯里化风格。

_.map(_.prop('name'))(people);

// becomes

people.map(person => person.name);

5. Partial

和柯里化一样，我们可以使用箭头函数使偏函数应用 (partial application) 变得容易和明确。

var greet = function(greeting, name) {
  return greeting + ' ' + name;
};

var sayHelloTo = _.partial(greet, 'hello');
sayHelloTo('fred');
// "hello fred"

// becomes

const sayHelloTo = name => greet('hello', name);
sayHelloTo('fred');
// "hello fred"

它也可能通过展开操作将剩余参数用于可变参数函数。

const sayHelloTo = (name, ...args) => greet('hello', name, ...args);
sayHelloTo('fred', 1, 2, 3);
// "hello fred"

6. Operators

Lodash 配备了大量被重新实现的语法操作的函数，因此它们可以被传入到集合方法中。

在大部分情况下，箭头函数使它们精简到我们可以将它们定义成单行。

_.eq(3, 3);
// true
_.add(10, 1);
// 11
_.map([1, 2, 3], function(n) {
  return _.multiply(n, 10);
});
// [10, 20, 30]
_.reduce([1, 2, 3], _.add);
// 6

// becomes

3 === 3
10 + 1
[1, 2, 3].map(n => n * 10);
[1, 2, 3].reduce((total, n) => total + n);

7. Paths

许多 lodash 的方法，将 path 看做字符串或者数组。我们可以使用箭头函数创建更可复用 path。

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };

_.at(object, ['a[0].b.c', 'a[1]']);
// [3, 4]
_.at(['a', 'b', 'c'], 0, 2);
// ['a', 'c']

// becomes

[
  obj => obj.a[0].b.c,
  obj => obj.a[1]
].map(path => path(object));

[
  arr => arr[0],
  arr => arr[2]
].map(path => path(['a', 'b', 'c']));

由于这些 path “恰恰类似” 函数，我们也可以把它们组装成如下形式:

const getFirstPerson = people => people[0];
const getPostCode = person => person.address.postcode;
const getFirstPostCode = people => getPostCode(getFirstPerson(people));

甚至可以做出高优先级且带参数的 path。

const getFirstNPeople = n => people => people.slice(0, n);

const getFirst5People = getFirstNPeople(5);
const getFirst5PostCodes = people => getFirst5People(people).map(getPostCode);

8. Pick

pick 允许我们从一个目标对象中选择我们想要的属性。我们可以使用解构(destructuring)和简写对象字面量(shorthand object literals)达到相同的结果。

var object = { 'a': 1, 'b': '2', 'c': 3 };

return _.pick(object, ['a', 'c']);
// { a: 1, c: 3 }

// becomes

const { a, c } = { a: 1, b: 2, c: 3 };

return { a, c };

9. Constant, Identity, Noop

Lodash 提供一些用于创建特殊行为的简单函数的工具。

_.constant({ 'a': 1 })();
// { a: 1 }
_.identity({ user: 'fred' });
// { user: 'fred' }
_.noop();
// undefined
We can define all of these functions inline using arrows.

const constant = x => () => x;
const identity = x => x;
const noop = () => undefined;
Or we could rewrite the example above as:

(() => ({ a: 1 }))();
// { a: 1 }
(x => x)({ user: 'fred' });
// { user: 'fred' }
(() => undefined)();
// undefined

10. Chaining & Flow

Lodash 提供一些函数帮助我们写出链式语句。在多数情况中，原生的集合方法返回一个可以直接被链式操作的数组实例，但是在一些情况中，方法改变了集合，链式操作就不太可能了。(but in some cases where the method mutates the collection, this isn’t possible. 这句不好翻译，求帮助?)

然而，我们可以用箭头函数数组定义相同的变换。

_([1, 2, 3])
 .tap(function(array) {
   // Mutate input array.
   array.pop();
 })
 .reverse()
 .value();
// [2, 1]

// becomes

const pipeline = [
  array => { array.pop(); return array; },
  array => array.reverse()
];

pipeline.reduce((xs, f) => f(xs), [1, 2, 3]);

使用这种方式，我们甚至都不需要考虑 tap 和 thru 的不同。在函数中封装 reduce 操作会是一个很棒的通用工具。

const pipe = functions => data => {
  return functions.reduce(
    (value, func) => func(value),
    data
  );
};

const pipeline = pipe([
  x => x * 2,
  x => x / 3,
  x => x > 5,
  b => !b
]);

pipeline(5);
// true
pipeline(20);
// false

结论

Lodash 仍然是一个伟大的库，本文只是提供一个全新视角，新版本的 JavaScript 如何让我们解决一些在之前依赖 utility 模块解决的问题。

原文地址:
https://www.sitepoint.com/lodash-features-replace-es6/?utm_source=javascriptweekly&utm_medium=email

随着互联网的发展，前端页面变的越来越复杂，越来越多的事情，被拿到前端来处理。这就导致 HTML 页面会被加载大量的资源 包括 JS，CSS 以及图片等。

本文从 HTTP 缓存的角度，来谈谈如何优化页面资源加载性能。

HTTP协议

在谈 HTTP 缓存之前，让我们先来聊聊 HTTP 协议，HTTP 作为一个非常重要的协议，它的发展却驻足不前，翻开的它的历史，它竟然只有三个版本:

• HTTP/0.9，在HTTP 1.0 之前，HTTP 标准并未正式建立，所以统称 HTTP/0.9。
• HTTP/1.0, 1996年正式公布的版本，被记载在 RFC1945。
• HTTP/1.1, 1997年1月公布的，是目前的主要版本，它也是我们将要讨论的主要版本。

然而 HTTP 协议只是 TCP/IP 协议族的一小部分，为了了解客户端和服务器是如何通信的，就必须了解 TCP/IP 协议族.

TCP/IP 协议族进行了分层，从上到下依次是，应用层，传输层，网络层，数据链路层。 HTTP 协议属于应用层，TCP 协议属于传输层。

HTTP 协议是建立在 TCP 协议基础上，让我们来简单描述一下，浏览器与服务器如何使用 HTTP 协议进行通信的：

• 浏览器解析出 url 中的主机名
• 浏览器查询这个主机名的 IP 地址 （233.44.78.5）（DNS 服务）
• 浏览器获得端口号（80）
• 浏览器发起到 233.44.78.5 端口为 80 的连接（三次握手后，建立起一条从浏览器到服务器的 TCP 连接）
• 连接建立后，浏览器发送一条 HTTP GET 请求报文
• 浏览器从服务器获得 HTTP 响应报文
• 浏览器关闭连接

浏览器和服务器通信发送的数据块是 HTTP 报文。HTTP 报文由起始行，首部和主体三部分组成。
HTTP 报文一般分为请求报文和响应报文。请求报文的起始行由方法，URI 和 HTTP 版本组成。响应报文的起始行由状态码，原因短语组成。它们的首部都有首部字段和值组成。主体是需要发送和返回的数据。首部和主体之间用 CRLF 空行分割。

配置响应首部字段

如何利用好 HTTP 缓存的关键在于响应和请求的首部字段。

因为每个浏览器都实现了 HTTP 缓存，所以无需设置请求的首部字段，目前所要做的就是，确保每个服务器响应都提供正确的 HTTP 首部，以指导浏览器何时可以缓存资源以及可以缓存多久。

使用 ETag 验证缓存的资源是否被修改

ETag 为我们提供一种验证资源是否被修改的方法，举例，浏览器首次请求资源，服务器返回一个带 ETag 首部的响应，大约过了一小时后，浏览器再次发起同样的请求，此时浏览器自动将 ETag 的值作为 If-None-Match 首部的值，发送给服务器，当服务器使用该值，检查响应的资源是否被修改，如果未修改，则返回 304 Not Modified 响应。注意这里我们并未下载资源，节约时间和宽带资源。

使用 Cache-Control 指导浏览器如何缓存资源

Cache-Control 可以设置的值有: no-cache 或 no-store， public 或 private， max-age。

no-cache 或 no-store
no-cache 表示必须先与服务器确认返回的资源是否被修改，然后才能确认是否使用缓存资源来满足后续相同的请求。因此，如果存在 ETag，no-cache 会发起往返通信来验证缓存的资源，如果资源未被更改，可以避免下载。

no-store 禁止浏览器和所有中继缓存（例如代理缓存服务器）存储返回的响应资源。

public 或 private

public 表示允许浏览器和任何中继缓存缓存响应资源
private 只允许浏览器缓存响应资源

max-age

max-age 指定从当前请求开始，允许获取的响应资源被重用的最长时间 例如：max-age=120 表示响应可以再缓存和重用 120 秒

配置 Cache-Control 的策略
如下图

我们可以根据自己实际的业务和不同的资源制定不同的缓存策略：

• 针对 HTML 页面，使用 no-cache， 例如 index.html Cache-Control: no-cache
• 针对 JS 和 CSS 文件，可以进行长时间缓存, 如果 JS 中有一些敏感信息，可以使用 private 禁止中继缓存存储。
  • 例如 main.2da43e32.css Cache-Control: max-age=31536000
  • 例如 main.1a3dq2q6.js Cache-Control: private max-age=31536000
• 针对 图片或 字体文件，可以设置一个月(31天)，例如 logo.png Cache-Control: public max-age=2678400

总结

在定义缓存策略时, 有一些准则是可以参考的：

1. 服务器需要提供 ETag。
2. 明确中继缓存可以缓存哪些资源。
3. 根据资源的特点设置缓存时间。
4. 针对同一资源，将变动的资源和不变资源区分。例如 JS 文件在压缩合并时，将 lib（一些库和框架js） 和 app（业务js）分离。设置不同的缓存策略。

配置 nginx

nginx 服务器中配置 ETag 和 Cache-Control

server {
  listen 80;
  server_name get-set.cn;
  root /data/hjzheng/build/;
  charset utf-8;
  
  etag on; # 启用 ETag
  
  try_files $uri =404;
  
  location ~* (.+)\.html {
     add_header Cache-Control no-cache;
  }

  location ~* (.+)\.js {
     add_header Cache-Control private;
     expires 1y; # 设置 max-age
  }
  
  location ~* (.+)\.css {
     add_header Cache-Control public;
     expires 1y; 
  }
  
  location ~* (.+)\.(jpg|png|gif|eot|svg|ttf|woff) {
     add_header Cache-Control public;
     expires 31d;
  }
}

其他

注意, 本文主要讲述 Cache-Control 中值在 response 中设置的作用，在 Request 中含义略有不同:

资料

常见服务器配置
nginx配置location总结及rewrite规则写法

document.execCommand('copy')这行命令足以满足你的需求（注：货号内‘copy’是参数）
猛戳此处查看例子

document.execCommand当然还有很多用法啦，这里简单做一下介绍，详细可参见链接https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

cut参数，剪切当前选中内容于剪贴板

paste 参数，粘贴剪贴板内容于选中区域

delete参数，删除当前选中内容

用法

在html页面，使用tree标签以及data和item-template属性。
<tree data="vm.tree" item-template="vm.itemTemplate"></tree>
其中，data是我们的tree所需要展示的数据，item-template是tree要显示的内容。（用户自定义）

data:

vm.tree = [{
        name: 'PC游戏',
        id: 1,
        children: [
            {
                name: '角色扮演',
                id: 2,
                children: [
                    {
                        name: '月影传说',
                        id: 3
                    }
                ]
            },

        ]
    }];

item-template:用户可以在这里自定义所需要显示的内容，并且增加增删改查方法。

vm.itemTemplate = `<div ng-class="{'cur-select' : vm.id === item.id}" ng-click="vm.add(item)" ng-dblclick="vm.edit(item)" ng-show="!item.isEdit">{{item.name}}</div>
                        <input ng-dblclick="vm.edit(item)" type="text" ng-model="item.name" ng-show="item.isEdit">
                        <button ng-click="vm.del(item)" ng-show="vm.id === item.id">删除</button>`;

效果：

嗯，简单的用法就是这样，接下来说一下实现方法。

实现

在做东西之前，首先要清楚自己需要的是什么，那么现在需要一个可以用户自定义内容与交互的tree组件，所以此angular-tree组件就应运而生了。

最开始的想法是，直接在使用tree指令的时候，在tree的标签里传入用户自定义的内容，通过transclude去实现，类似于下面这样

    <tree data="vm.tree">
        <div ng-transclude>{{item.name}}</div>
    </tree>

然而事实上这样并不行，（当然不是在标签里直接写内容不行，而是通过transclude这种方式实现不可行）,于是只能改用通过属性传值的形式，在js中写好我们需要的模板，传到指令中去，在做编译。

在我们的html结构中，通常一个tree的结构都是<ul>和<li>的互相嵌套去完成，类似这样：

<ul>
    <li>
        一级标题
        <ul>
            <li>二级标题</li>
        </ul>
    </li>
    <li>
        一级标题
        <ul>
            <li>二级标题</li>
        </ul>
    </li>
</ul>

所以我们需要两个html模板去配合我们做这样的处理。第一个模板负责我们一级标题的内容展示，然后通过repeat循环我们的第二个模板达到显示所有二级标题的效果。

template1

<tree-item ng-repeat="treeItem in $ctrl.data" item="treeItem" item-template="$ctrl.itemTemplate"></tree-item>

template2

<ul>
    <li>
        {{item.name}}
        <i ng-click="$ctrl.showChild()" ng-if="!$ctrl.isLeaf(item)" class="fa" ng-class="{'fa-caret-right': !$ctrl.childShow, 'fa-caret-down': $ctrl.childShow}"></i>
        <i ng-if="!$ctrl.isLeaf(item)" class="fa" ng-class="{'fa-folder': !$ctrl.childShow, 'fa-folder-open': $ctrl.childShow}"></i>
    </li>
    <li ng-show="$ctrl.childShow" ng-if="!$ctrl.isLeaf(item)">
        <tree-item ng-repeat="treeItem in item.children" item="treeItem"  item-template="itemTemplate" ></tree-item>
    </li>
</ul>

通过这种模板套模板的方式，可以达到循环显示每一个级别的内容以及深层次的嵌套。
在template2中，我们需要做一些处理，就是增加展开收缩逻辑以及显示子集的逻辑。这两个功能是tree的基本功能，并不需要暴露给用户，所以我们在directive2的内部去实现即可。
我们给每个子节点增加了 childShow属性，并且通过父节点的箭头（showChild()）点击来展示和收缩子节点的内容。至于判断是否是末尾节点，则更简单，只需要判断它的children属性是否为空或者不存在即可。

vm.showChild = function () {
    vm.childShow = !vm.childShow;
};
vm.isLeaf = function(item) {
    return !item.children || item.children.length === 0;
}        

至此，一个具备展开收缩功能的tree，就基本完成了。但是用的时候就会发现，我们在item-template中定义的一些方法属性等，完全没有生效，这是为什么呢？
其实原因很简单，是在指令中使用了隔离作用域导致的，指令内部由于切断了与外部scope的联系，在指令外面定义的方法，指令内部并不认识。所以那些方法并没有生效。为了能让指令内部与指令外部建立联系，需要将外部的scope传到指令中，这样在指令外面定义的方法，指令里面也可以使用生效了。

首先在第一层指令的controller中，拿到当前scope的父级scope，也就是scope.$parent。并将这个scope传到第二层指令当中，且挂载到第二层指令中scope的原型上，即可达到scope的继承。Object.setPrototypeOf(scope, scope.baseScope);

最后，为了能让指令内部认识我们传进去的模板，需要在指令内部去重新编译。

// 在li中插入用户指令的模板
 element.find('ul').find('li').append(scope.itemTemplate);
 $compile(element.find('ul').find('li').contents())(scope);

第二行代码很重要，为什么不直接编译element.contents()呢？这样做其实是为了防止重复编译，导致我们在指令内部定义的方法会被执行两遍。
最后，再修改一下样式，一个简单的tree就完成了。（源码戳这里）用户可以在自己的controller中定义自己想要的东西、交互、效果等，而不需要交给指令内部去实现，比较灵活。当然，不爽的地方就是需要在js里写html的代码。那么有没有办法直接在html标签中去写我们需要的内容呢？当然，不过这种实现方法比较麻烦，在此不做赘述，有兴趣的话可以看这个github。
他的实现方式是通过js去生成dom元素，并且在每个item上scope.$new()去创建scope并继承到用户的scope上。一个很6的实现方法。

总结

在写tree的过程中，遇到了一些问题，最后也都得到了解决，并且在这个过程中，加深了对指令的理解。平时多写一些这样的小指令，对技能的掌握与巩固还是很有帮助的。最后，感谢@hjzheng ，@fnjoe在此期间提供的支持与帮助。

理解 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

What is a Module？

一个模块就是将文件中相关的代码封装为一个代码块。
创建一个module,可以理解为将所有相关的方法挪到一个文件中。
我们使用一个node.js的应用程序来说明一下这个观点。
创建一个名叫 greetings.js 的文件，其中包含下面两个方法：

// greetings.js
sayHelloInEnglish = function() {
  return "Hello";
};

sayHelloInSpanish = function() {
  return "Hola";
};

Exporting a Module

为了 greetings.js 公共逻辑增加的时候，其封装的代码可以在其他文件中使用。所以我们
重构一下 greetings.js 来达到这个目的。为了更好地理解这个过程，我们分为3步：

1） 想象一下有这么一行代码在 greetings.js 的第一行：

// greetings.js
var exports = module.exports = {};

2） 把greetings.js中的方法赋值给exports对象在其他文件中使用：

// greetings.js
// var exports = module.exports = {};

exports.sayHelloInEnglish = function() {
  return "HELLO";
};

exports.sayHelloInSpanish = function() {
  return "Hola";
};

在上面的代码中，我们可以使用 module.exports 替换 exports达到相同的结果。
这看起来似乎有些困惑，请记住：exports 和 module.exports引用的是同一对象。

3） 此时 module.exports 是这样的：

module.exports = {
  sayHelloInEnglish: function() {
    return "HELLO";
  },

  sayHelloInSpanish: function() {
    return "Hola";
  }
};

Importing a Module

我们在 main.js 中 require greetings.js 的公开接口。这个过程有以下三个步骤：

1）关键词 require 在 node.js 中用于导入模块，即所获取模块的 exports 对象。
我们可以想到它是这么定义的：

var require = function(path) {

  // ...

  return module.exports;
};

2. 在 main.js 中 require greetings.js

// main.js
var greetings = require("./greetings.js");

上面的代码等同于：

// main.js
var greetings = {
  sayHelloInEnglish: function() {
    return "HELLO";
  },

  sayHelloInSpanish: function() {
    return "Hola";
  }
};

3. 现在我们可以在 main.js 中使用greetings访问 greetings.js 中公开的方法就像获取它的属性一样。

// main.js
var greetings = require("./greetings.js");

// "Hello"
greetings.sayHelloInEnglish();

// "Hola"  
greetings.sayHelloInSpanish();

Salient Points 重点

require 返回一个 object ，该对象引用了 module.exports 的值。
如果开发者无意或有意的将 module.exports 赋值给另外一个对象，
或者赋予不同的数据结构，这样会导致原来的 module.exports 对象
所包含的属性失效。

看一个复杂的示例去说明这个观点。

// greetings.js
// var exports = module.exports = {};

exports.sayHelloInEnglish = function() {
  return "HELLO";
};

exports.sayHelloInSpanish = function() {
  return "Hola";
};

/* 
 * this line of code re-assigns  
 * module.exports
 */
module.exports = "Bonjour";

在 main.js 中require greetings.js

// main.js
var greetings = require("./greetings.js");

此时，和之前并没有任何变化。我们将greetings.js中公开的方法
赋值给greetings变量。

当我们试图调用sayHelloInEnglish和sayHelloInSpanish结果显示为
module.exports 重新赋值给一个新的不同于默认值的数据格式。

// main.js
// var greetings = require("./greetings.js");

/*
 * TypeError: object Bonjour has no 
 * method 'sayHelloInEnglish'
 */
greetings.sayHelloInEnglish();

/* 
 * TypeError: object Bonjour has no 
 * method 'sayHelloInSpanish'
 */
greetings.sayHelloInSpanish();

为了清楚地知道这个错误原因，我们将greetings的结果打印出来：

// "Bonjour"
console.log(greetings);

在这个点上，我们试着在 module.exports 抛出来的字符串"Bonjour" 去调用 sayHelloInEnglish 和 sayHelloInSpanish
方法，换句话说，我们永远也不会引用到 module.exports 默认输出object里面的方法。

Conclusion 总结

importing 和 exporting 模块在 node.js 中是一个随处可见的任务。
我希望 exports 和 module.exports之间的差异更加清晰。
此外，如果将来你遇到调用公共方法错误的时候，我希望你可以对这些
错误的原因有一个更好地理解。

PS: 第一次尝试翻译文章，有的地方确实感觉很生硬，不合适的地方欢迎吐槽，继续改进！

css 写法

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

当然 JS 也可以实现 (如果是 AngularJS的话 可以写一个 filter)

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

参考地址:
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
https://software.intel.com/en-us/html5/hub/blogs/ellipse-my-text/

今天 Fix bug 遇到一个典型的问题, 先简单描述一下该问题:

<div ng-click="vm.toggle()"></div>
<div ng-show="vm.show">这是测试内容</div>
<div id="test">这是测试内容</div>

vm.toggle = function() {
     vm.show = !vm.show
     console.log($document[0].getElementById('test').offsetTop); 
};

参看上面的例子，其实我们是想得到中间 div 隐藏后，最后一个 div 的 offsetTop， 实际上得到的是中间 div 隐藏前的 offsetTop。

为什么呢，因为实际 toggle 中变量的变化，还没有引起 dom 变化，也就是脏检查并没有结束，Dom 也没有重新渲染。此时拿到的 offsetTop 肯定不是我们想要的。

可以参看此图:

那么怎么办呢，大家都知道 js 是单线程的，存在一个 event loop 来处理异步任务，这些异步任务存放在一个队列里， 所以我们只需要将获取 offsetTop 操作放入这个队列里就 OK。
当 ng-click 中的函数，AngularJS的脏检查等如上图所示 在队列中执行完毕后，就轮到我们的获取 offsetTop 的异步任务了。

很简单

vm.toggle = function() {
     vm.show = !vm.show
     $timeout(function() {
          console.log($document[0].getElementById('test').offsetTop); 
     }, 0, false);
};

参考资料:
https://docs.angularjs.org/guide/scope
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
http://notes.iissnan.com/2014/waiting-for-dom-to-finish-rendering/

因为，未设置display为inline-block
stackoverflow上的回答
http://stackoverflow.com/questions/30812808/how-can-i-rotate-a-font-icon-45-degrees

在开发的过程中，遇到身份验证的问题，如果在不登录的情况下直接访问项目的地址，怎么对用户的身份进行验证？常见的处理是：如果没有读取到用户的登录信息，则页面自动转向登录页面，那么作为开发人员，怎么实现此需求？目前据我所知的解决方案有两种。第一种是用ui-router提供的$stateChangeStart对于发生路由转换时进行判断，第二种则是用angular自带的拦截器进行处理。
先说第一种：$stateChangeStart
由于ui-router关心的是状态，所以我们可以在每次模板引擎被解析前触发此方法

 // 路由改变时判断是否登录，未登录则跳转至登录页面
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        // 这里用event.preventDefault()可以阻止模板解析
        if (toState.name !== 'login' || fromState.name === 'login') {
             // 这里做身份验证的判断
            //  如判断cookie，session等。
           //  若判断不通过，则跳转至login页面
        }
 });

其中toState和fromState参数是获取路由的前一个状态和下一个状态，当发生路由状态改变时，如果访问的不是登陆页面或者不是从登陆页面跳转时，执行身份判断。
但是这种方法是有缺陷的，1.用到了$rootScope. 2.基于ui-router.3.不稳定(项目中测试发现).由于问题的存在，所以可以采用第二种拦截器的方法解决这些问题。

拦截器 Angular Interceptor
在与后台交互的过程中，有时会希望俘获一些请求，在其发送到服务端之前进行操作，或者在服务器完成响应执行调用前处理，拦截器就是为此应运而生的一种方法。
$httpProvider 中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。拦截器提供了四个方法：request ， requestError ，response 和responseError 来对请求和响应进行处理。具体介绍看这里：
要实现身份验证，可以在每次$http请求到后台之前进行验证

function requestInterceptor($cookies,) {
    var requestConfig = {
        request: function(config) {
             // 这里做身份验证的判断
            //  如判断cookie，session等。
           //  若判断不通过，则跳转至login页面
            return config;
        }
    };
        return requestConfig;
}

该方法接收请求配置对象作为参数，然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致 $http 调用失败。然后只需将创建的拦截器注册到$httpProvider的interceptors数组中即可。

module.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('myInterceptor');
}]);

在每次发送请求前，拦截器都会执行我们事先写好的判断代码，去做身份的验证。比stateChangeStart好的是，它在每次请求前都进行验证，而不只是对于路由切换时才验证。

拦截器可以做的事情还有很多，如请求恢复、loading等，搭配request ， requestError ，response 和responseError实现即可，这里不做赘述。

团队内部成员 @baukh789 的一篇博文
@baukh789 是一位非常优秀且有着丰富经验的前端工程师，请大家关注他的 GridManager

博文地址: http://www.lovejavascript.com/#!zone/blog/content.html?id=24

在书写 JSX 时，经常会有一类需求，就是在特定条件下 render 一些组件。
例如:

• 显示警告信息时

{this.showMessage && <Message type={'warning'} />}

• 加载表格数据时

{this.loading ? <Loading /> : <Table />}

这里，我使用 JavaScript 表达式进行处理，这样做，从代码的可读性和可维护性上看起来都还不错。

继续增加复杂度

{ show && (isAdmin || hasPermission) && <Dialog /> }

继续增加复杂度

{ isShow && configDataIsDone && (isAdmin || hasPermission) && <Dialog /> }

显而易见，随着复杂度的增加，代码的可读性变的很差，可维护性也变的不好。

此时，最简单的处理方式，创建一个 helper 函数

canShowDialog () {
    const { isShow, configDataIsDone, isAdmin, hasPermission } = this.props;
    return isShow && configDataIsDone && (isAdmin || hasPermission);
}
... ...
{ this.canShowDialog() && <Dialog /> }

或者创建一个 getter

get canShowDialog () {
    const { isShow, configDataIsDone, isAdmin, hasPermission } = this.props;
    return isShow && configDataIsDone && (isAdmin || hasPermission);
}
... ...
{ this.canShowDialog && <Dialog /> }

当然，有些时候，也可以依赖一些第三方库
例如 render-if

const { isShow, configDataIsDone, isAdmin, hasPermission } = this.props;
const canShowDialog = renderIf(isShow && configDataIsDone && (isAdmin || hasPermission));
... ...
{ this.canShowDialog(<Dialog />) }

还可以使用高阶组件
react-only-if

const { isShow, configDataIsDone, isAdmin, hasPermission } = this.props;
const DialogOnlyIf = onlyIf(({isShow, configDataIsDone,  isAdmin, hasPermission}) => {
     return isShow && configDataIsDone && (isAdmin || hasPermission);
})(<Dialog />);
... ...
{ <DialogOnlyIf isShow={...} configDataIsDone={...} isAdmin={...} hasPermission={...} /> }

即使这样，可读性上还是稍差点，不可否认通用编程语言在功能上，远大于模板，毕竟模板只是 DSL，针对特定领域的语言，在某些点上的能力毕竟有限，因为它是针对特定领域的，所以在特定领域的可读性和易用上要好于通用编程语言。

想象一下， 我们可不可以增加一些条件组件，参考一下 AngularJS1.x:

例如：

<div ng-if=“true”>要显示内容</div>

将组件设计成这样:

<If condition={isShow && configDataIsDone && (isAdmin || hasPermission)}>
     <Dialog />
</If>

其他组件 参考 ng-switch （else 和 else If 可以用 switch 代替）

<If condition={...}>
   {'if语句'}
</If>
<Switch>
     <When condition={...}>...</When>
     <When condition={...}>...</When>
     <Default>....</Default>
</Switch>

庆幸的是，有第三方的库可以进行支持，目前我所知道的有两个库:
react-if
jsx-control-statements

以 jsx-control-statements 为例:

{/* if语句 */}
<If condition={ test }>
  <span>Truth</span>
</If>

{/* switch 语句 */}
<Choose>
  <When condition={ test1 }>
    <span>IfBlock</span>
  </When>
  <When condition={ test2 }>
    <span>ElseIfBlock</span>
    <span>Another ElseIfBlock</span>
    <span>...</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>

{/* for 循环 */}
 <For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
  </For>

最近在项目的制作过程中遇到超出需要折行的问题
如果是一行超出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

当然还需要设置宽度的

还可以参考 之前的解决方案 #13

问题

如果是两行显示，第一行折行，第二行需要超出省略该如何实现呢？
或者第N行要省略该如何解决呢？

解决

• 解决方案1 css 的不规则属性解决

-webkit-line-clamp 是一个不规则属性，不出现在css 草案中。用来实现块级元素显示几行，它需要与其他元素组合使用

display：-webkit-box;
-webkit-box-orient: vertical; // 从上向下垂直排列子元素。设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; //文本溢出 用省略号显示
-webkit-line-clamp: 2;
overflow: hidden;

当然也需要设置高度来配合显示

• 解决方案2 css 的伪类实现

对要显示的文字进行相对定位
对省略号进行绝对定位

p {
    position: relative;
    line-height: 1.4em;
    height: 4.2em // 1.4 *3 显示三行的 所有高度是行高的三倍
    overflow: hidden;
}

p::after {
    content: '...',
    position: absolute,
    bottom: 0;
    right: 0;
    padding: 5px;
}

demo https://jsfiddle.net/mayufo/us8tcuyz/

• 解决方案3：js解决方法

Clamp.js 这个就不具体展开了

可以参考demo http://codepen.io/feiwen8772/pen/AckqK

参考

• http://www.css88.com/webkit/-webkit-appearance/
• http://www.w3school.com.cn/tiy/t.asp?f=css3_box-orient
• http://www.520ued.com/article/54192b4b8d31c11e3b000400

区别

$document 等于 angular.element(window.document) 实际上它是 jqLite 对 window.document的包装
$window.document 等于 window.document 它们都是 DOM element document.

$window.document === $document[0] //true

联想

window 和 $window 的区别？

$window 其实是 AngularJS 将全局 window 对象包装成的服务

settimeout 和 $timeout 的区别？

Angular's wrapper for window.setTimeout. The fn function is wrapped into a try/catch block and delegates any exceptions to $exceptionHandler service.

$timeout([fn], [delay], [invokeApply], [Pass]);

注意 $timeout 第三个参数，是否调用 apply 方法， 这是 AngularJS 性能的一个优化点。

setInterval 和 $setInterval 的区别?

区别同上， 可以参考官方API https://docs.angularjs.org/api/ng/service/$interval

7:3 error The "$watch" call should be assigned to a variable, in order to be destroyed during the $destroy event angular/on-watch

(function() {
    angular.module('app').run(run);

    run.$inject = ['$rootScope', '$location', '$http'];

    function run($rootScope, $location, $http) {
        var callback = $rootScope.$watch(function() {
            return $location.search();
        }, function(newValue) {
            if (newValue.token) {
                $http.defaults.headers.common.token = newValue.token;
            }
        });

        $rootScope.$on('$destroy', callback);
    }
})();

需求

1 还有个总的 checkbox 负责全选和反选
2 当每一项开头都选中 checkbox 的时候，上面的全选自动选上
3 当全选后，取消其中一项的 checkbox ,全选取消

实践

我表示刚开始我是不会的！！！

思路1 上网查找 demo

然后开始查资料

发现个不错的网上案例 like this > demo

感觉非常符合我的需求，但是看到 demo。

缺点： 没玩几下就发现无法符合需求2、3。但是貌似1 是可以实现的。

思路2 ng-checked

开始查了下 checkbox 在 AngularJS 里面的用法和 ng-checked ,发现如果用了 ng-checked 目测可以实现

html

<div ng-controller="myController">
    <label for="flag">全选
        <input id="flag" type="checkbox" ng-model="select_all" ng-click="selectAll()">
    </label>
    <ul>
        <li ng-repeat="i in list">
            <input type="checkbox" ng-model="m[i.id]" ng-checked = "select_one" ng-click="selectOne(m[i.id])">
            <span>{{i.id}}</span>
        </li>
    </ul>
</div>

js

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
    $scope.list = [
        {'id': 101},
        {'id': 102},
        {'id': 103},
        {'id': 104},
        {'id': 105},
        {'id': 106},
        {'id': 107}
    ];
    $scope.m = [];
    $scope.checked = [];
    $scope.selectAll = function () {
        if($scope.select_all) {
            $scope.select_one = true;
            $scope.checked = [];
            angular.forEach($scope.list, function (i, index) {
                $scope.checked.push(i.id);
                $scope.m[i.id] = true;
            })
        }else {
            $scope.select_one = false;
            $scope.checked = [];
            $scope.m = [];
        }
        console.log($scope.checked);
    };
    $scope.selectOne = function (select) {
        angular.forEach($scope.m , function (i, id) {
            var index = $scope.checked.indexOf(id);
            if(i && index === -1) {
                $scope.checked.push(id);
            } else if (!i && index !== -1){
                $scope.checked.splice(index, 1);
            };
        });
        if ($scope.list.length === $scope.checked.length) {
            $scope.select_all = true;
        } else {
            $scope.select_all = false;
        }
        console.log($scope.checked);
    }
}]);

缺点 参考 not-binding-to-ng-checked-for-checkboxes

大概意思说 如果你用了 ng-checked 就是默认它最初定义就是 true, 因此就没有必要使用 ng-model 了。简单说来就是 ng-model 和 ng-checked 不需要同时用。

看来是能用 ng-click 或者 ng-change 了

思路3 给数组里面每一个 list 绑定 checked 的属性

这个想法也是联想到公司之前的一个大牛的写的一个关于 checkbox 的指令。

html

<div ng-controller="myController">
    <label for="flag">全选
        <input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
    </label>
    <ul>
        <li ng-repeat="i in list">
            <input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
            <span>{{id}}</span>
        </li>
    </ul>
</div>

js

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
    $scope.list = [
        {'id': 101},
        {'id': 102},
        {'id': 103},
        {'id': 104},
        {'id': 105},
        {'id': 106},
        {'id': 107}
    ];
    $scope.m = [];
    $scope.checked = [];
    $scope.selectAll = function () {
        if($scope.select_all) {
            $scope.checked = [];
            angular.forEach($scope.list, function (i) {
                i.checked = true;
                $scope.checked.push(i.id);
            })
        }else {
            angular.forEach($scope.list, function (i) {
                i.checked = false;
                $scope.checked = [];
            })
        }
        console.log($scope.checked);
    };
    $scope.selectOne = function () {
        angular.forEach($scope.list , function (i) {
            var index = $scope.checked.indexOf(i.id);
            if(i.checked && index === -1) {
                $scope.checked.push(i.id);
            } else if (!i.checked && index !== -1){
                $scope.checked.splice(index, 1);
            };
        })

        if ($scope.list.length === $scope.checked.length) {
            $scope.select_all = true;
        } else {
            $scope.select_all = false;
        }
        console.log($scope.checked);
    }
}]);

推荐第三种方法！以上

参考：

• http://www.cnblogs.com/wohenxion/p/4624218.html
• https://docs.angularjs.org/api/ng/directive/ngChecked
• http://karatejb.blogspot.com/2015/07/angularjs-checkbox.html
• http://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes

modules

module构成了我们的web应用。

从面向对象的角度来看，我们期望module拥有：

• 包含自身信息的属性，如name，requires(依赖)以及others；
• 供外界用于向module内部填充内容的方法，如constant，service，factory，directive以及controller等。

1. module对象

// 实现module类
function Module(name,requires) {
    this.name = name;
    this.requires = requires;
}
Module.prototype.constant = function (value) {
    // 使该module拥有该value;
};
Module.prototype.service = function () {
    // 使该module拥有该service
};

// 创建一个user module;
var userModule = new Module('user', null);

2. module对象的管理

为了方便对模块的管理，我们还需要一个变量来存储模块，一个简便的方法来新建或获取模块如：

var myAngular = {};
var modules = {};
// 新建或者获取模块，取决于是否传入requires参数
myAngular.module = function (name, requires) {
    if (requires) {
        return modules[name] = new Module(name, requires);
    } else {
        return modules[name];
    }
};

angular内部对模块机制的实现大体是这个思路，只不过没有采用构造函数与原型的写法来新建模块，直接使用了对象的字面量写法。

var moduleInstance = {
            name: name,// 模块名称
            requires: requires,//模块依赖
            constant: invokeLater('constant', 'unshift'),
            provider: invokeLater('provider'),
            _invokeQueue: invokeQueue
        };
modules[name] = moduleInstance;

dependency injection

当使用依赖注入机制时，我们的期望是：当我们在特定的上下文中，需要使用别的值或者对象，甚至是类时，我们只需给出它们名称，然后就可以在接下来的上下文中直接使用它们。

1. 我们的期望

在angular中，我们很熟悉这样的代码：

function myController($scope, $window, myService) {
    // 直接使用$scope,$window, myService。
}

我们希望的是直接在该函数内部使用$scope之类的对象。

2. 如何实现

在如何实现我们的期望之前，我们首先来看看我们最熟悉的函数 function。
在JavaScript中，function拥有作用域，从function的使用中我们就可以理解依赖注入的概念。

var a = 1;
var b = [1,2,3];
var c = {x: 1, y: 2};

function useThem(a, b, c) {
    c.z = b.push(a);
}
useThem(a, b, c);

上面本身就是JavaScript中function的写法，使用参数可以直接从外部作用域去获取需要的值。

如我们之前提到的，函数的参数传递本身就符合我们的希望——使用名称，也可以说是标志来获取对应的值。

唯一不同的是，函数的参数代表什么是由函数调用时我们向它内部传递什么决定的，而我们在controller中的期望是当我声明好对应的参数时，这个参数所代表的值已经确定了，也就是函数声明时的参数决定了它的调用中传入什么参数。

要实现我们的期望，我们只需要增加一层逻辑，具体来说，也就是说我们需要统一我们函数的调用入口；

// 我们的函数
function myController($scope, $window, myService) {
    // 直接使用$scope,$window, myService。
}

// 函数的统一调用入口
function invoke(fn, self) {
    var argues = getArgs(fn);
    fn.apply(self,argues);
}

// 获取函数依赖的方法。
// 1. 从哪里去获取依赖的标志， 从数组式的写法，还是$inject的写法，还是使用正则匹配来进行字符串匹配
// 2. 获取到依赖的标志后，按照该标志从哪里去取对应的值。
function getArgs(fn) {
    // return what you want
}
也许，你已经想到需要一个cache变量来存储你所声明的可以被依赖注入的值了。

接下来，只要我们在调用我们的函数时使用统一的调用入口 invoke 方法时，便可以在函数内部自动根据参数的名称或者其他声明（数组式的依赖以及$inject式的声明依赖）来自动注入我们需要的值了。

由于我们在angular的框架中编码时，其实都是进行module内容的配置，真正帮我们去调用这些内容的是angular，它在内部实现了如上所述的invoke，以及getArgs逻辑。

当然，angular的依赖注入更为全面和复杂，不过，一切都是从这简单的逻辑开始的。

1.首先添加html代码

<input type="file"  file-up-load="vm.fileUpLoad" />

2.接下来需要监听该控件的change事件，第一时间想到的肯定是
ng-change事件，但是实验会发现当选择要上传的文件后，是不会触发
该事件的，所以需要换一种方式解决这个问题，这里选择用指令的方式监听
onchange事件，从而触发对应的方法。

angular
    .module('fileUpLoadModule',[])
    .directive('fileUpLoad', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {             
                   var onChangeHandler = scope.$eval(attrs.fileUpLoad);
                   element.bind('change', onChangeHandler);
             }
        };
    });

3.在controller里写响应的处理函数，处理文件的上传逻辑

vm.fileUpLoad = function(event) {
    var file = event.target.files[0];
    var formData = new  FormData();
    formData.append('fileParam', file);
};

首先通过event获取file对象，然后将file添加到FormData中，以便于向后台传送

4.通过$resource请求将文件信息发送给后台，但是需要注意的是，因为传输的是文件，而$resource的post请求默认添加application/json作为Content-Type，所以需要改变其Content-Type值，通过参考angular官方文档，修改方式如下：

$resource('http://example.com', null, {
    upLoadFile: {
        method: 'POST',
        headers: {'Content-Type': undefined} 
       // $http默认会为post请求的Content-type设置为application/json，
       // 可以通过将它设置成undefined去删除默认设置的Content-type
    }
});

5.可以使用express mock上传请求，可以使用中间件connect-multiparty

参考文档：

1. $http
2. $resource

angular开发过程中 $apply 问题

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

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

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

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

思路解析：

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

实现过程：

1.html书写

<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代码控制

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

3.mock静态数据

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

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

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