js模块化规范

一、js模块化
1、模块化规范:

  • script
  • CommonJS
  • AMD
  • CMD
  • ES6 modules

2、script(同步加载,浏览器端

<script src="js/index.js"></script>

文件异步加载的script写法:

<script src="js/require.js" defer async="true" ></script>

defer是为兼容IE,因为IE不支持async,只支持defer

同步加载,加载多个文件时浏览器会停止网页渲染


3、CommonJS(服务端的模块化、同步加载
什么是CommonJS?

CommonJS API定义许多普通应用程序(主要指非浏览器的应用)使用的API,在兼容CommonJS的环境下,可以使用JavaScript开发以下程序:

  • 服务器端JavaScript应用程序
  • 命令行工具
  • 图形界面应用程序
  • 混合应用程序(如,Titanium或Adobe AIR)

CommonJS与NodeJS的关系:

NodeJS是CommonJS规范的实现

CommonJS用法:

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。

Browserify 是目前最常用的 CommonJS 格式转换的工具,使用Browserify转化过后,就可以直接在浏览器中调用。

// foo.js
module.exports = function(x) {
  console.log(x);
};

// main.js
var foo = require("./foo");
foo("Hi");

使用下面的命令,就能将main.js转为浏览器可用的格式。

$ browserify main.js > compiled.js

webpack也是基于CommonJS规范实现的


4、AMD(客户端的模块化、异步加载

AMD模块特定的define()函数来定义,采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:

define(function(){
  return ***
});
require([module], callback);

define与require的区别:

  • define定义模块,require加载使用模块。
  • define定义的模块可以被其它模块调用,require不行。define和require不一样的地方是define的回调函数需要有return语句返回模块对象,这样define定义的模块才能被其他模块引用;require的回调函数没有return语句,所以不能被其他模块调用。

目前,主要有两个Javascript库实现了AMD规范:require.jscurl.js

require.js的诞生,就是为了解决两个问题:

(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

加载非规范的模块:

require.config({
    shim: {
      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }
  });

5、CMD(与AMD很像

define(function(require,exports,module){...});

seaJS遵循CMD规范


6、ES6 modules
目前需要使用babel转化成ES5

基本规则:

  • 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
  • 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
  • 模块内部的变量或者函数可以通过export导出;
  • 一个模块可以导入别的模块
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容