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》一书,产生以下代码:

复制代码 代码如下:

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)

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

时间: 2024-09-22 05:42:22

JS前端框架关于重构的失败经验分享_javascript技巧的相关文章

非常实用的js验证框架实现源码 附原理方法_javascript技巧

本文为大家分享一个很实用的js验证框架实现源码,供大家参考,具体内容如下 关键方法和原理: function check(thisInput) 方法中的 if (!eval(scriptCode)) { return false; } 调用示例: 复制代码 代码如下: <input type="text" class="text_field percentCheck" name="progress_payment_two" id="

JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享_javascript技巧

效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

js钢琴按钮波浪式图片排列效果代码分享_javascript技巧

本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图:                                -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能

JS实现拖动滚动条评分的效果代码分享_javascript技巧

小编教你JS特效拖动滚动条可以评分效果,小编感觉挺不错,用时候可能需要ASP/PHP或其它语言配合取值并写入数据库,这是前台的实现. 直接上代码 看看JS的神奇吧! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

js实现各种复制到剪贴板的方法(分享)_javascript技巧

一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

js鼠标点击图片切换效果代码分享_javascript技巧

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

基于JS组件实现拖动滑块验证功能(代码分享)_javascript技巧

拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m

JS刷新框架外页面七种实现代码_javascript技巧

语句1. window.parent.frames[1].location.reload(); 语句2. window.parent.frames.bottom.location.reload(); 语句3. window.parent.frames["bottom"].location.reload(); 语句4. window.parent.frames.item(1).location.reload(); 语句5. window.parent.frames.item('botto

js+css实现上下翻页相册代码分享_javascript技巧

 这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码.  先为大家展示效果图: 效果演示 源码下载 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js+css实现上下翻页相册</title>