【重构笔记04】重新组织数据（我好像明白了什么是数据与行为分离）

关于继承

因为在后续的章节中，我们经常会用到继承相关的知识，所以在这里在说一说javascript中的继承问题

首先，我们来看一个后续会经常用到的方法，我们会用他来创建类

var base = {};
var slice = [].slice;
base.Class = function (supClass, childAttr) {
//若是第一个是类，便是继承；如果第一个是对象，第二个参数无意义，便是新建一个类
if (typeof supClass === 'object') {
childAttr = supClass;
supClass = function () { };
}
//新建临时类，最后作为新类返回，可能是继承可能是新类
/***
这里非常关键，为整个方法的入口，一定得看到初始化后，这里会执行构造函数
***/
var newClass = function () {
//每个类都会使用该函数，作为第一步初始化，告诉类有哪些属性
this._propertys_ && this._propertys_();
//第二步初始化，相当于子类的构造函数，比较重要，初始化方法不一定会出现
this.init && this.init.applay(this, arguments);
};
//发生继承关系，可能为空类
newClass.prototype = new supClass();

//新建类必定会包含初始化函数，要么继承，如果没继承，这里也会新建
var supInit = newClass.prototype.init || function () { };
//传入的子对象可能包含他的初始化方法，如果有一定要使用，至于父类使用与否看子类心情
var childInit = childAttr.init || function () { };
//父类的properys方法便是指定会具有哪些属性，一定会执行
var _supAttr = newClass.prototype._propertys_ || function () { };
//子类的初始化也一定会触发，先执行父类再执行子类
var _childAttr = childAttr._propertys_ || function () { };

//为新建类（可能继承可能新建）初始化原型，上面的会重写，没有就不管他
for (var k in childAttr) {
childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);
}

//处理继承情况
if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {
//根据父类重写新建类构造时会用到的方法
newClass.prototype.init = function () {
var scope = this;
var args = [function () {
//第一个参数为父类的初始化函数，执行与否看子类心情
supInit.apply(scope, arguments)
} ];
childInit.apply(scope, args.concat(slice.call(arguments)));
};
}
//前面说到的，父类与子类的初始化方法一定会执行，先父后子
newClass.prototype._propertys_ = function () {
_supAttr.call(this);
_childAttr.call(this);
};

//成员属性也得继承
for (var k in supClass) {
supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);
}
return newClass;
};

现在，我们使用上述方法创建一个父类AbstractView，与两个实际的View来说明继承的重要
如果每个页面都重新加载页面的话，对我们来说毫无意义，说明继承问题还是要单页，于是我们实现一个简单的MVC模式

简单的MVC

首先是我们的Control

var Control = base.Class({
_propertys_: function () {
this.body = $('body');
this.isCreateViewPort = false;
this.defaultView = 'Index';
this.views = {};
this.interface = {
forward: bind(this, this.forward)
};
},
init: function () {
this.loadView(this.defaultView, this.interface);
},
createViewPort: function () {
if (this.isCreateViewPort) return;
this.viewPort = $('<div id="viewPort"></div>');
this.body.append(this.viewPort);
this.isCreateViewPort = true;
},
loadView: function (viewName) {
this.createViewPort();
var v = this.views[viewName];
if (!v) {
var View = window[viewName];
v = new View(this.interface);
this.viewPort.append(v.root);
var events = v.getEvents();
this._addEvent(v.root, events);
this.views[viewName] = v;
}
for (var k in this.views) {
this.views[k].hide();
}
v.show();
},
forward: function (viewName) {
this.loadView(viewName);
},
_addEvent: function (root, events) {
root = root || this.body;
//事件绑定
for (var k in events) {
var k_t = k.split(',');
root.find(k_t[0]).on(k_t[1], bind(this, events[k]));
}
}
});

然后是我们的父级View

var AbstractView = base.Class({
init: function (interface) {
//opts为0/false等情况不予考虑
this.interface = interface;
this.root = $('<div id="' + this.viewName + '"></div>');

},
onShow: function () {
console.log('onshow');
},
show: function () {
this.onShow();
this.root.show()
},
onHide: function () {

console.log('onHide');
},
hide: function () {
this.onHide();
this.root.hide();
},
forward: function (viewName) {
this.interface.forward(viewName);
}
});

