Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
youngwind opened this issue Apr 11, 2016 · 0 comments
Open

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

youngwind opened this issue Apr 11, 2016 · 0 comments
Labels

Comments

@youngwind
Copy link
Owner

youngwind commented Apr 11, 2016

起因

一直存在这样一个问题:看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 youngwind changed the title chief系列之一:总序&&从第一行代码开始 thief系列之一:总序&&从第一行代码开始 Apr 17, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant