前端MVC手腳架

pekonchan 發(fā)布于2019-08-19 17:17 / 2338人閱讀

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

前端MVC手腳架

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

1.構(gòu)建工具

[x] webpack

[x] babel-loader

[x] babel-preset-es2015

[x] babel-preset-react

2.基礎(chǔ)庫

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，主要是用于記錄，以及考察現(xiàn)在比較流行的前端庫在實際開發(fā)當(dāng)中的開發(fā)體驗。

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

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

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

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

代表傳統(tǒng)_mvc_模式的backbone（類似的庫還有ember）

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

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

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

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

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

而在業(yè)務(wù)則使用時，就像正常使用jquery插件就可以了：

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

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

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

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