以下是两个子集View

var Index = base.Class(AbstractView, {
_propertys_: function () {
this.viewName = 'index';
},
init: function (supInit, interface) {
supInit(interface);
this.initDom();
},
initDom: function () {
//index模板，此处我故意将id写成一样
var tmpt = [
'我是index<input type="button" id="goto" value="去列表页">'
].join('');
this.root.html(tmpt);
},
getEvents: function () {
return {
'#goto,click': function (e) {
this.forward('List');
}
};
}
});

var List = base.Class(AbstractView, {
_propertys_: function () {
this.viewName = 'list';
},
init: function (supInit, interface) {
supInit(interface);
this.initDom();
},
initDom: function () {
var tmpt = [
'我是list<input type="button" id="goto" value="回首页">'
].join('');
this.root.html(tmpt);
},
getEvents: function () {
return {
'#goto,click': function (e) {
this.forward('Index');
}
};
}
});

然后我们调用后就有感觉了，请各位看demo

http://sandbox.runjs.cn/show/dg55tgdo

这个代码虽然简单，但是还是可以说明一些问题：
① 各个VIew独立（index与list），方便各个操作，control作为总驱动，提供各种全局接口
② 由于都是继承自AbstractView，比如我现在想在个view展示前执行一点逻辑判断的话，只需要在onload中

onShow: function () {
console.log('onshow');
console.log(this.viewName + '显示前的一些逻辑');
}

因为这个代码也没有什么特点，只不过简单模拟MVC了就不多说，在此希望能说清楚继承的优点，于是继续今天的话题吧
PS：今天后，后续代码中，一旦与类有关，全部使用上述代码了

自封装字段

我们有时直接访问一个字段，但与字段直接的耦合关系会逐步变的笨拙
这时为这个字段建立取值/设值的函数，并使用函数获取字段也许是一不错的选择

var _Class = function () {
this.low;
this.high;
};
_Class.prototype = {
includes: function (arg) {
return arg >= this.low && arg <= this.high;
}
};

//变成这个样子
var _Class = function () {
this.low;
this.high;
};
_Class.prototype = {
includes: function (arg) {
return arg >= this.getLow() && arg <= this.getHigh();
},
getLow: function () {
//do something
return this.low;
},
getHigh: function () {
//do something
return this.high;
}
};

在字段访问方式上，有时我们认为将变量定义在类中，于是我们可以自由访问，但有时我们却会间接访问
间接访问带来的好处就是，子类可以复写函数改变获取数据的途径，并且数据的管理方式更加灵活（js中就比较玄了）
我们可以先使用直接获取方式，后面换为间接方式

怎么做？

① 为待封装字段建立取值/设置函数
② 找出该字段所有引用点，将他们替换为函数
③ 测试

var InitRange = function (opts) {
this.low = opts.low;
this.high = opts.high;
};
InitRange.prototype = {
includes: function (arg) {
return arg >= this.low && arg <= this.high;
},
grow: function (factor) {
this.high = this.high * factor;
}
};
/*
------看我重构--------
*/
var InitRange = function (opts) {
this.low = opts.low;
this.high = opts.high;
};
InitRange.prototype = {
includes: function (arg) {
return arg >= this.getLow && arg <= this.getHigh;
},
grow: function (factor) {
this.setHigh(this.getHigh() * factor)
},
getLow: function () {
return this.low;
},
getHigh: function () {
return this.high;
},
setLow: function (arg) {
this.low = arg;
},
setHigh: function (arg) {
this.high = arg;
}
};

使用本重构时，我们需要注意“在构造函数中使用设置函数”的情况
一般来说，设值函数被认为应该在对象创建后再使用，所以初始化过程中的行为可能与设置函数的行为不同
这个时候就不要构造函数时候初始化了，这个时候如果我们使用了子类，优势就比较明显了

以对象取代数据值

我们有一个数据项，需要与其他数据和行为一起使用才有意义，那么将数据变为对象
刚开始开发时，我们的数据代码会比较简单，但随着开发的进度，我们会发现数据不是那么简单了......
比如开始我们使用一个字符串来表示电话号码，但是后面电话拥有格式化、区号等行为，那么就该对象化了

