JavaScript项目重构到底有多少坑要填要踩
看到代码的那一刻我惊呆了,就一个js文件,接近2000行的代码。这个还好,比这个行数多的我见的多了,这个还吓不到我。有哪些问题,一会再说。
因为从我接手的那一刻算起,几天后就要发新版本,我只要也只能调一些样式。代码重构,想都不要想,有想法我也得掐死。
我以为很简单,很快就能完成,too young too naive,上代码:
.hover(function(){
$("").css("border-top", "1px solid #5589d4");
$("").css("border-bottom", "1px solid #f4f4f4");
$("").css("border-left", "1px solid #5589d4");
$("#").css("border-right", "1px solid #f4f4f4");
$("#").css("border-left", "1px solid #e3e3e3");
$("#").css("border-right", "1px solid #5589d4");
});
文件内大量的这种内联样式写法,是不是很666,而且好多地方的内联样式代码还是重复的,我要是直接在上面改,能累死烦死。
基于样式表现和行为逻辑分离的原则,慢慢改吧,还好,慢慢调,两个工作日基本完成了。
ok,提交测试,没问题。(http://m.0813sy.com)
but,两天后,兄弟组在四级详情页新增的浮层抽奖效果,插件对其有影响,查代码
//是这样
$('.nodata').hide();
//以及这样
$('.no-text').hide();
插件第一原则,never and never 影响或更改原有页面的结构、行为。
还好没有对外推,要不用户分分钟把插件卸了。所以临时改成了这样
//是不是区别不大?但是重复率低啊
$('.chm-x-nodata').hide();
作为一个有轻微代码洁癖的人,当时我就想,有时间我一定把丫重构了。
不过理智告诉我,先这么着吧,千万不要再来新版本了,这是一个大坑。
重构
墨菲定律,该来的还得来。
这次是大改版,增加对某网站的支持。
ok,这次时间足够了,重构。
1. 根据业务将js文件拆开,用gulp构建。
项目目录结构如下:
-plugin
-- build
---- chrome //chrome插件模块
---- plug //内容
------ dist
--------- js //生成的js文件,包括.min.js
------ css //原来的css文件
------ images
------ js //其他js
-- js_src
---- 01-x.js //公共变量、方法
---- 02-mod.js //模块化机制封装
---- .....js //子逻辑
---- 90-main.js //主要逻辑
---- 99-init.js //入口文件
-- gulpfile.js
-- package.json
有意思的是,插件对象(x)内部定义了require、define对象,我以为是采用了模块化机制,实际上就是使用了一层皮。
(function(x) {
x.mod={};
//构建模块化机制
var defined = function(name, module) {
x.modules[name] = module;
}
var require = function(name) {
var m = star.modules[name];
if (!m) {
return null;
} else if(typeof m === 'function'){
//对象已实例化,直接返回
m = m.call(m);
}
return m;
}
x.mod.defined=defined;
x.mod.require=require;
})(x);
2.通用变量及方法的定义
上面已经提到了,DOM操作用$,很容易误操作页面DOM。
//因此在`01-x.js`中,对其进行封装。
var x=(function(win){
var _x={
modules:{}
};
_x.$=function(str){
if (str === 'body' || typeof str === 'object') return $(str);
//对根DOM要添加此类
return $('.x-root').find(str);
}
})(window);
//调用
(function(x) {
'use strict';
var require=x.mod.require,defined=x.mod.defined;
var qs=x.$;
//这样对页面的影响几乎降到了最低。
var m=qs("http://www.zgsy0813.com");
})(x)
另外locastorage也未做封装,loginID、password居然直接存,是不是醉了。
/**
* @description 封装localStorage对象,防止对外暴露
*/
if (!localStorage.getItem('x')) localStorage.setItem('x', JSON.stringify({}));
x.getItem = function(key) {
return JSON.parse(localStorage.getItem('x'))[key];
};
x.setItem = function(key, val) {
var o = JSON.parse(localStorage.getItem('x'));
o[key] = val;
localStorage.setItem('x', JSON.stringify(o));
};
由于线上和测试的请求链接不同,原代码是用${x-Base-link}占位,上线前,测试时,都要批量替换,累不累啊亲。直接在配置文件中定义好就可以了啊。
3.其他代码的整理
封装的ajax有同步的也有异步的方法,用的很混乱。居然有三种定义。。。
//为了代码统一,全部采用异步
//实际上用$.ajax更好,拼接url很讨厌。
(function(x) {
'use strict';
var qs=x.$;
var require=x.mod.require,defined=x.mod.defined;
//工具模块
defined('Tool', function() {
return {
//统一使用异步
xHttpRequest: function(url, callback) {
return this.xHttpRequest_yb(url,callback);
}, //封装ajax操作---异步
xHttpRequest_yb: function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback(xhr.responseText);
}
}
return xhr.send();
},
xFalseHttpRequest: function(url, callback) {
return this.xHttpRequest_yb(url,callback);
},
);
)(x);
代码混乱,如DOM绑定事件居然有写在ajax内或同步的ajax后的。
冗余的代码非常多
//如判断对象为空的这种写法多次出现
if(x.userId == "" || x.userId == null || x.userId == 'null')
//封装一下就好了呀
function isNullOrEpmty(str) {
return !str || str == ' ' || str == 'undefined' || str == 'null';
}
//另外同样的事件绑定,只是因为一两处逻辑的不同,居然又重新绑定了两次,代码只是更改了一点点啊
结语
有了基本的脉络后,实际上重构很快,三天多一点的时间就搞定了。坑填的差不多了,如若以后他人接手,希望坑不多。(逃
对了,最后附一下gulp.js文件,一些童鞋可能还没有接触过。
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件
clean = require('gulp-clean'); //清空文件夹
var jsDst = './build/plug/dist/js';
var jsSrc='./js_src/*.js';
// js处理
gulp.task('jsTask', function() {
gulp.src(jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('dist.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
//.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(jsDst, {read: false}).pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function() {
gulp.start('jsTask');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch', function() {
gulp.watch(jsSrc, function() {
gulp.run('jsTask');
});
});
最新文章
- php注册审核
- iOS-APNS证书申请与使用
- BZOJ 1485: [HNOI2009]有趣的数列
- loadlibrary DLL 0失败 的一个原因。
- rpm and yum commands
- 【原】RDD专题
- Linux查看所有用户用什么命令
- Qt之启动外部程序
- LR 取到怎么样才能得到参数列表中的每一个值
- Android 连接 SQL Server (jtds方式)——下
- Java常见内存溢出异常分析(OutOfMemoryError)
- php这样实现伪静态
- sitecore8.2 基于站点来查询item
- Informatica
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 一种基于zookeeper的分布式队列的设计与实现
- golang之指针
- HTTP协议的内容协商
- 第五周 mybash的实现
- shell脚本学习总结04--终端信息的获取和设置
热门文章
- Laravel 5.2--改变数据库字段值,编辑时候,默认选中
- 正版phpstorm,webstorm,goland(Jetbrains系列都可以)免费激活步骤(图文详解)(亲测有效)
- 搭建activemq服务
- 走进科学之揭开神秘的";零拷贝";
- Docker快速搭建WordPress博客网站
- DecimalFormat详解
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)
- select前台转义后台取到的值为对应的文本 select同时接受list和map
- Winhex数据恢复学习笔记(四)
- cf1051d 简单的状态压缩dp