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


Posted in Javascript onMarch 15, 2015

迷惑了一会儿不同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()方法。
Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 #Javascript
Javascript中的apply()方法浅析
Mar 15 #Javascript
Javascript中的Callback方法浅析
Mar 15 #Javascript
Javascript中的call()方法介绍
Mar 15 #Javascript
Javascript中的高阶函数介绍
Mar 15 #Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
You might like
php在线打包程序源码
2008/07/27 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python日期的加减等操作的示例
2017/08/15 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
教研处工作方案
2014/05/26 职场文书
霸气队列口号
2014/06/18 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2014年幼师工作总结
2014/11/22 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js