-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
455 lines (245 loc) · 163 KB
/
Copy pathatom.xml
File metadata and controls
455 lines (245 loc) · 163 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
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
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>DanielDemi</title>
<subtitle>生活</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://danieldemi.com/"/>
<updated>2018-06-21T15:04:47.544Z</updated>
<id>http://danieldemi.com/</id>
<author>
<name>DanielDemi</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>loading</title>
<link href="http://danieldemi.com/2018/06/21/loading/"/>
<id>http://danieldemi.com/2018/06/21/loading/</id>
<published>2018-06-21T13:16:09.000Z</published>
<updated>2018-06-21T15:04:47.544Z</updated>
<content type="html"><![CDATA[<h1 id="这是一个效果还好的loading"><a href="#这是一个效果还好的loading" class="headerlink" title="这是一个效果还好的loading"></a>这是一个效果还好的loading</h1><p>点这里看<a href="https://github.com/DanielDemi/base-demos" target="_blank" rel="noopener">源码</a></p><iframe src="http://danieldemi.com/base-demos/loading/loading-1" width="600" height="250" frameborder="0" scrolling="0"></iframe>]]></content>
<summary type="html">
<h1 id="这是一个效果还好的loading"><a href="#这是一个效果还好的loading" class="headerlink" title="这是一个效果还好的loading"></a>这是一个效果还好的loading</h1><p>点这里看<a href="h
</summary>
<category term="demo" scheme="http://danieldemi.com/categories/demo/"/>
<category term="demo" scheme="http://danieldemi.com/tags/demo/"/>
</entry>
<entry>
<title>websock(AMQ)通信-前端</title>
<link href="http://danieldemi.com/2018/06/11/websocket/"/>
<id>http://danieldemi.com/2018/06/11/websocket/</id>
<published>2018-06-11T14:30:28.000Z</published>
<updated>2018-06-13T14:50:50.668Z</updated>
<content type="html"><![CDATA[<h3 id="服务端和客户端之间的通信"><a href="#服务端和客户端之间的通信" class="headerlink" title="服务端和客户端之间的通信"></a>服务端和客户端之间的通信</h3><p>前端开发经常会依赖后端，那么如果后端服务器还没做好推送服务器，那么前端该如何呢。<br>最简单的就是自己模拟一个服务器，用node来搭建，这边只简单介绍搭建的过程</p><h4 id="node搭建服务器"><a href="#node搭建服务器" class="headerlink" title="node搭建服务器"></a>node搭建服务器</h4><h5 id="1-选取websocket插件进行开发"><a href="#1-选取websocket插件进行开发" class="headerlink" title="1.选取websocket插件进行开发"></a>1.选取websocket插件进行开发</h5><p>按照如下步骤进行开发<br>在命令台中输入以下命令<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y </span><br><span class="line">npm i websocket -S</span><br></pre></td></tr></table></figure></p><p>安装完websocket插件后就可以搭建服务器了，首先新建一个app.js，并且代码如下</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var webSocketsServerPort = 3002</span><br><span class="line">var webSocketServer = require('websocket').server</span><br><span class="line">var http = require('http')</span><br><span class="line"></span><br><span class="line">var server = http.createServer(function(req, res) {</span><br><span class="line"></span><br><span class="line">})</span><br><span class="line">server.listen(webSocketsServerPort, function() {</span><br><span class="line"> console.log((new Date()) + "Server is listening on port " + webSocketsServerPort)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">/**</span><br><span class="line"> * websock server</span><br><span class="line"> */</span><br><span class="line">var wsServer = new webSocketServer({</span><br><span class="line"> httpServer: server</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">wsServer.on('request', function(request) {</span><br><span class="line"> var connection = request.accept(null, request.origin); </span><br><span class="line"> connection.on('message', function(message) {</span><br><span class="line"> console.log('message');</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> connection.on('close', function(connection) {</span><br><span class="line"> console.log('close');</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>这样一个简易的服务器已经搭建完成。可以通过客户端进行测试(客户端代码见后面)</p><h5 id="2-选取faye-websocket插件进行开发"><a href="#2-选取faye-websocket插件进行开发" class="headerlink" title="2.选取faye-websocket插件进行开发"></a>2.选取faye-websocket插件进行开发</h5><p>在命令台中输入以下命令</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y </span><br><span class="line">npm i faye-websocket-S</span><br></pre></td></tr></table></figure><p>这种方式更简单了。代码如下<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var WebSocket = require('faye-websocket'),</span><br><span class="line"> http = require('http');</span><br><span class="line"></span><br><span class="line">var server = http.createServer();</span><br><span class="line"></span><br><span class="line">server.on('upgrade', function(request, socket, body) {</span><br><span class="line"> if (WebSocket.isWebSocket(request)) {</span><br><span class="line"> var ws = new WebSocket(request, socket, body);</span><br><span class="line"></span><br><span class="line"> ws.on('message', function(event) {</span><br><span class="line"> ws.send(event.data);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> ws.on('close', function(event) {</span><br><span class="line"> console.log('close', event.code, event.reason);</span><br><span class="line"> ws = null;</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">server.listen(3002);</span><br></pre></td></tr></table></figure></p><h5 id="3-选取socket-io插件进行开发"><a href="#3-选取socket-io插件进行开发" class="headerlink" title="3.选取socket.io插件进行开发"></a>3.选取socket.io插件进行开发</h5><p>该插件依赖于express<br>命令如下<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">express -e node-js-socketio // express模板安装</span><br><span class="line">npm i // 安装express插件</span><br><span class="line">npm i socket.io -S // 安装socket.io</span><br></pre></td></tr></table></figure></p><p>app.js文件改成如下代码<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var app = require('express')()</span><br><span class="line"> , server = require('http').createServer(app)</span><br><span class="line"> , io = require('socket.io').listen(server);</span><br><span class="line"></span><br><span class="line">server.listen(3002);</span><br><span class="line"></span><br><span class="line">app.get('/', function (req, res) {</span><br><span class="line"> res.sendfile(__dirname + '/client/index.html');</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">io.sockets.on('connection', function (socket) {</span><br><span class="line"> socket.emit('news', { hello: 'world' });</span><br><span class="line"> socket.on('my other event', function (data) {</span><br><span class="line"> console.log(data);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p><p>至此 服务器搭建已经完成(还有一种是基于stomp.js,目前还没弄清楚node如何搭建，等知道后在补充)</p><h4 id="客户端（即浏览器）调用服务器"><a href="#客户端（即浏览器）调用服务器" class="headerlink" title="客户端（即浏览器）调用服务器"></a>客户端（即浏览器）调用服务器</h4><h5 id="1-简单的demo如下"><a href="#1-简单的demo如下" class="headerlink" title="1.简单的demo如下"></a>1.简单的demo如下</h5><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><html></span><br><span class="line"></span><br><span class="line"><body></span><br><span class="line"> <div id="output"></div></span><br><span class="line"> <script></span><br><span class="line"> function checkBrowser() {</span><br><span class="line"> if (window.WebSocket) {</span><br><span class="line"> log("This browser supports WebSocket!");</span><br><span class="line"> } else {</span><br><span class="line"> log("This browser does not support WebSocket.");</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> function setup() {</span><br><span class="line"> var wsServer = 'ws://localhost:3002';</span><br><span class="line"> var ws = new WebSocket(wsServer);</span><br><span class="line"></span><br><span class="line"> ws.onopen = function(e) {</span><br><span class="line"> log("Connected to WebSocket server.", e);</span><br><span class="line"> sendMessage("Conan");</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> ws.onclose = function(e) {</span><br><span class="line"> log("Disconnected", e);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> ws.onmessage = function(e) {</span><br><span class="line"> log("RECEIVED: " + e.data, e);</span><br><span class="line"> ws.close();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> ws.onerror = function(e) {</span><br><span class="line"> log('Error occured: ' + e.data, e);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var sendMessage = function(msg) {</span><br><span class="line"> ws.send(msg);</span><br><span class="line"> log("SEND : " + msg);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> function log(s, e) {</span><br><span class="line"> var output = document.getElementById("output");</span><br><span class="line"> var p = document.createElement("p");</span><br><span class="line"> p.style.wordWrap = "break-word";</span><br><span class="line"> p.style.padding = "10px";</span><br><span class="line"> p.style.background = "#eee";</span><br><span class="line"> p.textContent = "LOG : " + s;</span><br><span class="line"> output.appendChild(p);</span><br><span class="line"> console.log("LOG : " + s, e);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> checkBrowser();</span><br><span class="line"> setup();</span><br><span class="line"> </script></span><br><span class="line"></body></span><br><span class="line"></span><br><span class="line"></html></span><br></pre></td></tr></table></figure><h5 id="2-基于express的socket-io的demo如下"><a href="#2-基于express的socket-io的demo如下" class="headerlink" title="2.基于express的socket.io的demo如下"></a>2.基于express的socket.io的demo如下</h5><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html></span><br><span class="line"><head></span><br><span class="line"><title>socket.io</title></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"><h1>socket.io</h1></span><br><span class="line"><p>Welcome to socket.io</p></span><br><span class="line"></span><br><span class="line"><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script></span><br><span class="line"><script></span><br><span class="line">var socket = io.connect('http://localhost:3002');</span><br><span class="line">socket.on('news', function (data) {</span><br><span class="line">console.log(data);</span><br><span class="line">socket.emit('my other event', { my: 'data' });</span><br><span class="line">});</span><br><span class="line"></script></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure><h4 id="3-基于AMQ的demo-目前还不知道服务器如何搭建，但客户端还是可以用的"><a href="#3-基于AMQ的demo-目前还不知道服务器如何搭建，但客户端还是可以用的" class="headerlink" title="3. 基于AMQ的demo(目前还不知道服务器如何搭建，但客户端还是可以用的)"></a>3. 基于AMQ的demo(目前还不知道服务器如何搭建，但客户端还是可以用的)</h4><p>demo里放了3种模式，主要就是Queue和topic，消费和发布<br>Queue和topic的区别是一对多和多对多（QUEUE发送一个人消息之后，就消失了，而topic可以发送多个人）<br><figure class="highlight plain"><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><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html lang="en"></span><br><span class="line"><head></span><br><span class="line"> <meta charset="UTF-8"></span><br><span class="line"> <title>Document</title></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"></span><br><span class="line"> <script type="stompjs"></script></span><br><span class="line"> <script type="text/javascript"></span><br><span class="line"> // 3种模式 </span><br><span class="line"> // QUeue是只有1对多模式，，topic多对多模式</span><br><span class="line"> // 1.消息发布者模式</span><br><span class="line"> var client = Stomp.overTCP('localhost', 61613);</span><br><span class="line"> // uncomment to print out the STOMP frames</span><br><span class="line"></span><br><span class="line"> var connectCallback = function(frame) {</span><br><span class="line"> var subscription = client.subscribe('/topic/FirstQueue', onMessage);</span><br><span class="line"> //subscription.unsubscribe();</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var onMessage = function(message){</span><br><span class="line"> if (message.body) {</span><br><span class="line"> console.log("got message with body " + message.body)</span><br><span class="line"> } else {</span><br><span class="line"> console.log("got empty message");</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var errorCallback = function(error){</span><br><span class="line"> console.log(error.headers.message);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> client.connect('admin', 'admin', connectCallback,errorCallback);</span><br><span class="line"></span><br><span class="line"> // 2.Queue消息消费者</span><br><span class="line"> var Stomp = require('stompjs');</span><br><span class="line"></span><br><span class="line"> // Use raw TCP sockets</span><br><span class="line"> var client = Stomp.overTCP('localhost', 61613);</span><br><span class="line"> // uncomment to print out the STOMP frames</span><br><span class="line"> // client.debug = console.log;</span><br><span class="line"></span><br><span class="line"> var connectCallback = function(frame) {</span><br><span class="line"> var subscription = client.subscribe('/queue/FirstQueue', onMessage);</span><br><span class="line"> //subscription.unsubscribe();</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var onMessage = function(message){</span><br><span class="line"> if (message.body) {</span><br><span class="line"> console.log("got message with body " + message.body)</span><br><span class="line"> } else {</span><br><span class="line"> console.log("got empty message");</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var errorCallback = function(error){</span><br><span class="line"> console.log(error.headers.message);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> client.connect('admin', 'admin', connectCallback,errorCallback);</span><br><span class="line"> // 3.topic 消息订阅者模式</span><br><span class="line"> // Use raw TCP sockets</span><br><span class="line"> var client = Stomp.overTCP('localhost', 61613);</span><br><span class="line"> // uncomment to print out the STOMP frames</span><br><span class="line"> // client.debug = console.log;</span><br><span class="line"></span><br><span class="line"> var connectCallback = function(frame) {</span><br><span class="line"> var subscription = client.subscribe('/topic/FirstQueue', onMessage);</span><br><span class="line"> //subscription.unsubscribe();</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var onMessage = function(message){</span><br><span class="line"> if (message.body) {</span><br><span class="line"> console.log("got message with body " + message.body)</span><br><span class="line"> } else {</span><br><span class="line"> console.log("got empty message");</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var errorCallback = function(error){</span><br><span class="line"> console.log(error.headers.message);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> client.connect('admin', 'admin', connectCallback,errorCallback);</span><br><span class="line"> </script></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<h3 id="服务端和客户端之间的通信"><a href="#服务端和客户端之间的通信" class="headerlink" title="服务端和客户端之间的通信"></a>服务端和客户端之间的通信</h3><p>前端开发经常会依赖后端，那么如果后端服务器还没做好推送服务器
</summary>
<category term="websocket" scheme="http://danieldemi.com/categories/websocket/"/>
<category term="websocket" scheme="http://danieldemi.com/tags/websocket/"/>
</entry>
<entry>
<title>前端面试经典题目</title>
<link href="http://danieldemi.com/2018/06/11/interview-1/"/>
<id>http://danieldemi.com/2018/06/11/interview-1/</id>
<published>2018-06-11T14:29:06.000Z</published>
<updated>2018-06-11T14:29:40.697Z</updated>
<content type="html"><![CDATA[<h3 id="这边列举了5个前端经典的面试题"><a href="#这边列举了5个前端经典的面试题" class="headerlink" title="这边列举了5个前端经典的面试题"></a>这边列举了5个前端经典的面试题</h3><p>首先我们来看一下题目，都各自思考一下，自己是否能够做出来。然后再跟后面的答案对比一下</p><h4 id="题目1"><a href="#题目1" class="headerlink" title="题目1"></a>题目1</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var a = {n:1}</span><br><span class="line">var b = {n:2}</span><br><span class="line">b.x = a = {n:3}</span><br><span class="line">console.log(b.x)</span><br><span class="line">a.x = a = {n:3}</span><br><span class="line">console.log(a.x)</span><br></pre></td></tr></table></figure><h4 id="题目2"><a href="#题目2" class="headerlink" title="题目2"></a>题目2</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">（1）</span><br><span class="line">var start = new Date()</span><br><span class="line">setTimeout(function() {</span><br><span class="line"> console.log(new Date() -start)</span><br><span class="line">}, 500)</span><br><span class="line">（2）</span><br><span class="line">var start = new Date()</span><br><span class="line">setTimeout(function() {</span><br><span class="line"> console.log(new Date() -start)</span><br><span class="line">}, 500)</span><br><span class="line"></span><br><span class="line">while((new Date() - start <= 1000) {}</span><br></pre></td></tr></table></figure><h4 id="题目3"><a href="#题目3" class="headerlink" title="题目3"></a>题目3</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var log = console.log</span><br><span class="line">var hint = window.alert</span><br><span class="line">var write = document.write</span><br><span class="line">log('123')</span><br><span class="line">hint('123')</span><br><span class="line">wirte('123')</span><br></pre></td></tr></table></figure><h4 id="题目4"><a href="#题目4" class="headerlink" title="题目4"></a>题目4</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var name = 'A'</span><br><span class="line">function getName() {</span><br><span class="line"> return this.name</span><br><span class="line">}</span><br><span class="line">var obj = {</span><br><span class="line"> name: 'B',</span><br><span class="line"> getName: function() {</span><br><span class="line"> return this.name</span><br><span class="line"> },</span><br><span class="line"> showName:function(a) {</span><br><span class="line"> console.log(getName())</span><br><span class="line"> console.log(a())</span><br><span class="line"> console.log(a === arguments[0])</span><br><span class="line"> console.log(arguments[0]())</span><br><span class="line"> } </span><br><span class="line">}</span><br><span class="line">obj .showName(getName, 1)</span><br></pre></td></tr></table></figure><h4 id="题目5"><a href="#题目5" class="headerlink" title="题目5"></a>题目5</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">async function async1() {</span><br><span class="line"> console.log('async1 start')</span><br><span class="line"> await async2()</span><br><span class="line"> console.log('async1 end')</span><br><span class="line">}</span><br><span class="line">async function async2() {</span><br><span class="line"> console.log(async2())</span><br><span class="line">}</span><br><span class="line">console.log('script start')</span><br><span class="line">setTimeout(function() {</span><br><span class="line"> console.log('setTimeout')</span><br><span class="line">}, 0)</span><br><span class="line">async1()</span><br><span class="line">new Promise(function (resolve) {</span><br><span class="line"> console.log('promise1')</span><br><span class="line"> resolve()</span><br><span class="line">}).then(function() {</span><br><span class="line"> console.log('promise2')</span><br><span class="line">})</span><br><span class="line">console.log('script end')</span><br></pre></td></tr></table></figure><h4 id="答案1"><a href="#答案1" class="headerlink" title="答案1"></a>答案1</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">console.log(b.x) // {n:3}</span><br><span class="line">console.log(a.x) // undefined</span><br><span class="line">这是跟js的优先级有关的 .的优先级最高，因此先计算左边的b.x,a.x</span><br></pre></td></tr></table></figure><h4 id="答案2"><a href="#答案2" class="headerlink" title="答案2"></a>答案2</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">(1)</span><br><span class="line">console.log(new Date() -start) // 不是一定500,而是大于等于500</span><br><span class="line">主要是由于定时器的时间不一定准，这个跟异步的机制有关</span><br><span class="line">当定时器的时间到了之后，执行函数会进入栈中，会根据栈中的执行任务，</span><br><span class="line">依次执行（不懂的可以学习一下异步机制）</span><br><span class="line">(2)</span><br><span class="line">console.log(new Date() -start) // 大于等于1000</span><br><span class="line">由于是单线程</span><br></pre></td></tr></table></figure><h4 id="答案3"><a href="#答案3" class="headerlink" title="答案3"></a>答案3</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">log('123') // 正常</span><br><span class="line">hint('123') // 正常</span><br><span class="line">write('123') // 报错</span><br><span class="line">这是由于write是相当于window.write；而document.write下面应该会用到this对象，</span><br><span class="line">所以会报错</span><br><span class="line">应当改成window.write(document, '123')</span><br></pre></td></tr></table></figure><h4 id="答案4"><a href="#答案4" class="headerlink" title="答案4"></a>答案4</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">console.log(getName()) // 'A' this === window</span><br><span class="line">console.log(a()) // 'A' this === window</span><br><span class="line">console.log(a === arguments[0]) // true</span><br><span class="line">console.log(arguments[0]()) // undefined this 为argument对象</span><br></pre></td></tr></table></figure><h4 id="答案5"><a href="#答案5" class="headerlink" title="答案5"></a>答案5</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">script start</span><br><span class="line">async1 start</span><br><span class="line">async2</span><br><span class="line">promise1</span><br><span class="line">async1 end</span><br><span class="line">script end</span><br><span class="line">promise2</span><br><span class="line">setTimeout</span><br><span class="line">这一块跟异步有关</span><br><span class="line">先同步，后异步，在回调。还有promise机制</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h3 id="这边列举了5个前端经典的面试题"><a href="#这边列举了5个前端经典的面试题" class="headerlink" title="这边列举了5个前端经典的面试题"></a>这边列举了5个前端经典的面试题</h3><p>首先我们来看一下题目，都各自思考一下
</summary>
<category term="前端面试" scheme="http://danieldemi.com/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/"/>
<category term="前端面试" scheme="http://danieldemi.com/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/"/>
</entry>
<entry>
<title>vue采坑记录</title>
<link href="http://danieldemi.com/2018/05/30/vue-1/"/>
<id>http://danieldemi.com/2018/05/30/vue-1/</id>
<published>2018-05-30T14:15:22.000Z</published>
<updated>2018-06-07T15:09:12.473Z</updated>
<content type="html"><![CDATA[<h4 id="1-数据双向绑定"><a href="#1-数据双向绑定" class="headerlink" title="1.数据双向绑定"></a>1.数据双向绑定</h4><pre><code>在vue中数据双向绑定是十分重要的，那么所有的参数都必要现有定义，如果没有一开始没有定义参数的话，那么就不会双向实现需要通过set来修改变量<input v-model="test.val">data() { return { test: {} }},created() { test.val = 1;}// 这种情况下是不会双向绑定的需要这样created() { this.$set(test, val, 1)}// 经过set设置，会将该参数进入watch，那么就会双向绑定了当然一开始data里面直接有val参数就完全不是问题了，这类主要是针对动态创建的问题</code></pre><h4 id="2-修改其他组件的样式"><a href="#2-修改其他组件的样式" class="headerlink" title="2.修改其他组件的样式"></a>2.修改其他组件的样式</h4><pre><code>在vue文件中，为让文件样式独立，我们经常会在style加上scoped，这样这里的样式只会作用于该文件，但是这样我们修改自组件的样式的时候，往往是不生效的需要这样设置才行,在需要修改子组件样式前面加/deep/，如parent /deep/ child {}</code></pre>]]></content>
<summary type="html">
<h4 id="1-数据双向绑定"><a href="#1-数据双向绑定" class="headerlink" title="1.数据双向绑定"></a>1.数据双向绑定</h4><pre><code>在vue中数据双向绑定是十分重要的，那么所有的参数都必要现有定义，
如果没有
</summary>
<category term="vue" scheme="http://danieldemi.com/categories/vue/"/>
<category term="vue" scheme="http://danieldemi.com/tags/vue/"/>
</entry>
<entry>
<title>学习jquery源码-5 （jquery-2.0.3）（不兼容ie6,7,8）</title>
<link href="http://danieldemi.com/2018/05/27/learn-jquery-5/"/>
<id>http://danieldemi.com/2018/05/27/learn-jquery-5/</id>
<published>2018-05-27T07:29:14.000Z</published>
<updated>2018-06-21T14:51:07.184Z</updated>
<content type="html"><![CDATA[<h2 id="jquery代码349-817行-扩展一些工具方法（静态方法和静态属性）"><a href="#jquery代码349-817行-扩展一些工具方法（静态方法和静态属性）" class="headerlink" title="jquery代码349-817行 扩展一些工具方法（静态方法和静态属性）"></a>jquery代码349-817行 扩展一些工具方法（静态方法和静态属性）</h2><p>使用之前$.extend方法来扩展方法，供jquery内部调用方便</p><p>首先列举以下属性和方法<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">jQuery.extend({</span><br><span class="line"> expando: 生成唯一JQ字符串（内部）,</span><br><span class="line"> noConfict(): 防止冲突,</span><br><span class="line"> isReady： DOM是否价值完（内部）</span><br><span class="line"> readyWait: 等待多时文件的计数器（内部）</span><br><span class="line"> holdReady(): 推迟DOM触发</span><br><span class="line"> isFunction(): 是否为函数</span><br><span class="line"> isArray(): 是否为数组</span><br><span class="line"> isWindow(): 是否为window</span><br><span class="line"> isNumeric: 是否欸数字</span><br><span class="line"> type() : 判断数据类型</span><br><span class="line"> isPlainObject(): 是否为对象自变量</span><br><span class="line"> isEmptyObject(): 是否为空的对象</span><br><span class="line"> error(): 抛出异常</span><br><span class="line"> parseHTML(): 解析节点</span><br><span class="line"> parseJSON(): 解析JSON</span><br><span class="line"> noop(): 空函数</span><br><span class="line"> globaEval(): 全局解析JS</span><br><span class="line">camelCase(): 转驼峰</span><br><span class="line">nodeName(): 是否指定节点名（内部）</span><br><span class="line">each(): 遍历集合</span><br><span class="line">trim(): 去前后空格</span><br><span class="line">makeArray(): 类数组转真数组</span><br><span class="line">inArray()： 数组版indexof</span><br><span class="line">merge(): 合并数组</span><br><span class="line">grep(): 过滤新数组</span><br><span class="line">map()： 映射新数组</span><br><span class="line">guid: 唯一标识符</span><br><span class="line">proxy(): 改this指向</span><br><span class="line">access(): 多功能值操作</span><br><span class="line">now(): 当前时间</span><br><span class="line">swap(): css交换</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><p>接下来是源码 正在研读中—-<br><figure class="highlight plain"><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><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br></pre></td><td class="code"><pre><span class="line">jQuery.extend({</span><br><span class="line">// 唯一jQuery字符串</span><br><span class="line">expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" ),</span><br><span class="line">// 如果$或jquery被使用了，那么需要使用该函数来更名，防止和其他冲突</span><br><span class="line">noConflict: function( deep ) {</span><br><span class="line">if ( window.$ === jQuery ) {</span><br><span class="line">window.$ = _$; // 针对$一开始被复制 ，现在还原</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">if ( deep && window.jQuery === jQuery ) {</span><br><span class="line">window.jQuery = _jQuery; // 针对$一开始被复制 ，现在还原,并且用参数true来控制</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return jQuery;</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// DOM是否加载完成标志位</span><br><span class="line">isReady: false,</span><br><span class="line"></span><br><span class="line">// 等待次数</span><br><span class="line">readyWait: 1,</span><br><span class="line"></span><br><span class="line">// 推迟reday触发 $.holdReady(true) 推迟， $.holdReady(false)再触发 </span><br><span class="line">// 使用场景， ajax异步加载数据有先后关系时，可以使用</span><br><span class="line">holdReady: function( hold ) {</span><br><span class="line">if ( hold ) {</span><br><span class="line">jQuery.readyWait++;</span><br><span class="line">} else {</span><br><span class="line">jQuery.ready( true );</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// Handle when the DOM is ready</span><br><span class="line">ready: function( wait ) {</span><br><span class="line"></span><br><span class="line">// 第一次不进入这边，第二次开始进入，判断是否处于reday等待</span><br><span class="line">if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {</span><br><span class="line">return;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// dom加载完毕</span><br><span class="line">jQuery.isReady = true;</span><br><span class="line"></span><br><span class="line">// 第一次进入后返回，如果有ready等待</span><br><span class="line">if ( wait !== true && --jQuery.readyWait > 0 ) {</span><br><span class="line">return;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 解析ready函数 $(function() {})</span><br><span class="line">readyList.resolveWith( document, [ jQuery ] );</span><br><span class="line"></span><br><span class="line">// 这种判断是否有reday事件，有就触发：$(doc).on('reday' ,func(){})</span><br><span class="line">if ( jQuery.fn.trigger ) {</span><br><span class="line">jQuery( document ).trigger("ready").off("ready");</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">isFunction: function( obj ) {</span><br><span class="line">return jQuery.type(obj) === "function";</span><br><span class="line">},</span><br><span class="line">// 判断是否为数组</span><br><span class="line">isArray: Array.isArray,</span><br><span class="line">// 判断是否为window</span><br><span class="line">isWindow: function( obj ) {</span><br><span class="line">return obj != null && obj === obj.window;</span><br><span class="line">},</span><br><span class="line">// 判断是否为数字</span><br><span class="line">isNumeric: function( obj ) {</span><br><span class="line">// 判断是否为NAN 和是否为有限数字</span><br><span class="line">return !isNaN( parseFloat(obj) ) && isFinite( obj );</span><br><span class="line">},</span><br><span class="line">// 判断数据类型</span><br><span class="line">type: function( obj ) {</span><br><span class="line">if ( obj == null ) {</span><br><span class="line">return String( obj );</span><br><span class="line">}</span><br><span class="line">// typeof 无法区分对象的详细类型</span><br><span class="line">return typeof obj === "object" || typeof obj === "function" ?</span><br><span class="line">class2type[ core_toString.call(obj) ] || "object" :</span><br><span class="line">typeof obj;</span><br><span class="line">},</span><br><span class="line"> // 是否为对象自变量:json 或new对象</span><br><span class="line">isPlainObject: function( obj ) {</span><br><span class="line">// 如果不是对象或者节点，window直接排除（节点和window也返回object）</span><br><span class="line">if ( jQuery.type( obj ) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {</span><br><span class="line">return false;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">try {</span><br><span class="line">// 判断是否有构造函数，以及判断原型链上的方法是否有</span><br><span class="line">if ( obj.constructor &&</span><br><span class="line">!core_hasOwn.call( obj.constructor.prototype, "isPrototypeOf" ) ) {</span><br><span class="line">return false;</span><br><span class="line">}</span><br><span class="line">} catch ( e ) {</span><br><span class="line">return false;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return true;</span><br><span class="line">},</span><br><span class="line">// 是否为空</span><br><span class="line">isEmptyObject: function( obj ) {</span><br><span class="line">var name;</span><br><span class="line">// 通过遍历自身参数</span><br><span class="line">for ( name in obj ) {</span><br><span class="line">return false;</span><br><span class="line">}</span><br><span class="line">return true;</span><br><span class="line">},</span><br><span class="line">// 抛出错误</span><br><span class="line">error: function( msg ) {</span><br><span class="line">throw new Error( msg );</span><br><span class="line">},</span><br><span class="line">// 解析节点</span><br><span class="line">parseHTML: function( data, context, keepScripts ) {</span><br><span class="line">if ( !data || typeof data !== "string" ) {</span><br><span class="line">return null;</span><br><span class="line">}</span><br><span class="line">if ( typeof context === "boolean" ) {</span><br><span class="line">keepScripts = context;</span><br><span class="line">context = false;</span><br><span class="line">}</span><br><span class="line">context = context || document;</span><br><span class="line"></span><br><span class="line">var parsed = rsingleTag.exec( data ),</span><br><span class="line">scripts = !keepScripts && [];</span><br><span class="line"></span><br><span class="line">if ( parsed ) {</span><br><span class="line">return [ context.createElement( parsed[1] ) ];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">parsed = jQuery.buildFragment( [ data ], context, scripts );</span><br><span class="line"></span><br><span class="line">if ( scripts ) {</span><br><span class="line">jQuery( scripts ).remove();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return jQuery.merge( [], parsed.childNodes );</span><br><span class="line">},</span><br><span class="line">// 字符串转json，使用原声js</span><br><span class="line">parseJSON: JSON.parse,</span><br><span class="line"></span><br><span class="line">// 字符串转xml</span><br><span class="line">parseXML: function( data ) {</span><br><span class="line">var xml, tmp;</span><br><span class="line">// 数据不是字符串或空直接返回</span><br><span class="line">if ( !data || typeof data !== "string" ) {</span><br><span class="line">return null;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 兼容IE9</span><br><span class="line">try {</span><br><span class="line">tmp = new DOMParser();</span><br><span class="line">// ie9下 使用该方式解析必须是完整的xml(即标签是成对的)，不然会报错</span><br><span class="line">// 其他浏览器出错会生成<parsererror>标签</span><br><span class="line">xml = tmp.parseFromString( data , "text/xml" );</span><br><span class="line">} catch ( e ) {</span><br><span class="line">xml = undefined;</span><br><span class="line">}</span><br><span class="line">// ie9针对报错或生成不对的xml的处理</span><br><span class="line">if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {</span><br><span class="line">jQuery.error( "Invalid XML: " + data );</span><br><span class="line">}</span><br><span class="line">return xml;</span><br><span class="line">},</span><br><span class="line">// 空函数</span><br><span class="line">noop: function() {},</span><br><span class="line"></span><br><span class="line">// 全局解析js, 把局部变量转变成全局的 </span><br><span class="line">globalEval: function( code ) {</span><br><span class="line">var script,</span><br><span class="line">indirect = eval; // evel 先赋值，不然会当保留字符</span><br><span class="line">// 去除前后空格</span><br><span class="line">code = jQuery.trim( code );</span><br><span class="line"></span><br><span class="line">if ( code ) {</span><br><span class="line">// 是否严格模式下（严格模式下不支持 eval方法）</span><br><span class="line">if ( code.indexOf("use strict") === 1 ) {</span><br><span class="line">script = document.createElement("script");</span><br><span class="line">script.text = code;</span><br><span class="line">document.head.appendChild( script ).parentNode.removeChild( script );</span><br><span class="line">} else {</span><br><span class="line">indirect( code );</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line">// 转峰坨，eg. z-ms 转为 zMs (ie转换 第一个需注意： -ms-s => ms-S, -moz-s => MozS)</span><br><span class="line">// rmsPrefix: /^-ms-/ 正则</span><br><span class="line">// rdashAlpha: /-([\da-z])/gi</span><br><span class="line">camelCase: function( string ) {</span><br><span class="line">return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );</span><br><span class="line">},</span><br><span class="line">// 是否为指定节点名 返回是否： eg nodeName(element.elementElement, 'html')为true</span><br><span class="line">nodeName: function( elem, name ) {</span><br><span class="line">return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// 遍历集合 数组，类数组，json</span><br><span class="line">each: function( obj, callback, args ) {</span><br><span class="line">var value,</span><br><span class="line">i = 0,</span><br><span class="line">length = obj.length,</span><br><span class="line">isArray = isArraylike( obj ); // 是否为数组或类数组对象</span><br><span class="line">// 是否还有其他参数， 默认我们都是进入else</span><br><span class="line">if ( args ) {</span><br><span class="line">if ( isArray ) {</span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">value = callback.apply( obj[ i ], args );</span><br><span class="line"></span><br><span class="line">if ( value === false ) {</span><br><span class="line">break;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">} else {</span><br><span class="line">for ( i in obj ) {</span><br><span class="line">value = callback.apply( obj[ i ], args );</span><br><span class="line"></span><br><span class="line">if ( value === false ) {</span><br><span class="line">break;</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">} else {</span><br><span class="line">if ( isArray ) {</span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">value = callback.call( obj[ i ], i, obj[ i ] );</span><br><span class="line">// 如果我们return false 则可以跳出each</span><br><span class="line">if ( value === false ) {</span><br><span class="line">break;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">} else {</span><br><span class="line">for ( i in obj ) {</span><br><span class="line">value = callback.call( obj[ i ], i, obj[ i ] );</span><br><span class="line"></span><br><span class="line">if ( value === false ) {</span><br><span class="line">break;</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">return obj;</span><br><span class="line">},</span><br><span class="line">// 去除前后空格</span><br><span class="line">trim: function( text ) {</span><br><span class="line">return text == null ? "" : core_trim.call( text ); // 使用js原声方法</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// 类数组转数组</span><br><span class="line">makeArray: function( arr, results ) {</span><br><span class="line">var ret = results || [];</span><br><span class="line"></span><br><span class="line">if ( arr != null ) {</span><br><span class="line">if ( isArraylike( Object(arr) ) ) {</span><br><span class="line">// merge后面介绍，合并数组</span><br><span class="line">jQuery.merge( ret,</span><br><span class="line">typeof arr === "string" ?</span><br><span class="line">[ arr ] : arr</span><br><span class="line">);</span><br><span class="line">} else {</span><br><span class="line">core_push.call( ret, arr );</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return ret;</span><br><span class="line">},</span><br><span class="line">// 返回位置</span><br><span class="line">inArray: function( elem, arr, i ) {</span><br><span class="line">return arr == null ? -1 : core_indexOf.call( arr, elem, i );</span><br><span class="line">},</span><br><span class="line"> // 合并数组或类对象 eg. merge([a, b], [c, d]) merge([a, b], {0: v, 1: d})</span><br><span class="line">// merge({0: v, 1: d}, {0: v, 1: d})</span><br><span class="line">merge: function( first, second ) {</span><br><span class="line">var l = second.length,</span><br><span class="line">i = first.length,</span><br><span class="line">j = 0;</span><br><span class="line"></span><br><span class="line">if ( typeof l === "number" ) {</span><br><span class="line">// second为数组</span><br><span class="line">for ( ; j < l; j++ ) {</span><br><span class="line">first[ i++ ] = second[ j ];</span><br><span class="line">}</span><br><span class="line">} else {</span><br><span class="line">// second为对象， 主要对内部使用</span><br><span class="line">while ( second[j] !== undefined ) {</span><br><span class="line">first[ i++ ] = second[ j++ ];</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">first.length = i;</span><br><span class="line"></span><br><span class="line">return first;</span><br><span class="line">},</span><br><span class="line">// 过滤得到新数组（跟js中filter类型）</span><br><span class="line">grep: function( elems, callback, inv ) {</span><br><span class="line">var retVal,</span><br><span class="line">ret = [],</span><br><span class="line">i = 0,</span><br><span class="line">length = elems.length;</span><br><span class="line">inv = !!inv;</span><br><span class="line"></span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">retVal = !!callback( elems[ i ], i );</span><br><span class="line">// return的值与第三个参数比较，是否需要保留</span><br><span class="line">if ( inv !== retVal ) {</span><br><span class="line">ret.push( elems[ i ] );</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return ret;</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// 得到新数组(跟原声js map一样功能)</span><br><span class="line">map: function( elems, callback, arg ) {</span><br><span class="line">var value,</span><br><span class="line">i = 0,</span><br><span class="line">length = elems.length,</span><br><span class="line">isArray = isArraylike( elems ),</span><br><span class="line">ret = [];</span><br><span class="line">// 数组</span><br><span class="line">if ( isArray ) {</span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">value = callback( elems[ i ], i, arg );</span><br><span class="line"></span><br><span class="line">if ( value != null ) {</span><br><span class="line">ret[ ret.length ] = value;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">// json对象</span><br><span class="line">} else {</span><br><span class="line">for ( i in elems ) {</span><br><span class="line">value = callback( elems[ i ], i, arg );</span><br><span class="line"></span><br><span class="line">if ( value != null ) {</span><br><span class="line">ret[ ret.length ] = 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">// 合并数组，避免出现复合数组 如return [2] 结果会变成[[2], [3]...]</span><br><span class="line">return core_concat.apply( [], ret );</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// A global GUID counter for objects</span><br><span class="line">guid: 1,</span><br><span class="line"></span><br><span class="line">// Bind a function to a context, optionally partially applying any</span><br><span class="line">// arguments.</span><br><span class="line">proxy: function( fn, context ) {</span><br><span class="line">var tmp, args, proxy;</span><br><span class="line"></span><br><span class="line">if ( typeof context === "string" ) {</span><br><span class="line">tmp = fn[ context ];</span><br><span class="line">context = fn;</span><br><span class="line">fn = tmp;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// Quick check to determine if target is callable, in the spec</span><br><span class="line">// this throws a TypeError, but we will just return undefined.</span><br><span class="line">if ( !jQuery.isFunction( fn ) ) {</span><br><span class="line">return undefined;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// Simulated bind</span><br><span class="line">args = core_slice.call( arguments, 2 );</span><br><span class="line">proxy = function() {</span><br><span class="line">return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">// Set the guid of unique handler to the same of original handler, so it can be removed</span><br><span class="line">proxy.guid = fn.guid = fn.guid || jQuery.guid++;</span><br><span class="line"></span><br><span class="line">return proxy;</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">// Multifunctional method to get and set values of a collection</span><br><span class="line">// The value/s can optionally be executed if it's a function</span><br><span class="line">access: function( elems, fn, key, value, chainable, emptyGet, raw ) {</span><br><span class="line">var i = 0,</span><br><span class="line">length = elems.length,</span><br><span class="line">bulk = key == null;</span><br><span class="line"></span><br><span class="line">// Sets many values</span><br><span class="line">if ( jQuery.type( key ) === "object" ) {</span><br><span class="line">chainable = true;</span><br><span class="line">for ( i in key ) {</span><br><span class="line">jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// Sets one value</span><br><span class="line">} else if ( value !== undefined ) {</span><br><span class="line">chainable = true;</span><br><span class="line"></span><br><span class="line">if ( !jQuery.isFunction( value ) ) {</span><br><span class="line">raw = true;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">if ( bulk ) {</span><br><span class="line">// Bulk operations run against the entire set</span><br><span class="line">if ( raw ) {</span><br><span class="line">fn.call( elems, value );</span><br><span class="line">fn = null;</span><br><span class="line"></span><br><span class="line">// ...except when executing function values</span><br><span class="line">} else {</span><br><span class="line">bulk = fn;</span><br><span class="line">fn = function( elem, key, value ) {</span><br><span class="line">return bulk.call( jQuery( elem ), 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">if ( fn ) {</span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );</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">return chainable ?</span><br><span class="line">elems :</span><br><span class="line"></span><br><span class="line">// Gets</span><br><span class="line">bulk ?</span><br><span class="line">fn.call( elems ) :</span><br><span class="line">length ? fn( elems[0], key ) : emptyGet;</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">now: Date.now,</span><br><span class="line"></span><br><span class="line">// A method for quickly swapping in/out CSS properties to get correct calculations.</span><br><span class="line">// Note: this method belongs to the css module but it's needed here for the support module.</span><br><span class="line">// If support gets modularized, this method should be moved back to the css module.</span><br><span class="line">swap: function( elem, options, callback, args ) {</span><br><span class="line">var ret, name,</span><br><span class="line">old = {};</span><br><span class="line"></span><br><span class="line">// Remember the old values, and insert the new ones</span><br><span class="line">for ( name in options ) {</span><br><span class="line">old[ name ] = elem.style[ name ];</span><br><span class="line">elem.style[ name ] = options[ name ];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">ret = callback.apply( elem, args || [] );</span><br><span class="line"></span><br><span class="line">// Revert the old values</span><br><span class="line">for ( name in options ) {</span><br><span class="line">elem.style[ name ] = old[ name ];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">return ret;</span><br><span class="line">}</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<h2 id="jquery代码349-817行-扩展一些工具方法（静态方法和静态属性）"><a href="#jquery代码349-817行-扩展一些工具方法（静态方法和静态属性）" class="headerlink" title="jquery代码349-817行 扩展一
</summary>
<category term="jquery" scheme="http://danieldemi.com/categories/jquery/"/>
<category term="jquery" scheme="http://danieldemi.com/tags/jquery/"/>
</entry>
<entry>
<title>学习jquery源码-4 （jquery-2.0.3）（不兼容ie6,7,8）</title>
<link href="http://danieldemi.com/2018/05/27/learn-jquery-4/"/>
<id>http://danieldemi.com/2018/05/27/learn-jquery-4/</id>
<published>2018-05-27T07:29:14.000Z</published>
<updated>2018-06-10T03:53:23.931Z</updated>
<content type="html"><![CDATA[<h2 id="jquery代码285-347行-extend-jQuery的继承方法（可用于插件和方法的扩展）"><a href="#jquery代码285-347行-extend-jQuery的继承方法（可用于插件和方法的扩展）" class="headerlink" title="jquery代码285-347行 extend: jQuery的继承方法（可用于插件和方法的扩展）"></a>jquery代码285-347行 extend: jQuery的继承方法（可用于插件和方法的扩展）</h2><p>首先我们来看一下如何使用extend的<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">$.extend()</span><br><span class="line">$.fn.extend()</span><br><span class="line"></span><br><span class="line">1. 扩展工具方法</span><br><span class="line">$.extend({</span><br><span class="line"> aaa: function() {</span><br><span class="line"> console.log(111)</span><br><span class="line"> },</span><br><span class="line"> bbb: function() {</span><br><span class="line"> console.log(222)</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">调用：</span><br><span class="line">$.aaa()</span><br><span class="line">$.bbb()</span><br><span class="line">2.扩展jq实例方法</span><br><span class="line">$.fn.extend({</span><br><span class="line"> aaa: function() {</span><br><span class="line"> console.log(111)</span><br><span class="line"> },</span><br><span class="line"> bbb: function() {</span><br><span class="line"> console.log(222)</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">调用：</span><br><span class="line">$().aaa()</span><br><span class="line">$().bbb()</span><br><span class="line">3.扩展属性</span><br><span class="line">var a = {}</span><br><span class="line">$.extend('a', {name: 'xxx'})</span><br><span class="line"></span><br><span class="line">4.深拷贝和浅拷贝</span><br><span class="line">var a = {}</span><br><span class="line">var b = {name: 'hello', age: {t: 10}}</span><br><span class="line"></span><br><span class="line">$.extend(a, b)</span><br><span class="line"></span><br><span class="line">a.name = 'hi'</span><br><span class="line">console.log(b.name) // hello 不受影响</span><br><span class="line">a.age.t = 20;</span><br><span class="line">console.log(b.age.t) // 20 受影响</span><br><span class="line">这主要是由于$.extend默认是浅拷贝</span><br><span class="line"></span><br><span class="line">如果需要深拷贝那么需要这么使用</span><br><span class="line">$.extend(true, a, b)</span><br><span class="line">a.age.t = 20;</span><br><span class="line">console.log(b.age.t) // 10 不受影响</span><br></pre></td></tr></table></figure></p><p>接下来开始看源码：先简单看下架构<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">jQuery.extend=jQuery.fn.extend = function() {</span><br><span class="line"> // 定义一些变量</span><br><span class="line"> if() {} // 看是不是深拷贝情况</span><br><span class="line"></span><br><span class="line"> if() {} // 看参数正确不</span><br><span class="line"></span><br><span class="line"> if() {} // 看是不是插件情况</span><br><span class="line"></span><br><span class="line"> for() { // 可能多个对象</span><br><span class="line"> if() {} // 防止循环引用</span><br><span class="line"> if() {} // 深拷贝</span><br><span class="line"> else if () {} // 浅拷贝</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>接下来是源码及解释<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">jQuery.extend = jQuery.fn.extend = function() {</span><br><span class="line">var options, name, src, copy, copyIsArray, clone,</span><br><span class="line">target = arguments[0] || {},</span><br><span class="line">i = 1,</span><br><span class="line">length = arguments.length,</span><br><span class="line">deep = false;</span><br><span class="line"></span><br><span class="line">// 判断第一个参数是否为boolean，用于检测是否为深拷贝</span><br><span class="line">if ( typeof target === "boolean" ) {</span><br><span class="line">deep = target; // 是否深拷贝</span><br><span class="line">target = arguments[1] || {}; // 目标对象</span><br><span class="line">i = 2;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 目标元素不是对象或不是函数时，默认变为空的json</span><br><span class="line">if ( typeof target !== "object" && !jQuery.isFunction(target) ) {</span><br><span class="line">target = {};</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 这边判断是不是插件</span><br><span class="line">if ( length === i ) {</span><br><span class="line"> // $.extend和$.fn.extend的this是不同的，因此扩展使用方式也就不同了</span><br><span class="line">target = this;</span><br><span class="line">--i;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">for ( ; i < length; i++ ) {</span><br><span class="line">// 判断后面参数是否有值</span><br><span class="line">if ( (options = arguments[ i ]) != null ) {</span><br><span class="line">// 遍历对象属性</span><br><span class="line">for ( name in options ) {</span><br><span class="line">src = target[ name ];</span><br><span class="line">copy = options[ name ];</span><br><span class="line"></span><br><span class="line">// 碰到循环引用时跳出；如a = {} b = {x: a} $.entend(a,b)</span><br><span class="line">if ( target === copy ) {</span><br><span class="line">continue;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 深拷贝，拷贝的值是数组或对象</span><br><span class="line">if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {</span><br><span class="line">if ( copyIsArray ) {</span><br><span class="line">copyIsArray = false;</span><br><span class="line">clone = src && jQuery.isArray(src) ? src : []; // 这边判断下原对象是否包含该属性，如果有则在原属性上进行扩展</span><br><span class="line"> } else {</span><br><span class="line">clone = src && jQuery.isPlainObject(src) ? src : {};</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 在进行一次拷贝</span><br><span class="line">target[ name ] = jQuery.extend( deep, clone, copy );</span><br><span class="line"></span><br><span class="line">// 浅拷贝，直接赋值</span><br><span class="line">} else if ( copy !== undefined ) {</span><br><span class="line">target[ name ] = copy;</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">return target;</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<h2 id="jquery代码285-347行-extend-jQuery的继承方法（可用于插件和方法的扩展）"><a href="#jquery代码285-347行-extend-jQuery的继承方法（可用于插件和方法的扩展）" class="headerlink" tit
</summary>
<category term="jquery" scheme="http://danieldemi.com/categories/jquery/"/>
<category term="jquery" scheme="http://danieldemi.com/tags/jquery/"/>
</entry>
<entry>
<title>学习jquery源码-3 （jquery-2.0.3）（不兼容ie6,7,8）</title>
<link href="http://danieldemi.com/2018/05/27/learn-jquery-3/"/>
<id>http://danieldemi.com/2018/05/27/learn-jquery-3/</id>
<published>2018-05-27T07:29:14.000Z</published>
<updated>2018-06-10T02:48:33.821Z</updated>
<content type="html"><![CDATA[<h2 id="jquery代码96-283行-目录罗列，主要是添加了其属性和方法"><a href="#jquery代码96-283行-目录罗列，主要是添加了其属性和方法" class="headerlink" title="jquery代码96-283行 目录罗列，主要是添加了其属性和方法"></a>jquery代码96-283行 目录罗列，主要是添加了其属性和方法</h2><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">jQuery.fn = jQuery.prototype = {</span><br><span class="line"> jquery: 版本号</span><br><span class="line"> constructor: 修正指向问题</span><br><span class="line"> init(): 初始化和参数管理</span><br><span class="line"> selector: 存储选择字符串</span><br><span class="line"> length: this对象的长度</span><br><span class="line"> toArray(): 转数组</span><br><span class="line"> get(): 转原生集合</span><br><span class="line"> pushStack(): JQ对象的入栈</span><br><span class="line"> each(): 遍历集合</span><br><span class="line"> ready(): DOM加载的接口</span><br><span class="line"> slice(): 集合的截取</span><br><span class="line"> first(): 集合的第一项</span><br><span class="line"> last(): 集合的最后一项</span><br><span class="line"> eq(): 集合的指定项</span><br><span class="line"> map(): 返回新集合</span><br><span class="line"> end(): 返回集合前一个状态</span><br><span class="line"> // 内部方法</span><br><span class="line"> push(): </span><br><span class="line"> sort():</span><br><span class="line"> splice():</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="jquery-版本号"><a href="#jquery-版本号" class="headerlink" title="jquery: 版本号"></a>jquery: 版本号</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 源码：</span><br><span class="line">// 这边就是表明了jquery的版本号</span><br><span class="line">jquery: core_version,</span><br></pre></td></tr></table></figure><h2 id="constructor-修正指向问题"><a href="#constructor-修正指向问题" class="headerlink" title="constructor: 修正指向问题"></a>constructor: 修正指向问题</h2><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// 源码：</span><br><span class="line">constructor: jQuery</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">A() {}</span><br><span class="line">(1)A.prototype.aa = 's';</span><br><span class="line">alert(A.constructor) // A()</span><br><span class="line">(2)A.prototype = {</span><br><span class="line"> aa: 's'</span><br><span class="line">}</span><br><span class="line">alert(A.constructor) // Object() </span><br><span class="line">这边（1）（2）2种方法都是实现了增加属性aa,效果是一样的，但是第二种</span><br><span class="line">方法会覆盖原有的方法，既构造函数，因此指向是会被修改的。</span><br><span class="line">因此jquery需要把指向就行修正</span><br></pre></td></tr></table></figure><h2 id="init-初始化和参数管理"><a href="#init-初始化和参数管理" class="headerlink" title="init(): 初始化和参数管理"></a>init(): 初始化和参数管理</h2><figure class="highlight plain"><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><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br></pre></td><td class="code"><pre><span class="line">// 源码：</span><br><span class="line">// 选择器selector 限制条件context 内部参数不对外暴露rootjQuery：$(document)</span><br><span class="line">// 通常我们选择元素是这样的$('#div') $('.box') $('div') $('#div div.box') 这种事各类选择权选择元素</span><br><span class="line">// 另外一种是创建标签 $('<li>') $('<li>1</li>') 这种都是创建标签</span><br><span class="line">init: function( selector, context, rootjQuery ) {</span><br><span class="line"> var match, elem;</span><br><span class="line"></span><br><span class="line"> // 对不正确的选择器进行处理: $(""), $(null), $(undefined), $(false)</span><br><span class="line"> if ( !selector ) {</span><br><span class="line"> return this;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> // 处理字符串 如 $('#div') $('.box') $('div') $('#div div.box')或 $('<li>') $('<li>1</li>')</span><br><span class="line"> if ( typeof selector === "string" ) {</span><br><span class="line"> // 处理$('<li>')</span><br><span class="line"> if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {</span><br><span class="line"> // </span><br><span class="line"> match = [ null, selector, null ];</span><br><span class="line"></span><br><span class="line"> } else {</span><br><span class="line"> // 处理选择器 $('#div') $('.box') $('div') $('#div div.box');此外还有不规则的标签如$('<li>hello')</span><br><span class="line"> // rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ </span><br><span class="line"> // 用于匹配 $('#id') 和 $('<li>hello') 会有结果 match = []</span><br><span class="line"> // $('#id') match = ['#id', null, 'id']</span><br><span class="line"> // $('<li>hello') match = ['<li>hello', '<li>', nill]</span><br><span class="line"> // 而$('.box') $('div') $('#div div.box')则会是match = null</span><br><span class="line"> match = rquickExpr.exec( selector );</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> // 根据上面的处理match有3种情况</span><br><span class="line"> // 1.null</span><br><span class="line"> // 2.['#id', null, 'id']</span><br><span class="line"> // 3.['<li>hello', <li>, null]</span><br><span class="line"> // 4.[null, <li>, null]</span><br><span class="line"></span><br><span class="line"> // 2,4可以进入 ,为什么2可以进入，2的match[1]为null，因为id选择器不需要上下文限制，因此!context为真</span><br><span class="line"> if ( match && (match[1] || !context) ) {</span><br><span class="line"></span><br><span class="line"> // 4进入这里，就是标签 context只能是document，但是可以指定不同的document，如iframe下的</span><br><span class="line"> if ( match[1] ) {</span><br><span class="line"> // 可能填写 document 或 $(document) 最终得到都是原生document</span><br><span class="line"> context = context instanceof jQuery ? context[0] : context;</span><br><span class="line"></span><br><span class="line"> // scripts is true for back-compat</span><br><span class="line"> // jQuery.parseHTML 把字符串转换成节点数组;见代码库init-1</span><br><span class="line"> // jQuery.merge 合并数组,类数组</span><br><span class="line"> // 这边返回this对象即为类数组</span><br><span class="line"> // {</span><br><span class="line"> // 0：xxx</span><br><span class="line"> // 1: xxx</span><br><span class="line"> // ...</span><br><span class="line"> // length: n</span><br><span class="line"> // }</span><br><span class="line"> jQuery.merge( this, jQuery.parseHTML(</span><br><span class="line"> match[1],</span><br><span class="line"> context && context.nodeType ? context.ownerDocument || context : document,</span><br><span class="line"> true</span><br><span class="line"> ) );</span><br><span class="line"></span><br><span class="line"> // 针对标签带属性的处理，如 $('<li>', {title: 'tese', html:'abcd'})</span><br><span class="line"> // rsingleTag匹配单标签 jQuery.isPlainObject判断是否为对象</span><br><span class="line"> if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {</span><br><span class="line"> for ( match in context ) {</span><br><span class="line"> // jquery是否有对应的方法， 如html。直接函数调用</span><br><span class="line"> if ( jQuery.isFunction( this[ match ] ) ) {</span><br><span class="line"> this[ match ]( context[ match ] );</span><br><span class="line"></span><br><span class="line"> // 其他都作为属性</span><br><span class="line"> } else {</span><br><span class="line"> this.attr( match, context[ match ] );</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"> return this;</span><br><span class="line"></span><br><span class="line"> // id选择器进入这里</span><br><span class="line"> } else {</span><br><span class="line"> elem = document.getElementById( match[2] );</span><br><span class="line"> // 确保节点存在， </span><br><span class="line"> // 在clone时,某种情况下即使删除了节点也会存在</span><br><span class="line"> // 因此必须在判断下是否有父节点</span><br><span class="line"> if ( elem && elem.parentNode ) {</span><br><span class="line"> this.length = 1;</span><br><span class="line"> this[0] = elem;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> this.context = document;</span><br><span class="line"> this.selector = selector;</span><br><span class="line"> return this;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> // 处理: $(expr, $(...))</span><br><span class="line"> } else if ( !context || context.jquery ) {</span><br><span class="line"> return ( context || rootjQuery ).find( selector );</span><br><span class="line"> // 处理: $(expr, context)</span><br><span class="line"> } else {</span><br><span class="line"> return this.constructor( context ).find( selector );</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> // 处理节点 如$(this) $(document)</span><br><span class="line"> } else if ( selector.nodeType ) {</span><br><span class="line"> this.context = this[0] = selector;</span><br><span class="line"> this.length = 1;</span><br><span class="line"> return this;</span><br><span class="line"></span><br><span class="line"> // 处理函数形式如 $(function() {})</span><br><span class="line"> // Shortcut for document ready</span><br><span class="line"> } else if ( jQuery.isFunction( selector ) ) {</span><br><span class="line"> return rootjQuery.ready( selector );</span><br><span class="line"> }</span><br><span class="line"> // 处理数组和对象 $([]) $({})</span><br><span class="line"> if ( selector.selector !== undefined ) {</span><br><span class="line"> this.selector = selector.selector;</span><br><span class="line"> this.context = selector.context;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> return jQuery.makeArray( selector, this );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>代码库init-1<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">jQuery.parseHTML：</span><br><span class="line">var str = '<li>1</li><li>2</li><li>3</li>'</span><br><span class="line">var arr = jQuery.parseHTML(str, document, true); // ['li', 'li', 'li']</span><br><span class="line">// flag 表示script标签是否可以填进来</span><br><span class="line">parseHTML(str, document, flag)</span><br><span class="line">var src = '<script>alert(1)<\/script>'</span><br><span class="line">jQuery.parseHTML(str, document, false) // 添加失败</span><br><span class="line">jQuery.parseHTML(str, document, true) // 添加成功</span><br><span class="line"></span><br><span class="line">jQuery.merge：</span><br><span class="line">var arr = ['a', 'b']</span><br><span class="line">var arr2 = ['c', 'd']</span><br><span class="line"></span><br><span class="line">console.log($.merge(arr, arr2)) // ['a','b','c','d']</span><br><span class="line">对我们对外就是这么使用的合并数组</span><br><span class="line"></span><br><span class="line">在内部可以合并特殊的json形式，即类数组</span><br><span class="line">var arr3 = {</span><br><span class="line"> 0: '1',</span><br><span class="line"> 1: 'v',</span><br><span class="line"> length: 2</span><br><span class="line">}</span><br><span class="line">$.merge(arr3, arr2) </span><br><span class="line">// {</span><br><span class="line"> 0: '1',</span><br><span class="line"> 1: 'v',</span><br><span class="line"> 2：'c',</span><br><span class="line"> 3: 'd',</span><br><span class="line"> length: 4</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h2 id="selector和length"><a href="#selector和length" class="headerlink" title="selector和length"></a>selector和length</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">selector: "", // 用于保存选择器</span><br><span class="line">length: 0, // 记录节点长度</span><br></pre></td></tr></table></figure><h2 id="一些方法"><a href="#一些方法" class="headerlink" title="一些方法"></a>一些方法</h2><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// 转数组（将节点类数组对象转换为数组）</span><br><span class="line">toArray: function() {</span><br><span class="line"> return core_slice.call( this );</span><br><span class="line">},</span><br><span class="line">// 转原生集合（）</span><br><span class="line">get: function( num ) {</span><br><span class="line"> return num == null ?</span><br><span class="line"> // 不传参，则返回整个数组</span><br><span class="line"> this.toArray() :</span><br><span class="line"> // 如果参数大于0，则从前往后数，参数小于0则从后往前数，返回指定的元素</span><br><span class="line"> ( num < 0 ? this[ this.length + num ] : this[ num ] );</span><br><span class="line">},</span><br><span class="line">//JQ对象的入栈（ 源码内部使用比较多）先进后出</span><br><span class="line">pushStack: function( elems ) {</span><br><span class="line"></span><br><span class="line"> var ret = jQuery.merge( this.constructor(), elems );</span><br><span class="line"> // 和end方法公用，回溯上一层，链式调用</span><br><span class="line"> ret.prevObject = this;</span><br><span class="line"> ret.context = this.context;</span><br><span class="line"></span><br><span class="line"> return ret;</span><br><span class="line">},</span><br><span class="line">// 例如demo: $(div).pushStack($(span)).css().end().css();</span><br><span class="line">end: function() {</span><br><span class="line"> return this.prevObject || this.constructor(null);</span><br><span class="line">},</span><br><span class="line">// 切割字符串 也使用入栈方法，这样就也可以配合end链式调用；</span><br><span class="line">// 之后用到pushStack都是同理</span><br><span class="line">slice: function() {</span><br><span class="line"> return this.pushStack( core_slice.apply( this, arguments ) );</span><br><span class="line">},</span><br><span class="line">// 遍历 调用jQuery下的工具方法each实现</span><br><span class="line">each: function( callback, args ) {</span><br><span class="line"> return jQuery.each( this, callback, args );</span><br><span class="line">},</span><br><span class="line">// dom加载回调函数</span><br><span class="line">ready: function( fn ) {</span><br><span class="line"> jQuery.ready.promise().done( fn );</span><br><span class="line"></span><br><span class="line"> return this;</span><br><span class="line">},</span><br><span class="line">// 找集合中的第一项</span><br><span class="line">first: function() {</span><br><span class="line"> return this.eq( 0 );</span><br><span class="line">},</span><br><span class="line">// 找集合中的最后一项</span><br><span class="line">last: function() {</span><br><span class="line"> return this.eq( -1 );</span><br><span class="line">},</span><br><span class="line">// 找集合中的指定项</span><br><span class="line">eq: function( i ) {</span><br><span class="line"> var len = this.length,</span><br><span class="line"> j = +i + ( i < 0 ? len : 0 );</span><br><span class="line"> return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );</span><br><span class="line">},</span><br><span class="line">// 遍历</span><br><span class="line">map: function( callback ) {</span><br><span class="line"> return this.pushStack( jQuery.map(this, function( elem, i ) {</span><br><span class="line"> return callback.call( elem, i, elem );</span><br><span class="line"> }));</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line">push: core_push,</span><br><span class="line">sort: [].sort,</span><br><span class="line">splice: [].splice</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="jquery代码96-283行-目录罗列，主要是添加了其属性和方法"><a href="#jquery代码96-283行-目录罗列，主要是添加了其属性和方法" class="headerlink" title="jquery代码96-283行 目录罗列，主要是添加
</summary>
<category term="jquery" scheme="http://danieldemi.com/categories/jquery/"/>
<category term="jquery" scheme="http://danieldemi.com/tags/jquery/"/>
</entry>
<entry>
<title>js正则表达式</title>
<link href="http://danieldemi.com/2018/05/27/regex/"/>
<id>http://danieldemi.com/2018/05/27/regex/</id>
<published>2018-05-27T03:43:46.000Z</published>
<updated>2018-05-27T07:28:47.110Z</updated>
<content type="html"><![CDATA[<p>正则表达式需要记一下以下规则：<br>/** </p><ul><li>元字符</li><li>\t 水平制表符 tab</li><li>\v 垂直制表符</li><li>\n 换行符</li><li>\r 回车符</li><li>\O 空字符</li><li>\f 换页符</li><li>\cX 与X对应的控制符（Ctrl + X）<br>*/<br>/**</li><li>[] 代表一类 [abc]代表匹配abc中的任意一个</li><li>[^] 代表反向类 [^abc] 匹配除了abc之外的任意值</li><li>范围类</li><li>[a-z] 代表a-z的任意小写字母</li><li>[A-D] 代表a-z的任意大写字母</li><li>[a-zA-Z]</li><li>() 代表一组<br>*/<br>/**</li><li>预定义类</li><li>. 任意字符 [^\n\r]</li><li>\d 数字字符 (即[0-9])</li><li>\D 非数字字符 ([^0-9])</li><li>\s 空白符 </li><li>\S 非空白符</li><li>\w 单词字符 ([a-zA-Z0-9])</li><li>\W 非单子字符<br>*/<br>/**</li><li>边界字符</li><li>^ 以xxx开始</li><li>$ 以xxx结束</li><li>\b 单词边界</li><li>\B 非单词边界<br>*/<br>/**</li><li>量词</li><li>？ 出现0次或1次</li><li><ul><li>出现一次或多次</li></ul></li><li><ul><li>出现零次或多次</li></ul></li><li>{n} 出现n次</li><li>{n,m} 出现n到m次</li><li>{n,} 至少出现n次<br>*/<br>/**</li><li>分组 $0永远代表整个表达式</li><li>/(ab)(cd)(ef)/ 可使用捕获的$1 $2 $3来代表分组</li><li>?: 代表被忽略的分组</li><li>/(?:ab)(cd)(ef)/ 这时捕获的分组只有2组</li><li>在表达式内可使用\1 \n来表示匹配的分组</li><li>/(a)/1/ 代表/aa/<br>*/<br>// 在工作中用到的正则表达式（会不断增加）<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// 经度匹配 -180到180 小数点最多6位 (不包含180)</span><br><span class="line">longitudeRule = /^[+-]?((\d{1,2})|(1[0-7]\d))(\.\d{0,6})?$/,</span><br><span class="line">// 纬度匹配 -90到90 小数点最多6位 (不包含90)</span><br><span class="line">latitudeRule = /^[+-]?((\d{1})|([0-8]\d))(\.\d{0,6})?$/,</span><br><span class="line">// 中文匹配</span><br><span class="line">chineseCharacterRule = /^[\u4e00-\u9fa5]{0,}$/,</span><br><span class="line">// 邮件匹配</span><br><span class="line">emailRule = /^\w[\w\-_\.]{0,}@[\w\-_\.]{0,}\w$/,</span><br><span class="line">// IP地址匹配</span><br><span class="line">IPRule = /^(((\d{1,2})|([1-2][0-4]\d)|([1-2]5[0-5]))\.){3}((\d{1,2})|([1-2][0-4]\d)|([1-2]5[0-5]))$/</span><br><span class="line">// 密码强度匹配</span><br><span class="line">passwordRule = /^(.*\d)(.*[a-z])(.*[A-Z]).{8,10}$/</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<summary type="html">
<p>正则表达式需要记一下以下规则：<br>/** </p>
<ul>
<li>元字符</li>
<li>\t 水平制表符 tab</li>
<li>\v 垂直制表符</li>
<li>\n 换行符</li>
<li>\r 回车符</li>
<li>\O 空字符</li>
<li
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
<entry>
<title>学习jquery源码-2 （jquery-2.0.3）（不兼容ie6,7,8）</title>
<link href="http://danieldemi.com/2018/05/26/learn-jquery-2/"/>
<id>http://danieldemi.com/2018/05/26/learn-jquery-2/</id>
<published>2018-05-26T08:40:01.000Z</published>
<updated>2018-05-26T15:36:38.314Z</updated>
<content type="html"><![CDATA[<p>jquery 21至94行定义一些变了和函数<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">(function(window, undefined)) {</span><br><span class="line"> // 这边传入undefined是因为，该词不是保留字符，在有些浏览器中是可以修改其值的</span><br><span class="line"> var </span><br><span class="line"> rootjQuery,</span><br><span class="line"> readyList,</span><br><span class="line"> // 这边保存字符串的undefined,这是为了兼容ie6，7，8，9。见下面的代码库1</span><br><span class="line"> core_strundefined = typeof undefined, </span><br><span class="line"> // 变量存储</span><br><span class="line"> location = window.location,</span><br><span class="line"> document = window.document,</span><br><span class="line"> docElem = document.documentElement,</span><br><span class="line"> // 这边是为了防冲突，见代码库2</span><br><span class="line">_jQuery = window.jQuery,</span><br><span class="line">_$ = window.$,</span><br><span class="line"> // $.type()中所需变量</span><br><span class="line"> class2type = {},</span><br><span class="line"> // 老版本是缓存数据相关变量(2.0版本已经没有用处了)</span><br><span class="line"> core_deletedIds = [],</span><br><span class="line"></span><br><span class="line"> core_version = "2.0.3",</span><br><span class="line"></span><br><span class="line">// 方法存储</span><br><span class="line">core_concat = core_deletedIds.concat,</span><br><span class="line">core_push = core_deletedIds.push,</span><br><span class="line">core_slice = core_deletedIds.slice,</span><br><span class="line">core_indexOf = core_deletedIds.indexOf,</span><br><span class="line">core_toString = class2type.toString,</span><br><span class="line">core_hasOwn = class2type.hasOwnProperty,</span><br><span class="line">core_trim = core_version.trim, // 去除前后空格</span><br><span class="line"> // 这边jquery是返回一个对象，见代码库3</span><br><span class="line"> jQuery = function( selector, context ) {</span><br><span class="line">return new jQuery.fn.init( selector, context, rootjQuery );</span><br><span class="line">},</span><br><span class="line"> // 正则</span><br><span class="line"> // 匹配数字用的</span><br><span class="line"> core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,</span><br><span class="line"> // 匹配空格</span><br><span class="line"> core_rnotwhite = /\S+/g,</span><br><span class="line"> // 匹配标签<p>aaa 或 #div</span><br><span class="line"> rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,</span><br><span class="line"> // 独立的空标签<p></p></span><br><span class="line"> rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,</span><br><span class="line"> // css兼容</span><br><span class="line"> // ie前缀</span><br><span class="line"> rmsPrefix = /^-ms-/,</span><br><span class="line"> // 大小写</span><br><span class="line">rdashAlpha = /-([\da-z])/gi,</span><br><span class="line"> // dom驼峰处理</span><br><span class="line"> fcamelCase = function( all, letter ) {</span><br><span class="line">return letter.toUpperCase();</span><br><span class="line">},</span><br><span class="line">completed = function() {</span><br><span class="line">document.removeEventListener( "DOMContentLoaded", completed, false );</span><br><span class="line">window.removeEventListener( "load", completed, false );</span><br><span class="line">jQuery.ready();</span><br><span class="line">};</span><br><span class="line">}(window)</span><br></pre></td></tr></table></figure></p><p>代码库1<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var a;</span><br><span class="line">一般情况下有2种判断a为underfined</span><br><span class="line">1. a == undefined</span><br><span class="line">2. typeof a == 'undefined'</span><br><span class="line">注：但是在ie6789下，xmlNode.method使用第一种方式是无法判断出来的</span><br></pre></td></tr></table></figure></p><p>代码库2<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">一般情况下，可能已经使用了$或jquery</span><br><span class="line"> var $ = 10;</span><br><span class="line"> var jquery = 'test';</span><br><span class="line">在这种情况下，我们在引入jquery.js就可以把这些变量先存储起来</span><br><span class="line"> <script src="jquery-2.0.3.js"></script></span><br></pre></td></tr></table></figure></p><p>代码库3<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">在jquery中我们都是这么使用的</span><br><span class="line"> jQuery().css()</span><br><span class="line"> $().css()</span><br><span class="line">我们想要这么使用，这说明jquery()就是一个对象</span><br><span class="line">我们平常创建一个对象都是这样的A</span><br><span class="line">A() {</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line">A.prototype.init = {}</span><br><span class="line">A.prototype.css = {}</span><br><span class="line">var x =new A()</span><br><span class="line">x.init();</span><br><span class="line">x.css();</span><br><span class="line"></span><br><span class="line">那么在jQuery中他不像前面的，是直接调用方法</span><br><span class="line">$().css()</span><br><span class="line">他没有经过new，和init初始化，这说明在内部已经创建了对象，并且初始化了</span><br><span class="line">因此它返回的 new jQuery.fn.init( selector, context, rootjQuery )</span><br><span class="line">但是new 的是init相当于初始化了，但是对象是init的，它是如何使用jQuery下prototype属性方法呢</span><br><span class="line">就是通过以下一段代码实现的</span><br><span class="line">jQuery.prototype.init.prototype = jQuery.prototype</span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<p>jquery 21至94行定义一些变了和函数<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="
</summary>
<category term="jquery" scheme="http://danieldemi.com/categories/jquery/"/>
<category term="jquery" scheme="http://danieldemi.com/tags/jquery/"/>
</entry>
<entry>
<title>学习jquery源码-1 （jquery-2.0.3）（不兼容ie6,7,8）</title>
<link href="http://danieldemi.com/2018/05/22/learn-jquery-1/"/>
<id>http://danieldemi.com/2018/05/22/learn-jquery-1/</id>
<published>2018-05-22T12:13:29.000Z</published>
<updated>2018-05-22T14:07:08.287Z</updated>
<content type="html"><![CDATA[<h2 id="1-jquery-最外面有立即执行函数-防止污染，防止代码冲突"><a href="#1-jquery-最外面有立即执行函数-防止污染，防止代码冲突" class="headerlink" title="1. jquery 最外面有立即执行函数(防止污染，防止代码冲突)"></a>1. jquery 最外面有立即执行函数(防止污染，防止代码冲突)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(function( window, undefined ) {</span><br><span class="line"> // 内容</span><br><span class="line">})( window );</span><br></pre></td></tr></table></figure><h2 id="2-如何对外暴露jquery呢？"><a href="#2-如何对外暴露jquery呢？" class="headerlink" title="2. 如何对外暴露jquery呢？"></a>2. 如何对外暴露jquery呢？</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">if ( typeof window === "object" && typeof window.document === "object" ) {</span><br><span class="line"> window.jQuery = window.$ = jQuery;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>jquery通过把jQuery和$挂在到window上，那么就可以使用了。</p><h2 id="3-如何避免冲突呢"><a href="#3-如何避免冲突呢" class="headerlink" title="3.如何避免冲突呢"></a>3.如何避免冲突呢</h2><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">_jQuery = window.jQuery,</span><br><span class="line"></span><br><span class="line">// Map over the $ in case of overwrite</span><br><span class="line">_$ = window.$,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">noConflict: function( deep ) {</span><br><span class="line"> if ( window.$ === jQuery ) {</span><br><span class="line"> window.$ = _$;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> if ( deep && window.jQuery === jQuery ) {</span><br><span class="line"> window.jQuery = _jQuery;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> return jQuery;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>通过一开始保留全局变量，最后在通过noConflict来改变jquery命名</p><h2 id="整理架构划分：-（jquery是面向对象的）"><a href="#整理架构划分：-（jquery是面向对象的）" class="headerlink" title="整理架构划分： （jquery是面向对象的）"></a>整理架构划分： （jquery是面向对象的）</h2><ol><li>(21-94)行：定义了一些变量和函数 jQuery = function() {}</li><li>(96-283)行: 定义了jquery的原型jQuery.fn = jQuery.prototype（fn即代表原型） 即给jQuery添加一些方法和属性</li><li>(285-347)行: extend: jQuery的继承方法（可用于插件和方法的扩展）</li><li>(349-817)行：jQuery.extend(): 扩展一些工具方法（静态方法和静态属性）</li><li>(877, 2856)行：sizzlejs选择器的实现（如$(‘ul li .div>sd’)）,jQuery的核心，可单独使用（在官网直接下载sizzlejs）</li><li>(2880, 3042)行: Callbacks: 回调对象：对函数的统一管理</li><li>(3043, 3183)行：Deferred: 延迟对象，对异步的统一管理（定时器，dom加载结束，ajax等异步）</li><li>(3184, 3295)行：support: 功能检测</li><li>(3308, 3652)行：data(): 数据缓存 </li><li>(3653, 3797)行：queue(): 队列管理 (animate就使用了queue)</li><li>(3803, 4299)行：attr(), prop(), val(), addClass()等，对元素属性的操作</li><li>(4300, 5128)行：on(), trigger()： 事件操作相关方法 </li><li>(5140, 6057)行：dom操作： 添加 删除 获取 包装 等</li><li>(6058, 6620)行：css(): 样式操作 </li><li>(6621, 7854)行：提交数据和ajax()： ajax(), load(), getJson()等</li><li>(7855, 8584)行: animate(): 运动方法</li><li>(8585, 8792)行：offset(): 位置和尺寸的方法</li><li>(8804, 8821)行：jQ支持模块化的模式</li><li>(8826) window.jQuery = window.$ = jQuery</li></ol>]]></content>
<summary type="html">
<h2 id="1-jquery-最外面有立即执行函数-防止污染，防止代码冲突"><a href="#1-jquery-最外面有立即执行函数-防止污染，防止代码冲突" class="headerlink" title="1. jquery 最外面有立即执行函数(防止污染，防止代码
</summary>
<category term="jquery" scheme="http://danieldemi.com/categories/jquery/"/>
<category term="jquery" scheme="http://danieldemi.com/tags/jquery/"/>
</entry>
<entry>
<title>canvas注意事项</title>
<link href="http://danieldemi.com/2018/05/21/canvas-1/"/>
<id>http://danieldemi.com/2018/05/21/canvas-1/</id>
<published>2018-05-21T15:00:17.000Z</published>
<updated>2018-05-22T14:07:11.193Z</updated>
<content type="html"><![CDATA[<ol><li>canvas设置宽度使用width和height，不要使用style属性</li><li><p>API介绍<br>ctx.beginPath() ; 开始一个画布；通过该方法来画不同的内容<br>ctx.closePath() 表示是否绘成一个闭环区域<br>stroke() 连线绘制<br>fill() 填充绘制<br>这2个绘制都会检测是否有beginPath来确定绘制的内容（代码）<br>如果同时使用fill和stroke的时候需要注意一下，先fill在stroke。这样描边的宽度不会被填充覆盖</p><p>lineCap 设置线条开始和结束的样式 ,可设置超出后圆角或方形展示<br>lineJoin 线与线相交时的样式<br>save()和restore() 绘制前保存之前的绘图状态，之后再还原<br>（用于对canvas容器进行整体图形变换操作 translate,scale,rotate,transform, setTransform）<br>[setTransform忽略会忽略之前的操作，其余几个都会叠加之前的操作(在一对svae和restore之间)]</p><p>createPattern( 可重复画img,canvas，video)</p></li></ol>]]></content>
<summary type="html">
<ol>
<li>canvas设置宽度使用width和height，不要使用style属性</li>
<li><p>API介绍<br>ctx.beginPath() ; 开始一个画布；通过该方法来画不同的内容<br>ctx.closePath() 表示是否绘成一个闭环区域<br>
</summary>
<category term="canvas" scheme="http://danieldemi.com/categories/canvas/"/>
<category term="canvas" scheme="http://danieldemi.com/tags/canvas/"/>
</entry>
<entry>
<title>你不知道的JS系列（五）</title>
<link href="http://danieldemi.com/2018/05/21/YD-JS-5/"/>
<id>http://danieldemi.com/2018/05/21/YD-JS-5/</id>
<published>2018-05-21T14:58:34.000Z</published>
<updated>2018-05-22T14:07:00.595Z</updated>
<content type="html"><![CDATA[<p>1.js本身是不支持异步的机制的，只是浏览器解析制作的<br>2.异步最常见的就是回调函数，这边就需要理解一下事件轮询和队列；<br>所谓的事件轮询就是把到该运行该语句的时候，把该语句push到事件轮询机制里，<br>事件轮询按照先后顺序就行运行,所以使用settimeout()并不能十分精确地计时，<br>因为如果时间到了，事件轮询队列里还有其他待运行的，那么运行时间就会出现偏差。<br>3.generator(迭代器) 一个可以按照想要的顺序进行执行语句<br>迭代器写法：function <em>name() {}<br>通过在迭代器内部写yield来做语句运行的截止点<br>通过next来启用程序<br>以下为demo: </em>foo迭代器，it1和it2是迭代器实例（一开始是不会运行的，只有当next才会运行）,<br>yield可以喝语句进行互动，yeild后面的字段会被next()运行停止后解析;(形成互动)<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">function *foo() {</span><br><span class="line">var x = yield 2;</span><br><span class="line">z++;</span><br><span class="line">var y = yield (x * z);</span><br><span class="line">console.log( x, y, z );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var z = 1;</span><br><span class="line"></span><br><span class="line">var it1 = foo();</span><br><span class="line">var it2 = foo();</span><br><span class="line"></span><br><span class="line">var val1 = it1.next().value;// 2 <-- 让出2</span><br><span class="line">var val2 = it2.next().value;// 2 <-- 让出2</span><br><span class="line"></span><br><span class="line">val1 = it1.next( val2 * 10 ).value;// 40 <-- x:20, z:2</span><br><span class="line">val2 = it2.next( val1 * 5 ).value;// 600 <-- x:200, z:3</span><br><span class="line"></span><br><span class="line">it1.next( val2 / 2 );// y:300</span><br><span class="line">// 20 300 3</span><br><span class="line">it2.next( val1 / 4 );// y:10</span><br><span class="line">// 200 10 3</span><br></pre></td></tr></table></figure></p><p>另外可通过[Symbol.iterator]制造迭代器<br>var a = [1,3,5,7,9];</p><p>var it = a<a href="">Symbol.iterator</a>;</p><p>it.next().value; // 1<br>it.next().value; // 3<br>it.next().value; // 5<br>..</p>]]></content>
<summary type="html">
<p>1.js本身是不支持异步的机制的，只是浏览器解析制作的<br>2.异步最常见的就是回调函数，这边就需要理解一下事件轮询和队列；<br>所谓的事件轮询就是把到该运行该语句的时候，把该语句push到事件轮询机制里，<br>事件轮询按照先后顺序就行运行,所以使用settimeou
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
<entry>
<title>你不知道的JS系列（四）</title>
<link href="http://danieldemi.com/2018/05/21/YD-JS-4/"/>
<id>http://danieldemi.com/2018/05/21/YD-JS-4/</id>
<published>2018-05-21T14:55:39.000Z</published>
<updated>2018-05-22T14:07:02.265Z</updated>
<content type="html"><![CDATA[<h1 id="一、this判定"><a href="#一、this判定" class="headerlink" title="一、this判定"></a>一、this判定</h1><p>现在，我们可以按照优先顺序来总结一下从函数调用的调用点来判定 this 的规则了。按照这个顺序来问问题，然后在第一个规则适用的地方停下。</p><p>1.函数是通过 new 被调用的吗（new 绑定）？如果是，this 就是新构建的对象。<br><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">var bar = new foo()</span><br></pre></td></tr></table></figure></p><p>2.函数是通过 call 或 apply 被调用（明确绑定），甚至是隐藏在 bind 硬绑定 之中吗？如果是，this 就是那个被明确指定的对象。<br><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">var bar = foo.call( obj2 )</span><br></pre></td></tr></table></figure></p><p>3.函数是通过环境对象（也称为拥有者或容器对象）被调用的吗（隐含绑定）？如果是，this 就是那个环境对象。<br><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">var bar = obj1.foo()</span><br></pre></td></tr></table></figure></p><p>4.否则，使用默认的 this（默认绑定）。如果在 strict mode 下，就是 undefined，否则是 global 对象。<br><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">var bar = foo()</span><br></pre></td></tr></table></figure></p><p>以上，就是理解对于普通的函数调用来说的 this 绑定规则 所需的全部。是的……几乎是全部。</p><p>ps:<br>如果你传递 null 或 undefined 作为 call、apply 或 bind 的 this 绑定参数，那么这些值会被忽略掉，取而代之的是 默认绑定 规则将适用于这个调用。</p><h1 id="二、闭包的定义"><a href="#二、闭包的定义" class="headerlink" title="二、闭包的定义"></a>二、闭包的定义</h1><p>闭包就是函数能够记住并访问它的词法作用域，即使当这个函数在它的词法作用域之外执行时。<br>通俗点：无论何时何地 只要你将函数作为头等的值看待并将它们传来传去的话，你就可能看到这些函数行使闭包。<br>计时器、事件处理器、Ajax请求、跨窗口消息、web worker、或者任何其他的异步（或同步！）任务，当你传入一个 回调函数，你就在它周围悬挂了一些闭包！<br>另外模块也是闭包的表现形式：ES6，AMD，CMD模式都一样。</p>]]></content>
<summary type="html">
<h1 id="一、this判定"><a href="#一、this判定" class="headerlink" title="一、this判定"></a>一、this判定</h1><p>现在，我们可以按照优先顺序来总结一下从函数调用的调用点来判定 this 的规则了。按照这个顺
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
<entry>
<title>canvas-时间</title>
<link href="http://danieldemi.com/2018/05/14/canvas-time/"/>
<id>http://danieldemi.com/2018/05/14/canvas-time/</id>
<published>2018-05-14T14:47:20.000Z</published>
<updated>2018-05-22T14:07:09.927Z</updated>
<content type="html"><![CDATA[<h1 id="这是一个canvas制作的数字时间表"><a href="#这是一个canvas制作的数字时间表" class="headerlink" title="这是一个canvas制作的数字时间表"></a>这是一个canvas制作的数字时间表</h1><p>比较简单只是用于练习canvas API<br>点这里看<a href="https://github.com/DanielDemi/base-demos" target="_blank" rel="noopener">源码</a></p><iframe src="http://danieldemi.com/base-demos/canvas/time" width="800" height="250" frameborder="0" scrolling="0"></iframe>]]></content>
<summary type="html">
<h1 id="这是一个canvas制作的数字时间表"><a href="#这是一个canvas制作的数字时间表" class="headerlink" title="这是一个canvas制作的数字时间表"></a>这是一个canvas制作的数字时间表</h1><p>比较简单只是
</summary>
<category term="canvas" scheme="http://danieldemi.com/categories/canvas/"/>
<category term="canvas" scheme="http://danieldemi.com/tags/canvas/"/>
</entry>
<entry>
<title>你不知道的JS系列（二）</title>
<link href="http://danieldemi.com/2018/05/12/YD-JS-2/"/>
<id>http://danieldemi.com/2018/05/12/YD-JS-2/</id>
<published>2018-05-12T05:37:39.000Z</published>
<updated>2018-05-22T14:07:05.162Z</updated>
<content type="html"><![CDATA[<h2 id="1-toSring-1-toFixed-3-等这些为什么执行会报错？"><a href="#1-toSring-1-toFixed-3-等这些为什么执行会报错？" class="headerlink" title="1.toSring()/1.toFixed(3)等这些为什么执行会报错？"></a>1.toSring()/1.toFixed(3)等这些为什么执行会报错？</h2><p>想要知道为什么，那么首先我们就必须清楚number这一类</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a = 4</span><br><span class="line">b = 4.0</span><br><span class="line">c = 4.</span><br></pre></td></tr></table></figure><p>这三个都可以表示为数字4<br>所以1.toString()的问题出在1.的解析上面;<br>再如下代码应该会清楚点了</p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">1.toSring() // 报错</span><br><span class="line">a = 1</span><br><span class="line">a.toString() // <span class="string">"1"</span></span><br><span class="line">1.1.toString() // <span class="string">"1.1"</span></span><br></pre></td></tr></table></figure><p>从上可以看出并不是数字就无法.toString的。仅仅是因为整数的原因。因为4.就可以代码4<br>所以在1.toString的时候首先会解析1.为1因此就少了操作符号.（其实就是js解析方式的问题）。因此就会报错<br>那么可以通过如下方式来解决这个问题</p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">1..toString() // <span class="string">"1"</span></span><br><span class="line">(1).toString() // <span class="string">"1"</span></span><br><span class="line">1 .tiString() // <span class="string">"1"</span></span><br><span class="line">等</span><br></pre></td></tr></table></figure><p>综上已解释了1.toString()为什么会报错的原因</p>]]></content>
<summary type="html">
<h2 id="1-toSring-1-toFixed-3-等这些为什么执行会报错？"><a href="#1-toSring-1-toFixed-3-等这些为什么执行会报错？" class="headerlink" title="1.toSring()/1.toFixed(3)
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
<entry>
<title>你不知道的JS系列（三）</title>
<link href="http://danieldemi.com/2018/05/12/YD-JS-3/"/>
<id>http://danieldemi.com/2018/05/12/YD-JS-3/</id>
<published>2018-05-12T05:37:39.000Z</published>
<updated>2018-05-12T07:14:32.972Z</updated>
<content type="html"><![CDATA[<h2 id="parseInt-1-0-19-答案是18；是不是很神奇？"><a href="#parseInt-1-0-19-答案是18；是不是很神奇？" class="headerlink" title="parseInt(1/0, 19) 答案是18；是不是很神奇？"></a>parseInt(1/0, 19) 答案是18；是不是很神奇？</h2><p>想要了解这个答案，那么就需要了解parseInt这个函数了。<br>parseInt如果传入的是非字符串，那么首先会解析为字符串。<br>1/0被解析为‘Infinity’.<br>那么parseInt(1/0, 19)就变成了parseInt(‘Infinity’, 19)。<br>那么答案就是18了，是不是很神奇</p>]]></content>
<summary type="html">
<h2 id="parseInt-1-0-19-答案是18；是不是很神奇？"><a href="#parseInt-1-0-19-答案是18；是不是很神奇？" class="headerlink" title="parseInt(1/0, 19) 答案是18；是不是很神奇？"><
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
<entry>
<title>你不知道的JS系列（一）</title>
<link href="http://danieldemi.com/2018/05/12/YD-JS-1/"/>
<id>http://danieldemi.com/2018/05/12/YD-JS-1/</id>
<published>2018-05-12T05:37:39.000Z</published>
<updated>2018-05-22T14:07:06.354Z</updated>
<content type="html"><![CDATA[<h2 id="在函数中为什么这样调用-slice-call-arguments"><a href="#在函数中为什么这样调用-slice-call-arguments" class="headerlink" title="在函数中为什么这样调用[].slice.call(arguments)?"></a>在函数中为什么这样调用[].slice.call(arguments)?</h2><p>先来看一段代码</p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="built_in">test</span>(params) {</span><br><span class="line"> console.log(arguments);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">test</span>(1) // 输出为[1]</span><br></pre></td></tr></table></figure><p>从这边看出arguments不就是一个数组吗？<br>那么我们来看一下下面代码，一般来如果参数不是arguments,<br>而是普通的数组的话，那么下面这段代码arguments参数上。</p><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">[].slice.call(arguments) === arguments.slice() ？ // <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>js中的arguments参数是一个类数组对象，它并不具有数组的方法，所以需要通过call来引用其方法。<br>至此问题已经解决了。</p><p>// ps 可以通过测试测试arguments的type是否为Array来验证下<br>另外补充一个小知识点arguments类数组对象里有个方法叫callee，该方法就是为该函数本身，可用于迭代循环调用</p>]]></content>
<summary type="html">
<h2 id="在函数中为什么这样调用-slice-call-arguments"><a href="#在函数中为什么这样调用-slice-call-arguments" class="headerlink" title="在函数中为什么这样调用[].slice.call(arg
</summary>
<category term="js" scheme="http://danieldemi.com/categories/js/"/>
<category term="js" scheme="http://danieldemi.com/tags/js/"/>
</entry>
</feed>