JS模块与命名空间的介绍
更新时间：2013年03月22日 09:46:45 作者：
JS模块与命名空间的介绍，需要的朋友可以参考一下
起因
将代码组织到类中的一个重要原因是让代码更加“模块化”，可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。
一般来讲，模块是一个独立的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的方式已经讲完。
相关文章
这篇文章主要介绍了微信小程序基于高德地图API实现天气组件(动态效果)，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了JavaScript实现LI列表数据绑定的方法,可实现绑定Li列表项对应数值项的功能,涉及javascript鼠标onmousemove、onmouseout及onclick等事件的相关使用技巧,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇获取当前按钮或者html的ID名称实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家带来一篇浅谈JS原生Ajax,GET和POST。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
这篇文章主要介绍了JavaScript禁止右击保存图片,禁止拖拽图片的实现代码,代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了antd Upload 文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Javascript 类型转换、封闭函数及常见内置对象操作示例
这篇文章主要介绍了Javascript 类型转换、封闭函数及常见内置对象操作,结合实例形式分析了JavaScript类型显示转换、隐式转换、变量作用域、封闭函数及常用内置对象相关操作技巧,需要的朋友可以参考下2019-11-11
下面小编就为大家分享一篇form表单数据封装成json格式并提交给服务器的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结40条常见的移动端Web页面问题解决方案,欢迎收看收藏!2016-05-05
这篇文章主要介绍了小程序登录态管理的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论