时间:2021-05-26
迷惑了一会儿不同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()方法。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
匿名函数函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。函数的定义,首先简单介绍一下函数的定义,大致
闭包和匿名函数在PHP5.3.0中引入的。闭包是指:创建时封装周围状态的函数。即使闭包所处的环境不存在了,闭包中封装的状态依然存在。理论上,闭包和匿名函数是不同
本篇主要介绍普通函数、匿名函数、闭包函数目录普通函数:介绍普通函数的特性:同名覆盖、arguments对象、默认返回值等。匿名函数:介绍匿名函数的特性:变量匿名
本文实例讲述了JavaScript匿名函数用法。分享给大家供大家参考。具体如下:一、定义一个函数在JavaScript中,可以通过“函数声明”和“函数表达式”来
本文实例讲述了JS匿名函数和匿名自执行函数概念与用法。分享给大家供大家参考,具体如下:1.匿名函数的常见场景js中的匿名函数是一种很常见的函数类型,比较常见的场