AngularJS沉思录（二）视图模型的层次-守望者-AIR技术交流

破晓发表于 2016-8-11 11:24:25

AngularJS沉思录（二）视图模型的层次

<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">视图模型的层次</h2><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">嵌套作用域的数据继承</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">在Angular中，存在作用域的继承。所谓作用域的继承，是指：如果两个视图有包含关系，内层视图对应的作用域可以共享外层视图作用域的数据。比如说：<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><body ng-app="test">
<div ng-controller="OuterCtrl">
 <span ng-bind="a">
 <div ng-controller="InnerCtrl">
 <span ng-bind="a">
 <span ng-bind="b">
 </div>
</div>
</body></code></pre><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">var app = angular.module("test", []);

app.controller("OuterCtrl", function ($scope) {
$scope.a = 1;
});

app.controller("InnerCtrl", function ($scope) {
$scope.b = 100;
});</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">内层的这个div上，一样也可以绑定变量a，因为在Angular内部，InnerCtrl的实例的原型会被设置为OuterCtrl的实例。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">我们改变一下这个示例，如果在内层作用域上，对a进行赋值会怎样？<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><body ng-app="test">
<div ng-controller="OuterCtrl">
 <span ng-bind="a">
 <div ng-controller="InnerCtrl">
 <span ng-bind="a">
 <span ng-bind="b">
 <button ng-click="increasea()">increase a</button>
 </div>
</div>
</body></code></pre><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">var app = angular.module("test", []);

app.controller("OuterCtrl", function ($scope) {
$scope.a = 1;
});

app.controller("InnerCtrl", function ($scope) {
$scope.b = 100;

$scope.increasea = function() {
 $scope.a++;
};
});</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">点击这个按钮的时候，发现了一个问题，内层有了a，而且值在增加，外层的不变了。这是为什么呢？<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">因为它其实是通过原型集成来做到这样的。像上面这样的包含关系，内层scope的prototype被自动设置为外层的scope了，所以，才可以在内层使用这个a。这时候在内层给a赋值，当然就赋到它自己上了，不会赋值到原型的那个对象上。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">同理，如果内外两层作用域上存在同名变量，在内层界面赋值的时候只会赋到内层作用域上的那个变量，不会影响到外层的。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">那么，除了显式的ng-controller，Angular还会在什么地方引入视图模型的继承呢，主要是这些：<h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">数组和对象属性的迭代</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">在Angular里面，有ng-repeat指令，可以用于遍历数组元素、对象属性。<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><ul>
<li ng-repeat="member in members">{{member.name}}</li>
</ul></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">单从这个片段看，看不出视图继承的意义。我们把这个例子再拓展一下：<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><ul>
<li ng-repeat="member in members">{{member.name}} in {{teamname}}</li>
</ul></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">它对应的视图模型是这么个结构：<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">function TeamCtrl($scope) {
$scope.teamname = "Disney";

$scope.members = [
 {name: "Tom Cat"},
 {name: "Jerry Mouse"},
 {name: "Donald Duck"},
 {name: "Micky Mouse"}
];
}</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">好了，注意到这里，teamname跟members里面的成员其实不在一层作用域，因为它给循环的每个元素都建立了单独的作用域，如果不允许视图模型的继承，在li里面是没法访问到teamname的。为了让这段话更容易理解，我作个转换：<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">var teamname = "Disney";
var members = [
{name: "Tom Cat"},
{name: "Jerry Mouse"},
{name: "Donald Duck"},
{name: "Micky Mouse"}
];

for (var i=0; i<members.length; i++) {
var member = members[i];
console.log(member.name + " in " + teamname);
}</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">ng-repeat内部给每个循环造了个作用域，如果不这么做，各个member就无法区分开了。在这种情况下，如果没有作用域的继承关系，在循环内，就访问不到这个teamname。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">在这里，我觉得不一定非要造子作用域，它搞子作用域的原因无非是为了区分每个循环变量，但其实可以换一种写法，比如，avalon框架里的repeat写法就很好，在属性上指定循环元素变量名，然后给每个元素生成ObjectProxy，包装每个元素的数据，附带$index等有可能在循环过程中访问的东西。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">因此，这里其实不必出现Scope的新实例，而是用一个ObjectProxy返回元素数据即可。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">很可能我们的场景还有些简单，再来个复杂的：<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="TestCtrl">
<div ng-repeat="boy in boys">
 <span style="color:red" ng-bind="boy.name">
 <span style="color:green" ng-bind="boy.age">
 <button ng-click="boy.growUP()">grow up</button>
