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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 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脚本的10个技巧(6)
2006/10/09 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
回调函数的意义以及python实现实例
2017/06/20 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
幼儿园中班开学寄语
2014/04/03 职场文书
母亲节演讲稿
2014/05/27 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
驻村工作先进事迹
2014/08/14 职场文书