爲什麼說 JavaScript 開發很瘋狂

時間 2019-11-17

標籤爲什麼 javascript 開發瘋狂欄目 JavaScript 简体版

原文原文鏈接

【編者按】本文做者爲 Sean Fioritto，主要闡述了 JavaScript 開發爲什麼讓人有些無從下手的根本緣由。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現。javascript

網絡開發樂趣多多！Javascript 卻……讓人望而卻步。html

網頁開發的其餘全部東西都很配合，惟獨到了 Javascript，你會感受好像比別人少了一大塊基礎知識，徹底搞不懂它。前端

事實就是，沒錯，你的確缺了幾塊拼圖。java

不過，前端開發的現狀其實也很瘋狂。react

並非只有你感到抓狂。

拉把椅子坐下來。該寫個 Javascript 應用了。webpack

首先要搭建和運行本地環境。是用 Gulp，仍是 Grunt，都很差……仍是用 NPM 腳本吧！es6

Webpack 仍是 Browserify？（很差意思地）仍是 Require.js？要升級到 ES6 嗎？在預處理中加入 Babel 是否是太過了？web

行爲驅動開發仍是常規的單元測試？應該選用哪一種斷言框架？若是能從命令行運行測試固然是好事，那何不試試 PhantomJS？npm

Angular 仍是 React？Ember 呢？Backbone 怎麼樣？瀏覽器

有些 React 文檔寫道：「Redux 是 JavaScript 應用可預見的狀態容器。」太棒了！你確定須要來一個。

爲何搭建 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 工程師編譯呈現。OneAPM Browser Insight 是一個基於真實用戶的 Web 前端性能監控平臺，可以幫你們定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。

本文轉自 OneAPM 官方博客

原文地址： http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。