摘要:于是模塊化的需求也就產生了。現存的規范還真不少,不知道能否終結這場混戰和分別是和定義的標準。是使用的模塊化標準。的模塊化聲明的方式與類似,只是更進一步,天然隔離了命名空間。其他,關于前端化趨勢模塊化意味著什么更強大的前端,技術整體前移。
作者:肖光宇
野狗科技聯合創始人,先后在貓撲、百度、搜狗任職,愛折騰的前端工程師。
野狗官博:https://blog.wilddog.com/
野狗官網:https://www.wilddog.com/
公眾訂閱號:wilddogbaas
轉載請保留以上信息。
模塊化這個問題并非一開始就存在,WWW剛剛問世的時候,html,JavaScript,CSS(JS和CSS都是后來在網景被引進瀏覽器的)都是極其簡單的存在,不需要模塊化。
模塊化的需求是規模的產物,當web page進化到web application,瀏覽器端處理的邏輯越來越復雜,展現的樣式和動畫越來多,對于工程的要求也就越來越高。于是模塊化的需求也就產生了。模塊化的意義:
組件的復用,降低開發成本和維護成本
組件多帶帶開發,方便分工合作
模塊化遵循標準,方便自動化依賴管理,代碼優化,部署
JavaScript長久以來被認為是簡單的腳本語言,實際上情況早就發生來變化,在最新版的ECMA-262(ES6)文檔中強調JavaScript是通用編程語言而不是腳本語言。腳本語言,比如shell并不是用來完成復雜功能的,只是用來做一些自動化控制,是不需要模塊化的。而用于構建復雜系統通用編程語言(比如Java)一般都有模塊的實現。
1.模塊化標準ES6之前,JavaScript并沒有原生的模塊機制,好在JavaScript非常靈活,有很多種寫法可以將代碼天然隔離,起到模塊化的功能:
//define var modules = {} modules.mod1 = { foo : function(){...}, bar : function(){...} ... } //call modules.mod1.foo()
在客戶端這種方式基本是夠用的,然而問題依然存在:你無法管理依賴,所有的代碼都必須load到內存中,需要哪些模塊必須由人工處理。分模塊是工程化的產物,也是自然發展的結果,自然有很多嘗試。很顯然,模塊之間互相依賴需要編寫模塊的時候遵循一定的規范。現存的規范還真不少,不知道ES6 能否終結這場混戰:
AMD
CMD
closure
CommonJS
ES6
AMD和CMD分別是requireJS和seaJS定義的標準。使用純原生的ES5語法意味者其只能使用閉包,書寫和閱讀都很怪異。值得一提的是AngularJS也使用類似的方式,以至于Angular的作者們都受不了,決定在AngularJS 2 使用新的語言AtScript,前端輪子太多,又造了一個,好在這個輪子造的比較好,兼容ES6 TypeScript規范,扯的遠了,看看AMD長得啥樣:
AMD:
define(["./a", "./b"], function(a, b) { ... })
Closure是google出品的前端工具,Closure提供了一系列工具和庫,谷歌自己的多個項目都是使用Closure開發的。closure compiler通過模塊間依賴的聲明把所有被依賴的文件打包到一起,而且Closure的一大優勢是如果采用破壞性壓縮(ADVANCED)壓縮率極高。
//文件A goog.provide("module1") com.foo.bar = { ... } .... //文件B goog.require("module1") var a = com.foo.bar;
然而Closure并不完美,不同的文件共享同一個全局對象,所以你不得不這樣寫 a.b.c=...。
CommonJS是Node.js使用的模塊化標準。Node.js對于前端開發者來說不僅僅可以提供一個Server,還是一個完美的開發平臺,在Node上使用Grunt/gulp構建web項目是件很爽的事情。Node的模塊化聲明的方式與Closure類似,只是更進一步,天然隔離了命名空間。上面的代碼如果使用CommonJS的模塊化規范可以這么寫
//文件A module.exports = {...} .... //文件B var a = require("./foo/bar")
browserify讓使用CommonJS模塊化規范的代碼可以運行在客戶端上。(browserify原理分析)
2.靜態加載與動態加載在看ES6之前我們先看模塊加載的兩種方式:
靜態加載:在編譯階段進行,把所有需要的依賴打包到一個文件中
動態加載:在運行時加載依賴
AMD標準是動態加載的代表,而CommonJS是靜態加載的代表。AMD的目的是用在瀏覽器上,所以是異步加載的。而NodeJS是運行在服務器上的,同步加載的方式顯然更容易被人接收,所以使用了CommonJS。同樣的道理,如果靜態加載,那就使用同步的加載方式,如果動態加載就必須用異步的加載方式。
那么ES6采用何種加載機制?
ES6既希望用簡單的聲明方式來完成靜態加載,又不愿放棄動態加載的特性,而這兩種方式幾乎不可能簡單的同時實現,所以ES6提供了兩種獨立的模塊加載方法。
2.1 聲明的方式
import {foo} from module1
2.2 通過System.import API的方式
System.import("some_module") .then(some_module => { // Use some_module }) .catch(error => { ... });
再看下export的語法,與CommonJS很像,只不過沒有了module這個對象,而直接調用export。 可以export任何一個 函數,變量,對象
//expt.js export function abc(){}//export 一個命名的function export default function(){} //export default function export num=123 //export 一個數值 export obj={} export { obj as default }; //import import expt from "expt"http://default export import {default as myModule} from "expt" //rename import {abc,num,obj} from "expt"
更多細節可以看這篇文章:http://www.2ality.com/2014/09/es6-modules-final.html
目前來看,使用預編譯的方式顯然要好于使用動態加載,瀏覽器對ES6語法支持還很差,如果使用動態加載ES6,在瀏覽器端要做ES6到ES5的翻譯工作,這個顯然是重復低效的。但是隨著瀏覽器對ES6支持增強,尤其是瀏覽器實現了動態加載API后,動態加載的優勢就會展現:
更流暢的用戶體驗,動態加載可以實現類似lazyload的加載方式,將download的時間分散
更簡潔的項目,無需預編譯,項目可以少配置很多工具
HTTP/2的普及更傾向于使用多個小的請求,適合動態加載
3.實踐如果現在使用ES6,可以選擇動態加載模塊system.js 或者browserify的預編譯方法。
使用system.js+babel動態加載依賴。system.js 是ES6動態模塊加載的一個實現。寫了一個小DEMO:
項目初始化
bower install babel system.js --save
index.html
... ...
main.js
export default { sayHello : function(){ console.log("hello") } }
項目的地址在: https://github.com/stackOverMind/demo-system.js
使用gulp+browserify+babel預編譯。gulp是一個Node.js平臺上的任務管理平臺。預編譯要做很多配置,非常繁瑣,推薦使用yeoman來生成項目骨架。比如使用generator-es6-webapp。
生成非常簡單,在項目目錄中執行
yo es6-webapp
缺少依賴的化安裝依賴就好。
4.其他,關于前端化趨勢ES6模塊化意味著什么?
更強大的前端,Web技術整體前移。HTML5的發展和某些優秀瀏覽器的支持讓web技術整體前移,以前像渲染這種工作在后端進行是由于瀏覽器薄弱,且有老IE這種拖后腿搗亂的選手。
簡化編程模型,人工管理JS依賴和將多個JS打包這種工作可以不需要了,而配合WebComponents標準,開發Web將不再借助模板引擎和預編譯引擎。
前端化還有更深遠的影響--在過去瀏覽器是個工具,現在瀏覽器是個重要的工具,在未來瀏覽器就是用戶唯一的操作系統。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86170.html
摘要:而在中國,云計算也經歷了十年來風起云涌的發展歷程。在季昕華看來,中國云計算將進入指數級的增量市場,優秀的企業將在千淘萬漉之后脫穎而出。他認為就中國來看,從年進入云計算行業到現在,年間,已經沉淀了一批比較優秀的云計算企業。十年之前,云計算還屬于一門曲高和寡的新興技術,從認識到認可,隨著云計算技術發展與應用的普及,也帶來了更大的市場潛力。來自Gartner的數據顯示,到2021年,全球公共云服務...
摘要:去年,預測,云計算將從根本上加速全球企業的數字化轉型。該公司預測,到年,云計算將迎來成人時代,為企業應用程序帶來創新的開發服務,而不僅僅是提供更便宜的臨時服務器和存儲。年,云計算將堅定地確立自己的地位,并成為未來企業應用平臺的基礎設施。去年,Forrester預測,云計算將從根本上加速全球企業的數字化轉型。云計算為中小企業的成功提供了十年的動力,并為創新性企業與全球巨頭開展競爭提供了所需的工...
摘要:關于作者是軟件基金會的成員,也是巴西第一個黑客空間的聯合創始人。他曾在巴西媒體,銀行和政府部門教授開發,并在,,和上發表演講。他是一位自學成才的程序員,也是使用學習編程一系列書的作者。 showImg(https://segmentfault.com/img/remote/1460000018926735); 來源 | 愿碼(ChainDesk.CN)內容編輯 愿碼Slogan | ...
摘要:阿里妹導讀近日,螞蟻金服副胡喜應邀做了螞蟻金服十五年技術架構演進之路的演講,分享螞蟻金服對金融科技未來的判斷,并首次對外公開螞蟻金服技術人才培訓體系以及項目。 showImg(https://segmentfault.com/img/remote/1460000019158592); 阿里妹導讀:近日,螞蟻金服副CTO 胡喜應邀做了《螞蟻金服十五年技術架構演進之路》的演講,分享螞蟻金...
摘要:阿里妹導讀近日,螞蟻金服副胡喜應邀做了螞蟻金服十五年技術架構演進之路的演講,分享螞蟻金服對金融科技未來的判斷,并首次對外公開螞蟻金服技術人才培訓體系以及項目。 showImg(https://segmentfault.com/img/remote/1460000019158592); 阿里妹導讀:近日,螞蟻金服副CTO 胡喜應邀做了《螞蟻金服十五年技術架構演進之路》的演講,分享螞蟻金...
閱讀 1735·2023-04-25 19:37
閱讀 1298·2021-11-16 11:45
閱讀 2802·2021-10-18 13:30
閱讀 2763·2021-09-29 09:34
閱讀 1616·2019-08-30 15:55
閱讀 3110·2019-08-30 11:10
閱讀 1833·2019-08-29 16:52
閱讀 994·2019-08-29 13:18