我们在日常运输代码的时候，时常因为代码过于混乱而导致时间长了代码多了之后难以搬运，即便是老司机都得打起十二分精神，比如类似于下面这样的代码（大家一眼划过就行了）：
$(document).ready(function(){
if (!getCookie("showNotice")) {
setCookie("showNotice", "1",1);
document.querySelector(".shadowBg").style.display = "flex";
document.querySelector(".new_year_notice span").addEventListener('click', function () {
document.querySelector(".shadowBg").style.display = "none";
});
}
var newBanner = mcBanner();
newBanner.switchBanner('mcBannerBox', '.mcBannerChild', '.bannerDotBox', 5000);
sliderBox({
id: document.getElementById('dynamic-list'),
direction: 'top',
intervalTime: 5000
});
sliderBox({
id: document.getElementById('honor-box'),
direction: 'left',
intervalTime: 6000,
clickLeft: document.getElementById('honor-box-left'),
clickRight: document.getElementById('honor-box-right')
});
let _countTo = document.querySelectorAll('.countTo'),
_countTo_len = _countTo.length;
for (let i=0; i < _countTo_len; i++) {
countTo({
id: _countTo[i],
});
}
slideWord(document.getElementById('slideHonor'));
$.ajax({
url:'/payusercount',
type:'GET',
dataType:'json',
success:function(data){
var _box = document.getElementById("box");
for (var i = 0; i < data.length; i++) {
_box.innerHTML += "<li><span>"+ data[i].mobile +"</span><span>已购买"+ data[i].month +"个月</span></li>"
}
sliderBox({
id: document.getElementById('box'),
direction: 'top',
intervalTime: 3000
});
}
})
$.ajax({
url:'/platform',
type:'GET',
dataType:'json',
success:function(data){
document.getElementById("statistics1").dataset.count = data[0].number;
document.getElementById("statistics2").dataset.count = data[1].number;
document.getElementById("statistics3").dataset.count = data[2].number;
document.getElementById("statistics4").dataset.count = data[3].number;
let _countTo = document.querySelectorAll('.countTo'),
_countTo_len = _countTo.length;
for (let i=0; i < _countTo_len; i++) {
countTo({
id: _countTo[i],
});
}
}
})
})
$.ajax({
url:'/news/category',
type:'GET',
dataType:'json',
success:function(data){
var artStr = '';
var categoryCount = 0;
for (var item in data.categories)
{
if(categoryCount > 2) break;
categoryCount++;
var articleCount=0;
var temStr = ''
var strHead = '';
var strBottom = '';
var str = '';
strHead += '<li><div class="news-img"><img src="'+data.categories[item].path+'" alt=""/></div><div class="news-url">';
strBottom += '</div><p class="more"><a href="/news/category/'+(data.categories[item].id)+'">查看更多>></a></p></li>'
newitem = data.categories[item].id;
for (var articleItem in data.articleLists[newitem])
{
articleCount++;
if(articleCount == 5) break;
str += "<p><a href='/news/article/"+data.articleLists[newitem][articleItem].id+"'>";
str += data.articleLists[newitem][articleItem].name
str += "</a></p>";
};
temStr = strHead + str + strBottom;
artStr += temStr
};
$('.e-artical').append(artStr);
}
})
这段代码好像还挺长的，其实仅仅是冰山一角。一个项目中如果都是这样的代码，基本可以说是废了，因为项目在日常不断的迭代当中，我们就只能不断地堆积代码，不断地让整个项目更加的混乱和臃肿。
另外不得不说的是，现在很多小伙伴都会用框架来开发项目，但是，请记住，只要你对自己有有足够的信心足够的随意，你依然可以写出很混乱的代码，相信我，真的！
下面献上整理过后的代码，相关的解释直接穿插到代码相应位置的注释中，方便理解
$(document).ready(function(){
var thisPageThings = (function () {
/*这外面可以写可以在下面的对象的方法中
多次利用的函数，在这里也可以认为是私有函数
*/
return {
/*每次增加相关代码，请在对象里面新建方法，
把新增的代码写在新建的代码里面，统一管理所有碎片代码，
把混乱的代码切割为一块块的碎片*/
addBan: function () {
$('.addBan').click(function () {
var id = $(this).data('id');
$.ajax({
url:'/addclick',
type:'GET',
data:{'id':id},
success:function(res){
console.log(res);
}
})
});
},
onceModal: function () {
var res = document.cookie.indexOf("first_visit");
if(res == -1){
var exp =new Date();
console.log(exp.getTime());
exp.setTime(exp.getTime() + (21 - exp.getHours()) * 60 * 60 * 1000); //提前一小时吧
document.cookie ="first_visit=1;expires=" + exp.toGMTString(); //5秒测试
document.querySelector(".shadowBg").style.display = "flex";
document.querySelector(".new_year_notice span").addEventListener('click', function () {
document.querySelector(".shadowBg").style.display = "none";
});
}
},
mcBannerBox: function () {
$('.mcBannerChild').length > 1 && (function () {
var newBanner = mcBanner();
newBanner.switchBanner('mcBannerBox', '.mcBannerChild', '.bannerDotBox', 5000);
}());
},
dynamicList: function () {
$('#dynamic-list').children().length && sliderBox({
id: document.getElementById('dynamic-list'),
direction: 'top',
intervalTime: 5000
});
},
honorBox: function () {
$('#honor-box').children().length && sliderBox({
id: document.getElementById('honor-box'),
direction: 'left',
intervalTime: 6000,
clickLeft: document.getElementById('honor-box-left'),
clickRight: document.getElementById('honor-box-right')
});
},
slideHonor: function () {
slideWord(document.getElementById('slideHonor'));
},
payusercountAjax: function () {
var _this = this;
$.ajax({
url:'/payusercount',
type:'GET',
dataType:'json',
success:function(data){
_this.event.publish('payusercountAjax', data);
}
});
},
platformAjax: function () {
var _this = this;
$.ajax({
url:'/platform',
type:'GET',
dataType:'json',
success:function(data){
_this.event.publish('platformAjax', data);
}
})
},
categoryAjax: function () {
var _this = this;
$.ajax({
url:'/news/category',
type:'GET',
dataType:'json',
success:function(data){
_this.event.publish('categoryAjax', data);
}
})
},
//此处放置所有的订阅
allSubscription: function () {
this.event.subscribe('payusercountAjax', function (data) {
var _box = document.getElementById("box");
for (var i = 0; i < data.length; i++) {
_box.innerHTML += "<li><span>"+ data[i].mobile +"</span><span>已购买"+ data[i].month +"个月</span></li>"
}
sliderBox({
id: document.getElementById('box'),
direction: 'top',
intervalTime: 3000
});
});
this.event.subscribe('platformAjax', function (data) {
var _countTo = document.querySelectorAll('.countTo'),
_countTo_len = _countTo.length;
for (var i=0; i < _countTo_len; i++) {
document.getElementById("statistics" + i).dataset.count = data[i].number;
countTo({
id: _countTo[i]
});
}
});
this.event.subscribe('categoryAjax', function (data) {
var artStr = '';
var categoryCount = 0;
for (var item in data.categories)
{
if(categoryCount > 2) break;
categoryCount++;
var articleCount=0;
var temStr = '';
var strHead = '';
var strBottom = '';
var str = '';
strHead += '<li><div class="news-img"><img src="'+data.categories[item].path+'" alt=""/></div><div class="news-url">';
strBottom += '</div><p class="more"><a href="/news/category/'+(data.categories[item].id)+'">查看更多>></a></p></li>';
newitem = data.categories[item].id;
for (var articleItem in data.articleLists[newitem])
{
articleCount++;
if(articleCount == 5) break;
str += "<p><a href='/news/article/"+data.articleLists[newitem][articleItem].id+"'>";
str += data.articleLists[newitem][articleItem].name;
str += "</a></p>";
}
temStr = strHead + str + strBottom;
artStr += temStr
}
$('.e-artical').append(artStr);
});
}
};
}());
//此处为上面自执行代码的相关配置,如果需要组织代码比如说一些设计模式
(function () {
//发布和订阅的方法模板,这里其实就是一个发布订阅模式
var event = {
clientList: [],
subscribe: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] =[];
}
this.clientList[key].push(fn);
},
publish: function () {
var key = Array.prototype.shift.call( arguments ),
fns = this.clientList[ key ];
if ( !fns || fns.length === 0 ) {
return false;
}
for ( var i = 0, fn; fn = fns[ i++ ]; ) {
fn.apply( this, arguments);
}
}
};
//将发布订阅的方法集成到要使用的对象中
var installEvent = function (obj) {
obj[ 'event' ] = event;
};
installEvent( thisPageThings );
//统一执行所有的代码碎片
for (var thing in thisPageThings) {
typeof thisPageThings[thing] === 'function' && thisPageThings[thing]();
}
}());
});
从一开始就让代码结构化是很有好处的，一方面提高可读性，另一方面为以后的扩展提供了想象空间，比如自执行的相关配置可以整理出一个公用文件，方便随处可用；就算只有单个地方会用到，这么个结构就很方便我们做到DRY——don't repeat yourself！
