前端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語法（但在dome中，只用到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(<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插件后，函數式開發似乎已經沒有必然存在的理由的，這里引入只是作為一個dome，方便之后翻查。