我的一个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');
	});
});