老衲是基佬

package.json 版本号说明

2021-11-11T14:42:05.000Z

版本号基本格式

主号.次号.修补号

dependency 版本更新规则 (dependency version update rule)

格式	定义	例子	用例匹配	备注
version	完全匹配当前版本	1.0.0	1.0.0
^version	兼容版本(不超过最左边非零数字)	^1.2.3 ^0.2.3 ^0.0.3 ^1	>=1.2.3 <2.0.0-0 >=0.2.3 <0.3.0-0 >=0.0.3 <0.0.4-0 >=1.0.0 <2.0.0-0	缺失.minor 或.patch 会默认用 0 代替
~version	最接近匹配版本	~1.2.3 ~1.2 ~1	>=1.2.3 <1.3.0 >=1.2.0 <1.3.0 >=1.0.0 <2.0.0
>version	大于当前版本
>=version	大于等于当前版本
<version	小于当前版本
<=version	小于等于当前版本
*	匹配任意版本
latest	已发布的最新版本
version1-version2	version1 到 version2 的任意版本(包括本身)	1.0.0-2.0.0	>=1.0.0 <=2.0.0
range1 \|\| range2	多个范围内的版本	< 1.0.0 \|\| >2.0.0	<1.0.0 或者 >2.0.0
version.x	x 的位置表示任意版本	1.2.x	>=1.2.0 <1.3.

版本号规则

1. version 指定版本号
“vue-clipboard2”: “0.0.8” //指定所依赖的该组件必须是 0.0.8 版本的

2. >version 大于该版本号
“vue-clipboard2”: “>0.0.8” //指定所依赖的该组件必须是大于 0.0.8 版本的

3. >=version 大于等于该版本号
“vue-clipboard2”: “>=0.0.8” //指定所依赖的该组件必须是大于或等于0.0.8 版本的

4. <version 小于该版本号
“vue-clipboard2”: “<0.0.8” //指定所依赖的该组件必须是小于 0.0.8 版本的

5. <=version 小于等于该版本号
“vue-clipboard2”: “<=0.0.8” //指定所依赖的该组件必须是小于等于 0.0.8 版本的

6. ~version 右侧任意

“vue-clipboard2”: “~0.2.1” //该组件版本号要>=0.2.1，并修补号为 >=1 的任意值
“vue-clipboard2”: “~0.2” //该组件版本号要>=0.2，并修补号为 >=0 的任意值
“vue-clipboard2”: “~1” //该组件版本号要>=1.0.0，次版本号任意，并修补号任意

7. ^version 非0右侧任意
从左向右，第一个非0号的右侧任意

“vue-clipboard2”: “^0.1.2” //该组件版本号要>=0.1.2 主版本号为0固定，次版本号为 1 固定，并修补号 >=2 任意值
“vue-clipboard2”: “^1.1.2” //该组件版本号要>=1.1.2 主版本号为1固定，次版本号为 >=1任意值，并修补号为任意值，但次版本号为1时，修补号要>=2，即要满足总版本号>=1.1.2
“vue-clipboard2”: “^0.1” //该组件版本号要>=0.1 缺少的版本号位位置为任意值

8. x-version x位置任意
“vue-clipboard2”: “0.1.x” //x位置任意

9. “”|| * version 表示版本任意

“vue-clipboard2”: “” //版本任意
“vue-clipboard2”: “*” //版本任意

10. version1-version2 表示版本区间范围包含首尾版本号
“vue-clipboard2”: “1.1.1-1.2.9” //版本要求 1.1.1<=版本号<=1.2.9

11. version1||version2||…version 表示或，或version1或version2，支持多个
“vue-clipboard2”: “1.1.1-1.2.9 || >=3.5.0 || ^0.1.2” //版本要求满足其一即可

Mongo 常用操作

2021-11-05T10:39:12.000Z

两种方式连接MongoDB

1. 类似Mysql一样连接

1	mongo --host 10.10.18.11 -u "myUserAdmin" --authenticationDatabase "admin" -p'abc123'

2. 登录后进行验证

# 先连接
mongo --host 10.10.18.11
# 进行验证
rs0:PRIMARY> use admin
switched to db admin
rs0:PRIMARY> db.auth("myUserAdmin", "abc123" )
1

创建用户

#1.一定要先选择要创建用户的库!
use test_db
 
#2.执行创建用户命令并设置角色权限
db.createUser({
    user:"user",
    pwd:"password",
    roles:[{role:"readWrite",db:"test_db"}]
})

user：用户名
pwd：密码
db：指定该用户的数据库，admin是用于权限控制的数据库，如果没有需要新建一个
roles：指定用户的角色，可以用一个空数组给新用户设定空角色；在roles字段,可以指定内置角色和用户定义的角色。

具体角色的功能：

Read：允许用户读取指定数据库
readWrite：允许用户读写指定数据库
dbAdmin：允许用户在指定数据库中执行管理函数，如索引创建、删除，查看统计或访问system.profile
userAdmin：允许用户向system.users集合写入，可以找指定数据库里创建、删除和管理用户
clusterAdmin：只在admin数据库中可用，赋予用户所有分片和复制集相关函数的管理权限。
readAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的读权限
readWriteAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的读写权限
userAdminAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的userAdmin权限
dbAdminAnyDatabase：只在admin数据库中可用，赋予用户所有数据库的dbAdmin权限。
root：只在admin数据库中可用。超级账号，超级权限

备份

-u 用户
-p 密码
-d 备份的库
-o 备份存储目标位置

/var/www/mongodb/bin/mongodump -u dba  -p password  -d leanote -o /var/www/data/

导入

-d 目标库
./leanote json文件
--drop 清空原库表

mongorestore -d yapi ./leanote --drop --noIndexRestore

浏览器何时会发送一个 options 请求

2018-06-04T16:08:02.000Z

浏览器出现 http method options 请求的作用是什么？

主要的作用有两个

获取服务器支持的 http 请求方法
用来检查服务器的性能

谈到 options 请求，不得不说的就是 cors（跨域资源共享）

CORS 是一种网络浏览器的技术规范，它为 Web 服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS 系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

使用 CORS 的方式非常简单，但是需要同时对前端和服务器端做相应处理。

前端
客户端使用 XmlHttpRequest 发起 ajax 请求，当前绝大部分浏览器已经支持 cors 方式，且主流浏览器均提供了对跨域资源共享的支持。
服务器端
如果服务器端未做任何配置，则前端发起 ajax 请求后，会得到 cors access deny，即跨域访问被拒绝。

Preflighted Requests 是 CORS 中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。

下面的情况需要进行预检：

一个简单的请求如下：

HTTP 方法是下列之一

HEAD
GET
POST
HTTP 头包含
Accept
Accept-Language
Content-Language
Last-Event-ID

Content-Type，但仅能是下列之一

application/x-www-form-urlencoded
multipart/form-data
text/plain

任何一个不满足上述要求的请求，即被认为是复杂请求。一个复杂请求不仅有包含通信内容的请求，同时也包含预请求 （preflight request）。

js 动态插入脚本和插入引用外部链接脚本

2018-05-21T16:07:05.000Z

在日常开发中，经常遇到 js 动态插入脚本 。

什么是 js 动态插入脚本 ?

指的是在页面加载时不存在，但将来的某一时刻通过修改该 DOM 动态添加的脚本。和操作 HTML 元素一样。

js 动态插入脚本 也有两种方式：插入 JavaScript 代码和插入外部文件。

一、直接插入 javascript 代码

<script type='text/javascript'>
function sayHi() {
    alert('hi');
}
</script>

从逻辑上讲，下面的 DOM 代码是有效的：

var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode('function sayHi() {alert('hi');}'));
document.body.appendChild(script);

在 Firefox、Safari、Chrome 和 Opera 中，这些 DOM 代码可以正常运行。但在 IE 中，则会导致错误。IE 将 <script> 视为一个特殊的元素，不允许 DOM 访问其子节点。不过，可以使用

<script>元素的 text 属性来指定 JavaScript 代码，想下面的例子这样：

var script = document.creatElement('script');
script.type = 'text/javascript';
script.text = 'function sayHi() {alert('hi');}';
document.body.appendChild(script);

经过修改之后的代码可以在 IE、Firefox、Opera 和 Safari3.0 中运行。Safari3.0 之前的版本虽然不能正确的支持 text 属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的 Safari，可以使用下列代码：

var script = document.createElement('script');
script.type = 'type/javascript';
var code = 'function sayHi() {alert('hi');}';
try {
    script.appendChild(document.createTextNode(code));
} catch (ex) {
    script.text = code;
}

document.body.appendChild(script)

这里首先尝试标准的 DOM 文本节点方法，因为除了 IE（在 IE 中会导致抛出错误），所有的浏览器都支持之中方式。如果这行代码抛出了错误，那么说明是 IE，于是就必须使用 text 属性了，整个过程可以用以下函数来表示：

unction loadScriptString(code) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString('function sayHi() {alert('hi');}');

二、插入引用外部文件

动态加载外的外部 JavaScript 文件能够立即运行，比如下面的 <script> 元素。

<script type="text/javascript" src="client.js"></script>
而创建这个节点的 DOM 代码如下所示：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'client.js';
document.body.appendChild(script);

