資訊專欄INFORMATION COLUMN
摘要：介紹一款模塊加載工具的入門，并且重點(diǎn)介紹其優(yōu)化工具。發(fā)布目錄項(xiàng)目源代碼工具目錄，例如構(gòu)建工具等。另外，前端代碼發(fā)布前都會進(jìn)行壓縮，使文件足夠小。原來是因?yàn)槔锪?，所以?yōu)化工具把也合并進(jìn)來了。而優(yōu)化工具要用好，要多嘗試他們的配置選項(xiàng)。
前端變化太快，如今RequireJS已經(jīng)無法吸引眼球了。
介紹一款模塊加載工具：RequireJS的入門，并且重點(diǎn)介紹其優(yōu)化工具。
RequireJS是一個代碼模塊加載器。
最古老的時候，前端在開發(fā)頁面的時候，一般情況下，都是在Html文件里一次把所有會用到的JavaScript文件通過
隨著前端項(xiàng)目越來越復(fù)雜，這種方式帶來了很多問題：
命名沖突。在以前的項(xiàng)目里，經(jīng)常為了命名沖突，出現(xiàn)很多類似 comm.utils.dialog的對象名。
文件依賴。例如上述代碼，如果某開發(fā)人員要調(diào)用dialog.js，那么必須在此之前知道它依賴于util.js，并在dialog.js之前引用util.js，否則會報錯。
更詳細(xì)的請看文章前端模塊化開發(fā)的價值（https://github.com/seajs/seajs/issues/54...）
所以很多人去研究模塊化開發(fā)，成果也不錯。出現(xiàn)了許多模塊化方案和標(biāo)準(zhǔn)，目前有以下：
符合AMD規(guī)范，如RequireJS
符合CMD 規(guī)范，如SeaJS
NodeJS規(guī)范 CommonJS
ECMAScript 6的模塊化
RequireJS就是符合AMD規(guī)范一種實(shí)現(xiàn)。
二、使用官網(wǎng)下載RequireJS，并在頁面中引用，即可享用RequireJS的所有特性。
從一個DEMO開始，此Demo沒有很多邏輯，當(dāng)加載某模塊時在控制臺打印該模塊的名稱。
以上是Demo的代碼結(jié)構(gòu)。
release：發(fā)布目錄
src：項(xiàng)目源代碼
tools：工具目錄，例如構(gòu)建工具等。
點(diǎn)擊查看完整代碼
DEMO代碼分析
入口文件，main.html
暫忽略release和tools目錄，只關(guān)注src目錄。
先看main.html
先引入了require.js，再引入配置信息config.js，最后是一段引導(dǎo)啟動代碼。此Demo的啟動代碼，在require函數(shù)的第一個參數(shù)里傳入它所需要的模塊，one和two，而不需要關(guān)心它們分別依賴于什么
配置文件config.js
引入require.js后，需要先進(jìn)行配置，例如baseUrl是指加載資源時，是相對此路徑的資源。
定義模塊
require函數(shù)的加載對象是模塊，對于requireJS來說，一個文件定義一個模塊。那么怎么定義模塊呢？
使用define函數(shù)定義，例如two.js里的代碼是：
其中return的對象是該模塊對外曝露的接口，調(diào)用方require此模塊后，可使用此對象所定義的所有方法和屬性。
運(yùn)行DEMO
使用Chrome運(yùn)行src/main.html，先后初始化了three，one，two等三個模塊。如下圖
網(wǎng)絡(luò)請求是這樣的
main.html通過script標(biāo)簽加載require.js和config.js，然后啟動代碼通過require函數(shù)加載 one.js和two.js，two.js通過require函數(shù)加載它所依賴的three.js。
requireJs的入門要關(guān)注四樣?xùn)|西
頁面引用 require.js
在使用require函數(shù)前，使用require.config方法配置路徑等信息
使用require函數(shù)加載模塊
使用define函數(shù)定義模塊
三、優(yōu)化工具以上是RequireJS最基本的使用方法。然而，它還提供了優(yōu)化工具，用于提升性能，此優(yōu)化工具為 r.js（http://requirejs.org/docs/optimization.h...）
requireJS認(rèn)為一個文件只能定義一個模塊。然而，有些模塊很小，分開文件來開發(fā)雖然有利于源代碼的維護(hù)和可讀性，但卻不利于瀏覽器環(huán)境下的加載，因此會有一些合并代碼的需求，即將幾個模塊合并到一個文件里，例如如果一個工程里使用到了jquery和backbone等第三方代碼庫，而且又是常常一起使用的，那么在發(fā)布之前就可以把它們合并成一個文件。
另外，前端代碼發(fā)布前都會進(jìn)行壓縮，使文件足夠小。因此，現(xiàn)在介紹一下如何使用r.js的優(yōu)化工具實(shí)現(xiàn)此兩點(diǎn)述求。
安裝與使用
下載r.js。
安裝NodeJS和NPM，官網(wǎng)去下載安裝包即可
同樣是上一節(jié)的Demo，我們要合并one.js和two.js，同時壓縮所有的代碼。
以下文件目錄中
tools里面的r.js是優(yōu)化工具的代碼庫；而build.js是配置文件
src/js目錄下多了一個combine.js文件。此文件用于存放合并后的代碼。
配置文件
優(yōu)化工具根據(jù)配置文件進(jìn)行優(yōu)化，即tools里面的build.js。
配置選項(xiàng)有很多，詳情請看
https://github.com/jrburke/r.js/blob/mas...
優(yōu)化一：合并文件
在src/js下新建combine.js，內(nèi)容為空都可以。
tools/build.js里配置要合并的config.modules。
命令行cd到tools目錄
執(zhí)行 node r.js –o build.js
從輸出的信息看來，combine.js合并了one.js，three.js和two.js。
但我們在tools/build.js里明明配置的是合并one和two。原來是因?yàn)閠wo.js里require了three.js，所以優(yōu)化工具把three.js也合并進(jìn)來了。那么如果我本意其實(shí)并不想把three.js合并進(jìn)來呢？
Rjs的合并策略：傳入define，require的模塊參數(shù)如果是直接量就會合并，如果是變量那么不合并，例如
Two.js里require(‘three’)這樣加載，three.js是會被合并到combine.js的，而如果是var mod=”three”; require(mod)，那么three.js是不會被合并的。
優(yōu)化二：代碼壓縮
默認(rèn)情況下，優(yōu)化工具是會壓縮代碼，但是如果某些情況下不想壓縮可以，在tools/build.js里關(guān)掉，即optimize選項(xiàng)設(shè)置為none。
運(yùn)行結(jié)果
編譯后的release目錄文件：
運(yùn)行release/main.html，同樣在控制臺打印了加載的模塊名稱，即實(shí)現(xiàn)了跟之前src/main.html一樣的功能。
但是，不再多帶帶加載 one.js、two.js和three.js了，而是只加載 combine.js
至此結(jié)束，只會用requireJS是不夠的，優(yōu)化工具會使你的程序性能得到提升。
而優(yōu)化工具要用好，要多嘗試他們的配置選項(xiàng)。http://requirejs.org/docs/api.html#confi...
我在深圳，歡迎關(guān)注我的公眾號
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79054.html
摘要：前端工程化的演化。前端較為流行的單元測試，等自動化測試自動化測試是軟件通過模擬瀏覽器，對頁面進(jìn)行操作，判斷是否產(chǎn)生預(yù)想的效果。 前端工程化 ??前端工程化的概念在近些年來逐漸成為主流構(gòu)建大型web應(yīng)用不可或缺的一部分，在此我通過以下這三方面總結(jié)一下自己的理解。 為什么需要前端工程化。 前端工程化的演化。 怎么實(shí)現(xiàn)前端工程化。 為什么需要工程化 ??隨著近些年來前端技術(shù)的不斷發(fā)展，越...
摘要：以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個構(gòu)建平臺，而不只是一個打包工具。 以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。 如今，網(wǎng)頁不再...
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：后來換了一家公司，沒有前端開發(fā)這個職位，是從轉(zhuǎn)過去的，因?yàn)轫?xiàng)目需要，漸漸的也就坐實(shí)了這個崗位。假如我們以前的代碼是這樣的放到全局作用域。此時的代碼，其實(shí)已經(jīng)具備了進(jìn)入現(xiàn)代期的要求，那就是規(guī)范模塊化。 我是14年入的程序員大軍，當(dāng)時主java兼具前端開發(fā)的活兒，在現(xiàn)在看來的一些流開發(fā)框架和新興思想，早在node.js開始進(jìn)入大家視野的時候就流行起來了，只是在那時博主并沒有關(guān)注前端的生態(tài)圈...
摘要：并減少對樣式的請求。缺點(diǎn)暴露了模塊成員，外部可以修改模塊內(nèi)部狀態(tài)。所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運(yùn)行。 HTML&&CSS基礎(chǔ)知識點(diǎn)整理 一、WEB標(biāo)準(zhǔn)：一系列標(biāo)準(zhǔn)的集合 1. 結(jié)構(gòu)（Structure）：html 語言：XHTML[可擴(kuò)展超文本標(biāo)識語言]和XML[可擴(kuò)展標(biāo)記語言] 2. 表現(xiàn)（Preasentation）:css...
閱讀 2237·2021-11-19 09:40
閱讀 2259·2021-10-09 09:43
閱讀 3355·2021-09-06 15:00
閱讀 2876·2019-08-29 13:04
閱讀 2834·2019-08-26 11:53
閱讀 3626·2019-08-26 11:46
閱讀 2377·2019-08-26 11:38
閱讀 445·2019-08-26 11:27
