前端MVC手腳架

前端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的模塊管理與析構語法）。

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

1. 表明_mvvm_模式的angular（相似的庫還有knockout，vue，avalon）

2. 表明_virtual-dom_模式的react（加上了redux做爲store管理）

3. 表明傳統_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(<Pagination { ...options } />, 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，方便以後翻查。