我的一个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，提交测试，没问题。
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("xxx");
})(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');
});
});
