发表于 | 分类于

参考链接

https://blog.csdn.net/hzsunshine/article/details/63687054

http://seanlook.com/2015/05/17/nginx-location-rewrite/

http://seanlook.com/2015/05/17/nginx-install-and-config/

一 简介

nginx是一个高性能的http和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。

nginx作为http服务器，有以下几项基本特征：（还有很多其他的特征，由于本文只是基础知识学习，还未体验过其他高端特征）

  1. 处理静态文件，索引文件以及自动索引
  2. 反向代理加速（无缓存），简单的负载均衡和容错。

二 基础

  1. 启动和停止命令

    启动：nginx

    关闭：nginx -s stop

    重启： nginx -s reload

  2. 配置：nginx的配置可以通过./configration命令来配置，也可以通过配置文件来配置。nginx配置文件存放在/usr/local/etc/nginx文件夹下。

  3. nginx配置文件结构

    nginx内层配置可以覆盖外层配置。

三 nginx配置具体讲解

location匹配规则

  • 以=开头表示精确匹配
  • ^~ 开头表示uri以某个常规字符串开头，不是正则匹配
  • ~ 开头表示区分大小写的正则匹配;
  • ~* 开头表示不区分大小写的正则匹配
  • / 通用匹配, 如果没有其它匹配,任何请求都会匹配到

优先级:

(location =) > (location 完整路径) > (location ^~ 路径) > (location ~,~* 正则顺序) > (location 部分起始路径) > (/)

四 rewrite规则

  1. 功能：rewrite的功能是使用nginx提供的全局变量或者自己设置的变量，结合正则表达式和标志位实现url重写和重定向。

  2. 作用范围：rewrite只能放在server{}，location{}，if{}中，并且只能对域名后边的出去参数外的字符串起作用。

    例如 http://seanlook.com/a/we/index.php?id=1&u=str 只对/a/we/index.php重写。语法`rewrite regex replacement [flag];

    如果想对域名或者参数起作用，可以使用全局变量匹配，或者使用proxy—pass作反向代理

  3. rewrite和location区别和联系

    联系：都能实现跳转

    区别：rewrite是在统一域名内更改获取资源的路径，location是对一类路径做控制访问或反向代理，可以proxy_pass到其他机器。

    很多情况rewrite也会写在location里面，他的执行顺序是：

    1. 执行server块的rewrite指令
    2. 执行location匹配
    3. 执行选定的location中的rewrite指令

  4. rewrite之flag标志位

    • last : 相当于Apache的[L]标记，表示完成rewrite

    • break : 停止执行当前虚拟主机的后续rewrite指令集

    • redirect : 返回302临时重定向，地址栏会显示跳转后的地址

    • permanent : 返回301永久重定向，地址栏会显示跳转后的地址

      因为301和302不能简单的只返回状态码，还必须有重定向的URL，这就是return指令无法返回301,302的原因了。

      理解last和break的区别：(last和break都会阻止后续erwrite指令的执行)

      last：

      ​ 重新将rewrite后的地址在server标签中执行

      break：

      ​ 将rewrite后的地址在当前location标签中执行

  5. rewrite之if指令与全局变量

    if

    语法为if(condition){...}，对给定的条件condition进行判断。如果为真，大括号内的rewrite指令将被执行，if条件(conditon)可以是如下任何内容：

    • 当表达式只是一个变量时，如果值为空或任何以0开头的字符串都会当做false
    • 直接比较变量和内容时，使用=或!=
    • ~正则表达式匹配，~*不区分大小写的匹配，!~区分大小写的不匹配

    -f和!-f用来判断是否存在文件
    -d和!-d用来判断是否存在目录
    -e和!-e用来判断是否存在文件或目录
    -x和!-x用来判断文件是否可执行

    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
    if ($http_user_agent ~ MSIE) {
        rewrite ^(.*)$ /msie/$1 break;
    } //如果UA包含"MSIE"，rewrite请求到/msid/目录下

    if ($http_cookie ~* "id=([^;]+)(?:;|$)") {
        set $id $1;
     } //如果cookie匹配正则，设置变量$id等于正则引用部分

    if ($request_method = POST) {
        return 405;
    } //如果提交方法为POST，则返回状态405（Method not allowed）。return不能返回301,302

    if ($slow) {
        limit_rate 10k;
    } //限速，$slow可以通过 set 指令设置

    if (!-f $request_filename){
        break;
        proxy_pass  http://127.0.0.1;
    } //如果请求的文件名不存在，则反向代理到localhost 。这里的break也是停止rewrite检查

    if ($args ~ post=140){
        rewrite ^ http://example.com/ permanent;
    } //如果query string中包含"post=140"，永久重定向到example.com

    location ~* \.(gif|jpg|png|swf|flv)$ {
        valid_referers none blocked www.jefflei.com www.leizhenfang.com;
        if ($invalid_referer) {
            return 404;
        } //防盗链
    }
    全局变量
    • $args ： #这个变量等于请求行中的参数，同$query_string
    • $content_length ： 请求头中的Content-length字段。
    • $content_type ： 请求头中的Content-Type字段。
    • $document_root ： 当前请求在root指令中指定的值。
    • $host ： 请求主机头字段，否则为服务器名称。
    • $http_user_agent ： 客户端agent信息
    • $http_cookie ： 客户端cookie信息
    • $limit_rate ： 这个变量可以限制连接速率。
    • $request_method ： 客户端请求的动作，通常为GET或POST。
    • $remote_addr ： 客户端的IP地址。
    • $remote_port ： 客户端的端口。
    • $remote_user ： 已经经过Auth Basic Module验证的用户名。
    • $request_filename ： 当前请求的文件路径，由root或alias指令与URI请求生成。
    • $scheme ： HTTP方法（如http，https）。
    • $server_protocol ： 请求使用的协议，通常是HTTP/1.0或HTTP/1.1。
    • $server_addr ： 服务器地址，在完成一次系统调用后可以确定这个值。
    • $server_name ： 服务器名称。
    • $server_port ： 请求到达服务器的端口号。
    • $request_uri ： 包含请求参数的原始URI，不包含主机名，如：”/foo/bar.php?arg=baz”。
    • $uri ： 不带请求参数的当前URI，$uri不包含主机名，如”/foo/bar.html”。
    • $document_uri ： 与$uri相同。

