javascript模块加载规范

为了模块化开发而必然形成的事物。以下是个人的一点总结,有错误的话,谢谢指出

1.AMD/requirejs

//通常的引用形式,以下实例是jquery的引用

define(['jquery'],function($){  })

2.CMD/seajs

现在seajs 使用的人比较少,由于requirejs当初是依赖前置,seajs是依赖就近,所以有区别,但后来requirejs吸收了seajs的特点也支持了相关作用...

//通常的引用形式,以下实例是jquery的引用

define(function(require,exports,module){

      var $= require('./jquery');

});

3.COMMOMJS/node

//被引用文件xxx内

// 注意点 exports仅仅是module.exports的一个地址引用。nodejs只会导出module.exports的指向,如果exports指向变了,那就仅仅是exports不在指向module.exports,于是不会再被导出

exports.xxx= xxx;

module.exports.xxx=xxx;

//引用xxx的文件

require(./xxx)

4.ES6引用规范

//被引用文件xxx内

//注意点 通过export方式导出,在导入时要加{ },export default则不需要 无论是否写export default ,export default 都存在表示该文件输出的一个变量

export aaa;

exports default {aaa}

//引用xxx的文件

//第一种引用方式

import xxx from 'xxx';

let aaa = xxx.aaa;

//第二种引用方式

import { aaa } from 'xxx'

5.UMD(包含AMD,COMMOMJS)

目的使一个模块既能被浏览器借用requirejs加载,也能在node服务端使用

(function (root, factory) {   
 if (typeof define === 'function' && define.amd) {        
// AMD        
    define(['jquery'], factory);    
} else if (typeof exports === 'object') {       
 // Node, CommonJS之类的      
  module.exports = factory(require('jquery'));   
 } else {     
 // 浏览器全局变量(root 即 window)        
    root.returnExports = factory(root.jQuery);    
}}(this, function ($) {   
 //    方法    function myFunc(){};     
//    暴露公共方法    return myFunc;
})); 

一个js文件既能用umd规范加载,其实也就可以使用es6规范加载,从而解决了js在各个环境中的使用

//某种程度上(推荐学习阮老师的es6学习的module模块)

export default == module.exports

你可能感兴趣的:(javascript模块加载规范)