免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

　　伴隨著websites演化至web apps的過程，有三個現(xiàn)象是很明顯的：

1. 頁面中有越來越多的Js。
2. 客戶端能做的事情越來越多。
3. 越來越少的頁面重載(當(dāng)然也伴隨著更復(fù)雜的代碼)。

　　這些現(xiàn)象導(dǎo)致了什么？大量的前端代碼?！　?/p>

　　龐大的代碼庫需要被高效的組織。而Module(組件式)開發(fā)的系統(tǒng)即為大多數(shù)開發(fā)者采取的途徑。

　 MODULE SYSTEM STYLES

　　有很多種定義依賴，導(dǎo)出變量的標(biāo)準(zhǔn)或者說方法：

• <script> tag 的形式(不通過組件系統(tǒng))      
• CommonJs
• Amd形式
• ES6組件
• 各種其它風(fēng)格。?！　　　?/li>

　　<script>tag形式

　　在非組件系統(tǒng)中，我們的模塊化后的代碼是這樣被組織的。

　　<script src="module1.js"></script>　　<script src="module2.js"></script>　　<script src="libraryA.js"></script>　　<script src="module3.js"></script>

　　各個組件向全局變量提供了一個個接口(如：瀏覽器環(huán)境的 window對象)。之后，借助全局對象，我們就能使用這些組件。

　　痛點

• 全局對象可能會有屬性間沖突(這就是Jquery提供了給$重命名途徑的原因)
• 我們需要關(guān)心組件加載的順序(先加載依賴項)
• 開發(fā)者需要花很多精力來解決依賴問題。
• 在較大的項目中，tag列表將會變得非常的大且難于維護(hù)?！　?/li>

　  CommonJs：同步式的require

　　這種風(fēng)格的組件系統(tǒng)使用同步的形式來加載依賴項，并返回導(dǎo)出的接口。每一個組件可以借助exports對象或者配置module.exports來導(dǎo)出接口(Node.js開發(fā)者再熟悉不過了)。

    require("module");    require("../file.js");    exports.doStuff = function() {};    module.exports = someValue;

　　優(yōu)點

• 適合用作后端的組件(一次性加載到Cache以重用)
• 已經(jīng)有了很多此風(fēng)格的組件(NPM)
• 簡單易用

　　痛點

• 阻塞式，不適合前端。

　　典例

• node.js
• browserify
• modules-webmake
• wreq

    AMD：異步式的require

　  AMD的全稱是Asynchronous Module Definition，很多需要用到組建式系統(tǒng)，但又感受到它們在前端的痛點的開發(fā)者建設(shè)了AMD。

    require(["module", "../file"], function(module, file) { /* ... */ });    define("mymodule", ["dep1", "dep2"], function(d1, d2) {      return someExportedValue;        });

　  優(yōu)點

• 異步加載，適合前端環(huán)境。
• 并行加載，帶來速度提升。

　　痛點

• 帶來了更多的代碼工作量。

　　典例

• require.js
• curl.js

　 ES6組件

　  From EcmaScript6

    import "jquery";    export function doStuff() {}    module "localModule" {}

 　 雖然是標(biāo)準(zhǔn)，但是被瀏覽器廣泛支持還需要一段時間。

　TRANSFERRING

　  組件雖然被執(zhí)行于客戶端，但不可避免需要經(jīng)由服務(wù)器傳送。

　  關(guān)于組件的傳送，有兩個極端：

1. 每個組件，一個HTTP請求。
   • 優(yōu)點：僅僅傳送依賴項。
   • 缺點：請求多，負(fù)載高，更慢的啟動延遲。
2. 所有的組件，一個HTTP請求。
   • 優(yōu)點：更快，更低延遲。
   • 傳送了沒必要傳的東西。

　　讓我們在兩者間做一個妥協(xié)。在大多數(shù)情況下，以下的方法將更為適用：

　?。?gt;在編譯所有的組件時，將組件分為多種批次(chunks or batches)。

　　再某個批次再被需要的時候，再發(fā)送他們。

　　解決了前者帶來的請求的高延遲、高負(fù)載，后者帶來的無必要信息的傳送。

　　那么，問題來了，這個分批次由誰來做？

　　webpack。

　　當(dāng)然，gulp，grunt也是時下很火的可選項。具體工具的選型，仁者見仁，智者見智。 

　 WHY ONLY JAVASCRIPT?

　　組件化系統(tǒng)難道就只能為javascript服務(wù)嗎？前端還需要解決的問題有

• 樣式表
• 圖片
• 字體
• 模版
• coffeescript -> js
• less -> css
• jade -> html
• 各種。。。。。。

　　沒錯，這些，webpack也能搞定

    require("./style.css");    require("./style.less");    require("./template.jade");    require("./image.png");