前端模塊化

js 模塊化提供的三種規範

　　1. commonjs 規範，表明 nodejs 適合後臺開發，由於是同步的，服務器運行快，等待時間不長，comminjs 不適合用於前端，前端的客戶端是瀏覽器，瀏覽器追求異步加載，瀏覽器不能等待太長時間

　　2. 前端模塊規範：amd 表明是 requirejs 是異步的

　　3. 第三個模塊化規範：es6 

　　有不少的前端框架都是 amd 規範，jQuery  angular等

　　

模塊化的操做

　　commonjs 的操做

　　　　全部的模塊化，都是兩個方向；

　　　　暴露接口 和 引入模塊

　　　　module.exports={}　　暴露的是一個叫 exports 的對象

　　　　require()　　引入一個模塊

　　這是後臺的規範，在 node 環境 能夠直接運行，可是在在客戶端不能直接運行（會報錯：require is not defined ），須要對文件進行打包編譯：webpack，gulp

　　

　　瀏覽器是一個對象，在 window 對象

　　在 window 中查找

　　方法也是屬性，屬性值是 function 

　　做用域：

　　　　當執行 js 代碼時，瀏覽器會給一個全局環境，叫window，做用域分兩部分，一個是內存部分，一個是執行部分，代碼從上到下執行，碰到變量，

　　就會在 window 中（內存部分） 查找這個變量是否存在，存在便看賦值了沒有，賦值了即是後面的值，沒賦值 undefined ， 沒聲明這個變量 xxx is not defined  

 

　　拓展：

　　　　var a  

　　　　var a 就是聲明的一個變量a，本質就是瀏覽器往 window 上添加的一個屬性 a  （怎麼添加的呢？經過 var ）

　　

　　前端模塊，不借鑑模塊，自定義模塊

　　主文件的名字　　app.js　　main.js　　index.js  的操做

　　避免函數的命名衝突，採用自調用函數

　　　　自調用函數執行時，會造成一個私有的做用域，對內部的變量進行保護的做用；

　　暴露模塊，須要後面的全部 js 文件都能訪問這個模塊，將該模塊註冊在 window 下面；

　　

圖文操做說明：

　　依賴模塊  shang.js

　　

　　依賴模塊的依賴模塊　　fei.js

　　

　　在主要文件中 去執行 模塊的方法　　index.js

 　　

　　在 html 中 引入 模塊　　index.html

　　

　　

上面的案例分析：

　　　　定義一個 shang 模塊，沒有任何依賴，定義一個 fei 模塊，這個模塊依賴 shang 模塊，定義一個主文件 依賴 fei 模塊

　　注意事項：

　　　　依賴關係 千萬不能出錯

　　這個模式的缺點：

　　　　發送屢次請求

　　　　依賴關係不能放錯順序

　　依賴前端規範：　　requirejs 　　amd

　　amd 是前端的模塊化的一種規範　　全稱爲  async module difinition　異步模塊加載機制，因此須要按照規範定義和使用模塊

　　define 定義

　　require 提供了全局的方法 

　　　　define 來定義模塊

　　　　　　定義模塊分兩種：

　　　　　　　　不依賴其餘模塊

　　　　　　　　依賴其餘的模塊

　　若是不依賴其餘模塊，參數就是一個函數，return 暴露接口

　　　　引入模式：

　　　　　　對這個模塊進行配置　　　　

　　　　　　引入模塊

　　 在圖文操做以前，須要下載 requirejs 插件；

　　不依賴其餘模塊：he.js

　　

　　依賴其餘的模塊　　yang.js　　依賴的模塊跟 app.js 的配置模塊有關

　　

　　引入模塊　　app.js

 　　

　　

　配置文件中 除了 paths 這個對象外，還有一個比較重要的對象 baseUrl 這個是默認 模塊的根目錄，若是不指定的話，是以 app.js 爲參照物 進行的路徑查找，

　　指定的話，則是以 根目錄 爲參照物，來對模塊進行查找

　　

　　在 html 上展現　　app.html