成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

require.js構(gòu)建優(yōu)化

yacheng / 717人閱讀

摘要：未構(gòu)建之前，全部分開加載。的優(yōu)化，得再看下的示例，然后再寫篇筆記記錄下來。

想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉(zhuǎn)轉(zhuǎn)，看了許多相關(guān)資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實(shí)目前我暫時(shí)還沒去感受），于寫法，比較喜歡requirejs的寫法，這個(gè)比較主觀，這也得益于阮一峰大大那篇Javascript模塊化編程（三）：require.js的用法，講得很清楚，反而我看seajs的文檔，反而迷迷糊糊。

其實(shí)模塊化編程不難理解，主要我還是卡在了構(gòu)建工具，壓縮合并的優(yōu)化上，雖然seajs官網(wǎng)上有很多相關(guān)教程，但我就是不理解，簡直被自己蠢哭了。后來看到requirejs上有例子，就決定啃英文教程試一下。

需要用到node和npm，我直接在github上clone了requirejs的例子create-template-master所以可以跳過r.js的安裝:

npm install -g requirejs
r.js -o app.build.js

例子已經(jīng)有build.js，app目錄也已經(jīng)搭建好，所以只需要下面一條命令，就自動(dòng)幫你構(gòu)建了。

node r.js -o build.js

build.js是命令行配置參數(shù)文件，所以可以把build.js里面的配置參數(shù)直接寫在上面那條命令的后面。like this：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

看下build.js里面怎么寫：

{
    "appDir": "../www",     //待構(gòu)建文件目錄
    "baseUrl": "lib",       //和require.js里面基目錄（baseUrl）一樣
    "paths": {              //路徑指定，如下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //構(gòu)建目標(biāo)文件目錄
    "modules": [            //這個(gè)應(yīng)該是模塊配置，name表示入口文件
        {
            "name": "app"
        }
    ]
}

這是構(gòu)建的log：

可以對(duì)比一下構(gòu)建前后，打開www/index.html和www-built/index.html的js加載有什么不同。
未構(gòu)建之前，全部js分開加載。

構(gòu)建之后，只需要加載require.js和app.js。

構(gòu)建之后，js已經(jīng)是壓縮合并的了，main.js，messages.js和print.js都合并到了app.js里面。

css的優(yōu)化，得再看下require.js的示例，然后再寫篇筆記記錄下來。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87557.html

相關(guān)文章

  • 使用require.js構(gòu)建優(yōu)化項(xiàng)目實(shí)踐

    摘要：嘗試用自己主頁的簡單代碼構(gòu)建優(yōu)化下。存放和，放需要構(gòu)建的項(xiàng)目代碼，為構(gòu)建目標(biāo)文件夾。我另外一篇博文構(gòu)建優(yōu)化有簡單說了下，構(gòu)建的命令，其實(shí)上的官網(wǎng)，看有更詳細(xì)的內(nèi)容。 嘗試用自己主頁的簡單代碼構(gòu)建優(yōu)化下。 在文件夾requirejs-optimizer下新建三個(gè)文件夾：tools，www和www-built。tools存放r.js和build.js，www放需要構(gòu)建的項(xiàng)目代碼，www-b...

    anRui 評(píng)論0 收藏0

  • 【前端構(gòu)建】RequireJS及其優(yōu)化工具

    摘要：介紹一款模塊加載工具的入門，并且重點(diǎn)介紹其優(yōu)化工具。發(fā)布目錄項(xiàng)目源代碼工具目錄，例如構(gòu)建工具等。另外，前端代碼發(fā)布前都會(huì)進(jìn)行壓縮，使文件足夠小。原來是因?yàn)槔锪耍詢?yōu)化工具把也合并進(jìn)來了。而優(yōu)化工具要用好，要多嘗試他們的配置選項(xiàng)。 前端變化太快，如今RequireJS已經(jīng)無法吸引眼球了。介紹一款模塊加載工具：RequireJS的入門，并且重點(diǎn)介紹其優(yōu)化工具。 一、RequireJS簡介...

    Loong_T 評(píng)論0 收藏0

  • Javascript模塊化及webpack基本介紹

    摘要：可維護(hù)性根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會(huì)盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對(duì)其進(jìn)行改進(jìn)和維護(hù)。這標(biāo)志模塊化編程正式誕生。的模塊系統(tǒng)，就是參照規(guī)范實(shí)現(xiàn)的。對(duì)象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發(fā)展歷程 什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發(fā)展歷程 什么是模...

    figofuture 評(píng)論0 收藏0

  • Require.js實(shí)現(xiàn)js模塊化管理教程

    摘要：再者，引入一大堆的文件也不美觀，而使用即可實(shí)現(xiàn)的模塊化異步加載。通過定義模塊的方式可分為以下兩類。當(dāng)和這兩個(gè)模塊加載完成之后將會(huì)執(zhí)行回調(diào)函數(shù)。插件可以使回調(diào)函數(shù)在結(jié)構(gòu)加載完成之后再執(zhí)行。最好的方式是使用字符串但這很難管理尤其實(shí)在多行的時(shí)候。 什么是Require.js Require.js是一個(gè)AMD規(guī)范的輕量級(jí)js模塊化管理框架，最新版本require.js 2.1.11壓縮后只有1...

    fox_soyoung 評(píng)論0 收藏0

  • 前端面試題（3）現(xiàn)代技術(shù)

    摘要：什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面，后續(xù)請(qǐng)求都無需再離開此頁目標(biāo)旨在用為用戶提供了更接近本地移動(dòng)或桌面應(yīng)用程序的體驗(yàn)。流程第一次請(qǐng)求時(shí)，將導(dǎo)航頁傳輸?shù)娇蛻舳?，其余?qǐng)求通過獲取數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)的傳輸通過或遠(yuǎn)程過程調(diào)用。 什么是單頁面應(yīng)用(SPA)？ 單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續(xù)請(qǐng)求都無需再離開此頁 目標(biāo)：旨在用為用戶提供了更接近本地...

    EasonTyler 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<