免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

寫了十年JS卻不知道模塊化為何物?

模塊化這個問題并非一開始就存在,WWW剛剛問世的時候,html,JavaScript,CSS(JS和CSS都是后來在網景被引進瀏覽器的)都是極其簡單的存在,不需要模塊化。

創新互聯是專業的廣饒網站建設公司,廣饒接單;提供網站設計、做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行廣饒網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

模塊化的需求是規模的產物,當web page進化到web application,瀏覽器端處理的邏輯越來越復雜,展現的樣式和動畫越來多,對于工程的要求也就越來越高。于是模塊化的需求也就產生了。模塊化的意義:

  • 組件的復用,降低開發成本和維護成本
  • 組件單獨開發,方便分工合作
  • 模塊化遵循標準,方便自動化依賴管理,代碼優化,部署

JavaScript長久以來被認為是簡單的腳本語言,實際上情況早就發生來變化,在最新版的JavaScript是通用編程語言而不是腳本語言。腳本語言,比如shell并不是用來完成復雜功能的,只是用來做一些自動化控制,是不需要模塊化的。而用于構建復雜系統通用編程語言(比如Java)一般都有模塊的實現。

1.模塊化標準

ES6之前,JavaScript并沒有原生的模塊機制,好在JavaScript非常靈活,有很多種寫法可以將代碼天然隔離,起到模塊化的功能:

//define

var  modules  =  {}??

modules.mod1  =  {??

??foo  :  function(){...},

??bar  :  function(){...}

??...

}     //歡迎加入前端全棧開發交流圈一起學習交流:1007317281

//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  =  {??

 ...

}     //歡迎加入前端全棧開發交流圈一起學習交流:1007317281

//文件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模塊化規范的代碼可以運行在客戶端上。

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  =>  {

????????...

????});           //歡迎加入前端全棧開發交流圈一起學習交流:1007317281

再看下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'//default export??

import  {default  as  myModule}  from  'expt'  //rename??

import  {abc,num,obj}  from  'expt'

目前來看,使用預編譯的方式顯然要好于使用動態加載,瀏覽器對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
????<script src="/bower_components/system.js/dist/system.js"></script>

????<script>

??????System.config({

??????????baseURL  :  "/scripts",

??????????transpiler  :  'babel',

??????????map  :  {

????????????babel:'/bower_components/babel/browser.js'

??????????}

????????}             //歡迎加入前端全棧開發交流圈一起學習交流:1007317281

??????)

??????System.import('main.js').then(function(m){

????????m.default.sayHello()

??????})

????</script>
main.js

export  default  {??

??sayHello  :  function(){

????console.log('hello')

??}

}

使用gulp+browserify+babel預編譯。gulp是一個Node.js平臺上的任務管理平臺。預編譯要做很多配置,非常繁瑣,推薦使用yeoman來生成項目骨架。比如使用generator-es6-webapp。

生成非常簡單,在項目目錄中執行

yo es6-webapp

缺少依賴的化安裝依賴就好。

4.其他,關于前端化趨勢

ES6模塊化意味著什么?

更強大的前端,Web技術整體前移。HTML5的發展和某些優秀瀏覽器的支持讓web技術整體前移,以前像渲染這種工作在后端進行是由于瀏覽器薄弱,且有老IE這種拖后腿搗亂的選手。

簡化編程模型,人工管理JS依賴和將多個JS打包這種工作可以不需要了,而配合WebComponents標準,開發Web將不再借助模板引擎和預編譯引擎。

前端化還有更深遠的影響--在過去瀏覽器是個工具,現在瀏覽器是個重要的工具,在未來瀏覽器就是用戶唯一的操作系統。

感謝您的觀看,如有不足之處,歡迎批評指正。
**獲取前端資料

當前文章:寫了十年JS卻不知道模塊化為何物?
分享URL:http://m.newbst.com/article4/ijsioe.html

成都網站建設公司_創新互聯,為您提供標簽優化Google品牌網站制作服務器托管小程序開發微信公眾號

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

商城網站建設