-
Notifications
You must be signed in to change notification settings - Fork 3
/
search.xml
440 lines (440 loc) · 215 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[清空 git 的 commit 记录]]></title>
<url>%2Fgit-init-commit-log%2F</url>
<content type="text"><![CDATA[有时候 git 提交不该提交的内容或者有些 log 过于多余，在我的博客提交记录含有草稿文件，先抹去这些提交记录。本文介绍如何初始化 git commit log。 是不是很干净呢？ 12345678910111213141516$ git checkout --orphan empty-branch$ git branch$ git status$ git rm --cached -rf themes$ git diff$ git add .$ git commit -n -m 'init git log'$ git checkout dev$ git checkout -b dev-bak$ git checkout empty-branch$ git status$ git branch -D dev# 重命名分支$ git branch -m dev$ git log$ git push -f origin dev Sublime 的列选择以上内容来自 history，那么多行进行多行编辑呢？Ctrl + Shift + Up。当然相同内容可以使用 Command + D 更多内容可以点击列选择 - Sublime Text 3 文档 VSCode 的列选择option + 鼠标点选 option + shift + 鼠标拖动 同时也可以设置快捷键同 Sublime 更多内容可以点击怎样在 VSCode 中进行列选择? - 知乎]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title><![CDATA[centos如何升级nodejs]]></title>
<url>%2Fcentos-update-nodejs%2F</url>
<content type="text"><![CDATA[更新日志curl –silent –location https://rpm.nodesource.com/setup_8.x | sudo bash -yum -y install nodejs记得删除老版本的npm noderm /usr/local/bin/npm yum remove nodesource-release nodejsyum clean allrm -rf /var/cache/yum/rm /etc/yum.repos.d/nodesource-el.repoyum -y remove nodejs 参考]]></content>
</entry>
<entry>
<title><![CDATA[node如何设置process.env]]></title>
<url>%2Fnode-process-env%2F</url>
<content type="text"><![CDATA[在使用debug需要设置$env:DEBUG = "*,-not_this"执行相应的环境。 echo $DEBUG输出相应的环境配置。Mac下是可以使用DEBUG="*" node bin/before-parse.js。 https://github.com/visionmedia/debug/blob/master/src/node.js “dev-mac”: “ export NODE_ENV=development&& nodemon –harmony –use_strict index.js -w “,“dev-win”: “ set NODE_ENV=development&& nodemon –harmony –use_strict index.js -w “, windows 不太清楚，*NIX 系统下规则如下：export NODE_ENV=production && node xxx.js 这样在当前命令行下后续的命令中读取 NODE_ENV，都会得到 production 值；如果直接使用 NODE_ENV=production node xxx.js，则 NODE_ENV 的有效性仅限当前命令，不会对后续命令有影响。 可以使用cross-env http://sorex.cnblogs.com/p/6200940.html http://yijiebuyi.com/blog/1bfcf43248a873b39a3471901e764b68.html]]></content>
<tags>
<tag>nodejs</tag>
</tags>
</entry>
<entry>
<title><![CDATA[docker-start]]></title>
<url>%2Fdocker-start%2F</url>
<content type="text"><![CDATA[给一个正在运行的Docker容器动态添加Volume http://dockone.io/article/149https://blog.csdn.net/dream_broken/article/details/52314993https://deepzz.com/post/the-docker-volumes-basic.html docker machine 静态ip https://github.com/fivestars/docker-machine-ipconfig docke固定ip https://github.com/johnnian/Blog/issues/16 docker run -itd –network bridge –ip 192.168.3.88 springjk/webdev /bin/bash docker run -itd –network host –ip 192.168.3.88 springjk/webdev /bin/bash docker: Error response from daemon: user specified IP address is supported on user defined networks only. larvel 环境 ssh登录 docker exec -it de1aeb89e0f5 /bin/bashhttps://blog.csdn.net/qq_34021712/article/details/73379851 docker镜像位置： For someone who is using Docker toolbox (that uses docker-machine), the answers concerning boot2docker on Mac OS X is not valid. The docker-machine VM is called “default” and it exists in the /Users//.docker/machine/machines/default/ directory. docker image是什么，存储在什么位置 ps -u $USER | grep Dockerdocker镜像地址 /Users/{YourUserName}/Library/Containers/com.docker.docker/Data 下载地址: https://www.docker.com/community-edition#/downloadhttps://github.com/docker/kitematic/releases rsync 常见问题 更新日志参考]]></content>
<tags>
<tag>docker</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Mac配置终端梯子]]></title>
<url>%2Fterminal-proxy-ladder%2F</url>
<content type="text"><![CDATA[最初的起因是由于https://gist.github.com/作为submodule的时候无法更新，于是想到终端配置访问该网站。最初以为ShadowsocksX-NG配置全局代理就可以，然后并无软用。 首先你得有相关的ss账号，可以自己部署，也可以购买相关的服务。 ss服务1$ sublime ~/.zshrc 相关的配置信息可以从这里获取 方法1: 12export http_proxy=http://127.0.0.1:1087export https_proxy=http://127.0.0.1:1087 方法2: 1export ALL_PROXY=socks5://127.0.0.1:1086 12$ source ~/.zshrc$ curl www.google.com 另外推荐httpie。在终端使用http命令，调试api接口 HTTPie—aitch-tee-tee-pie—is a command line HTTP client with an intuitive UI, JSON support, syntax highlighting, wget-like downloads, plugins, and more. 1$ brew install httpie ss服务推荐 吾皇 http://kingfast.club/index.php/index/register/?yqi=6711 可按月按年按流量付费，价格实惠，就光查阅资料够用 https://www.vultr.com/?ref=7872193-4F 需要自己搭建。参考教程自建ss服务器教程 · Alvin9999/new-pac Wiki 轻松在 VPS 搭建 Shadowsocks 翻墙 ($5/月 支付宝) - DiyCode linode https://www.yunti.website/ https://pandafan.im/ 同事用过 多态 体验过一个月，有多终端App https://monocloud.me/ 借同事的账号用过，速度还不错 ~鱼摆摆~ 相关教程 https://github.com/Alvin9999/new-pac/wiki/自建ss服务器教程 https://www.diycode.cc/topics/738?from=groupmessage&isappinstalled=0 客户端 wingy GoAgentX ShadowsocksX / ShadowsocksX-NG-R8 其他相关的软件 以下并未实践过，看到关键词做个简单的记录 Proxifier privoxy http://blog.devtang.com/2012/12/08/use-privoxy/ proxychains-ng]]></content>
<tags>
<tag>Mac</tag>
<tag>工具</tag>
</tags>
</entry>
<entry>
<title><![CDATA[使用wepy开发小程序总结]]></title>
<url>%2Fwepy-summary%2F</url>
<content type="text"><![CDATA[使用wepy开发小程序效率提升了很多，相比使用小程序原生框架开发，开发体验提升了好几个等级。如果是从Vue过来的，可能会对wepy部分语法不熟悉，导致自己掉进想当然(Vue习惯的写法)的坑里，所以还是要熟读wepy的文档，理解一些新的概念。我个人觉得wepy是类Vue。mpvue跟Vue更加亲一些。当然还是要感谢作者@Gcaufy提供这么好的框架，这也是为何个人项目会收入到公司项目的原因吧。 WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。 环境配置1234$ npm install wepy-cli -g$ wepy init standard$ npm install$ wepy build --watch 使用微信开发者工具导入项目，关闭ES6 转 ES5 问题微信小程序 button 去除 border https://blog.csdn.net/Wu_shuxuan/article/details/78209125 https://www.cnblogs.com/miu-key/p/7156070.html https://www.jianshu.com/p/2e5ce95c213e wepy-plugin-image 无法转换 // function createDemoComponents(prefix, component, lenght) { // const components = {} // for (let i = 0; i < lenght; i++) { // const key = prefix + i // components[key] = component // } // return components // } // const demoComponents = createDemoComponents(‘btn’, DoButton, 10) // console.log(demoComponents) // 组件无效 1:1 error Resolve error: plugins.forEach is not a function import/no-unresolved 1:1 error Resolve error: plugins.forEach is not a function import/no-extraneous-dependencies 1:1 error Resolve error: plugins.forEach is not a function import/no-duplicates 1:1 error Resolve error: plugins.forEach is not a function import/extensions 1:1 error Resolve error: plugins.forEach is not a function import/no-named-as-default 1:1 error Resolve error: plugins.forEach is not a function import/no-named-as-default-member 1:19 error Unable to resolve path to module ‘utils/service’ import/no-unresolved repeat 不支持添加 @tap wepy input 数据绑定 https://github.com/Tencent/wepy/issues/321 less import 路径 aliashttps://www.google.com/search?q=wepy+less+import&oq=wepy+less+import&aqs=chrome..69i57.628j0j4&sourceid=chrome&ie=UTF-8 小程序 media 支持 image mode background-size wepy 图片上传资源服务器 base64支持 twoWay: true ？双向绑定？ 小程序 canvas如何隐藏 display: none; 可行 周边工具 https://github.com/wdfe/weweb https://chemzqm.github.io/wept/#/home?id=%E7%AE%80%E4%BB%8B方案对比 dowevue2minalabrador资源 awesome-wepy mpvue 参考文档 小程序官方文档 微信小程序组件化开发框架WePY官方文档]]></content>
<tags>
<tag>wepy</tag>
<tag>小程序</tag>
</tags>
</entry>
<entry>
<title><![CDATA[利用trivas自动部署hexo的blog]]></title>
<url>%2Ftravis-auto-publish-blog%2F</url>
<content type="text"><![CDATA[是什么原因让你折腾travis？是懒!懒!懒！每次提交代码后台又要手动输一次hexo d -g，真心觉得麻烦，作为程序猿，就应该学会偷懒，可以少输几次相同的命令，心情甚是愉悦。 当然之前也有接触过travis，比如x-citravis的简单使用，团队博客的部署。 相关步骤记录travis-ci 添加项目使用github账号登录travis 并添加相关的项目 GitHub生成Personal Access Tokensettings->Developer settings->Personal access tokens->点击Generate new token 生成完后拷贝记录下来，后面travis登录需要用到。刷新页面后台token将不可见，只能重新生成。 配置.travis.yml123456789101112➜ gem install travis --no-rdoc --no-ri➜ huixisheng.github.com git:(dev) ✗ travis login --github-token [上一步记录的token]Successfully logged in as huixisheng!➜ huixisheng.github.com git:(dev) ✗ travis encrypt-file ~/.ssh/github --add➜ huixisheng.github.com git:(dev) ✗ travis encrypt-file ~/.ssh/github-ci --addencrypting /Users/huixisheng/.ssh/github-ci for huixisheng/huixisheng.github.comstoring result as github-ci.encstoring secure env variables for decryptionMake sure to add github-ci.enc to the git repository.Make sure not to add /Users/huixisheng/.ssh/github-ci to the git repository.Commit all changes to your .travis.yml. 如果安装travis无反应，可以更新gem sources --add https://gems.ruby-china.org/国内镜像源 然后看下.travis.yml是不是增加了: 1234567891011121314151617181920- openssl aes-256-cbc -K $encrypted_11753ec45e06_key -iv $encrypted_11753ec45e06_iv -in github-ci.enc -out ~\/.ssh/github-ci -d``` 目录下生成`github-ci.enc`。## 其他方法 ##主要原理是通过 `https://<token 刚才要记录的>@github.com/owner/repo.git`去提交构建生成的内容。相关阅读- [Authenticate with GitHub using token](https://stackoverflow.com/questions/18935539/authenticate-with-github-using-token)- https://developer.github.com/v3/auth/#working-with-two-factor-authentication## 总结 ##网上确实有很多的教程，但是如果不去实际操作下，那个教程永远是别人的，还有就是根据相同的教程，别人可以配置成功，而我们不一定可以配置成功，比如存在电脑环境不一样。nodejs版本不一样等等。有可能你会碰到意想不到的问题。只有自己真正折腾过了，才知道坑有多深，城市套路有多少。## 碰到问题 ## travis No such file or directory:bss_file.c:398:fopen(‘~/.ssh/id_rsa’,’w’)123`-out ~\/.ssh/id_rsa -d` -> `-out ~/.ssh/id_rsa -d`- https://github.com/travis-ci/travis.rb/issues/555 remote: Invalid username or password.fatal: Authentication failed for ‘https://github.com/huixisheng/huixisheng.github.com.git/'FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlError: remote: Invalid username or password.12在`.travis.yml`添加`ssh -T [email protected]`测试，发现ssh的配置是没问题的。 0.59s$ ssh -T [email protected]: Permanently added the RSA host key for IP address ‘192.30.253.112’ to the list of known hosts.Hi cosmeapp/cosmeapp.github.com! You’ve successfully authenticated, but GitHub does not provide shell access.The command “ssh -T [email protected]“ failed and exited with 1 during .`再次添加travis-ci居然成功了。 参考 Hexo 自动部署到 Github 使用 Travis 自动部署 Hexo 到 Github 与 自己的服务器 使用Travis CI自动部署Hexo博客 Travis CI 系列：自动化部署博客]]></content>
<tags>
<tag>trivas</tag>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title><![CDATA[App呼起京东和淘宝指定的页面]]></title>
<url>%2Fcallapp-taobao-jd%2F</url>
<content type="text"><![CDATA[需求: 需要在自己的App直接打开京东和淘宝指定的页面。 对于ios，首先想到的是根据页面的js找到对应的universal link。ios9以下和安卓就用schema跳转。 对于京东的链接 https://pro.m.jd.com/mall/active/3pR34myNmV7cXiR4DjzUSRuu5hqA/index.html?ad_od=1&utm_source=kong&utm_medium=zssc&utm_campaign=t_1000210271_100854&utm_term=ea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854&jd_pop=ea62df13-dc13-44c8-ae00-59b5683ec8f2&abt=0 分析源码https://st.360buyimg.com/common/commonH_B/js/m_common_merge2.1.js 网上还找到这个版本的js 1234567891011121314151617181920212223242526aE(e.openAppBtnId, "click", function() { aw("0"); var aU = this.getAttribute("id"); var aR = aI[aU]; // 添加断点，跟踪代码 if (!i) { var aT = document.createElement("iframe"); aT.id = aj; document.body.appendChild(aT); document.getElementById(aj).style.display = "none"; document.getElementById(aj).style.width = "0px"; document.getElementById(aj).style.height = "0px"; i = true } if (aR.openAppCallback) { var aS = aR.openAppCallbackSource ? aR.openAppCallbackSource : null; aR.openAppCallback.call(this, aS) } f(aR, "appDownOpenIntervalTime"); aH(aR); if (l.isUseUniversalLinks && !aR.noJdApp) { az(aR) } else { af(aR) }}) 12345678910111213141516function az(aS) { var aV = aQ(aS, true); var aT = aS.universalLinksUrl + "/ul/ul.action?" + aV; // 可以判定aT应该就是universal links if (navigator.userAgent.indexOf("baidubrowser") >= 0) { window.location.href = aT } else { var aR = document.createElement("a"); aR.setAttribute("href", aT); aR.style.display = "none"; document.body.appendChild(aR); var aU = document.createEvent("HTMLEvents"); aU.initEvent("click", !1, !1); aR.dispatchEvent(aU) }} 测试发现根据代码获得universal link只能打开京东的首页https://linkst.m.jd.com/ul/ul.action?openApp.jdMobile://virtual?params={"category":"jump","des":"m","sourceValue":"babel-act","sourceType":"babel","url":"https%3A%2F%2Fpro.m.jd.com%2Fmall%2Factive%2F3pR34myNmV7cXiR4DjzUSRuu5hqA%2Findex.html%3Fad_od%3D1%26utm_source%3Dkong%26utm_medium%3Dzssc%26utm_campaign%3Dt_1000210271_100854%26utm_term%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854%26jd_pop%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2%26abt%3D0","M_sourceFrom":"H5_UL","msf_type":"click","NoJumpDownLoadPage":false,"downAppIos":"https%3A%2F%2Fst.360buyimg.com%2Fcommon%2FdownLoadCommon%2FdownLoadAppIOSMPage.html","locationHref":"https%3A%2F%2Fpro.m.jd.com%2Fmall%2Factive%2F3pR34myNmV7cXiR4DjzUSRuu5hqA%2Findex.html%3Fad_od%3D1%26utm_source%3Dkong%26utm_medium%3Dzssc%26utm_campaign%3Dt_1000210271_100854%26utm_term%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854%26jd_pop%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2%26abt%3D0","m_param":{"m_source":"0","event_series":{},"jda":"122270672.2074471510.1521534916.1522766295.1522991099.5","usc":"kong","ucp":"t_1000210271_100854","umd":"zssc","utr":"ea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854","jdv":"122270672%7Ckong%7Ct_1000210271_100854%7Czssc%7Cea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854%7C1522991529755","ref":"https%3A%2F%2Fpro.m.jd.com%2Fmall%2Factive%2F3pR34myNmV7cXiR4DjzUSRuu5hqA%2Findex.html%3Fad_od%3D1%26utm_source%3Dkong%26utm_medium%3Dzssc%26utm_campaign%3Dt_1000210271_100854%26utm_term%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854%26jd_pop%3Dea62df13-dc13-44c8-ae00-59b5683ec8f2%26abt%3D0","psn":"2074471510|5","psq":14,"unpl":"V2_ZzNsbRBVFkAiXE9dZx5dVTUfFwlEUV9FdwFHSClNDgFkURpaF1MXQWlJKFRzEVQZJkB8XUNRRAklTShUehhVAWIzEVxCXl8UdxREVWoaXw5mBRldRGdDJXUJR1V4GV0GYQMibXJXQSV0OEVVfRxZA2cHElxyURNHdV1PBC8FCVJvAw5YRABBCSYIE1JnGQhWbwQRW0FQQ0ImOEBS","pc_source":"","mba_muid":"2074471510","mba_sid":"15229910996761532999810513868","mt_xid":"","mt_subsite":""},"SE":{"mt_subsite":"","__jdv":"122270672%7Ckong%7Ct_1000210271_100854%7Czssc%7Cea62df13-dc13-44c8-ae00-59b5683ec8f2-p_1999-pr_1076-at_100854%7C1522991529755","unpl":"V2_ZzNsbRBVFkAiXE9dZx5dVTUfFwlEUV9FdwFHSClNDgFkURpaF1MXQWlJKFRzEVQZJkB8XUNRRAklTShUehhVAWIzEVxCXl8UdxREVWoaXw5mBRldRGdDJXUJR1V4GV0GYQMibXJXQSV0OEVVfRxZA2cHElxyURNHdV1PBC8FCVJvAw5YRABBCSYIE1JnGQhWbwQRW0FQQ0ImOEBS","__jda":"122270672.2074471510.1521534916.1522766295.1522991099.5"}} 初步怀疑: 是不是参数没有encode schema的大小写是不是有问题 猜测的结论 京东和微信的关系，京东的schema是白名单，打开App没有限制，而对universal link 的测试不充分，导致相应的链接有问题 通过测试其他的app打开京东的页面，首次有弹框是否打开京东的提示，确认后下次就没有，然而美妆心得的App就是无反应。 近期苹果公司iOS 9系统策略更新，限制了http协议的访问，此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单，才可正常检查其他应用是否安装。 来自 https://www.jianshu.com/p/a8cce94d508e 对于淘宝的链接https://h5.m.taobao.com/awp/core/detail.htm?id=528294025825&scm=1007.12144.81309.242610_242610&pvid=2f68b234-58a1-47de-aa7b-266c7abe0b48&spm=a217e.7680114.75b100109.d5n0 定位代码123456789101112131415161718192021222324252627e.exports = function(e) {var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};if ("TB" != n.aliapp.appname && "TB-PD" != n.aliapp.appname) { t.point = t.point || {}, t.point.callType = t.callType; var a = (0, r.default)(e, t) , s = { package: "com.taobao.taobao" }; switch (t.callType) { case "universalLink": if (n.os.isIPhone && n.os.version.gte("9.0")) { var l = (0, o.appendParams)(t.universalLink || "//b.mashort.cn/ulk/taobao", { smburl: encodeURIComponent(a) }); t.redirectUrl && (l = (0, o.appendParams)(l, { redirectUrl: encodeURIComponent(t.redirectUrl) })), (0, i.default)(l, "universalLink") } else (0, i.default)(a, "scheme", s); break; 获得的universal link。测试发现其实分享的淘宝口令http://m.tb.cn/h.WE82pie本身就是universal link 扩展阅读 MobLink网页跳转app指定界面技术简介之 URL Scheme 突破微信跳转限制－Universal-Links那些坑 关于通过H5页面唤起Native客户端的介绍 Universal links 介绍 参考 H5端唤醒移动客户端程序 京东在html5页面中打开本地app的解决方案]]></content>
<tags>
<tag>schema</tag>
<tag>App</tag>
</tags>
</entry>
<entry>
<title><![CDATA[前端精彩文章收集]]></title>
<url>%2Ffront-end-articles-collected%2F</url>
<content type="text"><![CDATA[本文收集整理优秀的前端资源。方便随时查阅。 目录结构 Web前端常用参考手册 优秀的前端技术博客 CSS3系列 Web前端问答社区 Web前端网址导航 前端框架系列 前端性能系列 前端规范系列 前端兼容性系列 CSS系列 JavaScript系列 不可错过的网站推荐系列 前端总结文章系列 其它总结 前端社区活动 更新历史 Web前端常用参考手册 w3chelpW3help.org是由国内多家关注Web标准的公司、团体、标准组织，及科研单位等共同创立的Web标准推广网站。 CSS3参考手册 caniuse browsersupport非常霸气，输入css属性可以查看该属性在各种浏览器下面的兼容性问题。 overapi 超全Cheat Sheet网站，涵盖几乎所有主流开发语言及框架API与常用命令，工程师必备。 Markdown 语法说明 ECMAScript 5.1中文版 http://w3c.github.io/html/ 前端兼容性相关超级实用工具 ES6 的功能侦测库 ES-Checker 相关文章 ECMAScript 6 compatibility table Node.js ES2015/ES6, ES2016 and ES2017 support The CSS3 Test HTML5test - How well does your browser support HTML5? CSS Media Queries Test Modernizr: the feature detection library for HTML5/CSS3 Can I use… Support tables for HTML5, CSS3, etc Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env 其他http://browserl.ist/ https证书测试在线工具 https://www.chinassl.net/ssltools/ssl-checker.html Test your HTML5 support http://chrome.360.cn/test/html5/index.html https://github.com/kripken/html5test https://github.com/WebPlatformTest/HTML5test http://html6test.com/about.html 优秀的前端技术博客 w3cplus这是我经常去的一个Blog，感觉站长和其他维护改Blog的成员分享的技术和写的精彩文章，在这里我学到了很多，开拓了视野。在此感谢w3cplus。 张鑫旭BLOG张爷，就这么称呼吧。虽然未识其庐山正面目。但是风趣的写作风格和精彩的文章，对知识的探索和执着，都给人留下了深刻的影响。 梦想天空这个博客应该是前端程序员门的资源宝藏吧。 汤姆大叔的博客这是搜牛的同事推荐的。之前知道有这么一号牛人，只是其文章都没有好好地阅读过。就单单看了下首页，在这里肯定能学到很多js方面的知识。有空一定要好好读下。 司徒正美感觉博主在业界很低调，但是他写的博文，特别是js方面的文章真的好高调。就目前为止我印象最深了就是博主写的mass框架和博文 javascript正则表达式。当然肯定是我关注的太少了，里面肯定有很多很多的干货的。 为之漫笔（李松峰）为之漫笔（李松峰），本博客专注于Web前后端技术、移动平台开发技术、交互设计和技术翻译。js圣经-《JavaScript高级程序设计》译者。 鬼群作品秀 CSS3系列 CSS3 UI 库 CSS3 属性详解学习CSS3很好的资源。w3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以css3、html5、Javascript和各类demo为主。 Animate.css Web前端问答社区项目中碰到了问题，该去哪，谷歌、度娘不行的话，不妨试试以下网址，或许你就可以找到解决问题的办法。 Ask.W3CPLUS社区！Ask.W3cplus社区是由W3CPLUS全体成员创建，主要目的为前端爱好者提供一个交流平台，欢迎大家在此提问和回复！ stackoverflow是全球IT界最受欢迎的技术问答网站（更为准确的说，stackoverflow Stack Overflow 现在只是 Stack Exchange network 的子站点而已）之一，目前，其每月不重复的访问用户超过1600万；每月网页浏览量（PV）增长了近6倍，达到9500万。 德问尊德性，道问学，以致知。德问，编程领域的社交问答。帮您解答各类编程问题，交流与扩展专业知识及技能。 知乎知乎是一个真实的网络问答社区，社区氛围友好、理性、认真，连接了各行各业的精英。他们分享着彼此的专业知识、经验、见解，为中文互联网源源不断地提供高质量的信息。“在这里，发现更大的世界。” segmentfault这是一个专业面向开发者的技术问答社区，你可以在这里提出任何与开发相关的问题，并得到同行的解答和评价。 w3cfuns是一个专注于web前端开发行业的综合性门户网站，以”互联网标准化”为目标，致力于推动前端开发在互联网的发展，通过众多专业的服 务形式，服务于中国互联网产业，以推动web标准在中国的发展。自创建以来吸引了众多web前端开发工程师的加盟，引领着中国互联网的标准化潮流。 传送之门这个网站应该还是在开发中。程序员专属于学习、休闲社区。收藏网页链接，轻松珍藏优秀资源,制作资源特辑，整理和分享精彩内容,发现兴趣爱好，生活远不只是编码 CNode：Node.js专业中文社区 stack overflow是全球IT界最受欢迎的技术问答网站（更为准确的说，Stack Overflow 现在只是 Stack Exchange network 的子站点而已）之一，目前，其每月不重复的访问用户超过1600万；每月网页浏览量（PV）增长了近6倍，达到9500万。 quora 国外的知乎 Web前端网址导航 UED网址导航 web前端开发联盟 贤心-前端圈 uxd123-前端设计导航 设计师网站导航优设网设计师网址导航为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引。每周更新及时，是优秀网页设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！ 123.jser.us/ 前端网址导航 http://codingheroes.io/resources/ 前端框架系列 bootstrap大名鼎鼎!!!Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap中文网翻译bootsrap，当然不仅仅只是bootstrap，还有其他优秀的前端框架。 css解决方案这是为之将把项目中经常碰到的前端的问题整理成一套解决方案。非常实用。 支付宝的AliceAlice是漫游仙境的童话女神，是支付宝的样式解决方案，是一套精选的基于 CMD 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。 国内优秀Web前端Javascript框架库汇总列表(会长期更新) NEC : 更好的CSS样式解决方案 Google Polymer Webui 渴切-获取轻量级 响应css框架 前端性能系列 浏览器的工作原理：新式网络浏览器幕后揭秘 PNG的秘密—— 一淘前端分享会 前端规范系列 Google Javascript编程规范 揭秘wdl-微博交互规范的成长历程 前端兼容性系列 原创-IE6 PNG透明终极解决方案-打造W3Cfuns-IE6PNG最强帖 inline-block 前世今生 那些年我们一起清除过的浮动 完美解决IE6不支持position:fixed的bug CSS的盒子模型（Box Model） CSS系列 可用性更好的CSS隐藏文字技术(CSS图片替换文字) css解决方案 html常用结构 JavaScript系列 Javascript作用域原理 javascript有关的10个怪癖和秘密 JavaScript 秘密花园 JavaScript库 解构 深入JavaScript库源代码，条分缕析，顿悟最优秀JavaScript库的核心机制 不可错过的网站推荐系列 腾讯2012年伦敦奥运会设计：前端项目回顾 国外的视差滚动效果 前端总结文章系列 十日谈 如何成为一名优秀的web前端工程师（前端攻城师）？ 其它总结 Web开发相关资源、网站、工具推荐 前端社区活动 w3ctech 前端圈 D2前端技术论坛 WebRebuild HTML5梦工场 更新历史2018-04-01 add 前端兼容性相关超级实用工具 2016-10-22 文章简要修改 添加文章目录结构]]></content>
<tags>
<tag>前端资源</tag>
<tag>收藏夹</tag>
<tag>前端文档</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Object.assign引起的页面显示空白]]></title>
<url>%2Fobject-assign%2F</url>
<content type="text"><![CDATA[线上的页面在华为的设备出现空白，通过真机调试发现报错如下: 1Uncaught TypeError: Object function Object() { [native code] } has no method 'assign' 解决版本1import 'core-js/fn/object/assign'; 其他相关问题解决ant-design 直接使用Object.assign 有兼容性问题（Android5，iOS8.4） #87 统一使用 object-assign How do I get Object.assign to work with 6to5 polyfill? 兼容性 https://kangax.github.io/compat-table/es6/#test-Proxy,_internal_'get'_calls_Object.assign https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 浏览器es支持检测]]></content>
<tags>
<tag>es6</tag>
<tag>javascript</tag>
<tag>Object</tag>
</tags>
</entry>
<entry>
<title><![CDATA[自动化打包App]]></title>
<url>%2Fci-build-app%2F</url>
<content type="text"><![CDATA[jenkins安装cocoapodsxcodebuild1$ pod update --verbose --no-repo-update 推荐阅读文档]]></content>
</entry>
<entry>
<title><![CDATA[unit-test]]></title>
<url>%2Funit-test%2F</url>
<content type="text"><![CDATA[测试框架 karma https://mochajs.org Jasmine Qunit JsTestDriver JSUnit https://github.com/totorojs/totoro 测试框架对比 Javascript单元测试框架Qunit和Jasmine的比较 断言库 chai 教程 ruanyf/mocha-demos 测试框架 Mocha 实例教程 http://wiki.jikexueyuan.com/project/node-lessons/mocha-chai-phantomjs.html BDD / TDD区别12345678910111213141516171819// TDDsuite('Array', function() { setup(function() { }); test('equal -1 when index beyond array length', function() { assert.equal(-1, [1,2,3].indexOf(4)); });});// BDDdescribe('Array', function() { before(function() { }); it('should return -1 when no such index', function() { [1,2,3].indexOf(4).should.equal(-1); });}); 来自: http://taobaofed.org/blog/2015/12/10/nodejs-unit-tests/ 关于TDD、BDD和DDD的一些看法 TDD与BDD的差别 覆盖率 istanbul 问题-- recursive执行子目录 Mocha默认运行test子目录里面的测试脚本。所以，一般都会把测试脚本放在test目录里面，然后执行mocha就不需要参数了。 mocha.opts api 接口测试 接口测试 测试来带个节奏之 API 测试工具篇 http://pythonhackers.com/p/tsq/node-autotest 让你的 Node.js 应用接口稳如狗：如何使用 Mocha, Chai 和 SuperTest 写测试代码 https://www.npmjs.com/package/moa-api API自动化测试利器——Postman casperjs+mocha+chai搭建E2E测试环境 相关文档 Mocha.js官方文档翻译 —— 简单、灵活、有趣 在Node.js上用什么测试框架好？ 虚拟座谈会：代码测试比率、测试驱动开发及行为驱动开发 如何进行前端自动化测试？ 前端单元测试探索 前端自动化测试工具总结 前端测试工具集锦 其他 sinon https://github.com/visionmedia/superagent/tree/master/test/node supertest]]></content>
<tags>
<tag>单元测试</tag>
<tag>资源</tag>
</tags>
</entry>
<entry>
<title><![CDATA[mocha]]></title>
<url>%2Fmocha%2F</url>
<content type="text"><![CDATA[例子 https://github.com/huixisheng/lab/tree/master/test https://github.com/ruanyf/mocha-demos https://github.com/mochajs/mocha/tree/master/test https://github.com/vuejs/vue-test-utils-mocha-webpack-example https://github.com/mochajs/mocha/tree/f24607e6b04d129610613592d19f5a5af9b65d51/docs/example https://github.com/airware/webdriver-mocha-async-await-example 其他关键词 SuperTest Istanbul Magnum CI superagent http://visionmedia.github.io/superagent/ karma casperjs 碰到的问题如何测试es6的module出现如下报错1234SyntaxError: Unexpected token import at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:607:28) 1$ ./node_modules/mocha/bin/mocha --require babel-register --require babel-polyfill mocha --compilers js:babel-register 已经废弃。具体见compilers deprecation 相关issue SyntaxError: Unexpected token import #3228 ES6 import not working when using babel in Mocha. #2655 Babel unexpected token import when running mocha tests Move the invocation into the parens that contain the function wrap-iife 异步的回调没有添加done()1Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. 如果确实耗时过长的的设置--timeout，this.timeout(3000); 相关issue timeout of 2000ms exceeded. Ensure the done() callback is being called in this test. #2025 其他ReferenceError: window is not defined https://www.npmjs.com/package/mocha-jsdom get request(node:13054) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 63): [object Object] https://objcer.com/2017/12/27/unhandled-promise-rejections-in-node-js/ https://github.com/mochajs/mocha/issues/2797 https://github.com/mochajs/mocha/issues/3097 http://thecodebarbarian.com/unhandled-promise-rejections-in-node.js.html 推荐阅读 http://zhouqing86.github.io/2017/03/26/js-test4-mocha/#%E5%BC%95%E5%85%A5babel%E6%B5%8B%E8%AF%95es6 http://www.dengzhr.com/node-js/1282 Vue.js学习系列六 —— Vue单元测试Karma+Mocha学习笔记 搭建 基于 Mocha + Webpack2 + Chai + ES6 前端单元测试 http://blog.kazaff.me/2016/08/24/casperjs+mocha+chai%E6%90%AD%E5%BB%BAE2E%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83/ http://zoucz.com/blog/2016/08/02/nodejs-unittest-mochajs/ https://github.com/jin5354/404forest/issues/47 参考文档 https://mochajs.org/ http://www.chaijs.com/guide/styles/ Chai.js cheatsheet Mocha中文文档(翻译) https://www.jianshu.com/p/9c78548caffa]]></content>
<tags>
<tag>mocha</tag>
<tag>单元测试</tag>
</tags>
</entry>
<entry>
<title><![CDATA[简单介绍cnpmjs安装和碰到的问题]]></title>
<url>%2Fcnpmjs-install%2F</url>
<content type="text"><![CDATA[cnpmjs 可用于企业的前端私有包管理。淘宝NPM镜像就是用这个搭建的。 npmjs私有包是要收费的，对于公司而言更倾向于自己部署，一是省钱，二是一些含有敏感内容的包放到其他平时总是不放心。 本文将简单记录下实际安装过程中碰到的问题，基本的安装可以移步官方文档。 安装1234567891011121314151617181920212223242526272829$ yum install -y nodejs$ yun install git$ git clone git://github.com/cnpm/cnpmjs.org.git $HOME/cnpmjs.org# centos7 安装失败$ yum install mysql mysql-server$ yum update$ yum localinstall mysql-community-release-el7-5.noarch.rpm$ yum repolist enabled | grep "mysql.*-community.*"$ yum repolist all | grep mysql$ yum-config-manager --disable mysql56-community$ sudo yum search yum-config-manager$ yum install yum-utils$ yum-config-manager --disable mysql56-community$ yum-config-manager --enable mysql57-community-dmr$ yum repolist all | grep mysql$ yum repolist enabled | grep mysql$ yum install mysql-serve# centos7 相关mysql命令$ service mysqld status$ service mysqld stop$ service mysqld start# centos7 关闭防火墙 #$ systemctl stop firewalld.service$ systemctl disable firewalld.service #禁止firewall开机启动$ systemctl stop firewall // centos7以下的版本命令 以上部分命令来源于网络，时隔太久，找不到相关的出处，😶。 发布的模块npm install 报错1234567891011[npminstall:get] retry GET http://xx.xx.xx.xx:7001xx-debug after 100ms, retry left 4, error: SyntaxError: Unexpected token l in JSON at position 0...SyntaxError: Unexpected token l in JSON at position 0 at JSON.parse (<anonymous>) at _get (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/get.js:70:26) at _get.next (<anonymous>) at onFulfilled (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:65:19) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)npminstall version: 3.2.1... 发现原因是npm>=5.6的时候有这个问题12345➜ huixisheng.github.com git:(dev) ✗ npm -v5.4.1➜ huixisheng.github.com git:(dev) ✗ cnpm [email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js) https://github.com/cnpm/cnpmjs.org/issues/1110 配置修改123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 /** * Cluster mode */- enableCluster: false,+ enableCluster: true, numCPUs: os.cpus().length, /*@@ -27,7 +27,7 @@ var config = { registryPort: 7001, webPort: 7002, // 用于外部ip访问- bindingHost: '127.0.0.1', // only binding on 127.0.0.1 for local access+ //bindingHost: '127.0.0.1', // only binding on 127.0.0.1 for local access // debug mode // if in debug mode, some middleware like limit wont load@@ -62,10 +62,14 @@ var config = { // default system admins admins: {+ huixisheng: '[email protected]' }, // email notification for errors@@ -98,13 +102,13 @@ var config = { */ database: {- db: 'cnpmjs_test',+ db: 'cnpm', username: 'root',- password: '',+ password: 'mysqlpassword', // the sql dialect of the database // - currently supported: 'mysql', 'sqlite', 'postgres', 'mariadb'- dialect: 'sqlite',+ dialect: 'mysql', // custom host; default: 127.0.0.1 host: '127.0.0.1',@@ -135,7 +139,8 @@ var config = { downloadRedirectToNFS: false, // registry url name- registryHost: 'r.cnpmjs.org',+ registryHost: 'xx.xx.xx.xx:7001',+ // registryHost: 'r.cnpmjs.org', /** * registry mode config@@ -144,11 +149,11 @@ var config = { // enable private mode or not // private mode: only admins can publish, other users just can sync package from source npm // public mode: all users can publish- enablePrivate: false, // 注册用户才可以发布模块+ enablePrivate: true, // registry scopes, if don't set, means do not support scopes- scopes: [ '@cnpm', '@cnpmtest', '@cnpm-test' ],-+ // scopes: [ '@cnpm', '@cnpmtest', '@cnpm-test', '@cosme' ],+ scopes: [], // some registry already have some private packages in global scope // but we want to treat them as scoped private packages, // so you can use this white list.@@ -169,6 +174,7 @@ var config = { // If you want to directly sync from official npm's registry // please drop them an email first sourceNpmRegistry: 'https://registry.npm.taobao.org',+ // sourceNpmRegistry: 'http://xx.xx.xx.xx:7001', // upstream registry is base on cnpm/cnpmjs.org or not // if your upstream is official npm registry, please turn it off@@ -197,8 +203,6 @@ var config = { // sync devDependencies or not, default is false syncDevDependencies: false,- // try to remove all deleted versions from original registry- syncDeletedVersions: true, // changes streaming sync syncChangesStream: false,@@ -215,7 +219,7 @@ var config = { // always-auth https://docs.npmjs.com/misc/config#always-auth // Force npm to always require authentication when accessing the registry, even for GET requests.- alwaysAuth: false, // 命令安装的时候也要输入命名+ alwaysAuth: true, // if you're behind firewall, need to request through http proxy, please set this // e.g.: `httpProxy: 'http://proxy.mycompany.com:8080'`diff --git a/cnpmjs.org/servers/registry.js b/cnpmjs.org/servers/registry.jsindex d2758e5..2d67184 100644--- a/cnpmjs.org/servers/registry.js+++ b/cnpmjs.org/servers/registry.js@@ -34,7 +34,7 @@ app.use(cors({ allowMethods: 'GET,HEAD', })); // 关闭用户注册接口 app.use(auth());-app.use(proxyToNpm());+//app.use(proxyToNpm()); app.use(notFound); if (config.enableCompress) {diff --git a/cnpmjs.org/view/web/footer.html b/cnpmjs.org/view/web/footer.htmlindex e7a0f04..d432a6d 100644--- a/cnpmjs.org/view/web/footer.html+++ b/cnpmjs.org/view/web/footer.html@@ -1,5 +1,4 @@-Copyright 2013 - 2016 &copy; cnpmjs.org+Copyright 2013 - 2018 &copy; cnpmjs.org | <a href="/">Home</a> |-<script>var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5757157'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5757157%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script> 相关问题阿里云无法通过ip:端口访问 ssh无法登录阿里云服务器 cnpm同步文件的存储位置在哪里默认是在 $HOME/.cnpmjs.org/nfs 下面。具体看config配置https://github.com/cnpm/cnpmjs.org/issues/635 失败 & 如何加入权限验证https://github.com/cnpm/cnpmjs.org/issues/925 如何修改admin的密码？ https://github.com/cnpm/cnpmjs.org/issues/1050 https://github.com/cnpm/cnpmjs.org/issues/385 cnpm添加用户，以及admin用户如何publish https://github.com/cnpm/cnpmjs.org/issues/431]]></content>
<tags>
<tag>nodejs</tag>
<tag>cnpmjs</tag>
</tags>
</entry>
<entry>
<title><![CDATA[项目脚手架]]></title>
<url>%2Fscaffold%2F</url>
<content type="text"><![CDATA[Vue vue-cli vue-template poi Node https://github.com/yeoman/generator-node 综合资源 BOILRPLATE A curated directory of boilerplates to help you start your projects! http://yeoman.io/generators/ 小程序参考]]></content>
<tags>
<tag>Vue</tag>
<tag>scaffold</tag>
<tag>startkit</tag>
<tag>generator</tag>
<tag>boilrplate</tag>
</tags>
</entry>
<entry>
<title><![CDATA[es6相关资源记录]]></title>
<url>%2Fawesome-es6%2F</url>
<content type="text"><![CDATA[本文收集整理es6相关的资源。 ECMAScript 6 — New Features: Overview & Comparison Overview of ECMAScript 6 features es6学习视频教程 babel Learn ES2015 ES2015+ 速查表 https://github.com/tc39/ecma262 https://www.ecma-international.org/default.htm https://en.wikipedia.org/wiki/ECMAScript 编程相关的思维导图-JavaScript 内置对象 Nodejs 兼容性 浏览器兼容性表]]></content>
<tags>
<tag>es6</tag>
<tag>文档</tag>
</tags>
</entry>
<entry>
<title><![CDATA[碰到的问题简单记录]]></title>
<url>%2Fsome-problems%2F</url>
<content type="text"><![CDATA[对碰到的问题做个简单的记录，方便后期汇总整理。大部分答案来源于互联网，感谢默默奉献的人，有些没有及时注明出处，后期就找不到相关的文章了，😓😓 git 如何推送tag1234# 推送全部tag$ git push origin --tags# 推送指定tag$ git push tag 0.0.1 http://yijiebuyi.com/blog/007269d04d5096d9397ce3daf9d84c48.html http://blog.csdn.net/shines/article/details/8558293 http://80x86.io/post/how-to-push-and-delete-a-remote-git-tag git设置远程origin1234567# 修改已有的origin$ git remote set-url --delete https://github.com/CocoaPods/Specs.git$ git remote set-url --add origin https://github.com/CocoaPods/Specs.git# 空项目添加origin #$ git remote add origin https://github.com/CocoaPods/Specs.git$ git push -u origin master tar压缩忽略指定目录 Mac下--exclude需要写在前面 1$ tar -czvf /Users/huixisheng/Desktop/j-excel.tar.gz --exclude j-excel/node_modules j-excel/ Nodejs守护进程1nohup node index.js > error.log 2>&1 & 123nohup: redirecting stderr to stdout$ > error.log 2>&1 & http://blog.csdn.net/iechenyb/article/details/76270595 centos7安装nodejs8.x直接安装过Node6.x，需要在机器上部署yapi。需要升级Node。 1234567# 这个是否需要不确定$ yum clean all$ curl -sL https://rpm.nodesource.com/setup_8.x | bash -# 安装不了，需要卸载重新安装$ yum install -y nodejs$ yum erase nodejs npm -y$ yum install -y nodejs 更新日志参考]]></content>
<tags>
<tag>git</tag>
<tag>Nodejs</tag>
</tags>
</entry>
<entry>
<title><![CDATA[无密码登录远程服务器]]></title>
<url>%2Fssh-with-no-pwd%2F</url>
<content type="text"><![CDATA[每次ssh连接都要输入密码，真的很麻烦。 [ykq@10-10-215-141 .ssh]$ lltotal 8-rw-r–r– 1 ykq root 417 Aug 21 21:29 authorized_keys-rw-r–r– 1 ykq root 1987 Feb 9 11:25 known_hosts 20 vi /etc/ssh/ssh_config 21 vi /etc/ssh/sshd_config 22 sudo chmod 755 ~/webpack-mhome.json 23 sudo chmod 777 ~/webpack-mhome.json 24 vi /etc/ssh/sshd_config 25 sudo vi /etc/ssh/sshd_config 26 sudo service ssh restart 27 which ssh 28 sudo chown ykq ~/webpack-mhome.json 29 sudo chown a+x ~/webpack-mhome.json 30 sudo vi /etc/ssh/sshd_config PasswordAuthentication yes ➜ ssh-copy-id -i ~/.ssh/motian-server.pub [email protected]/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: “/Users/huixisheng/.ssh/motian-server.pub”/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed – if you are prompted now it is to install the new [email protected]‘s password:/etc/profile.d/lang.sh: line 19: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory Number of key(s) added: 1 Now try logging into the machine, with: “ssh '[email protected]‘“and check to make sure that only the key(s) you wanted were added. Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 更新日志ssh-keygen -t rsa -f ~/.ssh/github -C "email ssh-add ~/.ssh/github http://www.html-js.com/article/2379 sudo vim /etc/ssh/sshd_configPubkeyAuthentication yes PasswordAuthentication yes Redirecting to /bin/systemctl restart ssh.serviceFailed to restart ssh.service: Unit not found. centos7下重启sshd服务的操作方法在centos7下重启服务不再是 service 服务名称 动作 这样的方式的.而是: systemctl 动作 服务名.service 查看sshd服务是否启动了. systemctl status sshd.service 看到的这样的信息就可以确定是启动了. 如果没有启动,则需要启动该服务: systemctl start sshd.service 如果需要重启sshd服务可使得 systemctl restart sshd.service 设置为开机启动可使用: systemctl enable sshd.service http://www.cnblogs.com/prettyisshit/p/5584558.html http://www.cnblogs.com/lovlos/p/6596796.html 参考 http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html https://www.w3ctech.com/topic/1602 https://segmentfault.com/a/1190000008479071 https://stackoverflow.com/questions/19777357/getting-permission-denied-for-scp-over-ssh-server-to-local http://www.worldhello.net/2010/04/08/1026.html https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/ https://gist.github.com/jexchan/2351996 https://help.github.com/articles/using-ssh-over-the-https-port/ http://blog.csdn.net/u012865381/article/details/78521087 https://help.aliyun.com/knowledge_detail/41487.html http://blog.csdn.net/u013240609/article/details/78540795 用mac终端命令登录阿里云服务器，出现错误提示Permission denied (publickey,gssapi-keyex,gssapi-with-mic).http://blog.csdn.net/gigijingjing/article/details/76726564]]></content>
<tags>
<tag>ssh</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Uncaught SyntaxError: Use of const in strict mode. 报错解决方法记录]]></title>
<url>%2Fwebpack-syntaxerror-use-of-const-in-strict-mode%2F</url>
<content type="text"><![CDATA[项目中用vue，vue-router实现的页面在该设备下"Mozilla/5.0 (Linux; Android 5.1.1; YQ601 Build/LMY47V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/39.0.0.0 Mobile Safari/537.36,Cosmeapp/9.1.0"空白。其他现有设备是正常的。想到可以连接真机设备进行调试，根据报错定位到相关的代码有问题，还是资源加载异常（比如cdn的资源在某些环境下异常）。然而连接usb无发审查元素。于是跑源码在本地环境下进行局域调试，结果页面也是空白。在页面注入weinre。有报错，但是不要定位，只是显示了报错。这里不得不吐槽下weinre确实不怎么好用。有看到过资料安卓的真机调试是需要客户端支持的。 Uncaught SyntaxError: Use of const in strict mode. node_modules/[email protected]@strip-ansi/index.js // ‘use strict’;// var ansiRegex = require(‘ansi-regex’); // module.exports = input => typeof input === ‘string’ ? input.replace(ansiRegex(), ‘’) : input; ‘use strict’;var ansiRegex = require(‘ansi-regex’)(); module.exports = function (str) { return typeof str === ‘string’ ? str.replace(ansiRegex, ‘’) : str;}; // node_modules/[email protected]@ansi-regex/index.js ‘use strict’; module.exports = function() { // const -> var var pattern = [ ‘[\u001B\u009B][\#;?](?:(?:(?:[a-zA-Z\d](?:;[a-zA-Z\d]))?\u0007)’, ‘(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PRZcf-ntqry=><~]))’ ].join(‘|’); return new RegExp(pattern, 'g'); }; 参考 https://github.com/mrdulin/blog/issues/35 https://stackoverflow.com/questions/36789889/syntaxerror-use-of-const-in-strict-mode http://www.mind-geek.net/javascript/syntaxerror-use-of-const-in-strict-mode/ https://segmentfault.com/q/1010000007415253 移动端真机调试指南 https://aotu.io/notes/2017/02/24/Mobile-debug/index.html]]></content>
<tags>
<tag>webpack</tag>
</tags>
</entry>
<entry>
<title><![CDATA[前端静态资源CDN公共库整理]]></title>
<url>%2Fcdn%2F</url>
<content type="text"><![CDATA[开放的CDN最好是速度快，库全，支持快速检索。本文将列举国内外常用的前端静态资源CDN公共库。用开发的CDN写写demo，体验新框架的语法，但是用到生成环境，还需谨慎。虽然方便，但是万一库挂了，被人恶意注意代码，用多了影响还是很大。 jsDelivr Open Source CDN free, fast, and reliable 官方网址: https://www.jsdelivr.com/GitHub仓库：https://github.com/jsdelivr/jsdelivr 支持npm仓库资源同步, github 资源同步，还支持WordPress.org plugins。就目前体验而言，速度还不错。提供相关的CDN分析工具，支持combo合并，自动压缩资源，支持SRI。还有DNS分析工具 功能不要太强大，如果访问速度不会因为xx被阻拦在门口，绝对是最佳选择。五星好评推荐。 BootCDN 稳定、快速、免费的前端开源项目 CDN 加速服务。截止写这个文章共收录了 3245 个前端开源项目 官方网址: http://www.bootcdn.cn/ 支持检索，速度还不错，但是就是相比unpkg.com资源欠缺。 unpkg.com官方网址: https://unpkg.com/#/ 资源绝对丰富，同步npmjs.com。但是速度不行，可惜。同时不支持检索，当然检索可以用https://www.npmjs.com/ 搜索替代。 css.net 常用前端公共库 CDN 服务常用前端公共库 & 和谐使用 Google 公共库、字体库的方法 官方网址: https://css.net/ cdnjs.com官网网址: http://cdnjs.com/ 静态资源CDN公共库是指一些服务商将我们常用的前端资源JavaScript,CSS 等前端静态资源存放在网上，方便直接引用，并且提供CDN加速服务，这样一来可以让用户加速访问这些资源，二来还可节约自己服务器的流量。本文介绍常用的前端静态资源CDN公共库。 什么是cdnCDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。 其他 又拍云JS库加速服务资源比较少 开放静态文件 CDN staticfile，七牛云存储提供支持 GitHub 百度开发者中心CDN公共库 百度静态资源公共库,github地址 新浪 360网站卫士常用前端公共库CDN服务资源丰富 提供Google公共库、Google字体库替换服务有时在国外无法加载，导致网页加载被阻塞。推荐一个插件gooreplacer一个用于替换网页中Google Fonts,API,themes Google CDN 微软CDN 2017-12-02 补充知乎做的https://unpkg.com/#/的镜像 unpkg.zhimg.com。 饿了么做的https://unpkg.com/#/的镜像npm.elemecdn.com。例 https://npm.elemecdn.com/[email protected]/dist/jquery.min.js 饿了么做的https://unpkg.com/#/的镜像 例外还有github.elemecdn.com。例如 https://github.elemecdn.com/eleme/ubt-web/1.3.4/ubt.min.js。规则没有琢磨透。 以上并没有开源，没有开发访问。不建议使用。 参考 cdn 百度百科 国内有哪些靠谱的 Javascript 库 CDN可用？ 程序员福利：常用的 JavaScript 库 CDN 加速服务 https://zhanqi.net/post/170425/ https://www.zhihu.com/question/20227463 http://dyhdyh.com/archives/22.html 更新历史2016-10-21 合并issue整理的内容]]></content>
<tags>
<tag>前端工具</tag>
<tag>cdn</tag>
<tag>前端资源</tag>
</tags>
</entry>
<entry>
<title><![CDATA[变量的解构赋值和展开运算符]]></title>
<url>%2Fes6-destructuring-and-spread-operator%2F</url>
<content type="text"><![CDATA[本文对变量的解构赋值(destructing)和展开运算符(spread operator …)做个简单的介绍。 本文首发在前端开发说 变量的解构赋值以下例子通过Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3216.0 Safari/537.36测试。 数组赋值1234567891011121314151617let [a, b] = [1, 2];console.log(a); // 1console.log(b); // 2let [a, b, ...rest] = [1, 2, 3, 4, 5];console.log(a); // 1console.log(b); // 2console.log(rest); // [3, 4, 5]// 不完全解构let [a, b] = [1, 2, 3]console.log(a); // 1console.log(b); // 2// 设置默认值let [a = 1] = []console.log(a); // 1 对象赋值12345// 用于提取数据const {a, b, ...rest} = {a:1, b:2, c:3, d:4}console.log(a); // 1console.log(b); // 2console.log(rest); // {c: 3, d: 4} 函数参数1234567// 默认值设置function fun([a, b = 3]) { return a + b;}fun([1]) // 4[[1, 2], [3, 4]].map(([a, b]) => a + b) // [3, 7] 对象展开运算符扩展运算符（spread operator …）将一个数组、类数组、字符串转为用逗号分隔的序列。 最早是在Vuex文档看到 12345678computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ // ... })}// 来自: https://vuex.vuejs.org/zh-cn/state.html 得知是对象展开运算符。查阅资料发现属于ES6变量的解构赋值的内容。说来也惭愧《ES6 标准入门》第1版，第2版都看过，当初看的不深入，很多知识点都有漏洞。而今天在封装Vue组件的时候，如下代码看的甚是变扭，ES6模块和CommonJS规范糅杂在一起。 12345678910111213import components from './components';const install = function (Vue) { Object.keys(components).forEach((key) => { Vue.component(key, components[key]); });};if (typeof window !== 'undefined' && window.Vue) { install(window.Vue);}module.exports = Object.assign(components, { install }); // eslint-disable-line no-undef 于是做了如下调整 1234export default { install, ...packages,}; Vuex的文档中有介绍对象展开运算符（现处于 ECMASCript 提案 stage-3 阶段）。 123456789The TC39 categorizes proposals into the following stages:Stage 0 - Strawman: just an idea, possible Babel plugin.Stage 1 - Proposal: this is worth working on.Stage 2 - Draft: initial spec.Stage 3 - Candidate: complete spec and initial browser implementations.Stage 4 - Finished: will be added to the next yearly release.摘自文档 https://babeljs.io/docs/plugins/ 大致翻译如下:12345678910111213Stage 0 - Strawman（展示阶段）Stage 1 - Proposal（征求意见阶段）Stage 2 - Draft（草案阶段）Stage 3 - Candidate（候选人阶段）Stage 4 - Finished（定案阶段）进入 2 阶段，基本上都已经确定要发布了。在 2015 年进入 stage4 的叫做 es2015在 2016 年进入 stage4 的叫做 es2016以此类推作者：Yugo链接：http://www.jianshu.com/p/41d3f7768095 对象合并123456789const a = [1, 2];const b = [3, 4];console.log(a.concat(b));const c = [...a, ...b]; // [1, 2, 3, 4]const a1 = { a: 1};const b2 = { b: 2};console.log(Object.assign(a1, b2));console.log({ ...a1, ...b2}); // {a: 1, b: 2} 函数传参1234567891011function fun(...args) { console.log(args) // [1, 2]}fun(1, 2);function func2(a, b, c) { console.log(a, b, c) // {a: 1} 3 "cc"}let rest = [3];func2({a: 1}, ...rest, 'cc'); 扩展阅读 展开运算符的 6 种绝妙用法 http://blog.csdn.net/qq_30100043/article/details/53424750 ES6之Spread Operater拷贝对象 es6 扩展运算符 三个点（…） 第四章 扩展的对象功能 总结知识点的理解结合具体的项目代码，能快速掌握。不清楚不懂的查漏补缺，just-do-it，对!就是立刻做，这是你知识体系的短板，深挖进去发现会收获很多。 参考 http://es6.ruanyifeng.com/#docs/destructuring https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md https://excaliburhan.com/post/babel-preset-and-plugins.html https://segmentfault.com/a/1190000010468759 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment]]></content>
<tags>
<tag>ES6</tag>
</tags>
</entry>
<entry>
<title><![CDATA[npm相关资源整理]]></title>
<url>%2Fnpm-source%2F</url>
<content type="text"><![CDATA[npm（全称Node Package Manager，即node包管理器）是Node.js默认的、以JavaScript编写的软件包管理系统。 - 来自wikipedia 本文首发在美妆心得技术博客，同步到前端开发者说博客。 npm镜像1$ npm config set registry "https://registry.npm.taobao.org" 其他镜像，用于提高安装速度，比如用vue-cli初始化项目。在~/.npmrc中添加如下配置 123456789101112131415registry=https://registry.npm.taobao.org/// https://registry.npmjs.org=true// https://blog.niceue.com/front-end-development/using-domestic-npm-images.html=true// http://www.cnblogs.com/huang0925/archive/2013/05/17/3083207.html=trueelectron_mirror=https://npm.taobao.org/dist/electron/sass_binary_site=https://npm.taobao.org/dist/node-sassphantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs// https://gist.github.com/52cik/c1de8926e20971f415dd=truechromedriver_cdnurl=https://npm.taobao.org/dist/chromedriverdisturl=https://npm.taobao.org/distoperadriver_cdnurl=https://npm.taobao.org/mirrors/operadriverselenium_cdnurl=https://npm.taobao.org/mirrors/seleniumnode_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector// 自定义的npm scope@x-scaffold:registry=https://registry.npmjs.org/ 关于关于更多的镜像资料，可以参考我之前写的文章国内镜像源整理 npm包资源搜索https://libraries.io/npm 相关资源的各种排行榜 npms A better and open source search for node packages recently updated packages npm 资源的cdn 整理的Top100 most depended-upon packages Top 30 NPM Packages for Node.js Developers 2016 most depended-upon packages 包管理工具pnpm Fast, disk space efficient package manager cnpm 淘宝 NPM 镜像 yarn Yarn 对你的代码来说是一个包管理器， 它允许你使用并分享代码给全世界的开发者， Yarn 做这些快捷、安全、可靠，所以你不用担心什么。 设置国内镜像12$ yarn config set registry https://registry.npm.taobao.org --global$ yarn config set disturl https://npm.taobao.org/dist --global 这个facebook应该不会加类似React的协议吧？ 会生成一个yarn.lock锁定依赖。 优点(摘自官网) 离线模式 确定性 网络性能 相同的软件包 网络适应 扁平模式 例外有看到社区 「CYarn」使用 cnpm 源的 Yarn smart-npm 在各大社区发布后，就没看到更多了。 npx: npm 5.2.0 内置的包执行器 推荐阅读 一文看懂npm、yarn、pnpm之间的区别 Yarn vs npm：你需要知道的一切 更多npm与yarn的性能对比 npm 5.0 新版功能特性解析及与 yarn 评测对比 npm、bower、jamjs 等包管理器，哪个比较好用？ 如何评价Facebook推出的JavaScript模块管理器yarn？ 在中国，安装 & 升级 npm 依赖的正确方法 文档 https://docs.npmjs.com/ semver语义化版本 2.0.0 Npm的配置管理及设置代理 依赖升级见 npm update [-g] […] npm-check-updates npm-check Check for outdated, incorrect, and unused dependencies. 相关的介绍可以参考Node.js开源项目推荐：npm模块升级工具 npm-check 扩展阅读 如何将package.json中的每个依赖关系更新为最新版本？ Node升级n Node.js version management: no subshells, no profile setup, no convoluted API, just simple. nvm Node Version Manager - Simple bash script to manage multiple active node.js versions 其他Cost of modules Find out which of your dependencies is slowing you down https://github.com/sindresorhus/awesome-npm 【译】用8个 npm 技巧打动你的同事]]></content>
<tags>
<tag>nodejs</tag>
<tag>npm</tag>
</tags>
</entry>
<entry>
<title><![CDATA[git利用rebase修改历史提交记录]]></title>
<url>%2Fgit-rebase%2F</url>
<content type="text"><![CDATA[有时候在git的操作中相同的功能提交多次。相同git log看着很难受，特别是有代码洁癖的开发者。本文通过实例来说一说rebase命令如何修改git的history。 通过git rebase --help可以查看命令的使用方法，官网文档是最权威的教程。 git log查看历史记录1234567891011121314151617181920212223commit ac041371bd1f34a53b0136f6cdec07a1dd746de4Author: huixisheng <[email protected]>Date: Sun Aug 27 16:55:06 2017 +0800 修改记录4用于测试git rebasecommit 029f5f0abf5d4f5fbe6871791b026de4599258c6Author: huixisheng <[email protected]>Date: Sun Aug 27 16:54:45 2017 +0800 修改记录4用于测试git rebasecommit e0929b7b2f037df666164c19fea82551f54ebce5Author: huixisheng <[email protected]>Date: Sun Aug 27 16:53:30 2017 +0800 修改记录2用于测试git rebasecommit 737b13660618a261ae1c72f6f4b9970a14ca9a68Author: huixisheng <[email protected]>Date: Sun Aug 27 16:53:08 2017 +0800 修改记录1用于测试git rebase 历史记录存在重复的修改记录，相同的记录需要合并，最近的四次如何合并为一个。 修改某一次的log记录git rebase -i HEAD~4 1234567891011121314151617181920212223pick 737b136 修改记录1用于测试git rebasepick e0929b7 修改记录2用于测试git rebasepick 029f5f0 修改记录4用于测试git rebasepick ac04137 修改记录4用于测试git rebase# Rebase 9dcc03c..ac04137 onto 9dcc03c (4 commands)## Commands:# p, pick = use commit# r, reword = use commit, but edit the commit message# e, edit = use commit, but stop for amending# s, squash = use commit, but meld into previous commit# f, fixup = like "squash", but discard this commit's log message# x, exec = run command (the rest of the line) using shell# d, drop = remove commit## These lines can be re-ordered; they are executed from top to bottom.## If you remove a line here THAT COMMIT WILL BE LOST.## However, if you remove everything, the rebase will be aborted.## Note that empty commits are commented out p, pick 使用这条 commitr, reword 使用这条 commit 但是要修改 commit messagee, edit 使用这条 commit 但是要修改 commit messaage // 这里和 reword 使用方法一样, 但 reword 在 :wq 后会直接让你进入修改编辑, edit :wq 后要再使用 git commit –amend 进入修改s, squash 使用这条 commit, 但是要与上一条 commit 合并, 并保留自身 commit messagef, fixup 与 squash 一样, 但是舍弃 自身 commit messagex, exec 执行命令来自: http://noyobo.com/2014/04/06/git-rebase-commits.html 修改如下 可以使用缩写命令: 1234pick 737b136 修改记录1用于测试git rebasepick e0929b7 修改记录2用于测试git rebaseedit 029f5f0 修改记录4用于测试git rebasepick ac04137 修改记录4用于测试git rebase 提示如下: 123456789➜ do git:(git-rebase-test) git rebase -i HEAD~4Stopped at f83b625... 修改记录3用于测试git rebaseYou can amend the commit now, with git commit --amendOnce you are satisfied with your changes, run git rebase --continue 使用git commit --amend。修改历史记录，git rebase --continue。于是得到 1234567891011121314151617181920212223commit a360c19ef0ad51ed407ff9f2f55c009ffa766441Author: huixisheng <[email protected]>Date: Sun Aug 27 16:55:06 2017 +0800 修改记录4用于测试git rebasecommit da93f076239de04e1cf4ade0da069562342c79ffAuthor: huixisheng <[email protected]>Date: Sun Aug 27 16:54:45 2017 +0800 修改记录3用于测试git rebasecommit e0929b7b2f037df666164c19fea82551f54ebce5Author: huixisheng <[email protected]>Date: Sun Aug 27 16:53:30 2017 +0800 修改记录2用于测试git rebasecommit 737b13660618a261ae1c72f6f4b9970a14ca9a68Author: huixisheng <[email protected]>Date: Sun Aug 27 16:53:08 2017 +0800 修改记录1用于测试git rebase 合并最后4次的提交记录git rebase -i HEAD~4 1234pick 737b136 修改记录1用于测试git rebasesquash e0929b7 修改记录2用于测试git rebasesqaush da93f07 修改记录3-1用于测试git rebasesquash a360c19 修改记录4用于测试git rebase 123456789101112131415# This is a combination of 4 commits.# This is the 1st commit message:合并修改记录1-4用于测试git rebase# This is the commit message #2:# 修改记录2用于测试git rebase# This is the commit message #3:#修改记录3-1用于测试git rebase# This is the commit message #4:#修改记录4用于测试git rebase 于是得到如下: 12345commit f9064cdf6355268e83365e094939144a000c0a68Author: huixisheng <[email protected]>Date: Sun Aug 27 16:53:08 2017 +0800 合并修改记录1-4用于测试git rebase 实战过程碰到的问题误操作使用git rebase --abort 合并log后无法push。需要强推-f log修改为限行提交参考 https://backlogtool.com/git-tutorial/cn/stepup/stepup2_8.html 处理过程中会出现冲突，修改冲突后,git rebase --continue git rebase -i HEAd~4出现的log居然是倒序排列的 多人操作同一分支，强行提交提交，pull下来会出现冲突 参考相关文章 http://blog.csdn.net/itfootball/article/details/44154121 https://backlogtool.com/git-tutorial/cn/stepup/stepup1_1.html http://www.ruanyifeng.com/blog/2015/08/git-use-process.html http://noyobo.com/2014/04/06/git-rebase-commits.html 命令查看的文档123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871GIT-REBASE(1) Git Manual GIT-REBASE(1)NAME git-rebase - Reapply commits on top of another base tipSYNOPSIS git rebase [-i | --interactive] [options] [--exec <cmd>] [--onto <newbase>] [<upstream> [<branch>]] git rebase [-i | --interactive] [options] [--exec <cmd>] [--onto <newbase>] --root [<branch>] git rebase --continue | --skip | --abort | --edit-todoDESCRIPTION If <branch> is specified, git rebase will perform an automatic git checkout <branch> before doing anything else. Otherwise it remains on the current branch. If <upstream> is not specified, the upstream configured in branch.<name>.remote and branch.<name>.merge options will be used (see git-config(1) for details) and the --fork-point option is assumed. If you are currently not on any branch or if the current branch does not have a configured upstream, the rebase will abort. All changes made by commits in the current branch but that are not in <upstream> are saved to a temporary area. This is the same set of commits that would be shown by git log <upstream>..HEAD; or by git log 'fork_point'..HEAD, if --fork-point is active (see the description on --fork-point below); or by git log HEAD, if the --root option is specified. The current branch is reset to <upstream>, or <newbase> if the --onto option was supplied. This has the exact same effect as git reset --hard <upstream> (or <newbase>). ORIG_HEAD is set to point at the tip of the branch before the reset. The commits that were previously saved into the temporary area are then reapplied to the current branch, one by one, in order. Note that any commits in HEAD which introduce the same textual changes as a commit in HEAD..<upstream> are omitted (i.e., a patch already accepted upstream with a different commit message or timestamp will be skipped). It is possible that a merge failure will prevent this process from being completely automatic. You will have to resolve any such merge failure and run git rebase --continue. Another option is to bypass the commit that caused the merge failure with git rebase --skip. To check out the original <branch> and remove the .git/rebase-apply working files, use the command git rebase --abort instead. Assume the following history exists and the current branch is "topic": A---B---C topic / D---E---F---G master From this point, the result of either of the following commands: git rebase master git rebase master topic would be: A'--B'--C' topic / D---E---F---G master NOTE: The latter form is just a short-hand of git checkout topic followed by git rebase master. When rebase exits topic will remain the checked-out branch. If the upstream branch already contains a change you have made (e.g., because you mailed a patch which was applied upstream), then that commit will be skipped. For example, running git rebase master on the following history (in which A' and A introduce the same set of changes, but have different committer information): A---B---C topic / D---E---A'---F master will result in: B'---C' topic / D---E---A'---F master Here is how you would transplant a topic branch based on one branch to another, to pretend that you forked the topic branch from the latter branch, using rebase --onto. First let's assume your topic is based on branch next. For example, a feature developed in topic depends on some functionality which is found in next. o---o---o---o---o master \ o---o---o---o---o next \ o---o---o topic We want to make topic forked from branch master; for example, because the functionality on which topic depends was merged into the more stable master branch. We want our tree to look like this: o---o---o---o---o master | \ | o'--o'--o' topic \ o---o---o---o---o next We can get this using the following command: git rebase --onto master next topic Another example of --onto option is to rebase part of a branch. If we have the following situation: H---I---J topicB / E---F---G topicA / A---B---C---D master then the command git rebase --onto master topicA topicB would result in: H'--I'--J' topicB / | E---F---G topicA |/ A---B---C---D master This is useful when topicB does not depend on topicA. A range of commits could also be removed with rebase. If we have the following situation: E---F---G---H---I---J topicA then the command git rebase --onto topicA~5 topicA~3 topicA would result in the removal of commits F and G: E---H'---I'---J' topicA This is useful if F and G were flawed in some way, or should not be part of topicA. Note that the argument to --onto and the <upstream> parameter can be any valid commit-ish. In case of conflict, git rebase will stop at the first problematic commit and leave conflict markers in the tree. You can use git diff to locate the markers (<<<<<<) and make edits to resolve the conflict. For each file you edit, you need to tell Git that the conflict has been resolved, typically this would be done with git add <filename> After resolving the conflict manually and updating the index with the desired resolution, you can continue the rebasing process with git rebase --continue Alternatively, you can undo the git rebase with git rebase --abortCONFIGURATION rebase.stat Whether to show a diffstat of what changed upstream since the last rebase. False by default. rebase.autoSquash If set to true enable --autosquash option by default. rebase.autoStash If set to true enable --autostash option by default. rebase.missingCommitsCheck If set to "warn", print warnings about removed commits in interactive mode. If set to "error", print the warnings and stop the rebase. If set to "ignore", no checking is done. "ignore" by default. rebase.instructionFormat Custom commit list format to use during an --interactive rebase.OPTIONS --onto <newbase> Starting point at which to create the new commits. If the --onto option is not specified, the starting point is <upstream>. May be any valid commit, and not just an existing branch name. As a special case, you may use "A...B" as a shortcut for the merge base of A and B if there is exactly one merge base. You can leave out at most one of A and B, in which case it defaults to HEAD. <upstream> Upstream branch to compare against. May be any valid commit, not just an existing branch name. Defaults to the configured upstream for the current branch. <branch> Working branch; defaults to HEAD. --continue Restart the rebasing process after having resolved a merge conflict. --abort Abort the rebase operation and reset HEAD to the original branch. If <branch> was provided when the rebase operation was started, then HEAD will be reset to <branch>. Otherwise HEAD will be reset to where it was when the rebase operation was started. --keep-empty Keep the commits that do not change anything from its parents in the result. --skip Restart the rebasing process by skipping the current patch. --edit-todo Edit the todo list during an interactive rebase. -m, --merge Use merging strategies to rebase. When the recursive (default) merge strategy is used, this allows rebase to be aware of renames on the upstream side. Note that a rebase merge works by replaying each commit from the working branch on top of the <upstream> branch. Because of this, when a merge conflict happens, the side reported as ours is the so-far rebased series, starting with <upstream>, and theirs is the working branch. In other words, the sides are swapped. -s <strategy>, --strategy=<strategy> Use the given merge strategy. If there is no -s option git merge-recursive is used instead. This implies --merge. Because git rebase replays each commit from the working branch on top of the <upstream> branch using the given strategy, using the ours strategy simply discards all patches from the <branch>, which makes little sense. -X <strategy-option>, --strategy-option=<strategy-option> Pass the <strategy-option> through to the merge strategy. This implies --merge and, if no strategy has been specified, -s recursive. Note the reversal of ours and theirs as noted above for the -m option. -S[<keyid>], --gpg-sign[=<keyid>] GPG-sign commits. The keyid argument is optional and defaults to the committer identity; if specified, it must be stuck to the option without a space. -q, --quiet Be quiet. Implies --no-stat. -v, --verbose Be verbose. Implies --stat. --stat Show a diffstat of what changed upstream since the last rebase. The diffstat is also controlled by the configuration option rebase.stat. -n, --no-stat Do not show a diffstat as part of the rebase process. --no-verify This option bypasses the pre-rebase hook. See also githooks(5). --verify Allows the pre-rebase hook to run, which is the default. This option can be used to override --no-verify. See also githooks(5). -C<n> Ensure at least <n> lines of surrounding context match before and after each change. When fewer lines of surrounding context exist they all must match. By default no context is ever ignored. -f, --force-rebase Force a rebase even if the current branch is up-to-date and the command without --force would return without doing anything. You may find this (or --no-ff with an interactive rebase) helpful after reverting a topic branch merge, as this option recreates the topic branch with fresh commits so it can be remerged successfully without needing to "revert the reversion" (see the revert-a-faulty-merge How-To[1] for details). --fork-point, --no-fork-point Use reflog to find a better common ancestor between <upstream> and <branch> when calculating which commits have been introduced by <branch>. When --fork-point is active, fork_point will be used instead of <upstream> to calculate the set of commits to rebase, where fork_point is the result of git merge-base --fork-point <upstream> <branch> command (see git-merge-base(1)). If fork_point ends up being empty, the <upstream> will be used as a fallback. If either <upstream> or --root is given on the command line, then the default is --no-fork-point, otherwise the default is --fork-point. --ignore-whitespace, --whitespace=<option> These flag are passed to the git apply program (see git-apply(1)) that applies the patch. Incompatible with the --interactive option. --committer-date-is-author-date, --ignore-date These flags are passed to git am to easily change the dates of the rebased commits (see git-am(1)). Incompatible with the --interactive option. -i, --interactive Make a list of the commits which are about to be rebased. Let the user edit that list before rebasing. This mode can also be used to split commits (see SPLITTING COMMITS below). The commit list format can be changed by setting the configuration option rebase.instructionFormat. A customized instruction format will automatically have the long commit hash prepended to the format. -p, --preserve-merges Recreate merge commits instead of flattening the history by replaying commits a merge commit introduces. Merge conflict resolutions or manual amendments to merge commits are not preserved. This uses the --interactive machinery internally, but combining it with the --interactive option explicitly is generally not a good idea unless you know what you are doing (see BUGS below). -x <cmd>, --exec <cmd> Append "exec <cmd>" after each line creating a commit in the final history. <cmd> will be interpreted as one or more shell commands. You may execute several commands by either using one instance of --exec with several commands: git rebase -i --exec "cmd1 && cmd2 && ..." or by giving more than one --exec: git rebase -i --exec "cmd1" --exec "cmd2" --exec ... If --autosquash is used, "exec" lines will not be appended for the intermediate commits, and will only appear at the end of each squash/fixup series. This uses the --interactive machinery internally, but it can be run without an explicit --interactive. --root Rebase all commits reachable from <branch>, instead of limiting them with an <upstream>. This allows you to rebase the root commit(s) on a branch. When used with --onto, it will skip changes already contained in <newbase> (instead of <upstream>) whereas without --onto it will operate on every change. When used together with both --onto and --preserve-merges, all root commits will be rewritten to have <newbase> as parent instead. --autosquash, --no-autosquash When the commit log message begins with "squash! ..." (or "fixup! ..."), and there is a commit whose title begins with the same ..., automatically modify the todo list of rebase -i so that the commit marked for squashing comes right after the commit to be modified, and change the action of the moved commit from pick to squash (or fixup). Ignores subsequent "fixup! " or "squash! " after the first, in case you referred to an earlier fixup/squash with git commit --fixup/--squash. This option is only valid when the --interactive option is used. If the --autosquash option is enabled by default using the configuration variable rebase.autoSquash, this option can be used to override and disable this setting. --autostash, --no-autostash Automatically create a temporary stash before the operation begins, and apply it after the operation ends. This means that you can run rebase on a dirty worktree. However, use with care: the final stash application after a successful rebase might result in non-trivial conflicts. --no-ff With --interactive, cherry-pick all rebased commits instead of fast-forwarding over the unchanged ones. This ensures that the entire history of the rebased branch is composed of new commits. Without --interactive, this is a synonym for --force-rebase. You may find this helpful after reverting a topic branch merge, as this option recreates the topic branch with fresh commits so it can be remerged successfully without needing to "revert the reversion" (see the revert-a-faulty-merge How-To[1] for details).MERGE STRATEGIES The merge mechanism (git merge and git pull commands) allows the backend merge strategies to be chosen with -s option. Some strategies can also take their own options, which can be passed by giving -X<option> arguments to git merge and/or git pull. resolve This can only resolve two heads (i.e. the current branch and another branch you pulled from) using a 3-way merge algorithm. It tries to carefully detect criss-cross merge ambiguities and is considered generally safe and fast. recursive This can only resolve two heads using a 3-way merge algorithm. When there is more than one common ancestor that can be used for 3-way merge, it creates a merged tree of the common ancestors and uses that as the reference tree for the 3-way merge. This has been reported to result in fewer merge conflicts without causing mismerges by tests done on actual merge commits taken from Linux 2.6 kernel development history. Additionally this can detect and handle merges involving renames. This is the default merge strategy when pulling or merging one branch. The recursive strategy can take the following options: ours This option forces conflicting hunks to be auto-resolved cleanly by favoring our version. Changes from the other tree that do not conflict with our side are reflected to the merge result. For a binary file, the entire contents are taken from our side. This should not be confused with the ours merge strategy, which does not even look at what the other tree contains at all. It discards everything the other tree did, declaring our history contains all that happened in it. theirs This is the opposite of ours. patience With this option, merge-recursive spends a little extra time to avoid mismerges that sometimes occur due to unimportant matching lines (e.g., braces from distinct functions). Use this when the branches to be merged have diverged wildly. See also git-diff(1)--patience. diff-algorithm=[patience|minimal|histogram|myers] Tells merge-recursive to use a different diff algorithm, which can help avoid mismerges that occur due to unimportant matching lines (such as braces from distinct functions). See also git- diff(1)--diff-algorithm. ignore-space-change, ignore-all-space, ignore-space-at-eol Treats lines with the indicated type of whitespace change as unchanged for the sake of a three-way merge. Whitespace changes mixed with other changes to a line are not ignored. See also git-diff(1)-b, -w, and --ignore-space-at-eol. o If their version only introduces whitespace changes to a line, our version is used; o If our version introduces whitespace changes but their version includes a substantial change, their version is used; o Otherwise, the merge proceeds in the usual way. renormalize This runs a virtual check-out and check-in of all three stages of a file when resolving a three-way merge. This option is meant to be used when merging branches with different clean filters or end-of-line normalization rules. See "Merging branches with differing checkin/checkout attributes" in gitattributes(5) for details. no-renormalize Disables the renormalize option. This overrides the merge.renormalize configuration variable. no-renames Turn off rename detection. See also git-diff(1)--no-renames. find-renames[=<n>] Turn on rename detection, optionally setting the similarity threshold. This is the default. See also git- diff(1)--find-renames. rename-threshold=<n> Deprecated synonym for find-renames=<n>. subtree[=<path>] This option is a more advanced form of subtree strategy, where the strategy makes a guess on how two trees must be shifted to match with each other when merging. Instead, the specified path is prefixed (or stripped from the beginning) to make the shape of two trees to match. octopus This resolves cases with more than two heads, but refuses to do a complex merge that needs manual resolution. It is primarily meant to be used for bundling topic branch heads together. This is the default merge strategy when pulling or merging more than one branch. ours This resolves any number of heads, but the resulting tree of the merge is always that of the current branch head, effectively ignoring all changes from all other branches. It is meant to be used to supersede old development history of side branches. Note that this is different from the -Xours option to the recursive merge strategy. subtree This is a modified recursive strategy. When merging trees A and B, if B corresponds to a subtree of A, B is first adjusted to match the tree structure of A, instead of reading the trees at the same level. This adjustment is also done to the common ancestor tree. With the strategies that use 3-way merge (including the default, recursive), if a change is made on both branches, but later reverted on one of the branches, that change will be present in the merged result; some people find this behavior confusing. It occurs because only the heads and the merge base are considered when performing a merge, not the individual commits. The merge algorithm therefore considers the reverted change as no change at all, and substitutes the changed version instead.NOTES You should understand the implications of using git rebase on a repository that you share. See also RECOVERING FROM UPSTREAM REBASE below. When the git-rebase command is run, it will first execute a "pre-rebase" hook if one exists. You can use this hook to do sanity checks and reject the rebase if it isn't appropriate. Please see the template pre-rebase hook script for an example. Upon completion, <branch> will be the current branch.INTERACTIVE MODE Rebasing interactively means that you have a chance to edit the commits which are rebased. You can reorder the commits, and you can remove them (weeding out bad or otherwise unwanted patches). The interactive mode is meant for this type of workflow: 1. have a wonderful idea 2. hack on the code 3. prepare a series for submission 4. submit where point 2. consists of several instances of a) regular use 1. finish something worthy of a commit 2. commit b) independent fixup 1. realize that something does not work 2. fix that 3. commit it Sometimes the thing fixed in b.2. cannot be amended to the not-quite perfect commit it fixes, because that commit is buried deeply in a patch series. That is exactly what interactive rebase is for: use it after plenty of "a"s and "b"s, by rearranging and editing commits, and squashing multiple commits into one. Start it with the last commit you want to retain as-is: git rebase -i <after-this-commit> An editor will be fired up with all the commits in your current branch (ignoring merge commits), which come after the given commit. You can reorder the commits in this list to your heart's content, and you can remove them. The list looks more or less like this: pick deadbee The oneline of this commit pick fa1afe1 The oneline of the next commit ... The oneline descriptions are purely for your pleasure; git rebase will not look at them but at the commit names ("deadbee" and "fa1afe1" in this example), so do not delete or edit the names. By replacing the command "pick" with the command "edit", you can tell git rebase to stop after applying that commit, so that you can edit the files and/or the commit message, amend the commit, and continue rebasing. If you just want to edit the commit message for a commit, replace the command "pick" with the command "reword". To drop a commit, replace the command "pick" with "drop", or just delete the matching line. If you want to fold two or more commits into one, replace the command "pick" for the second and subsequent commits with "squash" or "fixup". If the commits had different authors, the folded commit will be attributed to the author of the first commit. The suggested commit message for the folded commit is the concatenation of the commit messages of the first commit and of those with the "squash" command, but omits the commit messages of commits with the "fixup" command. git rebase will stop when "pick" has been replaced with "edit" or when a command fails due to merge errors. When you are done editing and/or resolving conflicts you can continue with git rebase --continue. For example, if you want to reorder the last 5 commits, such that what was HEAD~4 becomes the new HEAD. To achieve that, you would call git rebase like this: $ git rebase -i HEAD~5 And move the first patch to the end of the list. You might want to preserve merges, if you have a history like this: X \ A---M---B / ---o---O---P---Q Suppose you want to rebase the side branch starting at "A" to "Q". Make sure that the current HEAD is "B", and call $ git rebase -i -p --onto Q O Reordering and editing commits usually creates untested intermediate steps. You may want to check that your history editing did not break anything by running a test, or at least recompiling at intermediate points in history by using the "exec" command (shortcut "x"). You may do so by creating a todo list like this one: pick deadbee Implement feature XXX fixup f1a5c00 Fix to feature XXX exec make pick c0ffeee The oneline of the next commit edit deadbab The oneline of the commit after exec cd subdir; make test ... The interactive rebase will stop when a command fails (i.e. exits with non-0 status) to give you an opportunity to fix the problem. You can continue with git rebase --continue. The "exec" command launches the command in a shell (the one specified in $SHELL, or the default shell if $SHELL is not set), so you can use shell features (like "cd", ">", ";" ...). The command is run from the root of the working tree. $ git rebase -i --exec "make test" This command lets you check that intermediate commits are compilable. The todo list becomes like that: pick 5928aea one exec make test pick 04d0fda two exec make test pick ba46169 three exec make test pick f4593f9 four exec make testSPLITTING COMMITS In interactive mode, you can mark commits with the action "edit". However, this does not necessarily mean that git rebase expects the result of this edit to be exactly one commit. Indeed, you can undo the commit, or you can add other commits. This can be used to split a commit into two: o Start an interactive rebase with git rebase -i <commit>^, where <commit> is the commit you want to split. In fact, any commit range will do, as long as it contains that commit. o Mark the commit you want to split with the action "edit". o When it comes to editing that commit, execute git reset HEAD^. The effect is that the HEAD is rewound by one, and the index follows suit. However, the working tree stays the same. o Now add the changes to the index that you want to have in the first commit. You can use git add (possibly interactively) or git gui (or both) to do that. o Commit the now-current index with whatever commit message is appropriate now. o Repeat the last two steps until your working tree is clean. o Continue the rebase with git rebase --continue. If you are not absolutely sure that the intermediate revisions are consistent (they compile, pass the testsuite, etc.) you should use git stash to stash away the not-yet-committed changes after each commit, test, and amend the commit if fixes are necessary.RECOVERING FROM UPSTREAM REBASE Rebasing (or any other form of rewriting) a branch that others have based work on is a bad idea: anyone downstream of it is forced to manually fix their history. This section explains how to do the fix from the downstream's point of view. The real fix, however, would be to avoid rebasing the upstream in the first place. To illustrate, suppose you are in a situation where someone develops a subsystem branch, and you are working on a topic that is dependent on this subsystem. You might end up with a history like the following: o---o---o---o---o---o---o---o---o master \ o---o---o---o---o subsystem \ *---*---* topic If subsystem is rebased against master, the following happens: o---o---o---o---o---o---o---o master \ \ o---o---o---o---o o'--o'--o'--o'--o' subsystem \ *---*---* topic If you now continue development as usual, and eventually merge topic to subsystem, the commits from subsystem will remain duplicated forever: o---o---o---o---o---o---o---o master \ \ o---o---o---o---o o'--o'--o'--o'--o'--M subsystem \ / *---*---*-..........-*--* topic Such duplicates are generally frowned upon because they clutter up history, making it harder to follow. To clean things up, you need to transplant the commits on topic to the new subsystem tip, i.e., rebase topic. This becomes a ripple effect: anyone downstream from topic is forced to rebase too, and so on! There are two kinds of fixes, discussed in the following subsections: Easy case: The changes are literally the same. This happens if the subsystem rebase was a simple rebase and had no conflicts. Hard case: The changes are not the same. This happens if the subsystem rebase had conflicts, or used --interactive to omit, edit, squash, or fixup commits; or if the upstream used one of commit --amend, reset, or filter-branch. The easy case Only works if the changes (patch IDs based on the diff contents) on subsystem are literally the same before and after the rebase subsystem did. In that case, the fix is easy because git rebase knows to skip changes that are already present in the new upstream. So if you say (assuming you're on topic) $ git rebase subsystem you will end up with the fixed history o---o---o---o---o---o---o---o master \ o'--o'--o'--o'--o' subsystem \ *---*---* topic The hard case Things get more complicated if the subsystem changes do not exactly correspond to the ones before the rebase. Note While an "easy case recovery" sometimes appears to be successful even in the hard case, it may have unintended consequences. For example, a commit that was removed via git rebase --interactive will be resurrected! The idea is to manually tell git rebase "where the old subsystem ended and your topic began", that is, what the old merge-base between them was. You will have to find a way to name the last commit of the old subsystem, for example: o With the subsystem reflog: after git fetch, the old tip of subsystem is at subsystem@{1}. Subsequent fetches will increase the number. (See git-reflog(1).) o Relative to the tip of topic: knowing that your topic has three commits, the old tip of subsystem must be topic~3. You can then transplant the old subsystem..topic to the new tip by saying (for the reflog case, and assuming you are on topic already): $ git rebase --onto subsystem subsystem@{1} The ripple effect of a "hard case" recovery is especially bad: everyone downstream from topic will now have to perform a "hard case" recovery too!BUGS The todo list presented by --preserve-merges --interactive does not represent the topology of the revision graph. Editing commits and rewording their commit messages should work fine, but attempts to reorder commits tend to produce counterintuitive results. For example, an attempt to rearrange 1 --- 2 --- 3 --- 4 --- 5 to 1 --- 2 --- 4 --- 3 --- 5 by moving the "pick 4" line will result in the following history: 3 / 1 --- 2 --- 4 --- 5GIT Part of the git(1) suiteNOTES 1. revert-a-faulty-merge How-To git-htmldocs/howto/revert-a-faulty-merge.htmlGit 2.10.0 09/02/2016 GIT-REBASE(1)(END)]]></content>
<tags>
<tag>git</tag>
<tag>rebase</tag>
</tags>
</entry>
<entry>
<title><![CDATA[JavaScript如何遍历Object]]></title>
<url>%2Fobject-loop%2F</url>
<content type="text"><![CDATA[遍历对象的方法: for … in Object.getOwnPropertyNames Object.keys for … of ES6 Object.values ES7 Object.entries ES7 for … in for…in 循环只遍历可枚举属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性，例如 String 的 indexOf() 方法或者 Object 的 toString 方法。循环将迭代对象的所有可枚举属性和从它的构造函数的 prototype 继承而来的（包括被覆盖的内建属性）。来自MDN 12345678910let o = { 'name': 'huixisheng', 'mail': '[email protected]'}for(let i in o) { console.log('%s: %s', i, o[i]); // name: huixisheng // mail: [email protected]} 仅迭代自身的属性如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性 (也能使用propertyIsEnumerable)。另外，如果你知道外部不存在任何的干扰代码，你可以扩展内置原型与检查方法。 来自MDN 1234567891011121314151617181920212223242526272829let o = { 'name': 'huixisheng', 'mail': '[email protected]'}function Person() { this.city = 'hangzhou';}Person.prototype = o;const objPerson = new Person();for (let prop in objPerson) { // propertyIsEnumerable 返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性。 if (objPerson.hasOwnProperty(prop)) { // objPerson.city: hangzhou // 原型链上的属性不会显示 console.log('objPerson.%s: %s', prop, objPerson[prop]); }}for(let prop1 in objPerson){ console.log('objPerson.%s: %s', prop1, objPerson[prop1]);}//objPerson.city: hangzhou//objPerson.name: huixisheng//objPerson.mail: [email protected] Object.getOwnPropertyNames() object.getOwnPropertyNames 返回一个数组，该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。 1234567891011121314//不可枚举属性var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; }, enumerable: false }});my_obj.foo = 1;console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]console.log(Object.keys(my_obj)); // [ 'foo' ]for (var i in my_obj) { console.log(i, my_obj[i]); // foo 1} 12345678910let o = { 'name': 'huixisheng', 'mail': '[email protected]'}console.log(Object.getOwnPropertyNames(o)); // [ 'name', 'mail' ]console.log(Object.getOwnPropertyNames(Object).join(',')); // length,name,arguments,caller,prototype,assign,create,freeze,getOwnPropertyDescriptor,getOwnPropertyNames,getOwnPropertySymbols,is,isExtensible,isFrozen,isSealed,keys,preventExtensions,seal,defineProperty,defineProperties,getPrototypeOf,setPrototypeOfconsole.log(Object.getOwnPropertyNames(Array).join(',')); // length,name,arguments,caller,prototype,isArray,from,ofconsole.log(Object.getOwnPropertyNames(Function).join(',')); // length,name,arguments,caller,prototypeconsole.log(Object.getOwnPropertyNames(Map).join(',')); // length,name,arguments,caller,prototype for … of for…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩. 123456789101112131415let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);for (let entry of iterable) { console.log(entry);}// [a, 1]// [b, 2]// [c, 3]for (let [key, value] of iterable) { console.log(value);}// 1// 2// 3 Object.values() ES7 Object.values() 方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。来自MDN 12345let o = { 'name': 'huixisheng', 'mail': '[email protected]'};Object.values(o); // ['huixisheng', '[email protected]'] 兼容性: http://node.green/#ES2017-features-Object-static-methods-Object-values http://kangax.github.io/compat-table/es2016plus/#test-Object_static_methods http://www.webbrowsercompatibility.com/ Polyfill : shims/Object.values tc39/proposal-object-values-entries Object.entries ES7兼容性 http://node.green/#ES2017-features-Object-static-methods-Object-entries 12345678910let o = { 'name': 'huixisheng', 'mail': '[email protected]'}for(let [key, value] of Object.entries(o)) { console.log(key, value);}// name huixisheng// mail [email protected] 扩展阅读 Object.keys()与 for…in 遍历对象，输出的结果为什么是顺序的 ES6之6种遍历对象属性的方法 JavaScript学习笔记：对象属性的枚举 JavaScript 学习系列二：Object 对象 Object 对象和 Array 对象 详解forin，Object.keys和Object.getOwnPropertyNames的区别 ES6 中的 Set、Map 和 WeakMap http://yanhaijing.com/javascript/2015/05/08/member-of-object/]]></content>
<tags>
<tag>JavaScript</tag>
<tag>Object</tag>
</tags>
</entry>
<entry>
<title><![CDATA[mac相关技巧整理]]></title>
<url>%2Fmac-skill%2F</url>
<content type="text"><![CDATA[整理工作中容易遗忘的小技巧和碰到的问题。 屏幕共享打开 系统偏好设置 -> 共享 -> 屏幕共享。在另外的电脑打开 Finder -> 前往 -> 连接服务器 -> 输入 vnc://ip 访问。或者⌘+K 相关的远程控制s软件splashtop，teamviewer 找回Sierra允许”任何来源”的应用sudo spctl --master-disable 屏幕截图Command＋shift＋3 全屏截图，保存截图到桌面Command＋shift＋4 鼠标选定区域截图，保存截图到桌面 相关的扩展阅读: 你所不知道的Mac截图的强大 OS X 系统自带的截图快捷键有哪些？ 如何重置 Mac 上的 NVRAMOption + Command + P + R + Power https://support.apple.com/zh-cn/HT204063 https://www.zhihu.com/question/20401972 Apache查看是否开启apache服务 ps aux | grep httpd 或者 apachectl status 开启Apachesudo apachectl start 相关的设置目录 /etc/apache2/ 扩展阅读 Mac OS X Lion 如何删除自带的 apache php？ Mac OS X 启用 Web 服务器 如何查看对于窗口的程序sudo lsof -iTCP:80 | grep LISTEN 123456➜ apache2 sudo lsof -iTCP:80 | grep LISTENhttpd 48016 root 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)httpd 48040 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)httpd 48506 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)httpd 48507 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN)httpd 48508 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:http (LISTEN) sudo lsof -n -i4TCP:80 | grep LISTEN 查看当前所有监听的端口以及对应的Command和PID 1234567891011121314151617➜ apache2 sudo lsof -nP -iTCP -sTCP:LISTENCOMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 76 huixisheng 160u IPv6 0x89923b92a98a8d39 0t0 TCP *:9999 (LISTEN)java 76 huixisheng 431u IPv6 0x89923b92b82f0d39 0t0 TCP *:49493 (LISTEN)Dash 5123 huixisheng 18u IPv4 0x89923b92b1000c41 0t0 TCP *:50621 (LISTEN)Dash 5123 huixisheng 21u IPv6 0x89923b92a98a87f9 0t0 TCP *:50621 (LISTEN)Shadowsoc 7093 huixisheng 4u IPv4 0x89923b92aa812159 0t0 TCP *:8090 (LISTEN)Shadowsoc 7093 huixisheng 7u IPv4 0x89923b92a3c75c41 0t0 TCP 127.0.0.1:1080 (LISTEN)phpstorm 10310 huixisheng 143u IPv4 0x89923b92af530159 0t0 TCP 127.0.0.1:6942 (LISTEN)phpstorm 10310 huixisheng 336u IPv4 0x89923b92a60cd349 0t0 TCP 127.0.0.1:63342 (LISTEN)plugin_ho 12471 huixisheng 37u IPv4 0x89923b92aaa35a51 0t0 TCP 127.0.0.1:54000 (LISTEN)�\x9c\x89 24465 huixisheng 12u IPv4 0x89923b92b5a30159 0t0 TCP *:32445 (LISTEN)httpd 48016 root 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)httpd 48040 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)httpd 48506 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)httpd 48507 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN)httpd 48508 _www 4u IPv6 0x89923b92a98a82b9 0t0 TCP *:80 (LISTEN) 安装nginx1234567891011121314151617➜ desktop brew install nginxDocroot is: /usr/local/var/wwwThe default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so thatnginx can run without sudo.nginx will load all files in /usr/local/etc/nginx/servers/.To have launchd start nginx now and restart at login: brew services start nginxOr, if you don't want/need a background service you can just run: nginx==> Summary🍺 /usr/local/Cellar/nginx/1.12.0_1: 23 files, 1MB➜ desktop which nginx/usr/local/bin/nginx➜ desktop sudo brew services start nginx 不过试了一下，不是超级用户登陆，而是普通用户登陆，并且监听的端口在1024以下的（例如把默认的8080端口改为了80端口），nginx 开机是启动不了。因此，要 nginx 开机启动的话，需要给予它管理员权限：sudo chown root:wheel /usr/local/Cellar/nginx/1.2.6/sbin/nginxsudo chmod u+s /usr/local/Cellar/nginx/1.2.6/sbin/nginx 来自: http://dhq.me/mac-install-nginx-mysql-php-fpm vagrant up 开启端口报错==> homestead-7: Checking if box ‘laravel/homestead’ is up to date…Vagrant cannot forward the specified ports on this VM, since theywould collide with some other application that is already listeningon these ports. The forwarded port to 27017 is already in useon the host machine. To fix this, modify your current project’s Vagrantfile to use anotherport. Example, where ‘1234’ would be replaced by a unique host port: config.vm.network :forwarded_port, guest: 27017, host: 1234 Sometimes, Vagrant will attempt to auto-correct this for you. In thiscase, Vagrant was unable to. This is usually because the guest machineis in a state which doesn’t allow modifying port forwarding. You couldtry ‘vagrant reload’ (equivalent of running a halt followed by an up)so vagrant can attempt to auto-correct this upon booting. Be warnedthat any unsaved work might be lost.➜ Homestead git:(master) ✗ sudo lsof -n -i4TCP:27017 | grep LISTENmongod 526 huixisheng 11u IPv4 0x40824e155718bce3 0t0 TCP 127.0.0.1:27017 (LISTEN) 原因homestead和mongod的端口冲突了 相关资源 让 Mac 变成神兵利器的软件清单 macOS 上的时间跟踪软件]]></content>
<tags>
<tag>MacOSX</tag>
</tags>
</entry>
<entry>
<title><![CDATA[vue @input事件]]></title>
<url>%2Fvue-input%2F</url>
<content type="text"><![CDATA[今天有同事过来问我，给el-input 加了@input参数$event变成了input变化后的值(v-model)。大致伪代码如下: 对于@input的印象是: Vue2.x去除了.sync,需要双向绑定就用到了@input .sync在2.3.0又回来了 所以要让组件的 v-model 生效，它必须：接受一个 value 属性在有新的 value 时触发 input 事件 于是去看下el-input源码，截取的伪代码: 12345678910<input ref="input" @input="handleInput">methods: { handleInput(event) { const value = event.target.value; this.$emit('input', value); this.setCurrentValue(value); this.$emit('change', value); },} 可以理解$event为v-model没有问题，可是handlerInput($event, index) { 第一反应index的值应该没有才对。于是去Vue的源码找答案，Vue的源码并不是晦涩难懂，相反而是通俗易懂，当然精髓的代码还没有完全参透。接下来要抽段时间好好品味一番。@TODO 打了断点，大致明白了点，不会像一开始那么迷茫。 input事件参阅了下资料: 当 <input> 或 <textarea> 元素的值更改时，DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素，当用户单击控件时，输入事件不会触发，因为value属性不会更改。) 此外，当内容更改时，它会在 contenteditable 的编辑器上触发。在这种情况下，事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真，“编辑主机”是其父级不可编辑的最近的祖先元素。同样，它也会在 designMode 编辑器的根元素上触发。 来自: https://developer.mozilla.org/zh-CN/docs/Web/Events/input 最后需要注意的是：oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案，如果大家有更好的方法，欢迎参与讨论。 来自: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html 参考 https://github.com/ElemeFE/element/blob/d3bf30b48c66649e659c29df80844daa7992f1d9/packages/input/src/input.vue https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md#%E6%95%B4%E8%A1%8C%E9%AB%98%E4%BA%AE https://developer.mozilla.org/zh-CN/docs/Web/Events/input]]></content>
<tags>
<tag>Vue</tag>
<tag>Event</tag>
<tag>input</tag>
</tags>
</entry>
<entry>
<title><![CDATA[MacOSX安装多版本php]]></title>
<url>%2FMacOSX-php%2F</url>
<content type="text"><![CDATA[由于lavarel的环境homestead升级成了7.x,导致在外面跑composer update会报错，很麻烦，于是需要升级系统自带php的版本。1234➜ bin /usr/bin/php -vPHP 5.6.30 (cli) (built: Feb 7 2017 16:06:52)Copyright (c) 1997-2016 The PHP GroupZend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies 123# 添加brew的php源brew tap homebrew/phpbrew tap homebrew/dupes 123# 安装php71brew install php71brew link php71 1234➜ huixisheng.github.com git:(dev) ✗ php -vPHP 7.1.5 (cli) (built: May 13 2017 13:30:32) ( NTS )Copyright (c) 1997-2017 The PHP GroupZend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies 缺少mongodb的扩展报错123Problem 1 - jenssegers/mongodb v3.2.2 requires mongodb/mongodb ^1.0.0 -> satisfiable by mongodb/mongodb[1.1.2, 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.1.0, 1.1.1]. - jenssegers/mongodb v3.2.0 requires mongodb/mongodb ^1.0.0 -> satisfiable by mongodb/mongodb[1.1.2, 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.1.0, 1.1.1]. 12brew search mongodbbrew install php71-mongodb 居然不用手动配置php.ini 删除MaxOSX自带的php Mac默认安装了较低版本的php，删除之，统一使用brew管理 查看$ php -vPHP 5.6.25 (cli) (built: Sep 19 2016 15:45:41)Copyright (c) 1997-2016 The PHP GroupZend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies 删除之$ sudo rm -rf /private/etc/php-fpm.conf.default /private/etc/php.ini php.ini.default$ sudo rm -rf /usr/bin/php /usr/bin/php-config /usr/bin/phpdoc /usr/bin/phpize$ sudo rm -rf /usr/include/php$ sudo rm -rf /usr/lib/php$ sudo rm -rf /usr/sbin/php-fpm$ sudo rm -rf /usr/share/php$ sudo rm -rf /usr/share/man/man1/php-config.1 /usr/share/man/man1/php.1 /usr/share/man/man1/phpize.1$ sudo rm -rf /usr/share/man/man8/php-fpm.8 来自http://www.jianshu.com/p/81a6d5253d48 其他1$ /usr/local/Cellar/nginx/1.10.3/html 12345$ sudo php-fpm -c /usr/local/etc/php/7.1/php.ini -y /usr/local/etc/php/7.1/php-fpm.confPassword:[27-Mar-2018 16:25:00] ERROR: failed to open error_log (/usr/var/log/php-fpm.log): No such file or directory (2)[27-Mar-2018 16:25:00] ERROR: failed to post process the configuration[27-Mar-2018 16:25:00] ERROR: FPM initialization failed 修改php-fpm.conf 的配置 error_log为绝对绝对地址 配置nginx解析php记得开启php-fpm 123456789location ~ \.php$ { root html; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; # 取消默认的配置无法解析 # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; include fastcgi_params;} 参考 http://www.jianshu.com/p/66d1d4ee172c https://github.com/Homebrew/homebrew-php http://nodejh.com/post/macos-sierra-apache-multiple-php-versions/]]></content>
<tags>
<tag>mysql</tag>
<tag>MacOSX</tag>
</tags>
</entry>
<entry>
<title><![CDATA[phpstorm相关配置]]></title>
<url>%2Fphpstorm%2F</url>
<content type="text"><![CDATA[值得开心的事: 在最新的2017.1版本中，PhpStorm/WebStorm已经对Vue.js 进行了原生支持 相关问题PhpStorm与WebStorm关系引用官网说明: 123PhpStorm = WebStorm + PHP + DB/SQLAll the features of WebStorm are included into PhpStorm, and full-fledged support for PHP and Databases/SQL support are added on top. .php文件的语法高亮设置.php 文件不高亮 Editor->file types 里面可以设置相同的类的代码高亮。php类，可以增加：php4,php5,html,phtml等 phpstorm注释的时候的斜线位置不在缩进的位置phpstorm注释的代码在Sublime中打开，收起代码的时候很不友好，估计有强迫症用户更是受不了吧。 Preferences->Editor->Code Style->PHP->Other 里面取消 Line comment at first column之前的勾选就行了！ 如何修改phpstorm新建文件默认模版注释默认注释:1234567<?php/** * Created by PhpStorm. * User: huixisheng * Date: 2017/5/26 * Time: 21:00 */ 123456<?php/** * * @date 2017-05-26 21:06 * @author huixisheng <[email protected]> */ 配置Laravel代码跳转安装Laravel Plugin。执行php artisan ide-helper:generate https://github.com/barryvdh/laravel-ide-helper 怎么设置tab为4个空格缩进Editor -> Code Style -> PHP，右侧不要勾选 Use tab character vue的代码缩进由4个空格改为2个空格Editor > Code Style > JavaScript的设置，Indent键值为4 常用的快捷键 快捷键 描述 shift+command+↑ 代码行上移 control+g 选中相同单词 Commond+d 复制行到下一行 Command+delete 删除当前行 double shift 搜索文件 ⌘ + E 历史文件 ⌘⌥O 搜索函数。全项目范围 ⌥ + 回车 导入包，自动修正 ⌘ + n 快事为每个成员属性生成 getter 及 setter 方法 苹果键盘修饰键 Command ⌘Shift ⇧Option Alt ⌥Control ⌃Caps Lock ⇪Fn PHPStorm 快捷键大全（Win/Linux/Mac） Mac 键盘快捷键 认识Mac下的那些符号! 如何打特殊符号搜狗输入法->详情表情和符号 切换至ES6规范在项目中开启ES6 Preferences->Languages & Frameworks->JavaScript->JavaScript language version->ECMAScript 6。 难找的话直接搜索JavaScript 主题相关文章介绍 http://chinagdg.org/2016/02/ttt2-seti-ui/ https://www.zhihu.com/question/37762479 https://www.zhihu.com/question/35413120 https://www.zhihu.com/question/35203203 mac下intellij idea 变得特别卡该如何解决？ http://www.webstormthemes.com/themes-list?title=&field_tags_tid=All http://www.jianshu.com/p/10f5f0055715 https://blog.fazero.me/2015/07/25/WebStorm%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98%E5%92%8C%E4%BF%AE%E6%94%B9%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F/ https://www.zhihu.com/question/35413120 https://plugins.jetbrains.com/plugin/8006-material-theme-ui http://color-themes.com/?view=index&layout=Generic&order=popular&search=&page=2 相关文章 新特性 https://www.jetbrains.com/webstorm/whatsnew/#v2017-1-completion-in-webpackconfigjs jsdoc https://www.jetbrains.com/help/webstorm/2017.1/creating-jsdoc-comments.html http://blog.lxjwlt.com/2016/09/11/jsdoc.html http://xwartz.xyz/pupa/2016/05/my-workflow-in-sublime/ WebStorm 有哪些过人之处？ https://www.zhihu.com/question/20936155 eslint http://laichuanfeng.com/work/use-eslint-in-webstorm/ https://plugins.jetbrains.com 如何优雅的使用 phpStorm 使用phpstorm对代码做智能重构，适用所有JetBrains IDE工具 https://juejin.im/entry/5a2a6bd45188253d6817802b https://juejin.im/post/5a61fe346fb9a01c9b660765 WebStorm（前端）和 PhpStorm（后端 PHP）IDE 的统一设置。 https://github.com/zhaotoday/ide-settings 在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持 http://lightcss.com/get-vuejs-support-in-webstorm-and-phpstorm/ 更新日志2017-05-28 01:02:06 添加主题和相关介绍文章 添加碰到的问题 添加常用的快捷键 参考 http://lightcss.com/get-vuejs-support-in-webstorm-and-phpstorm/]]></content>
<tags>
<tag>开发工具</tag>
<tag>phpstorm</tag>
</tags>
</entry>
<entry>
<title><![CDATA[项目碰到的问题整理]]></title>
<url>%2Fwebapp-tips%2F</url>
<content type="text"><![CDATA[兼容性 项目总结 webapck sticky Vue 近期做的项目零零散散的问题的总结。主要是使用webpack,vue碰到的问题。 条件判断优化当逻辑一复杂，下面的代码就会显得很懊糟，难以维护。1234<button class="jfbtn jfbtn-disable jfbtn-block" v-show="detail.btn_info.type == 'disable'" v-text="detail.btn_info.text"></button><button class="jfbtn jfbtn-disable jfbtn-block" @click="btnAction" v-show="detail.btn_info.type == 'alertable'" v-text="detail.btn_info.text"></button><button class="jfbtn jfbtn-primary jfbtn-block" @click="exchangeBtn" v-show="detail.btn_info.type == 'clickable'" v-text="detail.btn_info.text"></button><button node-type="countdown-btn" class="jfbtn jfbtn-disable jfbtn-block" v-show="detail.btn_info.type == 'countdown'"></button> 1<button @click="btnClick" :class="btnClass" v-text="btn_info.text"></button> 绑定class配合计算属性使得代码逻辑很清新。 12345678910111213141516171819202122computed: { btnClass () { return { 'jfbtn': true, 'jfbtn-block': true, 'jfbtn-disable': this.showBtnDisableClass, 'jfbtn-primary': this.showBtnPrimaryClass }; }, showBtnDisableClass () { const type = this.btn_info.type; if (type === 'disable' || type === 'alertable' || type === 'countdown' || type === 'auth_check') { return true; } return false; }, showBtnPrimaryClass () { const type = this.btn_info.type; return type === 'clickable'; }}, .vue组件$mount报错按如下方式挂载组件12345import Vue from 'vue';import Detail from './views/detail';import './common';const cDetail = Vue.extend(Detail);new cDetail().$mount('#app'); 报错Cannot read property 'tagName' of null。跟踪代码进行调试，并没有找到问题所在。挂载组件的方式不对，还是打包配置不对，导致生成的组件有问题？尝试不同版本的Vue写简单的组件去挂载并没有什么问题。cDetail配合vue-router使用也是没有问题的。单独挂载就是会报错。后面发现.vue文件多个结构没有容器包含引起的。 1234567<template><div class="x1">内容1</div><div class="x2">内容2</div></template><script> ...</script> 修改如下:123456789<template><div> <div class="x1">内容1</div> <div class="x2">内容2</div></div></template><script> ...</script> https://github.com/vuejs/vue/issues/3212 使用vue-router导致app里面的网页title无法修改ios微信6.3.31测试通过,但是在美妆心得app中不行12345route: { data () { // document.title = '往期秒杀'; }}, 123456789101112131415161718const iframeLoad = function (src) { const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = src; document.body.appendChild(iframe); iframe.addEventListener('load', function () { setTimeout(function () { iframe.remove(); }, 0); });};router.afterEach(function (transition) { document.title = transition.to.title || '积分商城'; // https://segmentfault.com/a/1190000006712234?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io if (F.UA.cosmeapp) { iframeLoad('/favicon.ico'); }}); 参考 https://github.com/miaolz123/vue-helmet/issues/3 http://silverd.cn/2016/05/14/vue-first-project.html https://segmentfault.com/a/1190000006712234?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io https://gist.github.com/wszgxa/48eefb02650ea011ab28a116643890a9 https://segmentfault.com/a/1190000007387556 express配置post请求接口123app.post('/mock/new-task-price.json', function (req, res) { res.send('{"status": "1","msg": "成功领取积分奖励, 请在积分明细中查看哦!"}');}); webpack添加模拟请求123456789proxyTable: { '/api/credit/index': { target: host + '/mock/api_credit_index.json', changeOrigin: true, pathRewrite: { '^/api/credit/index': '' } },} webpack入口页面设置标题12345678<!DOCTYPE html><html> <head> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body></html> 123456new HtmlWebpackPlugin({ filename: 'index.html', // 必须是.ejs结尾的文件，.html的文件不会解析。或者模板的loader template: 'index.ejs', title: '积分商城',}), https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板 webpack多页面入口配置添加多个enter1234entry: { index: './src/index.js', detail: './src/detail.js'}, 配置多个HtmlWebpackPlugin12345678910111213141516171819202122new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.ejs', inject: true, title: '积分商城', minify: { removeComments: true, collapseWhitespace: true }, chunks: ['index']}),new HtmlWebpackPlugin({ filename: 'detail.html', template: 'index.ejs', inject: true, title: '商品详情', minify: { removeComments: false, collapseWhitespace: false }, chunks: ['detail']}), 入口文件和模板文件可以采用遍历的目录，这样就不要单独一个个配置。 多页面配置扩展阅读 https://github.com/lpreterite/multiple-page-vue-webpack-example https://github.com/yaoyao1987/vue-cli-multipage https://github.com/cnu4/Webpack-Vue-MultiplePage http://xjinjin.net/2016/08/20/webpack-multiple-page-static/ position: sticky失效原因是html, body{ overflow: auto } 最初是想实现滚动某个位置的时候导航滚定在顶部。给相关的滚动元素绑定scroll事件快速滑动的时候存在细微的抖动效果。尝试了touchmove touchend等事件、_.throttle函数节流，结果还是不顺畅。发现淘宝的淘金币页面却是丝般丝般顺滑。导致是用了什么黑科技，看下源码 12345678910111213141516171819202122232425262728293031323334353637383940var n = $(window) , i = function o(t) { var e = $(t.el) , i = this; i.top = t.top || 0; var o = "static"; if (e.css({ position: "-webkit-sticky", top: i.top + "px", zIndex: 1e3 }), "boolean" != typeof t.isStatic || t.isStatic || (o = e.css("position")), "string" == typeof t.addStickyClass && (i.addStickyClass = t.addStickyClass), e.length > 0 && e.css("position").indexOf("sticky") == -1) { var r, a; !function() { var t = function s() { n.scrollTop() > i.ScrollTop ? (r.show(), i.addStickyClass && e.addClass(i.addStickyClass), e.css("position", "fixed")) : (r.hide(), i.addStickyClass && e.removeClass(i.addStickyClass), e.css("position", o)) }; i.nav = e, i.setPlaceHolder(), r = i.placeHolder, i.ScrollTop = e.offset().top, setTimeout(function() { i.ScrollTop = e.offset().top - i.top }, 10), a = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(t) { setTimeout(t, 1 / 60 * 1e3) } , n.on("scroll", function() { a(t) }) }() }}; 原来顺滑用的是sticky。然而由于项目之前用的是html,body{overflow: hidden;},改成了html, body{ overflow: auto }。结果我修改代码用上sticky就悲剧了。 已知的几个问题，外层overflow设置成auto,scroll,hidden会失效。 -http://wenbinzhou.lofter.com/post/65a3d_6f55339 javascript检测是否支持 来自https://segmentfault.com/a/1190000007183209?_ea=1288008123if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) { // 支持 sticky} 或者 来自 http://efe.baidu.com/blog/position-sticky/12345678910111213141516function isSupportSticky() { var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-']; var stickyText = ''; for (var i = 0; i < prefixTestList.length; i++ ) { stickyText += 'position:' + prefixTestList[i] + 'sticky;'; } // 创建一个dom来检查 var div = document.createElement('div'); var body = document.body; div.style.cssText = 'display:none;' + stickyText; body.appendChild(div); var isSupport = /sticky/i.test(window.getComputedStyle(div).position); body.removeChild(div); div = null; return isSupport;} 绑定scroll事件在ios设备不顺畅原因 来自 http://feg.netease.com/archives/377.html 上面这种方法在chrome模拟手机浏览器的表现很好，但是在移动端浏览器上粘顶的效果就没有那么平滑，尤其是在ios设备上，ios下的浏览器会在页面滚动的时候，暂停所有js的执行，直到滚动停止才会继续去执行js（注意暂停了所有js的执行，所以考虑用setTimeout或setInterval也是没有用的）。所以页面滚动时，scroll事件在iOS的浏览器下并不会持续被触发，而是在页面滚动停止后，才会去触发一次scroll事件。 sticky满足以下条件才能生效 来自 http://www.ghugo.com/position-sticky-how-to-use/ 1、具有sticky属性的元素，其父级高度必须大于sticky元素的高度。2、sticky元素的底部，不能和父级底部重叠。（这条不好表述，文后详细说明）3、sticky元素的所有父级不能含有overflow:hidden 和 overflow:auto 属性4、必须具有top，或 bottom 属性。同时要注意，sticky元素仅在他父级容器内有效，超出容器范围则不再生效了。 相关sticky插件 aralejs/sticky garand/sticky matthewp/position–sticky- filamentgroup/fixed-sticky http://stickyjs.com/ http://kissygalleryteam.github.io/sticky/doc/guide/index.htmlhttps://github.com/search?utf8=%E2%9C%93&q=position+sticky&type=Repositories&ref=searchresults iphone屏幕录制如何导出gif用Mac自带的QuickTime Player录制视频。用软件GIF Brewery导出gif。写了篇简单的]总结文章 键盘弹起引起input fixed定位失效flex方法测试 测试结果:ios10.2 在微信中，safari切换为讯飞输入法有问题，输入框会被键盘遮挡 在iOS移动设备下当虚拟键盘打开打开上会导致页面内的Fixed元素出现渲染异常。有几种可以绕过这个bug的方法：为Fixed元素设置 position:absolute; 通过设置定时器focus input元素。 -https://www.dragonvally.com/2016/04/09/ios-fixed-input-bug/ -http://getbootstrap.com/getting-started/#virtual-keyboards 目前想到解决办法: 12345setTimeout(function(){ var $doc = $(document); var height = $doc.height(); $doc.scrollTop(height)}, 300); demo地址-flex实现input fixed border:none在ie7无效好久没有处理过ie的兼容问题了，在做公司官网的时候发现border:none在ie7无效 以下内容引用在ie6 ie7中input标签隐藏边框(border:none与border：0的异同) border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。 1.性能差异【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。 2.兼容性差异【border:none;】当border为“none”时对IE6/7无效边框依然存在【border:0;】当border为“0”时，所有浏览器都一致把边框隐藏 总结： 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可3.对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。]]></content>
</entry>
<entry>
<title><![CDATA[iphone屏幕录制导出gif]]></title>
<url>%2Fmac-iphone-screen-record%2F</url>
<content type="text"><![CDATA[gif图片可用于博客中文章demo的展示，聊天不发几个表情都不好意思去聊天。 当你做app测试的时候发现了bug，用干巴巴的文字记录，不好描述，或许你的藐视开发人员有可能不懂你在说什么。所以有图有真相，这样方便开发人员重现问题，万一他们自己的设备就是没有问题呢。有图在就不好甩锅了。 Mac系统自带的QuickTime Player可用于电脑和iphone手机的 屏幕录制导出视频，结合软件可以导出gif图片。 QuickTime Player导出视频大致的步骤: 打开QuickTime Player 文件->新建屏幕录制 点击红色按钮/iphone的话用数据线连接到电脑 点击红色按钮停止录制 导出视频 步骤截图见Mac屏幕录制与gif图片制作教程 导出gifGIF Brewery 近期，知名 GIF 动图制作软件 GIF Brewery 宣告其已经被动图资源托管平台 Gfycat 收购，软件调整为免费下载，正式将其产品定位选择为 Gfycat 桌面客户端，用户可将制作好的动图直接上传到 Gfycat，部分用户期待的文件保存管理工作终于得到了解决。-http://www.waerfa.com/gif-brewery-3-review 导出的gif: 下载地址 其他软件 PicGIF MAC党看过来！3款超实用的GIF录屏软件推荐 http://s.weibo.com/weibo/gif%2520%25E5%25B1%258F%25E5%25B9%2595%25E5%25BD%2595%25E5%2588%25B6&b=1&page=1 http://sspai.com/29175 Vidyo GifLab Apowersoft苹果录屏王 在 iPhone 上直接录屏，又一个新选择：AirShou Android分享：录制屏幕并制作GIF文件 http://www.isofts.org/?s=gif http://sspai.com/29175 Recordit licecap AirServer Reflector ScreenFlow Hype 3 强大的 HTML 5 动画制作软件]]></content>
<tags>
<tag>MacOSX</tag>
<tag>软件</tag>
</tags>
</entry>
<entry>
<title><![CDATA[jenkins发送自定义内容邮件]]></title>
<url>%2Fjenkins-email%2F</url>
<content type="text"><![CDATA[本文介绍了groovy脚本自定义构建完成后通知邮件的标题和内容。 安装插件Email Extension Plugin 配置邮件地址 注意管理员的邮件地址要用户名邮件地址一致，不然发不了邮件 自定义邮件内容希望邮件的标题是含有plist或者AndroidManifest.xml的版本信息。下载地址是蒲公英的历史地址，而不是最终的固定地址。 注意设置Content Type:HTML(text/html) 变更记录12345<h2>变更记录</h2><ol>${CHANGES_SINCE_LAST_SUCCESS,reverse=true, format="",showPaths=true,changesFormat="<li><pre>[%a]<br />%m</pre></li>",pathFormat=" %p"}</ol>[参考来自](http://m.blog.csdn.net/article/details?id=50595720) 通过搜索CHANGES_SINCE_LAST_SUCCESS找到 ${CHANGES_SINCE_LAST_SUCCESS} -显示上一次成功构建之后的变化。 reverse在顶部标示新近的构建。默认false。 format遍历构建信息，一个包含%X的字符串，其中%c为所有的改变，%n为构建编号。默认”Changes for Build #%n\n%c\n”。 showPaths,changesFormat,pathFormat分别定义如${CHANGES}的showPaths、format和pathFormat参数。 来自:http://www.cnblogs.com/zz0412/p/jenkins_jj_01.html 项目信息12345678910<ul> <li>项目名称 ： ${PROJECT_NAME}</li> <li>构建编号 ： 第${BUILD_NUMBER}次构建</li> <li>SVN 版本： ${SVN_REVISION}</li> <li>触发原因： ${CAUSE}</li> <li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a></li> <li>构建 Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li> <li>工作目录 ： <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li> <li>项目 Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li></ul> 系统变量 https://wiki.jenkins-ci.org/display/JENKINS/Building+a+software+project 查看jenkins相关的变量http://192.168.6.100:9999/env-vars.html/12345678910111213141516171819202122232425262728293031323334353637383940__CF_USER_TEXT_ENCODING:0x1F5:0x19:0x34ANDROID_HOME:/Users/huixisheng/Library/Android/sdkBUILD_DISPLAY_NAME:#19BUILD_ID:19BUILD_NUMBER:19BUILD_TAG:jenkins-mail-test-19BUILD_URL:http://localhost:9999/job/mail-test/19/CLASSPATH:com.apple.java.jvmTask:CommandLineEXECUTOR_NUMBER:1GIT_BRANCH:origin/masterGIT_COMMIT:869c988fd3b4124d8e7c6accc50d73df225ce4f9GIT_PREVIOUS_COMMIT:869c988fd3b4124d8e7c6accc50d73df225ce4f9GIT_PREVIOUS_SUCCESSFUL_COMMIT:869c988fd3b4124d8e7c6accc50d73df225ce4f9GIT_URL:[email protected]:huixisheng/wapApp.gitHOME:/Users/huixishengHUDSON_HOME:/Users/Shared/Jenkins/HomeHUDSON_SERVER_COOKIE:83752ef1802c9c47HUDSON_URL:http://localhost:9999/JAVA_ARCH:x86_64JAVA_MAIN_CLASS_64:MainJENKINS_HOME:/Users/Shared/Jenkins/HomeJENKINS_SERVER_COOKIE:83752ef1802c9c47JENKINS_URL:http://localhost:9999/JOB_BASE_NAME:mail-testJOB_NAME:mail-testJOB_URL:http://localhost:9999/job/mail-test/LOGNAME:huixishengNODE_LABELS:masterNODE_NAME:masterPATH:/Users/huixisheng/.rvm/gems/ruby-2.3.0/bin:/Users/huixisheng/.rvm/gems/ruby-2.3.0@global/bin:/Users/huixisheng/.rvm/rubies/ruby-2.3.0/bin:/Users/huixisheng/Library/Android/sdk/tools:/Users/huixisheng/Library/Android/sdk/platform-tools:/Users/huixisheng/.sdkman/candidates/gradle/current/bin:/Users/huixisheng/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/huixisheng/.rvm/bin:/Users/huixisheng/.rvm/binPWD:/SHELL:/bin/zshSHLVL:0TMPDIR:/var/folders/1f/pt5xk8yn1ybgnp9tsjhwtn4h0000gn/T/USER:huixishengWORKSPACE:/Users/Shared/Jenkins/Home/workspace/mail-testXPC_FLAGS:0x0XPC_SERVICE_NAME:org.jenkins-ci----------FF-- groovy自定义邮件标题Pre-send Script添加groovy脚本可以设置自定义邮件标题 123456789101112131415161718192021222324252627282930import java.util.regex.Matcherimport java.util.regex.Patterndef var = build.getEnvVars()def plist = var.get("JENKINS_HOME") + '/workspace/app-ios/Other Sources/Info.plist'def text = new File(plist).textdef pattern = ~/CFBundleShortVersionString.*\n.*<string>(.*)<\/string>/assert pattern instanceof Patterndef matcher = pattern.matcher(text)def subject = msg.getSubject()// 修改邮件标题subject = "#" + var.get("BUILD_NUMBER") + " IOS-" + matcher[0][1] + '测试包构建于' + new Date().format('MM月dd日 HH:mm:ss')msg.setSubject(subject)// 修改邮件内容def qrfile = var.get("WORKSPACE") + '/appQRCodeURL.html'def qrtext = new File(qrfile).textdef downurlfile = var.get("WORKSPACE") + '/appDownloadPageURL.html'def downurl= new File(downurlfile).textdef emailContent = msg.getContent().getBodyPart(0).getContent()emailContent = emailContent.replaceAll('固定的蒲公英二维码下载地址', qrtext)emailContent = emailContent.replaceAll('固定的蒲公英下载地址', downurl)msg.setContent(emailContent, "text/html; charset=utf-8"); 起初想着是通过groovy去解析plist文件，结果没驾驭好这个脚本语言，实现不了。想到的办法只能通过正则去匹配，这个语言的正则跟我接触最多的javascript稍稍有点不一样。折腾了好久，主要的问题应该是对java不熟悉。 以下是groovy相关的一些资料:12345678910解析plist文件相关参考文章- https://gist.github.com/vgrichina/1604592- http://stackoverflow.com/questions/7484163/how-to-parse-plist-file-in-java- https://codegists.com/code/groovy-xml-parser-slurper/开启GUI命令`groovyConsole`groovy文档- http://groovy.zeroleaf.com/- one-tab地址集合: http://www.one-tab.com/page/DI5TcLLgQJOKapjvx0FOHQ 后期会专门的文章去介绍groovy,先给自己挖个坑。 groovy自定义邮件内容上传蒲公英是用python写的，上传完成接口返回的地址信息怎么给groovy。最初以为是设置os.environ，然后groory通过build.getEnvVars()去获取就可以。结果是不行的。想了折中的方法，地址写入文件然后读取。 总结勉强实现了按自己的要求去自定义了jenkins的邮件内容。从问题的提出，找资料，苦恼，问题解决等过程中学到了很多，对groovy有了个简单的认识，后期的总结回顾很重要，最好的产物是输出。 参考 http://m.blog.csdn.net/article/details?id=50595720 http://www.jianshu.com/p/e4e8ec2d8504 配置jenkins发送邮件 这篇文章对我的启发很大 http://www.cnblogs.com/zz0412/p/jenkins_jj_01.html http://www.cnblogs.com/GGHHLL/p/jenkins.html http://wenku.baidu.com/view/a71a9281b9d528ea81c77953.html http://www.lai18.com/content/4985104.html?from=cancel 感谢互联网的创造作们]]></content>
<tags>
<tag>持续集成</tag>
<tag>jenkins</tag>
<tag>groovy</tag>
</tags>
</entry>
<entry>
<title><![CDATA[npm直接安装github仓库代码]]></title>
<url>%2Fnpm-install%2F</url>
<content type="text"><![CDATA[npm是nodejs的官方包管理，有成千上万的包，方便了前端模块化开发。但有些前端库并没有发布到npm,但有时候项目又需要它。本文介绍通过npm如何安装github仓库代码。从而达到模块化开发的目的。 初始化npm init1234567891011121314151617181920212223242526$ npm initname: (tmp2016)version: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to /Users/huixisheng/Desktop/tmp2016/package.json:{ "name": "tmp2016", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}Is this ok? (yes) yes 安装依赖 npm installnpm install <git remote url>12<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish>]<protocol> is one of git, git+ssh, git+http, git+https, or git+file. If no <commit-ish> is specified, then master is used. 示例:12$ npm install git://[email protected]:huixisheng/zepto-lazyload.git$ npm install https://github.com/huixisheng/zepto-lazyload.git package.json配置 123"dependencies": { "zepto-lazyload": "git://[email protected]:huixisheng/zepto-lazyload.git"}, 定义包的版本 123456789101112"dependencies": { "package1": "1.0.0", // 只接受1.0.0的版本 "package2": "1.0.x", // 接受1.0版本的bug修复或小更新 "package3": "*", // 最新的版本，不推荐 "package4": ">=1.0.0", // 接受任何1.0.0版本后的更新 "package5": "<1.9.0", // 接受不超过1.9.0版本的更新 "package6": "~1.8.0", // 接受 >= 1.8.0 并 < 1.9.0 的版本 "package7": "^1.1.0", // 接受 >=1.1.0 并 < 2.0.0 的版本 "package8": "latest", // tag name for latest version "package9": "", // 同 * 即最新版本。 "packageX": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"} 来自 具体配置可以看官方npm语义化文档 命令说明1234567891011121314npm install gitlab:<gitlabname>/<gitlabrepo>[#<commit-ish>]npm install bitbucket:<bitbucketname>/<bitbucketrepo>[#<commit-ish>]npm install gist:[<githubname>/]<gistID>[#<commit-ish>]npm install github:<githubname>/<githubrepo>[#<commit-ish>]npm install <githubname>/<githubrepo>[#<commit-ish>]npm install <git remote url>npm install (with no args, in package dir)npm install [<@scope>/]<name>npm install [<@scope>/]<name>@<tag>npm install [<@scope>/]<name>@<version>npm install [<@scope>/]<name>@<version range>npm install <tarball file>npm install <tarball url>npm install <folder> 问题npm install github仓库报错执行如下命令:1sudo npm install git://github.com/theicebear/npm-basic-usage.git 报错:1234npm ERR! eisdir EISDIR: illegal operation on a directory, readnpm ERR! eisdir This is most likely not a problem with npm itselfnpm ERR! eisdir and is related to npm not being able to find a package.json innpm ERR! eisdir a package you are trying to install. 为了解决这个报错执行了命令npm config set -g cafile 就悲剧了。npm的命令全部不行了。解放办法： 12vi /usr/local/etc/npmrcdelete cafile = '' it works 解决思路 直接通过报错google。尝试无果，还发生悲剧 在github搜索，看了npm的相关issue 期间重装过nodejs，删除了npm相关的缓存 最后想到的办法是重置npm的配置。 1234567[npm获取配置有6种方式，优先级由高到底。](http://www.cnblogs.com/huang0925/archive/2013/05/17/3083207.html)命令行参数。 --proxy http://server:port即将proxy的值设为http://server:port。环境变量。 以npm_config_为前缀的环境变量将会被认为是npm的配置属性。如设置proxy可以加入这样的环境变量npm_config_proxy=http://server:port。用户配置文件。可以通过npm config get userconfig查看文件路径。如果是mac系统的话默认路径就是$HOME/.npmrc。全局配置文件。可以通过npm config get globalconfig查看文件路径。mac系统的默认路径是/usr/local/etc/npmrc。内置配置文件。安装npm的目录下的npmrc文件。默认配置。 npm本身有默认配置参数，如果以上5条都没设置，则npm会使用默认配置参数。 npm配置的官方说明 报错原因:github参考不包含package.json文件 参考 http://www.cnblogs.com/huang0925/archive/2013/05/17/3083207.html http://huangbingbing.com/2015/06/24/NPM-node-js%E7%9A%84%E5%8C%85%E7%AE%A1%E7%90%86/ https://github.com/ericdum/mujiang.info/issues/6 https://docs.npmjs.com/files/npmrc]]></content>
<tags>
<tag>nodejs</tag>
<tag>npm</tag>
</tags>
</entry>
<entry>
<title><![CDATA[git操作常见问题汇总]]></title>
<url>%2Fgit-problem%2F</url>
<content type="text"><![CDATA[平常工作中常用的git操作命令。 git添加空目录在空目录下建.gitignore内容：1234# 忽略所有文件*# 除了这个文件!.gitignore git忽略已经被提交的文件直接rm 然后 git add .本地磁盘也会被删除。我们要的是删除版本库的文件，并忽略。使用如下方法处理: 忽略文件夹 git rm -r --cached cache/* 然后在 .gitignore忽略删除的文件。注意git rm --cached 删除的是追踪状态 git 忽略已经提交的文件的修改git update-index --assume-unchanged .env重置之前添加的忽略git update-index --no-assume-unchanged .env 同步github fork原作者分支的修改假设当前在fork hexo-theme-amazeui并clone fork后的分支的终端上：123git remote add remote-hexo https://github.com/huixisheng/hexo-theme-amazeui.gitgit fetch remote-hexogit merge remote-hexo/master 参考 如何同步 Github fork 出来的分支 如何在github上fork一个项目来贡献代码以及同步原作者的修改 同步远程删除的分支执行git push origin :test-branch, 远程test-branch已经删除了，但本地还在，git branch -a还可以看到12error: unable to delete ‘test-branch’: remote ref does not existerror: failed to push some refs to ‘[email protected]:huixisheng/huixisheng.github.com.git’ 1git remote update --prune git 恢复单个文件的历史版本 首先查看该文件的历史版本信息：git log [email protected]记录下需要恢复的commit版本号：如 9aa51d89799716aa68cff3f30c26f8815408e926恢复该文件：git reset 9aa51d89799716aa68cff3f30c26f8815408e926 [email protected]还需要执行git checkout [email protected]提交git:git commit -m “回滚[email protected]的历史版本” git 如何还原某个文件一文提到更加简单的方法 直接用 git-checkout 即可。理解起来稍微有点奇怪就是了。$ git checkout ${commit} /path/to/file 撤销git add的文件的修改git reset HEAD README.md 通过git status可以查看相关的操作 参考 git的reset和checkout的区别 Git 中 Reset、Revert、Checkout的区别 结论: git reset是会修改版本历史的，丢弃掉一些版本历史。 git revert是根据那个commit逆向生成一个新的commit，版本历史是不会被破坏的。 git checkout用于切换分支]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title><![CDATA[兼容性解决方案整理]]></title>
<url>%2Fcompatibility-solution%2F</url>
<content type="text"><![CDATA[移动互联网的今天，告别了ie6。 以下来自原先项目psc。psc已经删除，使用issues继续整理。相信这是一个更好的开始。整理到博客汇总。 浏览器的兼容性问题是前端开发人员最头痛的，PCS 收集并整理完美兼容的解决方案。低版本浏览器添加过多的脚本或者更多的代码势必会带来性能，维护成本。其实PCS 并非是完美的解法办法，最完美的是浏览器本身符合w3c标准。当然这不现实，要不要所有浏览器都真的完全表现一样，其实还要视项目而定，或许我们可以选择优雅降级处理。凡是一切都在权衡。 CSS/CSS3Respondinline-block.dib-wrap { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* IE6、7 */ } .dib-wrap .dib{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */ .dib-wrap{ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/ } } .dib { display: inline-block; *display:inline; *zoom:1; } css3-gradient css3 渐变在线生成工具Ultimate CSS Gradient Generator HTML/HTML5html5shivThe HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. html5demosA collection of HTML5 experiments I’ve created, now open source and on GitHub, so please go ahead and help me hack this resource in to a wealth of demos that other authors can learn from. HTML5-History-APIvideo.js jQuery-html5-placeholderHTML5 Desktop Notificationslocalstoragestore.js exposes a simple API for cross browser local storage JavaScritp/ECMAScriptes5-shimes5-shim.js and es5-shim.min.js monkey-patch a JavaScript context tocontain all EcmaScript 5 methods that can be faithfully emulated with alegacy JavaScript engine. IE/IE6/IE7/IE8PIE(PIE)(http://css3pie.com/) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 通过脚本可以使得ie6/7/8/9 支持css3 的 border-radius、box-shadow、linear-gradient。 DD_belatedPNGThis is a Javascript library that sandwiches PNG image support into IE6 without much fuss. 处理ie6不支持png24。 DD_belatedPNG.fix('.png_bg, .png24'); // argument is a CSS selector DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement 更多solution IE6 PNG透明终极解决方案（打造W3Cfuns-IE6PNG最强帖） IE下 z-index的层级问题参考 IE下 z-index 的各种坑 IE6下z-index犯癫不起作用bug的初步研究 IE6 IE7 IE8(Q) 中定位元素 ‘z-index’ 为默认值在某些情况下会产生新的层叠上下文 ie6 不支持positon: fixed解决方案 RM8013: IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed） 完美解决IE6不支持position:fixed的bug 透明度 opacity/rgbaopacity设置的透明度对子元素都有影响。ie可以使用 filter 处理 .opacity{ background: rgb(255,255,0); opacity: 0.4; filter:alpha(opacity=40); } .rgba{ filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000'); } :root .rgba{ filter:none; /*处理IE9浏览器中的滤镜效果*/ background-color:rgba(0,0,0,0.5); } BT9011: 只有 IE 支持 CSS Filter CSS3 RGBA css3-rgba ie下可透明的背景颜色转换工具 ie6 max-width/max-height/min-height/min-width.maxh{ max-height:300px; _height: expression(this.scrollHeight >= 300? '300px' : 'auto'); } .maxw{ max-width: 300px; _width: expression(this.clientWidth >= 300 ? '300px' : 'auto'); } .minh{ min-height: 300px; height:auto !important; _height: 300px; } .minw{ min-width: 300px; _width: expression(this.clientWidth <= 300 ? '300px' : 'auto'); } 让IE6支持min-width和max-width的方法 css3-mediaqueries-jscss3-mediaqueries-js ieBetterieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性]]></content>
<tags>
<tag>兼容性</tag>
<tag>前端库</tag>
</tags>
</entry>
<entry>
<title><![CDATA[markdown文件生成目录]]></title>
<url>%2Fmarkdown-Table-of-Contents%2F</url>
<content type="text">< * [安装](#安装) * [生成内容](#生成内容) * [doctoc](#doctoc) * [安装](#安装-1) * [控制插入的位置](#控制插入的位置) * [支持的平台](#支持的平台) doctocdoctoc 安装12$ sudo npm install -g doctoc$ doctoc ./issue-13.md 生成内容见顶部 控制插入的位置12<!-- START doctoc --><!-- END doctoc --> 支持的平台12345--bitbucket bitbucket.org--nodejs nodejs.org--github github.com--gitlab gitlab.com--ghost ghost.org Automatic TOC in github-flavoured-markdown 其他工具 markdown-toc gitdown https://github.com/isaacs/github/issues/215 https://github.com/Mottie/GitHub-userscripts#installation 在线工具DocToc]]></content>
<tags>
<tag>markdown</tag>
</tags>
</entry>
<entry>
<title><![CDATA[配置SSH公钥和git多账号配置]]></title>
<url>%2Fgit-ssh-key-setting%2F</url>
<content type="text"><![CDATA[本文介绍如何配置ssh-key 生成keyssh-keygen -t rsa -f ~/.ssh/git.oschina.net -C “[email protected]“ 代码参数含义：-t 指定密钥类型，默认是 rsa ，可以省略。-C 设置注释文字，比如邮箱。-f 指定密钥文件存储文件名。 -来自github设置添加SSH 直接输入回车 Generating public/private rsa key pair. Enter passphrase (empty for no passphrase): Enter same passphrase again: 如果输入了密码 设置passphrase后，进行版本控制时，每次与GitHub通信都会要求输入passphrase，以避免某些“失误” 将SSH 私钥增加到ssh-agent: ssh-add ~/.ssh/xyz_rsa， 这里会提示输入一次私钥的密码; -来自 添加密匙拷贝公钥pbcopy < ~/.ssh/git.oschina.net.pub 其他平台拷贝命令参考如何生成SSH key window clip < ~/.ssh/id_rsa.pub linux sudo apt-get install xclip xclip -sel clip < ~/.ssh/id_rsa.pub 登录远程git平台添加ssh key粘贴刚才拷贝的内容 oschinaSSH公钥 github SSH and GPG keys点击 New SSH key 将新生成的key添加到ssh-agent中 $ eval "$(ssh-agent -s)" $ ssh-add ~/.ssh/git.oschina.net 可以通过 ssh-add -l 来确私钥列表$ ssh-add -l可以通过 ssh-add -D 来清空私钥列表$ ssh-add -D 配置config用于多个git ssh密匙Host github.com HostName github.com PreferredAuthentications publickey IdentityFile ~/.ssh/github User huixisheng Host git.coding.net HostName git.coding.net PreferredAuthentications publickey IdentityFile ~/.ssh/gitcodingnet User git Host git.oschina.net HostName git.oschina.net PreferredAuthentications publickey IdentityFile ~/.ssh/git.oschina.net User git Host，SSH 连接名HostName，如上所示，可以是通配符，可以是 IP，也可以是域名等User，登录的用户名IdentifyFile，version 1 协议下默认是 ~/.ssh/identify，version 2 协议下，默认是依次匹配：~/.ssh/id_dsa，~/.ssh/id_ecdsa，~/.ssh/id_rsa，还有 version 2 兼容模式。LocalForward 端口的内部跳转Port，端口设置，默认 SSH 的端口是 22Protocal，协议版本号，1 或者 2来自 参考生成多个git ssh密钥 测试测试是否配置成功 $ ssh -T [email protected] Welcome to Git@OSC, huixisheng! -v会输出详情的信息 多SSH Key管理技巧与Git多账户登录问题 其他问题$ ssh -T [email protected] The authenticity of host 'git.oschina.net (218.60.114.30)' can't be established. ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc. Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added 'git.oschina.net,218.60.114.30' (ECDSA) to the list of known hosts. Permission denied (publickey). $ eval "$(ssh-agent -s)" $ ssh-add ~/.ssh/git.oschina.net 如果执行ssh-add时提示”Could not open a connection to your authentication agent”，可以现执行命令： $ ssh-agent bash 来自 1234sudo git clone [email protected]:huixisheng/layout.gitCloning into 'layout'...Permission denied (publickey).fatal: Could not read from remote repository. ssh -vT [email protected] 是有结果返回的,看了debug信息都是正常的。 执行如下（期间关闭了翻墙软件）12ssh-add ~/.ssh/gitcodingnetsource ~/.ssh/config 再次clone又可以了。没找到为何不行的根本原因 参考 git 配置多个SSH-Key https://help.github.com/articles/generating-ssh-keys coding配置SSH公钥]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title><![CDATA[国内镜像源整理]]></title>
<url>%2Fmirror%2F</url>
<content type="text"><![CDATA[本文对国内ruby、npm、brew、Composer等镜像源做整理，给前端开发这提供方便。 为何写这个文章gem install cdnjs-command ERROR: Could not find a valid gem 'cdnjs-command' (>= 0), here is why: Unable to download data from https://rubygems.org/ - Errno::EPIPE: Broken pipe - SSL_connect (https://rubygems.org/latest_specs.4.8.gz) RubyGems 镜像 $ gem sources –add https://ruby.taobao.org/ –remove https://rubygems.org/ $ gem sources -l CURRENT SOURCES https://ruby.taobao.org 请确保只有 ruby.taobao.org$ gem install rails NPM 镜像每次安装都需要指明 registry，很麻烦 $ npm install -g cnpm –registry=https://registry.npm.taobao.org vi ~/.npmrc 添加。 registry = http://registry.npm.taobao.org 或者 npm config set registry “http://registry.npm.taobao.org" 通过 npm config ls 可以查看相关配置情况 Yarn 镜像yarn Yarn 对你的代码来说是一个包管理器， 它允许你使用并分享代码给全世界的开发者， Yarn 做这些快捷、安全、可靠，所以你不用担心什么。 设置国内镜像12$ yarn config set registry https://registry.npm.taobao.org --global$ yarn config set disturl https://npm.taobao.org/dist --global Brew镜像 $ cd /usr/local && git remote set-url origin https://git.coding.net/homebrew/homebrew.git$ cd $home && brew update Brew Brew Brew ! Composer 镜像方法1： composer config -g repositories.packagist composer http://packagist.phpcomposer.com 方法2： 注意：为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下： { "repositories": [ {"type": "composer", "url": "http://packagist.phpcomposer.com"}, {"packagist": false} ] } Packagist / Composer 中国全量镜像 全局安装 $ curl -sS https://getcomposer.org/installer | php $ mv composer.phar /usr/local/bin/composer]]></content>
<tags>
<tag>镜像源</tag>
<tag>npm</tag>
<tag>ruby</tag>
<tag>Composer</tag>
<tag>brew</tag>
</tags>
</entry>
<entry>
<title><![CDATA[调试工具整理]]></title>
<url>%2Fdebugger-tool%2F</url>
<content type="text"><![CDATA[更新日志2016-12-22 [*] 文章结构修改 [+] 添加远程调试在线工具 本文收集整理了浏览器调试工具介绍，手机调试方案，nodejs调试，无线抓包。 远程真机调试阿里移动质量中心（MQC）-H5测试会提供一个测试报告，包含页面加载时间，节点信息，资源资源类型统计，域名资源统计，优化建议,该设备各浏览器的小视频。 testin优测小程序和微信开发调试实时刷新FISwebpackBrowserSyncweflowpuerF5开发者调试spy-debuggerhttps://ant-tool.github.io/dora.html浏览器调试chrome developer tool 调试技巧谷歌浏览器调试比较基础的文章，期待补充和完善。 Chrome Developer Tools 功能与技巧详解 开发者调试工具Chrome Workspace开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率 Opera Dragonfly documentation Mobile emulation 模拟器 Browser-Sync：响应式Web开发调试利器 Chrome也自带抓包功能 各种真机远程调试方法汇总——“真机远程调试” WebApp调试 https://github.com/WechatFE/vConsole https://github.com/AlloyTeam/AlloyLever/ Eruda 无线调试攻略少年天才以外的我们，与其说是 coder,不如说是 debugger，都是一路调戏过来的，不好意思，是调试【本人口齿不清，发音不准，再发生类似事故请多多见谅】，因此当你 主动/被动 All in 了无线以后，你发现，知识的储备只是时间的积累和有意识的训练而已，可面对众多的 爱疯，案桌儿，山柴，内核不同，大小不一的设备。尼玛，没有个顺手的调试工具，简直是不能忍受的。 H5 Mobile 开发调试实践 by 破锣锅 总结的很详细 手机上怎么抓包调试纳尼，手机也可以抓包，不可思议，赶紧试试吧 Firebug Lite: doing the Firebug way, anywhere.亲，还在为ie6的调试而苦恼吗？Firebug值得一试。 远程调试工具-weinreWeb Inspector Remote（远程 Web 调试工具），功能和 Firebug、Webkit Inspector 类似，可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用，能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。 用Weinre远程调试移动网页 使用 Weinre 调试移动网站及 PhoneGap 应用node版更适合前端。 在线Weinre 浏览器远程调试对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具 真机远程调试-remote inspect web on real device 善用 Web 调试代理工具 Using Web Debugging Proxies Remote Debugging on Android with Chrome 谷歌浏览器实现安装的远程调试 Chrome开发者工具中文手册 MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手 Edge Inspect方便的跨平台同步预览工具 jsconsole是一个风格和Weinre类似的工具，它更多地关注于控制台输出和代码求值。在访问JSConsole的网站的时候，用户输入“:listen”来获得带有GUID的一段JavaScript代码。这段代码需要被加入到待调试的网页中。于是，在加载网页的时候，代码将会连接到JSConsole服务器，并且根据GUID将此会话和用户的会话关联起来，于是用户浏览器中的控制台现在便已经处于待调试网页的JavaScript运行时环境中了。 Vorlon.js 通过 Mac 远程调试 iPhone/iPad 上的网页 整理：手机端网页调试方案 node.js调试node.js调试你还在一个个console.log()，那么你out啦 devtoolRuns Node.js programs inside Chrome DevTools (using Electron). 监测脚步变动自动重启命令1devtool scripts/parse.js --watch 对应有nodemon,目前这个是最符合我需求的。还有 Superviso node-dev iron-nodenode-inspectornode-debuggerWebStorm集成的调试器Node.js debug模块 node –inspect index.js 抓包工具 whistle 【开源项目】LivePool：基于 NodeJs 的跨平台 Web 抓包替换工具 HttpWatch HttpAnalyzerStd tcpdump wireshark 文章推荐：Wireshark基本介绍和学习TCP三次握手 NProxy 文章推荐：NProxy——Mac和Linux平台下的Fiddler Fiddler 如何在 Mac 下使用 Fiddler 基于Chrome扩展的Fiddler Mac平台 NProxy——Mac和Linux平台下的Fiddler Charles 使用charles proxy for Mac来抓取手机App的网络包 Charles(最强大的http调试工具)详细教程（上） Charles(最强大的http调试工具)详细教程（下） 扩展阅读 远程调试(Remote Debugging) 各种 真机远程调试 方法 汇总 http://wiki.jikexueyuan.com/project/chrome-devtools/remote-debugging-on-android.html http://www.jianshu.com/p/82ab631502e1 http://yujiangshui.com/multidevice-frontend-debug/ http://div.io/topic/1449 http://alloyteam.github.io/Spirit/modules/Mobug/ https://github.com/hongru/horn https://github.com/kaiye/kaiye.github.com/issues/4 https://github.com/riskers/blog/issues/11 https://gold.xitu.io/entry/5851e77d61ff4b006c8414dd https://www.zhihu.com/question/20322475 web远程调试方案推荐 https://futu.im/posts/2018-06-12-how-to-debug-webview/ 移动端真机调试指南]]></content>
<tags>
<tag>前端工具</tag>
<tag>前端资源</tag>
<tag>调试</tag>
</tags>
</entry>
<entry>
<title><![CDATA[spawn和exec简单介绍]]></title>
<url>%2Fnodejs-spawn-exec%2F</url>
<content type="text"><![CDATA[谷歌搜了下网上介绍spawn和exec区别的文章还是很详细的，引用相关主要的提到的点。同时结合项目中使用过的脚步了解相关的使用方法。 spawn spawn方法创建一个子进程来执行特定命令，用法与execFile方法类似，但是没有回调函数，只能通过监听事件，来获取运行结果。它属于异步执行，适用于子进程长时间运行的情况。来自Child Process模块 在node v0.11.12相应的同步方法。记得不支持同步方法node版本中有对应的模块spawn-sync 12child_process.spawnSync(command[, args][, options])Added in: v0.11.12 早期简单实现了同步读取数据 12345678910111213141516var cp = require('child_process');var assert = require('assert');var path = require('path');var input = { "prid" : productId};input = JSON.stringify(input);args = args || {};var requestPath = path.join(__dirname, 'queryProduct.js');var cmd = process.execPath;var _args = [requestPath, input];var res = cp.spawnSync(cmd, _args, { timeout: (args.timeout || 3000) + 1000});// console.log(res.stdout.toString('utf8'));return JSON.parse(res.stdout.toString('utf8')); queryProduct.js123456789101112131415161718async.series([ function(cb){ conn.query(sql, function(err, res){ var row = res[0]; cb(null, row); }); }], function(err, result){ if( err ){ console.error(err.message); process.exit(1); } else { console.log(JSON.stringify(result[0])); } conn.end(); process.exit(0);}); exec有对于的同步方法12child_process.execSync(command[, options])#Added in: v0.11.12 child_process.execSync使用实例，合并当前的操作分支到test,并推送到远程的test分支 123456789101112131415161718192021222324252627282930#!/usr/bin/env node// chmod +xvar child = require('child_process');var execSync = require('child_process').execSync;// @todovar gstOutput = spawnSync('git branch', []);var currentBranch = getCurrentBranch();console.log('切换到test分支:');var gcOutput = execSync('git checkout test');console.log('合并分支' + currentBranch);var megerOutPut = execSync('git merge ' + currentBranch);console.log('推送test分支');execSync('git pull origin test && git push origin test && npm run sync');console.log('切换到' + currentBranch);execSync('git checkout ' + currentBranch);// git branch | grep "*" 简写function getCurrentBranch(){ var execOutput = execSync('git branch', {}); var outputContent = execOutput.toString(); var arr = outputContent.split('\n'); for(var i = arr.length - 1; i >= 0; i--){ if( arr[i].indexOf('*') >= 0 ){ return arr[i].replace('*', '').trim(); } } return '';} exec方法用于执行bash命令，它的参数是一个命令字符串。如果用户输入恶意代码，将会带来安全风险。因此，在有用户输入的情况下，最好不使用exec方法，而是使用execFile方法。 区别 虽然在上面的文档用法中，spwan和exec的最终回调方式有区别，但是在node的实现中，其实两者的实现方式是一致的，exec也可以像spawn一样使用，只不过exec在触发stderr和stdout的data事件的时候，会把数据写到字符串中，到执行结束或者错误退出的时候通过回调函数传递出来，实现了exec这种便捷用法。来自exec与spawn方法的区别与陷阱 使用exec默认最大是200k。超出时会报一个错误： “Error: maxBuffer exceeded” 使用node子进程spawn,exec踩过的坑 提到exec和spawn的源码区分 断点进去看后，豁然开朗，exec是对execFile的封装，execFile又是对spawn的封装。 exec和spawn的使用区分来自使用node子进程spawn,exec踩过的坑不过exec确实比spawn在使用上面要好很多 例如我们执行一个命令 使用exec 1require('child_process').exec('edp webserver start'); 使用spawn linux下这么搞 12var child = require('child_process').spawn('/bin/sh', ['-c','edp webserver start'], { cwd: null, env: null, windowsVerbatimArguments: false } ); win下 12 var child = require('child_process').spawn('cmd.exe', ['/s', '/c', 'edp webserver start'], { cwd: null, env: null, windowsVerbatimArguments: true } ); 可见spawn还是比较麻烦的。]]></content>
<tags>
<tag>nodejs</tag>
</tags>
</entry>
<entry>
<title><![CDATA[git命令简单介绍]]></title>
<url>%2Fgit%2F</url>
<content type="text"><![CDATA[开发过程中常用git操作很碰到的问题进行总结。 git简介git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。是目前最流行的版本管理系统，学会git几乎成了开发者的必备技能。git是 Linus Torvalds 为了帮助管理 Linux内核开发而开发的一个开放源码的版本控制软件。 git常用命令对于这方面的介绍网上都有很全很详细。我就不班门弄斧了。介绍一个比较有用的命令 git help 命令例如:pull`。这么多的命令如果都要全部记住，怎么可能。还是学会查手册来的靠谱。 以下几篇文章都对git常用的命令做了详细说明： git使用说明 Git远程操作详解 git命令详解 学习git过程中做的xmin git超级实用命令git help branch // 查看详细的参数 git config -l 查看配置信息 git clone [email protected]:huixisheng/huixisheng.github.com.git git commit -C head -a --amend //不会产生新的提交历史记录，复用HEAD留言，增补提交，而不增加提交记录 git branch -d feature_x // 删除feature_x分支 git checkout -b master2 // 切换并新建master2分支 git stash 本地修改暂时存储起来，用于改到一半暂时不想commit和pull有冲突。更多参考解决Git stash冲突问题 使用Sublime Text 可以安装 sublime-text-git，超级赞 如何创建 ssh key。配置好后 ‘ssh -T [email protected]‘ 测试配置是否成功。多个ssh key怎要么办？vi ~/.ssh/config。配置以下信息 Host github.com HostName github.com PreferredAuthentications publickey IdentityFile ~/.ssh/github_rsa User git Host coding.net HostName coding.net PreferredAuthentications publickey IdentityFile ~/.ssh/codingnet_rsa User git 安装zsh。就可以使用以下缩写命令，通过 alias查看命令别名。 // 添加自定义的命令 vi ~/.zshrc source ~/.zshrc ggpull ggpush git常见问题解决方案显示提交log treegit log --pretty=format:"%h %s" --graph 使用git pull文件时和本地文件冲突怎么办git stash // 本地修改暂时存储起来 git pull git stash pop 参考解决Git stash冲突问题 git 恢复单个文件的历史版本 首先查看该文件的历史版本信息：git log [email protected]记录下需要恢复的commit版本号：如 9aa51d89799716aa68cff3f30c26f8815408e926恢复该文件：git reset 9aa51d89799716aa68cff3f30c26f8815408e926 [email protected] 还需要执行git checkout xxxxx(文件名) 提交git:git commit -m “revert old file” 直接用 git-checkout 即可。理解起来稍微有点奇怪就是了。 $ git checkout ${commit} /path/to/file git 如何还原某个文件 如何更新自己Fork的代码iModuleFork了开源代码。clone到本地了，如何保证代码同最初的源码保持一致呢？ git clone [email protected]:iModule/zepto.git cd zepto git remote add zepto [email protected]:madrobby/zepto.git git remote -v 查看是否多出了zepto分支 git fetch zepto git pull zepto master git merge zepto/master git push origin master 提交github不用输入用户名和密码 在用git提交时代码至github上时每次都要输入用户名和密码，当提交操作较为频繁时非常不方便，可以按下文中的介绍，设置成提交时不用输入用户名和密码：1、在当前库下，已经运行过 git remote add origin https://github.com/***/***.git 命令，则先运行如下命令： git remote rm origin 若以前没有运行过 git remote add origin https://github.com/***/***.git命令，直接跳到2步骤；2、运行如下命令： git remote add origin [email protected]:username/test.git 无法删除远程分支error: unable to delete ‘test-branch’: remote ref does not existerror: failed to push some refs to '[email protected]:huixisheng/huixisheng.github.com.git’ git push origin :test-branch git remote update --prune 超级丰富的git教程列表 廖雪峰-Git教程 Git速成班: git rebase Git 命令整理 git - 简明指南 在线Git命令行学习 GotGitHub git-scm 学习，使用 git 过程中做的思维导图 Git Community Book 中文版 在线git代码托管平台 github coding GitCafe csdn-code 开源中国 git rebase Git速成班: git rebase 构造干净的 Git 历史线索 团队开发里频繁使用 git rebase 来保持树的整洁好吗? git pull 和 git fetch 有什么区别？ 备忘清单修改远程参考地址 方法1： git remote set-url origin 新地址 方法2： git remote rm origin git remote add origin [url] 添加submolegit submodule add [email protected]:fex-team/umeditor.git lib/umeditor git remote -v git submodule init git submodule update // 会生成 .gitmodule // 更新每个submodule git submodule foreach git pull 删除submodulegit rm —cached lib/umeditor rm -rf lib/umeditor vi .git/config 删除submodule 配置 rm .gitmodules // 如果是多个可以选择删除 添加subtree//添加subtree git remote add umeditor [email protected]:fex-team/umeditor.git lib/umeditor git subtree add —prefix=app/umeditor umeditor dev git pull origin master Git Submodule使用完整教程 git submoudle vs git subtree Git submodule 还是 Git Subtree subtree split 用 Git Subtree 在多个 Git 项目间双向同步子项目，附简明使用手册 github提示 You have no permission to access this repo每次出现都是很sb，添加ssh-add ~/.ssh/github 解决方法看多 SSH Key 管理技巧与 Git 多账户登录问题 git客户端 sublime-text-git Sublime Text 插件 GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率 GitHub GitX SourceTree git如何强制使用远程分支12git fetch --allgit reset --hard origin/master 或者12git fetch origingit reset --hard origin/master git在提交之前撤销add操作1git rm -r --cached . 扩展阅读-Git常用的撤销操作 参考 Git 每次提交时的用户名和密码设置 git创建与管理远程分支 如何更新自己Fork的代码 Git远程操作详解 最后欢迎补充 Todogit fetch 没有效果研究 https://ruby-china.org/topics/4768 5.4 Git钩子：自定义你的工作流2.6 回滚错误的修改 git revert 和reset的区别]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title><![CDATA[MacOSX 开机启动]]></title>
<url>%2FMacOSX-powerboot%2F</url>
<content type="text"><![CDATA[相比较Windows和linux，MacOSX的开机启动下略显麻烦，可是要经常捣鼓本地服务器的开发者而言，本地开发环境有php-fpm、nginx、mysql、Mongodb、nodejs、Memcache等，如果每次开机都要重启这些服务，会不会是要疯掉。只是不知服务开多了会不会影响系统的系能。本文简单介绍Yosemite 10.10开机启动Mysql，Tengine。 MacOSX 开机启动Unix系统级别的启动脚本/etc/mach_init.d/ /etc/mach_init_per_user.d/ /etc/mach_init_per_login_session.d/ 在这3个目录下面的启动脚本将在系统初始化阶段执行。 OSX级别启动脚本/System/Library/StartupItems/ Yosemite 10.10没内容 ~/Library/StartupItems/ OSX级别启动后台进程~/Library/LaunchAgents Per-user agents provided by the user. /Library/LaunchAgents Per-user agents provided by the administrator. /Library/LaunchDaemons System-wide daemons provided by the administrator. /System/Library/LaunchAgents Per-user agents provided by Mac OS X. /System/Library/LaunchDaemons System-wide daemons provided by Mac OS X. 例如用brew安装的nginx: mkdir -p ~/Library/LaunchAgents cp /usr/local/Cellar/nginx/1.4.1/homebrew.mxcl.nginx.plist ~/Library/LaunchAgents/ launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.nginx.plist 添加开机启动项sudo vi com.tengine.plist<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Label</key> <string>com.tengine</string> <key>Program</key> <string>/usr/local/tengine/sbin/nginx</string> <key>RunAtLoad</key> <true/> <key>KeepAlive</key> <true/> </dict> </plist> 不知为何设置了<key>ProgramArguments</key>就是无法开机启动。写好的.plist可以通过以下命令查看格式是否正确。 sudo plutil -lint com.tengine.plist plist相关的参数配置 不过试了一下，不是超级用户登陆，而是普通用户登陆，并且监听的端口在1024以下的（例如把默认的8080端口改为了80端口），nginx 开机是启动不了。因此，要 nginx 开机启动的话，需要给予它管理员权限： sudo chown root:wheel /usr/local/Cellar/nginx/1.2.6/sbin/nginx sudo chmod u+s /usr/local/Cellar/nginx/1.2.6/sbin/nginx 最后调用一下launchctl命令，加载这个plist,开机启动 launchctl load -w com.tengine.plist 可以通过查看下命令是否生效。这些命令都是用到才去查下，什么时候要好好恶补下。 ps aux | grep tengine 开机不启动 launchctl unload -w com.tengine.plist 例如让Adobe的更新程序开机不启动 sudo launchctl unload -w /Library/LaunchDaemons/com.adobe.fpsaud.plist 用户级别启动程序系统偏好设置 -> 帐户 -> 登录项 Linux的开机启动/etc/rc.local Linux 中 rc.local、init.d、rc.x、init 这几个文件（夹）各有什么作用？启动执行的脚本应该均放在 rc.local 中吗？ 参考 OSX开机自动启动程序的控制脚本 OSX launchd Creating Launch Daemons and Agents Mac OSX的开机启动配置 Mac 下 Nginx、MySQL、PHP-FPM 的安装配置]]></content>
<tags>
<tag>MacOSX</tag>
</tags>
</entry>
<entry>
<title><![CDATA[MacOSX下Mysql折腾记]]></title>
<url>%2FMacOSX-mysql%2F</url>
<content type="text"><![CDATA[本文记录在MacOSX下捣鼓Mysql,Yosemite 10.10 mysql 无法开机启动的解决办法. 在MacOSX启动和停止MySQL服务的启动MySQL服务 sudo /Library/StartupItems/MySQLCOM/MySQLCOM start 停止MySQL服务 sudo /Library/StartupItems/MySQLCOM/MySQLCOM stop 重启MySQL服务 sudo /Library/StartupItems/MySQLCOM/MySQLCOM restart 或者可以安装MySQL.prefPane。在系统的偏好设置设置。发现在OS X Yosemite，mysql在系统偏好设置了随系统开机启动，结果无效，不怎怎么解决？？大神帮忙 2014-11-16 12:23:52 更新 升级到10.10后，即使勾选了 系统偏好设置->mysql->开机自动启动。mysql还是无法开机启动，不知道为何？需要开机后手动去启动或者命令行启动。 mysqlstart='sudo /Library/StartupItems/MySQLCOM/MySQLCOM restart' 或者 mysql='sudo /usr/local/mysql/bin/mysql' 当然可以通过launchctl设置开机启动。可以参考这里。 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Label</key> <string>com.mysql</string> <key>ProgramArguments</key> <array> <string>/usr/local/mysql/bin/mysqld_safe</string> </array> <key>RunAtLoad</key> <true/> <key>KeepAlive</key> <false/> </dict> </plist> 现在还没有弄明白 /usr/local/mysql/bin/mysqld_safe 和 /usr/local/mysql/bin/mysql 有什么区别？ MacOSX #1045 无法登录 MySQL 服务器；忘记 root密码报错： ERROR 1045 (28000): Access denied for user ‘root‘@’localhost’ (using password: YES) 1、先在系统偏好设置中关闭MySQL服务；2、在终端中输入 sudo su /usr/local/mysql/bin/mysqld_safe --skip-grant-tables --skip-networking & 这时便能越过权限表，直接登陆MySQL了。 3、新建一个终端，输入 mysql -u root 4、 在MySQL中修改root用户密码即可： mysql> UPDATE mysql.user SET password=PASSWORD('新密码') WHERE User='root'; mysql> FLUSH PRIVILEGES; 出现如下报错:1ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement. 解决: ALTER USER 'root'@'localhost' IDENTIFIED BY '123456'; https://stackoverflow.com/questions/33467337/reset-mysql-root-password-using-alter-user-statement-after-install-on-mac 导入数据库如果是很大的sql的备份文件，用 phpmyadmin导入的话是会有问题。可以使用 mysqldump。 MySQL的mysqldump工具的基本用法 导出数据库1$ mysqldump -u root -p db >db.bak 推荐mysql相关的软件 phpmyadmin Navicat Premium 参考 mysql root密码忘记或权限错误的解决办法 Mac下新安装的MySQL无法登陆root用户解决方法 MAC下安装与配置MySQL ~~Mac上MySQL root 密码忘记或权限错误的解决办法~ 找不到用户权限表 Download mysql]]></content>
<tags>
<tag>mysql</tag>
<tag>MacOSX</tag>
</tags>
</entry>
<entry>
<title><![CDATA[前端开发工具收集和整理]]></title>
<url>%2Fweb-front-end-tools%2F</url>
<content type="text"><![CDATA[本文主要内容是对前端在线工具做整理，优秀的在线工具提高开发效率。告别编辑器，一切都是云端。只通过浏览器完成代码的编写和优化。 JavaScript在线电子书 ECMAScript5标准 http://www.ecma-international.org/ecma-262/5.1/index.html ECMAScript6标准 http://www.ecma-international.org/ecma-262/6.0/index.html promise迷你书http://liubin.org/promises-book/ 在线教程 JavaScript 标准参考教程-阮一峰 智能社 一灯学堂 | 国内首家web前端高端培训 蜻蜓课堂 JavaScript专题教程 Learning Advanced JavaScript 以下内容整理自书签 极客学院wiki - it 技术图文教程库 墨鱼前端培训 - www.moyu-edu.com 学习编程 | codecademy an advanced guide to html & css canvas教程 canvas tutorial - mdn css参考手册 devstore_移动互联网企业运营解决方案整合平台 getting started with programming | codecademy javascript (original) | codecademy learn to code by doing - code school w3cschool 在线教程|网站建设 w3schools online web tutorials 在线兼容性测试 在线跨浏览器测试微软官方提供 浏览器开发工具 【翻译】25个浏览器开发工具的秘密 chrome developer tool 调试技巧 在线压缩 在线图片压缩 tinyjpg压缩率非常cool 在线性能测试 阿里测 监控魔方 Live, Web-Based Browser Testing 在线编辑器 codepen jsbin runjs 常用的在线工具 在线二维码 比较全的在线工具-开源中国社区 在线工具 - 程序员的工具箱 工具很全很丰富 更新日志 2016-10-22 整理了issue 2016-10-23 1. 添加在线教程 2. JavaScript在线电子书]]></content>
<tags>
<tag>前端工具</tag>
<tag>前端资源</tag>
<tag>在线教程</tag>
</tags>
</entry>
<entry>
<title><![CDATA[致那些我使用过的优秀软件]]></title>
<url>%2Fexcellent-software-recommended%2F</url>
<content type="text"><![CDATA[工欲善必先利其器，好软件不仅会使你的开发效率提升，而且可以让你平时电脑的操作健步如飞。当然这不是绝对。本文推荐我使用过觉得不错的软件。希望可以让你更快更方便地工作。 浏览器谷歌浏览器 书签、插件同步功能 开发者工具，前端开发必备 插件丰富，只有你想不到 速度快 开发工具 Sublime Text轻量、简洁、高效、跨平台的编辑器，丰富的插件，方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱，目前我最钟爱的开发编辑器。相关的插件可以参考这里 MarkdwonPad windows的markdown编辑器，实时预览，方便的快捷键，可以导出html,pdf，可以自定义样式。 Mou Mac 上的 Markdown 编辑器，两栏界面，直观清爽，功能简洁到位。 haroopad跨平台的不错的markdown编辑器 WinMerge是一款运行于Windows系统下的免费开源的文件比较/合并工具，使用它可以非常方便地比较多个文档内容甚至是文件夹与文件夹之间的文件差异。可以集成在小乌龟中 Atom按照 Github 的说法，这是一款非同一般的编辑器，是 21 世纪的创新产品，他们希望将来“从菜鸟到黑客都在使用 Atom 编写代码”。 常用软件 Dropbox Wiz笔记 印象笔记为你记住每一点灵感、每一份心情和每一个梦想，随时随地找到，让记忆永存。 window软件 Fences 桌面图标整理和自动分类软件，由 Stardock 出品，Fences 即桌面栅栏，是指桌面上有阴影的图标分组，它的目的是帮助您非常有条理地管理您的桌面。 Everything速度最快的文件名搜索工具.是voidtools开发的一款文件搜索工具，官网描述为“基于名称实时定位文件和目录（Locate files and folders by name instantly）”。它体积小巧，界面简洁易用，快速建立索引，快速搜索，同时占用极低的系统资源，实时跟踪文件变化，并且还可以通过http或ftp形式分享搜索。-Launchy 经典实用的免费键盘快速启动工具，桌面图标一个都不用。类似的mac的Alfred,可以让你免去在桌面和开始菜单里费劲地找图标，敲击几下键盘，就能打开你想要打开的程序或者文件，是不是会让你感觉不错呢，Launchy 就是这样一款能够满足你这需求的软件，它能实实在在地提高你的工作效率。 Mac AlfredMac下最好的快速启动工具。推荐阅读 Macvim Mac开发利器之程序员编辑器。vi太高端大气上档次，表示驾驭不了。用的好的确实是一款神器。 CheatSheet 显示当前程序快捷键列表 软件相关网址 远景 异次元 小众软件 善用佳软 软件街]]></content>
<tags>
<tag>软件</tag>
<tag>开发工具</tag>
</tags>
</entry>
<entry>
<title><![CDATA[mardowm语法简单测试]]></title>
<url>%2Fmarkdown-test%2F</url>
<content type="text"><  链接测试 我是codecode,我是加粗，我是斜体,我是删除 ***可以生成hr 单纯的链接根式<链接>http://huixisheng.github.com/ 特殊的字符需要转义， _ * 引用开始 MarkDown 团队统一书写规范 v1.0由于 MarkDown 语法在细节的书写方式很多，为了让不同个体的文档传产出结构一致，提炼出此规范。该规范遵循 MarkDown 官方语法 以及 GitHub MakDown 语法，旨在统一书写格式和代码风格，将多种写法统一。 注：本文档符合自身规范，可视作demo，参看源码 大家可以 fork 后形成自己团队的规范版本 1.1全局规范 MarkDown 文件均使用.md作为后缀 (小写字母) 普通文本换行，使用行末尾2空格触发 格式规范标题结构格式 标题与紧贴的上下正文使用1整行换行隔开 #号和文字之间1个空格连接 标题层级如下，最多6级 1234567# 顶级标题 等价于 title 和 <h1>## 次级标题 等价于 <h2>### 3级标题 等价于 <h3>#### 4级标题 等价于 <h4>##### 5级标题 等价于 <h5>###### 6级标题 等价于 <h6>####### 注：此行错误，标题层级最多6级 没有<h7>标签 加强和强调规范以下两种写法都是正确的，请统一为第一种，即一律使用 **加强 *强调 12*emphasize* **strong** 相当于<strong>标签和<em>标签_emphasize_ __strong__ 代码块规范 行内代码使用1对波浪号 如： `hello world!` 块级代码使用3个波浪号 或 整体4空格缩进，且上下均用整行隔开，如下: (占用7行) 123<?php echo '看我源码 - 3个波浪号';?> <?php echo '看我源码 - 4空格缩进'; ?> 列表写法 列号1. 或者*后其后内容空格隔开 列表块前后整行隔开 如下： 1234561. Windows2. Mac3. iOS * iPhone * iPad4. Android 实际预览： Windows Mac iOS iPhone iPad Android 123456* Windows* Mac* iOS* Android 1. v3.2 2. v4.1 实际预览： Windows Mac iOS Android v3.2 v4.1 其他标签规范链接和EmailInline: 1An [example](http://url.com/ "Title") 引用样式标签 (titles are optional): An [example][id]. Then, anywhere else in the doc, define the link: [id]: http://example.com/ "Title" Email: 1An email <[email protected]> link. 插图Inline (titles are optional): 1 引用式插图: ![alt text][id] [id]: /url/to/img.jpg "Title" 引用块及嵌套 Email-style angle bracketsare used for blockquotes. And, they can be nested. Headers in blockquotes You can quote a list. Etc. 内联代码 <code> 段落中的用法 也可以 `代码中包含波浪号`.代码块 Indent every line of a code block by at least 4 spaces or 1 tab.代码的每行都最少用4个空格或者一个制表符(tab) 我是普通文本块 我是一个预格式化的 代码块. 水平分割线三个连字符-: 表格规范一个简单的表格看起来如下： 第一个头部 第二个头部 第三个头部 内容格子 内容格子 内容格子 内容格子 内容格子 内容格子 每列的对齐可以通过在分割线上添加冒号来实现： 第一个头部 第二个头部 第三个头部 左对齐 居中 右对齐 左对齐 居中 右对齐 页内锚标记 点我跳转到顶部 // 利用 #,## 生成 id 锚标签 另一种锚标记 // 利用 <a name="top"></a> 附：参考 Hello-World.md 源码，注意换行的使用 123456789101112131415# Hello-World这是一个范例文件格式我是普通换行## 我是<h2>标题我是`<h2>`的内容## 我是<h3>标题* Windows* Mac* iOS* Android 注：引用范例请参看源码底部 LicenseReleased under MIT LICENSE 引用结束 参考 MarkDown 团队统一书写规范 v1.0 http://xianbai.me/learn-md/article/extension/table.html]]></content>
<tags>
<tag>markdown</tag>
</tags>
</entry>
<entry>
<title><![CDATA[jQuery 插件开发]]></title>
<url>%2Fjquery-plugin-develop%2F</url>
<content type="text"><![CDATA[jQuery 插件开发现在做的很多项目都是基于jQuery，很多时候jQuery插件就是一个模块。本文结合jQuery的源码对jQuery插件的写法做一个简单的介绍。 插件种类一. 类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。将函数定义于jQuery的命名空间中。 1.1 添加一个新的全局函数jQuery.newMethod = function(){ console.log('我是新添加到一个方法')； } 例如源码： jQuery.find = Sizzle; 1.2 添加多个全局函数jQuery.newMethod1 = function(){ console.log('我是新添加到一个方法1')； } jQuery.newMethod2 = function(){ console.log('我是新添加到一个方法2')； } 例如源码： jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.pseudos; jQuery.unique = Sizzle.uniqueSort; jQuery.text = Sizzle.getText; jQuery.isXMLDoc = Sizzle.isXML; jQuery.contains = Sizzle.contains; 1.3 使用 jQuery.extend( object )扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。例如 jQuery.isFunction 就是这样添加的。 当 1.2 需要添加很多方法时将会显得有多余。更何况 javasript 一切皆对象。实现多个方法的继承将显得很重要。 jQuery.extend({ newMethod1 : function(){ console.log('我是新添加到一个方法1')； }, newMethod2 : function(){ console.log('我是新添加到一个方法2')； } // ... 比较多的方法 }); 例如源码： jQuery.extend({ // See test/unit/core.js for details concerning isFunction. // Since version 1.3, DOM methods and functions like alert // aren't supported. They return false on IE (#2968). isFunction: function( obj ) { return jQuery.type(obj) === "function"; }, isArray: Array.isArray || function( obj ) { return jQuery.type(obj) === "array"; }, isWindow: function( obj ) { /* jshint eqeqeq: false */ return obj != null && obj == obj.window; }, isNumeric: function( obj ) { return !isNaN( parseFloat(obj) ) && isFinite( obj ); } }); 1.4 使用命名空间虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，特别是在团队开发，因此我们习惯将一些方法封装到另一个自定义的命名空间。 jQuery.myPlugin = { newMethod1 : function(){ console.log('我是新添加到一个方法1。可以通过 jQuery.myPlugin.newMethod1 ')； }, newMethod2 : function(){ console.log('我是新添加到一个方法2。可以通过 jQuery.myPlugin.newMethod2 ')； } // ... 比较多的方法 } 例如源码： // 处理动画的 jQuery.fx.start = function() { if ( !timerId ) { timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval ); } }; jQuery.fx.stop = function() { clearInterval( timerId ); timerId = null; }; jQuery.fx.speeds = { slow: 600, fast: 200, // Default speed _default: 400 }; 二、实例对象方法插件开发能让所有的 jQuery 实例对象都可以调用的方法。也就是说，只要通过 $() 工厂获得的 jQuery 实例对象，都可以调用我们开发的方法。很多插件都是这种类型。 实现方法：自动执行的匿名函数和类级别的插件开发的组合。 ;(function($){ $.fn.extend({ pluginName: function(options, callback){ // 自定义的插件 } }); // 或者 $.fn.pluginName = function(options, callback){ } })(jQuery); 匿名函数的形参是$, jQuery 当做实参传入，立即调用执行。目前很多jQuery的类库都采用这种方式，例如jQuery,Seajs等。jQuery插件可以放心的使用$,不用当心会跟其他库发生冲突，例如 prototype.js。 推荐的插件写法： // 创建一个闭包 ;(function($) { // 插件的定义 $.fn.hilight = function(options) { debug(this); // build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options); // iterate and reformat each matched element return this.each(function() { $this = $(this); // build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; // update element styles $this.css({ backgroundColor: o.background, color: o.foreground }); var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // 私有函数：debugging function debug($obj) { if (window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size()); }; // 定义暴露format函数 $.fn.hilight.format = function(txt) { return '<strong>' + txt + '</strong>'; }; // 插件的defaults $.fn.hilight.defaults = { foreground: 'red', background: 'yellow' }; // 闭包结束 })(jQuery); ] 如何将jQuery plugin 封装成seajs模块Todo： 参考 jQuery插件开发全解析 jQuery Plugin 官网 jQuery 1.10.3 中文帮助手册 jquery插件开发规范—jquery插件开发进阶教程（1）]]></content>
<tags>
<tag>JavaScript</tag>
<tag>jQuery</tag>
</tags>
</entry>
<entry>
<title><![CDATA[SublimeText插件介绍]]></title>
<url>%2Fsomething-about-sublime%2F</url>
<content type="text"><![CDATA[记录Sublime Text使用过程中的点点滴滴，虽然网上关于Sublime Text介绍的文章很多，但是使用过程多少有点自己的看法或者想法。在使用IDE的路上还有漫长的故事，VS2020 - Eclipse － Dreamware - Aptana - EditPlus - Notepad++ - Sublime Text - …。中间的过程中体验过webstorm，用下来感觉最棒的还是Sublime，高亮、缩进、插件、智能提示、代码片段等，Sublime顶呱呱，哗啦啦的。 目前Sublime Text3还是beta版本，打开的速度相对2有了很大的提升，但是不足的就是插件方面有很多不兼容。查看Subliem Text3兼容的插件。感觉主要的那些插件ST3还是可以使用的。 还有一点就是从win系统过渡到mac系统，有很多的操作习惯和快捷键不一样，稍微有点小不适应。 我在使用的插件Package Control(不解释，神器)Sublime Text2安装Package Control使用ctrl＋～调出控制台 import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' Sublime Text3如何安装Package Control1、先下载https://github.com/wbond/sublime_package_control中的zip文件，解压后将文件夹名更改为 Package Control PS:注意大小写。 2、下载插件分支https://github.com/wbond/sublime_package_control/tree/python3中的zip文件，解压后覆盖到 Package Control 文件中，完成此插件API函数的更新。 3、将Package Control文件夹放入Sublime Text 3\Packages中，重启sublime text 3即可生效。 2013/08/22今天有同事说Sublime Text3也是可以用命令的。猛戳这里 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) EmmentEmment书写规则。ZenCoding的升级版，提高开发效率。写HTML特别爽。 jsFormat格式化JavaScript Alignment可以根据 : 和 = 对齐，满足有代码洁癖同学的需求，快捷键是 Command + Control + A BracketHighlighter括号高亮 DocBlockr提供 JSDoc 和 PHPDoc 的自动生成功能 SidebarEnhancements侧边栏增强 HtmlTidy清理与排版你的HTML代码 ConvertToUTF8ST2只支持utf8编码，该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件 HTML-CSS-JS Prettify格式化HTML、CSS、JS文件。这是我目前找到的最好的一个插件。推荐给同事，他们也说这个很不粗。 MarkdownEditingmardown 实时预览。 Git快捷键(CMD相当Win的Ctrl键) 同时编辑多行 CMD+Shift+L 向下同时选中下一个相同的文本 反复按 CMD+D 跳到指定行 CMD+G 或者 CMD+P后输入字符”:” 快速列出/跳转函数就是 CMD+R 可以快速跳转到当前项目中的任意文件，可进行关键词匹配 CMD+P 补充中 Sublime 配置创建可复用的代码片段菜单上点击Tools -> New Snippet，会新建一个xml文件页 content 里面就是代码模版：${序号：默认值} ，序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候，可以使用tab切换光标位置。 tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。 scope是指在何种文件类型中使用 鼠标双击选择－、$开头的变量名添加用户自定义配置 "word_separators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}~?”` 怎样从直接Github的repository安装Sublime Text插件 首先，我们假设你在用Sublime Text和Package Control插件。 按Ctrl + Shift + P（Mac下是Shift + CMD + P）进命令选择窗口，搜索”repository”,选择”add repository” 直接输入一个Sublime Text的Github地址，如 https://github.com/ttscoff/MarkdownEditing 载入完成后就可以安装了，再按Ctrl + Shift + P（Mac下是Shift + CMD + P）进命令选择窗口，选择”Install Package”,现在就可以安装刚刚添加的repository里面的插件了，按本文的例子是”MarkdownEditing”。http://www.macdrifter.com/2012/08/install-sublime-packages-from-github.html 2014-11-16 12:33:46 更新 sublime.wbond.net无法访问 Sublime Text package manager被强了。详见 50.116.34.243 sublime.wbond.net 感谢感谢以下网站 Sublime常用插件收集贴 @大城小胖sublime text2 简介 Sublime Text 2 - 性感无比的代码编辑器！程序员必备神器！跨平台支持Win/Mac/Linux sublime text 2学习(二):创建可复用的代码片段 Preferences.sublime-settings设置 sublime插件开发 Sublime Text 怎样从直接Github的repository安装Sublime Text插件 Sublime text 3如何安装package control办法 很全面和实用的Sublime 插件列表]]></content>
<tags>
<tag>SublimeText</tag>
</tags>
</entry>
<entry>
<title><![CDATA[负边距的应用的总结]]></title>
<url>%2Fnegative-margin-application%2F</url>
<content type="text"><![CDATA[初中的时候开始学习坐标轴，开始接触负数。不管怎么说数学中都要学习的负数，总是有积极意义的吧。谁都不想银行卡的钱是负数的，但是css中如果使用负数可以解决一些比较棘手的问题的。本文参考网络结合自身的项目对margin的负值做一个小小的总结。具体如下图： ###1、定宽定高的block元素垂直居中 ###2、减少后台的判断，少写一个.last或者first的css。移除列表右侧多余的间隔、移除底部多余的border ###3、tab切换中的应用 ###4、布局中应用，右侧固定右侧自适应，左右固定中间自适应 ###5、多列等高的应用 ###参考链接margin负值的应用 margin负值 – 一个秘密武器 我知道你不知道的负Margin 负值之美：负值在页面布局中的应用 微吧里的各种margin负值]]></content>
<tags>
<tag>JavaScript</tag>
<tag>css</tag>
<tag>负边距</tag>
</tags>
</entry>
<entry>
<title><![CDATA[项目中碰到的问题随笔]]></title>
<url>%2Fsome-problem-in-project-diary%2F</url>
<content type="text"><![CDATA[记录项目中的碰到的问题。有些问题来的太诡异。 同事的一段代码直接导致浏览器奔溃，找我解决。var arr1 = [0, 1, 2, 3]; var arr2 = arr1; for(var i = 0; i < arr1.length; i++ ){ if( arr1[i] != 1 ){ arr2 = arr1.splice(i, 0, arr1[i]); } } 一开始觉得不可思议，断定代码有死循环。数组、对象、函数都是引用。参考-javascript 变量两种类型——基本类型和引用类型 自定义的Grunt插件调用异步的方法报错解决办法：1. 报错的信息在谷歌中查找。PS:google 被墙，真是悲剧 2. 看grunt官网的说明文档 3. github 上找类似的插件怎么写。插件地址 论股堂项目碰到好几个重排一样的页面显示错位的bug这种问题出现时是让人很头痛的，页面开始显示正常的，js操作某些dom后引起本来布局正常的结构出现错位。 对前端的文件添加了md5的时间戳如何保证后期的前端构建上传资源服务器是最新的文件想到的解决办法：1. 通过同生成的文件对于MD5值的map文件对比，相同的文件不更新 2. 每次构建上传根据文件的生成的最新的文件 3. 通朱鹏讨论 方法1是最理想的，但是当时就是担心怕实现起来很困难。其实后来才发现很简单。方法2 明显是有缺陷的。最终方法1的确定肯定是归功于方法3. 碰到问题时，首先思路一定要清晰，对想到的问题的解决方法一定要去衡量它的可行性。 后台返回的ajax接口多一个空行，导致ie下ajax执行了error 前端定位问题慢，对ajax接口的异常的欠考虑 是否可以通过设置实现客户端的Debug调试 原因是： 接口的php文件最前面加了一个空行，伤不起的前端 百度编辑器的展示慢经排查是百度分享的js对页面会阻塞；同时百度编辑器的需要的静态资源下载很慢。 目前解决方案： 对百度分享的js后移动参考这里 添加编辑器的伪展示，使得编辑器的展示不会有抖动的效果 未来的方案：使用UMeditor 使用了带 bom 的 utf-8 的编码文件在 nginx服务器 doctype 声明失效。参考「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？网页代码一般使用哪个？ 内网缺少脚本生成的问题导致报错很多时候一碰到问题不想马上问别人，希望尝试自己去解决先。现在后台的观念是问相关的开发人员来的快。通过解决报错，可以发现后台不少后台代码问题。比如一个函数明明返回的是int类型的，但却返回 Array。前端多懂点后台绝对是好事。 资讯评论的无法加载原因分析：资讯对获取pid做了缓存，导致根据seq jsonp 获取pid 永远为0。现在的方案：如果第一次获取pid为0，第二获取添加时间戳。教训： 浏览器上如果功能可以实现，客户端里面的网页不行的话，多半是缓存的问题。公司客户端浏览器的内核好换了 要敢于定位问题的所在 学习更多的知识，开阔视野，跟容易定位问题 使用了 setInterval 在ajax的回调中导致火狐浏览器http请求并发数量达到最大值，页面不再发轮训请求本问题是同事碰到的，去排查这个问题的时候觉得不可以思议 UC浏览器在文本框聚焦的时候修改了hash，导致弹出的键盘有收回去同王海波一直研究了搜狐的直播，同样的实现思路，为何他的就是在uc下有问题，后来他排查到问题是修改了hash引起的。朱鹏提供了一个修改方案，webapp的fixed有好多的坑 360安全卫士浏览器屏蔽了background-image的url中含有 ad、gg路径的背景图片。也太任性化了吧。[/images/article/360-ad-block.jpg] JSON2.js 同jquery冲突bug还原请在ie7下运行 // json2.js 对原型进行重写 String.prototype.toJSON = Number.prototype.toJSON = Boolean.prototype.toJSON = function (key) { return this.valueOf(); }; // 对boolean 进行for in会让 data[i] 获取原型上 toJSON的方法 function test(){ return true; } // 这样的写法虽然不太可能，但是 http://github.com/davgothic/AjaxFileUpload 就是出现 var data = test(); for(var i in data){ $('input').attr('name', i).val(data[i]); } 原因周六查了一天，基本找到问题所在，由于js的功底不扎实，无法更详细的解释问题 ie6下jsonp的callback不执行的bugjsonp解决跨域问题是常用的方法。但是给a标签加了href="javascript:;"和 href="javascript:void(0);" 会不执行回调的神奇bug。 我的解决思路： alert ajax的 success的返回的参数， ie6 不执行 alert ajax的 error的参数 通过 fiddler 抓包，看回调函数有没有返回。有返回，但是不回调。我了个去 google ie6 jsonp 不执行回调 去除a 标签的href，会执行回调 但是有时候需要a的手型，在给绑定的事件上加return false。完美解决。 ajax服务器端接收数据时”+”会丢失jQuery的ajax通过get的方法传参数，如果参数含有+、&等，会导致内容丢失。“+”号：JavaScript解析为字符串连接符，所以服务器端接收数据时”+”会丢失。“&”：JavaScript解析为变量连接符，所以服务器端接收数据时&符号以后的数据都会丢失。解决办法：ajax的data改为Object。以下是网上的方法：在传到服务端之前先将参数中的”+”和”&”符号都编码一下 function filter(str){ str = str.replace(/\+/g,"%2B"); str = str.replace(/\&/g,"%26"); return str; } JavaScript编码转换常用的函数:使用unescape()对escape()编码的字符串进行解码decodeURIComponent()函数可对encodeURIComponent()函数编码的 URI 进行解码。decodeURI()函数可对 encodeURI()函数编码过的URI 进行解码。encodeURIComponent会对/也进行十六进制转义，而encodeURI不会。 escape的一个应用就是将中文转成unicode编码 escape(“悔惜晟”).replace(/%/g, ‘\‘) CSS强制英文、中文换行与不换行white-space:nowrap; 强制不换行，都起作用white-space:pre-wrap; 只对中文起作用，强制换行项目中用来打散成串的英文 参考 CSS强制英文、中文换行与不换行 jQuery ajaxFileUpload.js 插件 ie9 下bugif(window.ActiveXObject) { if(jQuery.browser.version=="9.0"){ var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){ var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } } textarea用jQ的html方法取不到值使用val();但是百度之后又发现另一个问题，只是我在项目还没有碰到。JQuery TextArea的取值与赋值问题]]></content>
<tags>
<tag>JavaScript</tag>
<tag>css</tag>
<tag>总结</tag>
</tags>
</entry>
<entry>
<title><![CDATA[项目中浏览器兼容性解决方法收集]]></title>
<url>%2Fcompatibility-collect%2F</url>
<content type="text"><![CDATA[整理项目中碰到的浏览器兼容性问题，并提供相关解决办法。希望自己不再被浏览器兼容性问题所苦恼，也希望自己处理浏览器兼容问题时不再重复和头痛。 问题列表1、 个人中心首页小发布框点击弹出发布框，在ie6下导致下面的Tabs上移，就是出现错位，点击旁边的Tabs切换就正常问题回顾： 该问题出现当时完全想不到是为何，难道js交互也会导致CSS出现问题？为何切换了却是正常的。这个问题困恼了我好久。后来在张鑫旭大牛的博客看到一文利用重绘解决IE下JS交互产生的定位重叠等棘手bug,受了启发，终于改了这个bug。 2、 IE6 inline-block使line-height失效该问题很常见，解决的办法也很多。主要出现在左边是icon的图片，右边是文字，文字图片垂直居中。ie6解决办法：icon的margin-top margin-bottom取（外侧容器的高度-icon的高度）/2 其他浏览器：vertical-align:middle; margin-top:-3px 3、 IE6 z-index失效问题回顾： 出现了好几次，印象最深的是做网站导航的统一的时候。消息的下拉框被设置了pr的下面的元素挡住了。解决办法：在你需要显示在上层的元素的含“position:relative”的父元素上添加“z-index”属性。具体参考IE6下z-index犯癫不起作用bug的初步研究 4、 IE6下弹出框被Select穿透解决办法：1、弹出框添加iframe 2、select用js模拟 5、 IE6不支持最大高度最小高度最大宽度最小宽度解决办法：1、CSS表达式 2、js控制 6、IE6下背景图片不缓存问题，背景图片会闪烁<!--[if IE 6]> <script> document.execCommand("BackgroundImageCache",false,true); </script> <![endif]--> 7、IE6、7设置了relative同时使用了滤镜会使得子元素绝对定位失效8、FF、OP不支持backgroud-position-x、backgroud-position-y9、使用swfupload多图上传插件。如果对按钮使用hide 方法。会导致getStats()方法失效。10、input[type=”submit”]和button[type=”submit”]在IE6-7下会出现黑边。大漠解决办法。input { filter:chroma(color=#000000);}。但是如果给submit用filter设置了渐变，将会导致渐变丢失。一种解决办法：给submit外套个label，label设置边框。 submit border：none。更新历史2016-10-22 文章格式修改]]></content>
<tags>
<tag>兼容性</tag>
</tags>
</entry>
</search>