publish/mvvm.htm

<!--
    Powered By nodePPT - This is probably the best web presentation tool so far!
    version: 1.4.2
    site: https://github.com/ksky521/nodePPT
    date: 
-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Reactive Programming - By 邓海龙</title>
    <link rel="stylesheet" media="all" href="./css/nodeppt.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="./css/phone.css">
    
    <link rel="stylesheet" href="./js/highlight/styles/monokai_sublime.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    
<link rel="stylesheet" href="./css/theme.moon.css">
</head>
<body>
<div class="slides">
    <slides id="container">
        <slide class="slide fill" style="background-image:url('./img/bg1.png')"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>Reactive Programming</h1>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Agenda</h2>

</hgroup><article>

<ul class="rollIn">
<li>Reactive</li>
<li>Directive</li>
<li>Template</li>
<li>Component</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Excluded</h2>

</hgroup><article>

<ul class="bounceIn">
<li>语法</li>
<li>使用</li>
<li>框架对比</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Reactive</h2>

</hgroup><article>

<ul>
<li>Dirty Check</li>
<li>Setter</li>
<li><code>Object.defineProperty</code></li>
</ul>

</article></section></slide>
<slide class="slide fill" style="background-image:url('./img/bg1.png')"><section class="slide-wrapper"><article>
<h2>监听property赋值，diff触发回调</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>Object.defineProperty</h2>
<pre><code class="javascript">Object.defineProperty(obj, key, {
    configurable: false,
    writable: true,
    set: function(value) {
        // obj[key] = xxx;
        // notify update
    },
    get: function() {
        // obj[key]
        // record dependency
    }
});
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Issue</h2>

</hgroup><article>

<ul>
<li>添加依赖</li>
<li><code>Array.prototype.push</code> etc.</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Directive</h2>

</hgroup><article>

<ul>
<li>Compiler</li>
<li>Compute Expression</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>Compiler custom property (<strong><code>directive</code></strong>) and element (<strong><code>component</code></strong>)</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Compute Expression</h2>

</hgroup><article>

<ul>
<li>Scope</li>
<li>Filter &amp;&amp; Bind</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Dom Operation</h2>

</hgroup><article>

<ul>
<li>v-for</li>
<li>v-if/else</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>Component</h2>

</hgroup><article>

<ul>
<li>Props Down</li>
<li>Events Up</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>Dom Diff</h2>
<pre><code class="html">&lt;div id=&quot;container&quot;&gt;
    &lt;p class=&quot;message&quot;&gt;hello world&lt;/p&gt;
    &lt;h1 class=&quot;title&quot;&gt;title&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="javascript">new VNode({
    tagName: &#39;div&#39;,
    attributes: {id: &#39;container&#39;},
    children: [
        new VNode({
            tagName: &#39;p&#39;,
            attributes: {class: &#39;message&#39;},
            children: [&#39;hello world&#39;]
        }),
        new Vnode({
            tagName: &#39;h1&#39;,
            attributes: {class: &#39;title&#39;},
            children: [&#39;title&#39;]
        })
    ]
});
</code></pre>

</article></section></slide>
        

        <!-- <slide class="slide logoslide dark nobackground">
            <article class="flexbox vcenter">
                <h2 style="color: white;">Powered By nodePPT v1.4.2</h2>
            </article>
        </slide> -->
        <div class="slideTip" id="tip"></div>
    </slides>
</div>
<canvas id="drawBoard" class="draw-board" width="900" height="700"></canvas>
<div class="progress"><span id="progress"></span></div>
<div id="_buttons">
    <div class="_btn-box" id="_btn-box" style="display:none;">
        <button class="fa fa-arrow-circle-left" id="_btn-prev"></button>
        <button class="fa fa-arrow-circle-right" id="_btn-next"></button>
        <button class="fa fa-paint-brush" id="_btn-brush"></button>
        <button class="fa fa-compress" id="_btn-overview" data-toggle="fa fa-expand"></button>
    </div>
    <button class="fa fa-bars" id="_btn-bar"  data-toggle="fa fa-close"></button>
</div>
<script src="./js/mixjs/lib/mix.0.3.0.min.js"></script>
<script>
var base = location.protocol + '//' + location.host;

var path = (location.pathname + '#').split('/').filter(function(v){
    return !!v;
});
path.pop();
path = path.join('/');
MixJS.config({
    baseURL: [ base, path, 'js'].join('/')+'/'
});

</script>
<script src="./js/mixjs/lib/event/broadcast.js"></script>
<script src="./js/nodeppt.js"></script>
<script>
Slide.init({
    containerID: 'container',
    drawBoardID: 'drawBoard',
    slideClass: '.slide',
    buildClass: '.build',
    progressID: 'progress',
    transition: 'slide3',
    width: 1100,
    dir: './',
    
    //打开下面的注释就开启postMessage方式
    //访问网址127.0.0.1:8080/ppt/demo#client
    control:{
        type: 'postMessage',
        args:{
            isControl:  false
        }
    },
    
    tipID: 'tip'
});
MixJS.loadJS('highlight/highlight.pack.js',function(){
    hljs.tabReplace = '  ';
    hljs.initHighlightingOnLoad();
});
</script>
<script src="./js/demo.js"></script>
<link rel="stylesheet" href="./css/demo.css">
<script src="./js/zoom.js"></script>

<!--placeholder-->
</body>
</html>