JS前端框架关于重构的失败经验分享


Posted in Javascript onMarch 17, 2013

好了开始吧
重构这个其实也不是什么大动作,主要要实现的功能嘛,就是把现有的JS代码重新划分一下,解耦现有模块。然后我打算把现有的程序划分一下模块然后重新打包做一个命名空间实现use或者类似于java的Package的东西。那么我只要加载一个use的js文件调用这个文件的use函数,通过设置某些参数,我可以动态地加载所需要的模块。这个是最完美的想法(那时我很傻很天真)。好的,噩梦开始了。
前提,我低估了3个月前的自己。//好吧,下面可能会出现un文明用语~~

首先,计划的第一天,我的打算是分离这个程序里面最需要解耦的部分,自制控件部分。说起来,人家也尝试着写了一些窗体控件什么的比如Panel.js,Button.js之类的控件这里面有一大堆js文件,虽然我已经划分好文件夹了,但是看到index页面上面那一连串的<script>标签,各种蛋疼的说。于是噩梦进入第二阶段,我想加载一个JS文件,而这个JS文件可以动态地加载所有的控件JS。如果想了解"动态加载JS"的相关知识,请去度娘G娘那里问个明白。我想应该会搜到好多3异步+1Ajax的实现。好了,这些都是废话,参考了《高性能JavaScript》一书,产生以下代码:

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}),好的这里说到这里打断一下,下面再接上。
然后我又突发奇想要做命名空间的功能,好的研究了面向对象啊,原型链啊之类杂七杂八的东西然后发现这种打点引用的功能好抽象,给那本《javascript设计模式》的书忽悠的七零八落。最后在了解了原型模式之后,还是一团迷雾。好的,我觉得我要重新思考这个问题,我其实只是想要打点出控件而已,那么我只要将我的控件作为一个对象的属性绑定到一个全局的对象上面就好了。于是我用了自己的英文名Gssl作为一个对象得出如下结构:
var Gssl = {}

好了回到上面打断的地方,我的想法就是在动态加载JS的时候顺便构造我的全局对象并绑定到空间名为Gssl下,具体实现如下:
loadScript(jqueryURL, function(){ 
//加载我的控件s 
loadScript(controlURL, function(){ 
//绑定控件 
Gssl.control = control; 
}); 
});

写到这里,测试是调通了,昨天晚上,小开心了一下,但是程序员的直觉话我知,噩梦还没有结束。
今天早上回去把这个动态加载JS的JS文件引用到了我的页面那里,结果因为异步的特点,后面的代码没有等到这个Gssl的对象生成完成就开始执行了(我去,这不合理啊)。然后思考了一下,想在最后加载的一个控件那里做一个ready标志位以标志Gssl到底有没有加载完成。但是发现每个组件各自有各自的callback函数,你根本就不知道哪一个才是最后加载的,虽然代码执行是有顺序的,但是这个传输的并行性又让你不能确定到底哪一个才是最后一个。好的我彻底崩溃了,于是想了一个非常2B的方法,干脆写一个函数来卡住程序2秒吧,两秒肯定可以了~。然后发现setTimeout TM不能卡代码的,他的好基友setIXXXXX也是不能卡代码的。好的,朕生气了,写了一个死循环循环判断ready位。好的,浏览器不干了。

回到原点,我开始考虑尝试递归式的加载就是在Callback的时候才去加载下一个控件,这样我就能知道控件什么时候加载完了。但是仔细一想,我擦,如果要这样加载那么我还动态加载个屁啊,这不就一点也没有提高到效率么。然后看了各种框架的ready方法的实现。嗯 TM单文件的就是IMBA啊。那么摆在我面前的就只有一条路了,把所有的控件都写在一个JS上面。这样根本就是避重就轻啊。

然后我就不断在这种提出解决方案,然后不断自我吐槽中度过了噩梦般的一天。快下班了,我还在不停地思考这个问题究竟有没有解。然后脑里面第三个声音开始了,志伟啊~(呵呵本人的名字就是这个了~),真的有必要么?好的,不得不承认,每次脱离噩梦就得靠他。然后我把整个项目的文件夹打开每层每层地点开又退回去,然后思考,好吧,不是写小说,这些思考时候的小动作就不描述了(我会告诉你我想问题的时候会好像精神病人一样犯傻么)。最后我发现就算我把这些模块都抽离了,去到其他的项目还是要做出一定的修改,虽然有做接口,但是接口是接后台的,我模块间的接口还没有做。这样的抽离会伴随着一大堆额外的支付(估计的啦,但是根据经验这些是必然的~),并且新的JS框架在整体框架里面并不兼容(下班的时候发现某些资源访问出问题了),虽然不死心,但是还是放弃了(万恶的进度,次奥)。这一版的代码也没有做保存,呃SVN也没有更新上去~。我的U盘移硬上面也没有备份,但是所有的源码都给我一怒之下付诸Delete了。仅以此篇日志留作纪念。

教训就是如果一开始我就有一个前端模块化的思想,就不会走到今天这一步了。以我的能力完全可以做到,但是现在已经积重难返了~还是那些万恶的奶粉广告,让宝宝有个好的开始,那么我的就是让代码有个好的开始吧~原谅我这个不及格的粑粑~~ (T_T)

另外我知道博客园是个神奇的地方,如果有同人遇到相同的困扰并且切实解决了的话,可否分享一下呢?有回必复!

Javascript 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JavaScript数组 几个常用方法总结
Nov 11 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 #Javascript
提交表单时执行func方法实现代码
Mar 17 #Javascript
javascript中this做事件参数相关问题解答
Mar 17 #Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 #Javascript
Javascript跨域请求的4种解决方式
Mar 17 #Javascript
两种方法实现文本框输入内容提示消失
Mar 17 #Javascript
js 自制滚动条的小例子
Mar 16 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
我的论坛源代码(三)
2006/10/09 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python如何生成各种随机分布图
2018/08/27 Python
python机器学习之神经网络实现
2018/10/13 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python 函数中的参数类型
2020/02/11 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
战略合作意向书范本
2014/04/01 职场文书
负责培养人意见
2015/06/05 职场文书
红色电影观后感
2015/06/18 职场文书