UNPKG

30.2 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6 <title>Mock.js</title>
7 <style type="text/css">
8 body {
9 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10 color: #222;
11 background-color: #f7f7f7;
12 font-size: 100%;
13}
14
15#wrapper {
16 width: 850px;
17 height: 600px;
18 overflow: hidden;
19 margin: 80px auto 0 auto;
20}
21
22.slide {
23 width: auto;
24 height: 540px;
25 padding: 30px;
26 font-weight: 200;
27 font-size: 200%;
28 line-height: 1.375;
29}
30
31.controls {
32 position: absolute;
33 bottom: 20px;
34 left: 20px;
35}
36
37.controls .arrow {
38 width: 0; height: 0;
39 border: 30px solid #333;
40 float: left;
41 margin-right: 30px;
42
43 -webkit-touch-callout: none;
44 -webkit-user-select: none;
45 -khtml-user-select: none;
46 -moz-user-select: none;
47 -ms-user-select: none;
48 user-select: none;
49}
50
51.controls .prev {
52 border-top-color: transparent;
53 border-bottom-color: transparent;
54 border-left-color: transparent;
55
56 border-left-width: 0;
57 border-right-width: 50px;
58}
59
60.controls .next {
61 border-top-color: transparent;
62 border-bottom-color: transparent;
63 border-right-color: transparent;
64
65 border-left-width: 50px;
66 border-right-width: 0;
67}
68
69.controls .prev:hover {
70 border-right-color: #888;
71 cursor: pointer;
72}
73
74.controls .next:hover {
75 border-left-color: #888;
76 cursor: pointer;
77}
78
79.slide h1 {
80 font-size: 300%;
81 line-height: 1.2;
82 text-align: center;
83 margin: 170px 0 0;
84}
85
86.slide h2 {
87 font-size: 100%;
88 line-height: 1.2;
89 margin: 5px 0;
90 text-align: center;
91 font-weight: 200;
92}
93
94.slide h3 {
95 font-size: 140%;
96 line-height: 1.2;
97 border-bottom: 1px solid #aaa;
98 margin: 0;
99 padding-bottom: 15px;
100}
101
102.slide ul {
103 padding: 20px 0 0 60px;
104 font-weight: 200;
105 line-height: 1.375;
106}
107
108.slide .author h1.name {
109 font-size: 170%;
110 font-weight: 200;
111 text-align: center;
112 margin-bottom: 30px;
113}
114
115.slide .author h3 {
116 font-weight: 100;
117 text-align: center;
118 font-size: 95%;
119 border: none;
120}
121
122a {
123 text-decoration: none;
124 color: #44a4dd;
125}
126
127a:hover {
128 color: #66b5ff;
129}
130
131pre {
132 font-size: 60%;
133 line-height: 1.3;
134}
135
136.progress {
137 position: fixed;
138 top: 0; left: 0; right: 0;
139 height: 3px;
140}
141
142.progress-bar {
143 width: 0%;
144 height: 3px;
145 background-color: #b4b4b4;
146
147 -webkit-transition: width 0.1s ease-out;
148 -moz-transition: width 0.1s ease-out;
149 -o-transition: width 0.1s ease-out;
150 transition: width 0.1s ease-out;
151}
152
153@media (max-width: 850px) {
154 #wrapper {
155 width: auto;
156 }
157
158 body {
159 font-size: 70%;
160 }
161
162 img {
163 width: 100%;
164 }
165
166 .slide h1 {
167 margin-top: 120px;
168 }
169
170 .controls .prev, .controls .prev:hover {
171 border-right-color: rgba(135, 135, 135, 0.5);
172 }
173
174 .controls .next, .controls .next:hover {
175 border-left-color: rgba(135, 135, 135, 0.5);
176 }
177}
178
179@media (max-width: 480px) {
180 body {
181 font-size: 50%;
182 overflow: hidden;
183 }
184
185 #wrapper {
186 margin-top: 10px;
187 height: 340px;
188 }
189
190 .slide {
191 padding: 10px;
192 height: 340px;
193 }
194
195 .slide h1 {
196 margin-top: 50px;
197 }
198
199 .slide ul {
200 padding-left: 25px;
201 }
202}
203
204@media print {
205 * {
206 -webkit-print-color-adjust: exact;
207 }
208
209 @page {
210 size: letter;
211 }
212
213 html {
214 width: 100%;
215 height: 100%;
216 overflow: visible;
217 }
218
219 body {
220 margin: 0 auto !important;
221 border: 0;
222 padding: 0;
223 float: none !important;
224 overflow: visible;
225 background: none !important;
226 font-size: 52%;
227 }
228
229 .progress, .controls {
230 display: none;
231 }
232
233 #wrapper {
234 overflow: visible;
235 height: 100%;
236 margin-top: 0;
237 }
238
239 .slide {
240 border: 1px solid #222;
241 margin-bottom: 40px;
242 height: 3.5in;
243 }
244
245 .slide:nth-child(odd) {
246 /* 2 slides per page */
247 page-break-before: always;
248 }
249}
250
251/*
252github.com style (c) Vasily Polovnyov <vast@whiteants.net>
253*/
254
255code, pre {
256 border: 1px solid #ddd;
257 border-radius: 3px;
258 overflow: auto;
259 padding: 6px 10px;
260}
261
262code {
263 padding: 0 5px;
264}
265
266pre>code {
267 margin: 0; padding: 0;
268 border: none;
269 background: transparent;
270}
271
272pre .comment,
273pre .template_comment,
274pre .diff .header,
275pre .javadoc {
276 color: #998;
277 font-style: italic
278}
279
280pre .keyword,
281pre .css .rule .keyword,
282pre .winutils,
283pre .javascript .title,
284pre .nginx .title,
285pre .subst,
286pre .request,
287pre .status {
288 color: #333;
289 font-weight: bold
290}
291
292pre .number,
293pre .hexcolor,
294pre .ruby .constant {
295 color: #099;
296}
297
298pre .string,
299pre .tag .value,
300pre .phpdoc,
301pre .tex .formula {
302 color: #d14
303}
304
305pre .title,
306pre .id {
307 color: #900;
308 font-weight: bold
309}
310
311pre .javascript .title,
312pre .lisp .title,
313pre .clojure .title,
314pre .subst {
315 font-weight: normal
316}
317
318pre .class .title,
319pre .haskell .type,
320pre .vhdl .literal,
321pre .tex .command {
322 color: #458;
323 font-weight: bold
324}
325
326pre .tag,
327pre .tag .title,
328pre .rules .property,
329pre .django .tag .keyword {
330 color: #000080;
331 font-weight: normal
332}
333
334pre .attribute,
335pre .variable,
336pre .lisp .body {
337 color: #008080
338}
339
340pre .regexp {
341 color: #009926
342}
343
344pre .class {
345 color: #458;
346 font-weight: bold
347}
348
349pre .symbol,
350pre .ruby .symbol .string,
351pre .lisp .keyword,
352pre .tex .special,
353pre .prompt {
354 color: #990073
355}
356
357pre .built_in,
358pre .lisp .title,
359pre .clojure .built_in {
360 color: #0086b3
361}
362
363pre .preprocessor,
364pre .pi,
365pre .doctype,
366pre .shebang,
367pre .cdata {
368 color: #999;
369 font-weight: bold
370}
371
372pre .deletion {
373 background: #fdd
374}
375
376pre .addition {
377 background: #dfd
378}
379
380pre .diff .change {
381 background: #0086b3
382}
383
384pre .chunk {
385 color: #aaa
386}
387
388
389 </style>
390</head>
391<body>
392 <div class="progress">
393 <div class="progress-bar"></div>
394 </div>
395
396<div id="wrapper">
397 <section class="slide"><!--
398 随堂问题：
399
400 我在分享的过程中会做一些提问和调查，需要各位的配合，我会根据你们的回答调整分享的内容。
401
402 * 使用过 Mock.js 的请举一下手
403 * 使用过 RAP（阿里妈妈）、IF（天猫）、中途岛（淘宝）、River（集团）之一的请举一下手
404 * 了解过 http://json-schema.org/ 的请举一下手
405 * 访问过 http://www.json-generator.com/ 的请举一下手
406
407 -->
408
409<style type="text/css">
410 @font-face {
411 font-family: 'logo';
412 src: url('../demo/assets/font_1390195988_9420388.eot'); /* IE9*/
413 src: url('../demo/assets/font_1390195988_9420388.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
414 url('../demo/assets/font_1390195989_0386753.woff') format('woff'), /* chrome、firefox */
415 url('../demo/assets/font_1390195988_7969282.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
416 url('../demo/assets/font_1390195989_0668917.svg#svgFontName') format('svg'); /* iOS 4.1- */
417 }
418 .iconlogo {
419 font-family: "logo";
420 font-size: 120%;
421 font-style: normal;
422 font-weight: normal;
423 font-variant: normal;
424 display: inline-block;
425 speak: none;
426 -webkit-font-smoothing: antialiased;
427 -moz-osx-font-smoothing: grayscale;
428 }
429 .mock_color {
430 color:#428BCA;
431 }
432 .about_logo .citun {
433 width: 49%;
434 }
435 .dependencies img {
436 max-height: 100px;
437 padding: 18px;
438 }
439 .dependencies .text {
440 display: inline-block;
441 height: 100px;
442 padding: 18px;
443 text-align: center;
444 min-width: 100px;
445 }
446 .mr10 {
447 margin-right: 10px;
448 }
449 .mb10 {
450 margin-bottom: 10px;
451 }
452 .mt20 {
453 margin-top: 20px;
454 }
455 .ml20 {
456 margin-left: 20px;
457 }
458</style>
459
460<h1 class="mock_color">
461 <i class="iconlogo">&#x3435;</i>
462 <span>Mock.js</span>
463</h1>
464
465<h2 id="-">生成模拟数据</h2>
466<div style="text-align: center; font-size: 18px; margin-top: 36px;">
467 <div style="margin-bottom: 4px;">墨智 / 高云</div>
468 <div style="margin-bottom: 4px;"><a href="mailto:mozhi.gyy@alibaba-inc.com">mozhi.gyy@alibaba-inc.com</a></div>
469 <div style="margin-bottom: 4px;"><a href="https://github.com/nuysoft/Mock">https://github.com/nuysoft/Mock</a></div>
470 <div style="margin-bottom: 4px;"><a href="http://mockjs.com">http://mockjs.com</a></div>
471 <div>
472 <iframe data-src="http://ghbtns.com/github-btn.html?user=nuysoft&repo=Mock&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="131" height="30"></iframe>
473 <iframe data-src="http://ghbtns.com/github-btn.html?user=nuysoft&repo=Mock&type=fork&count=true&size=large"allowtransparency="true" frameborder="0" scrolling="0" width="140" height="30"></iframe>
474 </div>
475</div></section>
476 <section class="slide"><h3 id="-i-class-iconlogo-mock_color-x3435-i-"><i class="iconlogo mock_color">&#x3435;</i></h3>
477<p class="about_logo">
478 <img class="citun" src="../demo/assets/citun_1.jpg" alt="">
479 <img class="citun" src="../demo/assets/citun_2.jpg" alt="">
480</p>
481
482<p><em>蓝色 Logo 出自设计师 @山峰，图片来自 <a href="http://baike.baidu.com/view/260039.htm">刺豚_百度百科</a>。</em></p>
483<!-- --></section>
484 <section class="slide"><style>
485 .question {
486 font-size: 250%;
487 font-weight: bold;
488 }
489</style>
490
491<h3 id="-">开始之前</h3>
492<p><a href="http://mockjs.com/">mockjs.com</a></p>
493<p><a href="/doc/lanlan.html"><img src="../demo/assets/doc.png" alt=""></a></p>
494<!-- 数据模板编辑器 --></section>
495 <section class="slide"><h3 id="-">开始之前 - ？</h3>
496<p class="question">Mock.js</p></section>
497 <section class="slide"><h3 id="-">开始之前 - ？</h3>
498<p class="question">RAP、IF、River、中途岛</p></section>
499 <section class="slide"><h3 id="-">开始之前 - ？</h3>
500<p class="question"><a href="http://json-schema.org/">json-schema.org</a></p></section>
501 <section class="slide"><h3 id="-">开始之前 - ？</h3>
502<p class="question"><a href="http://www.json-generator.com/">json-generator.com</a></p></section>
503 <section class="slide"><h3 id="-">内容</h3>
504<ul>
505<li>Mock.js 是什么 <!--
506 * 模拟数据生成器
507 * 定位：HTML CSS JavaScript Data
508 * 问题：定位、缘起、静态数据、动态数据、拦截请求
509 * 升华：
510 *
511 --></li>
512<li>快速开始</li>
513<li>数据模板</li>
514<li>数据占位符</li>
515<li>未来规划</li>
516<li>问答</li>
517</ul>
518</section>
519 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
520<p><span class="label label-default name">HTML</span></p>
521<pre><code>&lt;a class=&quot;url&quot; href=&quot;url&quot;&gt;{{url}}&lt;/a&gt;</code></pre>
522<p><span class="label label-default name">CSS</span></p>
523<pre><code>.url { color: #428BCA; }</code></pre>
524</section>
525 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
526<p><span class="label label-default name">JS</span></p>
527<pre><code>$(&#39;.url&#39;).on(&#39;mouseenter&#39;, function(event){ })</code></pre>
528<p><span class="label label-default name">DATA</span></p>
529<pre><code>{ url: &#39;http://mockjs.com&#39; }</code></pre>
530<p><span class="label label-danger">Warning</span> 数据是必不可少的一环，但解决方案很少</p>
531</section>
532 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
533<p><span class="label label-default name">AJAX</span></p>
534<pre><code>$.ajax({
535 url: &#39;...&#39;,
536 sucess: function(data, status, xhr){
537 // ...
538 }
539})</code></pre>
540<p><span class="label label-danger">Warning</span> 如果接口不稳定，怎么办？</p>
541</section>
542 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
543<pre><code>var data = {
544 list: [
545 { &quot;id&quot;: 1, &quot;name&quot;: &quot;Jennifer Allen&quot; },
546 { &quot;id&quot;: 2, &quot;name&quot;: &quot;Donna Lopez&quot; },
547 { &quot;id&quot;: 3, &quot;name&quot;: &quot;Edward Davis&quot; }
548 ]
549}
550function sucess(data, status, xhr) { ... }
551
552// $.ajax({ ... })
553sucess(data)</code></pre>
554</section>
555 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
556<p><span class="label label-danger mr10 mb10">Warning</span> 制造静态数据很无趣，例如可能很长</p>
557<p><span class="label label-danger mr10 mb10">Warning</span> 静态数据的类型很多，例如图片</p>
558<p><span class="label label-danger mr10 mb10">Warning</span> 需要修改既有代码</p>
559<p><span class="label label-danger mr10 mb10">Warning</span> 测试用例单一</p>
560</section>
561 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
562<p><span class="label label-success mr10 mb10">期望1</span> 生成随机数据</p>
563<p><span class="label label-success mr10 mb10">期望2</span> 拦截 Ajax 请求</p>
564</section>
565 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
566<p><span class="label label-success mr10 mb10">期望3</span> 开发无侵入</p>
567<p><span class="label label-success mr10 mb10">期望4</span> 引入方便，用法简单</p>
568<p><span class="label label-success mr10 mb10">期望5</span> 数据类型丰富</p>
569<p><span class="label label-success mr10 mb10">期望6</span> 符合直觉的接口</p>
570<p><span class="label label-success mr10 mb10">期望7</span> 一目了然的文档</p>
571</section>
572 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
573<h1 id="-span-class-label-label-success-mr10-mb10-span-span-class-label-label-success-mr10-mb10-span-"><span class="label label-success mr10 mb10">可用</span> <span class="label label-success mr10 mb10">好用</span></h1>
574</section>
575 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
576<p>一款模拟数据生成器。</p>
577<p><span class="label label-success mr10 mb10">功能 1</span> 基于 数据模板 生成 模拟数据</p>
578<p><span class="label label-success mr10 mb10">功能 2</span> 类型丰富的 随机数据</p>
579<p><span class="label label-success mr10 mb10">功能 3</span> 模拟 Ajax 请求</p>
580<p><span class="label label-success mr10 mb10">功能 4</span> <del>基于 HTML 模板生成模拟数据</del></p>
581</section>
582 <section class="slide"><h3 id="mock-js-">Mock.js 是什么</h3>
583<p><span class="label label-primary mr10 mb10">价值 1</span> 前端攻城师独立于后端进行开发</p>
584<p><span class="label label-primary mr10 mb10">价值 2</span> 提高单元测试覆盖率</p>
585</section>
586 <section class="slide"><h3 id="-">快速开始</h3>
587<p><span class="label label-success mr10 mb10">第 1 步</span> 安装 Mock.js</p>
588<pre><code>npm install bower -g
589bower install mockjs --save</code></pre>
590<p><span class="label label-success mr10 mb10">第 2 步</span> 引入 Mock.js</p>
591<pre><code>&lt;script src=&quot;./bower_components/mockjs/dist/mock.js&quot;&gt;&lt;/script&gt;</code></pre>
592</section>
593 <section class="slide"><h3 id="-">快速开始</h3>
594<p><span class="label label-success mr10 mb10">第 3 步</span> 调用 <code>Mock.mock( template )</code> 生成模拟数据</p>
595<pre><code>var data = Mock.mock({
596 &#39;list|1-10&#39;: [{
597 &#39;id|+1&#39;: 1
598 }]
599})
600console.log(
601 JSON.stringify(data, null, 4)
602)</code></pre>
603</section>
604 <section class="slide"><h3 id="-">快速开始</h3>
605<p><span class="label label-success mr10 mb10">生成的模拟数据</span></p>
606<pre><code>{
607 &quot;list&quot;: [
608 { &quot;id&quot;: 1 },
609 { &quot;id&quot;: 2 },
610 { &quot;id&quot;: 3 },
611 { &quot;id&quot;: 4 }
612 ]
613}</code></pre>
614</section>
615 <section class="slide"><h3 id="-">快速开始</h3>
616<p><span class="label label-success">第 3 步</span> 调用 <code>Mock.mock( url, template )</code> 拦截 Ajax</p>
617<pre><code>Mock.mock(&#39;hello.json&#39;, {
618 &#39;list|1-10&#39;: [{
619 &#39;id|+1&#39;: 1
620 }]
621})</code></pre>
622</section>
623 <section class="slide"><h3 id="-">快速开始</h3>
624<p><span class="label label-success mr10 mb10">发起 Ajax 请求</span></p>
625<pre><code>$.ajax({
626 url: &#39;hello.json&#39;,
627 dataType: &#39;json&#39;
628}).done(function(data, status, xhr){
629 console.log(
630 JSON.stringify(data, null, 4)
631 )
632})</code></pre>
633</section>
634 <section class="slide"><h3 id="-">快速开始</h3>
635<p><span class="label label-success mr10 mb10">响应的模拟数据</span></p>
636<pre><code>{
637 &quot;list&quot;: [
638 { &quot;id&quot;: 1 },
639 { &quot;id&quot;: 2 },
640 { &quot;id&quot;: 3 },
641 { &quot;id&quot;: 4 },
642 { &quot;id&quot;: 5 }
643 ]
644}</code></pre>
645</section>
646 <section class="slide"><h3 id="-">数据模板</h3>
647<p>每个属性由 <span class="label label-success">3</span> 部分构成：</p>
648<pre><code>// 属性名 name
649// 生成规则 rule
650// 属性值 value
651&#39;name|rule&#39;: value</code></pre>
652</section>
653 <section class="slide"><h3 id="-">数据模板</h3>
654<style>
655 .dtd .label-primary {
656 display: inline-block;
657 width: 131px;
658 line-height: 1.2;
659 }
660</style>
661
662<p class="dtd">
663 <span class="label label-primary mr10 mb10">String</span>
664 <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: &#39;value&#39;</span>
665</p>
666<p class="dtd">
667 <span class="label label-primary mr10 mb10">Number</span>
668 <span class="label label-success mr10 mb10">&#39;name|min-max.dmin-dmax&#39;: value</span>
669</p>
670<p class="dtd">
671 <span class="label label-primary mr10 mb10">Boolean</span>
672 <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: value</span>
673</p></section>
674 <section class="slide"><h3 id="-">数据模板</h3>
675<p class="dtd">
676 <span class="label label-primary mr10 mb10">Object</span>
677 <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: {}</span>
678</p>
679<p class="dtd">
680 <span class="label label-primary mr10 mb10">Array</span>
681 <span class="label label-success mr10 mb10">&#39;name|min-max&#39;: [{}, {} ...]</span>
682</p>
683<p class="dtd">
684 <span class="label label-primary mr10 mb10">Function</span>
685 <span class="label label-success mr10 mb10">&#39;name&#39;: function(){}</span>
686</p></section>
687 <section class="slide"><h3 id="-">数据占位符</h3>
688<p>格式：</p>
689<pre><code>@占位符
690@占位符(参数 [, 参数])</code></pre>
691<p>与 <span class="label label-success mb10">Mock.Random</span> 中的方法一一对应</p>
692</section>
693 <section class="slide"><h3 id="-">数据占位符</h3>
694<style>
695 .dpd .label-primary {
696 display: inline-block;
697 width: 26%;
698 line-height: 1.2;
699 }
700</style>
701
702<p><span class="label label-success mb10">Mock.Random</span></p>
703<p class="dpd">
704 <span class="label label-primary mr10 mb10">Basics</span>
705 <span class="label label-primary mr10 mb10">Image</span>
706 <span class="label label-primary mr10 mb10">Color</span>
707 <span class="label label-primary mr10 mb10">Text</span>
708 <span class="label label-primary mr10 mb10">Name</span>
709 <span class="label label-primary mr10 mb10">Web</span>
710 <span class="label label-primary mr10 mb10">Address</span>
711 <span class="label label-primary mr10 mb10">Miscellaneous</span>
712 <span class="label label-primary mr10 mb10">Helpers</span>
713</p></section>
714 <section class="slide"><h3 id="-">数据占位符</h3>
715<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
716<pre><code>Mock.Random.extend({
717 hero: function() {
718 return this.pick([
719 &#39;盖伦 德玛西亚&#39;,
720 &#39;艾希 寒冰射手&#39;,
721 &#39;瑞兹 流浪法师&#39;
722 ])
723 }
724})</code></pre>
725</section>
726 <section class="slide"><h3 id="-">数据占位符</h3>
727<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
728<pre><code>Mock.Random.hero()
729// =&gt; &quot;艾希 寒冰射手&quot;
730
731Random.hero()
732// =&gt; &quot;瑞兹 流浪法师&quot;</code></pre>
733</section>
734 <section class="slide"><h3 id="-">数据占位符</h3>
735<p><span class="label label-success mb10">Mock.Random.extend()</span></p>
736<pre><code>Mock.mock(&#39;@hero&#39;)
737// =&gt; &quot;瑞兹 流浪法师&quot;
738
739Mock.mock({
740 free: &#39;@hero&#39;
741})
742// =&gt; { free: &quot;盖伦 德玛西亚&quot;}</code></pre>
743</section>
744 <section class="slide"><h3 id="-">阿里妈妈的实践</h3>
745<p><span class="label label-success mr10 mb10">集中管理数据模板</span></p>
746<pre><code>KISSY.add(&quot;app/models/data&quot;, function(S, Mock) {
747
748 Mock.mock(&#39;foo.json&#39;, { ... })
749 Mock.mock(&#39;bar.json&#39;, { ... })
750 Mock.mock(&#39;faz.json&#39;, { ... })
751
752}, {
753 requires: [&#39;components/mock/index&#39;]
754})</code></pre>
755</section>
756 <section class="slide"><h3 id="-">阿里妈妈的实践</h3>
757<p><span class="label label-success mr10 mb10">根据 URL 中是否含有参数 mock 动态加载数据模板</span></p>
758<pre><code>// http://host:port?mock
759var mock = ~location.search.indexOf(&#39;mock&#39;)
760if(mock) KISSY.use(&#39;app/models/data&#39;)</code></pre>
761</section>
762 <section class="slide"><h3 id="-">未来规划</h3>
763<ol>
764<li><p>基于 模板 校验 数据</p>
765<p> <span class="label label-success mr10 mb10">Mock.valid(template, data)</span></p>
766</li>
767<li><p>基于 正则 生成 数据</p>
768<p> <span class="label label-success mr10 mb10">Mock.mock( regexp )</span></p>
769</li>
770</ol>
771</section>
772 <section class="slide"><h3 id="-">回顾一下</h3>
773<ul>
774<li>Mock.js 是什么</li>
775<li>数据模板</li>
776<li>数据占位符</li>
777</ul>
778<blockquote>
779<p>只做一件事，并做好。——《Unix 编程艺术》</p>
780</blockquote>
781</section>
782 <section class="slide"><h3 id="-">问答</h3>
783<ol>
784<li><p>你如何看待 JSON Schema？</p>
785<p> 看上去很美。</p>
786</li>
787<li><p>Mock.js 如何协同 RAP（阿里妈妈）、IF（天猫）、中途岛（淘宝）、River（集团）？</p>
788<p> 目前 RAP、中途岛、River 基于 Mock.js 生成随机数据。</p>
789</li>
790</ol>
791</section>
792 <section class="slide"><h3 id="-">问答</h3>
793<p class="mock_color" style="position: relative; text-align: center;">
794 <i class="iconlogo" style="font-size: 1000%;">&#x3435;</i>
795 <span style="position: absolute; left: 40%; top: 5%; font-size: 200%;">？</span>
796</p></section>
797 <section class="slide"><h1 class="mock_color">求 Star</h1></section>
798 <section class="slide"><h3 id="-">没有了</h3>
799<p style="text-align: center; font-size: 64px;">谢谢各位的聆听</p>
800
801<p>无论您对模拟数据有什么见解，或者对 Mock.js 有什么建议，或者遇到什么不爽的地方，欢迎来 <a href="https://github.com/nuysoft/Mock/issues/">砸砖</a> 和 <a href="mailto:nuysoft@gmail.com">交流</a>。</p>
802<style>
803table {
804 max-width: 100%;
805 background-color: transparent;
806}
807
808th {
809 text-align: left;
810}
811
812.table {
813 width: 100%;
814 margin-bottom: 20px;
815}
816
817.table > thead > tr > th,
818.table > tbody > tr > th,
819.table > tfoot > tr > th,
820.table > thead > tr > td,
821.table > tbody > tr > td,
822.table > tfoot > tr > td {
823 padding: 8px;
824 line-height: 1.428571429;
825 vertical-align: top;
826 border-top: 1px solid #dddddd;
827}
828
829.table > thead > tr > th {
830 vertical-align: bottom;
831 border-bottom: 2px solid #dddddd;
832}
833
834.table > caption + thead > tr:first-child > th,
835.table > colgroup + thead > tr:first-child > th,
836.table > thead:first-child > tr:first-child > th,
837.table > caption + thead > tr:first-child > td,
838.table > colgroup + thead > tr:first-child > td,
839.table > thead:first-child > tr:first-child > td {
840 border-top: 0;
841}
842
843.table > tbody + tbody {
844 border-top: 2px solid #dddddd;
845}
846
847.table .table {
848 background-color: #ffffff;
849}
850
851.table-condensed > thead > tr > th,
852.table-condensed > tbody > tr > th,
853.table-condensed > tfoot > tr > th,
854.table-condensed > thead > tr > td,
855.table-condensed > tbody > tr > td,
856.table-condensed > tfoot > tr > td {
857 padding: 5px;
858}
859
860.table-bordered {
861 border: 1px solid #dddddd;
862}
863
864.table-bordered > thead > tr > th,
865.table-bordered > tbody > tr > th,
866.table-bordered > tfoot > tr > th,
867.table-bordered > thead > tr > td,
868.table-bordered > tbody > tr > td,
869.table-bordered > tfoot > tr > td {
870 border: 1px solid #dddddd;
871}
872
873.table-bordered > thead > tr > th,
874.table-bordered > thead > tr > td {
875 border-bottom-width: 2px;
876}
877
878.label {
879 display: inline;
880 padding: .2em .6em .3em;
881 /*font-size: 75%;*/
882 font-weight: bold;
883 line-height: 1;
884 color: #ffffff;
885 text-align: center;
886 white-space: nowrap;
887 vertical-align: baseline;
888 border-radius: .25em;
889}
890
891.label[href]:hover,
892.label[href]:focus {
893 color: #ffffff;
894 text-decoration: none;
895 cursor: pointer;
896}
897
898.label:empty {
899 display: none;
900}
901
902.btn .label {
903 position: relative;
904 top: -1px;
905}
906
907.label-default {
908 background-color: #999999;
909}
910
911.label-default[href]:hover,
912.label-default[href]:focus {
913 background-color: #808080;
914}
915
916.label-primary {
917 background-color: #428bca;
918}
919
920.label-primary[href]:hover,
921.label-primary[href]:focus {
922 background-color: #3071a9;
923}
924
925.label-success {
926 background-color: #5cb85c;
927}
928
929.label-success[href]:hover,
930.label-success[href]:focus {
931 background-color: #449d44;
932}
933
934.label-info {
935 background-color: #5bc0de;
936}
937
938.label-info[href]:hover,
939.label-info[href]:focus {
940 background-color: #31b0d5;
941}
942
943.label-warning {
944 background-color: #f0ad4e;
945}
946
947.label-warning[href]:hover,
948.label-warning[href]:focus {
949 background-color: #ec971f;
950}
951
952.label-danger {
953 background-color: #d9534f;
954}
955
956.label-danger[href]:hover,
957.label-danger[href]:focus {
958 background-color: #c9302c;
959}
960</style>
961
962<p><style type="text/css">
963 pre {
964 padding: 0px;
965 }
966 .hljs {
967 font-size: 200%;
968 }
969</style></p>
970<p><link rel="stylesheet" href="../bower_components/highlightjs/styles/rainbow.css"></p>
971<script src="../bower_components/highlightjs/highlight.pack.js"></script>
972<script src="../bower_components/jquery/jquery.js"></script>
973<script src="../dist/mock.js"></script>
974<script>hljs.initHighlightingOnLoad();</script></section>
975 <section class="slide"><div class="author">
976 <h1 class="name">墨智 &#x2F; 高云</h1>
977 <h3 class="url">
978 <a href="http://nuysoft.com">http://nuysoft.com</a>
979 </h3>
980 <h3 class="email">
981 <a href="mailto:mozhi.gyy@alibaba-inc.com">mozhi.gyy@alibaba-inc.com</a>
982 </h3>
983</div>
984</section>
985</div>
986 <div class="controls">
987 <div class="arrow prev"></div>
988 <div class="arrow next"></div>
989 </div>
990
991
992 <script type="text/javascript">
993 /**
994 * Takes the last slide and places it at the front.
995 */
996function goBack() {
997 var wrapper = document.querySelector('#wrapper');
998 var lastSlide = wrapper.lastChild;
999 while (lastSlide !== null && lastSlide.nodeType !== 1) {
1000 lastSlide = lastSlide.previousSibling;
1001 }
1002
1003 wrapper.removeChild(lastSlide);
1004 wrapper.insertBefore(lastSlide, wrapper.firstChild);
1005
1006 setCurrentProgress();
1007 updateURL();
1008 updateTabIndex();
1009}
1010
1011/**
1012 * Takes the first slide and places it at the end.
1013 */
1014function goForward() {
1015 var wrapper = document.querySelector('#wrapper');
1016 var firstSlide = wrapper.firstChild;
1017 while (firstSlide !== null && firstSlide.nodeType !== 1) {
1018 firstSlide = firstSlide.nextSibling;
1019 }
1020
1021 wrapper.removeChild(firstSlide);
1022 wrapper.appendChild(firstSlide);
1023
1024 setCurrentProgress();
1025 updateURL();
1026 updateTabIndex();
1027}
1028
1029/**
1030 * Updates the current URL to include a hashtag of the current page number.
1031 */
1032function updateURL() {
1033 window.history.replaceState({} , null, '#' + currentPage());
1034}
1035
1036/**
1037 * Returns the current page number of the presentation.
1038 */
1039function currentPage() {
1040 return document.querySelector('#wrapper .slide').dataset.page;
1041}
1042
1043/**
1044 * Returns a NodeList of each .slide element.
1045 */
1046function allSlides() {
1047 return document.querySelectorAll('#wrapper .slide');
1048}
1049
1050/**
1051 * Give each slide a "page" data attribute.
1052 */
1053function setPageNumbers() {
1054 var wrapper = document.querySelector('#wrapper');
1055 var pages = wrapper.querySelectorAll('section');
1056 var page;
1057
1058 for (var i = 0; i < pages.length; ++i) {
1059 page = pages[i];
1060 page.dataset.page = i;
1061 }
1062}
1063
1064/**
1065 * Set the current progress indicator.
1066 */
1067function setCurrentProgress() {
1068 var wrapper = document.querySelector('#wrapper');
1069 var progressBar = document.querySelector('.progress-bar');
1070
1071 if (progressBar !== null) {
1072 var pagesNumber = wrapper.querySelectorAll('section').length;
1073 var currentNumber = parseInt(currentPage(), 10);
1074 var currentPercent = pagesNumber === 1 ? 100 : 100 * currentNumber / (pagesNumber - 1);
1075 progressBar.style.width = currentPercent.toString() + '%';
1076 }
1077}
1078
1079/**
1080 * Go to the specified page of content.
1081 */
1082function goToPage(page) {
1083 // Try to find the target slide.
1084 var targetSlide = document.querySelector('#wrapper .slide[data-page="' + page + '"]');
1085
1086 // If it actually exists, go forward until we find it.
1087 if (targetSlide) {
1088 var numSlides = allSlides().length;
1089
1090 for (var i = 0; currentPage() !== page && i < numSlides; i++) {
1091 goForward();
1092 }
1093 }
1094}
1095
1096/**
1097 * Removes tabindex property from all links on the current slide, sets
1098 * tabindex = -1 for all links on other slides. Prevents slides from appearing
1099 * out of control.
1100 */
1101function updateTabIndex() {
1102 var allLinks = document.querySelectorAll('.slide a');
1103 var currentPageLinks = document.querySelector('.slide').querySelectorAll('a');
1104 var i;
1105
1106 for (i = 0; i < allLinks.length; i++) {
1107 allLinks[i].setAttribute('tabindex', -1);
1108 }
1109
1110 for (i = 0; i < currentPageLinks.length; i++) {
1111 allLinks[i].removeAttribute('tabindex');
1112 }
1113}
1114
1115window.onload = function () {
1116
1117 // Give each slide a "page" data attribute.
1118 setPageNumbers();
1119
1120 // Update the tabindex to prevent weird slide transitioning
1121 updateTabIndex();
1122
1123 // If the location hash specifies a page number, go to it.
1124 var page = window.location.hash.slice(1);
1125 if (page) {
1126 goToPage(page);
1127 }
1128
1129 document.onkeydown = function (e) {
1130 var kc = e.keyCode;
1131
1132 // left, down, H, J, backspace, PgUp - BACK
1133 // up, right, K, L, space, enter, PgDn - FORWARD
1134 if (kc === 37 || kc === 40 || kc === 8 || kc === 72 || kc === 74 || kc === 33) {
1135 goBack();
1136 } else if (kc === 38 || kc === 39 || kc === 13 || kc === 32 || kc === 75 || kc === 76 || kc === 34) {
1137 goForward();
1138 }
1139 };
1140
1141 if (document.querySelector('.next') && document.querySelector('.prev')) {
1142 document.querySelector('.next').onclick = function (e) {
1143 e.preventDefault();
1144 goForward();
1145 };
1146
1147 document.querySelector('.prev').onclick = function (e) {
1148 e.preventDefault();
1149 goBack();
1150 };
1151 }
1152
1153};
1154
1155
1156 </script>
1157</body>
1158</html>