為何JavaScript開發如此瘋狂的詳細程式碼
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('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應用程式— —程式有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 = '<h1>"Hello, world!"</h1>';
}
</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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
四款值得推薦的AI輔助程式工具
Apr 22, 2024 pm 05:34 PM
這個AI輔助程式工具在這個AI快速發展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設計工具能夠提升開發效率、提升程式碼品質、降低bug率，是現代軟體開發過程中的重要助手。今天大姚給大家分享4款AI輔助程式工具（而且都支援C#語言），希望對大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協作上。 Git
AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。 （註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A
學習如何利用Go語言開發行動應用程式
Mar 28, 2024 pm 10:00 PM
Go語言開發行動應用程式教學隨著行動應用程式市場的不斷蓬勃發展，越來越多的開發者開始探索如何利用Go語言開發行動應用程式。作為一種簡潔高效的程式語言，Go語言在行動應用開發中也展現了強大的潛力。本文將詳細介紹如何利用Go語言開發行動應用程序，並附上具體的程式碼範例，幫助讀者快速入門並開始開發自己的行動應用程式。一、準備工作在開始之前，我們需要準備好開發環境和工具。首
五大熱門Go語言庫總表：開發必備利器
Feb 22, 2024 pm 02:33 PM
五大熱門Go語言庫總結：開發必備利器，需要具體程式碼範例Go語言自從誕生以來，受到了廣泛的關注和應用。作為一門新興的高效、簡潔的程式語言，Go的快速發展離不開豐富的開源程式庫的支援。本文將介紹五大熱門的Go語言庫，這些庫在Go開發中扮演了至關重要的角色，為開發者提供了強大的功能和便利的開發體驗。同時，為了更好地理解這些庫的用途和功能，我們會結合具體的程式碼範例進行講
Android開發最適合的Linux發行版是哪一個？
Mar 14, 2024 pm 12:30 PM
Android開發是一項繁忙而又令人興奮的工作，而選擇適合的Linux發行版來進行開發則顯得尤為重要。在眾多的Linux發行版中，究竟哪一個最適合Android開發呢？本文將從幾個方面來探討這個問題，並給出具體的程式碼範例。首先，我們來看看目前流行的幾個Linux發行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優點和特點。
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
了解VSCode：這款工具到底是用來做什麼的？
Mar 25, 2024 pm 03:06 PM
《了解VSCode：這款工具到底是用來做什麼的？ 》身為程式設計師，無論是初學者或資深開發者，都離不開程式碼編輯工具的使用。在眾多編輯工具中，VisualStudioCode（簡稱VSCode）作為一款開源、輕量級、強大的程式碼編輯器備受開發者歡迎。那麼，VSCode到底是用來做什麼的呢？本文將深入探討VSCode的功能和用途，並提供具體的程式碼範例，以幫助讀者
Git 必知秘技：讓 Java 開發驚人全場
Mar 06, 2024 am 08:25 AM
1.分支與合併分支允許您在不影響主分支的情況下試驗程式碼變更。使用gitcheckout建立新分支，並在嘗試新功能或修復錯誤時使用它。完成後，使用gitmerge將變更合併回主分支。範例程式碼：gitcheckout-bnew-feature//在new-feature分支上進行更改gitcheckoutmaingitmergenew-feature2.暫存工作使用gitadd將您要追蹤的變更新增至暫存區。這使您可以選擇性地提交更改，而無需提交所有修改。範例程式碼：gitaddMyFile.java3
