Javascript中的匿名函数与封装介绍

  迷惑了一会儿不同JS库的封装后,终于有了点头绪。大致就是:

  

复制代码 代码如下:

  创建一个自调用匿名函数,设计参数window,并传入window对象。

  而这个过程的目的则是,

  

复制代码 代码如下:

  使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。

  jQuery 封装

  于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的

  

复制代码 代码如下:

  (function( window, undefined ) {

  var jQuery = (function() {console.log('hello');});

  window.jQuery = window.$ = jQuery;

  if ( typeof define === "function" && define.amd && define.amd.jQuery ) {

  define( "jquery", [], function () { return jQuery; } );

  }

  })( window );

  其中的

  

复制代码 代码如下:

  console.log('hello');

  是用以验证是否按开头说的这样工作,于是我们就可以在window中调用jQuery

  

复制代码 代码如下:

  window.$

  或者是

  

复制代码 代码如下:

  window.jQuery

  于是我们就可以创建一个类似的封装

  

复制代码 代码如下:

  (function(window, undefined) {

  var PH = function() {

  }

  })(window)

  相比于上面只是少了两步

  1.定义jQuery的符号及全局调用

  2.异步支持

  于是找了下更早期的jQuery的封装,方法上大致是一样的, 除了。。

  

复制代码 代码如下:

  if (typeof window.jQuery == "undefined") {

  var jQuery = function() {};

  if (typeof $ != "undefined")

  jQuery._$ = $;

  var $ = jQuery;

  };

  很神奇的判断方法,以致于我们没有办法重写上一步的jQuery。于是只好看看最新的jQuery的封装是怎样的。于是就打开了2.1.1,发现除了加了很多功能以外,基本上思想还是不变的

  

复制代码 代码如下:

  (function(global, factory) {

  if (typeof module === "object" && typeof module.exports === "object") {

  module.exports = global.document ?

  factory(global, true) :

  function(w) {

  if (!w.document) {

  throw new Error("jQuery requires a window with a document");

  }

  return factory(w);

  };

  } else {

  factory(global);

  }

  }(typeof window !== "undefined" ? window : this, function(window, noGlobal) {

  var jQuery = function() {

  console.log('jQuery');

  };

  if (typeof define === "function" && define.amd) {

  define("jquery", [], function() {

  return jQuery;

  });

  };

  strundefined = typeof undefined;

  if (typeof noGlobal === strundefined) {

  window.jQuery = window.$ = jQuery;

  };

  return jQuery;

  }));

  在使用浏览器的情况下

  

复制代码 代码如下:

  typeof module ="undefined"

  所以上面的情况是针对于使用Node.js等的情况下判断的,这也表明jQuery正在变得臃肿。

  Backbone 封装

  打开了Backbone看了一下

  

复制代码 代码如下:

  (function(root, factory) {

  if (typeof define === 'function' && define.amd) {

  define(['underscore', 'jquery', 'exports'], function(_, $, exports) {

  root.Backbone = factory(root, exports, _, $);

  });

  } else if (typeof exports !== 'undefined') {

  var _ = require('underscore');

  factory(root, exports, _);

  } else {

  root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));

  }

  }(this, function(root, Backbone, _, $) {

  Backbone.$ = $;

  return Backbone;

  }));

  除了异步支持,也体现了其对于jQuery和underscore的依赖,百

  

复制代码 代码如下:

  define(['underscore', 'jquery', 'exports'], function(_, $, exports) {

  root.Backbone = factory(root, exports, _, $);

  });

  表明backbone是原生支持requirejs的。

  Underscore 封装

  于是,又看了看Underscore,发现这个库又占领了一个符号 _

  

复制代码 代码如下:

  (function() {

  var root = this;

  var _ = function(obj) {

  if (obj instanceof _) return obj;

  if (!(this instanceof _)) return new _(obj);

  this._wrapped = obj;

  };

  if (typeof exports !== 'undefined') {

  if (typeof module !== 'undefined' && module.exports) {

  exports = module.exports = _;

  }

  exports._ = _;

  } else {

  root._ = _;

  }

  if (typeof define === 'function' && define.amd) {

  define('underscore', [], function() {

  return _;

  });

  }

  }.call(this));

  总体上也和差不多都是匿名函数,除了最后用的是call()方法。