避免全局耦合
场景
<script>
var PAGE = 20;
</script>
<script src="main.js">
</script>
全局变量跨了两个文件使用,html和main.js,对于维护main.js的开发很难去理解PAGE变量的含义。
不利于维护
。
JS/CSS/HTML的耦合
场景
//bad
$('.bar').css({
position:fixed;
top:0;
left:0;
})
//good
$('.bar').addClass('fixed');
尽量不要在js中给元素添加样式,把样式统一放到css中去维护
,js中的样式其它开发很难在浏览器中发现来源。
减少重复代码
场景
ajax请求的封装
//bad
$('#search').on("click",function(){
var formData = getFormData();
$.ajax({
url:'./search',
data:formData,
success:function(data){
showResult(data);
}
})
});
$('input').on("change",function(){
//把用户的搜索条件展示进行改变
changeInputFilterShow();
var formData = getFormData();
$.ajax({
url:'./search',
data:formData,
success:function(data){
showResult(data);
}
})
});
//better
function getAndShowData(){
var formData = getFormData();
$.ajax({
url:'./search',
data:formData,
success:function(data){
showResult(data);
}
})
}
$('#search').on("click",function(){
var formData = getFormData();
getAndShowData()
});
$('input').on("change",function(){
//把用户的搜索条件展示进行改变
changeInputFilterShow();
getAndShowData()
});
进一步可以将ajax请求封装成一个公共模块,所有发请求的处理都可以使用该模板,传参数,返回结果。
整体思路:出现了重复代码 --> 封装成一个函数 --> 封装成一个模块 --> 封装成一个插件
使用策略模式
场景
//bad
function popCallback(popType){
switch(popType){
case "register":
//do nothing
break;
case "favHouse":
favHouse();
break;
case "saveSearch":
saveSearch();
break;
}
}
//good
//pop-callback.js
var popCallback = {
favHouse: function(){
},
saveSearch: function(){
}
}
//main.js
var popCallback = require("pop-callback");
if(typeof popCallback[popType] === "function"){
popCallback[popType]();
}
对扩展开发,对修改封闭,面向对象的开闭原则。