五 try_file指令可以替代rewrite

1
try_files $uri $uri/ /index.php?q=$uri&$args;

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

务必确认只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。 最后一个参数是回退URI且必须存在，否则将会出现内部500错误。

命名的location也可以使用在最后一个参数中。与rewrite指令不同，如果回退URI不是命名的location那么$args不会自动保留，如果你想保留​$args，必须明确声明。

例如：

1
2
3
4
try_files /app/cache/ $uri @fallback;
index index.php index.html;
# 它将检测$document_root/app/cache/index.php,$document_root/app/cache/index.html 和 
# $document_root$uri是否存在，如果不存在着内部重定向到 @fallback 。

需要明确的是处最后一个参数外 try_files 本身不会因为任何原因产生内部重定向。

发表于 | 分类于

一. 关于请求

  1. 减少请求数量：文件合并，css精灵，内联图片，base64
  2. 减少文件大小：压缩文件和图片（使用gzip），
  3. 减少请求所需要的时间：使用CDN，利用Connection:keep-alive特性建立持久连接（ 可以在当前连接上进行多个请求，无需再进行域名解析）
  4. 使用缓存：DNS缓存（设置TTL时间），资源缓存（关于缓存的文章：https://www.cnblogs.com/chenqf/p/6386163.html）

二. 减少渲染阻塞

  1. 把js链接写在body后面，避免js阻塞渲染

  2. 把css链接写在head里（避免页面发生闪烁），但是要减少css文件的大小。

    js和css都是会阻塞渲染的，但是为了避免已经被layout好了的dom再次被重排（从没有css变成有css）而发生的闪烁现象，我们需要将css放在head里。由于css在body前面造成了阻塞渲染，所以我们希望css文件尽量小，以免阻塞时间太久，页面空白时间太长。

