JS前端框架關(guān)于重構(gòu)的失敗經(jīng)驗(yàn)分享
好了開始吧
重構(gòu)這個(gè)其實(shí)也不是什么大動(dòng)作,主要要實(shí)現(xiàn)的功能嘛,就是把現(xiàn)有的JS代碼重新劃分一下,解耦現(xiàn)有模塊。然后我打算把現(xiàn)有的程序劃分一下模塊然后重新打包做一個(gè)命名空間實(shí)現(xiàn)use或者類似于java的Package的東西。那么我只要加載一個(gè)use的js文件調(diào)用這個(gè)文件的use函數(shù),通過(guò)設(shè)置某些參數(shù),我可以動(dòng)態(tài)地加載所需要的模塊。這個(gè)是最完美的想法(那時(shí)我很傻很天真)。好的,噩夢(mèng)開始了。
前提,我低估了3個(gè)月前的自己。//好吧,下面可能會(huì)出現(xiàn)un文明用語(yǔ)~~
首先,計(jì)劃的第一天,我的打算是分離這個(gè)程序里面最需要解耦的部分,控件部分。說(shuō)起來(lái),人家也嘗試著寫了一些窗體控件什么的比如Panel.js,Button.js之類的控件這里面有一大堆js文件,雖然我已經(jīng)劃分好文件夾了,但是看到index頁(yè)面上面那一連串的<script>標(biāo)簽,各種的說(shuō)。于是噩夢(mèng)進(jìn)入第二階段,我想加載一個(gè)JS文件,而這個(gè)JS文件可以動(dòng)態(tài)地加載所有的控件JS。如果想了解"動(dòng)態(tài)加載JS"的相關(guān)知識(shí),請(qǐng)去度娘G娘那里問(wèn)個(gè)明白。我想應(yīng)該會(huì)搜到好多3異步+1Ajax的實(shí)現(xiàn)。好了,這些都是廢話,參考了《高性能JavaScript》一書,產(chǎn)生以下代碼:
function loadScript (url, callback){
var script = document.createElement("script");
script.type = "text/javascript";
if(script.readyState){ //IE
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readState == "complete"){
script.onreadystatechange = null;
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
好的悲劇慢慢開始,首先我的控件都是基于JQuery的那么必然要 loadScript(jqueryURL, function(){//加載我的控件s}),好的這里說(shuō)到這里打斷一下,下面再接上。
然后我又突發(fā)奇想要做命名空間的功能,好的研究了面向?qū)ο蟀。玩湴≈愲s七雜八的東西然后發(fā)現(xiàn)這種打點(diǎn)引用的功能好抽象,給那本《javascript設(shè)計(jì)模式》的書忽悠的七零八落。最后在了解了原型模式之后,還是一團(tuán)迷霧。好的,我覺得我要重新思考這個(gè)問(wèn)題,我其實(shí)只是想要打點(diǎn)出控件而已,那么我只要將我的控件作為一個(gè)對(duì)象的屬性綁定到一個(gè)全局的對(duì)象上面就好了。于是我用了自己的英文名Gssl作為一個(gè)對(duì)象得出如下結(jié)構(gòu):
var Gssl = {}
好了回到上面打斷的地方,我的想法就是在動(dòng)態(tài)加載JS的時(shí)候順便構(gòu)造我的全局對(duì)象并綁定到空間名為Gssl下,具體實(shí)現(xiàn)如下:
loadScript(jqueryURL, function(){
//加載我的控件s
loadScript(controlURL, function(){
//綁定控件
Gssl.control = control;
});
});
寫到這里,測(cè)試是調(diào)通了,昨天晚上,小開心了一下,但是程序員的直覺話我知,噩夢(mèng)還沒有結(jié)束。
今天早上回去把這個(gè)動(dòng)態(tài)加載JS的JS文件引用到了我的頁(yè)面那里,結(jié)果因?yàn)楫惒降奶攸c(diǎn),后面的代碼沒有等到這個(gè)Gssl的對(duì)象生成完成就開始執(zhí)行了(我去,這不合理?。?。然后思考了一下,想在最后加載的一個(gè)控件那里做一個(gè)ready標(biāo)志位以標(biāo)志Gssl到底有沒有加載完成。但是發(fā)現(xiàn)每個(gè)組件各自有各自的callback函數(shù),你根本就不知道哪一個(gè)才是最后加載的,雖然代碼執(zhí)行是有順序的,但是這個(gè)傳輸?shù)牟⑿行杂肿屇悴荒艽_定到底哪一個(gè)才是最后一個(gè)。好的我徹底崩潰了,于是想了一個(gè)非常2B的方法,干脆寫一個(gè)函數(shù)來(lái)卡住程序2秒吧,兩秒肯定可以了~。然后發(fā)現(xiàn)setTimeout TM不能卡代碼的,他的好友setIXXXXX也是不能卡代碼的。好的,朕生氣了,寫了一個(gè)死循環(huán)循環(huán)判斷ready位。好的,瀏覽器不干了。
回到原點(diǎn),我開始考慮嘗試遞歸式的加載就是在Callback的時(shí)候才去加載下一個(gè)控件,這樣我就能知道控件什么時(shí)候加載完了。但是仔細(xì)一想,我擦,如果要這樣加載那么我還動(dòng)態(tài)加載個(gè)屁啊,這不就一點(diǎn)也沒有提高到效率么。然后看了各種框架的ready方法的實(shí)現(xiàn)。嗯 TM單文件的就是IMBA啊。那么擺在我面前的就只有一條路了,把所有的控件都寫在一個(gè)JS上面。這樣根本就是避重就輕啊。
然后我就不斷在這種提出解決方案,然后不斷自我吐槽中度過(guò)了噩夢(mèng)般的一天??煜掳嗔?,我還在不停地思考這個(gè)問(wèn)題究竟有沒有解。然后腦里面第三個(gè)聲音開始了,志偉啊~(呵呵本人的名字就是這個(gè)了~),真的有必要么?好的,不得不承認(rèn),每次脫離噩夢(mèng)就得靠他。然后我把整個(gè)項(xiàng)目的文件夾打開每層每層地點(diǎn)開又退回去,然后思考,好吧,不是寫小說(shuō),這些思考時(shí)候的小動(dòng)作就不描述了(我會(huì)告訴你我想問(wèn)題的時(shí)候會(huì)好像精神病人一樣犯傻么)。最后我發(fā)現(xiàn)就算我把這些模塊都抽離了,去到其他的項(xiàng)目還是要做出一定的修改,雖然有做接口,但是接口是接后臺(tái)的,我模塊間的接口還沒有做。這樣的抽離會(huì)伴隨著一大堆額外的支付(估計(jì)的啦,但是根據(jù)經(jīng)驗(yàn)這些是必然的~),并且新的JS框架在整體框架里面并不兼容(下班的時(shí)候發(fā)現(xiàn)某些資源訪問(wèn)出問(wèn)題了),雖然不死心,但是還是放棄了(萬(wàn)惡的進(jìn)度,次奧)。這一版的代碼也沒有做保存,呃SVN也沒有更新上去~。我的U盤移硬上面也沒有備份,但是所有的源碼都給我一怒之下付諸Delete了。僅以此篇日志留作紀(jì)念。
另外我知道博客園是個(gè)神奇的地方,如果有同人遇到相同的困擾并且切實(shí)解決了的話,可否分享一下呢?有回必復(fù)!
相關(guān)文章
純javascript移動(dòng)優(yōu)先的幻燈片效果
這篇文章主要介紹了純javascript實(shí)現(xiàn)移動(dòng)優(yōu)先的幻燈片效果,感興趣的小伙伴們可以參考一下2015-11-11
JavaScript中省略元素對(duì)數(shù)組長(zhǎng)度的影響
這篇文章主要介紹了JavaScript中省略元素對(duì)數(shù)組長(zhǎng)度的影響,本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動(dòng)隱藏菜單的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動(dòng)隱藏菜單的方法,涉及javascript操作鼠標(biāo)事件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
HTML+CSS+JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的井字游戲
使用javascript創(chuàng)建游戲是最有趣的學(xué)習(xí)方式。它會(huì)讓你保持動(dòng)力,這對(duì)于學(xué)習(xí)?Web?開發(fā)等復(fù)雜技能至關(guān)重要。本文將使用HTML、CSS和?Javascript創(chuàng)建一個(gè)井字游戲。感興趣的童鞋可以關(guān)注一下2021-11-11
實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容水平或垂直滾動(dòng)的Javascript代碼
用Javascript實(shí)現(xiàn)新聞內(nèi)容的水平或垂直滾動(dòng),主要的優(yōu)點(diǎn)是我們可以實(shí)現(xiàn)自定義滾動(dòng)風(fēng)格或特效,應(yīng)用效果比起傳統(tǒng)的marquee更加具有特色,方法也比較簡(jiǎn)單2012-10-10
JavaScript實(shí)現(xiàn)打印星型金字塔功能實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)打印星型金字塔功能,結(jié)合具體實(shí)例形式分析了javascript針對(duì)輸出任意給定行數(shù)星型金字塔圖形的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
javascript生成/解析dom的CDATA類型的字段的代碼
javascript生成/解析dom的CDATA類型的字段的代碼...2007-04-04
一文詳解JSON.parse和JSON.stringify的用法
Json.stringify()和toString()兩者雖然都可以講目標(biāo)值轉(zhuǎn)為字符串,但是還是有本質(zhì)區(qū)別的,下面這篇文章主要給大家介紹了關(guān)于JSON.parse和JSON.stringify用法的相關(guān)資料,需要的朋友可以參考下2023-01-01

