首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:44:36
字体:
来源:转载
供稿:网友

迷惑了一会儿不同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);
        };

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选