thief系列之一:总序&&从第一行代码开始
youngwind opened this issue · 0 comments
youngwind commented
起因
一直存在这样一个问题:看jquery的源码,有好些地方大概明白,却不知道为什么要这样做。看《JavaScript语言精粹》之类的基础书籍,里面各种理论一套一套,到了实战的时候却要想不起来了。
为了解决这个问题,特意开辟此系列,希望通过山寨一个jquery库来巩固基础。
仓库地址:https://github.com/youngwind/thief
从第一行代码开始
ok。现在我们开始构思。
我们要做山寨jquery。jquery有很多方法,比如$.ajax, $('#selector')等等,那我们也来定义一些方法。
var _count = 1;
function a(){
// do something
}
function b(){
// do something
}
等等....这好像有点问题。定义这么多全局函数要死啊,要是命名冲突了怎么办?
ok,让我们升级一下。
var thief = {
_count:1,
a:function(){
console.log(this._count);
},
b:function(){}
}
嗯,看起来好多了。但是还是有问题。我们设想在引入了thief.js文件之后,我们就有了thief对象。当我们执行下面的语句的时候。
thief._count = 2;
就会发现,_count变量变成2了。当我再次执行thief.a()的时候,输出的就是2,而不是1了。这可不行啊,我一个封装好的库哪能让外面的js说改就改。我要做到我想暴露啥就暴露啥,不想让你动的私有变量你绝对动不了,如何做到呢?
ok,这时候自执行表达式和模块化的概念就派上用场了。我们再改造一下。
var thief = (function () {
var _count = 1;
function a() {
console.log(_count);
}
function b() {
}
return ({
a: a,
b: b
});
})();
这样子,thief对象就只有a,b两个方法了,外部虽然可以自定义thief.count的值,但是却影响不到funtion a里面的_count值了。
参考资料:
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html