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);

时间: 2024-10-07 10:23:01

JS模块与命名空间的介绍的相关文章

JS模块与命名空间的介绍二

区别一: 区别二: 区别三 区别四: 要看明白上面代码首先要了解一下“立即执行函数”(江湖人是这么称呼的)的技巧结构类似这样 代码如下: (function xxx(){ //function body })(); 这样写xxx函数就可以在定义完后自动执行,看起来神奇,其实上面写法可以拆成这样 代码如下: function xxx(){ //function body } xxx(); 就是定义一个函数,然后使用括号语法调用,而函数定义外面的一层括号只起到将函数声明转为函数定义表达式,因为只有表

js模块,类,继承,命名空间,私有属性等相关概念梳理

js确切的说是一种基于对象的语言,和纯面向对象的语言(比如as)稍微有点区别,js中没有类的概念.虽然有继承但是基于原型的继承.随着前段越来越受重视,jser们利用js的一些特性他们制造出了和纯面向对象一样好玩的东西.下面就js中一些概念进行概述,很多东西都是来自博客园的一些大牛,我写这篇文章主要想拿as和js做对比来讲,以方便as像转js的程序员们.本片文章涉及的概念有,模块,类,继承,私有属性和公开属性. 1.模块大家写as的时候都知道,as里面是有类的概念,每次生成一个类,系统中都会多一个

如何发布一个自定义Node.js模块到NPM(详细步骤)

咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着,以极少的文字说明以及极少的代码书写为原则来给大家演示! 文章中上传的模块不具备任何意义! 一.封装node.js模块时的必须项 1.创建package.json 每一个完整封装的node模块,必须含有一个参数明确的package.json文件! 以下为package.json的最精简配置: { "n

node js 模块系统

Node.js模块系统 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 创建模块 在 Node.js 中,创建一个模块非常简单,如下我们创建一个 'hello.js' 文件,代码如下: var hello = require('./hello'); hello.w

3:Node.js模块系统

原文出自:http://www.w3cschool.cc/nodejs/nodejs-module-system.html Node.js模块系统 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 创建模块 在 Node.js 中,创建一个模块非常简单,如下我们创建

Node.js安装与NPM使用介绍

Node.js是基于Chrome Javascript运行时的平台.是运行在服务端的JavaScript. Centos7下安装Node.js,二进制包安装方式.1.下载:下载地址:http://nodejs.cn/download/ .下载二进制包,不下载源码,源码安装需编译安装,make.make install.下载版本:node-v10.8.0-linux-x64 2.配置环境变量vim /etc/profile.d/nodejs.sh export NODE_HOME=/usr/loc

node.js 11 Web框架Express 介绍,安装,静态页面,路由

本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2815/前面介绍了node.js的文件模块,http server以及静态网站的创建.有了这些知识作为基础,我们可以了解一下node.js的Web框架了. 从Java一路过来的朋友可能觉得Web框架还是比较重量级的,比如最初的Struts到后来的Spring,中间Apache组织也有过一些其他的模板框架,总体而言无论是从使用还是学习来讲,都是需要花费较多时间的.对于大型应用而言,这个投入是值得的.如果

什么是命名空间?模块的命名空间包含了什么?

# -*- coding: utf-8 -*- #python 27 #xiaodeng #什么是命名空间?模块的命名空间包含了什么? #命名空间是一种独立完备的变量包,而变量就是命名空间对象的属性. #模块的命名空间包含了代码在模块文件顶层赋值的所有变量名. #从技术角度来讲,模块的全局作用域会变成模块对象的属性命名空间.

js模块开发(一)

现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是js模块化开发就显的越来越重要了,但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了.(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很