显然这里的 DOM 如实的反映了相应的 HTML 代码。不过执行最后一行代码把 <script> 元素添加到页面之前，是不会下载外部文件的。也可以把这个元素添加到 <head> 元素中效果相同。

但是怎么知道这个脚本文件加载完成了呢，因为我们有些函数需要在脚本加载完成生效后才能开始执行。

经过对网络上资源的搜索，我发现在 IE 浏览器中可以使用 <script> 元素的 onreadystatechange 来监控加载状态的改变，并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。

所以一个简单的实现过程看上去是下面这样的：

IE 下：

var script = document.createElement('script');
var url = 'http:';
script.setAttribute('type','text/javascript');
script.onreadystatechange = function() {
    if(this.readyState == 'loaded' || this.readyState == 'complete'){
        alert('加载成功啦！');
    }
}

script.setAttribute('src', url);

Opera、FF、Chrome 等：

var script = document.createElement('script');
var url = 'http';
script.setAttribute('type','text/javascript');
script.onload = function() {
    alert('加载成功啦！');
}
script.setAttribute('src',url);

最后可以合并一个 js 动态插入脚本 的function;

function loadScript(url, callback) {
  callback = typeof callback === 'function' ? callback : function() {};

  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  if (script.readyState) {
    script.onreadystatechange = function() {
      if(this.readyState == 'loaded' || this.readyState == 'complete'){
        callback();
      }
    }
  } else {
    script.onload = callback;
  }

  head.appendChild(script);
}

node 版本管理-nvm

2018-05-18T16:05:33.000Z

node.js 一个奇葩的版本帝，曾经也为了跟上 node 版本管理 发布的步伐。每一次 node 版本的发布，都重新源码编译安装一次。而且每次编译安装 node 版本管理 之后全局安装的 npm 包命令，会全部失效。

原因：源码安装包的路径是相同的位置，新安装的 node.js 重写覆盖了 lib/node_modules 目录。

如果切换之前的 node 版本环境，该怎么办？第一想到的是：每次安装 node.js 到不同的路径。这样虽然保留了 node 版本，但系统存在 node 命令，应该指向哪个版本呢？

ln -s /usr/bin/node /usr/local/node-4
# or
ln -s /usr/bin/node /usr/local/node-6
# or
ln -s /usr/bin/node /usr/local/node-8

这样切换环境，非常不方便。

直到有一天，遇到 nvm-node 版本管理

nvm 是一个独立软件包，在类 unix 的操作系统下，安装命令：

1	curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh \| bash

mac os 还可以使用 Homebrew 来安装

在安装的时候，nvm 将不同的 node 版本存储到 ~/.nvm// 下，然后修改 $PATH，将指定版本的 node 路径加入，这样我们调用的 node 命令即是使用指定版本的 node。

nvm 显然比 n 要复杂一些，但是另一方面，由于它是一个独立软件包，因此它和 node 之间的关系看上去更合乎逻辑：nvm 不依赖 node 环境，是 node 依赖 nvm；而不像 n 那样产生类似循环依赖的问题。

node 版本管理 常用操作：

nvm list # 显示已经安装的 node 版本

nvm install v0.10.32 # 安装 v0.10.32

nvm run 0.10.32 app.js # 使用 0.10.32 这个版本的 node，执行 app.js

nvm use 0.10.32 # 切换当前 node 版本到 0.10.32，以后在当前窗口使用 node 执行的脚本的版本，都是 0.10.32。

nvm alias default 0.10.32 # 把 0.10.32 作为 node 的默认版本，开机，新建终端窗口的 node 版本都会是 0.10.32

node 版本管理 示例：

-> 代表着当前使用的 node 版本

react 组件间信息传递方式

2018-05-15T15:53:05.000Z

谈及 React 时，就会想到一个很重要的思想，就是组件化思想。它将可以重用的部分进行组件化开发，形成一个个相对独立的组件，那么组件化后，你也会提出些疑问，组件与组件之间，将怎样进行信息的传递呢? 下面来介绍下组件之间传递信息的方法。

组件之间传递信息方式，总体可分为以下 5 种：

1.（父组件）向（子组件）传递信息
2.（父组件）向更深层的（子组件）进行传递信息 >> 利用（context）
3.（子组件）向（父组件）传递信息
4. 没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）
5. 利用 react-redux 进行组件之间的状态信息共享

下面结合实例详细说明种传递信息的方式。

以下的例子都是比较经典的例子，看过后加入了我的个人见解，希望对你们有所帮助。

一.（父组件）向（子组件）传递信息 >>> 主要是通过 prop 进行传值

    // 父组件  
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});

// 子组件  
var ToggleButton = React.createClass({
  render: function () {
    // 从（父组件）获取的值  
    var checked = this.props.checked,
      text = this.props.text;

    return (
      <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
})

以上这个例子，子组件通过 prop 拿到了 text 值以及 checked 的属性值；那么当子组件要拿到祖父级组件的信息，也是可以通过 prop 进行逐层的获取。来看下下面的例子。

官方文档的示例代码如下:

var Button = React.createClass({  
    render: function() {  
        return (
            <utton style={{background: this.props.color}}>  
            {this.props.children}  
            </utton>  
        );  
    }  
});  
  
var Message = React.createClass({  
    render: function() {  
        return (
        <div>  
            {this.props.text} <Button color={this.props.color}>Delete</Button>  
        </div>  
    );  
  }  
});  
  
var MessageList = React.createClass({  
    render: function() {  
        var color = "purple";  
        var children = this.props.messages.map(function(message) {  
            return <Message text={message.text} color={color} />;  
        });  

        return <div>{children}</div>;  
    }  
});

以上的例子中第一层组件（MessageList）想要将 color 值传递到第三层组件（Button），通过第二层组件（Message）进行了传递。进而实现了。但是这种方式，并不是很优雅，如果传递的层级更多时，中间的层级都需要来传递，数据的传递变的更加繁琐。所以我们就会想到，是否可以”越级”获取数据。这时候就需要使用 context。能帮你 “越级” 传递数据到组件中你想传递到的深层次组件中。

二.（父组件）向更深层的（子组件）进行传递信息

利用（context）


var Button = React.createClass({
    // 必须指定 context 的数据类型  
    contextTypes: {
        color: React.PropTypes.string
    },
    render: function () {
        return (
            <button style={{background: this.context.color}}>
                {this.props.children}
            </button>
        );
    }
});

var Message = React.createClass({
    render: function () {
        return (
            <div>
                {this.props.text} <Button>Delete</Button>
            </div>
        );
    }
});

var MessageList = React.createClass({
    // 父组件要定义 childContextTypes 和 getChildContext()   
    childContextTypes: {
        color: React.PropTypes.string
    },
    getChildContext: function () {
        return {color: "purple"};
    },
    render: function () {
        var children = this.props.messages.map(function (message) {
            return <Message text={message.text}/>;
        });
        return <div>{children}</div>;
    }
});

以上代码中通过添加 childContextTypes 和 getChildContext() 到第一层组件 MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定 context 的数据类型）访问 context 中的数据。这样就不需要通过第二层组件进行传递了。

指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件必须定义 contextTypes 来使用传递过来的 context

三.（子组件）向（父组件）传递信息

// 父组件  
var MyContainer = React.createClass({
    getInitialState: function () {
        return {
            checked: false
        };
    },
    onChildChanged: function (newState) {
        this.setState({
            checked: newState
        });
    },
    render: function () {
        var isChecked = this.state.checked ? 'yes' : 'no';
        return (
            <div>
                <div>Are you checked: {isChecked}</div>
                <ToggleButton text="Toggle me"
                              initialChecked={this.state.checked}
                              callbackParent={this.onChildChanged}
                />
            </div>
        );
    }
});

// 子组件  
var ToggleButton = React.createClass({
    getInitialState: function () {
        return {
            checked: this.props.initialChecked
        };
    },
    onTextChange: function () {
        var newState = !this.state.checked;
        this.setState({
            checked: newState
        });

        // 这里将子组件的信息传递给了父组件  
        this.props.callbackParent(newState);
    },
    render: function () {
        // 从（父组件）获取的值  
        var text = this.props.text;
        // 组件自身的状态数据  
        var checked = this.state.checked;
        //onchange 事件用于单选框与复选框改变后触发的事件。  
        return (
            <label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange}/></label>
        );
    }
});

以上例子中，在父组件绑定 callbackParent={this.onChildChanged}，在子组件利用 this.props.callbackParent(newState), 触发了父级的的 this.onChildChanged 方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的。

四. 没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

如果组件之间没有任何嵌套关系，组件嵌套层次比较深，我们该怎样去传递信息呢？

下面来看一个例子

这个例子需要引入一个 PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
PubSubJS 具体可参考下面的内容
http://blog.csdn.net/u011439689/article/details/5195599

ProductSelection 和 Product 本身是没有嵌套关系的，而是兄弟层级的关系。但通过在 ProductSelection 组件中订阅一个消息，在 Product 组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。

所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。

五. 利用 react-redux 进行组件之间的状态信息共享

如果是比较大型的项目，可以使用 react-redux，这方面的资料可以参考阮一峰的网络日志。地址：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux

markdown 代码高亮，支持标记语言的列表

2018-05-13T15:46:38.000Z

在 markdown 编辑时，我们经常需要引入一段代码，此时若果代码能高亮显示，markdown 代码高亮 界面就会非常友好。

使用前：

public static void main(String[] args){
System.out.println(“Hello”);
}

使用后：

1
2
3

public static void main(String[] args){ 
    System.out.println(“Hello”); 
}

支持 markdown 代码高亮 的标记语言列表

language	key
1C	1c
ActionScript	actionscript
Apache	apache
AppleScript	applescript
AsciiDoc	asciidoc
AspectJ	asciidoc
AutoHotkey	autohotkey
AVR Assembler	avrasm
Axapta	axapta
Bash	bash
BrainFuck	brainfuck
Cap’n Proto	capnproto
Clojure REPL	clojure
Clojure	clojure
CMake	cmake
CoffeeScript	coffeescript
C++	cpp
C#	cs
CSS	css
D	d
Dart	d
Delphi	delphi
Diff	diff
Django	django
DOS.bat	dos
Dust	dust
Elixir	elixir
ERB(Embedded Ruby)	erb
Erlang REPL	erlang-repl
Erlang	erlang
FIX	fix
F#	fsharp
G-code(ISO 6983)	gcode
Gherkin	gherkin
GLSL	glsl
Go	go
Gradle	gradle
Groovy	groovy
Haml	haml
Handlebars	handlebars
Haskell	haskell
Haxe	haxe
HTML	html
HTTP	http
Ini file	ini
Java	java
JavaScript	javascript
JSON	json
Lasso	lasso
Less	less
Lisp	lisp
LiveCode	livecodeserver
LiveScript	livescript
Lua	lua
Makefile	makefile
Markdown	markdown
Mathematica	mathematica
Matlab	matlab
MEL (Maya Embedded Language)	mel
Mercury	mercury
Mizar	mizar
Monkey	monkey
Nginx	nginx
Nimrod	nimrod
Nix	nix
NSIS	nsis
Objective C	objectivec
OCaml	ocaml
Oxygene	oxygene
Parser 3	parser3
Perl	perl
PHP	php
PowerShell	powershell
Processing	processing
Python’s profiler output	profile
Protocol Buffers	protobuf
Puppet	puppet
Python	python
Q	q
R	r
RenderMan RIB	rib
Roboconf	roboconf
RenderMan RSL	rsl
Ruby	ruby
Oracle Rules Language	ruleslanguage
Rust	rust
Scala	scala
Scheme	scheme
Scilab	scilab
SCSS	scss
Smali	smali
SmallTalk	smalltalk
SML	sml
SQL	sql
Stata	stata
STEP Part21(ISO 10303-21)	step21
Stylus	stylus
Swift	swift
Tcl	tcl
Tex	tex
text	text/plain
Thrift	thrift
Twig	twig
TypeScript	typescript
Vala	vala
VB.NET	vbnet
VBScript in HTML	vbscript-html
VBScript	vbscript
Verilog	verilog
VHDL	vhdl
Vim Script	vim
Intel x86 Assembly	x86asm
XL	xl
XML	xml
YAML	yml

nginx 静态资源缓存设置

2018-05-13T15:30:08.000Z

nginx 静态资源缓存 常用配置示例:

1
2
3

location ~.*.(js|css|html|png|jpg)$ {
    expires 3d;
}

下面是 nginx 静态资源缓存 说明:

expires 3d; // 表示缓存 3 天
expires 3h; // 表示缓存 3 小时
expires max; // 表示缓存 10 年
expires -1; // 表示永远过期。

如果设置为 -1 在 js、css 等静态文件在没有修改的情况下返回的是 http 304.

如果修改返回 http 200

http 304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

http 200：服务器已成功处理了请求，这表示服务器提供了请求的内容。

如果不想让代理或浏览器缓存，加 no-cache 参数

1
2
3

location ~.*.(js|css|html|png|jpg)$ {
    add_header Cache-Control no-cache;
}

这样浏览器 F5 刷新时，nginx 静态资源缓存 设置返回的状态码就是 http 200，而不是 http 304

如何在非空目录下 git clone 项目

2018-05-13T15:23:34.000Z

有时我们需要在 非空目录 下, clone 一个 git 仓库。当执行 git clone 项目时会提示下面的错误信息：

fatal: destination path ‘.’ already exists and is not an empty directory.

解决办法：

进入非空目录，假设是 /dir/test

1	cd /dir/test

执行命令

1	git clone –no-checkout https://git.com/test.git tmp

执行命令

1	mv tmp/.git .

执行命令

rmdir tmp

执行命令

1	git reset –hard HEAD

webpack4- 用之初体验（下）

2018-05-12T15:23:07.000Z

引用字体图片和 svg 图片

字体图标和 svg 图片都可以通过 file-loader 来解析

module.exports = {
    module: {
        rules: [
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: ‘file-loader’
            }
        ]
    }
}