三. 优化图片

  1. 懒加载
  2. 预加载

发表于 | 分类于

需求：css三栏布局，左右两边宽度固定，中间宽度自适应。

1 淘宝的双飞翼布局。关键点，三栏都是float：left；中间栏设置两层，外层向左浮动，设置宽度为100%，内层设置margin：0，-100px；左栏设置左浮动，margin：-100% ; 右栏设置左浮动，margin：-100px

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
<html>
    <body>
        <div class="col-main">
            <div class="main-wrap">dddd</div>
        </div>
        <div class="col-left"></div>
        <div class="col-right"></div>
    </body>
</html>
<style>
    .col-main {
        width: 100%;
        height: 100%;
        float: left;
    }
    .main-wrap {
        margin-left: 110px;
        margin-right: 110px;
        height: 100%;
        background: green;
    }
    .col-left {
        float: left;
        width: 100px;
        height: 100%;
        margin-left: -100%;
        background: red;
    }
    .col-right {
        float: left;
        width: 100px;
        height: 100%;
        margin-left: -100px;
        background: pink;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

2 左栏左浮动，右栏右浮动，中间栏处于文档流占满整行，通过margin为负值给两边留出距离。注意三个栏目的放置顺序：先放置浮动元素，再放置文档流元素。如果先放置文档流元素，那么浮动元素会换行，而先放置浮动元素，再放置文档流元素则不会换行。

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
<html>
    <body>
        <div class="col-left"></div>
        <div class="col-right"></div>
        <div class="col-main">
                dddd
        </div>
    </body>
</html>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .col-main {
        margin: 0 110px;
        height: 100px;
        background: green;
    }
    .col-left {
        float: left;
        width: 100px;
        height: 100px;
        background: red;
    }
    .col-right {
        float: right;
        width: 100px;
        height: 100px;
        background: pink;
    }
</style>

3 另外一种是position：absolute的定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
    <body>
        <div class="wrapper">
            <div class="col-main">
                    dddd
            </div>
            <div class="col-left">
            </div>
            <div class="col-right">
            </div>
        </div>
        
    </body>
</html>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .wrapper {
        position: relative;
    }
    .col-main {
        margin: 0 110px;
        height: 100px;
        background: green;
    }
    .col-left {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background: red;
    }
    .col-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background: pink;
    }
</style>

4 还有一种display：flex的布局

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
<html>
    <body>
        <div class="wrapper">
            <div class="col-left">
            </div>
            <div class="col-main">
                    dddd
            </div>
            <div class="col-right">
            </div>
        </div>
        
    </body>
</html>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .wrapper {
        display: flex;
        flex-wrap: nowrap;
    }
    .col-main {
        flex-grow: 1;
        margin: 0 10px;
        height: 100px;
        background: green;
    }
    .col-left {
        width: 100px;
        height: 100px;
        background: red;
    }
    .col-right {
        width: 100px;
        height: 100px;
        background: pink;
    }
</style>

发表于 | 分类于

1.单行文本溢出(部分浏览器需要加上高度)

1
2
3
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2.多行文本溢出

1
2
3
4
5
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

上面方法合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

其他浏览器解决方案：

目前没有什么CSS的属性可以直接控制多行文本的省略显示，比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了，代码可以参考下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
    position:relative;
    line-height:1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为3 */
    height:3em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}

不过这样会有一点问题：

1）需要知道显示的行数并设置行高才行；

2）IE6/7不支持after和content，需要添加一个标签来代替；

3）省略号的背景颜色跟文本背景颜色一样，并且可能会遮住部分文字，建议可以使用渐变的png背景图片代替。

3. 纯css实现容器高度随着宽度等比例变化

1）利用一个隐藏图片来实现

