npm 常用命令

npm init

npm install

npm install

npm install -D or –save-dev

会在package.json的devDependencies属性下添加msbuild
运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中

npm install -S or –save

会在package.json的dependencies属性下添加msbuild
运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中

[-S|–save|-D|–save-dev|-O|–save-optional] [-E|–save-exact] [–dry-run]

npm update

npm update

npm update @ 升级指定版本

删除指定包

npm uninstall

npm remove, rm, r, un, unlink

npm config

npm config ls 获取基本配置信息

npm config ls -l 查看所有配置信息

npm config set 配置信息

######## npm config set registry http://registry.npm.taobao.org/

######## npm config set proxy http://proxy.com:8081/

npm config get 获取配置信息

查看包的信息

npm info

npm show

npm view

https://registry.npmjs.org/

获得安装路径

npm root 查看当前包的安装路径

npm root -g 查看全局的包的安装路径

模块发布过程

用户登录 npm adduser

发布模块 npm publish

命令详解

npm help

https://npmjs.org/doc/

1.介绍

开发过程当中，经常会有定时任务执行，随便一搜，就一堆，下面介绍的是用的最多的cron模块，这个模块最早fork于
padolsey/cron.js，语法完全和linux下的cron命令一样。

2.简单应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var jobFun = function(){
    console.log(new Date());
}
var Job = require("cron").CronJob;  
//每秒钟执行一次  
new Job('* * * * * *', jobFun , null, true, 'Asia/Shanghai'); 
//每隔30秒执行一次，会在0秒和30秒处执行  
new Job('*/30 * * * * *',jobFun , null, true, 'Asia/Shanghai');  
//在每天的00:00:00和02:00:00期间  每半小时执行一次 
new Job('* */30 0-2 * * *', jobFun , null, true, 'Asia/Shanghai');  
//在每天的00:30:00和12:30:00 各执行一次  
new Job('* 30 0,12 * * *', jobFun , null, true, 'Asia/Shanghai');  
// 每周一和周五的11:30:00 执行job
var job = new CronJob({
  cronTime: '00 30 11 * * 1-5',
  onTick: jobFun,
  start: false,
  timeZone: 'Asia/Shanghai'
});
job.start();

3.API语法 （翻译很渣，看不懂可以看原文）

• constructor(cronTime, onTick, onComplete, start, timezone, context, runOnInit) - 可以用json格式传参,也可以不用，具体参加例子.
  • cronTime - [必需] - 时间格式 (second minute hour dayOfMonth month dayOfWeek).
  • onTick - [必需] - 执行的function.
  • onComplete - [可选] - 当onTick执行完成后，执行的函数.
  • start - [可选] - 是否立即执行onTick函数，默认是false
  • timeZone - [可选] - 指定时区
  • context - [可选] - 可以指定上下文，感觉没有啥作用？？
  • runOnInit - [可选] - 不清楚？？
• start - Runs your job.
• stop - Stops your job.

最近一段时间Github速度变的非常慢，从github下载只有2-8KB的速度，实在难以忍受。
猜测是DNS污染了，然后g了下，果然如此。
那怎么解决尼，直接在修改hosts，不经过DNS服务器，这样就快了。
把下面代码粘贴到你的hosts文件下，然后DNS修改成8.8.8.8,8.8.4.4,下载速度立马变成30KB-40KB之间。（带宽20M）
linux

1

vi /etc/hosts

windows 记得用administrator（管理员）命令输入

1

notepad C:\Windows\System32\drivers\etc\hosts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Github
151.101.88.249 github.global.ssl.fastly.net 
151.101.16.249 github.global.ssl.fastly.net 
151.101.76.249 github.global.ssl.fastly.net 
151.101.24.249 github.global.ssl.fastly.net 
151.101.16.133 assets-cdn.github.com documentcloud.github.com raw.github.com training.github.com
151.101.100.133 assets-cdn.github.com documentcloud.github.com raw.github.com training.github.com
151.101.24.133  assets-cdn.github.com documentcloud.github.com raw.github.com training.github.com
151.101.40.133 assets-cdn.github.com documentcloud.github.com raw.github.com training.github.com
192.30.253.112 github.com www.github.com
192.30.253.113  github.com www.github.com
192.30.253.120  nodeload.github.com
192.30.253.121  nodeload.github.com
50.19.102.235   status.github.com
174.129.238.225   status.github.com
50.16.250.205   status.github.com
23.21.89.183   status.github.com

• 授人以鱼不如授人以渔，如果上面的代码贴上，依然失效，那么就要查看是不是github IP地址是否变更了，
• 通过http://tool.chinaz.com/dns/ 这个网站，依次输入上面各个域名的IP，然后修改下IP地址就可以了。
• 如果依然失效，那么就必须要科学的上网了，VPN，用shadowsocks等等工具。

前端开发经常碰到动态menu的开发，比如说，列表页，搜索下拉框等等。。。

鼠标hover第一层，右边弹出第二层，再hover第二层，弹出第三层，依次类推。

需求很简单，当然代码也简单

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

<ul >
<li >
  <a href="">一级菜单</a>
  <ul >
	<li>
	  <a href="#" target="_blank">二级菜单</a>
	  <ul >
		<li>
		  <a href="#" target="_blank">三级菜单</a>
		  <ul >
			<li><a href="#" target="_blank">四级菜单</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
	<li>
	  <a href="">二级菜单</a>
	  <ul >
		<li><a href="">三级菜单</a></li>
	  </ul>
	</li>
  </ul>
