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');

　　});

　　});