假如你想要容器的宽高比是4：3，那就选一个宽高比正好是4：3的图片，把这个图片放到容器里。设置图片宽度100%，高度auto，那么图片会把这个容器撑开，正好撑开到4：3。然后可以隐藏这个图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 #container {
    width: 100%;
  }
  .attr {
    background-color: #008b57;
  }
  .attr img{
    width: 100%;
    height: auto;
  }
  </style>
<div id='container'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

如果你觉得增加img标签多发了http请求，那么你可以把图片变成base64格式，由于我们的图片没有实际显示作用，我们可以大胆压缩。所以既没有http请求，还可以让图片很小。

2)可以利用css3的calc函数.(利用第二种情况来实现)

第一种情况 position:absolute

如果元素是position：absolute的话，那么百分比基准是相对他父级元素中第一个position：relative元素的宽和高为基准的。

比如position：relative元素的width为200px，height为100px

那么position：absolute元素里

1
2
width：calc(10%)  // 20px
height: calc(10%) // 10px

第二种情况 普通文档流中元素

这种情况元素的宽和高的百分比基准都是父元素的宽度。

比如一个div的父元素宽度是200px，高度是100px.

这个div设置

1
2
width：calc(10%)  // 20px
height: calc(10%) // 20px

后来自己证实得知，calc函数不区分文档流和absolute元素

加入父元素宽为200px，高为100px

1
2
3
4
width：calc(10%)  // 20px
height: calc(10%) // 10px
margin: calc(10%) // 20px
padding: calc(10%) // 20px

对于宽和margin和padding值，百分比是基于父元素的宽度

对于高，百分比是基于父元素的高度

3）使用padding-bottom实现

padding-bottom属性值百分比是按照父容器宽度来计算的，所以所以这里我们设置容器宽度为父容器的50%；padding-bottom也为50%；就都是父容器宽度的50%；显示出来就是一个完美的正方形了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>

<div id='container'>
    <div class='attr'></div>
</div>

4) 利用canvas来固定容器宽高比(4:3)

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
	<canvas width="4" height="3"></canvas>
</div>
<style>
	.container {
        width: 100%;
	}
	canvas{
        width：100%;
	}
</style>
// 利用canvas将容器撑开，并且容器宽高比就是canvas的宽高比

4. 行高

1）line-height的含义

1
2
3
4
line-height:26px; 表示行高为26个像素
line-heigt:120%;表示行高为元素本身字体大小font-size的120%(如果自身没有设置font-size，那就是父容器的font-size，因为font-size也和line-height一样也有继承)
line-height:2.6em; 表示行高为元素字体大小font-size的2.6倍
line-height:2.6;表示行高为当前字体大小的2.6倍

2）line-height的继承性

（a）带单位的行高继承的是计算值（em，%都算是单位)。

​ 如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字 体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12px，行高还是父元素的行高)

（b）不带单位的行高是直接继承（数字），比如父容器line-height：2，那么子元素line-hieght也是2。

​ 如父元素字体尺寸为14px，行高line-height:2;子元素字体为12px，不需要再定义行高，他默认的行高为24px。（例如：子元素12px，他的行高是24px,不会继承父元素的28px）

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .haorooms_bfb{font-size:14px;line-height: 150%; background: green;padding:10px}
    .haorooms_nodw{font-size:14px;line-height: 1.5; background: green;padding:10px}
    .haorooms_children{font-size:26px;background: red}
</style>

<div class="haorooms_bfb">
    <div class="haorooms_children">行高测试</div>
</div>

<br/><br/>

<div class="haorooms_nodw">
    <div class="haorooms_children">行高测试</div>
</div>
// 有百分比的haorooms_children 继承了父级元素14*1.5=21px
// 没有百分比，不带单位的是自己的1.5倍，也就是26*1.5=39px;

5.图片在容器里水平垂直居中

1
2
3
4
5
6
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; // 这个是关键点

适用场景：图片比容器小。

如果图片比容器大，则只会进行上下居中，左右不会居中。并且图片不会进行缩放，如果想要缩放，请自行设置height: 100% 或者width: 100%

