-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
168 lines (146 loc) · 7.96 KB
/
atom.xml
File metadata and controls
168 lines (146 loc) · 7.96 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
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>pazingaa</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2017-09-09T17:33:39.000Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>John Doe</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>JavaScript实现私有变量</title>
<link href="http://yoursite.com/2017/04/18/js-oop-private-member/"/>
<id>http://yoursite.com/2017/04/18/js-oop-private-member/</id>
<published>2017-04-18T14:15:59.000Z</published>
<updated>2017-09-09T17:33:39.000Z</updated>
<content type="html"><![CDATA[<p><em>ES6之前</em></p>
<hr>
<p>构造函数Person和它的私有方法们：</p>
<pre><code>function Person(name, age){
// 私有变量
this.name = name;
this.age = age;
function privateName(){
// 在constructor中函数声明，实现Person的第1个私有方法
console.log("Name is: "+this.name);
return this.name;
};
var privateAge = function(){
// 在constructor中定义函数表达式，实现Person的第2个私有方法
console.log("Age is: "+this.age);
return this.age;
};
this.publicFunc = function(){
// 需要绑定正确的this作用域，我们使用call方法调用
privateName.call(this);
privateAge.call(this);
}
};
var Peter = new Person("Peter", 24);
Peter.privateAge(); // undefined 验证了私有方法不可访问
Peter.publicFunc(); // console will print name and age 公有方法访问成功
</code></pre><p>######不足之处：</p>
<ol>
<li>内存消耗，每次new操作都会，每个函数都会有一笔新的开销。</li>
<li>私有方法并不存在于原型链上，因此prototype的方法不能访问该方法。</li>
</ol>
<hr>
<p>构造函数Person和它的私有方法们 (by Module Pattern)：</p>
<pre><code>var PersonMP = (function(name, age){
this.name = name;
this.age = age;
function privateName(){
return this.name;
};
function privateAge(){
return this.age;
}
return {
publicFunc : function(){
privateName.call(this);
privateAge.call(this);
}
}
})();
</code></pre><p>######不足之处：</p>
<ol>
<li>如果切换变量或方法的public/private状态，必须要去每个相关地方手动修改。</li>
<li>debug时，对于私有变量较难侦测，且私有变量难以扩充，灵活度不够。</li>
</ol>
<hr>
<p>小结：</p>
<p>利用闭包特性，retrun一个对象字面量，其中裹挟public method以达到提供外界API的目的。此中还是用到了IIFE立即执行函数相关知识。当然，仍有一些改进空间：</p>
<ol>
<li><p>譬如每次都要用到call俩切换scope，可以封装一个方法，一劳永逸。</p>
<p>//返回一个函数，该函数的this绑定到当前对象<br>_:function(fun){<br> var that = this;<br> return function(){</p>
<pre><code>return fun.apply(that,arguments); // 注意return
</code></pre><p> }<br>}</p>
<p>2.将方法绑到constructor的原型链上，可以达到共享的目的，即讲Model Pattern中的IIFE定义给Person.prototype即可：</p>
<p>function Person(name,age){<br> this.name = name;<br> this.age = age;<br>}<br>Person.prototype = (function(){<br> function privateName(){</p>
<pre><code>return this.name;
</code></pre><p> };<br> function privateAge(){</p>
<pre><code>return this.age;
</code></pre><p> }<br> return {</p>
<pre><code>constructor : Person, // 注意定义好constructor指向， 对象字面量会覆盖原prototype
publicFunc : function(){
this._(privateName);
this._(privateAge);
}，
_ : function(fun){
var that = this;
return function(){
return fun.apply(that, arguments); // 注意return
}
}
</code></pre><p>})();</p>
</li>
</ol>
<hr>
<p><em>ES6之前后</em></p>
<hr>
<p>我们有class。</p>
<ol>
<li><p>静态变量</p>
<p>// ES6 的类定义实现了静态方法的定义，但静态变量呢？<br>// 可以用如下方式实现:<br>class Person{<br> static get name(){</p>
<pre><code>return 'jelly';
</code></pre><p> }<br>};<br>Person.name; // </p>
</li>
<li><p>私有属性（私有属性有多种实现方式，只谈及其中一种）<br>// 闭包<br>const TbFedMembers = (() => {<br>const HuaChen = ‘jelly’;</p>
<p>return class{<br>getOneMemberName(){<br> return HuaChen;<br>}<br>};<br>})();</p>
</li>
</ol>
]]></content>
<summary type="html">
<p><em>ES6之前</em></p>
<hr>
<p>构造函数Person和它的私有方法们：</p>
<pre><code>function Person(name, age){
// 私有变量
this.name = name;
this.age
</summary>
<category term="JavaScript //在此处输入这篇文章的分类。" scheme="http://yoursite.com/categories/JavaScript-%E5%9C%A8%E6%AD%A4%E5%A4%84%E8%BE%93%E5%85%A5%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%E7%9A%84%E5%88%86%E7%B1%BB%E3%80%82/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://yoursite.com/2017/02/05/hello-world/"/>
<id>http://yoursite.com/2017/02/05/hello-world/</id>
<published>2017-02-05T15:46:51.000Z</published>
<updated>2017-02-05T15:46:51.000Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">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="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">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><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">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><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">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><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">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><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
</feed>