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 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
layUI实现列表查询功能
Jul 27 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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上传图片之时间戳命名(保存路径)
2014/08/15 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php并发加锁示例
2016/10/17 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JS查看对象功能代码
2008/04/25 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python多进程实现进程间通信实例
2017/11/24 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python如何实现邮件功能
2020/05/27 Python
如何用Python绘制3D柱形图
2020/09/16 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
《恐龙》教学反思
2014/04/27 职场文书
参加招聘会后的感想
2015/08/10 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python