6. 层叠顺序

7. 滚动加载更多

在容器元素上加’list-wrapper-for-load’类，在内容元素上加’list-content-for-load’

注意：容器元素必须固定高度，并且 设置overflow: auto或者overflow:scroll, 否则无法触发滚动事件

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
import Vue from 'vue';
const Feed = Vue.extend({
    mounted() {
        $(this.$el.parentNode)
            .find('.list-wrapper-for-load')
            .map((index, item) => {
                $(item).on('scroll', this.scrollAndLoadMore);
            });
    },
    beforeDestroy() {
        $(this.$el.parentNode)
            .find('.list-wrapper-for-load')
            .map((index, item) => {
                $(item).off('scroll', this.scrollAndLoadMore);
            });
    },
    methods: {
        scrollAndLoadMore(event) {
            const $target = $(event.target);
            const contentHeight = $target.find('.list-content-for-load').height();
            const scrollTop = $target.scrollTop();
            if (contentHeight - 200 < $(window).height() + scrollTop) {
                this.loadMore();
            }
        }
    }
});

export default Feed;

8.光标下划线跟随效果

1
2
3
4
5
6
7
<ul>
  <li> 不可思议的CSS</li>
  <li> 导航栏</li>
  <li> 光标下划线跟随</li>
  <li> PURE CSS</li>
  <li> Coco</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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
ul {
    display: flex;
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

li {
    position: relative;
    padding: 20px;
    font-size: 24px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
}

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
    z-index: -1;
}
// 重点 在于 css选择器的运用
li:hover ~ li::before {
    left: 0;
}

li:active {
    background: #000;
    color: #fff;
}

