 |
VOOZH | about |
|
VOOZH | about |
【編者按】本文作者為 Sean Fioritto，主要闡述了JavaScript 開發為何讓人有些無從下手的根本原因。文章系國內ITOM管理平台OneAPM編譯呈現。
網絡開發樂趣多多！Javascript 卻……讓人望而卻步。
網頁開發的其他所有東西都很配合，唯獨到了 Javascript，你會感覺好像比別人少了一大塊基礎知識，完全搞不懂它。
事實就是，沒錯，你的確缺了幾塊拼圖。
不過，前端開發的現狀其實也很瘋狂。
拉把椅子坐下來。該寫個 Javascript 應用了。
首先要搭建和運行本地環境。是用 Gulp，還是 Grunt，都不好……還是用 NPM 腳本吧！
Webpack 還是 Browserify？（不好意思地）還是 Require.js？要升級到 ES6 嗎？在預處理中加入 Babel 是不是太過了？
行為驅動開發還是常規的單元測試？應該選用哪種斷言框架？如果能從命令行運行測試當然是好事，那何不試試 PhantomJS？
Angular 還是 React？Ember 呢？Backbone 怎麼樣？
有些 React 文檔寫道：「Redux 是 JavaScript 應用可預見的狀態容器。」太棒了！你肯定需要來一個。
讓筆者來幫你弄明白為什麼這些看起來都這麼瘋狂。首先看個例子，然後再看漂亮的圖片。
以下是 React 的「Hello, world!」應用。
// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );這還沒完。
$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js其實中間缺了幾個步驟，比如說安裝 browserify，還有完成這些之後還要做什麼，才能讓它在網頁上運行，因為僅僅這些並不能生成一個有用的網頁。
完成這些之後，會得到一個名為 bundle.js 的文件，裡面就是新的 React Hello World 應用，包含 19374 行代碼。接下來，只需要安裝 browserify、 babelify 和 react-dom，然後衡量未知的成千上萬條代碼。
基本上就是這樣……
現在用基本的 Javascript 來寫一個 hello world 應用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Hello World</title> </head> <body> <div id="container"></div> <script> document.body.onload = function{ var container = document.getElementById("container"); container.innerHTML = '<h1>"Hello, world!"</h1>'; } </script> </body> </html>這就是全部內容。18行代碼。你可以把它們複製、粘貼到一個叫 index.html 的文件，雙擊加載到你的瀏覽器。好了。
如果此刻你對自己說：「但是，等一下，React 能做的可不止你剛才寫的那點兒小東西，你不能那麼寫 Javascript！」這話（大部分）是正確的，你很快就會發現為什麼所有東西都這麼瘋狂了。
你要創建的 Javascript 網頁應用基本上都會出現在鐘形曲線中間的某個位置。在中間位置，如果一開始你用了 React 全棧，那麼你的應用從一開始就極大地違背了設計標準。
這就是為什麼所有東西都很瘋狂。你以為你必須使用的工具大部分都是為了解決現在未出現，或者永遠都不會出現的問題。
Javascript 開發現狀讓人無措又迷惑，因為所有人並沒有意識到，在默認狀態下，他們的應用已經違背了設計標準。
你該如何開始搭建 Javascript 應用？你應該用 React 或 Angular 這樣的工具嗎？要是不用該怎麼辦？測試到底有沒有必要？還要用 Javascript 生成標記嗎？在開始搭建默認的龐大技術堆棧之前，這些都是你應該回答的問題。開始開發 Javascript 應用時，關鍵在於在鐘形曲線上選取一個點，作為你的應用最終複雜程度的上限。
坦白說，要實現這一點需要經驗。不過還是有很多 Javascript 應用可以借鑑的出發點的：Jquery 加上客戶端模板，還有一個非常簡單的構造工具，用來連接和減少生產文件（假設你的後台框架還沒有這項功能）。
如果你了解了如何正確構造 Javascript 應用，你就會逐漸明白如何、何時以及為什麼要使用框架、npm、require、webpack 或 es6，何時要寫測試，何時應該在本地測試，何時應該在瀏覽器測試，以及其他會出現的問題和麻煩。
本文系OneAPM工程師編譯呈現。OneAPMBrowser Insight是一個基於真實用戶的 Web前端性能監控平台，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問OneAPM 官方技術博客。
