歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 前端應用能從Node.js學到什麼

前端應用能從Node.js學到什麼

日期:2017/3/1 9:19:53   编辑:Linux編程

Will Binns-Smith是一位熱愛JavaScript的全棧工程師,喜歡通過技術來解決實際問題。他開發了Bonobos.com的前端購物車功能。Will喜歡與設計師一對一工作,將PC網站轉換為針對更小的觸摸設備的站點。近日,Will撰寫了一篇 文章 ,談到了Node.js有哪些做法和特性值得前端應用學習。

在 Web平台能從Node.js學到什麼 這篇文章中,我們探索了由開發者為開發者所創建的小范圍抽象所帶來的好處。在這篇文章中,我們來了解如何以及為何應該將這種開發風格引入到你自己的Web前端中。

選擇你自己的方式

作為小模塊的用戶,如果你不接受依賴所做的變動,那麼你可以換另一個依賴。也許應用會使用某個模塊的新版本(比如說2.x),而應用的另一個依賴使用的卻是老版本(比如說1.x)。在Node中,由於依賴的查找是從鄰近的node_modules目錄開始,然後沿著文件系統逐級向上,即便需要不同版本號的相同模塊,這種方式也是可以滿足需求的。如果版本匹配,那麼只會使用一個副本。

浏覽器中的npm模塊?這難道不是Node的事情?

你可能想知道如何能在不使用成百上千個script標簽或是不在RequireJS配置文件中使用那麼多條目的情況下維護如此多的依賴。也許你還想知道如何在浏覽器中使用來自於npm的模塊輕松創建SVG元素。諸如 Browserify 與 Webpack 等現代工具讓這件事成為了可能,他們會通過Node所用的相同的CommonJS require語句來追蹤應用的依賴圖。他們使得一個大型包文件中的模塊彼此可見,而你在頁面中則可以通過單個script標簽將其引入進來。

另一個常見問題就是這麼做會不會增加向浏覽器傳送的JavaScript文件大小。在新版的npm中,這種模塊樹采用了扁平形式,同時又會向應用中的每個依賴提供所需的版本。借助於這種方式,你不會傳遞任何不需要的庫的副本,同時又能滿足每個模塊的要求。此外,還有一個名為 rollup 的更加新穎的包管理器,它使用了ES2015模塊格式,只打包你所導入的模塊的子集。

我所認識的很多人都對將多個jQuery版本放到浏覽器中這個想法感到驚訝。沒錯,這麼做確實有些恐怖,雖然做了精簡與gzip壓縮,但jQuery依然會有30KB的大小。不過,傳輸2個、3個、甚至4個2KB大小的庫的副本相比起來卻是微不足道的,特別是這麼做能夠避免手工解析依賴和升級jQuery以及安裝的那些插件。即便如此,你也只應該在應用中包含了很多模塊,並且這些模塊又依賴於很多不兼容模塊的情況下才這麼做,因為 npm 3在默認情況下會盡可能打平模塊目錄 。你可以通過簡單的安裝隨意使用npm注冊的100,000多個模塊。

界限在哪裡

我們先來了解一些術語:包指的是可以發布到npm注冊中心或是通過git倉庫使用的單元。不過在CommonJS中,模塊與文件是一一對應的。因此,一個包可以包含多個模塊,不過通常情況下,一個npm包本身就是一個模塊。

定義包的職責是最困難的一件事。如果包的范圍過大,那麼就會出現破壞性的改變,其後果就是破壞了生態圈。與之類似,如果一個包有很多依賴,那麼破壞性的改變與Bug就會導致整個系統出現級聯更新,無論開源還是內部使用都是如此。在設計包的范圍時,一個好的原則就是軟件 組件的內聚性 。本質上,如果幾個組件會一同變化,那麼他們就應該屬於同一個包。如果不是,那就請抽取出來!

請記住,借助於npm與大多數包管理器,一個包不一定需要一個專門的倉庫。如果過多的Pull Request的負擔阻礙了發布新模塊的流程,那就請考慮創建新的倉庫,同時發布每一個包。Babel是個開源的JavaScript編譯器,它通過這種方式在單個倉庫中維護了100多個包,極大地提升了效率,同時又將每個包發布到了npm中。

值得注意的是,Bower(另一個JavaScript包管理器)的一個限制是它使用Git倉庫(或是tarballs)作為接收模塊代碼的方式,因此它需要為每個包都創建一個倉庫。我的建議則是 使用npm 。

嘗試

通過小模塊來構建應用要比你想象的簡單多了。你的應用可能已經有了很多抽象,確定哪些抽象應該擁有自己的包其實是個很困難的事情。首先,如果只抽象了平台,並且提供通用目的的門面,那麼最好提供一個開源的包。諸如GitHub與Bitbucket等服務都非常適合於這一點,如果使用的是Node或是浏覽器,那麼你當然應該將自己的工作成果發布到npm注冊中心了。當然,其他語言的生態圈也擁有自己的包管理解決方案。

如果應用為內部業務邏輯提供了可重用的抽象,比如說對內部服務或是API的包裝器,那麼組織中的其他人就會從獨立的包中獲益匪淺。在Atlassian,我們有很多小型的JavaScript客戶端來訪問報表或是分析等服務。此外,還有一個通用目的的包,它用於在新產品中快速開始Atlassian Connect的實現。對於源代碼管理來說,我的建議是不要以每個倉庫作為基礎,這樣才能創建出由很多小模塊所構成的內部生態圈。Bitbucket Cloud與Bitbucket Server都可以隨著團隊規模的變化而水平擴展。在發布包時,npm在其雲服務上提供了私有模塊,並且提供了自托管的服務,從而作為源代碼倉庫管理的一個有益補充。你甚至還可以通過Bitbucket Cloud倉庫來方便地安裝npm模塊:只需執行命令npm install bitbucket:user/repo即可。

一旦擁有了很多小模塊,你就可以對其設計進行迭代,將其組合起來構建出更高層次的抽象。你可以無所畏懼地破壞APIs,因為現代工具與語義化版本可以確保消費者能夠從中作出選擇,所有一切都會快速演進。這才是變化的真正意義。

下面關於Node.js的內容你可能也喜歡

在 Ubuntu 14.04/15.04 上安裝配置 Node.js v4.0.0 http://www.linuxidc.com/Linux/2015-10/123951.htm

如何在CentOS 7安裝Node.js http://www.linuxidc.com/Linux/2015-02/113554.htm

Ubuntu 14.04下搭建Node.js開發環境 http://www.linuxidc.com/Linux/2014-12/110983.htm

Ubunru 12.04 下Node.js開發環境的安裝配置 http://www.linuxidc.com/Linux/2014-05/101418.htm

Node.Js入門[PDF+相關代碼] http://www.linuxidc.com/Linux/2013-06/85462.htm

Node.js開發指南 高清PDF中文版 +源碼 http://www.linuxidc.com/Linux/2014-09/106494.htm

Node.js入門開發指南中文版 http://www.linuxidc.com/Linux/2012-11/73363.htm

Ubuntu 編譯安裝Node.js http://www.linuxidc.com/Linux/2013-10/91321.htm

Node.js 的詳細介紹:請點這裡
Node.js 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved