发表于

一、概念

工作线程（webWorker）允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM

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

<head>
    <title>worker</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    function init() {
        //创建一个Worker对象，并向它传递将在新线程中执行的脚本url
        var worker = new Worker('worker.js')
        //接收worker传递过来的数据
        worker.onmessage = function(event) {
            document.getElementById('result').innerHTML += event.data + "<br/>"
        }
    }
    </script>
</head>

<body onload="init()">
    <div id="result"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// worker.js
var i = 0
function timedCount() {
    for (var j = 0, sum = 0; j < 100; j++) {
        for (var i = 0; i < 100000000; i++) {
            sum += i
        }
    }
    //将得到的sum发送回主线程
    postMessage(sum)
}
postMessage('Before computing, ' + new Date())
timedCount()
postMessage('After computing, ' + new Date())


阅读全文 »

发表于

零、禁止全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body onkeydown="noFullScreen(event)">
    <script type="text/javascript">
    function noFullScreen(e) {
        if (e.keyCode === 122) {
            e.preventDefault()
        }
    }
    </script>
</body>

</html>
1
2
3
document.addEventListener("webkitfullscreenchange", function () {
    document.webkitCancelFullScreen()
}, false)


阅读全文 »

发表于

一、try_files指令

  • 语法：try_files file … uri 或 try_files file … = code
  • 默认值：无
  • 作用域：server location

按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。


二、例子说明

1
try_files /app/cache/   $uri   @fallback;

它将检测/app/cache/index.php、/app/cache/index.html、$uri是否存在，如果不存在着内部重定向到@fallback(＠表示配置文件中预定义标记点) 。你也可以使用一个文件或者状态码(=404)作为最后一个参数，如果是最后一个参数是文件，那么这个文件必须存在。

发表于

root&alias文件路径配置

root/alias 是指定文件路径的两种方式，主要区别就是怎么解析location后面的uri

1
http://localhost/appImg/abc.jpg
1
2
3
4
location ^~ /appImg/ {
    root /home/nginx;
}
# 这个location相当于访问服务器上的文件路径：/home/nginx/appImg/abc.jpg
1
2
3
4
location ^~ /appImg/ {
    alias /home/nginx/;
}
# 这个location相当于访问服务器上的文件目录：/home/nginx/abc.jpg

发表于

对于padding属性而言，任意方向的百分比padding都相对于宽度计算可以让我们轻松实现固定比例的块级容器。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div { padding: 50%; }
div { padding: 100% 0 0; }
div { padding-bottom: 100%; }


.banner {
    padding: 15.15% 0 0;
    position: relative;
}
	
.banner > img {
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0; top: 0;
}

注：

1、图片宽度是100%容器的，padding的15.5%其实就是图片的高宽比例。

2、图片宽度50%容器宽度，图片高宽比4:3，我们也可以这么写

1
2
3
.img-box {
    padding: 0 50% 66.66% 0;
}

3、如果没有text-align属性干扰，img的position，及left和top可以不用指定

发表于

一、location匹配顺序

  1. “=”前缀指令匹配，如果匹配成功，则停止其他匹配。
  2. 普通字符串指令匹配，顺序是从长到短，匹配成功的location如果使用^~，则停止其他匹配（正则匹配）。
  3. 正则表达式指令匹配，按照配置文件里的顺序，成功就停止其他匹配。
  4. 如果第三步中有匹配成功，则使用该结果，否则使用第二步结果。
  • 匹配的顺序是先匹配普通字符串，然后再匹配正则表达式。另外普通字符串匹配顺序是根据配置中字符长度从长到短，也就是说使用普通字符串配置的location顺序是无关紧要的，反正最后nginx会根据配置的长短来进行匹配，但是需要注意的是正则表达式按照配置文件里的顺序测试。找到第一个比配的正则表达式将停止搜索。


阅读全文 »

发表于

语法规则

  1. 忽略文件中的空行或以井号（#）开始的行将会被忽略。
  2. 可以使用Linux通配符。例如：星号（*）代表任意多个字符，问号（？）代表一个字符，方括号（[abc]）代表可选字符范围，大括号（{string1,string2,…}）代表可选的字符串等。
  3. 如果名称的最前面有一个感叹号（!），表示例外规则，将不被忽略。
  4. 如果名称的最前面是一个路径分隔符（/），表示要忽略的文件在此目录下，而子目录中的文件不忽略。
  5. 如果名称的最后面是一个路径分隔符（/），表示要忽略的是此目录下该名称的子目录，而非文件（默认文件或目录都忽略）。
1
2
3
4
5
6
# 这是注释行，将被忽略
*.a       # 忽略所有以.a为扩展名的文件    
!lib.a    # 但是名为lib.a的文件或目录不要忽略，即使前面设置了对*.a的忽略
/TODO     # 只忽略此目录下的TODO文件，子目录中的TODO文件不忽略
build/    # 忽略所有build目录下的文件，但如果是名为build的文件则不忽略
doc/*.txt # 忽略文件如doc/notes.txt，但是文件如doc/server/arch.txt不忽略

发表于

格式和类型

  • border-*-radius属性的值可分别设定水平半径和垂直半径；若省略垂直半径，则垂直半径默认采用水平半径的值。

  • 而每个值，支持的单位有固定长度和百分比。若设置百分比格式，则水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*表示圆角的水平半径和垂直半径都为20px长度。*/
border-radius:20px;	

/*表示圆角的水平半径的长度为20px，垂直半径的长度为40px。*/
border-radius:20px/40px; 

/*表示圆角的水平半径和垂直半径都为各自边框长度的20%。*/
border-radius:20%;

/*表示圆角的水平半径为边框宽度的20%，垂直半径都为边框高度的30%。*/
border-radius:20%/30%;	

/*表示圆角的水平半径长度200px，垂直半径都为边框高度的300px。*/
border-radius: 200px 0px 0px 0px/300px 0px 0px 0px;


阅读全文 »

发表于

一、HTTP服务器

request对象封装了HTTP请求，我们调用request对象的属性和方法就可以拿到所有HTTP请求的信息；response对象封装了HTTP响应，我们操作response对象的方法，就可以把HTTP响应返回给浏览器。

用Node.js实现一个HTTP服务器程序非常简单。我们来实现一个最简单的Web程序hello.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict';

// 导入http模块:
var http = require('http');

// 创建http server，并传入回调函数:
var server = http.createServer(function (request, response) {
    // 回调函数接收request和response对象,
    // 获得HTTP请求的method和url:
    console.log(request.method + ': ' + request.url);
    // 将HTTP响应200写入response, 同时设置Content-Type: text/html:
    response.writeHead(200, {'Content-Type': 'text/html'});
    // 将HTTP响应的HTML内容写入response:
    response.end('<h1>Hello world!</h1>');
});

// 让服务器监听8080端口:
server.listen(8080);


阅读全文 »

发表于

一、读取

在Node.js中，流也是一个对象，我们只需要响应流的事件就可以了：data事件表示流的数据已经可以读取了，end事件表示这个流已经到末尾了，没有数据可以读取了，error事件表示出错了。

下面是一个从文件流读取文本内容的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict';
var fs = require('fs');
// 打开一个流:
var rs = fs.createReadStream('sample.txt', 'utf-8');

rs.on('data', function (chunk) {
    console.log('DATA:')
    console.log(chunk);
});

rs.on('end', function () {
    console.log('END');
});

rs.on('error', function (err) {
    console.log('ERROR: ' + err);
});

要注意，data事件可能会有多次，每次传递的chunk是流的一部分数据。


阅读全文 »