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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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基础陷阱题(变量赋值)
2012/09/12 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
婚姻出轨保证书
2015/05/08 职场文书
环保建议书范文
2015/09/14 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技