来个例子说明一番，这里有一个订单的Order类

var Odrer = function (opts) {
this.customer = opts.customer
};
Odrer.prototype = {
getCustomer: function () {
return this.customer;
},
setCustomer: function (args) {
this.customer = args;
}
};

//使用的代码可能如下
function numberOfOrdersFor(orders, customer) {
var result = 0;
for (var k in orders) {
if (orders[k] == customer) result++;
}
return result;
}

var Odrer = function (opts) {
this.customer = opts.customer
};
Odrer.prototype = {
getCustomer: function () {
return this.customer;
},
setCustomer: function (args) {
this.customer = args;
}
};

//使用的代码可能如下
function numberOfOrdersFor(orders, customer) {
var result = 0;
for (var k in orders) {
if (orders[k].getCunstomer() == customer) result++;
}
return result;
}

//这里我们需要建立一个Customer的类
var Customer = function (name) {
this.name = name
};
Customer.prototype = {
getName: function () {
return this.name;
}
};

//第二步，我们将order中的customer字段类型修改一番（js其实不存在类型概念）
var Odrer = function (opts) {
this.customer = new Customer(opts.customer);
};
Odrer.prototype = {
getCustomer: function () {
return this.customer.getName();
},
setCustomer: function (args) {
this.customer = new Customer(args);
}
};

//第四步就将用到的地方改了
function numberOfOrdersFor(orders, customer) {
var result = 0;
for (var k in orders) {
if (orders[k].getCustomer() == customer) result++;
}
return result;
}

值对象改为引用对象/引用对象改为值对象

我们从一个类衍生出许多彼此相等的实例时，我们会希望他只是一个对象

在许多系统中，我们可以对对象做一个分类：引用对象和值对象
前者像客户、账户这样的东西，每个对象都代表真实世界中的一个实物，可以直接使用==来检测相等
后者就像日期、钱这样的东西，他完全由其所含数据值来定义，不在意副本的存在

PS：周一搞了一个通宵的班，感觉今天状态不行啊。。。。。

赋值被监视数据

我们有一些数据在页面UI中，而领域函数也需要访问这些数据

那么将数据赋值到一个领域对象中，建立一个Observer模式，用以同步领域对象和UI对象的重复数据

一个分层良好的系统，应该将处理用户界面和处理业务代码分开！！！

因为我们可能需要使用不同的用户界面来表现相同的业务，这是绝对会发生的，如果同一界面承担两种责任，那么用户界面就复杂了

而且，与UI分离后，领域对象的维护和演化将会更加容易，我们甚至可以让不同的开发者负责不同部分的开发

尽管可以轻松将行为划分到不同部位，数据却不能如此。同一项数据可能既内嵌于UI中又保存于领域模型中

PS：以前端来说就是既在标签中，又在函数中（MVC很大程度就是解决这个问题）

如果遇到代码以两层方式开发，业务逻辑内嵌于用户界面中，就应该将行为分离出来了

至此我终于知道原来自己说了一句行为与数据分离是什么意思了！！！

主要工作就是函数的分离和搬迁，移动数据即是将数据移往对象，并且提供数据同步机制（感觉有点MVVM了）

怎么做？

① 修改现有类，使其成为领域类的Observer

如果没有领域类就创建一个/如果没有“从展现类到领域类”的关联，就将领域类保存于展现类的一个字段中

② 针对UI中的数据使用自封装字段处理

③ 在事件处理函数中调用设值函数，更新UI组件

在事件处理函数中放一个设值函数，利用他将UI组件更新为内存中的值，虽然只是拿他的值为他设定而已，但是这样的设值函数便是允许其中任何动作得以于日后被执行起来的意义所在

进行这个改变时，对于组件，不要使用取值函数，应该直接取用，因为我们后面会修改取值函数，让他从领域对象取值

④ 在领域类中定于数据及其相关访问函数

确保领域类中的设值函数能干触发观察者模式的通信机制

对于被观察的数据，在领域中使用与展现类所用的相同类型（一般是字符串）来保存

⑤ 修改展现类的访问函数，将他们的操作对象改为领域对象

⑥ 修改观察者的update方法，使其从相应的领域对象中将所需数据复制给UI

这个类容比较重要，于是我们来个例子吧：

