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学习笔记(四) Number 数字类型
Jun 19 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
ES6的解构赋值实例详解
May 06 Javascript
vue实现移动端图片上传功能
Dec 23 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
生成缩略图
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python使用smtplib模块发送邮件
2020/12/17 Python
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
活动总结格式范文
2014/04/26 职场文书
党支部换届选举方案
2014/05/08 职场文书
工作说明书格式
2014/07/29 职场文书
党员志愿者活动方案
2014/08/28 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
被告代理词范文
2015/05/25 职场文书
写给同事的离职感言
2015/08/04 职场文书