forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2018-05-07-C组-js7.html
343 lines (293 loc) · 18.1 KB
/
2018-05-07-C组-js7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<style>
.float {
float: left;
}
</style>
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal default center" role="application" data-transition-speed="slow" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
<section class="past" style="top: 158px; display: none;" hidden="" aria-hidden="true">
<h3>【JS-task6】angular之中，$state $watch $scope $rootScope 分别是什么？</h3>
<p>分享人：冯亚超</p>
</section>
<section class="past" style="top: 3px; display: block;" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>1.背景介绍</h3>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>AngularJs是一个用于设计动态web应用的结构框架,使得开发现代的单一页面应用程序变得更加容易。而且能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理.$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟大家讨论一下这 几个方法</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>2.知识剖析</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>$SCOPE</h4>
<p>$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以 controller不同，他们的scope是不同的，那么，如果我们想象js那样，做一个全局变量该怎么办呢？这就要说 到rootScope了。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>$ROOTSCOPE</h4>
<p>$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用。</p>
<p>scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。 用rootscope定义的值，可以在各个controller中使用。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>$WATCH</h4>
<p>相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？ 当我们在对绑定的name属性进行修改的时候，angular内部的$digest循环级会执行一次，他执行的内容是检查我们的 $scope作用域的内容与上次执行$digest循环的时候是否有变化，若有变化就执行$watch()方法绑定的处理函数。从而 达到了监听作用域属性的效果。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>$watch(watchExpression, listener, objectEquality);</p>
<p>watchExpression,需要监控的表达式</p>
<p>listener,处理函数，函数参数如下
function(newValue,oldValue, scope)</p>
<p>objectEquality,是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>$STATE</h4>
<p>在ajax技术发展普及之后，因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点，一个新技术应运而生： 路由，$state就是路由中的一项服务。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>$state.go()</p>
<p>$state.go()方法可以产生与a链接一样的效果，可以将此方法绑定给一个button按钮， 然后在按钮的点击事件中执行 $state.go()，就可以跳转到相应的页面。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>$state.Params()</p>
<p>$stateParams 状态参数 在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时： url: '/inbox/:inboxId/messages/{sorted}?from&to'//当用户访问者链接时：'/inbox/123/messages/ascending?from=10&to=20' $stateParams对象的值为： {inboxId: '123', sorted: 'ascending', from: 10, to: 20}</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>3.常见问题</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>watch的深度监听是什么意思呢？有什么优缺点呢？</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>4.解决方案</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>$watch在对待原始类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。在前面的例子中，我们知道，$watch函数有接收两个参数，第一个参数是需要监视的对象，第二个参数是在监视对象发生变化时需要调用的函数，实际上$watch还有第三个参数，它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“reference watch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equality watch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来</p>
<p>既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>5.编码实战</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>6.扩展思考</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>7.参考文献</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>https://www.cnblogs.com/littlemonk/p/5484322.html</p>
<p>http://www.runoob.com/angularjs/angularjs-scopes.html</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>8 更多讨论</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 冯亚超</small>
</p>
</section>
</div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background stack present" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 260.19px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up enabled" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
语法：
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略，则该函数不返回值。
用 return 语句来终止一个函数的执行，并返回 expression 的值。如果 expression 被省略，
或在函数内没有 return 语句被执行，则把值 undefined 赋给调用当前函数的表达式。
</div></div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
// history: true,
transition: 'default',
transitionSpeed: 'slow',
dependencies: [
{src: '../plugin/markdown/marked.js'},
{src: '../plugin/markdown/markdown.js'},
{src: '../plugin/notes/notes.js', async: true},
{
src: '../plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
// 原始类型对象直接赋值不会相互影响
// var a = 1;
//
// var b = a;
// b = 10;
// console.log(a); // 1
////
// var a = 'hello';
// var b = a;
// b = 'world';
// console.log(a); // hello
//
// var a = true;
// var b = a;
// b = false;
// console.log(a);
//数组浅复制
// var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
// ];
// var b = a; //定义一个变量b，把a赋值给他，这样比、b和a一样了
// b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
// console.log(a)//那么现在打印a 是什么结果呢
//
// var arr = ["One","Two","Three"]; //数组的深复制，slice方法
// var arrtoo = arr.slice(1);
// arrtoo[2] = "set Map";
// console.log(arr);//One,Two,Three
// console.log(arrtoo);//One,set Map,Three
//
// var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
// var arrtooo = arr1.concat(111111);
// arrtooo[1] = "set Map To";
// console.log(arr1);//One,Two,Three
// console.log(arrtooo);//One,set Map To,Three
//
// var b=[1,2,3,4,5]; //concat的链接
// var c=[6,7,8,9];
// var d =[4,4,22]
// console.log(b.concat(c,d))
var a = {name: 'yy', age: 26}; //对象的浅拷贝哦
var b = new Object();
b.name = a.name;
b.age = a.age;
b.name = 'xx';
console.log(a);//Object { name="yy", age=26}
console.log(b);//Object { name="xx", age=26}
var d = { //对象的浅拷贝哦 第一种
name: 'd',
oc: {
age: 32
},
oad: {
adds: {
bb: 12
}
}
};
var deepCopy = function (source) {
var result = {};
for (var key in source) {
result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
}
return result
};
var c = deepCopy(d);
c.name = 'c';
c.oc = {
age: 49
};
console.log(c);
console.log(d);
// var person = { //第二种深拷贝
// name: 'aa',
// friends: ['da', 'dsa', 'gf']
// };
//
// var aPerson = Object.create(person, {
//// name: {
//// value: "gee"
//// }
// });
//
// console.log(person.name);
// console.log(aPerson.friends)
var Chinese = {
nation: '中国'
}
var Doctor = {
career: '医生'
}
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
console.log(Doctor); // 中国
Chinese.birthPlaces = ['北京', '上海', '香港'];
var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');
</script>
</body>
</html>