1:设计模式应用不应用,取决于对现在和未来判断后的取舍.没必要用尽量不用!
2.设计模式的目的是 减少复杂度(一个函数中包含的功能个数), 降低耦合度(一个对象与其他对象的关系个数).耦合度不能为0,越小越好,复杂度最小是1;
如一个function里,即用ajax来获取数据,又把返回数据渲染到页面,复杂度就是2,可以分开,降低复杂度必然增加至少一条关系,即增加了总体的耦合度.但个体的耦合度是1,这没有什么不好.
3复杂度的降低靠单一职责原则,开闭原则和里氏代换原则.
单一职责原则:一个函数只有一个功能.
一个例子:
//打开网站后,走缓存,渲染;
//如果在线,点击按钮,走网络,并添加缓存
//如果不在线,点击按钮也不生效.
先拆分功能: 缓存有关的添加和获取, 渲染 , 网络请求数据.
然后这样拆分以后,就可以有很大的扩展性,并且可以很清晰的看出来各个代码块是干嘛的.用起来也很顺手
//获取网络数据功能
function GetData(ul, data,callBackArr) {
this.getData = function(){
$ajax({
ul: ul,
data: data,
success: function(json){
var arr = JSON.parse(json);
callBackArr.forEach(function(ele){
ele(arr);
})
}
})
}
}
// 渲染功能
function Render(dom) {
this.dom = dom;
this.render = function () {
var html = '';
arr.forEach(element => {
html += '<li>' + element + '</li>'
});
this.dom.append($html)
}
}
//设置和取得缓存功能
function CacheData(type,data) {
this.setCacheData = function(type,data){
localStorage.setItem(type,data)
}
this.getCacheData = function(type){
return localStorage.getItem(type);
}
}
var oC = new CacheData()
var oRender = new Render('ul');
oRender.render(oC.getCacheData(type));
btn.onclick = function(){
if(navigator.onLine){
oRender.render(GetData(ul, data,[oRender.render,oC.setCacheData]));
}
}
function GetData(ul, data,callBackArr) {
this.getData = function(){
$ajax({
ul: ul,
data: data,
success: function(json){
var arr = JSON.parse(json);
callBackArr.forEach(function(ele){
ele(arr);
})
}
})
}
}
function Render(dom) {
this.dom = dom;
this.render = function () {
var html = '';
arr.forEach(element => {
html += '<li>' + element + '</li>'
});
this.dom.append($html)
}
}
//把缓存功能作为一个单独的模块拿出来,
function CacheData(type,data) {
this.setCacheData = function(type,data){
localStorage.setItem(type,data)
}
this.getCacheData = function(type){
return localStorage.getItem(type);
}
}
var oC = new CacheData()
var oRender = new Render('ul');
oRender.render(oC.getCacheData(type));
btn.onclick = function(){
if(navigator.onLine){
oRender.render(GetData(ul, data,[oRender.render,oC.setCacheData]));
}
}