WEB:不用任何框架開發 Web 應用程序：可能嗎_HTML

過去流行的是Angular，然后是React，現在是Vue

</ul>。

模板中的條件或循環語句該怎么辦？且不說這可能從來都不是一個好主意，你可以只用JS來實現邏輯，然后使用上面的技術將結果插入到模板中。

事件

現在，我們有了基本的模板，那么該如何將事件綁定到DOM節點呢？這里也有幾種選擇：

HTML事件處理器代碼可以被插入到HTML源代碼中，但這并非最好的辦法，因為指定的處理器只在指定的范圍內可用。

事件處理器API可用于所有通過DOMAPI或HTML標記模板字面量函數創建的節點。

那么定制或業務事件該怎么辦？如果我需要對應用程序的某個組件觸發的一些事件作出反應該怎么辦？這里也有多種處理方式：

自定義事件：你可以通過擴展EventTarget來創建自己的事件類，并派發或監聽它們，就像“標準”事件一樣。

理論上說，使用EventEmitter也是一種辦法，但它很少被使用。

觀察者模式：你可以構建自己的觀察者，也可以考慮使用RxJs，它是這方面的標準。你只需要構建一個Subject，并在發生事件時通知所有訂閱者，讓訂閱者對事件做出反應。

組件

雖說開發普通的應用程序不同于開發復雜的基礎設施，但如果一些東西在系統中會多次出現，那么將它們設計成可重用組件仍然是一個好主意。無論你使用何種技術，也無論是業務還是技術，一定程度粒度的抽象仍然是有用的：將與同一業務概念相關的數據和規則封裝成一個可重用的對象，或者構建可以在應用程序多個地方進行實例化的小部件，總歸是個好主意。

ECN以太坊中文社區Esther：以太坊2.0不用等3-5年:2020年12月30日下午3點，火幣尖峰對話《12.30火幣尖峰對話：為什么我們如此需要以太坊2.0以及它現在到底怎么樣？》主題線上活動在社群舉行。ECN以太坊中文社區負責人Esther表示，以太坊2.0的新路線圖是“可執行PoS信標鏈+數據分片+layer2”的架構，可能加速ETH2.0的步伐。根據Vitalik的說法，輕客戶端支持在2021年實現沒有問題；合并和分片可能在2021年末迎來成熟的測試網版本，因為我們需要等待PoS信標鏈在產品環境中平穩安全地運行較長一段時間，同時不斷進行合并測試。

以太坊社區一向是穩中求進，比起更新速度更加注重整個網絡的穩定性和安全性。總的來說，新路線圖縮短了ETH的鎖定周期，提前為以太坊帶來數千倍的吞吐量，加速了以太坊2.0完全可用的步伐，很可能將不再需要等待3—5年。[2020/12/30 16:05:52]

創建組件的方法有很多，具體視自己的需求而定。早在2017年，Mev-Rael就提出了很多技巧，用于處理JavaScript組件的狀態、自定義屬性和視圖。當然，我們不要拘囿于別人推薦的技術，而是要先考慮自己的需求，然后再選擇合適的技術。

除了標準的小部件組件，任何一個組件都應該能夠：

將邏輯和視圖拆分開。把它們混合在一起通常會導致代碼不易于維護，還會降低靈活性。

參數化組件的行為或視圖。

通過觸發事件的形式通知訂閱者組件中發生了某些事件。

同步：如果發生一些事件，組件應該能夠進行重繪。這個使用反應式開發庫可以很容易實現。

聲音 | SEC委員：比特幣ETF可能在明天或20年后到來 不用在其上耗費太多精力:據coincryptorama報道，“加密媽媽”美國證券交易委員會（SEC）委員Hester M. Peirce在華盛頓數字資產投資論壇的一次爐邊談話中表示，對比特幣ETF不要太看重，它可能會在明天到來，也可能是20年后，所以不用在比特幣ETF上耗費太多精力。[2018/12/6]

在任何情況下，無論你選擇了什么樣的設計策略，你的組件都必須能夠提供一些HTML渲染結果。你可以使用包含HTML代碼的字符串，但HTMLElement通常是更好的選擇，而且性能更好。

此外，你可能希望使用來自第三方的外部組件。由于專有框架的流行程度較高，它們可以更大程度地利用社區開發的庫和組。它們中的大多數實際上與純JS實現的特性并沒有太大不同，但問題是，它們缺乏互操作性，所以到最后你會發現自己需要的其實是純JS或Web組件。

所幸的是，這樣的庫確實存在，比如VanillaJSToolkit，盡管可能不太常見。在Web組件方面，webcomponents.org列出了2000多個元素。甚至還有普通的Web組件，只是它們與我們要討論的不太相關。

路由

在SPA中管理路由需要使用WebHistoryAPI。雖然這并不復雜，但你仍然可能希望將其委托給簡單的路由器庫，如Navigo。

你所要做的就是在路由時用一個DOM元素替換另一個DOM元素。

延遲加載

按需加載JavaScript代碼是任何一個Web應用程序都需要考慮的問題。你一定不希望為了顯示一個登錄界面而加載全部的應用程序代碼。

聲音 | 杭州互聯網法院院長：上線司法區塊鏈 讓打官司“一次都不用跑”:據浙江在線消息，杭州互聯網法院院長杜前表示，作為全國首個互聯網法院，杭州互聯網法院創新審判模式，上線全國首個電子證據平臺和司法區塊鏈，解決電子證據存取證難題。“杭州互聯網法院的不斷拓荒，把莊嚴的現實法庭直接‘搬’到了網絡虛擬空間，真正讓打官司一次都不用跑”，杜前補充道。[2018/11/5]

早在2009年，在Web框架出現之前，JamesBurke就發布了RequireJS來解決這個問題。從那時起，隨著模塊化的出現，出現了更多的技術。從ES6開始，我們可以動態加載代碼。在Node中可以，在瀏覽器中也可以：

那么如何將模塊分拆到單獨的文件中？打包器可以為你做這些工作。

需要注意的是，在導入路徑里你應該只使用常量，否則打包器就無法猜到你想要加載什么，就會將所有可能的文件都打包在一個文件中。例如，awaitimport(./welcome/${moduleName})將把所有東西都打包到指定的目錄中，因為打包器不知道變量moduleName在運行時會是什么。

原生應用程序

越來越多的框架為原生平臺提供了運行、遷移或編譯應用程序的方法，以便將它們作為獨立應用程序部署到Android或iOS移動系統上。

除了考慮開發真正的原生應用程序之外，更普遍的解決方案是將Web應用程序嵌入到原生容器中，比如之前的PhoneGap或ApacheCordova，現在的NativeScript，或者像Electron這樣的原生Web應用程序包裝器，或者Electron的輕量級后繼者Tauri。

聲音 | Martin Hellman：區塊鏈很有潛力但不用過度熱捧:據中國寧波網報道，美國密碼學家，非對稱加密的創始人Martin Hellman近日表示：“區塊鏈的確是一項非常有潛力的技術，但目前仍有很多新技術能替代其作用，不用過度熱捧區塊鏈概念。[2018/9/7]

服務器端渲染

很多框架在前端和后端運行的代碼是相似的，這樣更容易實現對SEO友好的服務器端渲染。

這可能是一個又酷又便利的特性，但需要注意的是，它也可能導致服務器鎖定。因此，在向應用程序引入框架鎖定之前，你需要考慮它對項目、基礎設施、客戶端技術等方面的影響。

所幸的是，你也可以在不使用框架的情況下實現這個特性。

從服務器端渲染

采用普通的實現方案在一開始看起來很簡單：不就是返回HTML嗎？是的，你已經有現成的組件了，但是：

你還需要一個服務器端DOMAPI，因為默認情況下，服務器端不提供DOMAPI。

你的渲染組件不能假設是DOM是在客戶端或服務器端，也就是說，不要使用全局DOM，因為在服務器端，每個請求都需要一個DOM。要做到這一點，你需要從應用程序上下文中選擇DOM對象，而不是直接獲取。

在客戶端和服務器應用程序之間共享渲染組件有多種辦法，比如將其發布在包存儲庫中，但最靈活的應該是讓應用程序包引用monorepo中的模塊。

添加交互性

然而，一旦HTML元素被轉換成字符串，在這些元素上設置的所有事件處理器都丟失了。為了恢復交互性，你需要一些“補水”步驟，也就是注入腳本，讓它們在客戶端執行。框架因其普適性很難做到這一點。就拿影子DOM來說，它們不斷嘗試改進算法，希望能夠以最聰明的方式做到這一點，但如果我們把問題縮小到應用程序層面，就會變得簡單很多。

V神：現在不用對與其價值觀有悖的事情妥協:V神今晚在王峰十問上表示：“對我個人來說，財富增加對我的生活沒有太多變化，只是我不需要為了花費兩美元乘巴士這些瑣事擔心。現在不用把時間浪費在賺錢上，而是可以專注于創造我認為有價值的東西。而且，對于那些和我價值觀有悖的事情，我也用不著妥協。”[2018/6/22]

當然，在普通的服務器應用程序中做到這一點也意味著需要將JS腳本注入到響應消息中。

普通的解決方案讓你可以控制在哪里、什么時候以及附加哪些東西：你可以先只發送HTML，再加載基本的交互性JavaScript，然后加載更多，等等。

這比本文中提到的任何一個東西都簡單，因為它們是應用程序代碼，而不是通用的框架代碼。

國際化

多年來，國際化問題都是通過庫來處理的。要自己集成這些庫也很容易，但你也可以選擇自己實現一個，因為與通用庫相比，自己的實現可以支持更簡單、更有效的消息類型。

這里為你提供了：

類型檢查：每個消息都有一個靜態類型，所以IDE可以檢查你是否使用了有效的消息屬性，并為你提供自動補全功能。

翻譯完整性檢查：在為所有消息鍵提供所有語言的翻譯之前，無法通過編譯。

你所需要做的就是實例化與用戶語言環境相關的消息類。通用庫不會提供這種特定于業務的消息類型。

工具