这样即使样式中引入了这类格式的图标或者图片都没有问题了，img 如果也引用 svg 格式的话，配合上面写好的 html-withimg-loader 就都没有问题了

添加 CSS3 前缀

通过 postcss 中的 autoprefixer 可以实现将 CSS3 中的一些需要兼容写法的属性添加响应的前缀，这样省去我们不少的时间

由于也是一个 loader 加载器，我们也需要先安装一下

1	npm i postcss-loader autoprefixer -D

安装后，我们还需要像 webpack 一样写一个 config 的配置文件，在项目根目录下创建一个 postcss.config.js 文件，配置如下：

1
2
3

module.exports = {
    plugins: [require(‘autoprefixer’)]  // 引用该插件即可了
}

然后在 webpack 里配置 postcss-loader

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’]
            }
        ]
    }
}

转义 ES6

在实际开发中，我们在大量的使用着 ES6 及之后的 api 去写代码，这样会提高我们写代码的速度，不过由于低版本浏览器的存在，不得不需要转换成兼容的代码，于是就有了常用的 Babel 了

Babel 会将 ES6 的代码转成 ES5 的代码

那么不再多说，既然要使用它，就先来安一下

1	npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 -D

当把这些都安好后，我们就开始配置，由于要兼容的代码不仅仅包含 ES6 还有之后的版本和那些仅仅是草案的内容，所以我们可以通过一个.babelrc 文件来配置一下，对这些版本的支持

.babelrc

1
2
3

{
    “presets”: [“env”, “stage-0”]   // 从右向左解析
}

我们再在 webpack 里配置一下 babel-loader 既可以做到代码转成 ES5 了

module.exports = {
    module: {
        rules: [
            {
                test:/.js$/,
                use: ‘babel-loader’,
                include: /src/,          // 只转化 src 目录下的 js
                exclude: /node_modules/  // 排除掉 node_modules，优化打包速度
            }
        ]
    }
}

在我们每次 npm run build 的时候都会在 dist 目录下创建很多打好的包，如果积累过多可能也会混乱, 所以应该在每次打包之前将 dist 目录下的文件都清空，然后再把打好包的文件放进去

这里提供一个 clean-webpack-plugin 插件

1	npm i clean-webpack-plugin -D

let CleanWebpackPlugin = require(‘clean-webpack-plugin’);

module.exports = {
    plugins: [
        // 打包前先清空
        new CleanWebpackPlugin(‘dist’)  
    ]
}

启动静态服务器

启动一个静态服务器，默认会自动刷新，就是说你对 html,css,js 文件做了修改并保存后，浏览器会默认刷新一次展现修改后的效果

正常情况下我们都是在开发环境中开发项目，所以之前配置的脚本”dev”可以派上用场了，在执行 npm run dev 命令后，会启动静态服务器，我们访问 localhost:3000 端口就可以看到开发的页面内容了

如果 devServer 里 open 设为 true 后，会自动打开浏览器

module.exports = {
    devServer: {
        contentBase: ‘./dist’,
        host: ‘localhost’,      // 默认是 localhost
        port: 3000,             // 端口
        open: true,             // 自动打开浏览器
        hot: true               // 开启热更新
    }
}

当然在 npm run dev 命令下，打包的文件存在于内存中，并不会产生在 dist 目录下
热更新和自动刷新的区别

在配置 devServer 的时候，如果 hot 为 true，就代表开启了热更新,
But 这并没那么简单，因为热更新还需要配置一个 webpack 自带的插件并且还要在主要 js 文件里检查是否有 module.hot

下面就让我们直接看下代码是如何实现的

// webpack.config.js

let webpack = require(‘webpack’);

module.exports = {
    plugins: [
        // 热更新，热更新不是刷新
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: ‘./dist’,
        hot: true,
        port: 3000
    }
}

此时还没完虽然配置了插件和开启了热更新，但实际上并不会生效

// index.js
let a = ‘hello world’;
document.body.innerHTML = a;
console.log(‘这是 webpack 打包的入口文件’);

// 还需要在主要的 js 文件里写入下面这段代码
if (module.hot) {
    // 实现热更新
    module.hot.accept();
}

以上 index.js 中的内容，如果将变量 a 的值进行修改保存后，会在不刷新页面的情况下直接修改掉，这样就实现了热更新

那么热更新从现在看来和自动刷新浏览器的区别也不是太大嘛！自动刷新也是可以接受的啊

其实不然，热更新的好处可能在 vue 或者 react 中有更大的发挥，其中某一个组件被修改的时候就会针对这个组件进行热更新了，这里用到 vue 或 react 的同学去实际体验一下吧

resolve 解析

在 webpack 的配置中，resolve 我们常用来配置别名和省略后缀名

