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>script.src = url; <BR>document.getElementsByTagName("head")[0].appendChild(script); <BR>} <BR> <BR>好的悲剧慢慢开始，首先我的控件都是基于JQuery的那么必然要 loadScript(jqueryURL, function(){//加载我的控件s})，好的这里说到这里打断一下，下面再接上。 <BR>然后我又突发奇想要做命名空间的功能，好的研究了面向对象啊，原型链啊之类杂七杂八的东西然后发现这种打点引用的功能好抽象，给那本《javascript设计模式》的书忽悠的七零八落。最后在了解了原型模式之后，还是一团迷雾。好的，我觉得我要重新思考这个问题，我其实只是想要打点出控件而已，那么我只要将我的控件作为一个对象的属性绑定到一个全局的对象上面就好了。于是我用了自己的英文名Gssl作为一个对象得出如下结构： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="94322" class="copybut" id="copybut94322" onclick="doCopy('code94322')"><U>复制代码 代码如下:<div class="codebody" id="code94322"> <BR>var Gssl = {} <BR> <BR>好了回到上面打断的地方，我的想法就是在动态加载JS的时候顺便构造我的全局对象并绑定到空间名为Gssl下，具体实现如下： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="72296" class="copybut" id="copybut72296" onclick="doCopy('code72296')"><U>复制代码 代码如下:<div class="codebody" id="code72296"> <BR>loadScript(jqueryURL, function(){ <BR>//加载我的控件s <BR>loadScript(controlURL, function(){ <BR>//绑定控件 <BR>Gssl.control = control; <BR>}); <BR>}); <BR> <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>