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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JavaScript修改css样式style
Apr 15 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
Openlayers实现图形绘制
Sep 28 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无敌近乎加密方式!
2010/07/17 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php写的AES加密解密类分享
2014/06/20 PHP
yii操作session实例简介
2014/07/31 PHP
php导出CSV抽象类实例
2014/09/24 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python 音频生成器的实现示例
2019/12/24 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
老师自我鉴定范文
2013/12/25 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
给医院的感谢信
2015/01/21 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
jquery插件实现代码雨特效
2021/04/24 jQuery
python数字类型和占位符详情
2022/03/13 Python