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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
js实现随机抽奖
Mar 19 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
详解Python验证码识别
2016/01/25 Python
Python切片知识解析
2016/03/06 Python
python unittest实现api自动化测试
2018/04/04 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
六一儿童节标语
2014/10/08 职场文书
离婚财产分配协议书
2014/10/21 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2015年财政局工作总结
2015/05/21 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python