module.exports = {
    resolve: {
        // 别名
        alias: {
            $: ‘./src/jquery.js’
        },
        // 省略后缀
        extensions: [‘.js’, ‘.json’, ‘.css’]
    },
}

这个配置在 webpack 中比较简单，我们也就不再叙述了，下面来看点干货

提取公共代码

在 webpack4 之前，提取公共代码都是通过一个叫 CommonsChunkPlugin 的插件来办到的。到了 4 以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化”

下面我们就来看看如何提取公共代码
// 假设 a.js 和 b.js 都同时引入了 jquery.js 和一个写好的 utils.js
// a.js 和 b.js

1 2	import $ from ‘jquery’; import {sum} from ‘utils’;

那么他们两个 js 中其中公共部分的代码就是 jquery 和 utils 里的代码了
可以针对第三方插件和写好的公共文件

module.exports = {
    entry: {
        a: ‘./src/a.js’,
        b: ‘./src/b.js’
    },
    output: {
        filename: ‘[name].js’,
        path: path.resolve(‘dust’)
    },
    // 提取公共代码
   optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {   // 抽离第三方插件
                    test: /node_modules/,   // 指定是 node_modules 下的第三方包
                    chunks: ‘initial’,
                    name: ‘vendor’,  // 打包后的文件名，任意命名    
                    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                    priority: 10    
                },
                utils: { // 抽离自己写的公共代码，utils 这个名字可以随意起
                    chunks: ‘initial’,
                    name: ‘utils’,  // 任意命名
                    minSize: 0    // 只要超出 0 字节就生成一个新包
                }
            }
        }
    },
    plugins: [
    new HtmlWebpackPlugin({
        filename: ‘a.html’,
        template: ‘./src/index.html’,  // 以 index.html 为模板
        chunks: [‘vendor’, ‘a’]
    }),
    new HtmlWebpackPlugin({
        filename: ‘b.html’,
        template: ‘./src/index.html’,  // 以 index.html 为模板
        chunks: [‘vendor’, ‘b’]
    })]
}

通过以上配置，可以把引入到 a.js 和 b.js 中的这部分公共代码提取出来

webpack4- 用之初体验（上）

2018-05-12T15:18:30.000Z

众所周知，webpack 进入第 4 个大版本已经有 2 个月的时间了，而且 webpack 团队升级更新的速度也是非常的惊人

在写下如下内容的时候 webpack 已经出到了 4.6 的版本了，剑指 5.0 应该是指日可待了，当然这些都是个人的臆想，并不代表任何意见

既然我们已经迎接了 webpack4 的到来了，那么就一起来使用一下，即使你没用过之前的版本，没关系，我们重新出发，将工作中常用到的配置写给大家来看

非友情提示：由于 webpack 使用起来并不能仅看代码就方便理解，所以有图有真相的才是正解，于是乎本文配图很多，真的是很多

首先，既来之，则安之

安装 webpack

需要先在项目中 npm init 初始化一下，生成 package.json
建议 node 版本安装到 8.2 以上

webpack4 中除了正常安装 webpack 之外，需要再单独安一个 webpack-cli

1	npm i webpack webpack-cli -D

★ npm i -D 是 npm install –save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies 中，主要在开发环境中的依赖包

0 配置了什么

webpack4 可以支持 0 配置打包，这里所说的 0 配置又是什么呢？当然在开发者眼中 0 配置的东西，那根本是无法用的，因为不够智能，那么我们就来看看做到了哪些 0 配置

在使用 webpack 进行打包的时候，默认情况下会将 src 下的入口文件 (index.js) 进行打包

node v8.2 版本以后都会有一个 npx
npx 会执行 bin 里的文件

1 2	npx webpack // 不设置 mode 的情况下打包出来的文件自动压缩 npx webpack –mode development // 设置 mode 为开发模式，打包后的文件不被压缩

当执行 npx webpack 命令的时候，webpack 会自动查找项目中 src 目录下的 index.js 文件，然后进行打包，生成一个 dist 目录并存在一个打包好的 main.js 文件
这些算是 0 配置的操作了，名字都是定义好的，不能变，想想也很鸡肋

webpack 的使用还是在我们的配置方面，下面就进入我们的常规操作环节

webpack 是基于 Node 的

在项目下创建一个 webpack.config.js(默认，可修改)文件来配置 webpack

module.exports = {
    entry: ‘’,               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: ‘development’      // 模式配置
}

以上就是 webpack 的正常配置模块
★ 启动 devServer 需要安装一下 webpack-dev-server
npm i webpack-dev-server -D

按照项目的结构，我们就从 0 开始去写一下配置吧

// webpack.config.js

const path = require(‘path’);

module.exports = {
    entry: ‘./src/index.js’,    // 入口文件
    output: {
        filename: ‘bundle.js’,      // 打包后的文件名称
        path: path.resolve(‘dist’)  // 打包后的目录，必须是绝对路径
    }
}

上面就可以说是实现了最简单的 webpack 配置了，那接下来就打包一下看看

配置执行文件

工作当中我们打包编译的时候一般都执行 npm run dev 这样的命令，既然是通过 npm 执行的命令，我们就应该找到 package.json 里的执行脚本去配置一下命令，这里如下图所示

npm run build 就是我们打包后的文件，这是生产环境下，上线需要的文件

npm run dev 是我们开发环境下打包的文件，当然由于 devServer 帮我们把文件放到内存中了，所以并不会输出打包后的 dist 文件夹

通过 npm run build 之后会生成一个 dist 目录文件夹，就和上面打包后的样子一样了
多入口文件
多个入口可以有两种实现方式进行打包

一种是没有关系的但是要打包到一起去的，可以写一个数组，实现多个文件打包
另一种就是每一个文件都单独打包成一个文件的
下面就来看看这两种方式的写法

let path = require(‘path’);

module.exports = {
    // 1. 写成数组的方式就可以打出多入口文件，不过这里打包后的文件都合成了一个 
    // entry: [‘./src/index.js’, ‘./src/login.js’],
    // 2. 真正实现多入口和多出口需要写成对象的方式
    entry: {
        index: ‘./src/index.js’,
        login: ‘./src/login.js’
    },
    output: {
        // 1. filename: ‘bundle.js’,
        // 2. [name] 就可以将出口文件名和入口文件名一一对应
        filename: ‘[name].js’,      // 打包后会生成 index.js 和 login.js 文件
        path: path.resolve(‘dist’)
    }
}

这时候执行 npm run build 后，会生成打包好的两个 js 文件，如图所示

配置 Html 模板

文件都打包好了，但是我们在使用的时候不能在 dist 目录下去创建一个 html 文件，然后去引用打包后的 js 吧，这不合理，实际开发中也不会这样

我们需要实现 html 打包功能，可以通过一个模板实现打包出引用好路径的 html 来, 这就需要用到一个常用的插件了，html-webpack-plugin，用之前我们来安一下它

1	npm i html-webpack-plugin -D

因为是个插件，所以需要在 config.js 里引用一下的

let path = require(‘path’);
// 插件都是一个类，所以我们命名的时候尽量用大写开头
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
    entry: ‘./src/index.js’,
    output: {
        // 添加 hash 可以防止文件缓存，每次都会生成 4 位的 hash 串
        filename: ‘bundle.[hash:4].js’,   
        path: path.resolve(‘dist’)
    },
    plugins: [
        // 通过 new 一下这个类来使用插件
        new HtmlWebpackPlugin({
            // 用哪个 html 作为模板
            // 在 src 目录下创建一个 index.html 页面当做模板来用
            template: ‘./src/index.html’,
            hash: true, // 会在打包好的 bundle.js 后面加上 hash 串
        })
    ]
}

通过上面的配置后，我们再 npm run build 打包看一下现在是个什么样子了

多页面开发，怎么配置多页面

如果开发的时候不只一个页面，我们需要配置多页面，那么需要怎么来搞呢？不用担心，html-webpack-plugin 插件自有办法，我们来观望一下

let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
    // 多页面开发，怎么配置多页面
    entry: {
        index: ‘./src/index.js’,
        login: ‘./src/login.js’
    },
    // 出口文件  
    output: {                       
        filename: ‘[name].js’,
        path: path.resolve(‘dist’)
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./src/index.html’,   
            filename: ‘index.html’,
            chunks: [‘index’]   // 对应关系,index.js 对应的是 index.html
        }),
        new HtmlWebpackPlugin({
            template: ‘./src/login.html’,
            filename: ‘login.html’,
            chunks: [‘login’]   // 对应关系,login.js 对应的是 login.html
        })
    ]
}

继续 npm run build 看打包后的样子

上面基本介绍完了 html 和 js 的打包配置了，现在我们还缺一个好兄弟 css，webpack 对 css 的解析需要用到 loader，所以我们先提前安装好，待会好方便使用

引用 CSS 文件

可以在 src/index.js 里引入 css 文件，到时候直接打包到生产目录下
需要下载一些解析 css 样式的 loader

1	npm i style-loader css-loader -D

引入 less 文件的话，也需要安装对应的 loader
1
npm i less less-loader -D

下面我们来看一下如何配置 css 文件的解析
// index.js

import ‘./css/style.css’;   // 引入 css
import ‘./less/style.less’; // 引入 less

console.log(‘这里是打包文件入口 -index.js’);

