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插件jbox使用iframe关闭问题
Feb 09 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
js 文件引入实现代码
2010/04/23 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python Deque 模块使用详解
2014/07/04 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python处理“
2019/06/10 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
对Django url的几种使用方式详解
2019/08/06 Python
python切割图片的示例
2020/11/12 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
后勤自我鉴定
2013/10/13 职场文书
项目资料员岗位职责
2013/12/10 职场文书
给面试官的感谢信
2014/02/01 职场文书
十一酒店活动方案
2014/02/20 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS