爲啥作 JS 開發很瘋狂？？？

時間 2021-01-11

標籤 html 前端 react web npm 後端瀏覽器 babel 架構 app 欄目 JavaScript 简体版

原文原文鏈接

Web開發時頗有趣的~可是Javascript確是……使人生畏的。html

Web開發中其餘一切對你而言都是很簡單的，可是當你深刻探究Javascript的時候，就會有一種「衆人皆醒你獨醉」的感受，好像你不知道其餘人都知道的一些重要的基礎知識內容，而且這些內容能夠幫助你理解全部知識。前端

事實是，的確如此，你遺漏了一些解決問題的重要片斷。react

而且，前端開發確實已經進入了瘋狂的狀態了。web

不只僅是你。npm

拉過一把椅子，坐下來。是到開始寫Javascript應用的時間了。後端

第一步是搭建本地開發環境並跑通它。那麼是使用 Gulp？仍是 Grunt？等等，好……好像還有 NPM script！瀏覽器

WebPACK？仍是 Browserify？（羞澀的）Require.js？升級到 ES6？或者爲你的項目添加 Babel 支持？babel

BDD 仍是常規的單元測試？應該使用什麼斷言框架？從命令行運行測試顯然很棒，因此 PhantomJS 也是不錯的選擇？架構

Angular 仍是 React？仍是 Ember？再或者 Backbone？app

你看了一些 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 便可，它們會幫你生成成千上萬行的你不瞭解的代碼，想一想吧。

因此基本上是像下面這樣的：

Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1

— Thomas Fuchs (@thomasfuchs) March 12, 2016

好，下面就讓咱們用簡單的 Javascipt 代碼寫一個 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 web應用程序，會落在鐘形曲線中部的某個位置。必定會在中間部分，若是你從一個完整的 React 堆棧開始，那麼從一開始你就過分設計了你的應用程序。

這就是爲何一切都變得瘋狂。其中的大多數工具你以爲是你解決問題所必須具有的，可是你一直沒有碰到這樣的問題，並且之後你永遠也不會碰到。

同一張圖片：

由於在默認狀況下，每一個人都過分設計他們的應用，他們卻意識不到這一點，使得 Javascript 的開發狀態變得過於繁冗。

你應該如何啓動 Javascript 應用程序呢？是否應該使用一些相似 React 或 Angular 的工具？是否應該使用軟件包管理器？若是你不這樣作，你應該作什麼？測試有必要嗎？是否應該用 Javascript 生成標誌？全部這些都是你應該好好問問本身的問題，在啓動默認的龐大的技術堆棧以前。

當你啓動一個 Javascript 應用程序時，關鍵是要在鐘形曲線上挑一個點，這個點恰好位於你認爲這個應用最終可能會到達的複雜程度的前面。

我不會撒謊，驗證這一切須要經驗。可是這裏有一個不錯的點可讓你啓動大多數的 Javascript 應用程序：jQuery 加上客戶端模板，以及用於鏈接和縮減產品文件超級簡單的構建工具（假如你的後端架構尚未這樣作的話）。

若是你知道如何正確地構建 Javascript 應用程序，那麼你就會開始懂得怎樣、什麼時候以及爲何使用框架或 npm/requir/webPack 或 ES6，何時編寫測試，何時應該費心讓你的測試本地運行，何時運行在瀏覽器中，全部這些問題都會搞定。

有興趣用你的 Javascript 開發知識填補那些空白？想要避免不堪重負的感受？想要避免在這個開發過程當中過分設計你的 Javascript 應用程序？那是我下個月將要專一討論的內容，因此，敬請期待，在一兩週後會有更多幹貨到來！

相關標籤/搜索

每日一句

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