起因

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

youngwind / blog

thief系列之一：总序&&从第一行代码开始 #60

起因

从第一行代码开始