// webpack.config.js
module.exports = {
    entry: {
        index: ‘./src/index.js’
    },
    output: {
        filename: ‘bundle.js’,
        path: path.resolve(‘dist’)
    },
    module: {
        rules: [
            {
                test: /.css$/,     // 解析 css
                use: [‘style-loader’, ‘css-loader’] // 从右向左解析
                / 
                    也可以这样写，这种方式方便写一些配置参数
                    use: [
                        {loader: ‘style-loader’},
                        {loader: ‘css-loader’}
                    ]
                /
            }
        ]
    }
}

此时打包后的 css 文件是以行内样式 style 的标签写进打包后的 html 页面中，如果样式很多的话，我们更希望直接用 link 的方式引入进去，这时候需要把 css 拆分出来
extract-text-webpack-plugin 插件相信用过的人都知道它是干什么的，它的功效就在于会将打包到 js 里的 css 文件进行一个拆分

拆分 CSS

// @next 表示可以支持 webpack4 版本的插件

1	npm i extract-text-webpack-plugin@next -D

let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
// 拆分 css 样式的插件
let ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
    entry: ‘./src/index.js’,
    output: {
        filaneme: ‘bundle.js’,
        path: path.resolve(‘dist’)
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 将 css 用 link 的方式引入就不再需要 style-loader 了
                    use: ‘css-loader’       
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./src/index.html’,
        }),
        // 拆分后会把 css 文件放到 dist 目录下的 css/style.css
        new ExtractTextWebpackPlugin(‘css/style.css’)  
    ]
}

此时拆分完 css 后，打包的 html 页面就以 link 的方式去引入 css 了，这样很好

当然大家很多都说另外一个插件也是可以办到的，那就是 mini-css-extract-plugin，是的可以说它是为 webpack4 而生的，而之所以上来就没有介绍是因为还不成熟，还有很多 bug 需要去解决的
不过既然大家都知道它，那就顺便也提一下吧

1	npm i mini-css-extract-plugin -D

使用起来和上面的插件是差不多的

let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [MiniCssExtractPlugin.loader, ‘css-loader’]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: ‘css/a.css’   // 指定打包后的 css
        })
    ]
}

拆分成多个 css

这里要着重说一下上面两个插件的区别了，我个人还是建议用 extract-text-webpack-plugin 的，毕竟从之前的版本承接下来的，虽然在安包的时候需要 @next，但是还是值得信赖的

而且现在的 extract-text-webpack-plugin 也支持了拆分成多个 css，而目前 mini-css-extract-plugin 还不支持此功能

// 正常写入的 less
let styleLess = new ExtractTextWebpackPlugin(‘css/style.css’);
// reset
let resetCss = new ExtractTextWebpackPlugin(‘css/reset.css’);

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: resetCss.extract({
                    use: ‘css-loader’
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ‘css-loader’
                })
            }
        ]
    },
    plugins: [
        styleLess,
        resetCss
    ]
}

通过这样操作后可以打包成两个不同的 css 文件，如下图

引用图片

处理图片方面，也需要 loader

1	npm i file-loader url-loader -D

如果是在 css 文件里引入的如背景图之类的图片，就需要指定一下相对路径

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    use: ‘css-loader’,
                    publicPath: ‘../‘
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: ‘url-loader’,
                        options: {
                            limit: 8192,    // 小于 8k 的图片自动转成 base64 格式，并且不会存在实体图片
                            outputPath: ‘images/‘   // 图片打包后存放的目录
                        }
                    }
                ]
            }
        ]
    }
}

在 css 中指定了 publicPath 路径这样就可以根据相对路径引用到图片资源了.

页面 img 引用图片

页面中经常会用到 img 标签，img 引用的图片地址也需要一个 loader 来帮我们处理好

1	npm i html-withimg-loader -D

module.exports = {
    module: {
        rules: [
            {
                test: /.(htm|html)$/,
                use: ‘html-withimg-loader’
            }
        ]
    }
}

这样再打包后的 html 文件下 img 就可以正常引用图片路径了

本文地址 //haozigan.com/2018-05/webpack4-0.html

#webpack

解决 nginx 添加 openssl 模块编译时报错问题

2018-05-09T15:05:30.000Z

如题所示，报错信息如下：

/bin/sh: line 2: ./config: No such file or directory
make[1]: *** [/usr/local/ssl/.openssl/include/openssl/ssl.h] Error 127
make[1]: Leaving directory `/usr/local/src/nginx-1.9.9‘
make: *** [build] Error 2

需要说明的是，我这里编译所使用的 Nginx 源码是 1.9.9 的。根据报错信息我们知道，出错是因为 Nginx 在编译时并不能在 /usr/local/ssl/.openssl/ 这个目录找到对应的文件，其实我们打开 /usr/local/ssl/ 这个目录可以发现这个目录下是没有.openssl 目录的，因此我们修改 Nginx 编译时对 openssl 的路径选择就可以解决这个问题了

解决方案

打开 nginx 源文件下的 /usr/local/src/nginx-1.9.9/auto/lib/openssl/conf 文件：

找到这么一段代码：

CORE_INCS="$CORE_INCS $OPENSSL/.openssl/include"
CORE_DEPS="$CORE_DEPS $OPENSSL/.openssl/include/openssl/ssl.h"
CORE_LIBS="$CORE_LIBS $OPENSSL/.openssl/lib/libssl.a"
CORE_LIBS="$CORE_LIBS $OPENSSL/.openssl/lib/libcrypto.a"
CORE_LIBS="$CORE_LIBS $NGX_LIBDL"

修改成以下代码：

CORE_INCS="$CORE_INCS $OPENSSL/.openssl/include"
CORE_DEPS="$CORE_DEPS $OPENSSL/include/openssl/ssl.h"
CORE_LIBS="$CORE_LIBS $OPENSSL/lib/libssl.a"
CORE_LIBS="$CORE_LIBS $OPENSSL/lib/libcrypto.a"
CORE_LIBS="$CORE_LIBS $NGX_LIBDL"

然后再进行 Nginx 的编译安装即可

form 表单标签的 enctype 属性的作用及应用示例介绍

2016-08-17T14:06:43.000Z

enctype 是指定将数据回发到服务器时浏览器使用的编码类型，其编码类型有以下三种，下面通过示例为大家详细介绍下其具体的使用

编码类型有以下三种：

application/x-www-form-urlencoded：在发送前编码所有字符（默认）。这是标准的编码格式。
multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

enctype=”multipart/form-data”是上传二进制数据过去。

为什么上传文件要设置 enctype=”multipart/form-data”

因为设置 enctype 为 multipart/form-data 值后，不对字符编码，则数据通过二进制的形式传送到服务器端，这时如果用 request 是无法直接获取到相应表单的值的，而应该通过 stream 流对象，将传到服务器端的二进制数据解码，从而读取数据。

如果要上传文件的话，是一定要将 encotype 设置为 multipart/form-data 的。

meta标签

2016-06-06T14:03:46.000Z

meta标签 是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。

申明文档使用的字符编码

1	<meta charset='utf-8'>

或者

1	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。当然，你也可以使用gb2312（简体中文），big5（繁体中文）等等其他字符集。

而目前我们一般推荐使用第一种写法，也是HTML5使用的写法。

声明使用的浏览器及版本

1	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

还有以下几种设置方式：

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

SEO优化相关

1
2
3

<meta name="keywords" content="html5, css3, 关键字"/>  
<meta name="description" content="不超过150个字符" /> 
<meta name="author" content="laoona" />

页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页。

1	<meta http-equiv="Refresh" contect="5;url=http://www.laoona.com" />

上述代码表示停留5秒钟后自动刷新跳转到URL网址http://www.laoona.com。

Expires网页过期时间

1	<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

设定网页的到期时间，一旦过期则必须到服务器上重新调用，需要注意的是必须使用GMT时间格式，或直接设为0(不缓存),最好还是服务器端配置页面的缓存控制。

Pragma禁止本地缓存

1	<meta http-equiv="Pragma" contect="no-cache" />

设定网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

viewport移动设备屏幕可视区域

由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

width – viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度（范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例（范围从 > 0 到 10）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

强制让文档与设备的宽度保持 1:1 ；

文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度。

1
2
3

body { 
    min-width: 320px; 
}

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

对于移动设备上的meta还有以下一些设置。

WebApp全屏模式：伪装app，离线应用。

1	<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent

1	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

1	<meta name="apple-mobile-web-app-title" content="标题" />

忽略数字自动识别为电话号码/忽略识别邮箱

1 2	<meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" />

nginx alias root 和 location 指向

2016-06-01T09:37:38.000Z

虚拟服务器可拥有一个宿主目录和任意数量的其它目录，这些其它目录通常被称为虚拟目录。

nginx没有虚拟目录的说法，因为nginx本来就根据目录设计并工作的。如果要把虚拟目录强硬插上一个虚拟目录的说法，那只有alias标签比较像。还有一个和alias相似的标签root，它们之间有何区别？

最基本的区别

alias 指定的目录是准确的, 作用可以理解为linux的 ln，给location指定一个目录。

root 指定目录的上级目录，并且该上级目录要含有locatoin指定名称的同名目录。

alias使用注意

使用alias时，目录名后面一定要加”/“。
使用alias标签的目录块中不能使用rewrite的break。
alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
alias只能位于location块中

例子

1
2
3

location /abc/ {
    alias /home/html/abc/;
}

在这段配置下，http://test/abc/a.html 就指定的是 /home/html/abc/a.html。这段配置亦可改成使用root标签：

1
2
3

location /abc/ {
    root /home/html/;
}

这样，nginx就会去找/home/html/目录下的abc目录了，得到的结果是相同的。但是，如果我把alias的配置改成

1
2
3

location /abc/ {
    alias /home/html/def/;
}

那么nginx将会直接从/home/html/def/取数据，例如访问http://test/abc/a.html指向的是 /home/html/def/a.html

这段配置还不能直接使用root配置，如果非要配置，只有在/home/html/下建立一个 def->abc的软link（快捷方式）了。

一般情况下，在location /中配置root，在location /other中配置alias是一个好习惯。

alias fast-cgi

nginx在处理php脚本时，需要传递给fastcgi才能处理，下面是fast-cgi无法工作的配置

server {
    listen      80;
    server_name  pwta; 
    root html;

    location /test/{
        alias html/test/;
        autoindex on;
    }
    location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

通过上面的配置，我们发现, 访问/test/a.php, php脚本并没有作用。为什么呢？答案在下面：

Adding alias will effectively overwrite the $document_root to whatever is the alias. Note that it will not affect $fastcgi_script_name or $request_filename. Using the new $document_root together with regex matching the file name, resolves to the script file

针对上面的配置我们要改成这样：

server {
listen      80;
server_name  pwta;
index index.html index.php;
root html;

location /test/ {
    alias html/test/;
}

location ~  ^/test/(.+\.php)$ { ### This location block was the solution
    alias html/test/;     
    fastcgi_pass   127.0.0.1:9000;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  $document_root$1;
    include fastcgi_params;
}

 location ~ \.php$ {
    fastcgi_pass   127.0.0.1:9000;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    include        fastcgi_params;
}

重启nginx，php文件解析生效

参考资料

http://down.chinaz.com/server/201111/1382_1.htm
http://stackoverflow.com/questions/10084137/nginx-aliaslocation-directive

async javascript 下

2016-05-31T14:00:11.000Z

接着上文：async javaScript 上

JavaScript异步编程解决方案

现在主要的异步编程的方案有3种：

PubSub模式（分布式事件）
Promise对象
工作流控制库

下面我们将逐个进行分析，在这些异步方案之前，我们经常看到所谓的金字塔厄运

asyncFunc1(function(result1){
    //some codes
    asyncFunc2(function(result2){
        //some codes
        asyncFunc3(function(result3){
            //other codes
        });
    });
});

那么，我们的解决方案就是使我们能更加方便的组织异步代码，规避像上面那样的问题。

PubSub模式（分布式事件）

所谓的PubSub模式其实很简单，比如我们平时使用的dom.addEventListener就是一个PubSub模式鲜活的例子。在2000年DOM Level 2发布之前，我们可能需要使用类似于dom.onclick的方式去绑定事件。这样很容易产生问题，如果没有分布式事件的话，我们不能：

1 2	dom.onclick = eventHandler1; dom.onclick = eventHandler2;

很明显，onclick只是dom的一个属性，同一个key不能对应多个value，第一个会被第二个覆盖掉，所以我们只能：

dom.onclick = function(){
    eventHandler1.apply(this,arguments);
    eventHandler1.apply(this,arguments);  
};
`

