利用Attribute复建：业务与UI分离

利用Attribute重构：业务与UI分离

很简单的一个应用 通过按钮来限制输入范围 ，这样的话再配合服务器端检测就能在一定范围内限制输入数据，这次从重构的角度讲解如何一步步将代码变得更加优美：）

1.原始代码，业务逻辑与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,提高了运行效率，这对于复杂应用至关重要。

?

?

?