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

2024-05-10 02:58:21

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

}

}

转载于:https://www.cnblogs.com/dangdanghepingping/p/10120619.html

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

北风设计模式课程---单一职责原则
北风设计模式课程---单一职责原则一.总结一句话总结: 视频教程网上一定能找到做好笔记的博客,很大几率都不需要自己做笔记.比如北风设计模式课程,https://www.cnblogs.com/xi ...
设计模式：单一职责原则
1.单一职责原则的概念 Single Responsibility Principle,SRP: 一个类被改变的原因不能超过一个,也就是说,一个类只有一个职责,如果职责过多,代码就会臃肿,可读性更差, ...
围观设计模式(1)--单一职责原则(SRP,Single Responsibility Principle)
沉寂了一个月的时间,仔细学习了下设计模式,从本篇博文开始陆续更新设计模式系列的文章,我给它起了个有意思的名字叫做:"围观"设计模式,当然围观是加引号的,我写博文分享的目的一方面是将 ...
java 单一职责原则_设计模式之单一职责原则
对类来说,即一个类应用只负责一项职责,如类A负责两个不同的职责:职责1,职责2.当职责1需求变更时,可造成职责2执行错误,所以需要将类A的粒度分解为A1,A2. 降低类的复杂度,一个类只负责一项职责 ...
设计模式之单一职责原则
超前的设计或者过度的设计都不是良好的设计,很多时候我们等到代码在第一次变化的时候可以及时作出反应. What 就一个类(接口.结构体.方法等等)而言,应该仅有一个引起它变化的原因. Why 软件设计真 ...
嘻哈说：设计模式之单一职责原则
1.定义首先呢,我们来看一下单一职责原则的定义. 就一个类而言,应该只有一个引起它变化的原因这个说法不是很好懂,有一些抽象,不过呢,我们依旧可以尝试着理解一下. 就一个类而言,只有一个引起它变化的 ...
1. 目标精通--用java写设计模式：单一职责原则
文章目录 1.什么是单一职责原则 2. 单一职责原则的认识 3. 代码案例 3.1 一个正常的代码 3.1.1执行结果 3.1.2 分析 3.2 职责扩散 3.2.1 执行结果 3.2.2 分析 3. ...
设计模式（单一职责原则）
一 . 单一职责原则(Single Responsibility Principle, SRP) 1. 一个类只负责一个功能领域中的相应职责,或者可以定义为:就一个类而言,应该只有一个引起它变化的原 ...
【设计模式】单一职责原则
单一职责原则原则概述:一个类或者一个方法只负责一项职责或功能.如[类A]负责两个不同职责,即[职责1]和[职责2].当[职责1]需求变更而改变[类A]时,可能引用[类A对象]的[职责2]时执行错误, ...

最新文章

热门文章