為何JavaScript開發如此瘋狂的詳細程式碼-js教程-PHP中文網

首頁

web前端

js教程

為何JavaScript開發如此瘋狂的詳細程式碼

黄舟

Mar 08, 2017 pm 02:47 PM

Web開發太有趣了！但是JavaScript則…令人望而生畏。

Web開發中其他一切對你而言都是小菜一碟，但當你深入探究JavaScript的時候，不免有一種「眾人皆醒你獨醉」的悲壯——好像其他人都知道你不知道的一些大的基礎的知識內容，而這些內容可以幫助你理解所有知識。

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

並且，前端開發其實已經陷入了瘋狂。

不只是你。

拉過一張椅子，坐下來。到時間寫JavaScript應用了。

第一步是準備本機開發環境並執行。那麼使用Gulp還是Grunt，等等，不…還有NPM腳本！

使用WebPACK還是Browserify？ Require.js？提升到ES6？或過度添加Babel到你的預處理？

BDD還是常規單元測試？應該使用什麼斷言框架？當然從命令列運行測試會很好，所以也許PhantomJS也行？

Angular還是React？ Ember？ Backbone？

你看了一些React文檔，「Redux是JavaScript app可預測的狀態容器。」真棒！你一定需要那些中的其中一個。

為什麼建立JavaScript應用程式會如此瘋狂？！？

讓我來幫助你理解為什麼我要說這一切是如此瘋狂。讓我們從一個例子開始，然後轉移到漂亮的圖片。

這是React的「Hello, world!」應用程式。

// main.js
var React = require(&#39;react&#39;);
var ReactDOM = require(&#39;react-dom&#39;);

ReactDOM.render(
  <h1 id="Hello-nbsp-world">Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
  );

沒有完全完成。

$ 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應用程式— —程式有19,374行程式碼。而你只需要安裝browserify，babelify和react-dom，考慮到未知的成千上萬行程式碼。

所以基本上這是…

Marc幾乎已經準備好實施他的「Hello World」React app pic.twitter.com/ptdg4yteF1

#—— Thomas Fuchs（@thomasfuchs）2016年3月12日

#下面就讓我們用樸實無華的JavaScript程式碼寫一個Hello World app。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <p id="container"></p>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = &#39;<h1 id="Hello-nbsp-world">"Hello, world!"</h1>&#39;;
     }
    </script>
  </body>
  </html>

這就成了。 18行程式碼。你可以複製/貼上到index.html檔案中，雙擊並把它載入到你的瀏覽器中。完成。

如果此時你覺得，「等等，React能做的事情比你剛剛寫的這個小玩意更多，而且你不可能用那種方法寫一個JavaScript app！」你是（大多數時候）對的，但你還需要走一小步才能理解為什麼一切都瘋了。

下面是我承諾過的圖片。

絕大多數你將要工作的JavaScript web應用程序，會落在鐘形曲線中部的某個位置。而且在中部，如果你從一個完整的React堆疊開始，那麼從一開始你就大量過度設計了你的應用程式。

這就是為什麼一切都變得瘋狂。其中大多數的工具你覺得是你解決問題所必須具備的，但是你一直沒有碰到這樣的問題，而且以後你也不會碰到。

同一張圖片：

因為在預設情況下，每個人都過度設計他們的app，卻意識到這一點，使得Javascript的開發狀態變得過於繁冗。

你該如何啟動JavaScript應用程式？是否應該使用一些類似React或Angular的工具？是否應該使用軟體包管理器？如果你不這樣做，你該做什麼？測試有必要嗎？是否應該用Javascript產生標記？所有這些都是你應該在啟動預設情況下的龐大的技術堆疊前，好好問問自己的問題。

當你啟動一個JavaScript應用程式時，關鍵是要在鐘形曲線上挑一個點，這個點剛好位於你認為這個app最終可能會到達的複雜程度的前面。

我不會說謊，驗證這一切都需要經驗。但這裡有一個相當大的甜蜜點可以讓你啟動大多數的JavaScript應用程式：jQuery加上客戶端模板，以及用於連接和縮減產品文件超級簡單的構建工具（假如你的後端架構還沒有這樣做的話）。

如果你知道如何正確地建立Javascript app，那麼你就會開始懂得如何、何時以及為什麼使用框架或npm/requir/webPack或ES6，什麼時候編寫測試，什麼時候應該費心讓你的測試本地運行vs.運行在瀏覽器中，等等，所有這些問題都會湧現出來。

有興趣用你的JavaScript開發知識填補那些空白？想要避免不堪重負的感覺以及避免在這個過程中大量過度設計你的JavaScript應用程式？那是我之後將要專注討論的內容，敬請期待！

以上是為何JavaScript開發如此瘋狂的詳細程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles