-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
97 lines (58 loc) · 17.7 KB
/
Copy pathatom.xml
File metadata and controls
97 lines (58 loc) · 17.7 KB
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>J Blog</title>
<link href="/blog/atom.xml" rel="self"/>
<link href="https://noobjexception.github.io/blog/"/>
<updated>2019-04-03T05:07:40.553Z</updated>
<id>https://noobjexception.github.io/blog/</id>
<author>
<name>J</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>vue源码阅读-实现数据绑定</title>
<link href="https://noobjexception.github.io/blog/2019/04/02/vue%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB-%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93/"/>
<id>https://noobjexception.github.io/blog/2019/04/02/vue源码阅读-实现数据渲染/</id>
<published>2019-04-02T09:09:50.000Z</published>
<updated>2019-04-03T05:07:40.553Z</updated>
<content type="html"><![CDATA[<h2 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h2><ul><li>能解析{ { } }并渲染出值, 如果值为空渲染为空</li><li>vm.data.msg 后值会改变<a id="more"></a></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><div id=<span class="string">"app"</span>></span><br><span class="line"> <p>{{ msg }}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"> <p>{{ msg }}</</span>p></span><br><span class="line"> <p>{{ msg }}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"> <p>{{ why }}</</span>p></span><br><span class="line"> <p>{{ what }}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"></</span>div></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"> <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"#app"</span>,</span><br><span class="line"> data: {</span><br><span class="line"> msg: <span class="string">"hello"</span></span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(vm.data.msg); <span class="comment">// hello</span></span><br><span class="line"></span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> vm.data.msg = <span class="string">"hi"</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(vm.data.msg); <span class="comment">// hi</span></span><br><span class="line"> }, <span class="number">3000</span>);</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure><h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><ul><li>获取根节点, 遍历其子节点, 用正则匹配出{ { } }语法</li><li>利用 Object.defineProperty 绑定并重写属性的 getter/setter 方法, 在 set 的时候重新渲染 dom</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line"><div id=<span class="string">"app"</span>></span><br><span class="line"> <p>{{msg}}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"> <p>{{ msg }}</</span>p></span><br><span class="line"> <p>{{ msg }}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"> <p>{{ why }}</</span>p></span><br><span class="line"> <p>{{ what }}<<span class="regexp">/p></span></span><br><span class="line"><span class="regexp"></</span>div></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"> <span class="comment">// 实现</span></span><br><span class="line"> <span class="keyword">const</span> bindingMark = <span class="string">"data-element-binding"</span>;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Vue</span>(<span class="params">options</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> el = <span class="built_in">document</span>.getElementById(options.el);</span><br><span class="line"> <span class="keyword">const</span> bindings = {};</span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">this</span>.data = {};</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 替换{{}}</span></span><br><span class="line"> el.innerHTML = el.innerHTML.replace(<span class="regexp">/\{\{(.*)\}\}/g</span>, markToken);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> variable <span class="keyword">in</span> bindings) {</span><br><span class="line"> bind(variable);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 根据传入的data初始化数据, 此处重新赋值. 即会触发setter方法, 更新dom</span></span><br><span class="line"> <span class="keyword">if</span> (options.data) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> variable <span class="keyword">in</span> options.data) {</span><br><span class="line"> data[variable] = options.data[variable];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 生成一个文本值的标签容器. 并标记绑定标签</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">markToken</span>(<span class="params">match, variable</span>) </span>{</span><br><span class="line"> variable = variable.trim();</span><br><span class="line"> bindings[variable] = {};</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"<span "</span> + bindingMark + <span class="string">'="'</span> + variable + <span class="string">'"></span>'</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">bind</span>(<span class="params">variable</span>) </span>{</span><br><span class="line"> bindings[variable].els = el.querySelectorAll(</span><br><span class="line"> <span class="string">"["</span> + bindingMark + <span class="string">'="'</span> + variable + <span class="string">'"]'</span></span><br><span class="line"> );</span><br><span class="line"> [].forEach.call(bindings[variable].els, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> e.removeAttribute(bindingMark);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 关键</span></span><br><span class="line"> <span class="built_in">Object</span>.defineProperty(data, variable, {</span><br><span class="line"> <span class="keyword">set</span>: function(newVal) {</span><br><span class="line"> [].forEach.call(bindings[variable].els, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> bindings[variable].value = newVal;</span><br><span class="line"> e.textContent = newVal; <span class="comment">// 重新渲染</span></span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">get</span>: function() {</span><br><span class="line"> <span class="keyword">return</span> bindings[variable].value;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 测试</span></span><br><span class="line"> <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"app"</span>,</span><br><span class="line"> data: {</span><br><span class="line"> msg: <span class="string">"hello"</span></span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(vm.data.msg); <span class="comment">// hello</span></span><br><span class="line"></span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> vm.data.msg = <span class="string">"hi"</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(vm.data.msg); <span class="comment">// hi</span></span><br><span class="line"> }, <span class="number">3000</span>);</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h2><ul>
<li>能解析{ { } }并渲染出值, 如果值为空渲染为空</li>
<li>vm.data.msg 后值会改变
</summary>
</entry>
<entry>
<title>Vue源码阅读, 逐步实现一个Vue</title>
<link href="https://noobjexception.github.io/blog/2019/04/02/vue%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB/"/>
<id>https://noobjexception.github.io/blog/2019/04/02/vue源码阅读/</id>
<published>2019-04-02T08:04:48.000Z</published>
<updated>2019-04-02T09:18:28.255Z</updated>
<content type="html"><![CDATA[<p><br></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>尝试阅读vue的源码</p><h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul><li><a href="./2019-04-02-vue源码阅读-最初的Vue.md">最初的Vue</a></li><li><a href="/blog/2019-04-02-vue源码阅读-实现数据渲染">最初的Vue</a></li></ul>]]></content>
<summary type="html">
<p><br></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>尝试阅读vue的源码</p>
<h2 id="目录"><a href="#目录" class="headerlink
</summary>
</entry>
<entry>
<title>js骚操作总结</title>
<link href="https://noobjexception.github.io/blog/2019/04/02/js%E9%AA%9A%E6%93%8D%E4%BD%9C%E6%80%BB%E7%BB%93/"/>
<id>https://noobjexception.github.io/blog/2019/04/02/js骚操作总结/</id>
<published>2019-04-02T07:53:15.000Z</published>
<updated>2019-04-02T08:01:51.410Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>Hello World</title>
<link href="https://noobjexception.github.io/blog/2019/04/02/hello-world/"/>
<id>https://noobjexception.github.io/blog/2019/04/02/hello-world/</id>
<published>2019-04-02T07:51:14.957Z</published>
<updated>2019-04-02T07:51:14.957Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
</feed>