码迷,mamicode.com
首页 > 其他好文 > 详细

前端中会用到的设计模式之单一职责原则

时间:2018-12-14 19:36:47      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:span   最小   cli   增加   bbb   代码块   开闭原则   点击   dom   

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]));
}
}

前端中会用到的设计模式之单一职责原则

标签:span   最小   cli   增加   bbb   代码块   开闭原则   点击   dom   

原文地址:https://www.cnblogs.com/dangdanghepingping/p/10120619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!