javascript 模塊化 (切記：學習思想)

模塊化(切記：學習思想)

若是不用模塊化編寫代碼，那麼會具備如下問題：

• 代碼雜亂無章，沒有條理性，不便於維護，不便於複用
• 不少代碼重複、邏輯重複
• 全局變量污染
• 不方便保護私有數據(閉包)

模塊化的基本實現：閉包的自調用函數

//日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV=(function(){ return { pay(){ }, xiaofei(){ } } })()

AMD模塊化 -->requireJS

• AMD：async module define：異步模塊定義
• AMD其實就是requireJS實現的模塊化解決方案

其餘模塊化解決方案：

• CommonJS：Node中使用的模塊化解決方案
• CMD（common module define）：seajs中提出來的模塊化解決方案
  • 其實CMD能夠認爲是CommonJS的前端實現
  • seajs由阿里的（玉帛）編寫
  • seajs在2，3年前比較火，從去年開始已經中止更新
    • vue 、angular、react已經集成了各自的模塊化
    • es6模塊化
    • webpack也有模塊化的解決方案

vue、angular、react已經將模塊化的思想植入在裏面

AMD和CMD的不一樣之處：

• amd須要依賴前置，cmd須要依賴就近
• 導入導出方式不一樣：
  • amd經過define定義，return導出；
  • cmd經過不須要定義，只須要最後經過module.exports、exports導出

requireJS —— AMD規範

中文網：http://www.requirejs.cn/docs/api.html#jsfiles

基本用法

//一、經過script標籤導入requirejs源文件 //二、編寫模塊文件，基本格式以下： //cart.js define([],function(){ console.log('cart模塊'); }) //product.js define([],function(){ console.log('product模塊'); }) //三、首頁調用模塊： require(["cart.js","product.js"],function(){ //編寫後面的邏輯代碼 }) //等價於： require(["cart","product"],function(){ })

入口文件

配置

require.config({ //baseUrl //paths })

定義模塊的返回值（返回值至關於模塊的入口）

//cart.js： define([],function(){ return { init(){ }, addProduct(){ } } }) //首頁： require(["cart"],function(cart){ cart.init(); cart.addProduct(); })

• 注意：通常在導入模塊的時候，須要將有返回值的模塊在[前面]導入，無返回值的模塊在[後面]導入

案例——模塊依賴子模塊

//productAdd.js define([],function(){ return { init(){ console.log("添加商品"); } } }) //productEdit.js define([],function(){ return { init(){ console.log("編輯商品"); } } }) //product.js define(["productAdd","productEdit"],function(productAdd,productEdit){ return { init(){ console.log("商品列表"); }, add(){ productAdd.init(); }, edit(){ productEdit.init(); } } }) //首頁： require(["product"],function(product){ product.init(); product.add(); product.edit(); }) 

檢測第三方庫是否支持AMD規範

if ( typeof define === "function" && define.amd ) { define([], function() { return jQuery; } ); }

• 相似的還有：echarts

經常使用的模塊、文件夾路徑的配置

• 通常用於配置第三方模塊，好比jquery、bootstrap、zepto等等

  require.config( paths:{ jquery:"js/lib/jquery-1.11.min", zepto:"js/lib/zepto.min", bootstrap:"assets/bootstrap/js/bootstrap.min" } ) define(["jquery","zepto"],function($,$$){ }) require(["jquery","bootstrap"],function($){ })

插件

• 插件列表：https://github.com/requirejs/requirejs/wiki/Plugins
• i18n 國際化
• text 加載文件（.html文件。。。）
  • 插件github地址：https://github.com/requirejs/text

requirejs和vuejs淺顯的比較

• requirejs是一個庫
  • 至關於：一個房間
  • 至關於：一個底盤
  • 功能：只是一種模塊化的解決方案
• vue是一個框架
  • 至關於：一棟樓
  • 功能：一、不單單是模塊化的解決方案
  • 二、減小了DOM的操做(-->jquery的功能)
  • 三、。。。。。。

requirejs解決循環依賴

• a已經依賴了b
• b中先添加require模塊的依賴，而後再添加a的依賴，可是並不要去經過回調函數的形參獲取返回值
  • define(["require","a"],function(require){})
  • 在須要執行a模塊代碼的時候，require("a")()

node中的模塊化

• require("http").createServer()
• require("fs").readFile()
• require("common/type").doSth()

前端路由的意義

• 一、經過路由將各個功能從url上面就分辨出來了
  • /user/list
  • /user/3
  • /user/edit/3
• 二、路由還能夠進行前進、後退等導航操做

前端路由的實現方式

• 一、監聽window對象的hashchange事件
  • hash值：經過location.hash獲取，獲取的值以#開頭
  • 也能夠經過location.hash來設置hash值，固然設置的新hash也應該以#開頭
• 二、history對象:popState/pushState

ES6模塊化

瀏覽器調試

<script type="module"> //導入模塊 </script>

基本用法

//cart.js export default { name:"張三", age:18 } //index.js import cart from "./cart.js" cart.name cart.age

導出模塊

//cart.js export const age = 18; export function f1(){ console.log("f1函數"); } //默認返回值 export default { init(){ console.log("初始化"); } } //index.js import cart,{ age,f1 } from "./cart.js" cart.init(); age, f1();

導入模塊

//index.js import cart as cartIndex from "./cart.js" import { age as AGE } from "./product.js" //使用變量：cartIndex //使用變量：AGE