youngwind/blog

thief系列之一:总序&&从第一行代码开始

youngwind opened this issue · 0 comments

起因

一直存在这样一个问题:看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