前端MVC手腳架

pekonchan 發布于2019-08-19 17:17 / 2340人閱讀

摘要：前端手腳架項目地址構建工具基礎庫這個項目類似，主要是用于記錄，以及考察現在比較流行的前端庫在實際開發當中的開發體驗。其中，構建都是基于，支持語法但在中，只用到的模塊管理與析構語法。

前端MVC手腳架

項目地址 https://github.com/lizzz0523/mvc-mode-seed

1.構建工具

[x] webpack

[x] babel-loader

[x] babel-preset-es2015

[x] babel-preset-react

2.基礎庫

react+redux+fetch

[x] react

[x] react-dom

[x] react-redux

[x] redux

[x] redux-thunk

[x] isomorphic-fetch

angular

[x] angular

backbone+jquery

[x] backbone

[x] underscore

[x] jquery

react+jquery+bacon

[x] react

[x] react-dom

[x] jquery

[x] bacon

這個項目類似todomvc，主要是用于記錄，以及考察現在比較流行的前端庫在實際開發當中的開發體驗。

其中，構建都是基于wepback+babel，支持es6語法（但在demo中，只用到es6的模塊管理與析構語法）。

而基礎庫則分為四個不同實驗組，其中前三個，分別是：

代表_mvvm_模式的angular（類似的庫還有knockout，vue，avalon）

代表_virtual-dom_模式的react（加上了redux作為store管理）

代表傳統_mvc_模式的backbone（類似的庫還有ember）

而第四個實驗組，是我在項目中使用react+redux的組合在開發中小型項目時，發現其學習成本和維護成本遠大于其帶來的開發體驗上的提升，直白的說，就是把簡單的項目復雜化了。

雖說jquery已經是上個時代的產物，不過說句公道話，在中小型項目中，jquery還是王道，其通用性和靈活性都是得到充分的驗證的。

既然react+redux在中小型項目中優勢不出來（主要是redux造成的），那不如把react和jquery結合，而我采用的結合方式則是，大家耳熟能詳的jquery插件模式。舉個簡單的例子：

$.fn.pagination = function (options) {
    return this.each(function () {
        page(this, options);
    });
};

function page(elem, options) {
    ReactDOM.render(, elem);
}

而在業務則使用時，就像正常使用jquery插件就可以了：

$("#page").pagination({
    page: 0,
    size: 15,
    total: 30
});

這樣對于不熟悉react的小伙伴，就正常的寫jquery式的代碼就好，而有react經驗的，則可以使用react作為底層的dom操作工具。

而且這樣編寫代碼，還帶來另外一個好處，就是不用整個頁面都使用react來生成，只在關鍵部件使用react。這是我在項目中一個很重要的經驗所得。在頁面元素中，其實有很大部分是和數據無關，可以直接渲染的，例如一些表單、導航、confirm、alert、toast等。如果整頁都使用react來渲染，就會使得js文件異常的復雜，對于中小項目而言，這是不可接受的。

可能有些小伙伴覺得redux帶來的函數式編程，可以梳理頁面的數據流。單向數據流正是fb提出來的一個非常好的概念，我個人也很喜歡這樣函數式的開發模式，所以最后我選擇性的引入了bacon這個著名的frp庫，來代替redux處理數據流，不過由于把react隱藏在jquery插件后，函數式開發似乎已經沒有必然存在的理由的，這里引入只是作為一個demo，方便之后翻查。

云服務器 GPU云服務器架私服架vps vps架vpn 機柜托管上下架服務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78378.html

angularjs + requirejs 完整的手腳架

摘要：還記得一年半前轉向后端的那種無助的感覺，獨自一人摸黑走路，學習各種前端知識，走了不少彎路，現在終于算是入門了前端我相信不少人也有我當時同樣的無助，所以我在空閑時間整理了下所用到的知識，便編寫了一個手腳架，希望能給其他正學習前端的同學一些參考還記得一年半前轉向后端的那種無助的感覺，獨自一人摸黑走路，學習各種前端知識，走了不少彎路，現在終于算是入門了前端～我相信不少人也有我當時同樣的無助...

anyway 2019-08-19 17:18 評論0 收藏0
服務端渲染的React手腳架。完美使用 React, Redux, and React-Router

摘要：服務端渲染的手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于已經提供代碼熱加載，使用預處理，單元測試，代碼覆蓋率報告，代碼分割等等更多。 Universal React Starter Kit 服務端渲染的React手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于webpack已經提供代碼熱加載，使用...

zhouzhou 2019-08-29 11:27 評論0 收藏0
服務端渲染的React手腳架。完美使用 React, Redux, and React-Router

摘要：服務端渲染的手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于已經提供代碼熱加載，使用預處理，單元測試，代碼覆蓋率報告，代碼分割等等更多。 Universal React Starter Kit 服務端渲染的React手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于webpack已經提供代碼熱加載，使用...

RayKr 2019-08-22 10:40 評論0 收藏0
服務端渲染的React手腳架。完美使用 React, Redux, and React-Router

摘要：服務端渲染的手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于已經提供代碼熱加載，使用預處理，單元測試，代碼覆蓋率報告，代碼分割等等更多。 Universal React Starter Kit 服務端渲染的React手腳架這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基于webpack已經提供代碼熱加載，使用...

DC_er 2019-08-01 15:52 評論0 收藏0