这样的坏处很多，比如不够灵活，代码冗长，不利于维护等等。

现在开始学习前端，可能已经没有老师或者书籍讲解这样的用法了。dom.addEventListener标准化之后，我们可以：

1 2	dom.addEventListener('click',eventHandler1); dom.addEventListener('click',eventHandler2);

而像jquery这样的类库，也自然磨平了不同浏览器的差异，提供了类似于$dom.on()的方法。如今，几乎所有的前端dom相关的类库都会提供类似的API。当然，在javascript世界的另一端，nodejs也有核心模块Events提供的EventEmitter对象，从而很容易实现分布式事件：

var Emitter = require("events").EevntEmitter;

var emitter = new Emitter();

emitter.on('someEvent',function(stream){
    console.log(stream + 'from eventHandler1');
});

emitter.on('someEvent',function(stream){
    console.log(stream + 'from eventHandler2');
});

emitter.emit('someEvent','I am a stream!');

我们用DOM举例并不说明PubSub模式就是事件监听，而是因为事件监听是一个典型的分布式事件的示例，只是我们的订阅和发布依托的对象不是一个常规的对象，而且是一个浏览器的DOM对象，而在jQuery中这个对象就是jQuery对象了，下面，我们用简单的代码实现一个PubSub模式：

var PubSub = {handler: {}};

PubSub.sub = function(evnt, handler) {
   var handlers = this.handlers; 

   !(event in handlers) && handlers(event) = [];

   handers[event].push(handler);
}

PubSub.pub = function(event) {
   var handlers = (handlers[event] || []); 

   var handlerArgs = [].slice.call(arguments, 1);

   for(var i = 0, item; item = handlers[i]; i++) {
        item.apply(this, handlerArgs);
    }

    return this;
}

如同我们看到的，上面的代码只是一个最简单甚至不安全的实现。在生产环境中，有很多成熟的框架，比如PubSubJS这样纯粹的PubSub模式的实现。同时，从上面的实现中，我们能发现，所有的event-handler都是同步执行的，这与我们浏览器中真实点击事件的事件处理时机还是有差异的，真实的点击事件的handler会在后续的event-loop中触发，同样，我们手动的dom.click()或者jQuery的$dom.click()都是同步执行的（大家可以测试一下）。

PubSub模式是大家最常用的一种方式，相对容易理解。基于这种事件化对象，实现了代码的分层次化，像大名如雷贯耳的Backbone.js也是使用了这样的技术。这是PubSub模式的好处。但是，事件不是万金油，有一些情况不适合用事件来处理，比如一些一次性转化且只有成功或者失败结果的流程，使用PubSub模式就有一些不合适。而这种情景下，Promise就显得更加适合我们。

Promise对象

Promise在很多语言中都有各自的实现，而其与javascript的结缘要归功于javascript发展历史上有里程碑意义的Dojo框架。2007年Dojo的开发者Twisted的启发，为Dojo添加了一个dojo.Deferred对象。2009年，Kris Zyp在CommmonJS社区提出了Promiser/A规范。之后，风云变幻，nodejs异军突起（2010年初,nodejs 放弃了对Promise的原生支持），2011年jQuery1.5携带着叛逆的Promise实现以及崭新的ajax风火出世，从此Promise真正被javascript开发者所熟知。

如今，更多的实现早已关注羽翼更加丰满的Promise/A+规范，jQuery对Promise的实现也对标准有所妥协，同时像Q.js的出现，也使得javascript世界有了通吃客户端和服务端的直观且纯粹的实现。

就在不远的（2014年12月）将来，javascript发展史上有了一个重大的时刻将会到来，ES6将成为正式标准，在众多夺人眼球的特性中，对Promise的原生支持仍然不乏瞩目，如果再配以Generator将是如虎添翼。

稍远的将来，ES7会提供一个async关键字引导声明的函数，支持 await，而此番花样将会如何让我们拭目以待。

CommonJS社区的Promise/A规范相对简洁，而Promise/A+规范规范对其作了一些补充，我们后面将以Promise/A+规范配以实例学习Promise。

什么是Promise？Promise是一个对象，它代表异步函数的返回结果。用代码表示也就是：

1	var promise = asyncFunction();

如果具象一点，我们常见的一个jQuery的ajax调用就是这样：

var ajaxPromise = $.ajax('mydata');
ajaxPromise.done(successFunction);
ajaxPromise.fail(errorFunction);
ajaxPromise.always(completeFunction);

从上面的代码中，我们看到jQuery返回的Promise对象拥有若干方法，比如done、fail和always分别对应了ajax成功、失败以及无论成功失败都应该执行的回调，这些方法可以看做是规范之上的具体实现带给我们的语法糖。那么，真实的Promise规范是什么样？（其实，规范相对简短，大家可以稍花时间阅读，在此我们做一下主干介绍）

Promise的状态能且只能是下面三种的某一种：pending, fulfilled, rejected。这三种状态之间的关系：

pending:可以转变到fulfilled状态或者rejected状态
fulfilled:不可以转变到其他任何状态，而且必须有一个不可改变的value
rejected:不可以转变到其他任何状态，而且必须有一个不可改变的reason

关于value和reason，我们可以分别理解为fulfilled的结果和rejected的原因。

Promise必须要拥有一个then方法，用以访问当前或者最终的value或reason。then方法拥有两个参数，而且这两个参数都是可选的，用promise.then(onFulfilled, onRejected)。分析如下：

onFulfilled: :如果不是函数，将被忽略。
如果是函数，只有且必须在promise状态转换为fulfilled之后被触发一次，并且只传递promise的value作为第一个参数。
onRejected:如果不是函数，将被忽略。
如果是函数，只有且必须在promise状态转换为rejected之后被触发一次，并且只传递promise的reason作为第一个参数。

另外：多次调用then绑定的回调函数，在fulfilled或rejected的时候，执行顺序与绑定顺序相对应。规范要求，调用需要在then之后的event loop中执行。

Promise的then方法必须返回一个promise对象，以供链式调用，如果onFulfilled或者onRejected有throw，那么后生成的Promise对象应该以抛出内容为reason转化为rejected状态。