例子比较简单，当用户修改文本中的数字时，另外两个文本框中的文本框自动更新

修改start则length改变，修改length则end改变



首先，我们所有函数都写在一起：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
start:<input type="text" id="start" value="4" /><br />
end:<input type="text" id="end" value="12"/><br />
length:<input type="text" id="length" value="8" />
</body>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var start = $('#start');
var end = $('#end');
var len = $('#length');

//为每个input绑定失去焦点事件
start.blur(calculateLength);
end.blur(calculateLength);
len.blur(calculateEnd);

function calculateLength() {
len.val(parseInt(end.val()) - parseInt(start.val()));
}
function calculateEnd() {
end.val(parseInt(len.val()) + parseInt(start.val()));
}
</script>
</html>

这个代码其实没什么问题，但是我们现在要把与展现无关的逻辑从UI剔除（对前端来说有点难）

说白了就是将calculate*类代码提出来，于是我们需要在页面外使用start等文本框的值，所以这些数据也会被复制，并且需要与UI保持同步

这里我们先建立一个领域类，让他与我们的page产生关联，作为数据传输的枢纽，然后再将具体的运算放到其它地方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
start:<input type="text" id="start" value="4" /><br />
end:<input type="text" id="end" value="12"/><br />
length:<input type="text" id="len" value="8" />
<h3>变形</h3>
<div id="change"></div>
</body>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var slice = [].slice;
var bind = function (scope, fun, args) {
args = args || [];
return function () {
fun.apply(scope, args.concat(slice.call(arguments)));
};
};
var M = function () {
this.start = 0;
this.end = 0;
this.len = 0;
};
M.prototype = {
getStart: function () {
return this.start;
},
setStart: function (args) {
this.start = args;
},
getEnd: function () {
return this.end;
},
setEnd: function (args) {
this.end = args;
},
getLen: function () {
return this.len;
},
setLen: function (args) {
this.len = args;
},
calculateLength: function () {
//此处可以加入其它逻辑
var len = parseInt(this.end) - parseInt(this.start);
this.setLen(len);
},
calculateEnd: function (m) {
var end = parseInt(this.len) + parseInt(this.start)
this.setEnd(end);
}
};

var V = function (s, e, l) {
this.start = s;
this.end = e;
this.len = l;
this.m ;
};
V.prototype = {
setM: function (args) {
this.m = args;
this.m.setStart(this.start.val());
this.m.setEnd(this.end.val());
this.m.setLen(this.len.val());
},
focusLost: function () {
this.start.blur(bind(this, this.start_blur));
this.end.blur(bind(this, this.end_blur));
this.len.blur(bind(this, this.len_blur));

},
start_blur: function () {
this.m.setStart(this.start.val());
this.calculateLength();
},
end_blur: function () {
this.m.setEnd(this.end.val());
this.calculateLength();
},
len_blur: function () {
this.m.setLen(this.len.val());
this.calculateEnd();
},
calculateLength: function () {
this.m.calculateLength();
this.update();

},
calculateEnd: function () {
this.m.calculateEnd();
this.update();

},
update: function () {
var s1 = this.m.getStart();
var s2 = this.m.getEnd();
var s3 = this.m.getLen();

this.start.val(this.m.getStart());
this.end.val(this.m.getEnd());
this.len.val(this.m.getLen());
}
};

var v1 = new V($('#start'), $('#end'), $('#len'));
var m1 = new M();
v1.setM(m1);
v1.focusLost();

//这样做的好处就是我可以轻易变形
//下面的重复代码我就不管了
var change = $('#change');
var s1 = $('<select id="s1"></select>');
var s2 = $('<select id="s2"></select>');
var s3 = $('<select id="s3"></select>');
change.append(s1);
change.append(s2);
change.append(s3);

for (var i = -100; i < 100; i++) {
s1.append($('<option>' + i + '</option>'));
s2.append($('<option>' + i + '</option>'));
s3.append($('<option>' + i + '</option>'));
}

var v2 = new V($('#s1'), $('#s2'), $('#s3'));
var m2 = new M();
v2.setM(m2);
v2.focusLost();
</script>
</html>

demo地址：

http://sandbox.runjs.cn/show/bjsc6zui

结语

今天暂时这样，我们后面继续