脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript匿名函数与封装

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

 更新时间：2015年03月15日 11:10:32   投稿：junjie  
这篇文章主要介绍了Javascript中的匿名函数与封装介绍,本文分析了jQuery 封装、Backbone 封装、Underscore 封装等内容,需要的朋友可以参考下

迷惑了一会儿不同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()方法。

您可能感兴趣的文章:

相关文章

  • 纯JS实现动态时间显示代码

    纯JS实现动态时间显示代码

    本篇文章主要是对纯JS实现动态时间显示的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • js canvas实现画图、滤镜效果

    js canvas实现画图、滤镜效果

    这篇文章主要为大家详细介绍了js canvas实现画图、滤镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Js之软键盘实现(js源码)

    Js之软键盘实现(js源码)

    Js之软键盘实现(js源码)...
    2007-01-01
  • JS获取浏览器语言动态加载JS文件示例代码

    JS获取浏览器语言动态加载JS文件示例代码

    通过获取浏览器语言版本，来相对的加载easyui语言包就是动态加载JS文件，下面有个不错的实例，大家可以看看
    2014-10-10
  • javascript闭包的理解

    javascript闭包的理解

    这篇文章主要介绍了js闭包的相关知识，闭包是Javascript的一个难点，但也是一个很重要的知识点,需要的朋友可以参考下
    2015-04-04
  • js使用i18n实现页面国际化的方法

    js使用i18n实现页面国际化的方法

    本篇文章主要介绍了js使用i18n实现页面国际化的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • javascript常用方法总结

    javascript常用方法总结

    经常使用的一些javascript方法，今天总结了一下，以便以后查询，有需要的小伙伴可以参考下。
    2015-05-05
  • 微前端qiankun沙箱实现源码解读

    微前端qiankun沙箱实现源码解读

    这篇文章主要为大家介绍了微前端qiankun沙箱实现的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • js实现复选框的全选和取消全选效果

    js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，本文将简单介绍一下JS如何实现此功能
    2017-01-01
  • javascript 变速加数功能实现代码

    javascript 变速加数功能实现代码

    试想一下你要在你的网站提供如下这样的功能：提供一个文本框用于收集用户数据，这个文本框只能接受整型的数值，不提供给用户手工输入，只提供两个按钮。
    2009-10-10

最新评论