1、模塊化的發展程序
var moduleObj = {
userName: 'zhangsan',
fn: function () {
console.log('hello world')
}
}
使用方式
<html>
<head>
</head>
<body>
<script src="https://www.cnblogs.com/P1Kaj1uu/p/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";
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542631.html
標籤：JavaScript
上一篇：IAM系統的權限管理體系介紹
下一篇：移動端 H5 實作拍照功能