js 跳出 forEach 循环

其实就是在 forEach 中实现了 continue 的功能
现在有一个二重循环

1
2
3
4
5
6
7
8
9

routeMsg.forEach((bigItem, index) => {
  route.forEach(item  => {
    if (parseInt(bigItem.id) ===  parseInt(item.id)) {
      status[index] =  1
    } else {
      status[index] =  0
    }
  }) 
})

需求要在外层的 item.id === 内层的 item.id 时 status[index] = 1
但是如果在 status[index] = 1 时不跳出循环的话，在下一次内层循环时，会执行 status[index] = 0，因为此时 index 是不会变的，所以就覆盖了上一次置 1 的数据.

JavaScript 中跳出 for 循环用的是 break， 但是 Array.forEach 却没有可以直接跳出循环的语句，需要在 forEach 外加上一层 try/catch， 然后在需要跳出循环的地方写 throw (new Error('continue'))，这样代码就会跳出内层循环，外层循环的 index 也就会+1

代码如下:

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

routeMsg.forEach((bigItem, index) => {
  try {
    route.forEach(item  => {
      if (parseInt(bigItem.id) ===  parseInt(item.id)) {
        status[index] =  1
        throw (new Error('continue'))
      } else {
        status[index] =  0
      }
    }) 
  } catch (err){
  }
})

Vue通过索引修改数组值

最近在写通过 data.slide 数组动态生成列表的时候遇到了一个问题:

1
2
3
4
5
6
7
8

<div class="title-level-one"  v-for="(item, index) of slide" :key="index" @click="slideClick(index)">
    {{item.name}}
    <div  v-show="arr[index]">
    <div  class="title-level-two"  v-for="(subtitle, index2) of item.data" :key="index2">
        {{subtitle}}
    </div>
  </div>
</div>

这样写没有问题，的确会根据 slide 和 slide.data 的数组去生成对应数量的列表.但是此时我想对列表做一个隐藏和显示 CSS 时， 遇到了问题:

1
2
3
4
5
6
7
8

slideClick (index) {
  this.arr[index] = !this.arr[index])
  console.log(`arr`, this.arr)
  }
},
created: function () {
  this.arr  =  Array(this.slide.length).fill(false)
}

v-model

在很多的 v-function 里有一个很特别，就是 v-model， 他就专门用于表单< input>和< textarea元素上创建双向绑定的.

每个表单绑定了 v-model 以后，vue 就会根据表单的特性去执行一些提交或者传值:

• input textarea v-model=‘message’ 这样{{message}}就会等于 input 输入框的值
• CheckBox ->v-model= ‘checked’ 这样{{checked}}就是这个单选框是否被选
• CheckBox ->v-model= ‘checkName’ 这样每选一个 Check就会把 value push到{{checkName}}中
• radio -> v-model=‘picked’ 和 CheckBox 很像，不过不是 push 是赋值=
• select -> v-model=‘selected’， {{selected}} 等于<option>的值

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值), 也就是设置一个默认值

Vue v-event

v-once

绑定属性，一旦生效，属性固定不再变

v-html

绑定值为 HTML 代码

CSS 选择器及优先级

其实，CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。

一、选择器类型

1. ID———#id
2. class——.class
3. 标签——-p
4. 通用——-*
5. 属性——-[type=”text”]
6. 伪类——-：hover
7. 伪元素—–::first-line
8. 子选择器、相邻选择器

二、优先级计算

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。

三、优先级规则

1. 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
2. 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
3. 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
4. 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

四、！important

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

1
2
3
4

<style> p{
        color:red !important;
    } </style>
<p style="color:blue;">我显示红色</p>

五、实例

1
2
3
4
5
6
7

a{color: yellow;} /*特殊性值：0,0,0,1*/
 div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
 .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
 .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
 #demo a{color: orange;} /*特殊性值：0,1,0,1*/
 div#demo a{color: red;} /*特殊性值：0,1,0,2*/

1
2
3
4
5
6
7
8

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>

获取客户端 IP地址

1
2
3
4
5
6

function getClientIp(req) {
        return req.headers['x-forwarded-for'] ||
        req.connection.remoteAddress ||
        req.socket.remoteAddress ||
        req.connection.socket.remoteAddress;
    };

代码第一段判断是否有反向代理IP(头信息：x-forwarded-for)，在判断connection的远程IP，以及后端的socket的IP。

盒模型

盒模型就是 margin border padding content

因为存在 margin,border和padding,元素可能会变得和预想的不一样大小,在 CSS 中加入以下代码能避免这样的事

1
2
3
4
5

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

使用* 通配符选择器,选择所有元素,加上 border-box,元素就会变得以设置的长度会显示标准, margin会在 width 之外, border 和padding 会在 width 以内

position

Flexbox 布局有2个关键的概念

• Flex容器（Flex Container） ：父元素显式设置了 display:flex
• Flex项目（Flex Items） ：Flex容器内的子元素

使用 Flexbox 布局,容器尽量不要设置固定的 width, 可以设置为 auto
在 Flexbox中将方向分为水平的主轴和竖直的侧轴

其中Flex容器有以下参数:

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

HTML –onmouseover和onmouseout的坑

一个DIV层，当鼠标移进的时候会触发onmouseover，移出的时候会触发onmouseout。

很简单的逻辑，这也是我们想要的！但随之烦恼也就来了：onmouseover并不会只在移进时才触发，onmouseout也不会只在移出时才触发！鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。

在上图中，对于’A’来说：当鼠标进入’A’(路径’1′)时那么就会触发’A’的onmouseover事件；接着鼠标移动到’B’(路径’2′)，此时’A’会触发onmouseout(先)和onmouseover(后)事件。

由此可见，如果HTML元素(‘A’层)内还有其他元素(‘B’,’C’层)，当我们移动到这些内部的元素时就会触发最外层(‘A’层)的onmouseout和onmouseover事件。

这两个事件的触发表现真的就是你想要的吗？也许你需要一个只在移进时才触发的，一个只在移出时才触发的事件，不管其内部是否还有其他元素….

解决方案:

使用onmouseenter 和 onmouseleave代替onmouseover和onmouseout

Koa2做文件下载服务器

使用 koa-send模块,其核心代码为

1
2
3
4
5

const send = require('koa-send');

app.use(async (ctx) => {
  await send(ctx, ctx.path, { root: __dirname + '/public' });
})

值得一提的是send()方法的第三个参数{root: __dirname + ‘dir’}是必填的,如果不填这个参数,在 path 中填路径,会出现”forbidden”的 error 报错.

koa-send 第三个参数的其他可选项如下

• maxage Browser cache max-age in milliseconds. (defaults to 0)
• immutable Tell the browser the resource is immutable and can be cached indefinitely. (defaults to false)
• hidden Allow transfer of hidden files. (defaults to false)
• root Root directory to restrict file access.
• index Name of the index file to serve automatically when visiting the root location. (defaults to none)
• gzip Try to serve the gzipped version of a file automatically when gzip is supported by a client and if the requested file with .gz extension exists. (defaults to true).
• brotli Try to serve the brotli version of a file automatically when brotli is supported by a client and if the requested file with .br extension exists. (defaults to true).
• format If not false (defaults to true), format the path to serve static file servers and not require a trailing slash for directories, so that you can do both /directory and /directory/.
• setHeaders Function to set custom headers on response.
• extensions Try to match extensions from passed array to search for file when no extension is sufficed in URL. First found is served. (defaults to false)

参考资料: segmentfault