序
就個人開發而言，當前的前端開發環境是一個比較混亂的狀態，
- 用戶對產品要求的提高，技術為了滿足用戶的需求不斷的進步，引入了很多專業性的知識，然而這點卻不是阻礙web開發的門檻，每個入門開發者選擇web開發，是因為它具備更多專業性，更多可能性，更多包容性，
- 較高的門檻，學會并掌握了html，css，js，卻不能做出主流的東西出來，個人覺得原因在于webapp的流行，各種框架的興起，框架層互相競爭，引入專屬于自己的知識，從而提高了門檻，
- 各種框架自立門派，寫法和思想理念互不兼容，與剛入門時學習的前端知識分歧比較大，導致無法很好的直觀的去理解，等到正常業務開發使用的時候，就會顯得力不從心，
- 較快的專案迭代速度，需要開發人員快速的開發出產品，逐漸的大家都采用了統一的組件，但各種組件庫互不兼容，捆綁于不同框架，如果切換一個框架，就會導致之前的組件使用經驗要從頭積累，很難積累更本質的知識和經驗，最后淪為只會使用別人組件，然后對著組件檔案開發，修改細節的時候苦思冥想，到頭來，無法系統的提高自身全面水平，
- 前端的延伸，nodejs帶來的前端革命，每個框架帶來自己的腳手架，這個東西有利有弊，雖然提高了作業效率，但腳手架配置的門檻讓人嘆為觀止，而當完全理解了腳手架配置和里面的思想理念后，是否會對個人前端開發技術來個飛躍性的調高呢？
當前各種前端框架都稱自己先進的理念，能夠彌補當前web開發的各種不足，如果拋離這些框架，拾起最原始的開發， 能否做到和使用前端框架的web一樣優秀，甚至更好呢？個人覺得這是肯定的，
需求
-
為了可以非常方便的修改并且應用到別的框架中，或者能把其它框架的代碼修改成適合當前使用的，并同時也能使用以前的各種優秀的功能代碼，直接把它集成到該專案中并且使用，這里只需要盡量淺封裝，保留原始web開發程序、保留最初的css特性、html特性以及不修改js原有的用法，在這基礎上還能挖掘基本特性，引申出更多擴展，
-
為了兼容更多的瀏覽器，應該采用統一的api，開發人員使用經過封裝后的一致的功能，封裝后，對不同版本的瀏覽器進行兼容，保持整體一致的開發思想，每次更新迭代的時候不會影響以前的代碼，
-
以內容為先，任何一個框架， 都應該為用戶更好的開發內容而服務的，不應該去影響用戶的開發，并設立不同的障礙，或者只能通過hack手段來實作，
整體思想
-
市場上的mvvm框架盛行，大吹自身的便利性， 然而在處理精細細節的時候，要定義特別的控制變數，明明可以通過dom幾行代碼搞定，再加上好多人有時在談論：“我做什么專案都沒有操作到dom”，頓時讓人覺得dom是非常難以理解的東西，在瀏覽器實作高度一致的現今，dom規范已經非常的一致，而且個人覺得dom的api是非常合理實用的，合理的使用可以讓產品性能更加好，因此，這可以算是以dom操作為核心的框架，包括后續引入的組件以及圖表，都是為了能更好的在使用上貼近dom使用，因為可視化的內容都是通過dom來展現的，dom的理解以及靈活使用會影響到使用者最終的呈現，
-
作為一個單頁面框架，采用合理靈活的頁面結構來應對不同的場景是特別重要的，思考以往的頁面架構，通常有一部分是固定不變（變動很少）, 另一部分頻繁更改， 當我們把不變的抽出來作為公用的時候，在某個特定的場景，需要對不變的部分進行大動，最后導致整體結構大改，打破了初始的概念，無論是不變的部分，還是經常變動的部分，在框架中，我統一用Page物件來定義， 一個webapp可以有很多個Page物件，不變的部分假定只有一個，經常變動的部分可以有很多，并隨著業務更改而更改，通過用一個App物件來管理Page物件，處理路由，處理全域與dom無關的一切事務，因此一個webapp，至少由一個App物件和兩個Page物件組成，如下圖
-
事件機制：對整體webapp做了分層管理后，不同物件的互動不能直接呼叫，比如不變的Page不知道經常變動的Page是什么，因此引入了事件處理機制，基本原理與dom事件基本思想基本一致，類似于：你對某個元素監聽了點擊事件，用戶點擊(特殊場景)觸發了該事件，執行了某些行為，如果你沒有監聽，那么什么也不會發生，事件的引入讓不同的物件間的關系耦合度變低，提高了維護性和移植性，
優點
-
js部分是由es5開發完成，因此可以不做任何處理，就能直接在現有的瀏覽器中運行，如果單獨要使用es6或更高版本的js，請確認運行瀏覽器的支持，
-
采用了基本的css，html，js分離開發方式，也最初的學習前端的方式，以及使用方式，門檻極低，一般對css，js，html有基本的認識就可以直接上手，對于前端初學者最難的還是在于本地服務器的搭建(單頁面的路由機制，記憶體管理)
-
占用記憶體極低，基本是靜態的html的使用率持平，因為是以dom為核心，不需要太多的輔助物件，
-
底層代碼量很少且易于理解(去除注釋大概僅有3500行左右)，更適合閱讀且理解最深處的原理，后續博客更新主要是為了分析原理并舉出相關的例子
簡單案例
為了更好的理解單App物件和至少兩個Page物件，特地的舉了下面的案例幫助理解，這里盡量詳細的分析部分代碼細節，如果需要源代碼以及本地node服務器的搭建，進qq群或微信討論下載，更多效果可以通過我們的網站查看，
-
整體專案檔案
--- index.html
--- public--- component 放置組件物件 后續更新 --- img 放置圖片 --- pages 放置Page物件代碼 --- home --- home.html 頁面html片段 --- home.js 頁面邏輯js代碼 --- popup 放置PopUp物件代碼，彈窗物件， 后續更新 --- script 放置全域js檔案 --- services 放置可參考服務物件，后續更新 --- style 放置樣式檔案 --- app.css 放置所有的樣式，如果多人協作，可以分開多個 --- index.css 放置整體全域樣式 --- ui 引入的ui框架 后續更新 -
創建一個index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello world</title>
<!-- 引入整體樣式 -->
<link rel="stylesheet" href="https://www.cnblogs.com/public/style/index.css">
<!-- 引入單獨樣式 -->
<link rel="stylesheet" href="https://www.cnblogs.com/public/style/app.css">
<!-- 引入框架js代碼 -->
<script src="https://www.cnblogs.com/public/script/str.js"></script>
</head>
<body>
<!-- 初始化App，以及Page物件注冊 初始化頁面 -->
<script src="https://www.cnblogs.com/public/script/index.js"></script>
</body>
</html>
-
創建App物件
在public/script/index.js檔案中
(function() {
// 新建一個App物件，布局頁為static, 首頁為home，
// 版本號為1， 名稱為helloWorld
var app = App.create("helloWorld", "static", "home", 1);
// 配置頁面資訊，以后切換頁面可以通過Page的name來進行切換，
app.setPageConfig([{
name: "static", // 物件上面的static
js: "/public/pages/static/static.js", // 路徑
title: "布局", // 標題
url: "/static" // path
},
{
name: "home",
js: "/public/pages/home/home.js",
title: "首頁",
url: "/home"
},
{
name: "second",
js: "/public/pages/second/second.js",
title: "次頁",
url: "/second"
}
]);
// 將頁面嵌入dom中，
app.initialize(document.body);
})();
-
創建Page物件
-
創建名為static的Page物件
html部分在/public/pages/static/static.html
<header>頁面名稱</header> <!-- 放置其它Page物件的div --> <main ></main> <footer></footer>js部分在/public/pages/static/static.js
(function () { var app = App.getCurrent(); // 獲取當前app物件 // 定義命名為static的Page物件 app.definePage("static", { // 獲取靜態檔案放入頁面 render: function (next) { this.fetch("./static.html", function (text) { next(text); }); }, // 快取dom并系結事件 getDomObj: function () { this.attachDom(".page-container", "pageContainer") .attachDom("header", "header") .attachDom("footer", "footer"); }, // 方法或屬性 set header(value) { this.domList.header.textContent = value; }, set footer(value) { this.domList.footer.textContent = value; } }) })(); -
創建名為home的Page物件
html部分在/public/pages/home/home.html
<div>hello world</div> <button>跳轉</button>js部分在/public/pages/home/home.js
(function () { var app = App.getCurrent(); app.definePage("home", { render: function (next) { this.fetch("./home.html", next); }, getDomObj: function () { this.attachDom("button", "btn") // 系結dom事件 .attachEvent("btn", "click", this.clickHandler, false); }, // 頁面加載完后初始化頁面 init: function () { app.staticPage.header = "首頁"; if (!app.data.home) app.staticPage.footer = "初始化到了首頁"; else app.staticPage.footer = "次頁回傳到首頁"; app.data.home = true; }, clickHandler: function (ev) { // 切換second頁面 app.render("second"); } })
})();
- 創建名為second的Page物件 html部分在/public/pages/second/second.html ```html <div>歡迎閱讀及使用</div> <button>回傳</button>js部分在/public/pages/second/second.js
(function () { var app = App.getCurrent(); app.definePage("second", { render: function (next) { this.fetch("./second.html", next); }, getDomObj: function () { this.attachDom("button", "btn") .attachEvent("btn", "click", this.clickHandler, false); }, init: function () { app.staticPage.header = "次頁"; app.staticPage.footer = "從首頁跳轉到次頁"; }, clickHandler: function (ev) { // 回傳上一頁 history.back(); } }) })(); -
-
查看效果(主要針對移動端，可以通過手機端查看或者用瀏覽器模擬移動端)
將代碼放在可以訪問的服務器或本地服務上，啟動服務，通過瀏覽器訪問，或如下地址
結語
主要談論了個人對當前前端環境的看法，并且根據個人的開發經驗提供了不同于當前開發框架的另一種思路，以及在這個思路上如何解決當前所遇到的開發問題，
推廣
底層框架開源地址：https://gitee.com/string-for-100w/string
演示網站: https://www.renxuan.tech/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172606.html
標籤：JavaScript
上一篇：3.自定義事件
下一篇：2.模塊化開發