很简单的一个应用 通过按钮来限制输入范围
,这样的话再配合服务器端检测就能在一定范围内限制输入数据,这次从重构的角度讲解如何一步步将代码变得更加优美:)
1.原始代码,业务逻辑与ui混合
function Increaser(domInput,domAction){
this.input=domInput;
this.domAction=domAction;
this.domAction.on("click",this.increasing,this);
}
Increaser.prototype.increasing=function(e){
if(this.input.get("value")=="3"){
this.input.set("value",0);
}else{
this.input.set("value",parseInt(this.input.get("value"))+1);
}
};
new Increaser(Y.one("#v"),Y.one("#r"));
2.利用Observer模式重构
改进类,区分业务domain与ui,duplicate observed data,
将数据复制到一个领域对象中,建立一个observer模式,用以同步领域对象和gui对象内的重复数据
function GuiIncreaser(domInput, domAction) {
this.input = domInput;
this.domAction = domAction;
this.domainIncreaser = new DomainIncreaser(this.input.get("value"));
this.domainIncreaser.addObserver(this);
this.domAction.on("click", this.increasing, this);
}
GuiIncreaser.prototype = {
constructor: GuiIncreaser,
increasing: function (e) {
this.domainIncreaser.increase();
},
//observer
update: function (v) {
this.input.set("value", v);
}
}
function DomainIncreaser(v) {
this.v = v;
this.observers = [];
}
DomainIncreaser.prototype = {
constructor: DomainIncreaser,
addObserver: function (o) {
if (Y.Array.indexOf(this.observers, o) == -1) {
this.observers.push(o);
}
},
checkChange: function () {
if (this.v == "4") this.v = 0;
},
//observable
notify: function () {
for (var i = this.observers.length - 1; i >= 0; i--) {
this.observers[i].update(this.v);
}
},
increase: function () {
this.v = parseInt(this.v) + 1;
this.checkChange();
this.notify();
}
}
new GuiIncreaser(Y.one("#v"),Y.one("#r"));
3.利用 attribute 简化
利用 yui3 attribute 简化2,将domain和gui重新结合,利用yui3 attribute来实现属性与ui的分离与同步
function AttributeIncreaser(domInput, domAction) {
this.input = domInput;
this.domAction = domAction;
var attrs = {
"v": {
value: this.input.get("value"),
//domain业务逻辑
setter: function (v) {
if (v == "4") return 0;
}
}
};
this.addAttrs(attrs);
//domain业务逻辑
this.domAction.on("click", this.increase, this);
//属性与gui同步
this.after("vChange", this.afterVChange, this);
}
AttributeIncreaser.prototype = {
constructor: AttributeIncreaser,
increase: function () {
this.set("v", parseInt(this.get("v")) + 1);
},
afterVChange: function (e) {
this.input.set("value", e.newVal);
}
};
Y.augment(AttributeIncreaser, Y.Attribute);
new AttributeIncreaser(Y.one("#v"), Y.one("#r"));
2,3 的另一个好处是尽可能少得 touch dom,提高了运行效率,这对于复杂应用至关重要。
分享到:
相关推荐
python3 server.py 127.0.0.1 8888 ...AttributeError: module ‘os’ has no attribute ‘exit’ 部分代码入下: from socket import * import sys,os #实现登录 def do_login(s,user,name,addr): for i in user: i
AttributeError: module 'tensorflow.compat.v1' has no attribute 'contrib'的问题您具体怎么解决问题具体解决的seq_loss.py文件
NULL 博文链接:https://wuhuizhong.iteye.com/blog/2228085
调试递归神经网络(RNN)的时候出现如下错误: AttributeError: module 'tensorflow.contrib.rnn' has no attribute 'core_rnn_cell' 顺便问一句,资源分怎么设置免费啊
问题描述及解决: 原创文章 1获赞 1访问量 17 关注 私信 展开阅读全文 作者:Branson233
成功解决AttributeError: 'str' object has no attribute 'to'
无需降级scipy的情况下解决AttributeError: module ‘scipy.misc’ has no attribute ‘imread’, AttributeError: module ‘scipy.misc’ has no attribute ‘imresize’, AttributeError:module ‘scipy.misc’ ...
问题解决:AttributeError: module ‘paddle.fluid’ has no attribute ‘EndStepEvent’问题描述解决思路问题解决 问题描述 在使用paddle.fluid导入EndStepEvent过程中 global step if isinstance(event, fluid....
主要介绍了解决python多线程报错:AttributeError: Can't pickle local object问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Pycharm关于AttributeError: ‘DataFrame’ object has no attribute ‘score’的错误 import pandas data = pandas.read_excel( r"C:\Users\ASUS\Desktop\0012\data7.1.2.xlsx", ) data.score.describe() # 逐项...
主要跟大家介绍了关于在Python3下错误AttributeError: 'dict' object has no attribute 'iteritems'的分析与解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
今天安装pymysql时发生了错误AttributeError: module ‘pip’ has no attribute ‘main’ 解决方法如下: 1.找到PyCharm 2017.1\helpers\packaging_tool.py 2.打开packaging_tool.py,注意,最好用pycharm打开,因为...
在学习《python数据处理》时遇到了安装slate出错,这个问题不仅在slate、在之前按照pycurl时也出现,一直没有解决,原因差不多,都是这个报错,涉及python setup.py egg_info Check the logs for full command ...
如图示,会出现如AttributeError: ‘DataParallel’ object has no attribute ‘xxx’的错误。 原因:在使用net = torch.nn.DataParallel(net)之后,原来的net会被封装为新的net的module属性里。 解决方案:所有在...
import pymysql #创建连接 con = pymysql.connect(host='localhost',user='root',password='123456',port=3306,database='zhy') #创建游标对象 cur = con.curson() #编写查询的sql语句 sql = 'select * from t_...
【问题描述】 今天在搭建django-rest-swagger的时候出现了如下错误: Traceback (most recent call last): File "D:\anaconda\lib\site-packages\django\core\handlers\exception.py", line 34, in inner ...
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面...class configWin(ui_configWin.Ui_configWin,QtWidgets.QWidget): def __init__(self,parent=None): super().__init__(parent) self.setupUi(self) sel
补充知识:Pandas使用DataFrame出现错误:AttributeError: ‘list’ object has no attribute ‘astype’ 在使用Pandas的DataFrame时出现了错误:AttributeError: ‘list’ object has no attribute ‘astype’ 代码...
报错信息: Traceback (most recent call last): File “D:/flaskProject/test.py”, line 35, in test pool.apply(self.out, args=(i,)) File “Python37-32\lib\multiprocessing\pool.py”, line 261, in apply ...