在浅析Promise规范之后，我们可以完善一下本章节的第一段代码：

var promise = asyncFunction();
promise = promise.then(onFulfilled1, onRejected1)
                 .then(onFulfilled2, onRejected2);

promise.then(onFulfilled3, onRejected3);

Promise/A规范的实现众多，在我们的实际生产中，我们应该选择哪个实现呢？这个只能说因地制宜。

当然，现在应该有很多人和我一样，期待着ES6的原生Promise实现。ES标准化的Promise看上去是这样的：

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

接下来，我们顺带提及一下Generator吧，如果你还不知道Generator是什么？看这里。简洁一点描述就是Generator函数可以通过特定的yield关键字中断函数执行，并与外界共享执行上下文。Generator函数基于这一特性，可以跟异步函数配合，等待异步函数的执行（结果），然后通过特定的接口（next）将异步结果注入到Generator自己的上下文中，然后继续执行后面的代码。

这样结合后，我们便能用同步的方式书写异步代码。能与Generator配合的实现有很多，其中就有Promise对象，而express的主人TJ大神给我们提供了一个非常成熟的方案–co。个人感觉，基于Generator优化异步代码的方式会是未来的最受欢迎的方式。在此，推荐几篇比较优秀的文章，我也就不班门弄斧了。

朴灵大大的还热乎的Generator与异步编程,不知道是哪位老师的Harmony Generator, yield, ES6, co框架学习,屈屈大大的ES6中的生成器函数介绍。如果想学习这一“不远未来”的技术，请点击进入上述链接吧。

另外，Google和Mozilla分别给了一些自己的解决方案：traceur 和 taskjs。

基于Promise，我们可以实现各种串行并行的异步操作，但是，这个串行并行的控制，需要我们手动去维护，而flow-control类的方案，恰恰满足了我们这方面的需求，下面我们就从这里说起吧。

工作流控制库

所谓的工作流控制库（flow-control），我用自己的语言描述便是通过固有的模式（库提供相关的api）组织任务（代码/函数）的执行，从而轻松实现并行串行等需求。那么，比如我们有一个需求，需要读取三个文件，而三个文件是有顺序依赖关系的，那么我们需要做的就是顺序读取，可能代码原始是这样的：

fs.readFile('originalFile',function(err,data1){
  fs.readFile(data1,function(err,data2){
    fs.readFile(data2,function(err,data3){
      //operate with data3
    });
  });
});

我们看到了一个“美丽的”金字塔。那么，如果用久负盛名的async后，会是怎么样呢？

async.waterfall([
  function(cb){
    fs.readFile('originalFile',cb);
  },function(data1,cb){
    fs.readFile(data1,cb);
  },function(data2,cb){
    fs.readFile(data2,cb);
  }
],function(err,result){
  //result now equals data3 & operate with data3
});

而同样的需求，用极简主义的step实现，代码又是如何呢？

step(function(){
  fs.readFile('originalFile',this);
},function(err,data1){
  fs.readFile(data1,this);
},function(err,data2){
  fs.readFile(data2,this);
},function(err,data3){
  //operate with data3
});

关于原始方案异步函数嵌套异步函数，我们可以一目了然就不做解释了。下面，我们对比一下async和step两者：

最明显的区别便是，async对外暴露一个对象，对象之下有实现若干特定流程的api。比如，我们需求中，由上而下有顺序依赖关系，async会给我们提供一个很文艺的api叫waterfall,而没有依赖关系只有顺序要求，我们就可以使用async.series,并行推进任务可以用async.parallel等等。

相比async，step就显得简洁很多，step给我们只提供了一个函数，它接受一个系列函数作为参数，并根据函数中对this的调用区分实现不同类型的流程控制。上面的示例中，异步函数在完成之后将结果传入step的回调函数执行时的this（如你所想，这时候this是一个函数）,而正是通过this实现了将异步操作的结果传入到下一个step的回调函数，从而实现流程控制。通过this，我们实现其它的流程控制，比如要求多个任务并行：

Step(function loadStuff() {
    fs.readFile('file-1', this.parallel());
    fs.readFile('file-2', this.parallel());
    fs.readFile('file-3', this.parallel());
  },function showStuff(err, f1, f2, f3) {
    //operate with f1, f2, f3
  }
);

另外，async还为我们提供了一些流程控制之外的非常易用集合操作的方法以及一些工具函数。比如，类似于数组的map操作，我们看下面的函数：

1
2
3

async.map(['file1','file2','file3'], fs.stat, function(err, results){
  // results is now an array of stats for each file
});

而当我们需要用step实现类似需求的时候怎么办呢？因为step是极简主义，源码也总共寥寥百余行，但是，我们完全可以借助既有的函数和方法，模拟出一个stepMap:

function stepMap(arr, iterator, callback){
  step(function(){
    var group = this.group();
    for(var i = 0, l = arr.length; i < l; i++){
      iterator(arr[i], group());
    }
  },callback);
}

总之，关于这一类型的解决方案，async和step是两个比较大众的实现，哪个更优，我觉得各有利弊，就像我们权衡express和connect一样。如果你喜欢便捷易用，又对api天生敏感，async是不错的选择；如果你像我一样，喜欢简洁，而且喜欢自己折腾，又不想死记api，那不妨尝试一下step。

async javascript 上

2016-05-31T11:19:12.000Z

最近看了一些javascript异步编程方面文章，也反复读了几遍薄薄的 << Async JavaScript >>。总结一下，供自己后续学习使用，并分享给大家。

首先，有几个问题:

什么是异步编程/异步函数？
异步函数和回调函数有什么关系？
为什么异步编程经常与javascript同时出现？
javascript中的异步函数的机制是怎样的？
那么现在异步编程有什么解决文案？
未来的javascript异步编程是什么样子？

什么是异步函数？

对一个jser而言，学习和使用javascrtip的过程中, 异步编程出现频率应该是极高的，或许仅次于事件驱动/单线程。那么什么是异步编程呢？什么是异步函数呢？

言简意赅的说：异步函数就是会导致将来运行 一个取自事件队列的函数 的函数。这是的重点是取自事件队列，关于这个概念，暂且按下不表，将在后面进行分析，我们现在只需要知道异步函数是会导致将来某个时刻运行另外一个函数的函数。

异步函数 VS 回调函数

又是一个高频词汇，回调函数 。再次，我觉得有必要区分一下回调函数和异步函数的概念，虽然在很多人看来，在这一点上的区分不必太过纠结，可是借用老罗的话，我不是为了输赢，我就是认真，对概念的精确理解和把握，往往是我们深入学习的第一个台阶。

所谓回函函数：

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time. The invocation may be immediate as in a synchronous callback or it might happen at later time, as in an asynchronous callback. In all cases, the intention is to specify a function or subroutine as an entity that is, depending on the language, more or less similar to a variable.(from wikipedia)

从wikipedia的说法中我们可以清晰的看到：

首先，回调函数作为参数传入到另外一段代码中的一段可执行代码，也就是它所强调的是回调函数是需要被当作参数传入到其它代码中的；

其次，回调函数可以是同步的，也可以是异步的，这取决于使用者。

如果我们进入到wikipedia的页面，我们能额外发现一些其它的知识，比如回调函数会出现在拥有某些特性的语言中，那么函数是一等会民的javascript当然也就完美支持回调函数了。

那么，现在这两个概念应该比较清晰了，我们举个例子比较一下。比如：

function callbackFunc() {
     console.log("callback executed!");
}

setTimeout(callbackFunc, 10000);

function syncFunc(callbackFunc) {
    callbackFunc();
}

在上面的代码片段中，setTimeou是一个异步函数，因为它导致了大约1秒后callbackFunc的运行。而callbackFunc对于setTimeout来说，它是一个回调函数。同时，callbackFunc对于syncFunc来说，它也是一个回调函数，但是被同步执行（在同一个事件循环里被执行）,那么syncFunc不能被称为异步函数

另外，在网上的一些文章中都能看到，很多人将回调函数作为了异步编程的一个解决文案进行总结，包括阮一峰老师的javascript异步编程的4种方法。对于此，我认为这种分类是不恰当的。如果将回调函数看做异步编程的一种解决文案，那么我们后面讲到的分布式事件、Promise以及强大的工作流程控制库都是借助回调函数的形式来实现，岂不是都能看作是同一种解决？所以，我认为，回调函数并不能简单地被当做异步编程的一种解决文案。

javascript中的异步机制

每一个jser都应该了解，javascript是单线程的，所谓单线程，就是同一时刻只能执行一个任务，或者说只能有一个函数一个代码片段在执行。那么我们就很容易产生疑问，如果是单线程，那异步是如何实现的？

一句话回答：事件驱动(event-driven)。

首先，javascript是单线程执行的，但是javscript引擎的平台（浏览器或者nodejs）等是拥有若干线程的。比如，对于一个浏览器而言，有一条线程做渲染，有一条线程记录事件（click)等，有一条线程执行javascript等等，这些线程在浏览器内核的协调控制下执行（javascript线程执行期间，不能进行ui渲染）。这是单线程实现的异步基础。

其次，每一个异步函数都会对应至少一个event-handler，而上面提到的 事件队列 便是 event-handler在被处理的时候该放在的地方。javascript引擎的线程会在适当的时机处理一系列的 event-handler，适当的时机需要满足两个条件：

