資訊專欄INFORMATION COLUMN
摘要：前端手腳架項(xiàng)目地址構(gòu)建工具基礎(chǔ)庫(kù)這個(gè)項(xiàng)目類似，主要是用于記錄，以及考察現(xiàn)在比較流行的前端庫(kù)在實(shí)際開(kāi)發(fā)當(dāng)中的開(kāi)發(fā)體驗(yàn)。其中，構(gòu)建都是基于，支持語(yǔ)法但在中，只用到的模塊管理與析構(gòu)語(yǔ)法。
前端MVC手腳架
項(xiàng)目地址 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ǔ)庫(kù)
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
這個(gè)項(xiàng)目類似todomvc，主要是用于記錄，以及考察現(xiàn)在比較流行的前端庫(kù)在實(shí)際開(kāi)發(fā)當(dāng)中的開(kāi)發(fā)體驗(yàn)。
其中，構(gòu)建都是基于wepback+babel，支持es6語(yǔ)法（但在demo中，只用到es6的模塊管理與析構(gòu)語(yǔ)法）。
而基礎(chǔ)庫(kù)則分為四個(gè)不同實(shí)驗(yàn)組，其中前三個(gè)，分別是：
代表_mvvm_模式的angular（類似的庫(kù)還有knockout，vue，avalon）
代表_virtual-dom_模式的react（加上了redux作為store管理）
代表傳統(tǒng)_mvc_模式的backbone（類似的庫(kù)還有ember）
而第四個(gè)實(shí)驗(yàn)組，是我在項(xiàng)目中使用react+redux的組合在開(kāi)發(fā)中小型項(xiàng)目時(shí)，發(fā)現(xiàn)其學(xué)習(xí)成本和維護(hù)成本遠(yuǎn)大于其帶來(lái)的開(kāi)發(fā)體驗(yàn)上的提升，直白的說(shuō)，就是把簡(jiǎn)單的項(xiàng)目復(fù)雜化了。
雖說(shuō)jquery已經(jīng)是上個(gè)時(shí)代的產(chǎn)物，不過(guò)說(shuō)句公道話，在中小型項(xiàng)目中，jquery還是王道，其通用性和靈活性都是得到充分的驗(yàn)證的。
既然react+redux在中小型項(xiàng)目中優(yōu)勢(shì)不出來(lái)（主要是redux造成的），那不如把react和jquery結(jié)合，而我采用的結(jié)合方式則是，大家耳熟能詳?shù)膉query插件模式。舉個(gè)簡(jiǎn)單的例子：
$.fn.pagination = function (options) {
return this.each(function () {
page(this, options);
});
};
function page(elem, options) {
ReactDOM.render(
而在業(yè)務(wù)則使用時(shí)，就像正常使用jquery插件就可以了：
$("#page").pagination({
page: 0,
size: 15,
total: 30
});
這樣對(duì)于不熟悉react的小伙伴，就正常的寫(xiě)jquery式的代碼就好，而有react經(jīng)驗(yàn)的，則可以使用react作為底層的dom操作工具。
而且這樣編寫(xiě)代碼，還帶來(lái)另外一個(gè)好處，就是不用整個(gè)頁(yè)面都使用react來(lái)生成，只在關(guān)鍵部件使用react。這是我在項(xiàng)目中一個(gè)很重要的經(jīng)驗(yàn)所得。在頁(yè)面元素中，其實(shí)有很大部分是和數(shù)據(jù)無(wú)關(guān)，可以直接渲染的，例如一些表單、導(dǎo)航、confirm、alert、toast等。如果整頁(yè)都使用react來(lái)渲染，就會(huì)使得js文件異常的復(fù)雜，對(duì)于中小項(xiàng)目而言，這是不可接受的。
可能有些小伙伴覺(jué)得redux帶來(lái)的函數(shù)式編程，可以梳理頁(yè)面的數(shù)據(jù)流。單向數(shù)據(jù)流正是fb提出來(lái)的一個(gè)非常好的概念，我個(gè)人也很喜歡這樣函數(shù)式的開(kāi)發(fā)模式，所以最后我選擇性的引入了bacon這個(gè)著名的frp庫(kù)，來(lái)代替redux處理數(shù)據(jù)流，不過(guò)由于把react隱藏在jquery插件后，函數(shù)式開(kāi)發(fā)似乎已經(jīng)沒(méi)有必然存在的理由的，這里引入只是作為一個(gè)demo，方便之后翻查。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78378.html
摘要：還記得一年半前轉(zhuǎn)向后端的那種無(wú)助的感覺(jué)，獨(dú)自一人摸黑走路，學(xué)習(xí)各種前端知識(shí)，走了不少?gòu)澛罚F(xiàn)在終于算是入門(mén)了前端我相信不少人也有我當(dāng)時(shí)同樣的無(wú)助，所以我在空閑時(shí)間整理了下所用到的知識(shí)，便編寫(xiě)了一個(gè)手腳架，希望能給其他正學(xué)習(xí)前端的同學(xué)一些參考 還記得一年半前轉(zhuǎn)向后端的那種無(wú)助的感覺(jué)，獨(dú)自一人摸黑走路，學(xué)習(xí)各種前端知識(shí)，走了不少?gòu)澛罚F(xiàn)在終于算是入門(mén)了前端～我相信不少人也有我當(dāng)時(shí)同樣的無(wú)助...
摘要：服務(wù)端渲染的手腳架這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于已經(jīng)提供代碼熱加載，使用預(yù)處理，單元測(cè)試，代碼覆蓋率報(bào)告，代碼分割等等更多。 Universal React Starter Kit 服務(wù)端渲染的React手腳架 這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于webpack已經(jīng)提供代碼熱加載，使用...
摘要：服務(wù)端渲染的手腳架這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于已經(jīng)提供代碼熱加載，使用預(yù)處理，單元測(cè)試，代碼覆蓋率報(bào)告，代碼分割等等更多。 Universal React Starter Kit 服務(wù)端渲染的React手腳架 這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于webpack已經(jīng)提供代碼熱加載，使用...
摘要：服務(wù)端渲染的手腳架這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于已經(jīng)提供代碼熱加載，使用預(yù)處理，單元測(cè)試，代碼覆蓋率報(bào)告，代碼分割等等更多。 Universal React Starter Kit 服務(wù)端渲染的React手腳架 這個(gè)啟動(dòng)包的設(shè)計(jì)是為了讓你使用一整套最新最酷的前端技術(shù)，所有都是可配置，富特性，基于webpack已經(jīng)提供代碼熱加載，使用...
閱讀 3375·2023-04-26 03:05
閱讀 1474·2019-08-30 13:09
閱讀 1916·2019-08-30 13:05
閱讀 897·2019-08-29 12:42
閱讀 1395·2019-08-28 18:18
閱讀 3454·2019-08-28 18:09
閱讀 528·2019-08-28 18:00
閱讀 1726·2019-08-26 12:10
