ES6-模塊化
阿新 • • 發佈：2017-08-27
pan tor test target nbsp commonj exports str som
ES6-模塊化
在es6標準中，js原生支持modulele。這種將js代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規範中流行起來的，比如CommonJS、AMD和CMD。接下來我們看一下這幾種規範。
一、模塊化規範
1.1 CommonJs規範實例
詳細請移步這裏。
1 import ‘./demo‘; //導入當前目錄下的模塊 2 import ‘mysql‘ ; //導入模塊目錄中的模塊 3 4 export.exports = {} //導出模塊
NodeJS對其有更好的實現。
1.2 AMD規範實例
1、html代碼
1 index.html2 --------------- 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <title></title> 7 <!-- 引入require.js --> 8 <script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script> 10 </head> 11 <body> 12 <script type="text/javascript" src="main.js"></script> 13 </body> 14 </html>
2、js代碼
myName.js --------------- // 定義模塊 define(‘myName‘,[],function () { return ‘My name is toTo_li.‘ }) yourName.js --------------- // 定義模塊 define(‘yourName‘,[],function () { return ‘Your name is boke.‘ }) main.js--------------- // 調用模塊 require([‘myName‘,‘yourName‘],function (myName,yourName) { console.log(myName) console.log(yourName) })
AMD的規範的實現有RequireJS，了解更多請移步CommonJs
1.3 CMD規範實例
define(function(require, exports, module) { var $ = require(‘jquery‘); // 導入模塊 var Spinning = require(‘./spinning‘); exports.doSomething = ... module.exports = ... // 導出模塊 })
二、ES6的模塊化
ES6模塊需要使用babel轉碼，這裏簡單解釋一下什麽是babel轉碼。
babel就是將‘ES6模塊化語法’轉化為‘CommonJS模塊化語法’，其中的require exports等是Commonjs在具體實現中所提供的變量，了解過node的同學應該知道。
import ‘./test‘; // 導入當前目錄中的模塊 import ‘jquery‘; // 導入模塊目錄中的模塊 export function test() {} // 導出模塊
ES6的模塊化是將不同功能的代碼分別寫在不同的文件中，各模塊只需導出公共接口部分，然後通過模塊的導入的方式可以在其他地方使用。
1 //point.js 2 module "point"{ 3 export class Point{ 4 constructor(x,y){ 5 public x = x; 6 public y = y; 7 } 8 } 9 } 10 11 //myapp.js 12 //聲明引用的模塊 13 module point from "/point.js"; 14 15 //這裏可以看出，盡管聲明了引用的模塊，還是可以通過指定需要的部分進行導入 16 import Point from "point"; 17 18 var origin = new Point(10,5); 19 console.log(origin);
關於ES6模塊的具體信息，可以查看阮一峰老師的模塊化
ES6-模塊化