该事件已经满足触发条件（比如：setTimeout(func, 1000)后大约1000ms）；
javascript的线程空闲（比如：setTimeout注册的回调延时条件已经满足，但是此时的javascript引擎正在做一个复杂的for循环耗时3秒，那么setTimeout的回调函数也能只能等待for循环执行完成后，再执行）。

这是再提到event-loop的存在，每一次循环都是一个tick，它的作用就是在不断循环检测事件队列中是否有event-handler，如果有便会取出执行。我们可以这样理解event-loop:

while (true) {
    if (atLeasetOneEventIsQueued) {
        fireNextQueuedEvent();
    }
}

最后，事件满足触发条件（上文中适当的时机条件1）是如何判断的？

不同的事件的触发条件可能由不同的线程监控。比如，我们发送一个ajax请求，应该是浏览器有一个独立的线程发送http请求并在请求返回的时候通知javascript引擎线程满足触发条件；而click一个button，应该是浏览器的GUI线程通知javascript引擎，然后适时执行相应的event-handler。

我们举个例子说明，假设：我们处在一个页面，这个页面上有一个setTimeout正在执行延时1000ms执行的某段代码；而在这个200ms的时候，我们点击了一个按钮，因为此时已经满足事件触发条件，且javscript线程空闲，所以按照我们脚本，浏览器会立即执行与这个事件绑定的另外某段代码；点击事件触发的某段代码会做两件事，

一件是注册一个setinterval要求每隔700ms执行某段代码
另一件是发送一个ajax请求，并要求请求返回后执行某段代码，这个请求会在1500ms后返回。在这之后可能还会有其它事件被触发。

上文中，每一个某段代码都是一个event-handler,而event-handler被触发的时机可能受前面event-handler的影响。我们按照每个event-handler的执行时间都非常短来处理。可以提到下图（上文标示event-hanlder对应的异步函数，下方标示大致的时间）:

从图中我们能看到事件的执行顺序，这个很容易理解。现在想一下，如果点事件的event-handler先执行一个while循环耗时了100ms，然后再去setInterval和ajax请求，那么执行的顺序又是怎样的呢？如果理解了javascript的事件驱动机制，这个就很容易了。留下一段代码，大家自己尝试一下。是不是跟大家想的一样？

var obj = {"num": 1}, start = new Date;
setTimeout(function() {obj.num = 2}, 0);

while(new Date - start < 1000) {}

alert(JSON.stringify(obj));

或许还可以想到我们平时遇到的一些问题背后的原因：

为什么大多情况下setInterval执行间隔会小于setTimeout?
为什么setTimeout会有最小间隔？whatwg和w3c的HTML5规范都规定4ms
为什么建议耗时的函数分多次执行？比如，process.nextTick。

html头文件设置常用之设置缓存

2016-05-30T13:07:56.000Z

<meta http-equiv="pragma" content="no-cache">

pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)

<meta http-equiv="cache-control" content="no-cache">,

常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：

1） 打开新窗口

值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)

2） 在地址栏回车

值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。值为no-cache，那么每次都会访问。值为max-age，则在过期之前不会重复访问。

3） 按后退按扭

值为private、must-revalidate、max-age，则不会重访问，值为no-cache，则每次都重复访问

4） 按刷新按扭

无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文件夹留下页面备份。

<meta http-equiv="expires" content="0"> 指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1

Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。

centos安装vsftd

2016-05-26T23:27:37.000Z

概述：

vsftpd是Linux下比较著名的FTP服务器，搭建FTP服务器当然首选这个。本文介绍了在CentOS 6.4下安装vsftpd、配置虚拟用户登录FTP的过程。

安装vsftpd

查看是否已经安装vsftpd

1	rpm -qa \| grep vsftpd

如果没有，就安装，并设置开机启动

1 2	yum -y install vsftpd chkconfig vsftpd on

修改配置文件

1	vim /etc/vsftpd/vsftpd.conf

anonymous_enable=NO //设定不允许匿名访问
local_enable=YES //设定本地用户可以访问。注：如使用虚拟宿主用户，在该项目设定为NO的情况下所有虚拟用户将无法访问
chroot_list_enable=YES //使用户不能离开主目录
ascii_upload_enable=YES
ascii_download_enable=YES //设定支持ASCII模式的上传和下载功能
pam_service_name=vsftpd //PAM认证文件名。PAM将根据/etc/pam.d/vsftpd进行认证

添加ftp用户

下面是添加ftpuser用户，设置根目录为/home/wwwroot/ftpuser,禁止此用户登录SSH的权限，并限制其访问其它目录。

同样打开vsftpd的配置文件

1
2
3

#chroot_list_enable=YES
#(default follows)
#chroot_list_file=/etc/vsftpd.chroot_list

修改为

1
2
3

chroot_list_enable=YES
#(default follows)
chroot_list_file=/etc/vsftpd/chroot_list

增加用户`ftpuser`，指向目录/home/wwwroot/ftpuser,禁止登录SSH权限。

1	useradd -d /home/wwwroot/ftpuser -g ftp -s /sbin/nologin ftpuser

设置用户口令

1	passwd ftpuser

编辑文件chroot_list

1 2	vi /etc/vsftpd/chroot_list `

内容为ftp用户名,每个用户占一行,如：
peter
john

重新启动vsftpd

1	service vsftpd restart

出现的错误
1、500 OOPS: cannot change directory

解决方法：

在终端输入命令：

1 2	setsebool -P ftpd_disable_trans 1 service vsftpd restart

原因：这是因为服务器开启了selinux，这限制了FTP的登录。

mac 终端使用ftp命令

2016-05-25T22:36:05.000Z

使用 mac终端连接ftp服务器

格式：ftp [hostname| ip-address]

1 2	ftp 127.0.0.1 #服务器询问你用户名和口令，输入后即可

下载文件

下载文件通常用get和mget这两条命令。
get

格式：get [remote-file] [local-file]
将单个文件从远端主机中传送至本地主机中.

mget

格式：mget [remote-files]
将多个文件从远端主机中传送至本地主机中.

如要获取服务器上Cahce目录下的所有文件,则:

1 2	ftp> cd /rCache ftp> mget .

上传文件

put

格式：put local-file [remote-file]
将本地主机中一个文件传送至远端主机.

mput

将本地主机中一批文件传送至远端主机.
如要把本地当前目录下所有odt文件上传到服务器Doc目录下

1 2	ftp> cd /Doc ftp> mput *.odt

断开连接

bye：中断与服务器的连接。

ftp> bye

另：默认的本地目录是home。

输入help即可获得所有命令的帮助。

老衲是基佬

package.json 版本号说明

版本号基本格式

dependency 版本更新规则 (dependency version update rule)

版本号规则

Mongo 常用操作

两种方式连接MongoDB

1. 类似Mysql一样连接

2. 登录后进行验证

创建用户

备份

导入

浏览器何时会发送一个 options 请求

浏览器出现 http method options 请求的作用是什么？

谈到 options 请求，不得不说的就是 cors（跨域资源共享）

一个简单的请求如下：

js 动态插入脚本和插入引用外部链接脚本

一、直接插入 javascript 代码

二、插入引用外部文件

node 版本管理-nvm

react 组件间信息传递方式

一.（父组件）向（子组件）传递信息 >>> 主要是通过 prop 进行传值

二.（父组件）向更深层的（子组件） 进行传递信息

三.（子组件）向（父组件）传递信息

四. 没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

五. 利用 react-redux 进行组件之间的状态信息共享

markdown 代码高亮，支持标记语言的列表

nginx 静态资源缓存设置

如何在非空目录下 git clone 项目

解决办法：

webpack4- 用之初体验（下）

引用字体图片和 svg 图片

添加 CSS3 前缀

转义 ES6

启动静态服务器

提取公共代码

webpack4- 用之初体验（上）

安装 webpack

0 配置了什么

在项目下创建一个 webpack.config.js(默认，可修改)文件来配置 webpack

配置执行文件

配置 Html 模板

多页面开发，怎么配置多页面

继续 npm run build 看打包后的样子

拆分 CSS

拆分成多个 css

引用图片

页面 img 引用图片

解决 nginx 添加 openssl 模块编译时报错问题

解决方案

form 表单标签的 enctype 属性的作用及应用示例介绍

编码类型有以下三种：

为什么上传文件要设置 enctype=”multipart/form-data”

meta标签

申明文档使用的字符编码

声明使用的浏览器及版本

SEO优化相关

页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页。

Expires网页过期时间

Pragma禁止本地缓存

viewport移动设备屏幕可视区域

WebApp全屏模式：伪装app，离线应用。

隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent

添加到主屏后的标题

忽略数字自动识别为电话号码/忽略识别邮箱

nginx alias root 和 location 指向

最基本的区别

alias使用注意

例子

alias fast-cgi

async javascript 下

JavaScript异步编程解决方案

PubSub模式（分布式事件）

Promise对象

工作流控制库

async javascript 上

什么是异步函数？

异步函数 VS 回调函数

javascript中的异步机制

html头文件设置常用之设置缓存

二.（父组件）向更深层的（子组件）进行传递信息

增加用户`ftpuser`，指向目录/home/wwwroot/ftpuser,禁止登录SSH权限。

mac 终端使用ftp命令

使用 mac终端连接ftp服务器