1、模塊化的發展過程 var moduleObj = { userName: 'zhangsan', fn: function () { console.log('hello world') } } 使用方式 <html> <head> </head> <body> <script src="a.j ...
1、模塊化的發展過程
var moduleObj = {
userName: 'zhangsan',
fn: function () {
console.log('hello world')
}
}
使用方式
<html>
<head>
</head>
<body>
<script src="a.js"></script>
<script>
moduleObj.fn()
</script>
</body>
</html>
立即執行函數的方式
通過立即執行函數的方式為模塊提供私有空間
; (function () {
var userName = 'lisi';
function fn1() {
console.log(userName);
}
function fn2() {
console.log('hello world')
}
window.moduleObj = {
fn1: fn1,
fn2: fn2
};
})()
2、模塊化規範說明
CommonJS它是node.js中提到的一個規範。也就是說我們在寫Node.js的時候，必須符合CommonJS的規範。
CommonJS規範要求
1、一個文件就是一個模塊
2、 通過module.exports導出成員項
3、通過require函數載入模塊
4、每個模塊都有單獨的作用域。
AMD(Asynchronous Module Definition),翻譯過來就是非同步的模塊定義規範。
define('moduleA',['jquery','./moduleB'],function($,moduleB){
return{
fn:function(){
// $('p')
}
}
})
require(['./moduleA'],function(moduleA){
moduleA.fn();
})
3、ES Module基本使用
1、自動採用了嚴格模式
2、每個es module 都是運行在單獨的私有的作用域中
3、`ES module`通過CORS的方式請求外部的JS模塊，如果服務端不支持`CORS`，則會出現跨域的問題。
4、ES module的script標簽會延遲執行腳本，類似於添加了defer.
4、導出的註意事項
1、註意語法的問題
2、通過export 對成員進行導出操作，導出的是成員的引用
3、導出的成員是只讀的，那麼我們導入了以後是不能對成員進行修改的。
5、導入的註意事項
1、import後面的from跟的是導入的文件的路徑，並且是一個完整路徑。
2、如果我們這裡是執行某個模塊，並不需要提取其中的成員
import {} from './module.js'
import './module.js
3、如果某個模塊中導出的成員比較多，同時我們都需要這些導出的模塊成員，
import * as m from './module.js'
4、如果需要進行動態的導入
import('./module.js').then(function(module) {
console.log(module.)
})
5、在進行導出的時候，使用了export 和export default,導入import應該怎樣進行處理？
import title, { userName, userAge } from "./module.js";
