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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
javascript模块化简单解析
Apr 07 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
vue实现文字加密功能
Sep 27 Javascript
JS实现动态星空背景效果
Nov 01 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
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript简易画板开发
2020/04/12 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中requests模块的使用方法
2015/04/08 Python
Python编程之多态用法实例详解
2015/05/19 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python基本socket通信控制操作示例
2019/01/30 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
python 基于opencv操作摄像头
2020/12/24 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
客服服务心得体会
2013/12/30 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2015新学期开学寄语
2015/02/26 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
新郎婚礼致辞
2015/07/27 职场文书
大学生党课心得体会
2016/01/07 职场文书
诚信高考倡议书
2019/06/24 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL