我的一个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');
});
});
我的一个javascript项目的重构历程的更多相关文章
- 我发起并创立了一个 Javascript 前端库 开源项目 jWebForm
在线演示地址: ( 在线演示 云平台 由 Kooboo 提供 https://www.kooboo.com/ ) 按钮: http://iwebform.kgeking.kooboo.si ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
- 把VSO作为GitHub上JavaScript项目的免费CI服务器
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软变得更加开放后,走向开放的不仅有.NET运行时.IDE工具,还有ALM服务器核心组 ...
- 如何向Openstack社区提交一个新项目
前几天有个朋友问我:自己有一个idea不错的项目,也把基本的框架写好了,想贡献到Openstack社区,却不知道应该怎么做.正好之前我有过类似的经历,那么来分享一下我是如何向Openstack社区提交 ...
- 前端工程模块化——以一个php项目为例
实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...
- 第一个WebAPI项目
(1)新建一个ASP.NET MVC项目,取名为:MyMvcWebAPIDemo,项目类型选择WebAPI. (2)在Models中新增一个类,取名为:Product,作为我们要测试的实体模型. ...
- 如何成为一个javascript高手【转载】
原文网址: http://www.cnblogs.com/keva/p/how-to-become-a-javascript-badass.html 英文网址:http://www.clientc ...
随机推荐
- iOS 企业证书发布app 流程
企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...
- Shooting Algorithm
Shooting算法是Wenjiang提出的一种优化Lasso(L1 Regularization)和Bridge Regression的算法, 本文以Lasso为例. 对于线性回归问题$\mathb ...
- safenet 超级狗 java调用 小计
最近使用safenet 的 超级狗 在调用api的时候遇到了一些小问题记录一下. 首先safeNetdemo中的api是针对demo的 不能用于部署使用 ,真正用户部署使用的是在用工具包,超级狗开发商 ...
- MyBatis知多少(12)私有数据库
如果你从事软件开发工作有了一段时间的话,那么肯定听过关于“自己动手还是花钱购买” 的争论.该争论是说,针对一个业务问题,我们是应该自己动手构建自己的解决方案呢,还是应 该花钱购买一个声称已经解决了此问 ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- linux2.6.24内核源代码分析(2)——扒一扒网络数据包在链路层的流向路径之一
在2.6.24内核中链路层接收网络数据包出现了两种方法,第一种是传统方法,利用中断来接收网络数据包,适用于低速设备:第二种是New Api(简称NAPI)方法,利用了中断+轮询的方法来接收网络数据包, ...
- LoRaWAN协议(三)--Server端数据协议
LoRaWAN Server 端架构 LoRaWAN 的server包括 NS(Network server).AS(application server).CS(Custom server).... ...
- [转载]SharePoint 2013搜索爬外网配置
本文介绍SharePoint 2013 设置外网(Internet)爬网源: 下面是步聚: 1. 新建外部爬网源 a. 打开 “SharePoint 2013 Central Administrati ...
- python异常处理(基础)
之前在学习python的时候有整理过python异常处理的文章,不够简单也不够完整,所以决定再整理一篇,算做补充. http://www.cnblogs.com/fnng/archive/2013/0 ...
- python面向对象编程(下)
本篇详细介绍了Python 中类的成员.成员修饰符.类的特殊成员以及两个综合运用实例. 环境为:python3.5.1 类的成员 类的成员包括三大类:字段.方法和property属性 注:关于这三类成 ...