JS前端框架關於重構的失敗經驗分享_javascript技巧

好了開始吧
重構這個其實也不是什麼大動作，主要要實現的功能嘛，就是把現有的JS程式碼重新劃分一下，解耦現有模組。然後我打算把現有的程式劃分一下模組然後重新打包做一個命名空間實作use或類似java的Package的東西。那我只要載入一個use的js檔案呼叫這個檔案的use函數，透過設定某些參數，我可以動態地載入所需要的模組。這個是最完美的想法（那時我很愚蠢、很天真）。好的，惡夢開始了。
前提，我低估了3個月前的自己。 //好吧，下面可能會出現un文明用語~~

首先，計劃的第一天，我的打算是分離這個程式裡面最需要解耦的部分，自製控制部分。說起來，人家也嘗試著寫了一些窗體控件什麼的比如Panel.js，Button.js之類的控件這裡面有一大堆js文件，雖然我已經劃分好文件夾了，但是看到index頁面上面那一連串的<script>標籤，各種痛的說。於是惡夢進入第二階段，我想載入一個JS文件，而這個JS文件可以動態地載入所有的控制項JS。如果想了解"動態加載JS"的相關知識，請去度娘G娘那裡問個明白。我想應該會搜到好多3異步 1Ajax的實作。好了，這些都是廢話，參考了《高效能JavaScript》一書，產生以下程式碼： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="2608" class="copybut" id="copybut2608" onclick="doCopy('code2608')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code2608"> <BR>function loadScript (url, callback){ <BR>var script = document.createElement("script"); <BR>script.type = "text/javascript"; <BR>if (script.readyState){ //IE <BR>script.onreadystatechange = function(){ <BR>if(script.readyState == "loaded" || script.readState == "complete"){ <BR>script. onreadystatechange = null; <BR>callback(); <BR>} <BR>} <BR>}else{ <BR>script.onload = function(){ <BR>callback(); <BR>} <BR>} <BR> } <BR>script.src = url; <BR>document.getElementsByTagName("head")[0].appendChild(script); <BR>} <BR> <BR>好的悲劇慢慢開始，首先我的控制項都是基於JQuery的那麼必然要loadScript(jqueryURL, function(){//載入我的控制項s})，好的這裡說到這裡打斷一下，下面再接上。 <BR>然後我又突發奇想要做命名空間的功能，好的研究了物件導向啊，原型鍊啊之類雜七雜八的東西然後發現這種打點引用的功能好抽象，給那本《javascript設計模式》的書忽悠的七零八落。最後在了解了原型模式之後，還是一團迷霧。好的，我覺得我要重新思考這個問題，我其實只是想要打點出控件而已，那麼我只要將我的控制項作為一個物件的屬性綁定到一個全域的物件上面就好了。於是我用了自己的英文名Gssl作為一個對象得出如下結構： <div class="codetitle"><span><a style="CURSOR: pointer" data="94322" class="copybut" id="copybut94322" onclick="doCopy('code94322')"><U>複製代碼代碼如下:<div class="codebody" id="code94322"><BR><BR>代碼如下:<BR><BR> <div class="codetitle">var Gssl = {} <span><a style="CURSOR: pointer" data="72296" class="copybut" id="copybut72296" onclick="doCopy('code72296')"> <U>好了回到上面打斷的地方，我的想法就是在動態加載JS的時候順便構造我的全局對象並綁定到空間名為Gssl下，具體實作如下： <div class="codebody" id="code72296">複製程式碼<BR><BR><BR> 程式碼如下:<BR><BR> <BR>loadScript(jqueryLURL , function(){ <BR>//載入我的控制項s <BR>loadScript(controlURL, function(){ //綁定控制<🎜>Gssl.control = control; <🎜>}); <>Gssl.control = control; <🎜>}); 🎜>}); <🎜><🎜><BR>寫到這裡，測驗是調通了，昨天晚上，小開心了一下，但是程式設計師的直覺話我知，惡夢還沒結束。 <BR>今天早上回去把這個動態載入JS的JS檔案引用到了我的頁面那裡，結果因為非同步的特點，後面的程式碼沒有等到這個Gssl的物件產生完成就開始執行了（我去，這不合理啊）。然後思考了一下，想在最後加載的一個控件那裡做一個ready標誌位以標誌Gssl到底有沒有加載完成。但發現每個元件各自有各自的callback函數，你根本就不知道哪一個才是最後載入的，雖然程式碼執行是有順序的，但這個傳輸的平行性又讓你不能確定到底哪一個才是最後一個。好的我徹底崩潰了，於是想了一個非常2B的方法，乾脆寫一個函數來卡住程式2秒吧，兩秒肯定可以了~。然後發現setTimeout TM不能卡代碼的，他的好基友setIXXXXX也是不能卡代碼的。好的，朕生氣了，寫了一個死循環循環判斷ready位。好的，瀏覽器不乾了。 <br><br>回到原點，我開始考慮嘗試遞歸式的加載就是在Callback的時候才去加載下一個控件，這樣我就能知道控件什麼時候加載完了。但是仔細一想，我擦，如果要這樣加載那麼我還動態加載個屁啊，這不就一點也沒有提高到效率麼。然後看了各種框架的ready方法的實作。嗯 TM單文件的就是IMBA啊。那麼擺在我面前的就只有一條路了，把所有的控制都寫在一個JS上面。這樣根本就是避重就輕啊。 <br><br>然後我就不斷在這種提出解決方案，然後不斷自我吐槽中度過了噩夢般的一天。快下班了，我還在不停地思考這個問題究竟有沒有解。然後腦裡面第三個聲音開始了，志偉啊~（呵呵本人的名字就是這個了~），真的有必不是？好的，不得不承認，每次脫離惡夢就得靠他。然後我把整個專案的資料夾打開每層每層地點開又退回去，然後思考，好吧，不是寫小說，這些思考時候的小動作就不描述了（我會告訴你我想問題的時候會好像精神病人一樣犯傻麼）。最後我發現就算我把這些模組都抽離了，去到其他的專案還是要做出一定的修改，雖然有做接口，但是接口是接後台的，我模組間的接口還沒做。這樣的抽離會伴隨著一大堆額外的支付（估計的啦，但是根據經驗這些是必然的~），並且新的JS框架在整體框架裡面並不兼容（下班的時候發現某些資源訪問出問題了），雖然不死心，但還是放棄了（萬惡的進度，次奧）。這版的程式碼也沒做保存，呃SVN也沒更新上去~。我的U盤移硬上面也沒有備份，但是所有的源碼都給我一怒之下付諸Delete了。僅以此篇日誌留作紀念。 <br><br>教訓就是如果一開始我就有一個前端模組化的思想，就不會走到今天這一步了。以我的能力完全可以做到，但是現在已經積重難返了~還是那些萬惡的奶粉廣告，讓寶寶有個好的開始，那麼我的就是讓代碼有個好的開始吧~原諒我這個不及格的瑤粑~~ (T_T)<br><br>另外我知道博客園是個神奇的地方，如果有同人遇到相同的困擾並且切實解決了的話，可否分享一下呢？有回必復！</script>