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中各字符串出现次数的工具
May 03 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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+Html+缓存
2006/12/20 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
浅析Python中的for 循环
2016/06/09 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python第三方库学习笔记
2020/02/07 Python
python——全排列数的生成方式
2020/02/26 Python
python实现字符串和数字拼接
2020/03/02 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
selenium如何定位span元素的实现
2021/01/13 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
仓库理货员岗位职责
2013/12/18 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
冰峪沟导游词
2015/02/09 职场文书
昆虫记读书笔记
2015/06/26 职场文书
Python 中面向接口编程
2022/05/20 Python
Java实现注册登录跳转
2022/06/16 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android