默认分类
只是一个默认分类

exports 和 module.exports 的区别

1.exports 是指向的 module.exports 的引用
2.module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {}
3.require() 返回的是 module.exports 而不是 exports

module.exports = somethings 是对 module.exports 进行了覆盖,所以 module.exports 指向了新的内存,而 exports 还是指向原来的内存块,为了让 module.exports 和 exports 还是指向同一块内存或者说指向同一个 “对象”,可以这样写: exports = module.exports = somethings
因为node.js的require导出的,永远是module,所以在实际应用中推荐只使用module.exports

拓展阅读:
Global对象
exports 和 module.exports 的区别

AngularJS中的Provider

在学习Angular时总是说依赖注入依赖注入,那注入进去的到底是什么东西?

首先需要认识一下$provide即“供应商”,和constant、value、service、factory、provider方法,这些方法你之前应该听说过了,但是一定改没搞清楚他们的区别,其实他们都是创建“供应商”的方法。

AngularJS用$provide去定义一个供应商,这个$provide有5个用来创建供应商的方法:

1.constant(obj)
这个从字面上就能看出他是定义常量用的,他可以被注入到任何地方,但不可以使用装饰器(decorator)修饰。

2.value(obj)
这个也很简单就是定义值,和constant相比,value定义的值能够被改变,它不能被注入到config中,但是它可以被decorator装饰。

3.factory(fn)
factory应该最常用了,Angular调用factory时只是调用普通的function,所以factory可以返回任何东西。

4.service(class)
service和factory差别不多,只是他service接收的是一个构造函数,当第一次使用service的时候,angular会new Foo() 来初始化这个对象。

5.provider(provider)
看这个名字应该就能感觉这个应该是最强大的了,没错,以上除了constant其实都是对provider的封装。也是唯一能够注入到.config()的“提供商”。
provider必须有一个$get方法,$get函数会返回所有我们希望在控制器中进行访问的方法和属性。
注意:注入到config中不能直接写名称,需要用驼峰命名法写成 name + Provider

拓展阅读:
1.AngularJS中的Provider们:Service和Factory等的区别
2.AngularJS 之 Factory vs Service vs Provider

ES6 Promises

1.Promise.resolve

new Promise的快捷方式也可以将 thenable 对象转换为promise对象。

Promise.resolve(42);   //和下面等价
new Promise(function(resolve){
    resolve(42);
});

var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise对象
promise.then(function(value){
   console.log(value);
});

2.promise.then() 和 .catch()

通过 .then 和 .catch 来注册回调函数,promise可以写成方法链的形式

aPromise.then(function taskA(value){
    // task A
}).then(function taskB(vaue){
    // task B
}).catch(function onRejected(error){
    console.log(error);
});

.catch 是 promise.then(undefined, onRejected); 方法的一个别名,它和 .then 没有本质区别。那为什么我们不用 then 还要引入catch 方法哪?其实是因为使用 promise.then(onFulfilled, onRejected) 的话在 onFulfilled 中发生异常的话,在 onRejected 中是捕获不到这个异常的。

3.Promise.all 和 Promise.race

前面都是处理一个 promise 对象,当需要同时处理多个 promise 对象时就涉及到了一个棘手的问题,每个对象完成的时间都不相同那什么时候调用 .then ?为解决这个问题,promise设计了这两个处理多个对象的方法。

Promise.all 和 Promise.race 接收一个 promise对象的数组作为参数,Promise.all当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法;Promise.race 则相反,只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的处理。

4.Deferred 和 Promise

Deferred 其实是第三方库自己定义的东西,比如 jquery.Deferred
需要注意的是$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,是无法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

var dtd = $.Deferred(); // 生成Deferred对象
var wait = function(dtd){
var tasks = function(){
      alert("执行完毕!");
      dtd.resolve(); // 改变Deferred对象的执行状态
    };
    setTimeout(tasks,5000);
};
    
dtd.promise(wait);    //在wait对象上部署Deferred接口
    
wait.done(function(){ alert("哈哈,成功了!"); })
    .fail(function(){ alert("出错啦!"); });

wait(dtd);

在上面的jquery中没有提到的deferred对象的方法还有:
1.deferred.reject() 这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法。
2.$.when() 这个方法和 ES6 的 Promise.all类似
3.deferred.then()
done()和fail()合在一起写就是 then() 方法 .then(successFunc, failureFunc );

拓展阅读:
1.jQuery的deferred对象详解
2.Deferred Object
3.JavaScript Promise迷你书(中文版)
4.通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

为文件名加MD5戳,实现静态资源的强缓存

加MD5戳简单,关键是我们需要弄明白为什么要加上它。

想一下新版本上线时候我们是怎么做的,替换文件是不是,记得我们之前做的优化吗,CDN、浏览器缓存Etag标签等等。所以问题就来了,如何让新版本上线时,这些缓存也随之失效,同时也不能因为一时的更新影响牺牲缓存的效果。

既然两个问题有矛盾,不如转变思路,我们不改变缓存策略,反而我还要更强的缓存,只要每次更新都给相应的文件换一个名字,所以就有了我们在文件名后加MD5戳的方法了。而且加上MD5之后,我们更新就不再是替换文件了,所以我们能先上JS、CSS再上HTML,这样就避免了HTML更新了CDN还没更新而产生的间隔。

当然你可能还会问为什么不能加时间戳,因为有时候我们改了文件的注释或者加个空格,压缩之后的文件并不会改变,所以还是MD5更为靠谱些。

使用Gulp加MD5戳
gulp-rev 对文件名加MD5后缀
gulp-rev-collector 路径替换

拓展阅读
1.为什么推荐MD5不推荐时间戳?

attr() 和 calc()

一、attr()

attr() 用来获取选择到的元素的某一HTML属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。
注意:目前在所有浏览器中,只有content属性实现了对attr()的支持。

.test::before {
  content: '我的类是' attr(class) '我的ID是' attr(id);
}

二、calc()

calc 其实就是 calculate
的简写,它能够动态的计算长度值,而且不用考虑单位问题。其实浏览器对这个属性的兼容性也很好,IE9以上的浏览器都支持,所以放心地用吧。
注意:clac 支持加减乘除,但是表达式中有“+”和“-”时,其前后必须要有空格。

.test{
      width: calc(100% - 10em);
 }

相关阅读:
1.CSS3的calc()使用