跳到主要內容

無法取代的原生 - Javascript

最近幾年javascript 實在是一門進步神速的語言,從基本瀏覽器腳本語言,到HTML5 使用canvas、video、websocket、worker等,甚至是後端編譯腳本nodeJS ringoJS,當然還有許多從javascript 編寫出來的套件庫,整體來說javascript 發展的速度比我想像的還要快得多。

回顧javascript 歷史

從Netscape 發展此種語言開始,壓根不會想到javascript 會演變成現在的局面,因此在當初訂定javascript 來說,就是毫無標準可言。Javascript 對於沒有接觸過程式開發的人來說,是一種好的開始,畢竟它的容錯性高,出錯率低,簡單來說就是,開心宣告就宣告,不用宣告也可以寫出能動的程式碼!這也造就了javascript 初期開始,可以直接複製、貼上、接專案的映像。

因此由Douglas Crockford 也開始提倡起javascript: Good parts(javascript :優良部份),也發展出jslint ,提供大家作為javascript 程式碼驗證工具,會這樣子做不是沒有原因,畢竟javascript 實在是『太方便寫』,自己寫自己的,當然獨自開發這不是太大的問題,但是如果遇到大型專案時,這種充滿『重構味道』的程式碼,自然是一場不可抹滅的惡夢。

套件庫掘起

在AJAX 崛起之後,javascript 的發展就變得相當吃重,也漸漸的讓開發人員體會到前端開發的重要性。當然javascript 開發,對於前端來說還是有很多問題,光是跨瀏覽器就是個很令人頭大的問題。

因此各家開發出自己的套件、工具庫,例如YUIdojojQuery等。當然這是個很不錯得方向,專家們開發出套件,而開發者可以利用套件組裝出自己所需要的效果,瑣碎的問題交由套件處理掉,讓開發者減少開發時間與降低開發門檻。

Javascript 還是沒這麼簡單

前面的套件其實只解決了『前端開發的問題』,但是此時的javascript 已經不再是原本的javascript ,從前端到後端,甚至是指令等都可以利用javascript 來處理,例如nodeJS ,要怎麼利用javascript 寫出易讀,讓開發者容易瞭解、再利用的程式這是個難題。

coffeescriptDart兩者都屬於基於javascript 之上的產物,其目的就是為了解決『javascript 物件化』的問題,對於我來說,這兩種語言都不算是新的產物,頂多算是開發javascript 簡化工具,開發的程式結構越來越有『物件導向』的感覺,閱讀程式碼也更加簡單、優雅。

潛在的問題

萬變不離其宗,以上這幾種『工具』都是基於javascript 的變化型,根據使用套件及簡化作業的經驗來說,最終的最終還是會遇到許多不可解的問題,想要解決這些問題,或者是瞭解問題的所在,還是要去瞭解javascript ,只有根本的瞭解底層基礎運作,才是根本。

當然也許有開發者都不會碰到『地雷』,或者是『將地雷視而不見』,選擇繞路而行,雖然問題看似被解決了,事實上就變成了某種『經驗談』,或者是『它就是這樣子處理』,根本的問題還是存在著。

結語

javascript 演變至今,已經有一種越來越強大的局面,不可否認它是一種『非常糟糕的語言』,任何一種寫法都可以執行。當然隨著規範的更動,以及開發者的努力,這些問題都會漸漸被限制,規範也會越來越清楚。

當然利用套件開始自己的javascript 之路其實是不錯的事情,不管是從前端的jQuery 開始,或者是直接撰寫coffeescript 、Dart開始,都是一個不錯的方向,從門檻最低的平路開始,在一路上中後段還是會發現 - 『越不想碰的,最終還是要面對』

但至少你已經開始了這條,『不歸路』


留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。