JS模块与命名空间的介绍


Posted in Javascript onMarch 22, 2013

起因
将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。

一般来讲,模块是一个独立的JS文件。模块文件可以包含一个类定义、一组相关类、一个实用函数库或者一些待执行的代码。

模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码。

理想状态下,所有模块都不应当定义超过一个全局标识。

模块函数
通过把模块定义在某个函数的内部来实现,定义的变量和函数都属于该函数的局部变量,在函数外不可见。实际上,可以将这个函数作用域用做模块的命名空间(模块函数)

一旦将模块代码封装进一个函数中,就需要一些方法导出公用API,以便在模块函数外部调用它们。下面有几种方式导出公用API:

首先创建一个命名空间

// 创建一个全局变量用来存放与学校相关的模块
var school;                // 创建school命名空间
if(!school) school = {};

1. 利用构造函数

// 返回Student构造函数来导出公共API
school.Student = (function() {
    function Student() {    }
    // ...... 定义Student的原型对象和私有属性和方法 ........
    return Student;        // 返回Student构造方法导出公共API
})();

2. 返回命名空间对象

如果模块API包括多个单元,则它可以返回命名空间对象

// 为school添加students模块
school.students = (function() {
    // 这里定义了很多类如课程类/成绩类, 使用局部变量和函数
    function Subject() { /* ... */ }
    function Grade() { /* ... */ }    // 通过返回命名空间对象将API导出
    return {
        Subject: Subject,
        Grade: Grade
    };
})();

3. 通过关键字new调用

另外一种类似类似技术:把模块函数当做构造函数,通过new来调用。把它们(公共API)赋值给this属性来将其导出

school.students = (new function() {
    // ..... 这里省略了代码 ......    // 将API导到this对象中
    this.Subject = Subject;
    this.Grade = Grade;
    // 注意,这里没有返回值
}());    // 括号写在里面。这里是创建新实例,new后面应紧跟构造函数的调用而不是表达式

4. 已定义命名空间对象

作为一种替代方案,如果已经定义了全局命名空间对象,通过模块函数可以直接设置那个对象的属性。

// 如果已经定义了命名空间对象
var school;                // 创建school命名空间
if(!school) school = {};
school.students = {};    // student命名空间已经定义
(function(students) {
    // ..... 这里省略了代码 ......    // 将公共API导到上面定义的命名空间中
    students.Subject = Subject;
    students.Grade = Grade;
    // 这里也不需要返回值
})(school.students);

为此,导出公共API的方式已经讲完。

Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 #Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 #Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
You might like
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP实现的策略模式示例
2019/03/20 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python虚拟环境项目实例
2017/11/20 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
将python图片转为二进制文本的实例
2019/01/24 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python读取实时数据流示例
2019/12/02 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
数据库笔试题
2013/05/09 面试题
大学生毕业自荐信
2013/10/10 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
中班开学寄语
2014/04/04 职场文书
大学生活动总结模板
2014/07/02 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
永不妥协观后感
2015/06/10 职场文书
初中生活随笔
2015/08/15 职场文书