如果你想要擺脫對強約束性軟件技術棧的依賴，那你很可能也想擺脫對工具的依賴：你不希望只有靠著它們才能向前走。你不希望被一個你無法解決的構建問題所困擾。

話雖如此，你仍然很難避免使用這些工具。大多數情況下，你的產品代碼必須以某種方式打成包，包括縮小體積、混淆、代碼拆分、搖樹優化、延遲加載、包含樣式等。毫無疑問，現有的打包工具如Webpack、Parcel、ESBuild或Vite會做得比你更好。

你所能做的是：

盡可能少用轉譯。例如，使用TypeScript可能是件好事，但它會帶來額外的復雜性，你的工具鏈中必須有相應的工具來處理這種復雜性。CSS也一樣，特別是最新版本，不值得你用預處理器來處理它們。

盡可能少用工具。你用的工具越多，就越有可能出問題或無法滿足你的需求。

如果確實需要使用工具，請選擇最流行的工具，因為它們經過實戰測試，更有可能滿足你的需求。過早使用最新的打包工具可能會為你節省幾秒鐘的構建時間，但這些時間很可能都不夠用來理解工具文檔、處理bug或處理因缺乏支持而導致的問題。

最大的挑戰

說到底，最大的挑戰不是技術上的，而是關于人的：

你要走出舒適區。希望你終將能夠明白，使用普通的解決方案并不是那么困難，框架的復雜性比它們帶來的好處要大得多。此外，你可能會看到更多新的API，而且Web比你想象的更現代、更強大。

至于其他人，你可以嘗試說服他們。他們可能不愿意這么做，因為任何人都不愿意開啟自己從未嘗試過的旅程。

其他人可能會跟你說：

“你要開發自己的框架”：不，我們要開發的是應用程序，而不是框架。

“你要寫更多的代碼”：也許，但也許不會太多，因為這需要與框架的樣板代碼進行比較。但不管怎樣，需要加載的代碼都會更少。

“你將不斷地重新發明輪子”：當然不是。不使用框架是為了不遵循它們預定義的規則，但我們并沒有忘記DRY原則，我們仍然可以使用經過實戰測試的第三方庫。

“你需要為每一個功能寫更多的代碼”：不，你可以遵循自己的規則，而不是使用框架樣板代碼。

“沒有文檔可看”：肯定不會有框架文檔，但你仍然需要寫應用程序文檔。值得一提的是，使用模式有助于你自動文檔化你的軟件設計。你只需要關心應用程序的代碼文檔，而如果你多使用一個框架，就需要多看一份文檔。

“不會有約束或模式來指導開發人員”：不，如果你確實需要約束，沒有什么能阻止你。

“你會錯過性能提升”，比如曾經被大肆炒作的虛擬Dom：不，因為需要這些“性能提升”的是框架本身，而不是應用程序。相反，通用框架更有可能錯過一些可以通過自定義代碼實現的性能提升。

你遇到這個問題是因為你沒有使用框架。每一個問題都會被歸咎于因為沒有使用框架。因為大多數開發人員的經驗是，所有正常運行的東西都使用了框架，默認情況下，不使用它們將被認為是有風險的。一旦出現問題，無論是否與不使用框架有關，這個假設都會被認為是正確的。他們忘記了在使用框架時也會遇到類似的問題。

“我們找不到開發者”：他們會說很難找到能夠寫純JS代碼的開發者。這句話是對的，也是錯的。因為很多開發者會發現自己更習慣于使用框架。如果他們從來沒有使用過或不了解基本的WebAPI，那么他們可能會對從零開始構建一個Web應用程序感到害怕。但是，如果你想要開發高質量的應用程序，就不應該去找這種類型的開發者。當然，現在找React開發者很容易，但你需要的不只是React開發者，而是優秀的開發者。

“你無法獲得與框架相同的代碼質量”。當然，框架或開發庫通常是由行業里有經驗的開發者編寫的。但是，框架的代碼主要與框架特定的活動相關，與你的應用程序無關。此外，即使使用了框架，你仍然可能做出糟糕的設計，寫出糟糕的代碼。應用程序的質量總是更多地取決于團隊的質量，而不是因為缺少框架。

“你無法獲得與框架相同的性能”：不，我們可以獲得更好的性能。行業里關于框架采用了可以“提升性能”的復雜技術的說法就不在這里討論了，因為它們可能主要被用來解決框架通用解決方案的性能缺陷。

毫無疑問，性能最好的框架是那些在普通代碼之上添加層數較少的框架。框架的“優化”更多的是為了彌補框架本身的開銷。

結??論

不使用框架構建Web應用程序并非意味著要自己構建框架，它是關于在不使用通用引擎的情況下開發應用程序，目的是：

避免散失控制和被隱含約束；

可以進行優化。

也就是只編寫特定于應用程序的代碼，包括使用開發庫。你真正應該關注的框架是你自己的框架，也就是那個特定于應用程序的框架。這是真正的“專注于業務”，也是最有效的。

這并沒有你想象的那么難，特別是有了現代標準的加持。

Tags：WEBDOMHTMHTMLWebuySwim Spread WisdomHTML價格HTML幣

MATIC