9. 页面内容不足一屏幕，footer处于窗口底部 ；页面内容超过一屏幕，footer处于页面底部。

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
<html>
<head>
    <style type="text/css">
        html,
        body {
            height: 100%;
            padding:0;
            margin: 0;
        }
        .content {
            padding-bottom: 30px;
            min-height: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .wrap:after {
            content: '暂无更多内容';
            font-size: 12px;
            color: #cacaca;
            display: block;
            text-align: center;
            margin-top: -17px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">
            内容高度不确定
        </div>
    </div>
</body>
</html>

关键点在于：虽然content里面的元素高度不确定，但是设置content的min-height为100%；在content的父元素上加一个after伪元素（其实就是加一个和content同级的兄弟元素。如果底部元素很多，不太方便用after那就直接在content后面加一个div，也是一样的 原理；如果底部元素简单，直接只用after可以让元素层级更简单）；同时让content有一个padding-bottom来给底部元素让位，底部元素设置一个margin-top为负数，这样底部元素自身就网上移动了。

10. border-radius 与overflow 问题

第一部分：问题由来：
1
2
3
<div class="wrapper">
	<div class="content"></div>
</div>
1
2
3
4
5
6
.wrapper {
  width: 100px;
  height： 100px;
  border-radius: 6px;
  overflow: hidden;
}

当外层div需要一个圆角时，需要设置overflow：hidden来遮盖里面content类的超出圆角部分的内容。

如果content类的内容很少，不需要滚动的时候上面的写法没有问题。但是当content类的内容很多，需要滚动展示的时候，设置overflow: hidden; 就会不能滚动，所以需要写成overflow: auto;

然而你会发现写成overflow: auto; 之后border-radius: 6px;就不生效了，圆角看不见了。这时候需要用到mask-image 属性。遮罩图片是一张1px的全黑图片。

最终css长这样：

1
2
3
4
5
6
7
8
.wrapper {
  width: 100px;
  height： 100px;
  border-radius: 6px;
  overflow: auto;
  // 修复border-radius不生效问题
    -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==');
}
第二部分：mask-image解析

mask-image即遮罩，就是在原始内容基础上只显示遮罩图片透明的部分（透明：没有，黑色：透明，白色：不透明，其它：介于两者之间）

具体可以看文章1文章2

发表于 | 分类于
一. 实用小技巧

(1)对小数取整

常规的对小数取整的方法有parseInt(1.2)，Math.floor(1.2), Math.ceil(-1.2), Math.round(1.6)

新学的方法：

1
2
3
4
5
6
var a = 3.2;
var b = a | 0; // b 为 3 
var a = -3.2;
var b = a | 0; // b 为 3

var c = a >> 0 // c 为 3

(2)精确到某一位小数

1
2
2.345.toFixed(2) 
99.456001.toPrecision(5)

缺点：结果会变成字符串类型

(3)两个！！可以快速转换为bool型数据

undefined, null, 0, false, NaN, ‘ ‘

这些数据前面加上!!都会转换为false

(4)~按位取反: 可以理解为取反之后再减1

1
2
3
4
5
6
var a = 'abc';
var arr = ['abc', 'aaa'];
if (~arr.indexOf(a)) {
    // 如果arr.indexOf(a) === -1 则 ~arr.indexOf(a) === 0
    alert('数组中不包含abc');
}
1
2
3
4
5
6
var a = 1, b = -1, c = 0, d = 3, e = -3;
~a // -2
~b // 0
~c // -1
~d // -4
~e // 2
二. 常用工具函数

1.以下JS函数用于获取url参数:

1
2
3
4
5
6
7
8
9
10
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

使用:

1
2
3
url实例：http://www.runoob.com/index.php?id=1&image=awesome.jpg
调用 getQueryVariable("id") 返回 1。
调用 getQueryVariable("image") 返回 "awesome.jpg"。

  1. 简易版节流函数：前面的如果没有结束，本次绑定就不生效。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function throttle (delay, action) {
        var last = 0;
        return function () {
            var current = +new Date();
            if (current - last > delay) {
                // action.apply(this, arguments);
                action(arguments);
                last = current;
            }
        }
    }

  2. 简易版防抖函数：让前面的绑定失效，从这次开始计时。

1
2
3
4
5
6
7
8
9
10
function debounce (idle, action) {
    var last;
    return function () {
        var ctx = this, arg = arguments;
        clearTimeout(last);
        last = setTimeout(function () {
            action.apply(ctx, arg);
        }, idle);
    }
}

发表于 | 分类于

require的加载顺序

源码

总体流程：

一：首先解析文件名字：（如果是核心模块名字，则直接返回，如果不是，则进行下面流程）

  1. 先从缓存中读取，如果没有则继续往下

  2. 判断模块路径是否是以“/”结尾，如果不是，则要判断：

    a. 检查是否是一个文件，如果是，则转换为真实路径

    b. 否则如果是一个目录，则调用tryPackage方法读取该目录下的package.json文件，把里面的main属性设置为filename。

    c. 如果没有读到路径上的文件，则通过tryExtension方法尝试在该路径后依次加上.js, .json和.node后缀，判断是否存在，若存在则返回加上后缀后的路径。

  3. 如果依然不存在，则同样调用tryPackage方法读取该目录下的package.json文件，把里面的main属性设置为filename

  4. 如果依然不存在，则尝试在该路径后依次加上index.js，index.json和index.node，判断是否存在，若存在则返回拼接后的路径

  5. 若解析成功，则把解析得到的文件名cache起来，下次require就不用再次解析了，否则若解析失败，则返回false

二：通过文件名字加载模块

1.如果是文件名字对应的模块在缓存中，则直接从缓存读取。

2.否则通过文件名新建模块并加载模块，并且将模块进行缓存。

发表于 | 分类于

需求: 用户输入’< img>’,将’< img>’ 显示在页面上(用户输入什么就显示什么)

如果我们直接将’< img>’ 作为html输出，那么浏览器会将其解析为一张图片，然后显示一张图片。

解决方案：对用户输入进行转义，可以是后端转，也可以是前端转。

方法一：后端转义

后端给前端传过来的是

1
&lt; img &gt;

这时候我们直接将后端传过来的数据作为html内容输出即可。假设这个返回字段是text。

如果是vue开发，可以使用
1
2
3
4
5
6

###### 如果是underscore模版，可以使用<%= text %>

##### 方法二：前端转义

后端给前端传过来的是


```

这时候我们不能直接将后端传过来的数据作为html内容输出，否则浏览器会将其解析为一张图片。需要在前端进行一次转义。

如果是vue开发，可以使用
如果是underscore，可以使用<%- text %>

总结

对于用户的输入，我们必须要进行转义，否则容易造成xss攻击。

前后端中有一端进行转义了，另一端就不能转义了，否则会达到没转义的效果。

发表于 | 分类于

一：概念解析

https://www.zhihu.com/question/20997688

1.视频文件格式 (简称文件格式):

我们知道在windows里文件都有后缀名，如1.doc，2.wps，3.psd等等。windows设置这些后缀名的目的是让系统中的应用程序来识别并关联这些文件，让相应的文件由相应的应用程序打开。所以常见的文件格式如1.avi，2.mpg这些叫做视频的文件格式，它由你电脑上安装的视频播放器关联。你可以随意改变扩展名，但是对真的视频一点影响都没有，不要以为把avi后缀改成mp4，视频就变成mp4格式了。

2.视频封装格式 （简称视频格式）

avi，mpeg，vob是一种视频封装格式，相当于一种存储视频信息的容器。它是由相应的公司开发出来的。我们可以在自己电脑上看到1.avi，2.mpg，3.vob这些视频文件格式的后缀名即采用相应的视频封装格式的名称。视频文件格式反映了视频封装格式。

3.视频编码方式 （简称视频编码）

所谓的视频编码方式就是指能够对数字视频进行压缩或者解压缩（视频解码）的程序或者设备，通常这种压缩属于有损压缩。也可以指通过特定的压缩技术，将某个视频格式转换成另一种视频格式。

常见的编码方式有：

1. H.26X系列：H.261, H.263, H.264, H.265 ……
2. MPEG系列：MPEG-1，MPEG-2 ，MPEG-4第二部分， MPEG-4第十部分……
3. 其他系列：AMV，AVS，DV……

总之，即使同一种视频文件格式，如*.MPG，又分为MPEG-1，MPEG-2，MPEG-4几种不同的视频封装格式。就算是同一种视频封装格式，如MPEG-4又可以使用多种视频编码方式。视频的编码形式才是一个视频文件的本质所在，不要简单通过文件格式和封装形式来区分视频。

mp4,rmvb,mkv,avi从形式上来说首先都是视频文件的扩展名，其次它们也是视频文件的封装格式（即容器）

mp4是MPEG-4标准的第14部分所制定的容器标准。所谓容器，就是把编码器生成的多媒体内容（视频，音频，字幕，章节信息等）混合封装在一起的标准。容器使得不同多媒体内容同步播放变得很简单，而容器的另一个作用就是为多媒体内容提供索引，也就是说如果没有容器存在的话一部影片你只能从一开始看到最后，不能拖动进度条（当然这种情况下有的播放器会话比较长的时间临时创建索引），而且如果你不自己去手动另外载入音频就没有声音。

关于容器的一个例子是aac/m4a”格式“的音频（这两是一回事，m4a是苹果”发明”的扩展名），这种音频采用的是AAC编码，但实际上也是被封装在MPEG4P14（即mp4）容器里的，因为没有容器的原始AAC数据流是没有索引的，不方便播放器定位。

不同的容器有不同的特性，mp4是官方指定的容器，属于”太子党“，硬件支持广泛；rmvb是一种封闭标准的容器，只能用来封装realvideo编码的视频；mkv是社区设计的开放性容器，最大的特性在于几乎可以封装一切的编码格式；avi历史悠久，其陈旧的架构本身已经不能适应新的编码格式，可以入土了。

流式封装可以有TS、FLV，索引式的封装有MP4等。TS/FLV/MP4等是封装格式。h.264/rm/rmvb等是视频协议，aac/mp3等是音频协议。