前端模块化规范

更新日期: 2019-07-13阅读: 2.4k标签: 规范

为什么需要模块化?

JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,实现网站功能的 JavaScript 代码也越来越庞大,网页越来越像桌面程序,很多问题开始暴露出来,比如全局变量冲突、函数命名冲突、依赖关系处理等。


1.原始的模块化写法

既然模块是要实现某个功能,那么可以把实现功能的一组函数放在同一文件中,像下面这样

function a1() {
  // ...
}
function b2() {
  // ...
}

函数 a1 和 b2 组成一个模块,其他文件先加载该模块,再对函数进行调用。
缺点:容易发生变量命名冲突,“污染”全局变量,模块成员之间没有太多必然的联系。


2.添加命名空间

使用命名空间来管理模块,即使用单全局变量的模式。

var module_special = {
  _index: 0,
  a1: function () {
    // ......
  },
  b2: function () {
    // ......
  }
}
 
// 调用
module_special.a1()
module_special.b2()

通常在属性名前加下划线表示该属性为私有属性,不过这只是一种开发规范上的约定,这里实际上该属性仍然向外暴露。那么怎样让私有属性不被暴露呢?那就需要下面的模块化方式。


3.立即执行函数表达式

立即执行函数表达式简称 “IIFE”(Immediately-Invoked Function Expression)

其能够形成一个独立的作用域,用 IIFE 作为一个 “容器”,“容器” 内部可以访问外部的变量,而外部环境不能访问 “容器” 内部的变量,所以 IIFE 内部定义的变量不会与外部的变量发生冲突。

var module_special = (function () {
  var _index = 0
  var a1 = function () {
    // ......
  }
  var b2 = function () {
    // ......
  }
  return {
    a1: a1,
    b2: b2
  }
})()
 
// 调用
module_special.a1()
module_special.b2()

这种方式既避免了命名冲突,又使得私有变量 _index 不能被外部访问和修改。jquery 源码大量采用了这种方式。


CommonJS、AMD 和 CMD 规范

CommonJS 规范

node.js 应用由模块组成,采用 CommonJS 规范,通过全局方法 require 来加载模块

var http = require('http')                            // 引入http模块
var server = http.createServer(function (req, res) {  // 用http模块提供的方法创建一个服务
  res.statusCode = 200                                // 返回状态码为200
  res.setHeader('Content-Type', 'text/plain')         // 指定请求和响应的HTTP内容类型
  res.end('Hello World\n')                            // 返回的数据
})
server.listen(3000, '127.0.0.1', function () {        // 监听的端口和主机名
  console.log('Server running at http://127.0.0.1:3000') // 服务启动成功后控制台打印信息
})

如何编写一个 CommonJS 规范的模块?这就需要 Module 对象。
node.js 内部提供一个 Module 构建函数,所有模块都是 Module 的实例。每个模块内部,都有一个 Module 对象,代表当前模块,包含如下属性:

  • id:模块的识别符,通常是带有绝对路径的模块文件名
  • filename:模块的文件名,带有绝对路径
  • loaded:返回一个布尔值,表示模块是否已经完成加载
  • parent:返回一个对象,表示调用该模块
  • children:返回一个数组,表示该模块要用到的其他模块
  • exports:表示模块对外输出的值

其中 exports 是编写模块的关键,其表示当前模块对外输出的接口。其他文件加载该模块,实际读取的是 module.exports。

// moduleA.js
module.exports = function (params) {
  console.log(params)
}
 
// 假设两个文件在同一目录下
var moduleA = require('./moduleA')
moduleA()
 
// 为了方便,node.js为每个模块提供一个exports变量指向module.exports
// 那么moduleA也可以这样编写
exports.moduleA = function (params) {
  console.log(params)
}

注意:不能把值直接赋给 exports,因为这样等于切断了 exports 与 module.exports 的联系

总结 CommonJS 模块的特点如下:

  1. 所有模块都有单独作用域,不会污染全局作用域
  2. 重复加载模块只会加载一次,后面都从缓存读取
  3. 模块加载的顺序按照代码中出现的顺序
  4. 模块加载是同步的


AMD 规范与 RequireJS

AMD 和 CMD 规范因为现在用的比较少了(反正我是没看见过),就简单介绍下
CommonJS 模块采用同步加载,适合服务端却不适合浏览器。AMD 规范支持异步加载模块,规范中定义了一个全局变量 define 函数,描述如下:
define(id?, dependencies?, factory)
第一个参数 id,为字符串类型,表示模块标识,为可选参数。若不存在则模块标识默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。

第二个参数 dependencies,定义当前所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行,并且执行的结果按照依赖数组中的位置顺序以参数的形式传入(定义中模块的)工厂方法中。

第三个参数 factory,为模块初始化时要执行的函数或对象。如果为函数,只被执行一次。如果是对象,此对象应该为模块的输出值。如果工厂方法返回一个值(对象、函数或任意强制类型转换为 true 的值),应该设置为该模块的输出值。
创建一个标准 AMD 模块

