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);
JS模块与命名空间的介绍的更多相关文章
- JS模块与命名空间的介绍二
区别一:
- js模块,类,继承,命名空间,私有属性等相关概念梳理
js确切的说是一种基于对象的语言,和纯面向对象的语言(比如as)稍微有点区别,js中没有类的概念.虽然有继承但是基于原型的继承.随着前段越来越受重视,jser们利用js的一些特性他们制造出了和纯面向对 ...
- 七、CommonJS规范和Note.js模块概念的介绍
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多 ...
- 第一课:js命名空间的介绍,js对象的扩展以及js数组化
1.命名空间: js里面的命名空间就是使用对象的属性来扩展的.比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象.因此A={B:{},C:{}},这时用户就可以在B对象和 ...
- Js模块模式
模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...
- 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
- Node.js模块
每一个Node.js都是一个Node.js模块,包括JavaScript文件(.js).JSON文本文件(.json)和二进制模块文件(.node). mymodul.js function Hell ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二)
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二) 之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了 ...
随机推荐
- SQLHlper意识
经过学习,通过线敲登录的三个例子,敲四行CRUD样品,因此,访问数据库多次,在这些链接库.打开都一样.只是不同的操作将针对不同的表进行.始学习面向对象的思想.当让要对这些不变的要内容要进行打包,提高代 ...
- SQL Server系统数据库备份最佳实践
原文:SQL Server系统数据库备份最佳实践 首先了解主要的系统数据库: 系统数据库 master 包含登录信息和其他数据库的核心信息 msdb 存储作业.操作员.警报.备份还原历史.数据库邮件信 ...
- 走向DBA[MSSQL篇] 详解游标
原文:走向DBA[MSSQL篇] 详解游标 前篇回顾:上一篇虫子介绍了一些不常用的数据过滤方式,本篇详细介绍下游标. 概念 简单点说游标的作用就是存储一个结果集,并根据语法将这个结果集的数据逐条处理. ...
- angular cors跨域资源共享设置 和formdata设定
非常easy,下来容易找到: <pre name="code" class="javascript">.config(['$routeProvide ...
- hdu3836联通的强还原性点
Equivalent Sets Time Limit: 12000/4000 MS (Java/Others) Memory Limit: 104857/104857 K (Java/Other ...
- 【Espruino】NO.06 关键是你的仆人(继续)
http://blog.csdn.net/qwert1213131/article/details/27834551 本文属于个人理解,能力有限,纰漏在所难免.还望指正. [小鱼有点电] 这几天一直在 ...
- 百度地图 Android SDK - 个性化地图
什么是百度个性化地图Android SDK? 百度个性化地图Android SDK是一套基于Android 2.2及以上版本号设备的应用程序接口,您能够通过该套接口实现主要的地图功能,而且能够定制地图 ...
- 好记性不如烂笔头85-spring3学习(6)-BeanFactory 于bean生命周期
假设BeanFactory为了产生.管理Bean, 一个Bean从成立到毁灭.它会经过几个阶段运行. 据我所知,一般bean包括在生命周期:设定,初始化,使用阶段,四个核心阶段销毁. 1.@Bean的 ...
- 【iOS发展-81】setNeedsDisplay刷新显卡,并CADisplayLink它用来模拟计时器效果
(1)效果 (2)源码下载(假设提示没有小图片的话,自己找一个替换一下即可,看到效果即可) http://download.csdn.net/detail/wsb200514/8176339 (3)总 ...
- 探寻宝藏(双向DP)
题目描述 传说HMH大沙漠中有一个M*N迷宫,里面藏有许多宝物.某天,Dr.Kong找到了迷宫的地图,他发现迷宫内处处有宝物,最珍贵的宝物就藏在右下角,迷宫的进出口在左上角.当然,迷宫中的通路不是平坦 ...