前端模塊化js

一.前端模塊化
 js模塊化提供了三種規範
 　　1.commonjs規範  表明就是nodejs  適合後臺開發  由於是同步的  服務器的運行比較快等待時間不長
  　　　　commonjs不適合用於前端  前端的客戶端是預覽器  預覽器追求異步加載 預覽器不能等太長時間
 　　2.前端模塊的規範是Amd規範，表明就是requirejs 他是異步的，
 　　　　 不少前端框架都是用的amd規範好比jquery，angular等
 　　3.第三個模塊化的規範是es6

二.模塊化的操做

　　1.commonjs的操做
 　　　　 1.全部的模塊化都是兩個方向，暴露接口和引入模塊
  　　　　2.module.exports={} 暴露的是一個叫exports的對象
  　　　　3.require()  引入一個模塊
 　　　　 4.這是後臺的  在nodejs環境能夠直接運行，可是在客戶端不能直接運行，
  　　　　　　 須要打包解析， webpack gulp
　　 擴展
 　　　　 var a；
 　　　　 var a 就是聲明一個變量a，就是預覽器往window上添加一個屬性a　　

 

　　

　　前端模塊

　　　　不借鑑模塊自定義模塊

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

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

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

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

　　　　　　圖文操做說明：

一.自定義定義

　　　　1.模塊1      沒有依賴的模塊

　　　　

　　　　2.　依賴模塊的依賴模塊

　　　　

　　　　cai是依賴的模塊-------------xiaochou是向外暴露的模塊

　　　　3.主文件  index.js

　　　　

　　　　xiaochou是依賴的模塊

　　　　4.index.html

 　　　　

　　　　注意事項：

　　　　　　   1.依賴關係千萬不能出錯
   　　　　　　2.這種模塊的缺點
  　　　　　　 3.會發送屢次請求，依賴關係不能放錯順序。

　　　　　　　依賴前端規範：　　requirejs 　　amd

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

二.define 定義

　　　　require提供了一個全局的方法，叫define()用來定義模塊
  　　　  定義模塊分兩種
   　　　 　1.不依賴其餘模塊
    　　　　2.依賴其餘模塊

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

　　　　　　引入模式：對這個模塊進行配置　　　　

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

　　　　1. 模塊1   不依賴其餘模塊

　　　　　　

　　　　　　暴露接口   xiao

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

　　　　　　

　　　　　　define 參數1（依賴的模塊） 參數2（依賴的jq）

　　　　　　funtion（回調函數）是咱們暴露出來的屬性和方法

　　　　3. 引入模塊  index.js

　　　　　　

　　　　　　require.config（）{}  對模塊的配置

　　　　　　paths：{}  配置的模塊路徑  （不能帶後綴名）

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

　　　　　　引入模塊：  yangjie是引入的依賴模塊，myang是暴露的接口對象

　　　　　4.index.html

　　　　　　　

　　　　　　　scr 是amd規範的文件  data-main 纔是咱們引用的文件