define('alpha', ['require', 'exports', 'beta'], function (require, exports, beta) {
  exports.berb = function () {
    return beta.verb()
    // 或者 return require('beta').verb()
  }
})

创建模块标识为 “alpha” 的模块,依赖于内置的 “require” 和 “exports” 模块和外部标识为 “beta” 的模块。require 函数取得模块的引用,从而即使模块没有作为参数定义,也能够被使用。exports 是定义的 alpha 模块的实体,在其上定义的任何属性和方法也就是 alpha 模块的属性和方法。

RequireJS 库能够把 AMD 规范应用到实际浏览器 Web 端的开发中,其主要解决了两个问题:实现 JavaScript 文件的异步加载,避免网页失去响应;管理模块之间的依赖性,便于代码的编写和维护。

// AMD Wrapper
define(
  ['types/Employee'],     // 依赖
  function(Employee) {    // 这个回调会在所有依赖都被加载后才执行
    function Programmer() {
      // do something
    }
    Programmer.prototype = new Employee()
    return Programmer // return Constructor
  }
)

我们来比较下 CommonJS 和 AMD 的书写风格:

// CommonJS
var a = require('./a') // 依赖就近
a.doSomething()

var b = require('./b')
b.doSomething()

// AMD
define(['a', 'b'], function (a, b) { // 依赖前置
  a.doSomething()
  b.doSomething()
})


CMD 规范与 Sea.js

CMD 规范全称为 Common Module Definition
CMD 是另一种 js 模块化方案,它与 AMD 很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD 推崇依赖就近、延迟执行。此规范其实是在 sea.js 推广过程中产生的。

/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面声明并初始化了要用到的所有模块
    a.doSomething();
    if (false) {
        // 即便没用到某个模块 b,但 b 还是提前执行了
        b.doSomething()
    } 
});
 
/** CMD写法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在需要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});
 
/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});


ECMAScript6 标准的模块支持

ECMAScript5 及之前的版本不支持原生模块化,需要引入 AMD 规范的 RequireJS 或者 AMD 规范的 Seajs 等第三方库来实现。

直到 ECMAScript6 才支持原生模块化,其不但具有 CommonJS 规范和 AMD 规范的优点,而且实现得更加友好,语法较之 CommonJS 更简洁、支持编译时加载(静态加载),循环依赖处理得更好。

ES6 模块功能主要由两个命令构成:export 和 import,export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。

export

在 ES6 中,一个模块也是一个独立的文件,具有独立的作用域,通过 export 命令输出内部变量

let name = 'bus'
let color = 'green'
let weight = '20吨吨吨'
export {name, color, weight}
 
// export命令除了输出变量,还可以输出函数或类
export function run() {
  console.log('Bus is running')
}
// 可以使用 as 关键字对输出的变量、函数、类重命名
let name = 'bus'
let color = 'green'
let weight = '20吨吨吨'
function run() { console.log('Bus is running') }
export {
  name as busName,
  color as busColor,
  weight as busWeight,
  run as busRun
}

import

import 命令用于导入模块

import { name, color, weight, run } from './car'
 
// 导入一个模块的时候也可以用 as 关键字对模块进行重命名
import {name as busName } from './car'
 
// 通过星号 '*' 整体加载某个文件
import * as car from './car'
console.log(car.name)   // bus
console.log(car.color)  // green

export default 命令

从前面的例子可以看出,使用 import 命令加载模块时需要知道变量名或者函数名,或者整个文件,否则无法加载。为了方便,可以使用 export default 命令为模块指定默认输出,加载该模块时,可以使用 import 命令为其指定任意名字。

// 定义模块 math.js
let basicNum = 0
let add = function(a, b) {
  return a+b
}
export default { basicNum, add }
 
// 引入
import math from './math'
function test() {
  console.log(math.add(99 + math.basicNum))
}

附:阮一峰《ES6标准入门》
import 命令是静态加载而不是动态加载的,如果 import 命令要取代 require 方法,就要能实现动态加载。
有一个提案:建议引入 import() 函数,完成动态加载,import 命令能够接收什么参数,import() 函数命令就能接受什么参数。

关于上面所说的提案,现在配置 webpack 使用 babel 转译应该能实现了(vue 的路由懒加载,Webpack 的 splitChunk 都有用到)。
现在前端框架基本上使用 ES6 的模块化语法,node.js 仍然保持 require 导入,两者最主要的区别是:

  • require 是运行时加载,import 是编译时加载

即下面的条件加载时不可能实现的

if (x === 2) {
    import MyModual from './myModual'
}

链接: https://fly63.com/article/detial/4670

web开发,前后分离接口规范

目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

用standard来管理JavaScript 代码规范

standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范

Web 前端开发代码规范(基础)

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

Node.js的模块加载机制(CommonJS规范)

为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

编码规范_html代码规范化编写

嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;

CommonJS 规范中的 module、module.exports 区别

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口

W3C 代码标准规范

W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。

css3代码书写规范

不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!