-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
387 lines (226 loc) · 274 KB
/
search.xml
File metadata and controls
387 lines (226 loc) · 274 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>微信小程序学习资源汇总</title>
<link href="/2018/03/24/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%B1%87%E6%80%BB/"/>
<url>/2018/03/24/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%B1%87%E6%80%BB/</url>
<content type="html"><![CDATA[<h1 id="微信小程序开发资源汇总"><a href="#微信小程序开发资源汇总" class="headerlink" title="微信小程序开发资源汇总"></a>微信小程序开发资源汇总</h1><blockquote><p>在github上看了<a href="https://github.com/justjavac/awesome-wechat-weapp" target="_blank" rel="noopener">justjavac</a>的一篇关于小程序资源的汇总，觉得挺不错的就并转发至</p><p><a href="http://zhaorubo.top">个人博客</a></p></blockquote><h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3" target="_blank" rel="noopener">官方文档</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E5%B7%A5%E5%85%B7" target="_blank" rel="noopener">工具</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E6%8F%92%E4%BB%B6" target="_blank" rel="noopener">插件</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E8%AE%A8%E8%AE%BA" target="_blank" rel="noopener">讨论</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E6%95%99%E7%A8%8B" target="_blank" rel="noopener">教程</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B" target="_blank" rel="noopener">视频教程</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E6%96%87%E7%AB%A0" target="_blank" rel="noopener">文章</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E4%BB%A3%E7%A0%81" target="_blank" rel="noopener">代码</a></li><li><a href="https://github.com/ZrbJava/awesome-wechat-weapp#%E8%BD%AE%E5%AD%90" target="_blank" rel="noopener">轮子</a></li></ul><h2 id="置顶"><a href="#置顶" class="headerlink" title="置顶"></a>置顶</h2><ul><li><a href="https://github.com/Tencent/wepy" target="_blank" rel="noopener">WePY：组件化的小程序开发框架</a> 💯</li><li><a href="https://github.com/aben1188/awesome-wepy" target="_blank" rel="noopener">WePY 开发资源汇总</a> 💯</li><li><a href="https://github.com/youzan/zanui-weapp" target="_blank" rel="noopener">ZanUI-WeApp: 高颜值、好用、易扩展的微信小程序 UI 库，Powered by 有赞</a> 💯</li></ul><h2 id="官方文档"><a href="#官方文档" class="headerlink" title="官方文档"></a>官方文档</h2><ul><li><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/index.html" target="_blank" rel="noopener">小程序开发文档</a></li><li><a href="https://mp.weixin.qq.com/debug/wxadoc/design/index.html" target="_blank" rel="noopener">小程序设计指南</a></li><li><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html" target="_blank" rel="noopener">小程序开发者工具</a></li></ul><h2 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h2><ul><li><a href="https://github.com/Tencent/wepy" target="_blank" rel="noopener">WePY 一个支持组件化的小程序开发框架</a></li><li><a href="https://weapptool.com/" target="_blank" rel="noopener">微信小程序配置及目录在线生成工具</a></li><li><a href="http://developer.egret.com/cn/github/egret-docs/Wing/update/update320/index.html" target="_blank" rel="noopener">Egret Wing 3.2.x 支持微信小程序实时预览的 IDE)</a></li><li><a href="https://github.com/maichong/labrador" target="_blank" rel="noopener">Labrador 支持 ES6/7 的微信小程序组件化开发框架</a></li><li><a href="https://github.com/chemzqm/wept" target="_blank" rel="noopener">WEPT 一个微信小程序实时运行环境</a></li><li><a href="https://github.com/seanlong/wxml-parser" target="_blank" rel="noopener">wxml-parser JavaScript WXML parser</a> 以及<a href="https://seanlong.github.io/wxapp-page-editor" target="_blank" rel="noopener">在线页面demo</a></li><li><a href="http://allanguys.github.io/px2rpx" target="_blank" rel="noopener">Px 转 Rpx 在线工具</a></li><li><a href="https://github.com/xpmjs/xpmjs" target="_blank" rel="noopener">微信小程序云端增强 SDK XpmJS</a></li><li><a href="https://github.com/chenzhuo1992/wech" target="_blank" rel="noopener">4kb 模块化开发工具 将模块化的属性和方法映射成小程序页面</a></li><li><a href="https://github.com/mdsb100/gulp-wxa-copy-npm" target="_blank" rel="noopener">gulp-wxa-copy-npm 插件 能够使用 ES6/7 和 NPM 库</a></li><li><a href="https://github.com/cytle/wechat_web_devtools" target="_blank" rel="noopener">wechat_web_devtools Linux 下微信开发者工具</a></li><li><a href="https://github.com/Jeff2Ma/WeApp-Workflow" target="_blank" rel="noopener">WeApp-Workflow 基于 Gulp 的微信小程序前端开发工作流</a></li><li><a href="https://openclub.alipay.com/read.php?tid=2888&fid=51" target="_blank" rel="noopener">小程序助手 轻松实现小程序互转</a></li><li><a href="https://github.com/haojy/weact" target="_blank" rel="noopener">weact 用 JSX 快速开发小程序</a></li><li><a href="https://github.com/tinajs/tina" target="_blank" rel="noopener">Tina.js - 一款轻巧的渐进式微信小程序框架</a></li><li><a href="https://github.com/Meituan-Dianping/mpvue" target="_blank" rel="noopener">Mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系</a></li></ul><h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><ul><li><a href="https://github.com/chemzqm/wxapp.vim" target="_blank" rel="noopener">vim 插件(chemzqm/wxapp.vim)</a></li><li><a href="https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3" target="_blank" rel="noopener">sublime text 2&3 snippet(Abbotton/weapp-snippet-for-sublime-text-2-3)</a></li><li><a href="https://github.com/lypeer/Matchmaker" target="_blank" rel="noopener">IntelliJ IDEA 插件，注入方法</a></li><li><a href="https://github.com/qbright/wechatCode-complete" target="_blank" rel="noopener">webstorm 插件（代码提示）</a></li><li><a href="https://github.com/FloydaGithub/wxapp" target="_blank" rel="noopener">sublime plugin - wxapp</a></li><li><a href="https://segmentfault.com/a/1190000007132719" target="_blank" rel="noopener">vscode 插件(代码提示)</a></li></ul><h2 id="文档"><a href="#文档" class="headerlink" title="文档"></a>文档</h2><ul><li><a href="https://www.qcloud.com/act/event/yingyonghao.html" target="_blank" rel="noopener">从搭建一个微信小程序开始(腾讯云)</a></li></ul><h2 id="讨论"><a href="#讨论" class="headerlink" title="讨论"></a>讨论</h2><ul><li><a href="https://www.zhihu.com/question/50874500" target="_blank" rel="noopener">如何评价 9 月 21 日开始内测的「微信小程序」？(知乎)</a></li><li><a href="https://www.zhihu.com/question/39374074" target="_blank" rel="noopener">如何看待微信将推应用号？(知乎)</a></li><li><a href="https://www.zhihu.com/question/50875544" target="_blank" rel="noopener">微信小程序（应用号）价值是什么？(知乎)</a></li><li><a href="https://www.zhihu.com/question/50878415" target="_blank" rel="noopener">微信应用号是否真能颠覆APP？(知乎)</a></li><li><a href="https://www.zhihu.com/question/50900987" target="_blank" rel="noopener">微信小程序的出现会给前端开发带来什么？(知乎)</a></li></ul><h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><ul><li>全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！<ul><li><a href="http://www.diycode.cc/topics/311" target="_blank" rel="noopener">第一弹</a></li><li><a href="http://www.diycode.cc/topics/312" target="_blank" rel="noopener">第二弹</a></li><li><a href="http://www.diycode.cc/topics/316" target="_blank" rel="noopener">第三弹</a></li><li><a href="http://www.diycode.cc/topics/325" target="_blank" rel="noopener">第四弹</a></li><li><a href="http://www.diycode.cc/topics/328" target="_blank" rel="noopener">第五弹</a></li></ul></li><li>微信小程序剖析(微信公众号)<ul><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974082&idx=1&sn=47c7f672caf629cd846e315b8df2b1c5&scene=21#wechat_redirect" target="_blank" rel="noopener">「官方示例代码」浅析</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974093&idx=1&sn=0570a243304ea8bb7d1b636624886fb1&scene=21#wechat_redirect" target="_blank" rel="noopener">（一）：运行机制</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974111&idx=1&sn=93a868cdb59b5dd77c65c7a5303e6e31#rd" target="_blank" rel="noopener">（二）：框架原理</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974133&idx=1&sn=3b67419e8ac0bb8262ca4c1e3cdabb35#rd" target="_blank" rel="noopener">（三）：让小程序运行在Chrome浏览器上</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974146&idx=1&sn=52041fdca4245e8f4b670ed20efa77de#rd" target="_blank" rel="noopener">（四）：原生的实时DOM转Virtual DOM</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974149&idx=1&sn=3efe5e6ee479ad6cbddc0a607cd40411#rd" target="_blank" rel="noopener">（五）：创建一个兼容「微信小程序」的Web框架</a></li></ul></li><li><a href="https://zhuanlan.zhihu.com/p/22754296" target="_blank" rel="noopener">微信小程序架构分析(上)</a></li><li><a href="https://zhuanlan.zhihu.com/p/22765476" target="_blank" rel="noopener">微信小程序架构分析(中)</a></li><li><a href="https://zhuanlan.zhihu.com/p/22932309" target="_blank" rel="noopener">微信小程序架构分析(下)</a></li><li><a href="http://gold.xitu.io/entry/57e34d6bd2030900691e9ad7" target="_blank" rel="noopener">首个微信小程序开发教程(掘金)</a></li><li><a href="http://xituqu.com/508.html" target="_blank" rel="noopener">微信小程序开发教程！(稀土区)</a></li><li><a href="https://github.com/dingyiming/weapp-example" target="_blank" rel="noopener">hello-weapp 微信小程序最简示例教程(dingyiming/weapp-example)</a></li><li><a href="https://github.com/champion32/WeAppIdeIssue" target="_blank" rel="noopener">微信小应用 IDE 的安装以及安装过程的常见问题(champion32/WeAppIdeIssue)</a></li><li><a href="https://cnodejs.org/topic/57ea257b3670ca3f44c5beb6" target="_blank" rel="noopener">分享我用 cnode 社区 api 做微信小应用的入门过程(CNode)</a></li><li><a href="http://www.jianshu.com/p/aaef5ceb3936" target="_blank" rel="noopener">微信小程序开发教程-从零开始(简书)</a></li><li><a href="https://seahub.github.io/2016/10/09/%E6%88%91%E6%89%80%E7%90%86%E8%A7%A3%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F/" target="_blank" rel="noopener">我所理解的小程序 - 小程序真机调试(seahub)</a></li><li><a href="https://www.v2ex.com/t/352472" target="_blank" rel="noopener">微信小程序集成 mobx</a></li><li><a href="https://segmentfault.com/a/1190000007107646" target="_blank" rel="noopener">微信小程序集成 Redux(Segmentfault)</a></li><li><a href="https://aotu.io/notes/2017/01/06/wxapp-img-loader/" target="_blank" rel="noopener">在微信小程序里实现图片预加载组件(凹凸实验室)</a></li></ul><h2 id="视频教程"><a href="#视频教程" class="headerlink" title="视频教程"></a>视频教程</h2><ul><li><a href="https://www.youtube.com/playlist?list=PLXbU-2B80FvA5bNILAS8-zY3_KkE-PVn0" target="_blank" rel="noopener">微信小程序开发视频教程</a> (youtube)</li></ul><h2 id="文章"><a href="#文章" class="headerlink" title="文章"></a>文章</h2><ul><li><a href="https://cnodejs.org/topic/57e330d07d8293463a01e7e0" target="_blank" rel="noopener">未来是 h5 的：写在微信应用号发布之际(CNode)</a></li><li><a href="http://www.jianshu.com/p/60c8fd8d6862" target="_blank" rel="noopener">微信“小程序”让我脑洞大开(简书)</a></li><li><a href="https://zhuanlan.zhihu.com/p/22565340" target="_blank" rel="noopener">关于微信小程序（应用号）的底层逻辑分析和拥抱建议(知乎专栏)</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652039482&idx=2&sn=778e1313ebbd832b590b81a8088b63db#rd" target="_blank" rel="noopener">微信小程序和谷歌 PWA 有什么关系？(微信公众号)</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MzI0ODU0MDg0Mw==&mid=2247483754&idx=1&sn=9578311da11d1fd3889e0829505c3993&scene=2&srcid=0924io6H1CmEPGYJxmEQVtlA" target="_blank" rel="noopener">在微信小程序里，我们要怎样做数据分析（上）(微信公众号)</a></li><li><a href="http://zhenhua-lee.github.io/manmage/wx.html" target="_blank" rel="noopener">一张图看微信小程序(前端之路 - DRY)</a></li><li><a href="http://blog.csdn.net/yanzhenjie1003/article/details/52698184" target="_blank" rel="noopener">微信小程序要这样解读(CSDN)</a></li><li><a href="http://blog.csdn.net/luoyanglizi/article/details/52681245" target="_blank" rel="noopener">一名 Android 开发者的微信小程序填坑之路(1)</a></li><li><a href="http://blog.csdn.net/luoyanglizi/article/details/52711634" target="_blank" rel="noopener">小程序开发利器：Matchmaker(CSDN)</a></li><li><a href="https://segmentfault.com/a/1190000007017985" target="_blank" rel="noopener">微信小程序开发三宗罪和解决方案(SegmentFault)</a></li><li><a href="https://segmentfault.com/a/1190000007109050" target="_blank" rel="noopener">使用 Labrador 0.3 构建 ES6/ES7 标准模块化微信小程序(SegmentFault)</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MzA5NTQ4NjkyMQ==&mid=2650723004&idx=1&sn=a6bcbf354beca3e745c47e542e119e5c&chksm=88b4e41abfc36d0c547698b6f4f3669b1aa351a879332c2848ffd6618dbf23cb41316dca570a&scene=0#rd" target="_blank" rel="noopener">微信小程序真机测试多个 DEMO)(微信公众号)</a></li><li><a href="https://github.com/bestony/WeApp-Demo" target="_blank" rel="noopener">微信小程序真机测试视频源文件</a></li><li><a href="https://devework.com/wordpress-rest-api-weixin-weapp.html" target="_blank" rel="noopener">WordPress 网站基于 REST API 开发“微信小程序”实战</a></li><li><a href="https://devework.com/wordpress-weapp-2.html" target="_blank" rel="noopener">WordPress 网站开发“微信小程序“实战(二)</a></li><li><a href="https://devework.com/wordpress-weapp-3.html" target="_blank" rel="noopener">WordPress 网站开发“微信小程序“实战(三)</a></li><li><a href="https://segmentfault.com/a/1190000013448739" target="_blank" rel="noopener">解决微信小程序组件所在页面无返回按钮的问题</a></li></ul><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><ul><li><a href="https://github.com/Hao-Wu/WeApp-Demo" target="_blank" rel="noopener">微信小程序官方 Demo(Hao-Wu/WeApp-Demo)</a></li><li><a href="https://github.com/phodal/weapp-quick" target="_blank" rel="noopener">微信小应用示例代码(phodal/weapp-quick)</a></li><li><a href="https://github.com/giscafer/wechat-weapp-mapdemo" target="_blank" rel="noopener">微信小应用地图定位 demo(giscafer/wechat-weapp-mapdemo)</a></li><li><a href="https://github.com/hilongjw/weapp-gold" target="_blank" rel="noopener">微信小应用- 掘金主页信息流(hilongjw/weapp-gold)</a></li><li><a href="https://github.com/zce/weapp-demo" target="_blank" rel="noopener">微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo)</a></li><li><a href="https://github.com/hingsir/weapp-douban-film" target="_blank" rel="noopener">微信小程序 - 豆瓣电影(hingsir/weapp-douban-film)</a></li><li><a href="https://github.com/kunkun12/weapp" target="_blank" rel="noopener">小程序 hello world 尝鲜(kunkun12/weapp)</a></li><li><a href="https://github.com/natee/wxapp-2048" target="_blank" rel="noopener">微信小程序版 2048 小游戏(natee/wxapp-2048)</a></li><li><a href="https://github.com/wangmingjob/weapp-weipiao" target="_blank" rel="noopener">微信小程序 - 微票(wangmingjob/weapp-weipiao)</a></li><li><a href="https://github.com/SeptemberMaples/wechat-weapp-demo" target="_blank" rel="noopener">微信小程序购物车 DEMO(SeptemberMaples/wechat-weapp-demo)</a></li><li><a href="https://github.com/jectychen/wechat-v2ex" target="_blank" rel="noopener">微信小程序 V2EX(jectychen/wechat-v2ex)</a></li><li><a href="https://github.com/myronliu347/wechat-app-zhihudaily" target="_blank" rel="noopener">微信小程序 - 知乎日报(myronliu347/wechat-app-zhihudaily)</a></li><li><a href="https://github.com/hijiangtao/weapp-newsapp" target="_blank" rel="noopener">微信小程序 - 公众号热门文章信息流(hijiangtao/weapp-newsapp)</a></li><li><a href="https://github.com/lypeer/wechat-weapp-gank" target="_blank" rel="noopener">微信小程序版 Gank 客户端(lypeer/wechat-weapp-gank)</a></li><li><a href="https://github.com/charleyw/wechat-weapp-redux-todos" target="_blank" rel="noopener">微信小程序集成 Redux 实现的Todo list(charleyw/wechat-weapp-redux-todos)</a></li><li><a href="https://github.com/leancloud/leantodo-weapp" target="_blank" rel="noopener">微信小程序集成 LeanCloud 实现的 Todo list(leancloud/leantodo-weapp)</a></li><li><a href="https://github.com/kraaas/timer" target="_blank" rel="noopener">微信小程序 - 番茄时钟(kraaas/timer)</a></li><li><a href="https://github.com/ericzyh/wechat-chat" target="_blank" rel="noopener">微信小程序 - 聊天室(ericzyh/wechat-chat)</a></li><li><a href="https://github.com/BelinChung/wxapp-hiapp" target="_blank" rel="noopener">微信小程序 - HiApp(BelinChung/wxapp-hiapp)</a></li><li><a href="https://github.com/charleyw/wechat-weapp-redux" target="_blank" rel="noopener">小程序 Redux 绑定库(charleyw/wechat-weapp-redux)</a></li><li><a href="https://github.com/18380435477/WeApp" target="_blank" rel="noopener">微信小程序版微信(18380435477/WeApp)</a></li><li><a href="https://github.com/hardog/wechat-app-flexlayout" target="_blank" rel="noopener">小程序开发从布局开始(hardog/wechat-app-flexlayout)</a></li><li><a href="https://github.com/eyasliu/wechat-app-music" target="_blank" rel="noopener">微信小程序 - 音乐播放器(eyasliu/wechat-app-music)</a></li><li><a href="https://github.com/dunizb/wxapp-sCalc" target="_blank" rel="noopener">微信小程序 - 简易计算器-适合入门（dunizb/wxapp-sCalc）</a></li><li><a href="https://github.com/zhengxiaowai/weapp-github" target="_blank" rel="noopener">微信小程序 - github(zhengxiaowai/weapp-github)</a></li><li><a href="https://github.com/harveyqing/BearDiary" target="_blank" rel="noopener">微信小程序 - 小熊の日记(harveyqing/BearDiary)</a></li><li><a href="https://github.com/SeaHub/PigRaising" target="_blank" rel="noopener">微信小程序(Seahub/PigRaising)</a></li><li><a href="https://github.com/brucevanfdm/WeChatMeiZhi" target="_blank" rel="noopener">微信小程序(WeChatMeiZhi妹子图)</a></li><li><a href="https://github.com/zce/weapp-boilerplate" target="_blank" rel="noopener">微信小程序快速开发骨架</a></li><li><a href="https://github.com/SuperKieran/weapp-artand" target="_blank" rel="noopener">微信小程序 - Artand 最专业的艺术设计平台</a></li><li><a href="https://github.com/zhijieeeeee/wechat-app-joke" target="_blank" rel="noopener">微信小程序 - 开心一刻(zhijieeeeee/wechat-app-joke)</a></li><li><a href="https://github.com/uniquexiaobai/wechat-app-githubfeed" target="_blank" rel="noopener">微信小程序 - GitHubFeed(uniquexiaobai/wechat-app-githubfeed)</a></li><li><a href="https://github.com/fluency03/weapp-500px" target="_blank" rel="noopener">微信小程序 - 国外摄影社区500px(fluency03/weapp-500px)</a></li><li><a href="https://github.com/bayetech/wechat_mall_applet" target="_blank" rel="noopener">微信小程序 - 巴爷供销社－电商平台(bayetech)</a></li><li><a href="https://github.com/liujians/Wa-UI" target="_blank" rel="noopener">基于微信小程序的 UI 库（Wa-UI）</a></li><li><a href="https://github.com/litt1e-p/weapp-girls" target="_blank" rel="noopener">微信小程序 - 豆瓣美女/妹子图(weapp-girls)</a></li><li><a href="https://github.com/liumulin614/BeautifulGirl" target="_blank" rel="noopener">微信小程序 - 美女模特(BeautifulGirl)</a></li><li><a href="https://github.com/RebeccaHanjw/weapp-wechat-zhihu" target="_blank" rel="noopener">微信小程序 - 知乎仿写(RebeccaHanjw/weapp-wechat-zhihu)</a></li><li><a href="https://github.com/romoo/weapp-demo-breadtrip" target="_blank" rel="noopener">微信小程序 - 面包旅行(romoo/weapp-demo-breadtrip)</a></li><li><a href="https://github.com/luuman/weapp-film" target="_blank" rel="noopener">微信小程序 - 淘票票(weapp-film)</a></li><li><a href="https://github.com/ahonn/weapp-one" target="_blank" rel="noopener">微信小程序 - 仿 ONE(ahonn/weapp-one)</a></li><li><a href="https://github.com/vace/wechatapp-news-reader" target="_blank" rel="noopener">微信小程序 - 新闻阅读器(vace/wechatapp-news-reader)</a></li><li><a href="https://github.com/Symous/WechatApp-BaisiSister" target="_blank" rel="noopener">微信小程序 - 百思不得姐(Symous/WechatApp-BaisiSister)</a></li><li><a href="https://github.com/lanshan-studio/wecqupt" target="_blank" rel="noopener">微信小程序 - We 重邮(lanshan-studio/wecqupt)</a></li><li><a href="https://github.com/DengKe1994/weapp-calculator/tree/master" target="_blank" rel="noopener">微信小程序 - IOS 计算器</a></li><li><a href="https://github.com/monkindey/wx-github" target="_blank" rel="noopener">微信小程序 - github 简历(monkindey/wx-github)</a></li><li><a href="https://github.com/xujinyang/CoderCalendar-WeApp" target="_blank" rel="noopener">微信小程序 - 程序员老黄历(xujinyang/CoderCalendar-WeApp)</a></li><li><a href="https://github.com/zce/weapp-todos" target="_blank" rel="noopener">微信小程序 - TODOS（任务清单）(zce/weapp-todos)</a></li><li><a href="https://github.com/yaoshanliang/weapp-ssha" target="_blank" rel="noopener">微信小程序 - 企业宣传小程序(yaoshanliang/weapp-ssha)</a></li><li><a href="https://github.com/dongweiming/weapp-zhihulive" target="_blank" rel="noopener">微信小程序 - Zhihu Live (dongweiming/weapp-zhihulive)</a></li><li><a href="https://github.com/bruintong/wechat-webapp-douban-movie" target="_blank" rel="noopener">微信小程序 - 豆瓣电影(bruintong/wechat-webapp-douban-movie)</a></li><li><a href="https://github.com/bruintong/wechat-webapp-douban-location" target="_blank" rel="noopener">微信小程序 - 豆瓣同城(bruintong/wechat-webapp-douban-location)</a></li><li><a href="https://github.com/arkilis/weapp-jandan" target="_blank" rel="noopener">微信小程序 - 煎蛋微信小程序(arkilis/weapp-jandan)</a></li><li><a href="https://github.com/bodekjan/wechat-weather" target="_blank" rel="noopener">微信小程序 - 微信天气(bodekjan/wechat-weather)</a></li><li><a href="https://github.com/jasscia/ChristmasHat" target="_blank" rel="noopener">微信小程序 - 我要圣诞帽 (jasscia/ChristmasHat)</a></li><li><a href="https://github.com/yaoshanliang/weapp-jump" target="_blank" rel="noopener">微信小程序 - 跳一跳(yaoshanliang/weapp-jump)</a></li><li><a href="https://github.com/nanwangjkl/sliding_puzzle" target="_blank" rel="noopener">微信小程序 - 滑块拼图(nanwangjkl/sliding_puzzle)</a></li><li><a href="https://github.com/yaoshanliang/weapp-monument-valley" target="_blank" rel="noopener">微信小程序 - 纪念碑谷(yaoshanliang/weapp-monument-valley)</a></li><li><a href="https://github.com/kaiwu/weui-scalajs" target="_blank" rel="noopener">微信小程序 - 使用Scala.js开发(kaiwu/weui-scalajs)</a></li><li><a href="https://github.com/tinajs/tina-hackernews" target="_blank" rel="noopener">微信小程序 - Hacker News 热点 (tinajs/tina-hackernews)</a></li><li><a href="https://github.com/mohuishou/scuplus-wechat" target="_blank" rel="noopener">微信小程序 - We川大 (mohuishou/scuplus-wechat)</a></li></ul><h2 id="轮子"><a href="#轮子" class="headerlink" title="轮子"></a>轮子</h2><ul><li><a href="https://github.com/fanweixiao/wxapp-socket-io" target="_blank" rel="noopener">socket.io 风格的 websocket 类库</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MzI0MjYwMjM2NQ==&mid=2247483670&idx=1&sn=5aa5da2fff2415e9b19f848712ddf480&chksm=e9789904de0f1012159332fda391c3eec0bb3d1c0db2c34ab557208ff0c04806a40d00e844fe&mpshare=1&scene=1&srcid=1007cWRXdd0ug9oAceCsIWp6#rd" target="_blank" rel="noopener">微信小程序倒计时组件(微信公众号)</a></li><li><a href="http://mp.weixin.qq.com/s?__biz=MzI0MjYwMjM2NQ==&mid=2247483674&idx=1&sn=2bf242b391144f3f0e57e0ed0ebce36f&chksm=e9789908de0f101ee23f7c125c9a48c4f9ba3f242a3b1c89b05ca5b9e8e68262c02b47fe3d12&mpshare=1&scene=1&srcid=1008NvO9oI8wWGp4XBxlpLeL#rd" target="_blank" rel="noopener">微信小程序下拉筛选组件(微信公众号)</a></li><li><a href="https://github.com/leancloud/weapp-polyfill" target="_blank" rel="noopener">w3c 标准 API polyfill</a></li><li><a href="https://github.com/kiinlam/wetoast" target="_blank" rel="noopener">WeToast - 微信小程序toast增强插件</a></li><li><a href="https://github.com/icindy/wxParse" target="_blank" rel="noopener">wxParse - 微信小程序富文本解析自定义组件，支持HTML及markdown解析</a></li><li><a href="https://github.com/zhongjie-chen/wx-alphabetical-listview" target="_blank" rel="noopener">wx-alphabetical-listview 带字母滑动的列表</a></li><li><a href="https://github.com/zhongjie-chen/wx-drawer" target="_blank" rel="noopener">wx-drawer 模仿 QQ6.0 侧滑菜单</a></li><li><a href="https://github.com/zhongjie-chen/wx-scrollable-tab-view" target="_blank" rel="noopener">wx-scrollable-tab-view 可滚动的 tabview</a></li><li><a href="https://github.com/o2team/wxapp-img-loader" target="_blank" rel="noopener">wxapp-img-loader 图片预加载组件</a></li><li><a href="https://github.com/dlhandsome/we-swiper" target="_blank" rel="noopener">we-swiper 内容滑动插件</a></li><li><a href="https://github.com/dlhandsome/we-cropper" target="_blank" rel="noopener">we-cropper 微信小程序图片裁剪工具</a></li><li><a href="https://github.com/JoeZheng2015/wx-promise-request" target="_blank" rel="noopener">wx-promise-request 微信小程序请求队列管理库</a></li><li><a href="https://github.com/bobiscool/wxDraw" target="_blank" rel="noopener">wxDraw 全面的小程序 Canvas 动画库 支持创建各种图形，动画以及主要手势交互事件</a></li><li><a href="https://github.com/Hongye567/weapp-mark/blob/master/doc/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E5%AD%97%E4%BD%93.md" target="_blank" rel="noopener">小程序使用外部字体</a></li></ul><blockquote><p> <a href="https://github.com/justjavac/awesome-wechat-weapp" target="_blank" rel="noopener">原文链接</a></p></blockquote>]]></content>
<categories>
<category> 小程序 </category>
</categories>
<tags>
<tag> 小程序 </tag>
</tags>
</entry>
<entry>
<title>从url到页面渲染浏览器经历了什么？</title>
<link href="/2018/03/18/%E4%BB%8Eurl%E5%88%B0%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BB%8F%E5%8E%86%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F/"/>
<url>/2018/03/18/%E4%BB%8Eurl%E5%88%B0%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BB%8F%E5%8E%86%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F/</url>
<content type="html"><![CDATA[<blockquote><p>面对这个问题？我想了想，看了看，参考了一下别人的文章，并自己梳理了一下知识，其中有好多东西没有涉及到比如web安全、性能优化、绘话技术、存储技术、负载均衡、集群等，日后有空再慢慢补充，此文也只是简单的记录一下自己对此的理解。以便形成自己前端知识体系，如若有错，欢迎指出！，哈哈哈哈哈，不瞎扯了，看文章了<br>!</p></blockquote><h2 id="浏览器的组成"><a href="#浏览器的组成" class="headerlink" title="浏览器的组成"></a>浏览器的组成</h2><ol><li>用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分</li><li>浏览器引擎：用来查询及操作渲染引擎的接口</li><li>渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来</li><li>网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作</li><li>UI 后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口</li><li>JS解释器－用来解释执行JS代码</li><li>数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术</li></ol><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521363823270.png" alt="这里写图片描述"><br> </p><h2 id="浏览器从请求到渲染经历的过程"><a href="#浏览器从请求到渲染经历的过程" class="headerlink" title="浏览器从请求到渲染经历的过程"></a>浏览器从请求到渲染经历的过程</h2><ol><li>DNS域名解析</li><li>TCP/IP连接</li><li>HTTP 请求即响应</li><li>服务器响应</li><li>客户端渲染</li></ol><h3 id="DNS-查询"><a href="#DNS-查询" class="headerlink" title="DNS 查询"></a>DNS 查询</h3><blockquote><p><em>DNS</em>（Domain Name System，域名系统），万维网上作为域名和IP地址相互映射的一个分布式数据库</p></blockquote><p> <strong>dns解析成IP的大致流程</strong>：</p><ul><li>如果<strong>浏览器有缓存</strong>直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用host</li><li>如果本地没有，就向dns域名服务器查询（当然，中间可能还会经过路由，也有缓存等），查询到对应的IP</li></ul><p><strong>注意，域名查询时有可能是经过了CDN调度器的（如果有cdn存储功能的话）。而且，需要知道dns解析是很耗时的，因此如果解析域名过多，会让首屏加载变得过慢，可以考虑 <code>dns-prefetch</code>优化。</strong></p><h4 id="关于DNS缓存"><a href="#关于DNS缓存" class="headerlink" title="关于DNS缓存"></a><strong>关于DNS缓存</strong></h4><ul><li>查看Chome浏览器的DNS缓存:在地址栏输入<code>chrome://dns</code></li></ul><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521383708115.png" alt="这里写图片描述"></p><ul><li><p>清除Chrome浏览器的DNS缓存 </p><p> <img src="http://jackie_bobo.coding.me/asset_blog/render/1521384442319.png" alt="这里写图片描述"></p></li><li><p>清除本机DNS缓存,此截图以win系统为例， cmd输入命令<code>ipconfig /flushdns</code></p><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521385005691.png" alt="这里写图片描述"></p></li></ul><h3 id="TCP-IP"><a href="#TCP-IP" class="headerlink" title="TCP/IP"></a>TCP/IP</h3><h4 id="tcp-ip请求"><a href="#tcp-ip请求" class="headerlink" title="tcp/ip请求"></a>tcp/ip请求</h4><p>http的本质就是 <code>tcp/ip</code>请求。</p><p>需要了解3次握手规则建立连接以及断开连接时的四次挥手。</p><p>tcp将http长报文划分为短报文，通过三次握手与服务端建立连接，进行可靠传输。</p><p><strong>三次握手的步骤（抽象派）</strong></p><ul><li>客户端：hello，你是server么？</li><li>服务端：hello，我是server，你是client么</li><li>客户端：yes，我是client</li></ul><p>建立连接成功后，接下来就正式传输数据。</p><p>然后，待到断开连接时，需要进行四次挥手（因为是全双工的，所以需要四次挥手）。</p><p><strong>四次挥手的步骤（抽象派）</strong></p><ul><li>主动方：我已经关闭了向你那边的主动通道了，只能被动接收了</li><li>被动方：收到通道关闭的信息</li><li>被动方：那我也告诉你，我这边向你的主动通道也关闭了</li><li>主动方：最后收到数据，之后双方无法通信</li></ul><p><strong>tcp/ip的并发限制</strong></p><p>浏览器对同一域名下并发的tcp连接是有限制的（2-10个不等）。</p><p>而且在http1.0中往往一个资源下载就需要对应一个tcp/ip请求。</p><p>所以针对这个瓶颈，又出现了很多的资源优化方案。</p><p><strong>get和post的区别</strong></p><p>get和post虽然本质都是tcp/ip，但两者除了在http层面外，在tcp/ip层面也有区别。</p><p>get会产生一个tcp数据包，post两个。</p><p>具体就是：</p><ul><li>get请求时，浏览器会把 <code>headers</code>和 <code>data</code>一起发送出去，服务器响应200（返回数据），</li><li>post请求时，浏览器先发送 <code>headers</code>，服务器响应 <code>100continue</code>，浏览器再发送 <code>data</code>，服务器响应200（返回数据）。</li></ul><p>再说一点，这里的区别是 <code>specification</code>（规范）层面，而不是 <code>implementation</code>（对规范的实现）</p><h4 id="五层因特网协议栈"><a href="#五层因特网协议栈" class="headerlink" title="五层因特网协议栈"></a>五层因特网协议栈</h4><p>其实这个概念挺难记全的，记不全没关系，但是要有一个整体概念。</p><p>其实就是一个概念：从客户端发出http请求到服务器接收，中间会经过一系列的流程。</p><p>简括就是：从应用层的发送http请求，到传输层通过三次握手建立tcp/ip连接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。</p><p>当然，服务端的接收就是反过来的步骤。</p><p>五层因特尔协议栈其实就是： 1.应用层(dns,http) DNS解析成IP并发送http请求 2.传输层(tcp,udp) 建立tcp连接（三次握手） 3.网络层(IP,ARP) IP寻址 4.数据链路层(PPP) 封装成帧 5.物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）</p><p>当然，其实也有一个完整的OSI七层框架，与之相比，多了会话层、表示层。</p><p><strong>OSI七层框架： <code>物理层</code>、 <code>数据链路层</code>、 <code>网络层</code>、 <code>传输层</code>、 <code>会话层</code>、<code>表示层</code>、 <code>应用层</code>。</strong></p><ul><li>表示层：主要处理两个通信系统中交换信息的表示方式，包括数据格式交换，数据加密与解密，数据压缩与终端类型转换等</li><li>会话层：它具体管理不同用户和进程之间的对话，如控制登陆和注销过程</li></ul><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521385126018.png" alt="这里写图片描述"></p><h3 id="HTTP状态码对照表"><a href="#HTTP状态码对照表" class="headerlink" title="HTTP状态码对照表"></a>HTTP状态码对照表</h3><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521385558195.png" alt="这里写图片描述"></p><h4 id="http常见的状态码"><a href="#http常见的状态码" class="headerlink" title="http常见的状态码"></a>http常见的状态码</h4><p>这里面最常用到的就是状态码，很多时候都是通过状态码来判断，如（列举几个最常见的）：</p><ul><li>200——表明该请求被成功地完成，所请求的资源发送回客户端</li><li>304——自从上次请求后，请求的网页未修改过，请客户端使用本地缓存</li><li>400——客户端请求有错（譬如可以是安全模块拦截）</li><li>401——请求未经授权</li><li>403——禁止访问（譬如可以是未登录时禁止）</li><li>404——资源未找到</li><li>500——服务器内部错误</li><li>503——服务不可用</li></ul><h4 id="请求报文结构"><a href="#请求报文结构" class="headerlink" title="请求报文结构"></a>请求报文结构</h4><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521385808615.png" alt="这里写图片描述"></p><h2 id="渲染引擎基本流程"><a href="#渲染引擎基本流程" class="headerlink" title="渲染引擎基本流程"></a>渲染引擎基本流程</h2><p>渲染引擎首先通过<code>网络</code>获得所请求文档的内容后进行如下渲染流程</p><p>渲染基本流程：</p><p><code>解析html以构建dom树->构建render树->布局render树->绘制render树</code></p><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521367011861.png" alt="这里写图片描述"></p><p><strong>具体渲染流程图如下</strong></p><p><img src="http://jackie_bobo.coding.me/asset_blog/render/1521380527421.png" alt="这里写图片描述"><br> webkit渲染引擎的主流程</p><p> <img src="http://jackie_bobo.coding.me/asset_blog/render/1521380545934.png" alt="这里写图片描述"><br> Mozilla的Geoko 渲染引擎主流程 </p><blockquote><p>从图可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。下面将讨论流程中的各个阶段。</p></blockquote><p>参考资料：</p><p><a href="https://www.kafan.cn/edu/620091.html" target="_blank" rel="noopener">https://www.kafan.cn/edu/620091.html</a></p><p><a href="http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA" target="_blank" rel="noopener">http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA</a></p>]]></content>
<categories>
<category> 浏览器渲染原理 </category>
</categories>
<tags>
<tag> 浏览器渲染原理 </tag>
</tags>
</entry>
<entry>
<title>美团开源用mpvue,可以用vue开发小程序了！</title>
<link href="/2018/03/15/%E5%8F%AF%E4%BB%A5%E7%94%A8mpVue%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%86%EF%BC%81%E7%BE%8E%E5%9B%A2%E5%BC%80%E6%BA%90%E7%94%A8%20Vue.js%20%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%20mpvue/"/>
<url>/2018/03/15/%E5%8F%AF%E4%BB%A5%E7%94%A8mpVue%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%86%EF%BC%81%E7%BE%8E%E5%9B%A2%E5%BC%80%E6%BA%90%E7%94%A8%20Vue.js%20%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%20mpvue/</url>
<content type="html"><![CDATA[<p>传送门：<a href="http://mpvue.com/" target="_blank" rel="noopener">官方文档说明</a></p><h1 id="如何看待美团开源的-mpvue"><a href="#如何看待美团开源的-mpvue" class="headerlink" title="如何看待美团开源的 mpvue ?"></a><a href="https://www.zhihu.com/question/268421668/answer/337190631" target="_blank" rel="noopener">如何看待美团开源的 mpvue ?</a></h1><blockquote><p>先来看一下，知乎的大佬们对mpvue的看法………….</p></blockquote><h1 id="mpvue-简介"><a href="#mpvue-简介" class="headerlink" title="mpvue 简介"></a>mpvue 简介</h1><p><code>mpvue</code> （<a href="https://github.com/Meituan-Dianping/mpvue" target="_blank" rel="noopener">github 地址请参见</a>）是一个使用 <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a> 开发小程序的前端框架。框架基于 <code>Vue.js</code> 核心，<code>mpvue</code> 修改了 <code>Vue.js</code> 的 <a href="http://mpvue.com/mpvue" target="_blank" rel="noopener">runtime</a> 和 <a href="http://mpvue.com/mpvue-template-compiler" target="_blank" rel="noopener">compiler</a> 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 <code>Vue.js</code> 开发体验。</p><h1 id="mpvue-特性"><a href="#mpvue-特性" class="headerlink" title="mpvue 特性"></a><strong>mpvue 特性</strong></h1><h2 id="主要特性"><a href="#主要特性" class="headerlink" title="主要特性"></a>主要特性</h2><p>使用 <code>mpvue</code> 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：</p><ul><li>彻底的组件化开发能力：提高代码复用性</li><li>完整的 <code>Vue.js</code> 开发体验</li><li>方便的 <code>Vuex</code> 数据管理方案：方便构建复杂应用</li><li>快捷的 <code>webpack</code> 构建机制：自定义构建策略、开发阶段 hotReload</li><li>支持使用 npm 外部依赖</li><li>使用 <code>Vue.js</code> 命令行工具 vue-cli 快速初始化项目</li><li>H5 代码转换编译成小程序目标代码的能力</li></ul><p>其它特性正在等着你去探索，<a href="http://mpvue.com/mpvue" target="_blank" rel="noopener">详细文档</a>。</p><h1 id="配套设施"><a href="#配套设施" class="headerlink" title="配套设施"></a>配套设施</h1><p><code>mpvue</code> 作为小程序版本的 <code>Vue.js</code>，在框架 SDK 之外，完整的技术体系还包括如下设施。</p><ul><li><a href="http://mpvue.com/build/mpvue-loader" target="_blank" rel="noopener">mpvue-loader</a> 提供 webpack 版本的加载器</li><li><a href="http://mpvue.com/build/mpvue-webpack-target" target="_blank" rel="noopener">mpvue-webpack-target</a> webpack 构建目标</li><li><a href="http://mpvue.com/build/postcss-mpvue-wxss" target="_blank" rel="noopener">postcss-mpvue-wxss</a> 样式代码转换预处理工具</li><li><a href="http://mpvue.com/build/px2rpx-loader" target="_blank" rel="noopener">px2rpx-loader</a> 样式转化插件</li><li>其它</li></ul><h1 id="mpvue实现原理"><a href="#mpvue实现原理" class="headerlink" title="mpvue实现原理"></a><strong>mpvue实现原理</strong></h1><p><img src="https://www.itcodemonkey.com/data/upload/portal/20180311/1520754305203323.jpg" alt="img"></p><p>● 将小程序页面编写为 Vue.js 实现</p><p>● 以 Vue.js 开发规范实现父子组件关联</p><p><strong>小程序代码</strong></p><p>● 以小程序开发规范编写视图层模板</p><p>● 配置生命周期函数，关联数据更新调用</p><p>● 将 Vue.js 数据映射为小程序数据模型</p><p><strong>并在此基础上，附加如下机制</strong></p><p>● Vue.js 实例与小程序 Page 实例建立关联</p><p>● 小程序和 Vue.js 生命周期建立映射关系，能在小程序生命周期中触发 Vue.js 生命周期</p><p>● 小程序事件建立代理机制，在事件代理函数中触发与之对应的 Vue.js 组件事件响应</p><h1 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h1><p>本文假设你既不会 vue 也不会小程序，如嫌拖沓，请直接快进跳读。</p><h2 id="1-初始化一个-mpvue-项目"><a href="#1-初始化一个-mpvue-项目" class="headerlink" title="1. 初始化一个 mpvue 项目"></a>1. 初始化一个 mpvue 项目</h2><p>现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 <a href="https://nodejs.org/" target="_blank" rel="noopener">nodejs</a> 并安装。</p><p>然后打开命令行工具：</p><figure class="highlight shell"><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"><span class="meta">#</span> 1. 先检查下 Node.js 是否安装成功</span><br><span class="line"><span class="meta">$</span> node -v</span><br><span class="line">v8.9.0</span><br><span class="line"></span><br><span class="line"><span class="meta">$</span> npm -v</span><br><span class="line">5.6.0</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span> 2. 由于众所周知的原因，可以考虑切换源为 taobao 源</span><br><span class="line"><span class="meta">$</span> npm set registry https://registry.npm.taobao.org/</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span> 3. 全局安装 vue-cli</span><br><span class="line"><span class="meta">#</span> 一般是要 sudo 权限的</span><br><span class="line"><span class="meta">$</span> npm install --global vue-cli</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span> 4. 创建一个基于 mpvue-quickstart 模板的新项目</span><br><span class="line"><span class="meta">#</span> 新手一路回车选择默认就可以了</span><br><span class="line"><span class="meta">$</span> vue init mpvue/mpvue-quickstart my-project</span><br><span class="line"></span><br><span class="line"><span class="meta">#</span> 5. 安装依赖，走你</span><br><span class="line"><span class="meta">$</span> cd my-project</span><br><span class="line"><span class="meta">$</span> npm install</span><br><span class="line"><span class="meta">$</span> npm run dev</span><br></pre></td></tr></table></figure><p>随着运行成功的回显之后，可以看到本地多了个 <code>dist</code> 目录，这个目录里就是生成的小程序相关代码。</p><h2 id="2-搭建小程序的开发环境"><a href="#2-搭建小程序的开发环境" class="headerlink" title="2. 搭建小程序的开发环境"></a>2. 搭建小程序的开发环境</h2><p>小程序自己有一个专门的<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html" target="_blank" rel="noopener">微信开发者工具</a>，<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html" target="_blank" rel="noopener">最新版本下载地址</a>。</p><p>这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。</p><h2 id="3-调试开发-mpvue"><a href="#3-调试开发-mpvue" class="headerlink" title="3. 调试开发 mpvue"></a>3. 调试开发 mpvue</h2><p>选择 <code>小程序项目</code> 并依次填好需要的信息：</p><ul><li>项目目录：就是刚刚创建的项目目录（非 dist 目录）</li><li>AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。</li><li>项目名称。</li></ul><p>如图：</p><p><img src="http://mpvue.com/assets/quick-start/1.png" alt="小程序项目配置"></p><p>点击“确定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。然后如图：</p><p><img src="http://mpvue.com/assets/quick-start/2.png" alt="mpvue-start"></p><p>此时，整个 <code>mpvue</code> 项目已经跑起来了。</p><p>用自己趁手的编辑器（或者IDE）打开 <code>my-project</code> 中的 <code>src</code> 目录下的代码试试，如示例：</p><p>到此，上手完毕。</p><h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><ol><li>新增的页面需要重新 <code>npm run dev</code> 来进行编译</li></ol>]]></content>
<categories>
<category> 框架 </category>
</categories>
<tags>
<tag> mpvue </tag>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>2017前端技术发展回顾</title>
<link href="/2018/03/10/2017%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E5%9B%9E%E9%A1%BE/"/>
<url>/2018/03/10/2017%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E5%9B%9E%E9%A1%BE/</url>
<content type="html"><![CDATA[<h1 id="2017-前端技术发展回顾"><a href="#2017-前端技术发展回顾" class="headerlink" title="2017 前端技术发展回顾"></a>2017 前端技术发展回顾</h1><blockquote><ul><li>原文地址：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FFrontendMasters%2Ffront-end-handbook-2018%2Fblob%2Fmaster%2Frecap.md" target="_blank" rel="noopener">Recap of Front-end Development in 2017</a></li><li>原文作者：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FFrontendMasters%2F" target="_blank" rel="noopener">FrontendMasters</a></li><li>译文出自：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner" target="_blank" rel="noopener">掘金翻译计划</a></li><li>本文永久链接：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Ffront-end-handbook-2018%2Fblob%2Fzh-Hans%2Frecap.md" target="_blank" rel="noopener">github.com/xitu/front-…</a></li><li>译者：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fbambooom" target="_blank" rel="noopener">bambooom</a></li><li>校对者：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FrealYukiko" target="_blank" rel="noopener">realYukiko</a></li></ul></blockquote><hr><blockquote><p><strong>更多精彩内容请关注：前端开发者指南 2018</strong></p></blockquote><hr><ul><li>HTML 5.2 <a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.w3.org%2Fblog%2F2017%2F12%2Fhtml-5-2-is-done-html-5-3-is-coming%2F" target="_blank" rel="noopener">发布</a>。</li><li><a href="https://link.juejin.im/?target=(https%3A%2F%2Fwww.npmjs.com%2Fnpm%2Fstate-of-javascript-frameworks-2017-part-1" target="_blank" rel="noopener">毫无疑问</a>)，这是 <a href="https://link.juejin.im/?target=https%3A%2F%2Fvuejs.org%2F" target="_blank" rel="noopener">Vue.js</a> 在<a href="https://link.juejin.im/?target=https%3A%2F%2Fstateofjs.com%2F2017%2Ffront-end%2Fresults%2F" target="_blank" rel="noopener">流行</a>中飞速发展的一年。</li><li>前端 HTML & CSS 开发者和前端应用程序开发者之间的<a href="https://link.juejin.im/?target=https%3A%2F%2Fmedium.com%2F%40jerrylowm%2Fthe-death-of-front-end-developers-803a95e0f411" target="_blank" rel="noopener">巨大区别</a>终于<a href="https://link.juejin.im/?target=https%3A%2F%2Fmedium.com%2F%40mandy.michael%2Fis-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06" target="_blank" rel="noopener">被认知，并重新定义</a>。</li><li>作为使用 web 技术构建应用程序的前端 JavaScript 开发者变得越来越好，也<a href="https://link.juejin.im/?target=https%3A%2F%2Fblog.logrocket.com%2Fthe-increasing-nature-of-frontend-complexity-b73c784c09ae" target="_blank" rel="noopener">越来越糟</a>。</li><li>今年似乎比往年更多的涌现出一批试图与主流 JavaScript 应用工具（<a href="https://link.juejin.im/?target=https%3A%2F%2Fstateofjs.com%2F2017%2Ffront-end%2Fresults" target="_blank" rel="noopener">React，Angular，Vue 等</a>）相抗衡的应用程序/框架解决方案。我来列举一部分，<a href="https://link.juejin.im/?target=http%3A%2F%2Fmoonjs.ga%2Fdocs%2Foverview.html" target="_blank" rel="noopener">Moon</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fmarkojs.com%2F" target="_blank" rel="noopener">Marko</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fhyperapp%2Fhyperapp" target="_blank" rel="noopener">Hyperapp</a>，<a href="https://link.juejin.im/?target=http%3A%2F%2Fquasar-framework.org%2F" target="_blank" rel="noopener">Quasar Framework</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fpoi.js.org" target="_blank" rel="noopener">POI</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Ffrint.js.org%2F" target="_blank" rel="noopener">frint</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fbunnyjs.com%2F" target="_blank" rel="noopener">BunnyJS</a>，<a href="https://link.juejin.im/?target=http%3A%2F%2Fjsblocks.com%2F" target="_blank" rel="noopener">jsblocks</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fsapper.svelte.technology%2F" target="_blank" rel="noopener">Sapper</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fstimulusjs%2Fstimulus" target="_blank" rel="noopener">Stimulus</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fchoojs%2Fchoo" target="_blank" rel="noopener">Choo</a>…</li><li>jsbin 和 jsfiddle 进化成了 <a href="https://link.juejin.im/?target=https%3A%2F%2Fstackblitz.com%2F" target="_blank" rel="noopener">StackBliz</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fcodesandbox.io%2F" target="_blank" rel="noopener">codeSandbox</a> 的样子，它们让分享一个应用程序变得如此简单。</li><li>React 继续被 <a href="https://link.juejin.im/?target=https%3A%2F%2Fpreactjs.com%2F" target="_blank" rel="noopener">preact</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Finfernojs.org%2F" target="_blank" rel="noopener">inferno</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FNervJS%2Fnerv" target="_blank" rel="noopener">nerv</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fdvajs%2Fdva" target="_blank" rel="noopener">dva</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Falibaba%2Frax" target="_blank" rel="noopener">rax</a> 之类的所追捧。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fdevhints.io%2F" target="_blank" rel="noopener">devhints.io</a> 很好地将 cheatsheets 组织了起来。</li><li>我们发现应用程序的样板或者命令行工具是带有偏见的，例如 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Ffacebookincubator%2Fcreate-react-app" target="_blank" rel="noopener">React Create App</a>，必要的时候我们要从中逃离。</li><li>大多数开发人员发现，一个好的<a href="https://link.juejin.im/?target=https%3A%2F%2Fcode.visualstudio.com%2F" target="_blank" rel="noopener">代码编辑器</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Feslint.org%2F" target="_blank" rel="noopener">eslint </a>以及 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fprettier%2Fprettier" target="_blank" rel="noopener">prettier</a> 的组合使写代码这件事更快，更轻松愉快。</li><li>CSS <a href="https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_Flexible_Box_Layout%2FBasic_Concepts_of_Flexbox" target="_blank" rel="noopener">Flexbox</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_Grid_Layout" target="_blank" rel="noopener">Grid</a> 获得浏览器支持，因此越来越多开发者开始关注这两者。</li><li>我们<a href="https://link.juejin.im/?target=https%3A%2F%2Fblog.chromium.org%2F2017%2F05%2Fchrome-59-beta-headless-chromium-native.html" target="_blank" rel="noopener">终于</a>有<a href="https://link.juejin.im/?target=https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fsrc%2F%2B%2Flkgr%2Fheadless%2FREADME.md" target="_blank" rel="noopener">无头的 Chrome</a> 了。</li><li>你不再需要用 Less 或者 Sass 来<a href="https://link.juejin.im/?target=https%3A%2F%2Fshoelace.style" target="_blank" rel="noopener">使用 CSS</a> 来完成<a href="https://link.juejin.im/?target=http%3A%2F%2Fcssnext.io%2Ffeatures%2F" target="_blank" rel="noopener">令人惊叹的事情</a>了。</li><li>CSS <a href="https://link.juejin.im/?target=http%3A%2F%2Fryanogles.by%2Fcss%2Fjavascript%2F2017%2F05%2F25%2Fthe-state-of-css.html" target="_blank" rel="noopener">革命</a>正在进行中。</li><li>JavaScript 对象浏览工具已经到来，<a href="https://link.juejin.im/?target=https%3A%2F%2Fsdras.github.io%2Farray-explorer%2F" target="_blank" rel="noopener">JavaScript Array Explorer</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fsdras.github.io%2Fobject-explorer%2F" target="_blank" rel="noopener">JavaScript Object Explorer</a>，它们对于学习 JavaScript 数据类似（例如对象）是非常方便有用的。</li><li><a href="https://link.juejin.im/?target=http%3A%2F%2Fgs.statcounter.com%2Fbrowser-market-share" target="_blank" rel="noopener">Chrome 浏览器在市场上占据主导地位</a>，人们开始担心<a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.theverge.com%2F2018%2F1%2F4%2F16805216%2Fgoogle-chrome-only-sites-internet-explorer-6-web-standards" target="_blank" rel="noopener">历史可能会重演</a>。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fbrave.com%2F" target="_blank" rel="noopener">Brave</a> 成为浏览互联网最愉快且安全的方式。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.infoq.com%2Fnews%2F2017%2F04%2FPhantomjs-future-uncertain" target="_blank" rel="noopener">PhantomJS 不再维护</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fsrc%2F%2B%2Flkgr%2Fheadless%2FREADME.md" target="_blank" rel="noopener">Headless Chrome</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FGoogleChrome%2Fpuppeteer" target="_blank" rel="noopener">Puppeteer</a> 进入。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fprettier.io%2F" target="_blank" rel="noopener">Prettier</a> 从一个意想不到的地方开始，却成为了一个主角。</li><li>很多开发者开始采用静态检查，主要是出于主观原因和赶时髦。有些人完全遵从了 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FMicrosoft%2FTypeScript" target="_blank" rel="noopener">Typescript</a>和微软的做事方式，也有些人采取的较慢的 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Ffacebook%2Fflow" target="_blank" rel="noopener">Flow</a>。有一点可以肯定，大多数开发者不需要类型，他们只是把已经复杂的问题和解决方法更加复杂化。像大多数事情一样，这种趋势大部分是主观教条而非客观价值。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.staticgen.com%2F" target="_blank" rel="noopener">静态网站生成器</a>和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHeadless_CMS" target="_blank" rel="noopener">API CMS 工具也就是无头 CMS</a> 现在在大多数开发者的雷达上。</li><li>Web 组件仍然潜伏着，等待着开发人员的大力推动，这可能永远不会发生。</li><li>JavaScript 安定了，<a href="https://link.juejin.im/?target=http%3A%2F%2Fmichelebertoli.github.io%2Fcss-in-js%2F" target="_blank" rel="noopener">CSS 爆发了</a>，明年的这个时候所有人都会疲惫不堪。</li><li>许多人在使用组件树构建应用程序的时候，开始将 CSS <a href="https://link.juejin.im/?target=https%3A%2F%2Fspeakerdeck.com%2Fvjeux%2Freact-css-in-js" target="_blank" rel="noopener">转移</a>到 <a href="https://link.juejin.im/?target=https%3A%2F%2Flevelup.gitconnected.com%2Fa-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04" target="_blank" rel="noopener">JS 中的 CSS</a> 里。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fyarnpkg.com%2Fen%2F" target="_blank" rel="noopener">Yarn</a> 似乎满足了需求，因为很多人从 npm 换成 Yarn。然而，Yarn 最大的价值在于它为 npm 带来竞争，从而使得 npm 变得更好。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fscrimba.com%2Fabout" target="_blank" rel="noopener">Scrimba</a> 将用于交互式的编码屏幕录像（录制现场的编辑器是可编辑的）的新的视频格式成为现实。</li><li>大多数人开始意识到<a href="https://link.juejin.im/?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FComponent-based_software_engineering" target="_blank" rel="noopener">组件架构</a>和<a href="https://link.juejin.im/?target=http%3A%2F%2Fpatternlab.io%2F" target="_blank" rel="noopener">原子化设计</a>之间的关联。</li><li>ES 模块<a href="https://link.juejin.im/?target=https%3A%2F%2Fphilipwalton.com%2Farticles%2Fdeploying-es2015-code-in-production-today%2F" target="_blank" rel="noopener">将</a>成为<a href="https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23feat%3Des6-module" target="_blank" rel="noopener">浏览器</a>的<a href="https://link.juejin.im/?target=https%3A%2F%2Fmedium.com%2Fdev-channel%2Fes6-modules-in-chrome-canary-m60-ba588dfb8ab7" target="_blank" rel="noopener">一部分</a>，并且如果使用 ES 模块，<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FWebReflection%2Fecma" target="_blank" rel="noopener">备用计划</a>将是必需的（即来自 webpack 之类的打包文件）。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fcodeburst.io%2Fjavascript-trends-in-2018-3fb0077259" target="_blank" rel="noopener">MVC 框架正在淡出</a>。</li><li>使用<a href="https://link.juejin.im/?target=http%3A%2F%2Fbluekit.blueberry.io%2F" target="_blank" rel="noopener">Bluekit</a>，<a href="https://link.juejin.im/?target=https%3A%2F%2Fstorybook.js.org%2F" target="_blank" rel="noopener">Storybook</a>，<a href="https://link.juejin.im/?target=Styleguidist" target="_blank" rel="noopener">React Styleguidist</a> 和 <a href="https://link.juejin.im/?target=https%3A%2F%2Fbitsrc.io%2F" target="_blank" rel="noopener">bit</a> 之类的工具，在你的应用程序之外开发和展示 React 组件开始变得流行。</li><li>在 2017 年获得前端工作<a href="https://link.juejin.im/?target=https%3A%2F%2Fresearch.hackerrank.com%2Fdeveloper-skills%2F2018%2F" target="_blank" rel="noopener">有关经验，这是从个人项目以及 Github 账号上展示出来的</a>。</li><li>从 HTML 文档中<a href="https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FPreloading_content" target="_blank" rel="noopener">预加载</a>资源（CSS，JavaScript，多媒体文件等）<a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.w3.org%2FTR%2Fpreload%2F" target="_blank" rel="noopener">到来了</a>。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.cypress.io%2Fhow-it-works%2F" target="_blank" rel="noopener">Cypress</a> 作为一个完整的测试解决方案出现了，测试会越来越好，因为对于应用程序的代码，端到端测试才是重点。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fblog.mozilla.org%2Fblog%2F2017%2F11%2F13%2Fwebassembly-in-browsers%2F" target="_blank" rel="noopener">WebAssembly 现在可以总所有主流浏览器中使用了。</a></li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fwebpack.js.org%2F" target="_blank" rel="noopener">Webpack</a> 占主导地位，然后<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fparcel-bundler%2Fparcel" target="_blank" rel="noopener">竞争对手 parcel</a> 出现了。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Freactjs.org%2Fblog%2F2017%2F09%2F26%2Freact-v16.0.html" target="_blank" rel="noopener">React 16 代号 fiber 发布</a>。</li><li>在某些情况下，React 开始与 jQuery 一较高下。</li><li>React <a href="https://link.juejin.im/?target=https%3A%2F%2Ftwitter.com%2Fnpmjs%2Fstatus%2F949017852702543876" target="_blank" rel="noopener">的确</a>成为了<a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.npmjs.com%2Fnpm%2Fstate-of-javascript-frameworks-2017-part-1" target="_blank" rel="noopener">最多人使用</a>的<a href="https://link.juejin.im/?target=https%3A%2F%2Fstackoverflow.blog%2F2018%2F01%2F11%2Fbrutal-lifecycle-javascript-frameworks%2F" target="_blank" rel="noopener">构建 UI</a> 的工具。</li><li>Facebook <a href="https://link.juejin.im/?target=https%3A%2F%2Fcode.facebook.com%2Fposts%2F300798627056246%2Frelicensing-react-jest-flow-and-immutable-js%2F" target="_blank" rel="noopener">放弃了 React 的 BSD 许可证</a>，而转成了 MIT 许可证（同样包括 Jest，Flow，Immutable.js 和 GraphQL）。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.graphql.com%2Fcase-studies%2F" target="_blank" rel="noopener">2017</a> 年 <a href="https://link.juejin.im/?target=https%3A%2F%2Fdev-blog.apollodata.com%2F2017-the-year-in-graphql-124a050d04c6" target="_blank" rel="noopener">GraphQL</a> 开始<a href="https://link.juejin.im/?target=https%3A%2F%2Fgraphcms.com%2F" target="_blank" rel="noopener">流行起来</a>。</li><li>Facebook 继续领头<a href="https://link.juejin.im/?target=https%3A%2F%2Fcode.facebook.com%2Fprojects%2F" target="_blank" rel="noopener">负责开发</a>即将到来的如 <a href="https://link.juejin.im/?target=https%3A%2F%2Fprepack.io%2F" target="_blank" rel="noopener">prepack.io</a> 之类的工具。</li><li>正如期待，<a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.ecma-international.org%2Fpublications%2Fstandards%2FEcma-262.htm" target="_blank" rel="noopener">ECMA-262 第 8 版也就是 ES2017 发布</a>。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Freacttraining.com%2Freact-router%2F" target="_blank" rel="noopener">React Router</a> 终于稳定下来了。</li><li>所有的现代浏览器现在都支持 <a href="https://link.juejin.im/?target=http%3A%2F%2Fkangax.github.io%2Fcompat-table%2Fes6%2F" target="_blank" rel="noopener">ECMAScript 2015（也就是 ES6）</a>。</li><li><a href="https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FStatements%2Fasync_function" target="_blank" rel="noopener">Async JavaScript 函数</a> 开始获得一些认真的关注及使用，主要是因为所有现在浏览器<a href="https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dasync%2520fun" target="_blank" rel="noopener">现在都支持 Async 函数</a>了。</li><li>移动开发，<a href="https://link.juejin.im/?target=https%3A%2F%2Fflutter.io%2F" target="_blank" rel="noopener">仍然</a><a href="https://link.juejin.im/?target=https%3A%2F%2Ffacebook.github.io%2Freact-native%2F" target="_blank" rel="noopener">很</a><a href="https://link.juejin.im/?target=https%3A%2F%2Fwww.nativescript.org%2F" target="_blank" rel="noopener">难</a>。今年，强烈地倡导 <a href="https://link.juejin.im/?target=https%3A%2F%2Fblog.mozilla.org%2Ffirefox%2Fprogressive-web-apps-whats-big-deal%2F" target="_blank" rel="noopener">web 平台作为解决这一痛苦的方案</a>获得了<a href="https://link.juejin.im/?target=https%3A%2F%2Fjoreteg.com%2Fblog%2Fbetting-on-the-web" target="_blank" rel="noopener">大量的支持</a>。</li></ul><hr><blockquote><p><a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner" target="_blank" rel="noopener">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://link.juejin.im/?target=https%3A%2F%2Fjuejin.im" target="_blank" rel="noopener">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23android" target="_blank" rel="noopener">Android</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23ios" target="_blank" rel="noopener">iOS</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E5%2589%258D%25E7%25AB%25AF" target="_blank" rel="noopener">前端</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E5%2590%258E%25E7%25AB%25AF" target="_blank" rel="noopener">后端</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E5%258C%25BA%25E5%259D%2597%25E9%2593%25BE" target="_blank" rel="noopener">区块链</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E4%25BA%25A7%25E5%2593%2581" target="_blank" rel="noopener">产品</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E8%25AE%25BE%25E8%25AE%25A1" target="_blank" rel="noopener">设计</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%25E4%25BA%25BA%25E5%25B7%25A5%25E6%2599%25BA%25E8%2583%25BD" target="_blank" rel="noopener">人工智能</a>等领域，想要查看更多优质译文请持续关注 <a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner" target="_blank" rel="noopener">掘金翻译计划</a>、<a href="https://link.juejin.im/?target=http%3A%2F%2Fweibo.com%2Fjuejinfanyi" target="_blank" rel="noopener">官方微博</a>、<a href="https://link.juejin.im/?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fjuejinfanyi" target="_blank" rel="noopener">知乎专栏</a>。</p></blockquote>]]></content>
<categories>
<category> 转载 </category>
</categories>
<tags>
<tag> 前端技术发展史 </tag>
</tags>
</entry>
<entry>
<title>工作中数组常用方法</title>
<link href="/2018/03/04/%E5%B7%A5%E4%BD%9C%E4%B8%AD%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/"/>
<url>/2018/03/04/%E5%B7%A5%E4%BD%9C%E4%B8%AD%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/</url>
<content type="html"><![CDATA[<h2 id="工作中数组常用的方法：forEach、map、filter、every的对比"><a href="#工作中数组常用的方法：forEach、map、filter、every的对比" class="headerlink" title="工作中数组常用的方法：forEach、map、filter、every的对比"></a>工作中数组常用的方法：forEach、map、filter、every的对比</h2><p><strong>代码如下：</strong></p><figure class="highlight html"><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// ES5新增的常用数组方法</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 一 forEach => 遍历数组</span></span></span><br><span class="line"><span class="javascript"> arr.forEach(<span class="function">(<span class="params">v, i</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(v, i);</span></span><br><span class="line"><span class="undefined"> });</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 二 map => 使用一个数组, 利用某规则映射得到一个新数组</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> mapArr = arr.map(<span class="function">(<span class="params">v, i</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> v * v;</span></span><br><span class="line"><span class="undefined"> });</span></span><br><span class="line"><span class="javascript"> arr.map(<span class="function">(<span class="params">v, i</span>) =></span> v * v); <span class="comment">// 如果只有一句话, 可以省略大括号和return</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(mapArr); <span class="comment">// [1, 4, 9, 4, 1]</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 三 filter => 找出符合条件的元素</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 3.1 找出数组中的偶数</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> filterArr1 = arr.filter(<span class="function">(<span class="params">v, i</span>) =></span> v % <span class="number">2</span> == <span class="number">0</span>);</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(filterArr1);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 3.2 删除数组中的偶数</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> filterArr2 = arr.filter(<span class="function">(<span class="params">v, i</span>) =></span> v % <span class="number">2</span> != <span class="number">0</span>); <span class="comment">// 找出数组中的奇数留下来即可</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(filterArr2);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 四 every => 判断数组中的所有元素是否都符合某种条件</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 4.1 数组中的数字是否都是偶数</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> result1 = arr.every(<span class="function">(<span class="params">v, i</span>) =></span> v % <span class="number">2</span> == <span class="number">0</span>) <span class="comment">// 所有的结果都为true, 结果为true, 有一个false, 结果为false</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(result1)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 4.2 数组中的数字是否都大于0</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> result2 = arr.every(<span class="function"><span class="params">v</span> =></span> v > <span class="number">0</span>)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(result2)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 五 some => 判断数组中是否含有符合条件的元素</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 5.1 数组中是否有大于2的数</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> result3 = arr.some(<span class="function"><span class="params">v</span> =></span> v > <span class="number">2</span>) <span class="comment">// 只要有一个true, 结果为true</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(result3)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// 5.2 数组中是否有小于1的数</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> result4 = arr.some(<span class="function"><span class="params">v</span> =></span> v < <span class="number">1</span>)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(result4)</span></span><br><span class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> js数组 </category>
</categories>
<tags>
<tag> js数组 </tag>
</tags>
</entry>
<entry>
<title>javascript中的数组和字符串方法总结</title>
<link href="/2017/10/09/javascript%E4%B8%AD%E7%9A%84%E6%95%B0%E7%BB%84%E5%92%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/"/>
<url>/2017/10/09/javascript%E4%B8%AD%E7%9A%84%E6%95%B0%E7%BB%84%E5%92%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/</url>
<content type="html"><![CDATA[<blockquote><p><strong>在学习js的数组和字符串方法的时候会发现彼此之间好多方法是类似的，为了方便记忆及发现两者之间的关联，之后就自己总结了一个xmind的思维导构，总结可能有瑕疵，哪里有错误的话，希望各位大牛多指出！ThankYou！！！</strong></p></blockquote><p><img src="http://img.blog.csdn.net/20171114165745364?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="javascript数组和字符串中的方法总结"></p><p>###注意：<br>由于考虑到该思维导构图为png格式，所以图片里面的备注是没办法看到的，所以如果需要源文件的话可以点击下面百度云链接下载，<strong><em>辛苦编写，如果觉得对您有用的话，不吝点个赞哈！谢谢。</em></strong></p><hr><p><strong>链接</strong>：<a href="http://pan.baidu.com/s/1hr5IZZY" target="_blank" rel="noopener">http://pan.baidu.com/s/1hr5IZZY</a> <strong>密码：5alp</strong></p>]]></content>
<categories>
<category> js数组 </category>
</categories>
<tags>
<tag> js数组 </tag>
</tags>
</entry>
<entry>
<title>vscode编辑器的常用快捷键</title>
<link href="/2017/09/08/vscode%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/"/>
<url>/2017/09/08/vscode%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/</url>
<content type="html"><![CDATA[<hr><p>typora-copy-images-to: medias</p><hr><h1 id="vs-code-的使用技巧"><a href="#vs-code-的使用技巧" class="headerlink" title="vs code 的使用技巧"></a>vs code 的使用技巧</h1><p>[TOC]</p><h2 id="在线下载地址"><a href="#在线下载地址" class="headerlink" title="在线下载地址"></a>在线下载地址</h2><p><a href="https://code.visualstudio.com/" target="_blank" rel="noopener">vs code 官网</a></p><h2 id="在线安装插件"><a href="#在线安装插件" class="headerlink" title="在线安装插件"></a>在线安装插件</h2><p>插件建议在线安装,因为离线安装 容易出现问题</p><h2 id="插件截图"><a href="#插件截图" class="headerlink" title="插件截图"></a>插件截图</h2><p><img src="http://img.blog.csdn.net/20180206155045819?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p><h2 id="常用快捷键"><a href="#常用快捷键" class="headerlink" title="常用快捷键"></a>常用快捷键</h2><h3 id="常用-General"><a href="#常用-General" class="headerlink" title="常用 General"></a>常用 General</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl + Shift + P，F1</td><td>显示命令面板 Show Command Palette</td></tr><tr><td>Ctrl + P</td><td>快速打开 Quick Open</td></tr><tr><td>Ctrl + Shift + N</td><td>新窗口/实例 New window/instance</td></tr><tr><td>Ctrl + Shift + W</td><td>关闭窗口/实例 Close window/instance</td></tr></tbody></table><h3 id="基础编辑-Basic-editing"><a href="#基础编辑-Basic-editing" class="headerlink" title="基础编辑 Basic editing"></a>基础编辑 Basic editing</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl+X</td><td>剪切行（空选定） Cut line (empty selection)</td></tr><tr><td>Ctrl+C</td><td>复制行（空选定）Copy line (empty selection)</td></tr><tr><td>Alt+ ↑ / ↓</td><td>向上/向下移动行 Move line up/down</td></tr><tr><td>Shift+Alt + ↓ / ↑</td><td>向上/向下复制行 Copy line up/down</td></tr><tr><td>Ctrl+Shift+K</td><td>删除行 Delete line</td></tr><tr><td>Ctrl+Enter</td><td>在下面插入行 Insert line below</td></tr><tr><td>Ctrl+Shift+Enter</td><td>在上面插入行 Insert line above</td></tr><tr><td>Ctrl+Shift+\</td><td>跳到匹配的括号 Jump to matching bracket</td></tr><tr><td>Ctrl+] / [</td><td>缩进/缩进行 Indent/outdent line</td></tr><tr><td>Home</td><td>转到行首 Go to beginning of line</td></tr><tr><td>End</td><td>转到行尾 Go to end of line</td></tr><tr><td>Ctrl+Home</td><td>转到文件开头 Go to beginning of file</td></tr><tr><td>Ctrl+End</td><td>转到文件末尾 Go to end of file</td></tr><tr><td>Ctrl+↑ / ↓</td><td>向上/向下滚动行 Scroll line up/down</td></tr><tr><td>Alt+PgUp / PgDown</td><td>向上/向下滚动页面 Scroll page up/down</td></tr><tr><td>Ctrl+Shift+[</td><td>折叠（折叠）区域 Fold (collapse) region</td></tr><tr><td>Ctrl+Shift+]</td><td>展开（未折叠）区域 Unfold (uncollapse) region</td></tr><tr><td>Ctrl+K Ctrl+[</td><td>折叠（未折叠）所有子区域 Fold (collapse) all subregions</td></tr><tr><td>Ctrl+K Ctrl+]</td><td>展开（未折叠）所有子区域 Unfold (uncollapse) all subregions</td></tr><tr><td>Ctrl+K Ctrl+0</td><td>折叠（折叠）所有区域 Fold (collapse) all regions</td></tr><tr><td>Ctrl+K Ctrl+J</td><td>展开（未折叠）所有区域 Unfold (uncollapse) all regions</td></tr><tr><td>Ctrl+K Ctrl+C</td><td>添加行注释 Add line comment</td></tr><tr><td>Ctrl+K Ctrl+U</td><td>删除行注释 Remove line comment</td></tr><tr><td>Ctrl+/</td><td>切换行注释 Toggle line comment</td></tr><tr><td>Shift+Alt+A</td><td>切换块注释 Toggle block comment</td></tr><tr><td>Alt+Z</td><td>切换换行 Toggle word wrap</td></tr></tbody></table><h3 id="导航-Navigation"><a href="#导航-Navigation" class="headerlink" title="导航 Navigation"></a>导航 Navigation</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl + T</td><td>显示所有符号 Show all Symbols</td></tr><tr><td>Ctrl + G</td><td>转到行… Go to Line…</td></tr><tr><td>Ctrl + P</td><td>转到文件… Go to File…</td></tr><tr><td>Ctrl + Shift + O</td><td>转到符号… Go to Symbol…</td></tr><tr><td>Ctrl + Shift + M</td><td>显示问题面板 Show Problems panel</td></tr><tr><td>F8</td><td>转到下一个错误或警告 Go to next error or warning</td></tr><tr><td>Shift + F8</td><td>转到上一个错误或警告 Go to previous error or warning</td></tr><tr><td>Ctrl + Shift + Tab</td><td>导航编辑器组历史记录 Navigate editor group history</td></tr><tr><td>Alt + ←/→</td><td>返回/前进 Go back / forward</td></tr><tr><td>Ctrl + M</td><td>切换选项卡移动焦点 Toggle Tab moves focus</td></tr></tbody></table><h3 id="搜索和替换-Search-and-replace"><a href="#搜索和替换-Search-and-replace" class="headerlink" title="搜索和替换 Search and replace"></a>搜索和替换 Search and replace</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl + F</td><td>查找 Find</td></tr><tr><td>Ctrl + H</td><td>替换 Replace</td></tr><tr><td>F3 / Shift + F3</td><td>查找下一个/上一个 Find next/previous</td></tr><tr><td>Alt + Enter</td><td>选择查找匹配的所有出现 Select all occurences of Find match</td></tr><tr><td>Ctrl + D</td><td>将选择添加到下一个查找匹配 Add selection to next Find match</td></tr><tr><td>Ctrl + K Ctrl + D</td><td>将最后一个选择移至下一个查找匹配项 Move last selection to next Find match</td></tr><tr><td>Alt + C / R / W</td><td>切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word</td></tr></tbody></table><h3 id="多光标和选择-Multi-cursor-and-selection"><a href="#多光标和选择-Multi-cursor-and-selection" class="headerlink" title="多光标和选择 Multi-cursor and selection"></a>多光标和选择 Multi-cursor and selection</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Alt +单击</td><td>插入光标 Insert cursor</td></tr><tr><td>Ctrl + Alt +↑/↓</td><td>在上/下插入光标 Insert cursor above / below</td></tr><tr><td>Ctrl + U</td><td>撤消上一个光标操作 Undo last cursor operation</td></tr><tr><td>Shift + Alt + I</td><td>在选定的每一行的末尾插入光标 Insert cursor at end of each line selected</td></tr><tr><td>Ctrl + I</td><td>选择当前行 Select current line</td></tr><tr><td>Ctrl + Shift + L</td><td>选择当前选择的所有出现 Select all occurrences of current selection</td></tr><tr><td>Ctrl + F2</td><td>选择当前字的所有出现 Select all occurrences of current word</td></tr><tr><td>Shift + Alt + →</td><td>展开选择 Expand selection</td></tr><tr><td>Shift + Alt + ←</td><td>缩小选择 Shrink selection</td></tr><tr><td>Shift + Alt + （拖动鼠标）</td><td>列（框）选择 Column (box) selection</td></tr><tr><td>Ctrl + Shift + Alt +（箭头键）</td><td>列（框）选择 Column (box) selection</td></tr><tr><td>Ctrl + Shift + Alt + PgUp / PgDown</td><td>列（框）选择页上/下 Column (box) selection page up/down</td></tr></tbody></table><h3 id="丰富的语言编辑-Rich-languages-editing"><a href="#丰富的语言编辑-Rich-languages-editing" class="headerlink" title="丰富的语言编辑 Rich languages editing"></a>丰富的语言编辑 Rich languages editing</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl + 空格</td><td>触发建议 Trigger suggestion</td></tr><tr><td>Ctrl + Shift + Space</td><td>触发器参数提示 Trigger parameter hints</td></tr><tr><td>Tab</td><td>Emmet 展开缩写 Emmet expand abbreviation</td></tr><tr><td>Shift + Alt + F</td><td>格式化文档 Format document</td></tr><tr><td>Ctrl + K Ctrl + F</td><td>格式选定区域 Format selection</td></tr><tr><td>F12</td><td>转到定义 Go to Definition</td></tr><tr><td>Alt + F12</td><td>Peek定义 Peek Definition</td></tr><tr><td>Ctrl + K F12</td><td>打开定义到边 Open Definition to the side</td></tr><tr><td>Ctrl + .</td><td>快速解决 Quick Fix</td></tr><tr><td>Shift + F12</td><td>显示引用 Show References</td></tr><tr><td>F2</td><td>重命名符号 Rename Symbol</td></tr><tr><td>Ctrl + Shift + . /，</td><td>替换为下一个/上一个值 Replace with next/previous value</td></tr><tr><td>Ctrl + K Ctrl + X</td><td>修剪尾随空格 Trim trailing whitespace</td></tr><tr><td>Ctrl + K M</td><td>更改文件语言 Change file language</td></tr></tbody></table><h3 id="编辑器管理-Editor-management"><a href="#编辑器管理-Editor-management" class="headerlink" title="编辑器管理 Editor management"></a>编辑器管理 Editor management</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl+F4, Ctrl+W</td><td>关闭编辑器 Close editor</td></tr><tr><td>Ctrl+K F</td><td>关闭文件夹 Close folder</td></tr><tr><td>Ctrl+\</td><td>拆分编辑器 Split editor</td></tr><tr><td>Ctrl+ 1 / 2 / 3</td><td>聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group</td></tr><tr><td>Ctrl+K Ctrl+ ←/→</td><td>聚焦到上一个/下一个编辑器组 Focus into previous/next editor group</td></tr><tr><td>Ctrl+Shift+PgUp / PgDown</td><td>向左/向右移动编辑器 Move editor left/right</td></tr><tr><td>Ctrl+K ← / →</td><td>移动活动编辑器组 Move active editor group</td></tr></tbody></table><h3 id="文件管理-File-management"><a href="#文件管理-File-management" class="headerlink" title="文件管理 File management"></a>文件管理 File management</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl+N</td><td>新文件 New File</td></tr><tr><td>Ctrl+O</td><td>打开文件… Open File…</td></tr><tr><td>Ctrl+S</td><td>保存 Save</td></tr><tr><td>Ctrl+Shift+S</td><td>另存为… Save As…</td></tr><tr><td>Ctrl+K S</td><td>全部保存 Save All</td></tr><tr><td>Ctrl+F4</td><td>关闭 Close</td></tr><tr><td>Ctrl+K Ctrl+W</td><td>关闭所有 Close All</td></tr><tr><td>Ctrl+Shift+T</td><td>重新打开关闭的编辑器 Reopen closed editor</td></tr><tr><td>Ctrl+K</td><td>输入保持打开 Enter Keep Open</td></tr><tr><td>Ctrl+Tab</td><td>打开下一个 Open next</td></tr><tr><td>Ctrl+Shift+Tab</td><td>打开上一个 Open previous</td></tr><tr><td>Ctrl+K P</td><td>复制活动文件的路径 Copy path of active file</td></tr><tr><td>Ctrl+K R</td><td>显示资源管理器中的活动文件 Reveal active file in Explorer</td></tr><tr><td>Ctrl+K O</td><td>显示新窗口/实例中的活动文件 Show active file in new window/instance</td></tr></tbody></table><h3 id="显示-Display"><a href="#显示-Display" class="headerlink" title="显示 Display"></a>显示 Display</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>F11</td><td>切换全屏 Toggle full screen</td></tr><tr><td>Shift+Alt+1</td><td>切换编辑器布局 Toggle editor layout</td></tr><tr><td>Ctrl+ = / -</td><td>放大/缩小 Zoom in/out</td></tr><tr><td>Ctrl+B</td><td>切换侧栏可见性 Toggle Sidebar visibility</td></tr><tr><td>Ctrl+Shift+E</td><td>显示浏览器/切换焦点 Show Explorer / Toggle focus</td></tr><tr><td>Ctrl+Shift+F</td><td>显示搜索 Show Search</td></tr><tr><td>Ctrl+Shift+G</td><td>显示Git Show Git</td></tr><tr><td>Ctrl+Shift+D</td><td>显示调试 Show Debug</td></tr><tr><td>Ctrl+Shift+X</td><td>显示扩展 Show Extensions</td></tr><tr><td>Ctrl+Shift+H</td><td>替换文件 Replace in files</td></tr><tr><td>Ctrl+Shift+J</td><td>切换搜索详细信息 Toggle Search details</td></tr><tr><td>Ctrl+Shift+C</td><td>打开新命令提示符/终端 Open new command prompt/terminal</td></tr><tr><td>Ctrl+Shift+U</td><td>显示输出面板 Show Output panel</td></tr><tr><td>Ctrl+Shift+V</td><td>切换Markdown预览 Toggle Markdown preview</td></tr><tr><td>Ctrl+K V</td><td>从旁边打开Markdown预览 Open Markdown preview to the side</td></tr></tbody></table><h3 id="调试-Debug"><a href="#调试-Debug" class="headerlink" title="调试 Debug"></a>调试 Debug</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>F9</td><td>切换断点 Toggle breakpoint</td></tr><tr><td>F5</td><td>开始/继续 Start/Continue</td></tr><tr><td>Shift+F5</td><td>停止 Stop</td></tr><tr><td>F11 / Shift+F11</td><td>下一步/上一步 Step into/out</td></tr><tr><td>F10</td><td>跳过 Step over</td></tr><tr><td>Ctrl+K Ctrl+I</td><td>显示悬停 Show hover</td></tr></tbody></table><h3 id="集成终端-Integrated-terminal"><a href="#集成终端-Integrated-terminal" class="headerlink" title="集成终端 Integrated terminal"></a>集成终端 Integrated terminal</h3><table><thead><tr><th>按 Press</th><th>功能 Function</th></tr></thead><tbody><tr><td>Ctrl+`</td><td>显示集成终端 Show integrated terminal</td></tr><tr><td>Ctrl+Shift+`</td><td>创建新终端 Create new terminal</td></tr><tr><td>Ctrl+Shift+C</td><td>复制选定 Copy selection</td></tr><tr><td>Ctrl+Shift+V</td><td>粘贴到活动端子 Paste into active terminal</td></tr><tr><td>Ctrl+↑ / ↓</td><td>向上/向下滚动 Scroll up/down</td></tr><tr><td>Shift+PgUp / PgDown</td><td>向上/向下滚动页面 Scroll page up/down</td></tr><tr><td>Ctrl+Home / End</td><td>滚动到顶部/底部 Scroll to top/bottom</td></tr></tbody></table>]]></content>
<categories>
<category> 编辑器 </category>
</categories>
<tags>
<tag> 编辑器 </tag>
</tags>
</entry>
<entry>
<title>浅谈Ajax</title>
<link href="/2017/09/04/%E6%B5%85%E8%B0%88Ajax/"/>
<url>/2017/09/04/%E6%B5%85%E8%B0%88Ajax/</url>
<content type="html"><![CDATA[<p><strong>文章目录</strong></p><p>[TOC]</p><h2 id="Ajax概述"><a href="#Ajax概述" class="headerlink" title="Ajax概述"></a>Ajax概述</h2><ul><li>术语ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。</li></ul><h2 id="同步和异步概念分析"><a href="#同步和异步概念分析" class="headerlink" title="同步和异步概念分析"></a>同步和异步概念分析</h2><ul><li>生活中同步与异步<ul><li>买水例子：<ul><li>同步：<ul><li>上课—->暂停—–>买水—–>继续</li></ul></li><li>异步：<ul><li>我上课—->我继续上课</li><li>找一个人去买 ，买完以后送来</li></ul></li></ul></li></ul></li><li>浏览器与服务器交互的同步与异步<ul><li>异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。</li><li>XMLHttpRequest可以以异步方式的处理程序</li></ul></li></ul><h2 id="XMLHttpRequest"><a href="#XMLHttpRequest" class="headerlink" title="XMLHttpRequest"></a>XMLHttpRequest</h2><ul><li><p>浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。</p><figure class="highlight php"><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"><span class="comment">// 1、创建XMLHttpRequest对象</span></span><br><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"><span class="comment">// 2、设置参数</span></span><br><span class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'./index.php'</span>,<span class="keyword">true</span>);</span><br><span class="line"><span class="comment">// 3、指定回调函数</span></span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span><br><span class="line"> <span class="comment">//5、判断响应</span></span><br><span class="line"> <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span>){</span><br><span class="line"> <span class="keyword">if</span>(xhr.status == <span class="number">200</span>){</span><br><span class="line"> <span class="comment">// 获取响应数据</span></span><br><span class="line"> <span class="keyword">var</span> data = xhr.responseText;</span><br><span class="line"> <span class="keyword">var</span> info = document.getElementById(<span class="string">'info'</span>);</span><br><span class="line"> <span class="keyword">if</span>(data == <span class="string">'1'</span>){</span><br><span class="line"> info.innerHTML = <span class="string">'成功'</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(data == <span class="string">'2'</span>){</span><br><span class="line"> info.innerHTML = <span class="string">'失败'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 4、发送请求</span></span><br><span class="line">xhr.send(<span class="keyword">null</span>);</span><br></pre></td></tr></table></figure></li><li><p>步骤：</p><ul><li><p>1.0 创建对象</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br></pre></td></tr></table></figure></li><li><p>2.0 设置参数</p><figure class="highlight php"><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="comment">//get 请求</span></span><br><span class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'./index.php'</span>,<span class="keyword">true</span>);</span><br><span class="line"><span class="comment">//post 请求</span></span><br><span class="line">xhr.open(<span class="string">'post'</span>,<span class="string">'./index.php'</span>,<span class="keyword">true</span>);</span><br></pre></td></tr></table></figure><ul><li>参数传递：<ul><li>get：直接放在url后面即可</li><li>post：通过send方法来传递</li></ul></li></ul></li><li><p>3.0 设置回调函数</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{}</span><br></pre></td></tr></table></figure><ul><li>onreadystatechange为 readstate 属性状态改变时执行</li><li>readstate 属性有五个状态：<ul><li>xhr.readyState = 0时，（未初始化）还没有调用send()方法</li><li>xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求</li><li>xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容</li><li>xhr.readyState = 3时，（交互）正在解析响应内容</li><li>xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了</li><li>了解即可 </li></ul></li></ul></li><li><p>4.0 发送请求</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xhr.send(<span class="keyword">null</span>);</span><br></pre></td></tr></table></figure><ul><li><p>post方式时，可以在send后面带参数</p></li><li><p>参数形式：key1=value1&key2=value2;</p></li><li><p>如果要后台接收到，还必须加上：</p><figure class="highlight javascript"><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"><span class="comment">//post请求时如果要传递参数需要带上</span></span><br><span class="line">xhr.setRequestHeader(<span class="string">"Content-Type"</span>,<span class="string">"application/x-www-form-urlencoded"</span>);</span><br></pre></td></tr></table></figure></li></ul></li><li><p>5.0 判断响应</p><ul><li>当响应状态为200时，才需要执行回调函数</li></ul></li></ul></li></ul><h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><ul><li>登录验证功能</li></ul><h2 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h2><ul><li><p>即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。</p></li><li><p>它是javascript对象的一种字符串的表现形式</p><figure class="highlight javascript"><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="comment">//表示对象</span></span><br><span class="line">{<span class="string">"name"</span>:<span class="string">"jack"</span>,<span class="string">"age"</span>:<span class="string">"18"</span>,<span class="string">"gender"</span>:<span class="string">"男"</span>}</span><br><span class="line"><span class="comment">//表示数组</span></span><br><span class="line">[{<span class="string">"name"</span>:<span class="string">"jack"</span>,<span class="string">"age"</span>:<span class="string">"18"</span>,<span class="string">"gender"</span>:<span class="string">"男"</span>},{<span class="string">"name"</span>:<span class="string">"rose"</span>,<span class="string">"age"</span>:<span class="string">"18"</span>,<span class="string">"gender"</span>:<span class="string">"女"</span>}]</span><br></pre></td></tr></table></figure></li><li><h3 id="语法规则"><a href="#语法规则" class="headerlink" title="语法规则"></a>语法规则</h3><ul><li>1、数据在键/值对中</li><li>2、数据由逗号分隔(最后一个健/值对不能带逗号)</li><li>3、花括号保存对象方括号保存数组</li><li>4、使用双引号</li><li>5、在json里面不能写注释</li></ul></li><li><h2 id="JSON解析"><a href="#JSON解析" class="headerlink" title="JSON解析"></a>JSON解析</h2><ul><li><p>JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取</p></li><li><p>Javascript 解析方法</p><ul><li><p>eval()</p><ul><li><p>如果转换JSON数组的字符串可以直接转换</p><figure class="highlight js"><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"><span class="keyword">var</span> a = <span class="string">"[1,2,3,4,5]"</span>;</span><br><span class="line"><span class="built_in">eval</span>(a)</span><br></pre></td></tr></table></figure><p></p></li><li><p>如果将JSON对象的字符串转为对象,注意,需要将对象首尾加上“（）”，才能转换成功，否则eval会将大括号识别为JavaScript代码块的开始和结束标记</p><figure class="highlight js"><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"><span class="keyword">var</span> json=<span class="string">'{"name":"CJ","age":18}'</span>;</span><br><span class="line"><span class="built_in">eval</span>(<span class="string">"("</span>+json+<span class="string">")"</span>)<span class="comment">//即可将json对象的字符串转为对象</span></span><br></pre></td></tr></table></figure><ul><li><p></p><p></p></li></ul></li><li><p>eval可以解析并执行js代码：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">eval</span>(<span class="string">'alert("abc");'</span>);</span><br></pre></td></tr></table></figure></li></ul></li><li><p>JSON对象 </p><ul><li>JSON.parse()：将JSON格式的字符串转为JSON对象</li><li>JSON.stringify()：将JSON对象转为JSON格式的字符串</li></ul></li></ul></li><li><p>PHP解析方法</p><ul><li>json_encode()：将对象转为JSON格式的字符串</li><li>json_decode()：将JSON格式的字符串转为对象<ul><li>转为对象的类型是 stdClass，这类似于一个没有名字的类型，将来将字符串转换以后会得到这个类型的对象，可以通过这个对象最出其中的属性。</li></ul></li></ul></li></ul></li><li><p>总结：JSON体积小、解析方便且高效，在实际开发成为首选。</p></li></ul><h2 id="函数封装"><a href="#函数封装" class="headerlink" title="函数封装"></a>函数封装</h2><figure class="highlight javascript"><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"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">url,type,param,dataType,callback</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> xhr = <span class="literal">null</span>;</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">window</span>.XMLHttpRequest){</span><br><span class="line"> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> xhr = <span class="keyword">new</span> ActiveXObject(<span class="string">'Microsoft.XMLHTTP'</span>);<span class="comment">//兼容IE6以下版本</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(type == <span class="string">'get'</span>){</span><br><span class="line"> url += <span class="string">"?"</span> + param;</span><br><span class="line"> }</span><br><span class="line"> xhr.open(type,url,<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> data = <span class="literal">null</span>;</span><br><span class="line"> <span class="keyword">if</span>(type == <span class="string">'post'</span>){</span><br><span class="line"> data = param;</span><br><span class="line"> <span class="comment">//如果请求方式为post则需要给其设置一个请求头部</span></span><br><span class="line"> xhr.setRequestHeader(<span class="string">"Content-Type"</span>,<span class="string">"application/x-www-form-urlencoded"</span>)</span><br><span class="line"> }</span><br><span class="line"> xhr.send(data);</span><br><span class="line"> xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span> && xhr.status == <span class="number">200</span>){</span><br><span class="line"> <span class="keyword">var</span> data = xhr.responseText;</span><br><span class="line"> <span class="keyword">if</span>(dataType == <span class="string">'json'</span>){</span><br><span class="line"> data = <span class="built_in">JSON</span>.parse(data);</span><br><span class="line"> }</span><br><span class="line"> callback(data);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="jQuery的Ajax相关api"><a href="#jQuery的Ajax相关api" class="headerlink" title="jQuery的Ajax相关api"></a>jQuery的Ajax相关api</h2><ul><li>$.ajax()</li><li>$.get()</li><li>$.post()</li><li>$.load()</li><li>$.serialize()</li></ul><h2 id="同源与跨域"><a href="#同源与跨域" class="headerlink" title="同源与跨域"></a>同源与跨域</h2><ul><li>基本概念<ul><li>同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域</li><li>同源策略主要为了保证浏览器的安全性</li><li>在同源策略下，浏览器不允许Ajax跨域获取服务器数据</li></ul></li><li>下列地址是否与该地址同源<a href="http://www.example.com/detail.html" target="_blank" rel="noopener">http://www.example.com/detail.html</a></li></ul><table><thead><tr><th>URL</th><th>描述</th></tr></thead><tbody><tr><td><a href="http://api.example.com/detail.html" target="_blank" rel="noopener">http://api.example.com/detail.html</a></td><td>域名不同</td></tr><tr><td><a href="https://www.example.com/detail.html" target="_blank" rel="noopener">https://www.example.com/detail.html</a></td><td>协议不同</td></tr><tr><td><a href="http://www.example.com:8080/detail.html" target="_blank" rel="noopener">http://www.example.com:8080/detail.html</a></td><td>端口不同</td></tr><tr><td><a href="http://api.example.com:8080/detail.html" target="_blank" rel="noopener">http://api.example.com:8080/detail.html</a></td><td>域名、端口不同</td></tr><tr><td><a href="https://api.example.com/detail.html" target="_blank" rel="noopener">https://api.example.com/detail.html</a></td><td>协议、域名不同</td></tr><tr><td><a href="https://www.example.com:8080/detail.html" target="_blank" rel="noopener">https://www.example.com:8080/detail.html</a></td><td>端口、协议不同</td></tr></tbody></table><ul><li>跨域访问会受到限制：<ul><li>不允许XMLHttpRequest（Ajax）请求</li></ul></li></ul><h2 id="跨域解决方案"><a href="#跨域解决方案" class="headerlink" title="跨域解决方案"></a>跨域解决方案</h2><ul><li>解决方案概述</li><li>jsonp原理分析</li></ul><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hello</span>(<span class="params">data</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(data);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</span><br><span class="line">script.src = <span class="string">'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123'</span>;</span><br><span class="line"><span class="keyword">var</span> head = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'head'</span>)[<span class="number">0</span>];</span><br><span class="line">head.appendChild(script);</span><br></pre></td></tr></table></figure><ul><li>实现jsonp后台接口<ul><li>回调函数名称获取</li><li>返回数据格式分析</li></ul></li></ul><h2 id="JSONP"><a href="#JSONP" class="headerlink" title="JSONP"></a>JSONP</h2><ul><li>JSON with Padding</li></ul><h3 id="原理剖析"><a href="#原理剖析" class="headerlink" title="原理剖析"></a>原理剖析</h3><ul><li><p>其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。</p><ul><li><p>文件后缀并不能代表什么，关建我们要看服务器返回的内容，比如css.php</p><ul><li><p>这时返回的内容为 echo ‘body {background:color}’我们可以通过content-type:text/css来指定浏览器该如何解析，返回的内容</p><figure class="highlight php"><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"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">'Content-Type: text/css; charset=utf-8'</span>);</span><br><span class="line">$color = $_GET[<span class="string">'color'</span>];</span><br><span class="line"><span class="keyword">echo</span> <span class="string">'body {background: '</span> . $color . <span class="string">'}'</span>;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure></li></ul></li></ul></li><li><p>同样我们也可以js文件以.php结尾，比如js.php 这时我们可以指定Content-Type: text/javascript可告知浏览器要以javascript来执行我们返回的内容，如果返回的是一个javascript的一个函数调用，那么在这个函数调用过程中可以将跨域请求来的数据以“实参”的传递过来，并且这个实参一般是JSON格式的</p><figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><?php</span></span><br><span class="line">$arr = <span class="keyword">array</span>(</span><br><span class="line"><span class="string">"name"</span>=><span class="string">"itcast"</span>,</span><br><span class="line"><span class="string">"age"</span>=><span class="number">10</span></span><br><span class="line">);</span><br><span class="line">$json = json_encode($arr);</span><br><span class="line">$callback = $_GET[<span class="string">'callback'</span>]; <span class="comment">// jsonp</span></span><br><span class="line"><span class="keyword">echo</span> $callback . <span class="string">'('</span> . $json . <span class="string">')'</span>;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure><p></p></li><li><p>结合html标签src具有跨域访问的特性和Content-Type指定文档类型两个方面，可以实现跨域的数据访问。</p><figure class="highlight php"><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"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">'Content-Type: text/javascript; charset=utf-8'</span>);</span><br><span class="line">$callback = $_GET[<span class="string">'callback'</span>]; </span><br><span class="line">$arr = <span class="keyword">array</span>(</span><br><span class="line"><span class="string">"name"</span>=><span class="string">"itcast"</span>,</span><br><span class="line"><span class="string">"age"</span>=><span class="number">10</span></span><br><span class="line">);</span><br><span class="line">$json = json_encode($arr);</span><br><span class="line"><span class="keyword">echo</span> $callback . <span class="string">'('</span> . $json . <span class="string">')'</span>; <span class="comment">// fn({"name": "itcast", "age": 10})</span></span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure><p></p></li><li><p>JSONP其本质就是服务端返回了一个Javascript的一个函数调用，而这个函数已经提前被定义了。</p></li></ul>]]></content>
<tags>
<tag> Ajax </tag>
</tags>
</entry>
<entry>
<title>网站favicon图标查看、制作及使用方法总结</title>
<link href="/2017/07/08/%E7%BD%91%E7%AB%99favicon%E5%9B%BE%E6%A0%87%E6%9F%A5%E7%9C%8B%E3%80%81%E5%88%B6%E4%BD%9C%E5%8F%8A%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/"/>
<url>/2017/07/08/%E7%BD%91%E7%AB%99favicon%E5%9B%BE%E6%A0%87%E6%9F%A5%E7%9C%8B%E3%80%81%E5%88%B6%E4%BD%9C%E5%8F%8A%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/</url>
<content type="html"><![CDATA[<p>#目录<br>[TOC]</p><p>###<strong>favicon图标介绍：</strong></p><blockquote><p>收藏夹图标就是出现在浏览器地址栏左侧的那个小图标。收藏夹图标，也作网站头像。当然，这不仅仅是收藏夹图标的全部，根据浏览器的不同，收藏夹图标显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，收藏夹图标不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳收藏夹图标到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的收藏夹图标等</p></blockquote><p>###<strong>favicon查看方法</strong><br>已知网站的地址的时候，一般favicon都是放在网站的根目录，所以直接在网站的根目录下输入 网址/favicon.ico 即可查看该网站的favicon图标，如下图：<br><img src="http://img.blog.csdn.net/20171105220824831?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="favicon的查看方法"></p><p>###<strong>网站 favicon icon制作方法</strong></p><blockquote><p>关于网站icon图标制作，个人比较喜欢在线的favicon icon图标制作网站—-<a href="http://www.bitbug.net/" target="_blank" rel="noopener">比特虫</a>，使用方法里面写的很详细，如下图：<br><img src="http://img.blog.csdn.net/20171105221534974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="比特虫官网"></p></blockquote><p>###<strong>favicon icon图标使用方法</strong><br>当成功生成favicon.ico图像文件后,浏览器会自动弹出一个zip的压缩文件将压缩文件中的favicon.ico图像放在根目录下(也可以是其他目录)<br>在页面源文件的<head></head>标签之间引入，代码如下：<br><figure class="highlight html"><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"css/index.css"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"shortcut icon"</span> <span class="attr">href</span>=<span class="string">"/favicon.ico"</span> /></span></span><br><span class="line"> <span class="comment"><!-- Shortcut Icon 就是在网址列/标题前面出现的Icon --></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></p>]]></content>
</entry>
<entry>
<title>PHP基础语法之文件操作</title>
<link href="/2017/06/12/PHP%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E4%B9%8B%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/"/>
<url>/2017/06/12/PHP%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E4%B9%8B%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C/</url>
<content type="html"><![CDATA[<h2 id="PHP文件操作"><a href="#PHP文件操作" class="headerlink" title="PHP文件操作"></a>PHP文件操作</h2><ul><li><p>fopen: 打开文件或者 URL</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">resource fopen ( string $filename , string $mode [, bool $use_include_path = <span class="keyword">false</span> [, resource $context ]] )</span><br></pre></td></tr></table></figure><p></p></li><li><p>fclose: 关闭一个已打开的文件指针</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bool fclose ( resource $handle )</span><br></pre></td></tr></table></figure></li><li><p>fread: 读取文件（可安全用于二进制文件）</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string fread ( resource $handle , int $length )</span><br></pre></td></tr></table></figure></li><li><p>fwrite: 写入文件（可安全用于二进制文件）</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">int fwrite ( resource $handle , string $string [, int $length ] )</span><br></pre></td></tr></table></figure></li><li><p>file: 把整个文件读入一个数组中</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">array</span> file ( string $filename [, int $flags = <span class="number">0</span> [, resource $context ]] )</span><br></pre></td></tr></table></figure></li><li><p>file_get_contents: 将整个文件读入一个字符串</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string file_get_contents ( string $filename [, bool $use_include_path = <span class="keyword">false</span> [, resource $context [, int $offset = <span class="number">-1</span> [, int $maxlen ]]]] )</span><br></pre></td></tr></table></figure></li><li><p>file_put_contents: 将一个字符串写入文件</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">int file_put_contents ( string $filename , mixed $data [, int $flags = <span class="number">0</span> [, resource $context ]] )</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> php </tag>
</tags>
</entry>
<entry>
<title>PHP进阶</title>
<link href="/2017/06/10/PHP%E8%BF%9B%E9%98%B6/"/>
<url>/2017/06/10/PHP%E8%BF%9B%E9%98%B6/</url>
<content type="html"><![CDATA[<p>[TOC]</p><h2 id="变量作用域"><a href="#变量作用域" class="headerlink" title="变量作用域"></a>变量作用域</h2><ul><li>分类<ul><li>全局作用域：全局变量的作用范围。在函数外部定义的变量，都是全局变量。网页执行完毕，全局变量就消失了。</li><li>局部作用域：局部变量的作用范围。在函数内部定义的变量，就是局部变量。函数执行完毕，局部变量就消失了。</li><li>超全局变量：在网页的任何地方(函数内、函数外)，都能使用的变量</li></ul></li><li>与JS的区别<ul><li>在JS中，全局变量可以直接在函数内部来使用；但是，在PHP中，全局变量不能直接在函数内部使用。</li><li>在PHP中，函数内和函数外是不通的。</li></ul></li></ul><h3 id="在局部作用域中访问全局变量"><a href="#在局部作用域中访问全局变量" class="headerlink" title="在局部作用域中访问全局变量"></a>在局部作用域中访问全局变量</h3><ul><li><p>global 关键字</p><ul><li><p>PHP中全局变量，不能直接在函数中使用；</p></li><li><p>使用global关键字，来实现：将全局变量引入到函数中来用。</p></li><li><p>global在声明为全局变量，不能直接赋值，需要在下一行来赋值；</p></li><li><p>global关键字只能在函数内部来使用。</p></li><li><p>global关键字与JS中的全局变量的功能不一样，可以理解为”引用传值地址”</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line">$name = <span class="string">"jack"</span>;</span><br><span class="line">$age = <span class="number">18</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showInfo</span><span class="params">()</span></span>{</span><br><span class="line"><span class="keyword">global</span> $name;</span><br><span class="line"><span class="keyword">global</span> $age;</span><br><span class="line">$age = <span class="number">30</span>;</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫做{$name},今年{$age}岁了---函数内"</span>;</span><br><span class="line">}</span><br><span class="line">showInfo();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show2</span><span class="params">()</span> </span>{</span><br><span class="line"><span class="keyword">global</span> $name;</span><br><span class="line"><span class="keyword">global</span> $age;</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫做{$name},今年{$age}岁了---函数内"</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"<hr/>"</span>;</span><br><span class="line">show2();</span><br><span class="line"></span><br><span class="line"><span class="keyword">echo</span> <span class="string">"<hr/>"</span>;</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫做{$name},今年{$age}岁了---函数外"</span>;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure></li></ul></li></ul><h3 id="GLOBALS超全局数组变量"><a href="#GLOBALS超全局数组变量" class="headerlink" title="$GLOBALS超全局数组变量"></a>$GLOBALS超全局数组变量</h3><ul><li><p>超全局数组变量：\$_GET、\$_POST、\$_SERVER、\$_REQUEST、\$_FILES、$_COOKIE、\$_SESSION、\$GLOBALS</p></li><li><p>超全局数组变量，可以在网页的任何地方都能使用</p><figure class="highlight php"><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">header(<span class="string">"content-type:text/html;charset=utf-8"</span>);</span><br><span class="line"> $name = <span class="string">"jack"</span>;</span><br><span class="line">$age = <span class="number">18</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showInfo</span><span class="params">()</span></span>{</span><br><span class="line">$name1 = $GLOBALS[<span class="string">'name'</span>];</span><br><span class="line"> $age1 = $GLOBALS[<span class="string">'age'</span>];</span><br><span class="line"> <span class="keyword">echo</span> <span class="string">"我的名字叫做{$name1},今年{$age1}岁了---函数内"</span>;</span><br><span class="line">}</span><br><span class="line">showInfo();</span><br></pre></td></tr></table></figure></li></ul><h2 id="PHP中的构造函数—–类（class）"><a href="#PHP中的构造函数—–类（class）" class="headerlink" title="PHP中的构造函数—–类（class）"></a>PHP中的构造函数—–类（class）</h2><h3 id="概念："><a href="#概念：" class="headerlink" title="概念："></a>概念：</h3><ul><li>在编程中有一种思想：万物皆对象（实实在在存在一个事物）</li><li>在编程中描述事物的一种方式：<ul><li>比如说：要得到一个鼠标类—>先创建一个鼠标类—>再向类中添加鼠标的特征—><ul><li>重量</li><li>价格</li><li>颜色</li><li>型号</li><li>大小</li><li>….</li><li></li></ul></li></ul></li></ul><ul><li>php中为了方便管理对象，会将对象抽象成为一个类似于JS中构造函数的结构—>类</li></ul><h3 id="定义与使用"><a href="#定义与使用" class="headerlink" title="定义与使用"></a>定义与使用</h3><ul><li>关键字：class</li></ul><figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><?php</span></span><br><span class="line"> <span class="class"><span class="keyword">class</span> <span class="title">P</span> </span>{</span><br><span class="line"> <span class="keyword">public</span> $id;</span><br><span class="line"> <span class="keyword">public</span> $name;</span><br><span class="line"> <span class="keyword">public</span> $age;</span><br><span class="line"> }</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure><ul><li>创建类的对象</li></ul><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$p = <span class="keyword">new</span> P();</span><br></pre></td></tr></table></figure><ul><li>给对象中的属性赋值</li></ul><figure class="highlight php"><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">$p->id = <span class="number">12</span>;</span><br><span class="line">$p->name = <span class="string">"jack"</span>;</span><br><span class="line">$p->age = <span class="number">19</span>;</span><br></pre></td></tr></table></figure><ul><li>取值</li></ul><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">echo</span> $p->age;</span><br></pre></td></tr></table></figure><h2 id="PHP服务器端包含"><a href="#PHP服务器端包含" class="headerlink" title="PHP服务器端包含"></a>PHP服务器端包含</h2><ul><li>include：包含文件，当包含的文件不存在，会报警告，脚本会继承执行；</li><li>require：包含文件，当包含的文件不存在，会报错误，脚本立即停止执行；</li><li>include_once：包含文件一次，如果第2次包含不再执行，相当于if判断。其它情况与include一样。</li><li>require_once：包含文件一次，如果第2次包含不再执行，其它情况下require一样。</li></ul><h2 id="HTTP协议"><a href="#HTTP协议" class="headerlink" title="HTTP协议"></a>HTTP协议</h2><h3 id="B-S网络结构"><a href="#B-S网络结构" class="headerlink" title="B/S网络结构"></a>B/S网络结构</h3><ul><li>B/S，Brower/Server(浏览器/服务器)，是当前最流行的网络模式，将所有的功能放在服务器上，客户端只需要一个浏览器软件即可。</li><li>C/S，Client/Server(客户端/服务器)，在这种模式下，客户端电脑必须要安装相应的客户端软件。如：QQ聊天、MySQL客户端/MySQL服务器。</li><li>静态网页和动态网页：文件代码中，是否含有服务器端的脚本语言。如：PHP、Java、ASP、JSP、C#。</li></ul><h3 id="HTTP协议-1"><a href="#HTTP协议-1" class="headerlink" title="HTTP协议"></a>HTTP协议</h3><ul><li>HTTP，HyperText Transfer Protocol，超文本传输协议，是一种网络数据的传递标准。</li><li>HTTP也是请求和响应的一种标准</li></ul><h3 id="HTTP协议之URL"><a href="#HTTP协议之URL" class="headerlink" title="HTTP协议之URL"></a>HTTP协议之URL</h3><ul><li>URL概念：<ul><li>Uniform Resource Locator统一资源定位符，</li><li>统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。</li><li>互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它</li></ul></li><li>URL的构成<ul><li>protocol：网络协议，访问不同资源所采用的规则。<ul><li>如：ftp、http、https、 email、news、telnet</li></ul></li><li>host：资源主机名，可以是IP地址或域名<ul><li>如：<a href="http://www.baidu.com、183.232.231.172" target="_blank" rel="noopener">www.baidu.com、183.232.231.172</a></li></ul></li><li>port：代表主机端口号，<ul><li>如：80，21，25，1080，3306</li></ul></li><li>directory：访问资源所有的目录名称，ergouge/article<ul><li>如：<a href="http://blog.csdn.net/ergouge/article" target="_blank" rel="noopener">http://blog.csdn.net/ergouge/article</a></li></ul></li><li>filename：访问的文件名称，php_superglobals.asp<ul><li>如：<a href="http://www.w3school.com.cn/php/php_superglobals.asp" target="_blank" rel="noopener">http://www.w3school.com.cn/php/php_superglobals.asp</a></li></ul></li><li>?key=value，访问的参数，utm_source=tuicool&utm_medium=referral<ul><li><a href="https://zhuanlan.zhihu.com/p/20782320?utm_source=tuicool&utm_medium=referral" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/20782320?utm_source=tuicool&utm_medium=referral</a></li></ul></li><li>完整的URL：<ul><li>协议名://ip地址（域名）:80/目录/请求的文件的名称?键1=值1&键2=值2</li></ul></li></ul></li></ul><ul><li><p>报文</p><ul><li><p>请求报文</p><ul><li><p>请求报文头</p><ul><li>请求方式 请求的url 协议版本</li></ul><figure class="highlight http"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">GET</span> <span class="string">http://www.a.com/</span> HTTP/1.1</span><br></pre></td></tr></table></figure></li><li><p>请求报文行</p><figure class="highlight http"><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></pre></td><td class="code"><pre><span class="line"><span class="attribute">Host</span>: www.a.com</span><br><span class="line"><span class="attribute">Connection</span>: keep-alive</span><br><span class="line"><span class="attribute">Upgrade-Insecure-Requests</span>: 1</span><br><span class="line"><span class="attribute">User-Agent</span>: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36</span><br><span class="line"><span class="attribute">Accept</span>: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8</span><br><span class="line"><span class="attribute">Accept-Encoding</span>: gzip, deflate</span><br><span class="line"><span class="attribute">Accept-Language</span>: zh-CN,zh;q=0.8</span><br></pre></td></tr></table></figure></li><li><p>固定换行 </p><ul><li>换行 中没有内容，只是用来隔开请求报文行与请求报文体的 </li></ul></li><li><p>请求报文体</p><ul><li>一般为空</li></ul></li></ul></li><li><p>响应报文 </p><ul><li><p>响应报文头</p><ul><li>状态码：<a href="http://blog.csdn.net/windyf2013/article/details/77834714" target="_blank" rel="noopener">http://blog.csdn.net/windyf2013/article/details/77834714</a></li><li>请求的HTTP协议版本 响应的状态码</li></ul><figure class="highlight http"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">HTTP/1.1 <span class="number">200</span> OK</span><br></pre></td></tr></table></figure></li><li><p>响应报文行</p><figure class="highlight http"><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"><span class="attribute">Date</span>: Mon, 18 Sep 2017 20:34:21 GMT</span><br><span class="line"><span class="attribute">Server</span>: Apache/2.2.22 (Win32) PHP/5.3.13</span><br><span class="line"><span class="attribute">Content-Length</span>: 427</span><br><span class="line"><span class="attribute">Keep-Alive</span>: timeout=5, max=100</span><br><span class="line"><span class="attribute">Connection</span>: Keep-Alive</span><br><span class="line"><span class="attribute">Content-Type</span>: text/html;charset=UTF-8</span><br></pre></td></tr></table></figure></li><li><p>固定换行 </p><ul><li>隔开响应报文行和响应报文体</li></ul></li><li><p>响应报文体</p><figure class="highlight"><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></pre></td><td class="code"><pre><span class="line"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"></span><br><span class="line"><html></span><br><span class="line"> <head></span><br><span class="line"> <title>Index of /</title></span><br><span class="line"> </head></span><br><span class="line"> <body></span><br><span class="line"><h1>Index of /</h1></span><br><span class="line"><ul><li><a href="01array.php"> 01array.php</a></li></span><br><span class="line"><li><a href="02abc.php"> 02abc.php</a></li></span><br><span class="line"><li><a href="03.php"> 03.php</a></li></span><br><span class="line"><li><a href="1122.php"> 1122.php</a></li></span><br><span class="line"><li><a href="a.php"> a.php</a></li></span><br><span class="line"><li><a href="%e5%89%af%e6%9c%ac.php"> 副本.php</a></li></span><br><span class="line"></ul></span><br><span class="line"></body></html></span><br></pre></td></tr></table></figure></li></ul></li></ul></li><li><p>报文查看工具：fiddler</p></li></ul><h2 id="HTTP请求方式及PHP中参数的接收方式："><a href="#HTTP请求方式及PHP中参数的接收方式：" class="headerlink" title="HTTP请求方式及PHP中参数的接收方式："></a>HTTP请求方式及PHP中参数的接收方式：</h2><h3 id="请求方式"><a href="#请求方式" class="headerlink" title="请求方式"></a>请求方式</h3><ul><li><p>get</p><ul><li><p>特点：</p><ul><li>将参数放到URL中传递到服务器，</li><li>一般用来从服务器中得到数据</li><li>数据量有限</li><li>数据不安全</li></ul></li><li><p>方式：</p><ul><li>在URL中直接输出参数</li><li>通过a链接请求传递参数</li><li>通过js方式传递参数</li><li>通过表单的get提交参数</li><li>ajax的get请求方式</li></ul></li><li><p>PHP中的接收方式：</p><figure class="highlight php"><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">$name = $_GET[<span class="string">'name'</span>];</span><br><span class="line">$age = $_GET[<span class="string">'age'</span>];</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"{$name},{$age}"</span>;</span><br></pre></td></tr></table></figure></li></ul></li><li><p>post</p><ul><li><p>特点：</p><ul><li>将参数放到请求报文体中传递到服务器，</li><li>一般用来提交数据到服务器中</li><li>传递数据量相比get要大</li><li>数据相对get而言安全</li></ul></li><li><p>方式：</p><ul><li>表单的POST提交</li><li>ajax的post请求方式</li></ul></li><li><p>PHP中的接收方式</p><figure class="highlight php"><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">$name = $_POST[<span class="string">'name'</span>];</span><br><span class="line">$age = $_POST[<span class="string">'age'</span>];</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"{$name},{$age}"</span>;</span><br></pre></td></tr></table></figure></li></ul></li><li><p>$_REQUEST:</p><ul><li>作用：既可以接收GET传递的参数，又可以接收POST传递的参数</li></ul><figure class="highlight php"><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">$name = $_REQUEST[<span class="string">'name'</span>];</span><br><span class="line">$age = $_REQUEST[<span class="string">'age'</span>];</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"{$name},{$age}"</span>;</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> php </tag>
</tags>
</entry>
<entry>
<title>JavaScript中清空数组的三种方式</title>
<link href="/2017/06/08/JavaScript%E4%B8%AD%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F/"/>
<url>/2017/06/08/JavaScript%E4%B8%AD%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F/</url>
<content type="html"><![CDATA[<h3 id="方式1、splice"><a href="#方式1、splice" class="headerlink" title="方式1、splice"></a>方式1、splice</h3><p> 详细说明：<a href="http://www.w3school.com.cn/jsref/jsref_splice.asp" target="_blank" rel="noopener">http://www.w3school.com.cn/jsref/jsref_splice.asp</a></p><h3 id="方式2、length赋值为0"><a href="#方式2、length赋值为0" class="headerlink" title="方式2、length赋值为0"></a><strong>方式2、length赋值为0</strong></h3><p>这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如</p><p>Java中会报错，编译通不过。而JS中则可以，且将数组清空了，</p><p>目前 Prototype中数组的 <a href="http://api.prototypejs.org/language/Array/prototype/clear/" target="_blank" rel="noopener">clear</a> 和mootools库中数组的 <a href="http://mootools.net/docs/core/Types/Array#Array:empty" target="_blank" rel="noopener">empty</a> 使用这种方式清空数组。 </p><h3 id="方式3、赋值为"><a href="#方式3、赋值为" class="headerlink" title="方式3、赋值为[]"></a><strong>方式3、赋值为[]</strong></h3><p>这里其实并不能说是严格意义的清空数组，只是将ary重新赋值为空数组，之前的数组如果没有引用在指向它将等待垃圾回收。</p><p>Ext库Ext.CompositeElementLite类的 <a href="http://www.sencha.com/products/core/docs/source/CompositeElementLite.html#method-Ext.CompositeElementLite-clear" target="_blank" rel="noopener">clear</a> 使用这种方式清空。<br>方式2 保留了数组其它属性，方式3 则未保留。很多人认为方式2的效率很高些，因为仅仅是给length重新赋值了，而方式3则重新建立个对象。经 测试 恰恰是方式3的效率高。测试代码：</p><p>测试结果：</p><p><img src="https://pic002.cnblogs.com/images/2011/114013/2011040413204710.png" alt="img"></p><p>以上结果可看到:<strong>方式3更快，效率更高</strong>。因此如果不保留原数组的其它属性Ext采用的方式更值得推荐。</p><p>原文：<a href="http://www.cnblogs.com/snandy/archive/2011/04/04/2005156.html" target="_blank" rel="noopener">http://www.cnblogs.com/snandy/archive/2011/04/04/2005156.html</a></p><blockquote><p>原文链接：<a href="https://www.cnblogs.com/xcsn/p/4938519.html" target="_blank" rel="noopener">https://www.cnblogs.com/xcsn/p/4938519.html</a></p></blockquote>]]></content>
<tags>
<tag> 转载 </tag>
</tags>
</entry>
<entry>
<title>PHP基础语法</title>
<link href="/2017/06/02/PHP%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/"/>
<url>/2017/06/02/PHP%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/</url>
<content type="html"><![CDATA[<p>[TOC]</p><h2 id="前瞻知识点"><a href="#前瞻知识点" class="headerlink" title="前瞻知识点"></a>前瞻知识点</h2><ul><li>B/S结构的处理流程</li><li>网络基本概念<ul><li>IP</li><li>域名</li><li>DNS<ul><li>网络DNS</li><li>本地DNS</li></ul></li><li>端口</li></ul></li><li>安装WAMP环境<ul><li>W – web, A – Apache , M – MySql ,P – PHP</li></ul></li></ul><h2 id="hello-world"><a href="#hello-world" class="headerlink" title="hello world"></a>hello world</h2><ul><li><p>所有PHP代码都放在标记： <?php …… ?></p></li><li><p>PHP输出方式：echo</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">echo</span> <span class="string">'hello world'</span></span><br></pre></td></tr></table></figure></li><li><p>注释 </p><ul><li>/<em> 多行注释 </em>/<ul><li>多行注释不要嵌套</li></ul></li><li>// 单行注释</li></ul></li><li><p>语句分隔符 “;”</p></li><li><p>PHP文件访问方式</p></li></ul><h2 id="PHP简介"><a href="#PHP简介" class="headerlink" title="PHP简介"></a>PHP简介</h2><ul><li>PHP Hypertext Preprocessor 超文本预处理器，是嵌入到HTML文件中的服务器端的脚本语言；</li><li>一个PHP文件中，可以包含多种代码：HTML、CSS、JS、Jquery、PHP、MySQL等</li><li>PHP的语法，与C、Java、Python、JS语法比较相似；</li><li>PHP是服务器端的脚本语言，脚本语言相对编程语言来说，要简单的多。</li><li>PHP程序只能运行在服务器端，在客户端看不见PHP任何代码；</li><li>PHP文件的扩展名是以.php为后缀的。</li></ul><h2 id="语言基础"><a href="#语言基础" class="headerlink" title="语言基础"></a>语言基础</h2><ul><li>PHP与ASP、JSP一样，都是嵌入到HTML文件中的服务器端的脚本语言；</li><li>PHP文件的后缀是.php</li><li>PHP代码的标记：<?php …… ?></li><li>PHP中每行程序代码，必须以英文下的分号结束；</li></ul><h2 id="输出时间"><a href="#输出时间" class="headerlink" title="输出时间"></a>输出时间</h2><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">echo</span> date(<span class="string">'Y-m-d H:i:s'</span>);</span><br></pre></td></tr></table></figure><ul><li><p>默认情况下PHP输出的时间是格林威治时间，比中国时区晚8个小时</p></li><li><p>解决方案：</p><ul><li><p>1.0 找到PHP的配置文件 php.ini</p></li><li><p>2.0 定位到 date.timezone</p></li><li><p>3.0 设置中国时区</p><figure class="highlight php"><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">; PRC为中华人民共和国</span><br><span class="line">date.timezone = PRC</span><br></pre></td></tr></table></figure><p></p></li></ul></li></ul><h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><h3 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h3><ul><li>变量是临时存储数据的容器；</li><li>变量是存储在内存当中；</li><li>网页执行完毕后，网页中相关的变量全部消失。</li></ul><h3 id="变量命名规则"><a href="#变量命名规则" class="headerlink" title="变量命名规则"></a>变量命名规则</h3><ul><li>变量名称只能包含：字母、数字、下划线</li><li>PHP中的变量名必须以 “\$” 符号开头，但是”\$”符号不属于变量的一部分，将来不管是赋值还是取值，都必须加上”\$”</li><li>变量名区分大小写</li><li>PHP中的变量使用不需要声明，直接赋值使用</li><li>常用的两种命名方法：<ul><li>驼峰命名法<ul><li>第一个单词的首字母小写，其余单词的首字母全部大写</li><li>如：userName，userId</li></ul></li><li>帕斯卡命名法：<ul><li>与驼峰命名法很像</li><li>唯一区别是它的首字母是大写</li><li>如：UserName,UserId</li></ul></li><li>下划线命名法<ul><li>所以的单词首字都小写，由下划线连接</li><li>如：user_name，user_id</li></ul></li></ul></li></ul><h3 id="变量的声明与赋值"><a href="#变量的声明与赋值" class="headerlink" title="变量的声明与赋值"></a>变量的声明与赋值</h3><ul><li>声明<ul><li>PHP中变量不需要声明，但是每个变量必须以$开</li></ul></li><li>赋值：<ul><li>直接给带有$的变量赋值</li><li>使用“=”，赋值运算符给变量赋值，“=”读作赋值运算符</li><li>赋值运算符的左边只能是一个变量名</li><li>如：$userName = “张三”;</li></ul></li></ul><h3 id="变量值的读取"><a href="#变量值的读取" class="headerlink" title="变量值的读取"></a>变量值的读取</h3><ul><li><p>变量的数据类型由其中的内容决定</p></li><li><p>直接以 “$+变量名”的方式 取得可以取得变量的值</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$userName = <span class="string">"admin"</span>;</span><br></pre></td></tr></table></figure></li><li><p>可以使用“.”来连接将变量与字符串一起输出</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫"</span>.$userName</span><br></pre></td></tr></table></figure></li><li><p>也可以在字符串的内部直接使用变量</p><ul><li>在PHP中“.”点表示相连</li><li>在PHP中“+”加表示相加（是一种算术运算符）</li></ul><figure class="highlight php"><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"><span class="keyword">echo</span> <span class="string">"我的名字叫做$userName"</span></span><br><span class="line">但是，如果用引号时，变量后面还有其它的有文字，就不能解析了如</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫做$userName很高兴见到大家"</span></span><br><span class="line">这里就无法解析，需要在变量后面添加一个非空特殊字符，如：</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我的名字叫做{$userNmae}很高兴见到大家"</span></span><br><span class="line">如果输出字符是单引号，则无法解析字符串</span><br></pre></td></tr></table></figure></li></ul><h3 id="变量相关函数"><a href="#变量相关函数" class="headerlink" title="变量相关函数"></a>变量相关函数</h3><ul><li><p>header():设置服务器返回到浏览器的数据的类型</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">'content-type:text/html;charset=utf-8'</span>);</span><br></pre></td></tr></table></figure></li><li><p>isset() 判断变量是否存在</p><ul><li>可以用来判断变量是否定义，或者是否为null</li></ul></li><li><p>empty() 判断变量是否为空</p><ul><li>如果 <code>var</code> 是非空或非零的值，则 empty() 返回 FALSE</li><li><em>“”</em>、<em>0</em>、<em>“0”</em>、<strong>NULL</strong>、<strong>FALSE</strong>、<em>array()</em>、<em>var $var;</em> 以及没有任何属性的对象都将被认为是空的,也就意味着，如果上述的数据用empty来判断返回的结果都为true</li></ul></li><li><p>unset() 删除变量</p><ul><li><p>可以通过这个函数删除一个已经存在的变量，删除之后变量为null</p></li><li><p>可以同步删除多个变量</p></li><li><p>如果在函数中 <strong>unset()</strong> 一个全局变量，则只是局部变量被销毁，而在调用环境中的变量将保持调用 <strong>unset()</strong> 之前一样的值。(这个当我们学了全局变量与局部变量以后再说)</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">unset</span>($a,$b,$c)</span><br></pre></td></tr></table></figure></li></ul></li><li><p>var_dump() 显示变量的类型和值</p><ul><li>可以同时打印多个变量</li></ul></li><li><p>print_r() 显示数组的元素信息</p><ul><li>如果是字符串，数字，boolean值，会原样输出</li><li>如果是数组，会详细打印数组信息</li></ul></li></ul><h3 id="可变变量"><a href="#可变变量" class="headerlink" title="可变变量"></a>可变变量</h3><ul><li><p>指一个变量的名称，由另一个变量的值来充当</p><figure class="highlight php"><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">$a = <span class="string">"b"</span>;</span><br><span class="line">$b = <span class="string">"c"</span>;</span><br><span class="line"><span class="keyword">echo</span> $b;<span class="comment">//输出 c</span></span><br><span class="line"><span class="keyword">echo</span> $$a;<span class="comment">//输出 c</span></span><br></pre></td></tr></table></figure></li><li><p>如果使用可变变量，一定要加上给可变变量的变量名加上{}作为定界符</p></li></ul><h3 id="变量的值传递和引用传递"><a href="#变量的值传递和引用传递" class="headerlink" title="变量的值传递和引用传递"></a>变量的值传递和引用传递</h3><ul><li><p>JS中的基本数据类型(只有一个值)：字符串型、数值型、布尔型、undefined、null</p></li><li><p>JS中的复合数据类型(多个值)：数组(Array)、对象(Object)、函数(Function)</p></li><li><p>值传递：</p><ul><li>传递的是变量中保存的值</li></ul></li><li><p>引用传递</p><ul><li>传递的是变量保存的引用地址</li></ul></li><li><p>在PHP中可以使用 & 符号将值传递的变量改变为引用传递：如</p><figure class="highlight php"><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">$a = <span class="string">"abc"</span>;</span><br><span class="line">$b = &$a;</span><br><span class="line">$a = <span class="string">"123"</span>;</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"$a<br/>$b"</span></span><br></pre></td></tr></table></figure></li></ul><h2 id="常量"><a href="#常量" class="headerlink" title="常量"></a>常量</h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><ul><li>常量就是值永远不变的量，即：一旦赋值无法删除，修改。</li><li>由于变量在使用时还需要去它存储的地址中去找到对应的数据，相比变量来说，常量的速度要快。</li></ul><h3 id="命名规则"><a href="#命名规则" class="headerlink" title="命名规则"></a>命名规则</h3><ul><li>与变量基本一致<ul><li>变量名称只能包含：字母、数字、下划线，常量也是</li><li>PHP中的常量不需要使用$符号开头</li><li>常量名区分大小写，一般建议使用时尽量用大写，为了与变量区分开</li><li>常用的两种命名方法：<ul><li>驼峰命名法<ul><li>第一个单词的首字母小写，其余单词的首字母全部大写</li><li>如：uerName，userId</li></ul></li><li>下划线命名法<ul><li>所以的单词首字都小写，由下划线连接</li><li>如：user_name，user_id</li></ul></li></ul></li></ul></li></ul><h3 id="常量定义define"><a href="#常量定义define" class="headerlink" title="常量定义define()"></a>常量定义define()</h3><ul><li><p>语法： bool define ( string $name , mixed $value [, bool $case_insensitive = false ] )</p></li><li><p>案子：通过define关键来定义</p><figure class="highlight php"><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">define(<span class="string">'TITLE'</span>,<span class="string">"中华人民共和国"</span>);<span class="comment">//定义常量TITLE</span></span><br><span class="line">define(<span class="string">'TITLE'</span>,<span class="string">"中华人民共和国"</span>,<span class="keyword">true</span>);<span class="comment">//加上true，使用时既可以使用TITLE,又可以使用小写title，来使用常量</span></span><br><span class="line">define(<span class="string">'TITLE'</span>,<span class="string">"中华人民共和国"</span>,<span class="keyword">false</span>);<span class="comment">//加上false，使用时必须使用TITLE</span></span><br></pre></td></tr></table></figure></li></ul><p>判断是否是常量：defined()</p><ul><li><p>语法： bool defined ( string $name )</p></li><li><p>defined()可以判断常量</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defined(“TITLE”);<span class="comment">//通过defined判断常量时，常量一定要加上引号</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="魔术常量"><a href="#魔术常量" class="headerlink" title="魔术常量"></a>魔术常量</h3><ul><li>量的值在程序运行过程中不会改变。但是，魔术常量的值，会随着所在位置的不同而改变。</li><li>魔术常量都由系统定义好的，我们直接使用就好了，常用的有：<ul><li>__LINE__:得到当前代码的行号</li><li>__FILE__:得到当前文件的路径</li><li>__DIR__:得到当前文件所在目录</li><li>__FUNCTION__:得到所在函数</li></ul></li></ul><h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><ul><li><p>数据类型分类</p><figure class="highlight php"><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">js中的数据类型：</span><br><span class="line">简单数据类型：</span><br><span class="line">Number,string,bool,undefined</span><br><span class="line"> 复杂数据类型</span><br><span class="line">数组，对象，<span class="keyword">null</span></span><br></pre></td></tr></table></figure><ul><li>基本数据类型：字符串型(string)、整型(int)、浮点型(float：小数)、布尔型(bool)</li><li>复合数据类型：数组、对象</li><li>特殊数据类型：资源、NULL</li></ul></li><li><p>数据类型判断</p><ul><li><p>is_bool()，判断变量是不是布尔型</p></li><li><p>is_int()，判断变量是不是整型</p></li><li><p>is_string() 判断变量是不是字符串型</p></li><li><p>is_float() 判断变量是不是浮点型</p></li><li><p>is_numeric() 判断变量不是数值型或数字字符串。</p></li><li><p>is_array() 判断变量是不是数组</p></li><li><p>is_null() 判断变量是否为NULL</p></li><li><p>is_resource() 判断变量是不是资源型</p><figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断用户是否大于18岁，如果大于18岁，显示网页内容，如果没有，则不显示</span></span><br><span class="line">$age = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">isset</span>($age) && is_numeric($age)) {</span><br><span class="line"><span class="keyword">if</span>($age ><span class="number">18</span>) {</span><br><span class="line"> <span class="keyword">echo</span>(<span class="string">'显示网页'</span>);</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">echo</span> (<span class="string">'不显示'</span>);</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li></ul><h3 id="整型"><a href="#整型" class="headerlink" title="整型"></a>整型</h3><ul><li>关键字：int</li></ul><ul><li><p>在js中所有的数字都用number来表示，但是在PHP，数字有不同的划分，其中整数（正整数，0，负整数）用<strong>整型</strong>来表示</p><ul><li><p>整型包含正整数、负整数、零0</p></li><li><p>可以用10进制、八进制、16进制表示</p><figure class="highlight php"><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 class="keyword">echo</span> <span class="number">100</span>;<span class="comment">//十进制</span></span><br><span class="line"><span class="keyword">echo</span> <span class="number">011</span>;<span class="comment">//八进制，以0开头的整数，结果为9</span></span><br><span class="line"><span class="keyword">echo</span> <span class="number">0x9a</span>;<span class="comment">//十六进制，以0x开头，结果为154</span></span><br></pre></td></tr></table></figure></li><li><p>PHP中最大整数：PHP_INT_MAX，(2^31)-1</p></li></ul></li><li><p>如果数字超出来了整数据范围，则类型会变为float</p></li></ul><h3 id="浮点型"><a href="#浮点型" class="headerlink" title="浮点型"></a>浮点型</h3><ul><li>关键字：float</li></ul><ul><li><p>PHP中除了整数还有浮点型，一般浮点数会包含小数，比整型更加精确</p></li><li><p>浮点型的范围：1.8E-308~1.8E+308</p></li><li><p>注意点：</p><ul><li><p>如果要对浮点数进行操作，就好先将浮点数转为整数再处理</p><figure class="highlight php"><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"><span class="comment">//以下做法不可取</span></span><br><span class="line"><span class="keyword">if</span>(<span class="number">2.1</span>/<span class="number">0.7</span> == <span class="number">3</span>) {</span><br><span class="line"> <span class="keyword">echo</span> <span class="string">'相等'</span>;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">echo</span> <span class="string">'不相等'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//以下是正确做法</span></span><br><span class="line">$a = <span class="number">2.1</span> * <span class="number">10</span>;</span><br><span class="line">$b = <span class="number">0.7</span> * <span class="number">10</span>;</span><br><span class="line"><span class="keyword">if</span>($a/$b == <span class="number">3</span>) {</span><br><span class="line"> <span class="keyword">echo</span> <span class="string">'相等'</span>;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">echo</span> <span class="string">'不相等'</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li></ul><h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><ul><li><p>字符串定义的四种方式</p><ul><li><p>用单引号可以定义一个字符串；如：$a = ‘abc’;</p><ul><li>单引号内无法解析变量</li><li>转义符号有：\’</li></ul></li><li><p>用双引号来定义一个字符串；如：$a = “abc”;</p><ul><li>双引号内可以解析变量</li><li>转义符号有：\\、\’、\”、\$、\r、\n、\t</li></ul></li><li><p>定义长字符串：heredoc</p><figure class="highlight php"><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"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">'content-type:text/html;charset=utf-8'</span>);</span><br><span class="line">$a = <span class="string">'abc'</span>;</span><br><span class="line">$aa = <span class="string"><<<heredoc</span></span><br><span class="line"><span class="string"><html></span></span><br><span class="line"><span class="string">123<span class="subst">$a</span></span></span><br><span class="line"><span class="string"></html></span></span><br><span class="line"><span class="string">heredoc;</span></span><br><span class="line"><span class="keyword">echo</span> $aa;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure><ul><li>使用注意：<ul><li>1）字符串放在两个heredoc标签之间</li><li>2）以“<<<heredoc”作为开始，不用带分号</li><li>3）以“heredoc;”作为结束，要带分号</li><li>4）标签名称可以自定义</li><li>5）结束标签必须放单独一行</li></ul></li></ul></li><li><p>定义长字符串：nowdoc</p><figure class="highlight php"><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"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">'content-type:text/html;charset=utf-8'</span>);</span><br><span class="line">$a = <span class="string">'abc'</span>;</span><br><span class="line">$aa = <span class="string"><<<'nowdoc'</span></span><br><span class="line"><span class="string"><html></span></span><br><span class="line"><span class="string">123<span class="subst">$a</span></span></span><br><span class="line"><span class="string"></html></span></span><br><span class="line"><span class="string">nowdoc;</span></span><br><span class="line"><span class="keyword">echo</span> $aa;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure><ul><li>使用注意：<ul><li>与上述一样，但是开始的标签名必须加单引</li><li>不能解析变量</li></ul></li></ul></li></ul></li></ul><h3 id="布尔型"><a href="#布尔型" class="headerlink" title="布尔型"></a>布尔型</h3><ul><li>关键字：bool</li></ul><ul><li>概念<ul><li>true表示真，flase表示假</li></ul></li><li>转换：<ul><li>0,””,NULL,0.0,”0”,arry() <em>空数组</em>会转为false</li><li>其它的数据都会转为true</li></ul></li></ul><h3 id="空型"><a href="#空型" class="headerlink" title="空型"></a>空型</h3><ul><li>用null表示，表示没有</li><li>以下情况会出现NULL<ul><li>可以直接给一个变量，赋一个NULL值；</li><li>未定义的变量的值，也是NULL；</li><li>unset()删除一个变量后，该变量的值为NULL。</li></ul></li></ul><h2 id="数据类型转换"><a href="#数据类型转换" class="headerlink" title="数据类型转换"></a>数据类型转换</h2><ul><li><p>概念</p><ul><li>数据有不同的类型，有时间操作数据时需要转换类型以后才能完成操作，比如计算</li><li>类型的转换分为两种：自动转换（隐式转换）、手动转换（强制转换）</li><li>大部分情况下数据是自动转换，少数情况下强制转换。</li></ul></li><li><p>强制转换</p><ul><li><p>通过关键字进行转换</p><figure class="highlight php"><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">(bool)$a<span class="comment">//强制转换为bool</span></span><br><span class="line"> <span class="comment">//除了0，0.0，”“，”0“，NULL，array()，转为false，其余都为true</span></span><br><span class="line">(int)$a<span class="comment">//强制转换为int</span></span><br><span class="line"> <span class="comment">//转换会将小数去尾</span></span><br><span class="line">(string)$a<span class="comment">//强制转换为string</span></span><br><span class="line"> <span class="comment">//null也可以转为‘’;</span></span><br><span class="line">(<span class="keyword">array</span>)$a<span class="comment">//强制转换为array</span></span><br><span class="line">(object)$a<span class="comment">//强制转换为object</span></span><br></pre></td></tr></table></figure></li></ul></li><li><p>进制转换</p><ul><li>进制就进位制，X进制，就是逢X进一。同理：十进制就是逢十进一，二进制逢二进一等等。</li><li>8进制：有8个基本数，分别为0、1、2、3、4、5、6、7，运算规则”逢8进1”；</li><li>16进制：有16个基本数，分别为0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，运算规则”逢16进1”。</li><li>2进制：有2个基本数，分别是0、1，运算规则”逢2进1”。</li><li>转换方法：<ul><li>decbin()将十进制转换为2进制</li><li>bindec()将2进制转换为十进制</li><li>decoct()将十进制转换为8进制</li><li>octdec()将八进制转换为10进制</li><li>dechex()将十进制转换为16进制</li><li>hexdec()将16进制转换为十进制</li></ul></li></ul></li></ul><h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><ul><li><p>算数运算符+、-、*、/、%、++、–</p></li><li><p>赋值运算符=、+=、-=、*=、/=、%=</p></li><li><p>字符串运算符. 和 .=</p><ul><li><p>案例：隔行变色</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><?php</span></span><br><span class="line">header(<span class="string">'content-type:text/html;charset=utf-8'</span>);</span><br><span class="line"></span><br><span class="line">$str = <span class="string">"<table width='500' border='1' align='center'>"</span>;</span><br><span class="line">$str .= <span class="string">"<tr bgColor='#f0f0f'>"</span>;</span><br><span class="line">$str .= <span class="string">" <th>编号</th>"</span>;</span><br><span class="line">$str .= <span class="string">" <th>新闻编号</th>"</span>;</span><br><span class="line">$str .= <span class="string">" <th>发布时间</th>"</span>;</span><br><span class="line">$str .= <span class="string">"</tr>"</span>;</span><br><span class="line"><span class="keyword">for</span>($i = <span class="number">0</span> ; $i < <span class="number">10</span> ; $i ++) {</span><br><span class="line"><span class="keyword">if</span>($i % <span class="number">2</span> == <span class="number">0</span>) {</span><br><span class="line">$str .= <span class="string">"<tr bgColor='#f0f0f'>"</span>;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">$str .= <span class="string">"<tr>"</span>;</span><br><span class="line">}</span><br><span class="line">$str .= <span class="string">"<td>$i</td>"</span>;</span><br><span class="line">$str .= <span class="string">"<td>&nbsp;</td>"</span>;</span><br><span class="line">$str .= <span class="string">"<td>&nbsp;</td>"</span>;</span><br><span class="line">$str .= <span class="string">"</tr>"</span>;</span><br><span class="line">}</span><br><span class="line">$str .= <span class="string">"</table>"</span>;</span><br><span class="line"><span class="keyword">echo</span> $str;</span><br><span class="line"><span class="meta">?></span></span><br></pre></td></tr></table></figure></li></ul></li><li><p>比较运算符>、<、>=、<=、\=\=、!=、\=\=\=、!==</p><ul><li><p>案例：字符串比较</p></li><li><p>ASCII码表：如果两个字符进行比较，比较的本质是它们对应的ASCII码</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">echo ("a" > 120);</span><br></pre></td></tr></table></figure></li></ul></li><li><p>逻辑运算符&&、||、!</p><ul><li><p>实例：闰年判断</p><figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//条件：</span></span><br><span class="line"><span class="comment">//1）能够被4整除，且不能被100整除</span></span><br><span class="line"><span class="comment">//2）能被400整除</span></span><br><span class="line">$year = <span class="number">2000</span>;</span><br><span class="line"><span class="keyword">if</span> ($year%<span class="number">4</span> == <span class="number">0</span> && $year % <span class="number">100</span> !=<span class="number">0</span> || $year % <span class="number">400</span> ==<span class="number">0</span>) {</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"{$year}是闰年"</span>;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"{$year}不是闰年"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li><li><p>运算符优先级</p></li><li><p>三元运算符</p><ul><li><p>案例：比较两个数的大小</p><figure class="highlight php"><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 = <span class="number">123</span>;</span><br><span class="line">$b = <span class="number">456</span>;</span><br><span class="line">$max = $a > $b ? $a : $b;</span><br></pre></td></tr></table></figure></li></ul></li><li><p>错误控制运算符（@）</p><ul><li><p>作用：主要用来屏蔽表达式的错误：</p></li><li><p>可以用在变量、常量、函数调用之前，但是不能用在函数定义、类定义之前。</p><figure class="highlight php"><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 = <span class="number">100</span>;</span><br><span class="line">$b = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">echo</span> @($a / $b);</span><br></pre></td></tr></table></figure></li></ul></li></ul><h2 id="流程控制"><a href="#流程控制" class="headerlink" title="流程控制"></a>流程控制</h2><ul><li><p>顺序结构</p><ul><li><p>赋值语句</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$a = <span class="number">123</span>;</span><br></pre></td></tr></table></figure></li></ul></li><li><p>分支结构</p><ul><li>分支结构（if）</li><li>多条件判断（if else if else）<ul><li>案例：根据分数给评语。</li></ul></li><li>多分支结构（switch）<ul><li>案例：完成今天星期几</li></ul></li></ul></li><li><p>循环结构</p><ul><li>while</li><li>do while</li><li>for</li><li>break和continue</li><li>案例：<ul><li>1）得到1~100的所有整数相加之和</li><li>2）输出100~1000以内所有水仙花数</li><li>3）输出九九乘法表</li></ul></li></ul></li></ul><h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><h3 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h3><ul><li>数组是一组数的集合。如：$arr = array(1,2,3,4,5,6);</li></ul><h3 id="PHP中数组的分类"><a href="#PHP中数组的分类" class="headerlink" title="PHP中数组的分类"></a>PHP中数组的分类</h3><ul><li>枚举数组<ul><li>数组元素的下标（索引），是从0开始的正整数，如：$arr = array(1,2,3,4,5,6);</li></ul></li><li>关联数组：<ul><li>数组元素的下标，是一个字符串。如：$arr[‘edu’] = ‘大专’</li><li>关联数组无法通过数字下标取得对应的元素</li></ul></li><li>混合数组：<ul><li>两种下标都有的数组，就是混合数组。如：$arr = array(100, ‘edu’=>’大专’ , ‘tel’ => ‘130110’)</li></ul></li><li>多维数组：<ul><li>数组元素的值，是一个数组，还可以理解为：数组嵌套数组。如：$arr[5][2] = 100</li></ul></li></ul><h3 id="数组的创建"><a href="#数组的创建" class="headerlink" title="数组的创建"></a>数组的创建</h3><ul><li><p>使用 array() 函数来创建数组</p><ul><li><p>创建枚举数组：</p><ul><li><p>下标是从0 开始的正整数</p></li><li><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$arr = <span class="keyword">array</span>($value1,$value2,$value3,....);</span><br></pre></td></tr></table></figure></li></ul></li></ul></li><li><p>创建关联数组</p><ul><li><p>$key是重新给数组元素指定一个下标</p></li><li><p>下标和元素的值之间连接号是”=>”，又称”重载元素下标”</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$arr = <span class="keyword">array</span>([$key=>]$value,[$key=>]$value,[$key=>]$value,....)</span><br></pre></td></tr></table></figure></li></ul></li><li><p>创建混合数组</p><ul><li><p>有字符串下标的元素，就没有整型下标</p></li><li><p>如果$key省略了，就用默认下标</p></li><li><p>下标只能是整型以及字符串</p></li><li><p>如果元素没有指定下标，会在最大整数下标的基础上加1.</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$arr[] = $value</span><br></pre></td></tr></table></figure><ul><li>如果$arr数组不存在的话，会先创建数组，并添加第1个数组元素，第1个元素的下标为0</li><li>如果$arr已经存在 的话，添加新的数组元素，新的数组元素的下标，是最大整数下标+1</li></ul></li><li><p>创建混合数组：</p><ul><li><p>由语法1，2混合创建数组</p><figure class="highlight php"><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">$arr[] = <span class="number">12</span>;</span><br><span class="line">$arr[] = <span class="number">13</span>;</span><br><span class="line">$arr[<span class="string">"a"</span>] =<span class="number">14</span>;</span><br><span class="line">$arr[] = <span class="number">15</span>;</span><br><span class="line">$arr[<span class="number">20</span>] = <span class="number">16</span>;</span><br><span class="line">$arr[] = <span class="number">19</span>;</span><br></pre></td></tr></table></figure></li></ul></li></ul></li></ul><h3 id="多维数组"><a href="#多维数组" class="headerlink" title="多维数组"></a>多维数组</h3><ul><li><p>多维数组，即数组中的元素又是一个数组</p><figure class="highlight php"><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">$arr = <span class="keyword">array</span>(</span><br><span class="line"><span class="keyword">array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>),</span><br><span class="line"><span class="keyword">array</span>(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>),</span><br><span class="line"><span class="keyword">array</span>(<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>),</span><br><span class="line"><span class="string">"abc"</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure></li></ul><h3 id="数组中的函数"><a href="#数组中的函数" class="headerlink" title="数组中的函数"></a>数组中的函数</h3><ul><li>count()<ul><li>计算数组中的单元数目或对象中的属性个数</li><li>语法：int count ( mixed $var [,\$mode = COUNT_NORMAL ] )</li><li>参数：<ul><li>$var 是对象或者数组</li><li>$model: 如果可选的 mode 参数设为 COUNT_RECURSIVE（或 1），count() 将递归地对数组计数。对计算多维数组的所有单元尤其有用。mode 的默认值是 0。count()识别不了无限递归</li></ul></li></ul></li><li>unset()<ul><li>删除变量或数组元素</li><li>语法：void unset ( mixed $var [, mixed $… ] )</li><li>删除元素后，仅仅只是相当于将数据从数组中移除掉了，对数组的下标没有影响</li></ul></li></ul><h3 id="数组的遍历"><a href="#数组的遍历" class="headerlink" title="数组的遍历"></a>数组的遍历</h3><ul><li>使用for加next()遍历数组</li></ul><figure class="highlight php"><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">for</span>($i = <span class="number">0</span>; $i < count($arr); $i++) {</span><br><span class="line"><span class="keyword">echo</span> key($arr).current($arr).<span class="string">"<br/>"</span></span><br><span class="line">next($arr);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>key()：当前指针处元素的键名(下标)，不会移动指针</li><li>current()：返回当前指针处元素的值，不会移动指针</li><li>next(): 返回下一个元素的值，指针移动到下一个元素的开头</li></ul><h3 id="PHP中的数组传值时为值传递"><a href="#PHP中的数组传值时为值传递" class="headerlink" title="PHP中的数组传值时为值传递"></a>PHP中的数组传值时为值传递</h3><figure class="highlight php"><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">$arr = <span class="keyword">array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>);</span><br><span class="line">$arr1 = $arr;</span><br><span class="line">$arr1[<span class="number">0</span>] = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">echo</span> $arr[<span class="number">0</span>];<span class="comment">//1</span></span><br></pre></td></tr></table></figure><h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><h3 id="概念-2"><a href="#概念-2" class="headerlink" title="概念"></a>概念</h3><ul><li>函数是一段命名的代码段</li><li>封装一代码，将来要执行时可以直接调用</li></ul><h3 id="定义函数的方式"><a href="#定义函数的方式" class="headerlink" title="定义函数的方式"></a>定义函数的方式</h3><figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> function 定义函数的关键字</span></span><br><span class="line"><span class="comment"> functionName 函数的名称</span></span><br><span class="line"><span class="comment"> arguments 形参列表</span></span><br><span class="line"><span class="comment"> retValue 返回值</span></span><br><span class="line"><span class="comment"> fnCode 功能代码</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionName</span><span class="params">(arguments)</span></span>{</span><br><span class="line"> <span class="comment">// fnCode</span></span><br><span class="line"> <span class="keyword">return</span> retValue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>function： 定义函数的关键字，不区分大小写</li><li>functionName：函数名称，命名规则与变量一样，只是不需要加$符号</li><li>小括号()：主要用来接受传递过来的参数</li><li>arguments：定义函数时的参数，形参</li><li>return 函数的返回值。</li></ul><h3 id="函数的调用："><a href="#函数的调用：" class="headerlink" title="函数的调用："></a>函数的调用：</h3><ul><li>实参：调用函数时，传递的参数就是实参，含有真正数据的</li><li>形参：定义函数时的参数</li></ul><ul><li>案例：得到数组中所有数组的和</li></ul><h3 id="函数参数的传递："><a href="#函数参数的传递：" class="headerlink" title="函数参数的传递："></a>函数参数的传递：</h3><ul><li>值传递<ul><li>函数参数的值传递，就是将参数的值，复制一份，传到函数中</li><li>值传递速度比较慢，但修改其中一个不会影响到另一个；</li></ul></li><li>引用传递<ul><li>引用传递速度比较快，但修改其中一个，另一个也会改变。</li><li>引用传递，是将一个变量的地址，复制一份，传到函数中</li></ul></li><li>默认参数<ul><li>函数中有些参数可能是固定不变的，为了操作方便，可以用默认参数来代替</li><li>默认参数必须放在非默认参数的右边</li><li>默认参数的值，只能是：字符串、整型、浮点型、布尔型、NULL、数组</li></ul></li></ul><figure class="highlight php"><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 class="function"><span class="keyword">function</span> <span class="title">showSelf</span><span class="params">($name,$age=<span class="number">19</span>,$gender=<span class="string">"男"</span>)</span> </span>{</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"我叫{$name}，今天{$age},性别{$ender}"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="函数可变数量参数"><a href="#函数可变数量参数" class="headerlink" title="函数可变数量参数"></a>函数可变数量参数</h3><ul><li><p>func_get_args( void )：返回一个参数列表的枚举数组，参数数组的下标是从0开始的整数</p></li><li><p>func_get_arg( $index )：返回参数数组中，指定下标的参数的值；</p></li><li><p>func_num_args( void )：返回实参的个数。</p><figure class="highlight php"><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"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span><span class="params">()</span> </span>{</span><br><span class="line">$arr = func_get_args();</span><br><span class="line">$len = func_num_args();</span><br><span class="line">$sum = <span class="number">0</span>;</span><br><span class="line">print_r($arr);</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"<br/>"</span>;</span><br><span class="line">print_r($len);</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"<br/>"</span>;</span><br><span class="line"><span class="keyword">for</span>($i = <span class="number">0</span>; $i < $len; $i++) {</span><br><span class="line">$sum += func_get_arg($i);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"$sum"</span>;</span><br><span class="line">}</span><br><span class="line">getSum(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>);</span><br></pre></td></tr></table></figure></li></ul><h3 id="函数的返回值"><a href="#函数的返回值" class="headerlink" title="函数的返回值"></a>函数的返回值</h3><ul><li>函数的返回值，通过return语句来实现；</li><li>将函数的执行结果，返给了函数调用者；</li><li>return语句一旦执行，函数立即结束，函数剩余的代码不再执行了。</li><li>return语句有”中断”函数、”退出”函数；</li><li>return不能同时返回多个值，只能返回一个值。如果想返回多个值，可以放入数组</li></ul><h2 id="常用系统函数"><a href="#常用系统函数" class="headerlink" title="常用系统函数"></a>常用系统函数</h2><h3 id="字符串-1"><a href="#字符串-1" class="headerlink" title="字符串"></a>字符串</h3><ul><li>定义字符串基本语法<ul><li>单引号字符串</li><li>双引号字符串</li><li>nowdoc字符串</li><li>heredoc字符串</li></ul></li><li>字符串常用api<ul><li>strlen() 获取字符串长度</li><li>substr() 返回字符串的子串</li><li>strtoupper() 将字符串转化为大写</li><li>strtolower() 将字符串转化为小写</li><li>ucfirst() 将字符串的首字母转换为大写</li><li>trim() 去除字符串首尾处的空白字符</li><li>ltrim() 删除字符串开头的空白字符</li><li>rtrim() 删除字符串末端的空白字符</li><li>strrev() 反转字符串</li><li>strpos() 查找字符串首次出现的位置，从左往右查找</li><li>strrpos() 计算指定字符串在目标字符串中最后一次出现的位置，从右往左查找</li><li>strchr()和strstr() 两者一样，用于查找字符串的首次出现</li><li>str_replace() 子字符串替换</li><li>str_repeat() 重复一个字符串</li></ul></li></ul><h3 id="数学"><a href="#数学" class="headerlink" title="数学"></a>数学</h3><ul><li>常用函数<ul><li>max() 求最大值</li><li>min() 求最小值</li><li>rand() 产生一个随机整数</li><li>mt_rand() 更高效的随机数</li><li>ceil() 进一法取整</li><li>floor() 舍去法取整</li><li>round() 对浮点数进行四舍五入</li><li>pow() 次方运算</li><li>abs() 求绝对值</li><li>sqrt() 开方运算</li></ul></li></ul><h4 id="日期"><a href="#日期" class="headerlink" title="日期"></a>日期</h4><ul><li>常用函数<ul><li>time() 返回自从 Unix 纪元（格林威治时间 1970 年 1 月 1 日 00:00:00）到当前时间的秒数</li><li>date() 格式化一个本地时间/日期 </li><li>microtime() 返回当前 Unix 时间戳和微秒数</li><li>strtotime() 将任何英文文本的日期时间描述解析为 Unix 时间戳</li></ul></li></ul>]]></content>
<tags>
<tag> php </tag>
</tags>
</entry>
<entry>
<title>关于php的大文件上传POST超过最大限制报错问题</title>
<link href="/2017/05/08/%E5%85%B3%E4%BA%8Ephp%E7%9A%84%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0POST%E8%B6%85%E8%BF%87%E6%9C%80%E5%A4%A7%E9%99%90%E5%88%B6%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98/"/>
<url>/2017/05/08/%E5%85%B3%E4%BA%8Ephp%E7%9A%84%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0POST%E8%B6%85%E8%BF%87%E6%9C%80%E5%A4%A7%E9%99%90%E5%88%B6%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<p>在学php的时候，做了一个简单的上传文件的demo，在上传大文件的时候发现报如下的错：<br><img src="http://img.blog.csdn.net/20171215202046288?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p><blockquote><p><strong>大概的意思就是：你所上传的文件大小超过了POST的最大限制大小（8M）,</strong><br>以下是有道翻译的结果警告:POST content -<br>length为2110919154字节，超过了第0行未知的8388608字节的限制 <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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">####**这是demo的代码**</span><br><span class="line">```js</span><br><span class="line"><?php</span><br><span class="line"></span><br><span class="line">if(!empty($_FILES)){</span><br><span class="line"> $file = $_FILES["img-file"];</span><br><span class="line"> move_uploaded_file($file["tmp_name"],"./res/".$file["name"]);//将文件流从临时存储的位置移到指定的路径</span><br><span class="line">}</span><br><span class="line">?></span><br><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"><form action="./file_upload.php" method="post" enctype="multipart/form-data" ></span><br><span class="line"> <input type="file" name="img-file" id=""><br></span><br><span class="line"> <input type="submit" value="上传"></span><br><span class="line"></form></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure></p></blockquote><p>###以上代码就是实现一个简单的上传功能，图片如下：<br><img src="http://img.blog.csdn.net/20171215200140633?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="文件上传"></p><p>###<strong>解决方法：</strong></p><ul><li>php.ini配置文件中的默认文件上传大小为2M， 默认upload_max_filesize =<br> 2M，即文件上传的大小为2M，如果你想上传超过8M的文件，比如20M，你必须设定upload_max_filesize =<br> 20M。但是光设置upload_max_filesize =<br> 20M还是无法实现大文件的上传功能，你必须修改php.ini配置文件中的post_max_size选项，其代表允许POST的数据最大字节长度，默认为8M。<strong>如果POST数据超出限制，那么$_POST和$_FILES将会为空</strong>。要上传大文件，你必须设定该选项值大于upload_max_filesize指令的值，我一般设定upload_max_filesize和post_max_size值相等。另外如果启用了内存限制，那么该值应当小于memory_limit选项的值。</li></ul><p> <strong>文件上传的其他注意事项</strong></p><ul><li>在上传大文件时，你会有上传速度慢的感觉，当超过一定的时间，会报脚本执行超过30秒的错误，这是因为在php.ini配置文件中max_execution_time配置选项在作怪，其表示每个脚本最大允许执行时间(秒)，0<br> 表示没有限制。你可以适当调整max_execution_time的值，不推荐设定为0。</li></ul>]]></content>
<tags>
<tag> php </tag>
</tags>
</entry>
<entry>
<title>浅谈测量javascript脚本程序执行消耗的时间</title>
<link href="/2017/05/08/%E6%B5%85%E8%B0%88%E6%B5%8B%E9%87%8Fjavascript%E8%84%9A%E6%9C%AC%E7%A8%8B%E5%BA%8F%E6%89%A7%E8%A1%8C%E6%B6%88%E8%80%97%E7%9A%84%E6%97%B6%E9%97%B4/"/>
<url>/2017/05/08/%E6%B5%85%E8%B0%88%E6%B5%8B%E9%87%8Fjavascript%E8%84%9A%E6%9C%AC%E7%A8%8B%E5%BA%8F%E6%89%A7%E8%A1%8C%E6%B6%88%E8%80%97%E7%9A%84%E6%97%B6%E9%97%B4/</url>
<content type="html"><![CDATA[<p><strong>随着WEB应用越来越重要，JavaScript的执行性能也日益受到重视，WEB开发人员知道一些性能测试机器是必须的。接下来就简单介绍一下两种方法：</strong></p><ul><li><strong>方法一</strong>：</li></ul><blockquote><p>console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间,代码如下</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 启动计时器</span></span><br><span class="line"><span class="built_in">console</span>.time(<span class="string">'testTime'</span>);<span class="comment">//testTime为计时器的名称</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// (写一些测试用代码)</span></span><br><span class="line"><span class="keyword">for</span>(i=<span class="number">0</span>;i<<span class="number">1000</span>;i++){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"bobo"</span>+i);</span><br><span class="line"> }</span><br><span class="line"><span class="comment">// 停止计时，输出时间</span></span><br><span class="line"><span class="built_in">console</span>.timeEnd(<span class="string">'testTime'</span>);</span><br></pre></td></tr></table></figure><p><strong>输出结果如下图：</strong><br><img src="http://img.blog.csdn.net/20171114220402038?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="控制台输出结果"></p><blockquote><p><strong>这两个方法中都可以传人一个参数，作为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器</strong>。对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒。</p></blockquote><ul><li><strong>方法二：</strong></li></ul><blockquote><p> 由于，js脚本是自上而下执行解析的，所以可以通过+new Date()或new<br> Date().getTime()来计算中间代码的执行时间，还是上代码来的直接：</p></blockquote><p><img src="http://img.blog.csdn.net/20171114221538882?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p><p><strong>代码执行结果如下图：</strong></p><p> <img src="http://img.blog.csdn.net/20171114221351976?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="方法二执行结果图"></p><p><strong>或直接将其封装为函数如下：</strong></p><p><img src="http://img.blog.csdn.net/20171114222108555?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="测试js运行时间的函数"></p><p><strong>运行结果为同上</strong><br>测试JavaScript性能的方法有很多，但console.time/timeEnd两个方法是最基本、最直接的技巧。</p>]]></content>
<categories>
<category> javascript </category>
</categories>
<tags>
<tag> javascript </tag>
</tags>
</entry>
<entry>
<title>回话技术之session与cookie</title>
<link href="/2017/04/18/%E4%BC%9A%E8%AF%9D%E6%8A%80%E6%9C%AF%E4%B9%8B%E4%B8%8Ecookie/"/>
<url>/2017/04/18/%E4%BC%9A%E8%AF%9D%E6%8A%80%E6%9C%AF%E4%B9%8B%E4%B8%8Ecookie/</url>
<content type="html"><![CDATA[<h2 id="会话技术"><a href="#会话技术" class="headerlink" title="会话技术"></a>会话技术</h2><ul><li>http无状态概述</li><li>状态保持方式概述</li></ul><h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><h3 id="cookie原理分析"><a href="#cookie原理分析" class="headerlink" title="cookie原理分析"></a>cookie原理分析</h3><ul><li>一个cookie的设置以及发送过程分为以下四步<ol><li>客户端发送一个http请求到服务器端 </li><li>服务器端发送一个http响应到客户端，其中包含Set-Cookie头部 </li><li>客户端发送一个http请求到服务器端，其中包含Cookie头部 </li><li>服务器端发送一个http响应到客户端 </li></ol></li></ul><h2 id="语法："><a href="#语法：" class="headerlink" title="语法："></a>语法：</h2><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setcookie(name[, value, expire, path, domain]);</span><br></pre></td></tr></table></figure><h4 id="cookie常用属性"><a href="#cookie常用属性" class="headerlink" title="cookie常用属性"></a>cookie常用属性</h4><ul><li><p>expires 有效期 </p><ul><li><p>临时COOKIE(缓存cookie)</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">"admin"</span>);</span><br></pre></td></tr></table></figure></li><li><p>硬盘COOKIE</p><figure class="highlight php"><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="comment">//一小时过期</span></span><br><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">"admin"</span>,time()+ <span class="number">3600</span>)</span><br><span class="line"><span class="comment">//永久性COOKIE</span></span><br><span class="line">setcookie(<span class="string">"password"</span>,<span class="string">"123"</span>,PHP_INT_MAX);</span><br></pre></td></tr></table></figure></li></ul></li><li><p>path有效 路径 </p><figure class="highlight php"><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"><span class="comment">//只有在upload文件夹下才能被访问到</span></span><br><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">"admin"</span>,time()+ <span class="number">3600</span>,<span class="string">"/upload"</span>)</span><br></pre></td></tr></table></figure></li><li><p>domain 域名 </p><ul><li>域名：<ul><li>顶级：baidu.com</li><li>二级域名<ul><li><a href="http://www.baidu.com" target="_blank" rel="noopener">www.baidu.com</a></li><li>music.baidu.com<ul><li>api.music.baidu.com</li></ul></li><li>image.baidu.com</li></ul></li></ul></li></ul><figure class="highlight php"><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"><span class="comment">//只有在a.com以及它下面的子域名中才能被访问</span></span><br><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">"admin"</span>,time()+ <span class="number">3600</span>,<span class="string">"/"</span>,<span class="string">"a.com"</span>)</span><br></pre></td></tr></table></figure></li></ul><h3 id="删除cookie"><a href="#删除cookie" class="headerlink" title="删除cookie"></a>删除cookie</h3><ul><li><p>设置有效时间为过去时间</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">"admin"</span>,time()<span class="number">-1</span>);</span><br></pre></td></tr></table></figure></li><li><p>将cookie中的值设置为false或者空字符串</p><figure class="highlight php"><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">setcookie(<span class="string">"uName"</span>,<span class="keyword">false</span>);</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line">setcookie(<span class="string">"uName"</span>,<span class="string">""</span>);</span><br></pre></td></tr></table></figure></li><li><p>不设置值</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setcookie(<span class="string">"uName"</span>);</span><br></pre></td></tr></table></figure></li><li><p>在浏览器中清除缓存</p></li></ul><h3 id="服务器操作cookie"><a href="#服务器操作cookie" class="headerlink" title="服务器操作cookie"></a>服务器操作cookie</h3><figure class="highlight php"><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"><span class="comment">// 设置cookie</span></span><br><span class="line"><span class="comment">// </span></span><br><span class="line"><span class="comment">// 设置1小时后过期</span></span><br><span class="line">setcookie(<span class="string">"user"</span>, <span class="string">"lisi"</span>, time()+<span class="number">3600</span>);</span><br><span class="line"><span class="comment">// 获取单个cookie</span></span><br><span class="line"><span class="keyword">echo</span> $_COOKIE[<span class="string">"user"</span>];</span><br><span class="line"><span class="comment">// 查看所有cookie</span></span><br><span class="line">print_r($_COOKIE);</span><br></pre></td></tr></table></figure><h4 id="js对cookie基本操作"><a href="#js对cookie基本操作" class="headerlink" title="js对cookie基本操作"></a>js对cookie基本操作</h4><figure class="highlight javascript"><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"><span class="comment">// 设置cookie</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setCookie</span>(<span class="params">key,value,param</span>)</span>{</span><br><span class="line"> <span class="built_in">document</span>.cookie = key + <span class="string">'='</span> + value + <span class="string">'; expires='</span> + param.expires + <span class="string">'; path='</span> + param.path; </span><br><span class="line">}</span><br><span class="line"><span class="comment">// 获取cookie</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getCookie</span>(<span class="params">key</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> cookies = <span class="built_in">document</span>.cookie;</span><br><span class="line"> <span class="keyword">var</span> arr = cookies.split(<span class="string">'; '</span>);</span><br><span class="line"> <span class="keyword">if</span>(arr){</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="keyword">var</span> kv = arr[i].split(<span class="string">'='</span>);</span><br><span class="line"> <span class="keyword">if</span>(kv[<span class="number">0</span>] == key){</span><br><span class="line"> <span class="keyword">return</span> kv[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="cookie的缺点："><a href="#cookie的缺点：" class="headerlink" title="cookie的缺点："></a>cookie的缺点：</h3><ul><li>COOKIE数据不太安全；</li><li>COOKIE存储的数据类型，只能是字符串；</li><li>COOKIE文件是有容量限制(大约4KB)。4*1024b–> 1个文字大概是2~3b</li></ul><h2 id="session"><a href="#session" class="headerlink" title="session"></a>session</h2><h3 id="session的优点："><a href="#session的优点：" class="headerlink" title="session的优点："></a>session的优点：</h3><ul><li>SESSION也是一种会话技术；</li><li>SESSION数据存在服务器端，相对于比较安全；</li><li>SESSION技术是基于COOKIE的，没有COOKIE也就没有SESSION了。</li><li>服务器将SESSION数据保存在服务器上，而将SESSION的用户id存储在客户端电脑上。</li><li>SESSION存储的数据类型，除了资源外的数据类型都可以；</li><li>SESSION文件没有大小限制；</li></ul><h3 id="session原理分析"><a href="#session原理分析" class="headerlink" title="session原理分析"></a>session原理分析</h3><ul><li>客户端第一次请求服务器时，服务器开启一个session，生成一个唯一标识（sessionid：存储的数据与此sessionid关联），并以响应头的Set-Cookie属性响应到客户端</li><li>客户端的后续请求会一直通过请求头的Cookie属性携带sessionid（客户端与服务器通过此id维持状态）</li></ul><h3 id="session基本操作"><a href="#session基本操作" class="headerlink" title="session基本操作"></a>session基本操作</h3><ul><li>设置session</li></ul><figure class="highlight php"><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">session_start();</span><br><span class="line">$_SESSION[<span class="string">'user'</span>] = <span class="keyword">array</span>(<span class="string">'username'</span>=><span class="string">'lisi'</span>,<span class="string">'age'</span>=><span class="string">'12'</span>);</span><br></pre></td></tr></table></figure><ul><li>读取session</li></ul><figure class="highlight php"><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">session_start();</span><br><span class="line">$user = $_SESSION[<span class="string">'user'</span>];</span><br></pre></td></tr></table></figure><ul><li>删除一个session信息</li></ul><figure class="highlight php"><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">session_start();</span><br><span class="line"><span class="keyword">unset</span>($_SESSION[<span class="string">'user'</span>]);</span><br></pre></td></tr></table></figure><ul><li>删除所有session信息</li></ul><figure class="highlight php"><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">session_start();</span><br><span class="line"><span class="keyword">unset</span>($_SESSION);</span><br></pre></td></tr></table></figure><ul><li>销毁session</li></ul><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">session_destroy();</span><br></pre></td></tr></table></figure><h3 id="session与cookie的关系"><a href="#session与cookie的关系" class="headerlink" title="session与cookie的关系"></a>session与cookie的关系</h3><ul><li>session可以借助cookie实现状态维持，也可以不依赖cookie（URL重写）</li></ul><table><thead><tr><th>区别</th><th>cookie</th><th>session</th></tr></thead><tbody><tr><td>存储位置</td><td>浏览器</td><td>服务器</td></tr><tr><td>浏览器携带的数据量</td><td>多</td><td>少（只携带session-id）</td></tr><tr><td>存储的数据类型</td><td>只能是字符串</td><td>任意类型</td></tr><tr><td>安全性</td><td>较低</td><td>较高</td></tr><tr><td>默认的有效路径</td><td>当前路径及其子路径</td><td>整站有效</td></tr><tr><td>数据的传输量</td><td>有限制4K，不能超过20个</td><td>无限制</td></tr></tbody></table><h3 id="session的回收时间："><a href="#session的回收时间：" class="headerlink" title="session的回收时间："></a>session的回收时间：</h3><ul><li>session.gc_maxlifetime</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">session.gc_maxlifetime = <span class="number">1440</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> session&cookie </tag>
</tags>
</entry>
<entry>
<title>为什么给html标签定义了id，就可以在js中（浏览器环境）直接通过id引用这个dom元素？</title>
<link href="/2017/04/16/%E4%B8%BA%E4%BB%80%E4%B9%88%E7%BB%99html%E6%A0%87%E7%AD%BE%E5%AE%9A%E4%B9%89%E4%BA%86id%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%9C%A8js%E4%B8%AD%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83%EF%BC%89%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87id%E5%BC%95%E7%94%A8%E8%BF%99%E4%B8%AAdom%E5%85%83%E7%B4%A0%EF%BC%9F/"/>
<url>/2017/04/16/%E4%B8%BA%E4%BB%80%E4%B9%88%E7%BB%99html%E6%A0%87%E7%AD%BE%E5%AE%9A%E4%B9%89%E4%BA%86id%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%9C%A8js%E4%B8%AD%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83%EF%BC%89%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87id%E5%BC%95%E7%94%A8%E8%BF%99%E4%B8%AAdom%E5%85%83%E7%B4%A0%EF%BC%9F/</url>
<content type="html"><![CDATA[<p>###<strong>问题</strong></p><blockquote><p>只要标签有id这个属性，不使用getElementById方法，也可以直接用id获取dom元素。</p></blockquote><p>###<strong>解惑</strong></p><blockquote><p>经过一波搜索及查资料，<em>原因大概是</em>：<strong>如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性</strong>，所以可以直接用来操作dom。看网上的说法是，这个是<strong>IE首先支持</strong>，火狐谷歌后面才支持的。不过现在还未形成标准，为了保险，还是不用的好。不过看各大浏览器都支持，觉得也许以后这个有可能直接成标准也说不定哈，到时候又可以省几个代码0.</p></blockquote><p><strong>在各大浏览器中的测试结果如下：</strong></p><ul><li><p><strong>chorme浏览器中</strong><br><img src="http://img.blog.csdn.net/20180208194447447?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p><p>-<strong>firefox浏览器中</strong><br><img src="http://img.blog.csdn.net/20180208194811593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></p></li></ul><ul><li><strong>ie浏览器中（仿真ie5版）</strong><br><img src="http://img.blog.csdn.net/20180208194632517?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述"></li></ul>]]></content>
</entry>
<entry>
<title>i5ting/tocmd.npm将MD转换为HTML简单使用</title>
<link href="/2017/03/08/i5ting-tocmd-npm%E5%B0%86MD%E8%BD%AC%E6%8D%A2%E4%B8%BAHTML%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8/"/>
<url>/2017/03/08/i5ting-tocmd-npm%E5%B0%86MD%E8%BD%AC%E6%8D%A2%E4%B8%BAHTML%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8/</url>
<content type="html"><![CDATA[<p><a href="https://github.com/i5ting/tocmd.npm/issues" target="_blank" rel="noopener">模块链接</a></p><h1 id="i5ting-toc"><a href="#i5ting-toc" class="headerlink" title="i5ting_toc"></a>i5ting_toc</h1><p><a href="http://badge.fury.io/js/i5ting_toc" target="_blank" rel="noopener"><img src="https://camo.githubusercontent.com/c79f423687ce552ef14b5c604e0d798f6cae38d3/68747470733a2f2f62616467652e667572792e696f2f6a732f693574696e675f746f632e737667" alt="npm version"></a></p><p>i5ting_toc a node npm wrapper of i5ting_ztree_toc <a href="https://github.com/i5ting/i5ting_ztree_toc" target="_blank" rel="noopener">https://github.com/i5ting/i5ting_ztree_toc</a></p><ul><li><a href="https://github.com/i5ting/tocmd.gem" target="_blank" rel="noopener">ruby版本tocmd</a></li><li><a href="https://github.com/i5ting/tocmd.npm" target="_blank" rel="noopener">node版本i5ting_toc</a></li></ul><h2 id="Preview"><a href="#Preview" class="headerlink" title="Preview"></a>Preview</h2><p><a href="https://github.com/i5ting/i5ting_ztree_toc/blob/master/demo/3.png" target="_blank" rel="noopener"><img src="https://github.com/i5ting/i5ting_ztree_toc/raw/master/demo/3.png" alt="img"></a></p><p>##全局安装</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g i5ting_toc</span><br></pre></td></tr></table></figure><p>##使用方法</p><p>全局安装完毕之后，直接在此处打开命令行，切换到你想要转换的md文件根目录下，使用以下命令，这个版本的命令比较简单，只有一个-f参数，如果没有填写，默认使用README.md<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">i5ting_toc -f sample.md -o</span><br></pre></td></tr></table></figure></p><p>常见的命令参数如下：</p><blockquote><p> -h, –help output usage information<br> -V, –version output the version number<br> -f, –file [filename] default is README.md<br> -o, –open open in browser<br> -v, –verbose 打印详细日志</p></blockquote><p>运行成功之后则在当前目录下生成一个preview文件夹，里面就是我们想要的东东了<br><img src="http://img.blog.csdn.net/20180131102441510?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="运行结果"></p><p><strong>注意：</strong> 如果md文件包含有图片资源的话，需要将图片资源的路径<code>手动</code> copy进toc文件夹内</p>]]></content>
<categories>
<category> 工具 </category>
</categories>
<tags>
<tag> 模块工具 </tag>
</tags>
</entry>
<entry>
<title>javascript中自执行（自调用）函数的两种写法</title>
<link href="/2017/02/10/javascript%E4%B8%AD%E8%87%AA%E6%89%A7%E8%A1%8C%EF%BC%88%E8%87%AA%E8%B0%83%E7%94%A8%EF%BC%89%E5%87%BD%E6%95%B0%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95/"/>
<url>/2017/02/10/javascript%E4%B8%AD%E8%87%AA%E6%89%A7%E8%A1%8C%EF%BC%88%E8%87%AA%E8%B0%83%E7%94%A8%EF%BC%89%E5%87%BD%E6%95%B0%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95/</url>
<content type="html"><![CDATA[<ul><li><strong>自执行函数定义：</strong></li></ul><blockquote><p>自执行函数或是自调用函数 声明完了，马上进行调用，只能使用一次,,有两种写法，举个栗子如下：</p></blockquote><p><strong>写法一:</strong></p><ul><li>格式：(函数)(实参)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">n1,n2</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"这是匿名函数的自执行的第一种写法，结果为:"</span>+(n1+n2))</span><br><span class="line">})(<span class="number">10</span>,<span class="number">100</span>)<span class="comment">//110</span></span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">start</span>(<span class="params">n1,n2</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"这是函数声明方式的自执行的第一种写法，结果为:"</span>+(n1+n2))</span><br><span class="line">})(<span class="number">10</span>,<span class="number">100</span>)<span class="comment">//110</span></span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure><hr><p><strong>写法二：</strong></p><ul><li>格式：(函数(实参))如下 </li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">n1,n2</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"这是匿名函数的自执行的第二种写法，结果为："</span>+(n1+n2))</span><br><span class="line">}(<span class="number">10</span>,<span class="number">100</span>))<span class="comment">//110</span></span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">start</span>(<span class="params">n1,n2</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"这是函数声明方式的自执行的第二种写法，结果为："</span>+(n1+n2))</span><br><span class="line">}(<span class="number">10</span>,<span class="number">100</span>))<span class="comment">//110</span></span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
</tags>
</entry>
<entry>
<title>javascript数据类型转换总结</title>
<link href="/2017/01/20/javascript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E6%80%BB%E7%BB%93/"/>
<url>/2017/01/20/javascript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E6%80%BB%E7%BB%93/</url>
<content type="html"><![CDATA[<p>####<strong>数据类型分类</strong></p><blockquote><ul><li>复杂数据类型：对象类型</li><li>简单（基本）数据类型：number string boolean null undefined</li></ul></blockquote><p>####<strong>数据类型转换分类</strong></p><ul><li><strong>隐式转换</strong> </li><li><strong>显式(强制)转换</strong></li></ul><p>####<strong>一.其他数据类型转number类型</strong></p><ul><li><strong>隐式转换</strong>：</li></ul><blockquote><pre><code>1.0 . 隐式转换:只要是参与数学运算都会进行一个隐式类型转换 + - * / %1.1. null对应number类型中的0,1.2. NaN 是属于number类型，表示数字的一种不正常状态,也就是说本来应该进行数学运算的值没有转换成number， js中特别的安排了一个这么一个NaN的值，有了这个值程序就不报错了1.3、NaN是属于number类型的一个值,代表数字的一种不正常状态，是非常特殊的,特殊到和任何值都不相等，即使自己也不相等,所以任何与NaN的数学运算，最最终的结果都是NaN</code></pre></blockquote><p> </p><ul><li><strong>显式转换</strong>：通过Number( )、ParseInt( )、ParseFloat( )<br><strong>Number( )</strong><blockquote><p><strong>特点：</strong></p><pre><code>a.如果转换的内容可以转成数字，那么就直接返回这个内容对应的数字。b.如果不可以转换那么返回NaN.c.如果在内容中出现小数，那么小数会保留。d.如果内容为空，那么转换成0;</code></pre></blockquote></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">如：</span><br><span class="line"> <span class="keyword">var</span> num1 = <span class="built_in">Number</span>(<span class="literal">true</span>); <span class="comment">//true返回1 false返回0</span></span><br><span class="line"> <span class="keyword">var</span> num2 = <span class="built_in">Number</span>(<span class="literal">undefined</span>); <span class="comment">//返回NaN</span></span><br><span class="line"> <span class="keyword">var</span> num3 = <span class="built_in">Number</span>(<span class="string">"hello"</span>); <span class="comment">//返回NaN</span></span><br><span class="line"> <span class="keyword">var</span> num4 = <span class="built_in">Number</span>(<span class="string">" "</span>); <span class="comment">//如果是空字符串或是真空的字符串返回0</span></span><br><span class="line"> <span class="keyword">var</span> num5 = <span class="built_in">Number</span>(<span class="number">123</span>); <span class="comment">//返回123，如果是数字，简单返回</span></span><br><span class="line"> <span class="keyword">var</span> num6 = <span class="built_in">Number</span>(<span class="string">"123abc"</span>); <span class="comment">//返回NaN</span></span><br><span class="line"> <span class="keyword">var</span> num7 = <span class="built_in">Number</span>(<span class="string">"abc123"</span>); <span class="comment">//返回NaN</span></span><br></pre></td></tr></table></figure><p><strong>ParseInt()</strong></p><blockquote><p> <strong>特点：</strong><br> a.如果转换的内容可以转成数字，那么就直接返回这个内容对应的数字。<br> b.如果不可以转换那么返回NaN.<br> c.如果带有小数，那么会去掉小数，而不是四舍五入。<br> d.如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止.</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">例子：</span><br><span class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseInt</span>(<span class="literal">false</span>); <span class="comment">//无论true或是false都是NaN</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseInt</span>(<span class="literal">undefined</span>); <span class="comment">//NaN</span></span><br><span class="line"> <span class="keyword">var</span> num3 = <span class="built_in">parseInt</span>(<span class="string">"hello"</span>); <span class="comment">//返回N</span></span><br><span class="line"><span class="keyword">var</span> num4 = <span class="built_in">parseInt</span>(<span class="string">""</span>); <span class="comment">//如果是空字符串或是真空的字符串返回NaN</span></span><br><span class="line"><span class="keyword">var</span> num5 = <span class="built_in">parseInt</span>(<span class="number">123</span>); <span class="comment">//返回123，如果是数字，简单返回</span></span><br><span class="line"><span class="keyword">var</span> num6 = <span class="built_in">parseInt</span>(<span class="string">"123a89bc"</span>); <span class="comment">//返回123</span></span><br><span class="line"><span class="keyword">var</span> num7 = <span class="built_in">parseInt</span>(<span class="string">"abc123"</span>); <span class="comment">//返回NaN</span></span><br><span class="line"><span class="keyword">var</span> num8 = <span class="built_in">parseInt</span>(<span class="string">'123.456'</span>); <span class="comment">//只能转换整数部分，小数部分直接舍掉</span></span><br><span class="line"><span class="keyword">var</span> num9 = <span class="built_in">parseInt</span>(<span class="string">"80.56ab"</span>);</span><br></pre></td></tr></table></figure><p><strong>ParseFloat()</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">例子：</span><br><span class="line"> <span class="keyword">var</span> num1 = <span class="built_in">parseFloat</span>(<span class="literal">false</span>); <span class="comment">//无论true或是false都是NaN</span></span><br><span class="line"> <span class="keyword">var</span> num2 = <span class="built_in">parseFloat</span>(<span class="literal">undefined</span>); <span class="comment">//NaN</span></span><br><span class="line"> <span class="keyword">var</span> num3 = <span class="built_in">parseFloat</span>(<span class="string">"hello"</span>); <span class="comment">//返回N</span></span><br><span class="line"> <span class="keyword">var</span> num4 = <span class="built_in">parseFloat</span>(<span class="string">""</span>); <span class="comment">//如果是空字符串或是真空的字符串返回NaN</span></span><br><span class="line"> <span class="keyword">var</span> num5 = <span class="built_in">parseFloat</span>(<span class="number">123</span>); <span class="comment">//返回123，如果是数字，简单返回</span></span><br><span class="line"> <span class="keyword">var</span> num6 = <span class="built_in">parseFloat</span>(<span class="string">"123a89bc"</span>); <span class="comment">//返回123</span></span><br><span class="line"> <span class="keyword">var</span> num7 = <span class="built_in">parseFloat</span>(<span class="string">"abc123"</span>); <span class="comment">//返回NaN</span></span><br><span class="line"> <span class="keyword">var</span> num8 = <span class="built_in">parseFloat</span>(<span class="string">'123.456'</span>); <span class="comment">//返回123.456</span></span><br><span class="line"> <span class="keyword">var</span> num9 = <span class="built_in">parseFloat</span>(<span class="string">"80.56ab"</span>);<span class="comment">//返回80.56</span></span><br></pre></td></tr></table></figure><p> </p><p>####<strong>二.其他类型转换为String类型</strong><br><strong>隐式转换</strong>：当两个操作数做”+”运算时，如果表达式中任意一边有字符串，”+”，为字符串连接符<br><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">例子：</span><br><span class="line"> <span class="keyword">var</span> n = <span class="number">200</span>;</span><br><span class="line"> n = n + <span class="string">""</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(n);<span class="comment">//"200"</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">typeof</span> n);<span class="comment">//string</span></span><br></pre></td></tr></table></figure></p><p><strong>显式（强制）转换：</strong> toString( ) 和 String()<br><br>1.toString() : 除了null undefined这两个类型不能调用 .toString() ，其他任何数据都可以调用.toString();</p><p>2.String() : 任何数据都可以调用此函数；<br><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">例子：</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> a = <span class="literal">undefined</span>;</span><br><span class="line"> a = <span class="built_in">String</span>(a);</span><br><span class="line"> <span class="built_in">console</span>.log(a);<span class="comment">//"undefined"</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">typeof</span> a);<span class="comment">//string</span></span><br></pre></td></tr></table></figure></p><p> </p><p>####<strong>三.其他类型转换为Boolean类型：</strong><br> 其它数据类型转换为boolean类型值为false只有这几种情况:0 NaN “” null undefined false<br><strong>隐式转换：</strong> 在数据类型之前加“!!”即可</p><p> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">例子：</span><br><span class="line"><span class="keyword">var</span> n = <span class="number">-200</span>;</span><br><span class="line"> <span class="keyword">var</span> b = !!n;</span><br><span class="line"> <span class="built_in">console</span>.log(b);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">typeof</span> b);</span><br></pre></td></tr></table></figure><p><strong>显式转换</strong>：调用Boolean（）：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">例子</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">NaN</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="number">0</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">null</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">undefined</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">"abc"</span>));<span class="comment">//false</span></span><br></pre></td></tr></table></figure><pre><code>**如若有错，请多多指教，谢谢广大网友**</code></pre>]]></content>
<tags>
<tag> javascript </tag>
</tags>
</entry>
<entry>
<title>事件绑定、事件监听、事件委托</title>
<link href="/2017/01/06/%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E3%80%81%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E3%80%81%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98/"/>
<url>/2017/01/06/%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E3%80%81%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E3%80%81%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98/</url>
<content type="html"><![CDATA[<p> 在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？</p><p>###<strong>事件绑定</strong></p><p> 要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。</p><p> 在JavaScript中，有三种常用的绑定事件的方法：</p><ul><li><p>在DOM元素中直接绑定；</p><ul><li>在JavaScript代码中绑定；</li><li>绑定事件监听函数。</li></ul><h4 id="在DOM中直接绑定事件"><a href="#在DOM中直接绑定事件" class="headerlink" title="在DOM中直接绑定事件"></a>在DOM中直接绑定事件</h4><p>我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看，<a href="http://www.runoob.com/jsref/dom-obj-event.html" target="_blank" rel="noopener">DOM事件</a>。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" onclick="hello()"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">function hello(){</span><br><span class="line">alert("hello world!");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h4 id="在JavaScript代码中绑定事件"><a href="#在JavaScript代码中绑定事件" class="headerlink" title="在JavaScript代码中绑定事件"></a>在JavaScript代码中绑定事件</h4><p>在JavaScript代码中（即<code>script</code>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">document.getElementById("btn").onclick = function(){</span><br><span class="line">alert("hello world!");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h4 id="使用事件监听绑定事件"><a href="#使用事件监听绑定事件" class="headerlink" title="使用事件监听绑定事件"></a>使用事件监听绑定事件</h4><p>绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。</p><h3 id="事件监听"><a href="#事件监听" class="headerlink" title="事件监听"></a><strong>事件监听</strong></h3><p>关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。</p><p>起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。</p><h4 id="W3C规范"><a href="#W3C规范" class="headerlink" title="W3C规范"></a>W3C规范</h4><p>语法：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.addEventListener(event, function, useCapture)</span><br></pre></td></tr></table></figure><p>event : （必需）事件名，支持所有<a href="http://www.runoob.com/jsref/dom-obj-event.html" target="_blank" rel="noopener">DOM事件</a>。<br>function：（必需）指定要事件触发时执行的函数。<br>useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。</p><p>注：IE8以下不支持。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn1"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">document.getElementById("btn1").addEventListener("click",hello);</span><br><span class="line">function hello(){</span><br><span class="line">alert("hello world!");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h4 id="IE标准"><a href="#IE标准" class="headerlink" title="IE标准"></a>IE标准</h4><p>语法：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.attachEvent(event, function)</span><br></pre></td></tr></table></figure><p>event：（必需）事件类型。需加“on“，例如：onclick。<br>function：（必需）指定要事件触发时执行的函数。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn2"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">document.getElementById("btn2").attachEvent("onclick",hello);</span><br><span class="line">function hello(){</span><br><span class="line">alert("hello world!");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h4 id="事件监听的优点"><a href="#事件监听的优点" class="headerlink" title="事件监听的优点"></a>事件监听的优点</h4><p>1、可以绑定多个事件。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn3"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var btn3 = document.getElementById("btn3");</span><br><span class="line">btn3.onclick = function(){</span><br><span class="line">alert("hello 1"); //不执行</span><br><span class="line">}</span><br><span class="line">btn3.onclick = function(){</span><br><span class="line">alert("hello 2"); //执行</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>常规的事件绑定只执行最后绑定的事件。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn4"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var btn4 = document.getElementById("btn4");</span><br><span class="line">btn4.addEventListener("click",hello1);</span><br><span class="line">btn4.addEventListener("click",hello2);</span><br><span class="line"></span><br><span class="line">function hello1(){</span><br><span class="line">alert("hello 1");</span><br><span class="line">}</span><br><span class="line">function hello2(){</span><br><span class="line">alert("hello 2");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>两个事件都执行了。</p><p>2、可以解除相应的绑定</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn5"></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var btn5 = document.getElementById("btn5");</span><br><span class="line">btn5.addEventListener("click",hello1);//执行了</span><br><span class="line">btn5.addEventListener("click",hello2);//不执行</span><br><span class="line">btn5.removeEventListener("click",hello2);</span><br><span class="line"></span><br><span class="line">function hello1(){</span><br><span class="line">alert("hello 1");</span><br><span class="line">}</span><br><span class="line">function hello2(){</span><br><span class="line">alert("hello 2");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h4 id="封装事件监听"><a href="#封装事件监听" class="headerlink" title="封装事件监听"></a>封装事件监听</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><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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn5"></span><br><span class="line"></span><br><span class="line">//绑定监听事件</span><br><span class="line">function addEventHandler(target,type,fn){</span><br><span class="line">if(target.addEventListener){</span><br><span class="line">target.addEventListener(type,fn);</span><br><span class="line">}else{</span><br><span class="line">target.attachEvent("on"+type,fn);</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">function removeEventHandler(target,type,fn){</span><br><span class="line">if(target.removeEventListener){</span><br><span class="line">target.removeEventListener(type,fn);</span><br><span class="line">}else{</span><br><span class="line">target.detachEvent("on"+type,fn);</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">var btn5 = document.getElementById("btn5");</span><br><span class="line">addEventHandler(btn5,"click",hello1);//添加事件hello1</span><br><span class="line">addEventHandler(btn5,"click",hello2);//添加事件hello2</span><br><span class="line">removeEventHandler(btn5,"click",hello1);//移除事件hello1</span><br></pre></td></tr></table></figure><h3 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a><strong>事件委托</strong></h3><p>事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。</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></pre></td><td class="code"><pre><span class="line"><input type="button" value="click me" id="btn6"></span><br><span class="line"></span><br><span class="line">var btn6 = document.getElementById("btn6");</span><br><span class="line">document.onclick = function(event){</span><br><span class="line">event = event || window.event;</span><br><span class="line">var target = event.target || event.srcElement;</span><br><span class="line">if(target == btn6){</span><br><span class="line">alert(btn5.value);</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>上面只是个例子，代码尽可能的简化了。在实际的代码中 我们可能用到jQuery的live()、delegate()、bind()、on()等。</p><h4 id="事件委托优点"><a href="#事件委托优点" class="headerlink" title="事件委托优点"></a>事件委托优点</h4><p>1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。<a href="http://www.diguage.com/archives/71.html" target="_blank" rel="noopener">实例分析JavaScript中的事件委托和事件绑定</a>，这篇文章写得还不错。</p><p><strong>传统写法</strong></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></pre></td><td class="code"><pre><span class="line"><ul id="list"></span><br><span class="line"> <li id="item1" >item1</li></span><br><span class="line"> <li id="item2" >item2</li></span><br><span class="line"> <li id="item3" >item3</li></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var item1 = document.getElementById("item1");</span><br><span class="line">var item2 = document.getElementById("item2");</span><br><span class="line">var item3 = document.getElementById("item3");</span><br><span class="line"></span><br><span class="line">item1.onclick = function(){</span><br><span class="line">alert("hello item1");</span><br><span class="line">}</span><br><span class="line">item2.onclick = function(){</span><br><span class="line">alert("hello item2");</span><br><span class="line">}</span><br><span class="line">item3.onclick = function(){</span><br><span class="line">alert("hello item3");</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p><strong>事件委托</strong></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></pre></td><td class="code"><pre><span class="line"><ul id="list"></span><br><span class="line"> <li id="item1" >item1</li></span><br><span class="line"> <li id="item2" >item2</li></span><br><span class="line"> <li id="item3" >item3</li></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var item1 = document.getElementById("item1");</span><br><span class="line">var item2 = document.getElementById("item2");</span><br><span class="line">var item3 = document.getElementById("item3");</span><br><span class="line"></span><br><span class="line">document.addEventListener("click",function(event){</span><br><span class="line">var target = event.target;</span><br><span class="line">if(target == item1){</span><br><span class="line">alert("hello item1");</span><br><span class="line">}else if(target == item2){</span><br><span class="line">alert("hello item2");</span><br><span class="line">}else if(target == item3){</span><br><span class="line">alert("hello item3");</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。</p><p><strong>传统写法</strong></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></pre></td><td class="code"><pre><span class="line"><ul id="list"></span><br><span class="line"> <li id="item1" >item1</li></span><br><span class="line"> <li id="item2" >item2</li></span><br><span class="line"> <li id="item3" >item3</li></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var list = document.getElementById("list");</span><br><span class="line"></span><br><span class="line">var item = list.getElementsByTagName("li");</span><br><span class="line">for(var i=0;i<item.length;i++){</span><br><span class="line">(function(i){</span><br><span class="line">item[i].onclick = function(){</span><br><span class="line">alert(item[i].innerHTML);</span><br><span class="line">}</span><br><span class="line">})(i)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var node=document.createElement("li");</span><br><span class="line">var textnode=document.createTextNode("item4");</span><br><span class="line">node.appendChild(textnode);</span><br><span class="line">list.appendChild(node);</span><br><span class="line"></span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>点击item1到item3都有事件响应，但是点击item4时，没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。</p><p><strong>事件委托</strong></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></pre></td><td class="code"><pre><span class="line"><ul id="list"></span><br><span class="line"> <li id="item1" >item1</li></span><br><span class="line"> <li id="item2" >item2</li></span><br><span class="line"> <li id="item3" >item3</li></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">var list = document.getElementById("list");</span><br><span class="line"></span><br><span class="line">document.addEventListener("click",function(event){</span><br><span class="line">var target = event.target;</span><br><span class="line">if(target.nodeName == "LI"){</span><br><span class="line">alert(target.innerHTML);</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">var node=document.createElement("li");</span><br><span class="line">var textnode=document.createTextNode("item4");</span><br><span class="line">node.appendChild(textnode);</span><br><span class="line">list.appendChild(node);</span><br><span class="line"></span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>当点击item4时，item4有事件响应。说明事件委托可以为新添加的DOM元素动态的添加事件。</p></li></ul><blockquote><p>本文标题:事件绑定、事件监听、事件委托<br>文章作者:Tsrot<br>发布时间:2016年08月12日 - 13时37分<br>最后更新:2017年10月01日 - 15时04分<br>原始链接:<a href="http://blog.xieliqun.com/2016/08/12/event-delegate/" target="_blank" rel="noopener">http://blog.xieliqun.com/2016/08/12/event-delegate/</a><br>许可协议: “署名-非商用-相同方式共享 3.0” 转载请保留原文链接及作者。</p></blockquote>]]></content>
<tags>
<tag> 事件 </tag>
</tags>
</entry>
<entry>
<title>解决inline、inline—block之间空隙问题</title>
<link href="/2017/01/01/%E8%A7%A3%E5%86%B3inline%E3%80%81inline%E2%80%94block%E4%B9%8B%E9%97%B4%E7%A9%BA%E9%9A%99%E9%97%AE%E9%A2%98/"/>
<url>/2017/01/01/%E8%A7%A3%E5%86%B3inline%E3%80%81inline%E2%80%94block%E4%B9%8B%E9%97%B4%E7%A9%BA%E9%9A%99%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<h1 id="发现问题"><a href="#发现问题" class="headerlink" title="发现问题"></a>发现问题</h1><p> 代码如下：</p><p> <img src="http://img.blog.csdn.net/20171103125552006?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="img"></p><p> 效果如下：</p><p> <img src="http://img.blog.csdn.net/20171103125736933?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2llX2JvYm8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="img"></p><p>解决问题：</p><p> 原因：由于换行字符会被浏览器解析成一个空格符，所以就会产生一个间隙</p><p> 解决方法：</p><p> 方法1：将行内或行内块元素写在一行，不过不建议这么写，这样编排不够简洁优雅。</p><p> 方法2：给父元素设置font-size：0；因为空格符也是字符，设置font-size：0 即可消除空隙。</p><p> 方法3：可以通过margin来调整位置</p><p> 方法4：将img设为块元素，即display为block</p>]]></content>
<tags>
<tag> css </tag>
</tags>
</entry>
</search>