</div>
</div></code></pre><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">function TestCtrl($scope){
$scope.boys = [{
 name: "Tom",
 age: 5,
 growUP: function() {
 this.age ++;
 }
}, {
 name: "Jerry",
 age: 2,
 growUP: function() {
 this.age ++;
 }
}];
}</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这里，每个boy都能自增自己的年龄，原理与上面相同，这里面growUp方法的调用，用ObjectProxy应当也能处理。<h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">动态包含</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">另外一个造成视图继承的原因是动态引入界面模板，比如说ng-include和ng-view等。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">inner.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div>
<span ng-bind="name">
</div></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">outer.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="OuterCtrl">
<span ng-bind="name">
<div ng-include="'inner.html'"></div>
</div></code></pre><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">function OuterCtrl($scope) {
$scope.name = "outer name";
}</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">对上面这个例子来说，ng-include会创建一层作用域，如果不允许作用域继承，那么内层的HTML中就拿不到name属性。那么，为什么ng-include一定要创建子作用域呢？在这个例子里，创建子作用域并不一定必要，直接让两层HTML模板对应同一个视图模型的实例，不就可以了？<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">我感觉他可能是为了省事，否则要判断动态include进来的这个HTML片段中，是否还指定了别的控制器，如果不管三七二十一就创建子作用域，这事就省了。ng-view跟ng-include的情况还不一样，因为ng-view可能会在路由里面指定新的控制器，所以判断起来就更复杂了，基本上只能创建新作用域。<h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">视图模型的继承好不好？</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">视图模型的继承在很多情况下是很方便，但造成问题的可能性也会非常多。真的需要这样的共享机制吗？<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">大家都知道，组件化是解决开发效率不高的银弹，但具体如何做组件化，人们的看法是五花八门的。Angular提供的控制器，服务，指令等概念，把不同的东西隔离到各自的地方，这是一种很好的组件化思路，但与此同时，界面模板层非常乱。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">我们可以理解它的用意：只把界面模板层当作配置文件来使用，压根就不考虑它的可复用性。是啊，反正只用一次，就算我写得乱，又怎样呢？可是在Angular中，界面模板是跟控制器密切相关的。我很怀疑控制器的可重用性，注意，它虽然叫控制器，但其实更应该算视图模型。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">从可重用性角度来看，如果满分5分的话，整个应用的这些部分的得分应当是这样：<ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: square; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><li>服务，比如说，对后端RESTful接口的AJAX调用，对本地存储的访问等，5分</li><li>控制器（也就是视图模型），2-3分</li><li>指令，这个要看情况，有的指令是当作对HTML元素体系的扩展来用的，有些是其他事情的<ul style="padding-left: 30px; margin-top: 14px; margin-bottom: 14px; list-style-type: disc;"><li>纯UI类型的指令，也可以算是控件，比如DatetimePicker，5分</li><li>有些用于沟通DOM跟视图模型的指令，2分</li></ul></li><li>界面模板，这个基本就没有重用性了，1分</li></ul><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">从这里我们可以看到，以可重用度来排序，最有价值的是服务和控件，服务代表着业务逻辑的基本单元，控件代表了UI层的最小单元，所以它们是最值得重用的。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">现在来看看中间层：视图模型值得重用吗？还是值得的。比如说，同一视图模型以不同的界面模板来展现，这就是一种很好的方式。如果说，同一个视图模型要支持多个界面模板，这些界面模板使用的模型字段或者方法有差异，也可以考虑在视图模型中取并集。例如：<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">function TestCtrl($scope) {
$scope.counter = 0;

$scope.increase = function() {
 $scope.counter++;
};

$scope.decrease = function() {
 $scope.counter--;
};
}</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">1.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="TestCtrl">
<span ng-bind="counter">
<button ng-click="increase()">increase</button>
</div></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">2.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="TestCtrl">
<span ng-bind="counter">
<button ng-click="decrease()">decrease</button>
</div></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">3.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="TestCtrl">
<span ng-bind="counter">
<button ng-click="increase()">increase</button>
<button ng-click="decrease()">decrease</button>
</div></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">三个视图的内容是有差异的，但它们仍然共用了同一个视图模型，这个视图模型的内容包含三个视图所能用到的所有属性和方法，每个视图各取所需，互不影响。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这时候，我们再来看视图模型的继承会造成什么影响。如果是我们有了视图模型的继承关系，就意味着界面模板的包含关系必须跟视图模型的继承关系完全一致，这个很大程度上是增加了管理成本的，也造成了视图模型的非通用性。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">刚开始提到的例子，如果内外层有同名变量，要在内层作用域中显式变更外层的变量，需要从scope.$parent里面去赋值。而一旦在代码中写了$parent这样的东西，就意味着视图模型只能以这样的方式包含了，甚至说，如果不想变更它们的包含关系，只想变更包含层级，也是不可能的，那说不定就要变成$parent.$parent了。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">我们看个场景：<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><body ng-app="test">
<div ng-controller="OuterCtrl">
 <span ng-bind="a">
 <div ng-controller="InnerCtrl">
 <span ng-bind="a">
 <button ng-click="increaseOuterA()">increase outer a</button>
 </div>
</div>
</body></code></pre><pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">var app = angular.module("test", []);

app.controller("OuterCtrl", function ($scope) {
$scope.a = 1;
});

app.controller("InnerCtrl", function ($scope) {
$scope.a = 100;

$scope.increaseOuterA = function() {
 $scope.$parent.a++;
};
});</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这里，因为在InnerCtrl中显式调用了$parent，所以它跟OuterCtrl的视图关系就只能非常固定了。如果说，我们这时候把里面这个div提取出来，放在单独的HTML文件中，然后使用ng-view或者ng-include引入它，因为它们本来就要创建一级作用域，所以会导致这个中间又隔了一级，$parent变成了$parent.$parent，非常不好。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">代码如下：<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><body ng-app="test">
<div ng-controller="OuterCtrl">
 <span ng-bind="a">
 <div ng-include="'inner.html'"></div>
</div>
</body></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">inner.html<pre class="prettyprint lang-html prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"><div ng-controller="InnerCtrl">
<span ng-bind="a">
<button ng-click="increaseOuterA()">increase outer a</button>
</div></code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">个人认为，在AngularJS中，视图模型的继承虽然使得很多时候代码写起来比较方便，但有些时候会造成很多麻烦。当编写视图模型代码的时候，应当尽量避免父子作用域存在同名变量的情况，以防止造成隐含的问题。不了解AngularJS实现原理的朋友很可能在这里踩很多坑。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"> <p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">来源：http://div.io/topic/583

我是一个兵 发表于 2016-8-16 14:06:27

学习学习。。。。。。。。。。

页: [1]

守望者--AIR技术交流's Archiver

AngularJS沉思录（二） 视图模型的层次

AngularJS沉思录（二）视图模型的层次