</li>
<li >
  <a href="">一级菜单</a>
  <ul >
	<li>
	  <a href="">二级菜单</a>
	  <ul >
		<li><a href="">三级菜单</a></li>
	  </ul>
	</li>
	<li>
	  <a href="">二级菜单</a>
	  <ul >
		<li><a href="">三级菜单</a></li>
	  </ul>
	</li>
  </ul>
</li>
 <li>一级菜单</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ul{
  background: #000000;opacity: 0.6;
  font-size: 14px;
  li{
    position: relative;height: 20px;line-height: 20px;margin-left: 10px;cursor: pointer;
    width: 100px;
  }
  a{
    &:hover{color:$mainColor;}
  }
}
ul{
  display: inline-block;
  >li{
    >ul{
      display: none;position: absolute;background: #000000;opacity: 0.8;
      left: 60px;top: 0;
    }
    &:hover{
      >ul{display: block;}
    }
  }
}

移动端如何做图片垂直居中？

开发过程中，PC那套适配方案放在移动端会有很多兼容性问题，甚至的有的时候需要用js代码去动态调整css，很不方便。

同事建议用flexbox，参考了flexbox的实现方案，很强大，看完http://caibaojian.com/flexbox-guide.html这个教程基本上就会了

当然具体实现过程，发现有很多浏览器的标准是不一样的，所以需要做一定程度的兼容，github搜索了下，国外已经有哥们实现了。

• [x] sass版本：https://github.com/mastastealth/sass-flex-mixin
• [x] less版本：https://github.com/ProLoser/Flexbox.less

下面贴个人常用的scss代码，很方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//scss mixin
@mixin img-wap-ctn($width:auto,$height:$width,$containerSelect:'>div',$imgSelect:img){
    @include size($width,$height);
    //为了兼容低版本的移动浏览器（比如UC，魅族自带浏览器。。。）
    #{$containerSelect} {
        @include size(100%);
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        #{$imgSelect}{
            max-width:100%;max-height:100%;
        }
    }
}
//html代码
<div class="img">
    <div>
        <img src="" alt="">
    </div>
</div>
//scss代码
.img{@include img-wap-ctn(240px);}

上面就是个人常用mixin，很方便，简单明了。

中文flexbox入门教程 http://caibaojian.com/flexbox-guide.html

github细化教程，有中文翻译https://github.com/philipwalton/solved-by-flexbox

原文地址：http://blog.csdn.net/milado_nju/article/details/7216067

备注：对原文做了一定程度删减。

WebKit

前身是KDE的KHTML和KJS，是一个渲染引擎，不是一个浏览器，也不想成为浏览器
第一是WebCore，其中包含了对HTML，CSS等很多W3C规范的实现；第二部分就是狭义上的WebKit，它主要是各个平台的的移植并提供相对应的Web接口，也就是WebView或者类似WebView，这些接口提供操作和显示网页的能力。

WebKit2

它不是WebKit简单的第二个版本，它是一个新的API层，其最主要的变化在于将网页的渲染置于单独的进程，而接口层则在另外一个进程，它们之间通过IPC来通讯。对于接口的调用者来说，中间的IPC和底下的实现是透明的，这样做的好处有很多，一个很明显的好处是，当网页的渲染出现问题时，不会阻碍Web接口的调用者进程，这会在很大程度上解决或者帮助解决浏览器或者这些调用者的稳定性和安全性等问题

Blink

Google因为开发思想和原来的Webkit2开发社区产生了冲突，所以就脱离了Webkit项目，成立了Blink项目，但是不是一个全新的引擎，目前就是从WebKit直接复制出一个版本出来，然后将与chromium无关的Ports全部移除掉，将代码结构重新整理,不是一个全新的渲染引擎

Chromium

一个建立在WebKit之上的浏览器开源项目，由Google发起的。该项目被创建以来发展迅速，很多先进的技术被采用，如跨进程模型，沙箱模型等等。同时，很多新的规范被支持，例如WebGL，Canvas2D，CSS3以及其他很多的HTML5特性，基本上每天你都可以看到它的变化，它的版本升级很快。在性能方面，其也备受称赞，包括快速启动，网页加载迅速等。

Chrome

Google公司的浏览器产品,它基于chromium开源项目，一般选择稳定的版本作为它的基础，它和chromium的不同点在于chromium是开源试验场，会尝试很多新的东西，当这些东西稳定之后，chrome才会集成进来，这也就是说chrome的版本会落后于chromium。
chrome还会整合Google的很多服务， 最后chrome还会有自动更新的功能，这也是chromium所没有的。

备份-归档

方法一。无压缩内容

1
2

mongodump -h dympxxx.com --archive=test.20160705.archive --db test
mongorestore -h restroexxx.com, --archive=test.20160705.archive

方法二。压缩方式

1
2

mongodump -h dympxxx.com --gzip --archive=test.20160705.gz --db test
mongorestore -h restroexxx.com --gzip --archive=test.20160705.gz

也可以一行命令搞定

1

mongodump -h dympxxx.com --archive --db test --port 27017 | mongorestore  -h restroexxx.com  --archive --port 27018

官方文档：

mongodump
https://docs.mongodb.com/manual/reference/program/mongodump/
mongorestore
https://docs.mongodb.com/manual/reference/program/mongorestore/

九大基础组件

1. 图例组件 legend
2. 标题组件 title
3. 时间线组件 timeline
4. 提示框组件 tooltip
5. 区域选择组件 brush
6. 地理坐标系组件 geo
7. 视觉映射组件 visualMap
8. 雷达图坐标系组件 radar
9. 数据区域缩放组件 dataZoom

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment