一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 7 | Spark1e的个人博客

平时使用时最常见的用法：
```html
<meta charset="UTF-8" />
```

但是通过meta我们可以实现很多特别的功能。

#### meta是什么

>The <meta /> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

换句话来说，就是页面里对用户不可见，但是可供浏览器解析的页面信息。

#### meta的类型

##### http-equiv

这一类使用格式为`<meta http-equiv="参数" content="具体的描述">`

- content-Type
可以设置html的字符集和格式，但是被`<meta charset="utf-8">`取代

- X-UA-Compatible
设置浏览器渲染模式，一般采取最新的：
```html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
```

- cache-control
设置浏览器缓存，一般设置为`<meta http-equiv="cache-control" content="no-cache">`
可设置为以下属性：
	- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
	- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
	- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
	- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
	- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
    - no-siteapp: 禁止百度默认的移动端转码。
    
- expires
设置网页过期时间，超时需要重新从服务器获取。
```html
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
```

- refresh
网页将在设定的时间内，自动刷新并调向设定的网址。
```html
<meta http-equiv="refresh" content="2;URL=https://blog.sparkinglemon.me" />
```
设置为2s后自动转向到网址

- Set-Cookie
配置页面cookie

##### name
name属性的配置格式
```html
<meta name="参数" content="具体的描述" />
```

- keywords
设置页面关键词，SEO收录常用

- description
页面描述，SEO常用

- viewport
__移动端__ 设置视口。后续会在移动端适配详细补充。

- robots
告知爬虫具体需要爬取的页面，默认是all ，可以设置none，noindex（非本页），nofollow（通过本页索引其他页）

- author
页面作者，不常用

- generator
页面制作于

- copyright
页面版权信息

- revisit-after
设置爬虫重访时间


> 部分内容参考了 [Lxxyx-“HTML meta标签总结与属性使用介绍”](https://segmentfault.com/a/1190000004279791)

meta标签的使用

### 起因

目前需要做一个 SDK，挂载到全局完成一些标记的时间，因此需要借助`document.body.addEventListener`的方式，那么废话不多说，一把 suo

```javascript
document.body.addEventListener('click', function(e) {
  console.log('成功触发:' + e.target)
})
```

正当我觉得这一切没什么问题的时候，测试发现了 Bug

| iOS 设备不能正常的触发啊

这种情况只能回头看代码了，这里有如下代码

```html
<p data-xxx="test"></p>
```

通过上面的事件监听，我发现 iOS 设备压根没有成功的添加到这个节点，那么是什么问题呢？

### Bug or Feature?

经过一系列尝试我发现， **位于 body 的事件是无法在捕获/冒泡阶段在 iOS 设备触发事件** , 这就触及到知识盲区了，赶紧翻阅相关网站查找资料

### Fix

经过查阅，以下方法可以修复这个问题：

- onclick
- `<a href="javascript:void(0);">`
- `cursor: pointer;` body 或者对应元素
- `<button>`
- `click` -> `touchstart`

以上方案来讲，样式最清晰，改动最小，touchstart 方案也是比较容易实现的，但需要注意 touchend

移动端iOS特殊的点击事件

#### 五种基础类型（ES5后6种）
- number
- string
- boolean
- undefined
- null
- Symbol

对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。

#### 类型判断
- typeof 返回值
- instanceof 操作符
- Object.prototype.toString获取 `[[class]]`(准确)

#### 关于函数
函数声明 function foo(){}
函数表达式 var foo = function () {}
##### 区别
- 函数声明会在任何表达式被解析和求值之前先被解析和求值，即使你的声明在代码的最后一行，它也会在同作用域内第一个表达式之前被解析/求值
- 函数声明在条件语句内虽然可以用，但是没有被标准化，也就是说不同的环境可能有不同的执行结果，所以这样情况下，最好使用函数表达式
```javascript
var getName//变量被提升，此时为undefined

getName()//oaoafly 函数被提升 这里受函数声明的影响，虽然函数声明在最后可以被提升到最前面了
var getName = function() {
	console.log('wscat')
}//函数表达式此时才开始覆盖函数声明的定义
getName()//wscat
function getName() {
	console.log('oaoafly')
}
getName()//wscat 这里就执行了函数表达式的值
```

#### 函数优化
如果我们的代码中返回多个闭包的情况，如果没有手动设置null的话，内存不会被自动释放。

#### 立即执行函数 & 匿名函数
在一个表达式后面加上括号()，该表达式会立即执行, 但是在一个语句后面加上括号()，是完全不一样的意思，他的只是分组操作符。

#### 闭包
首先了解一个JavaScript变量的作用域,
无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。但是通过闭包，可以在函数外面访问到内部的变量！比如:
```javascript
function f1(){
　　var n=999;
　　function f2(){
　　　　alert(n); // 999
　　}
}
```

#### 事件监听
这两种方式确定了事件执行的前后顺序，只不过后来W3C对DOM2的事件模型给出了一个规范
[http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/]：首先进入事件捕获阶段->达到元素后->进入事件冒泡阶段。

#### 原型继承
在Javascript中，每个函数都有一个原型属性prototype指向函数自身的原型，而由这个函数创建的对象也有一个`__proto__`
属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个`__proto__`指向自己的原型，这样逐层深入直到Object对象的原型(null)，这样就形成了原型链。

#### This
除了DOM的事件回调或者提供了执行上下文（后面会提到）的情况，函数正常被调用（不带new）时，里面的this指向的是全局作用域。
还有个例外，就是使用了`"use strict";`。此时this是`undefined`。
当用调用函数时使用了new关键字，此刻this指代一个新的上下文，不再指向全局this。
注意原型链底层函数中对`this`的操作会覆盖上层的值。
解决方法就是传递的时候使用`bind`方法显示指明上下文，`bind`方法是所有函数或方法都具有的。同时也可以使用`apply`或`call`
来调用该方法或函数，让它在一个新的上下文中执行。
在DOM事件的处理函数中，this指代的是被绑定该事件的DOM元素。除非你通过`bind`人为改变了事件处理器的执行上下文。

#### 对象
我们说的通过引用进行对象比较是:两个对象的值是否相同取决于它们是否指向相同的底层对象。

Javascript 基础知识点总结

Refer from: [https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color]()

```javascript
console.log('\x1b[36m%s\x1b[0m', 'I am cyan') //cyan
console.log('\x1b[33m%s\x1b[0m', stringToMakeYellow) //yellow
```

通过配置 log，达到实现不同颜色的目的，下面是一些常用的颜色

```javascript
Reset = '\x1b[0m'
Bright = '\x1b[1m'
Dim = '\x1b[2m'
Underscore = '\x1b[4m'
Blink = '\x1b[5m'
Reverse = '\x1b[7m'
Hidden = '\x1b[8m'

FgBlack = '\x1b[30m'
FgRed = '\x1b[31m'
FgGreen = '\x1b[32m'
FgYellow = '\x1b[33m'
FgBlue = '\x1b[34m'
FgMagenta = '\x1b[35m'
FgCyan = '\x1b[36m'
FgWhite = '\x1b[37m'

BgBlack = '\x1b[40m'
BgRed = '\x1b[41m'
BgGreen = '\x1b[42m'
BgYellow = '\x1b[43m'
BgBlue = '\x1b[44m'
BgMagenta = '\x1b[45m'
BgCyan = '\x1b[46m'
BgWhite = '\x1b[47m'
```

addons: 在可以引用其他库的环境中，也可以使用`inquirer`，能够完成大部分情况比如：

- 错误回显
- “提问”模式
- 输入格式化
- 回答校验
- 管理多重选项

用法详见[npm](https://www.npmjs.com/package/inquirer)

Node.js环境log颜色表

### 何为语义化？

> 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

做一个比较而言，Markdown导出的html结构就是符合大部分语义化的做法，即便在没有样式时，通过浏览器基础的样式和解析，整个页面仍保持构想的文档结构，能够维持较为清晰的页面结构，对我而言，就需要注意标签的使用。

### 语义化常使用的标签

##### meta信息
- title
  `title`标签指定了文档对外的标题，建议一般显示为 *窗口标题 / 历史记录 / 搜索结果标题 / ...*
- lang
  `lang`指定了内容的语言
- meta
  `meta`元素中，name决定了文档种类，content表示内容，标准情况下应包括`application-name, author, description, generator, keywords`
  
###### 链接
- link
  `link`元素必须包括rel和href属性，用来描述文档本身与其他资源的关系
- a
  `a`元素在存在href时为超链接，无href为链接占位符，可以添加rel属性使其兼容浏览器的阅读模式（如rel="prev"显示为分页器）

##### 区块
- article
  `article`标签可以用于独立的文档、页面等，可以单独发布、重用等内容
- section 
  `section`一般是按主题将内容分组，通常会有标题，但本身并非语义化的div，它通常用于将内容体现在文档等提纲中
- nav
  `nav`是一个包含导航链接等自然节，它可以帮助UA快速获得导航内容，其内部不一定使用ul，也可使用自然文本
- aside
  `aside`也是块级元素，它通常表示与周围内容关系不大密切等内容，可以用来做侧边栏等容器等
- h1-h6
  标题元素日常常用，需要注意覆盖浏览器默认样式
- header/footer
  `header`
  `footer`元素与header类似，代表最近的父级区块内容的页脚，同样不影响文档提纲

##### 内容分组
- p
  段落是主题接近的若干句子组成等文本块，如果段落没有特指，考虑使用p
- ol/ul/li
  需要注意，列表有序和无序在默认表现下不同，ol内的li可以设置value代表该列表项的序号值
- dl/dt/dd
  MDN对此元素的定义是：*一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。*
  因此最好能够使用在能够体现键值对的情况
- figure&figcaption
  `figure`元素是比较独立的，被主要引用的图片、插图、照片代码等，一般会有一个标题，即`figcaption`
- div
  最常用也是最滥用的元素，其本身无语义，可以和类名、id、title等结合，但是是最后考虑的选择。
  *尤其是涉及dom操作时，通过类名选择div需要遍历整个页面所有的div，性能上也会大量损耗*

##### 文本
- em/strong
  一般表示侧重点的强调，会因嵌套层数改变强调级别，一般渲染为斜体
- i
  可作为画外音等等杂项，建议与class、lang一同使用
- small
  不止作为小字使用，可以作为注意或声明使用
- cite
  作为引述的作品标题、文章论文等标题
- mark
  不常用，但可以作为与用户当前的行为相关的内容，如高亮显示搜索关键词

##### 嵌入内容
- img
  `img`要注意src和alt的使用，其中：
  - 有 src 且 alt 为空字符串，代表装饰用图
  - 有 src 且 alt 为非空字符串，图为文档内容的一部分
  - 有 src 且无 alt，图为内容一部分但无等价的文本内容可用

养成好习惯 - HTML语义化

目前对于文本溢出是通过
```CSS
/* 单行 */
text-overflow:ellipse;
/* 多行 */
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
```

但这两种方法仅限于截断后在末尾添加省略号，如果有类似这样的需求，既不是纯色背景，又不能使用渐变的时候，就不容易计算末尾处如何控制溢出

这里引用[大神hi](http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html)的解决方法，仅使用css解决这个问题，本文使用 _Vue + Stylus_ 完成这个方案

首先分析这个组件应该具备的扩展性，它应该可以定制最大行数、行高，也需要规定更多部分的宽度大小，同时应该提供内容以及更多的html片段[插槽](https://cn.vuejs.org/v2/guide/components-slots.html#ad)(不清楚的同学请猛戳左侧链接~)，这里我先定义它的props:
```javascript
export default {
  name : 'mutiLinesEllipsis',
  props: {
    lineHeight : {
      type : Number
    },
    maxLines : {
      type : Number
    },
    fontSize : {
      type : Number
    },
    moreTextSize : {
      type : Number
    }
  }
}
```
那么有了以上的几个属性，我们开始组织我们的html结构

### 盒子结构以及原理
如图所示，这里利用了一个块元素检测左侧高度与整体高度，当文本超出时，整个内部高度被撑开，使得“更多”块有空间移动到左侧。

```html
<div class="mutiple-line" :style="{'max-height':lineHeight*maxLines + 'px' , 'line-height':lineHeight+'px'}">
  <div class="ellipsis-container" :style="{'-webkit-line-clamp':maxLines , 'font-size':moreTextSize + 'px'}">
    <div class="ellipsis-content" :style="{'font-size':fontSize + 'px'}"><slot></slot></div>
    <div class="ellipsis-ghost">
      <div class="ellipsis-placeholder" :style="{'height' : lineHeight*maxLines + 'px'}"></div>
      <div class="ellipsis-more" :style="{'font-size':fontSize+'px', 'width':moreTextSize+'px', 'height':lineHeight+'px', 'margin-top':'-'+lineHeight+'px'}">
        <slot name="more-link"></slot>
      </div>
    </div>
  </div>
</div>
```

```css
// 基本的多行容器样式
.mutiple-line 
  position: relative;
  overflow: hidden;
  width 100%
  .ellipsis-container   
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: transparent;
  .ellipsis-content 
    color: #000;
    display: inline;
    vertical-align: top;
  .ellipsis-ghost 
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
  .ellipsis-ghost:before
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
  .ellipsis-placeholder 
    content: "";
    display: block;
    float: right;
    width: 50%;
  .ellipsis-more 
    position: relative;
    float: right;
```

利用Vue响应式的特点，如果这里需要做媒体查询等操作也是可以的，只需要改变传入参数即可，通用于任何Webkit内核浏览器(毕竟还是要依赖`-webkit-line-clamp`属性)

利用CSS写一个可高度自定义的多行文本自动省略Vue组件

## 较大的数组
对于较大的数组处理首先考虑两个问题，第一个要使用原生的for循环，即：
```javascript
for(j = 0,len=arr.length; j < len; j++) {
   
}
```
缓存了数组长度后能够有效提高运行效率，同时原生的性能最好
附：
对于较大数组的遍历运行效率比较
![10000长度数组的运行效率](https://cdn.arc-light.fun/F_f4Jx/demo_js_performanceAnalysis_jsarrayGoThrough_1.png)

第二个要注意的就是如果可以使用二分法，那么二分后会提高效率，举例说明
一个Vue的表单中存在带筛选的Boolean值A，那么在数据加载好之后我们可以在`mounted()`周期中添加一个方法，将所有`A===true`的放入数组中，其他的放入另外一个实现二分

## 快速筛选对象
可以使用ES6的filter方法，过滤掉不符合条件的元素，举例说明：
```javascript
const origin = [
  {
    A: "joasdjfoijas",
    B: "oasdjfojoadsjf",
  },
  {
    A: "joasdjfoijaafdafasfs",
    B: "oasdjfojoadsjfdasfasdf",
  },
  {
    A: "111",
    B: "Joe",
  },
]

let result = origin.filter(function(value){
  return value.A === "111"&&value.B === "Joe"
})

console.log(result)
```
通过Array的filter方法用回调的方式一次比较多个值是否匹配，避免多次遍历

利用`filter`和`map`组合可以大量过滤需要的元素并输出所需要的值，例如：
```javascript
var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有条件的筛选，返回条件为true的数组
// 筛选出性别为男性的名字集合
var newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]

// 作者：付出
// 链接：https://juejin.im/post/5a5f3eaf518825733201a6a7
```
避免了老式的for+continue，也提高了代码的可读性

在一个较大的对象数组里查询指定的对象

### 为什么要通过指令实现？

参考`lodash/_`，和`underscore`库，节流和防抖均是通过高阶函数的形式实现的，这种方式需要手动绑定`this`，对于 Vue 的单组件文件来说，在`methods`外层使用会导致`this`的指向不清，直接指向`window`的情况，举例：

```javascript
methods: {
  doSomethings () {
    console.log('log')
  }
},
mounted () {
  document.querySelector('.test').addEventListener('click', function() {
    _.throttle(this.doSomethings, 200)
  }) // 无法正常触发，此写法报错非函数，箭头函数则完全没有触发内部函数
}
```

```javascript
methods: {
  doSomethings: _.throttle(function() {
    console.log('log') // 可以正常节流，这里this的指向是该组件
  })
}
```

虽然第二种方法正确实现了节流，但是这种写法不方便进行组合合并，如果触发的函数有不同的情况，在内部的函数需要多层嵌套或者传参，举例：

```vue
<template>
  <div id="app">
    olas
    <span @click="test(1)">1111</span>
    <span @click="test(2)">2222</span>
    <span @click="test(3)">3333</span>
    <span @click="test(4)">4444</span>
  </div>
</template>
<script>
methods: {
  test: function(i) {
  	console.log(i)
  },
	doSomething:_.throttle(function(i) {
    this.test(i)
  }, 2000)
	},
	mounted () {

	}
</script>
```

这种情况下无法实现参数值的传递，需要借助 data，并不是比较好的选择，因此采用自定义指令的方式

### 这种实现有什么不足？

最大的一点不足就是 **SSR**

需要通过判断`window`或者提供一个服务端专用版本来避免获取 dom，但是需要节流/防抖的一般都是在客户端的用户交互事件，往往不需要提供服务端版本，因此我这里采用`window`判断的方式，只在客户端挂载监听事件

通过自定义指令，代理 v-on 直接挂载的方式，需要传入较多的参数

### 防抖实现

参数：

- `func`: methods 内的函数名;
- `args`: 向该方法传递的参数，形式为数组;
- `opt` : 防抖选项，包含 seconds 和 immediate

```javascript
Vue.directive('debounce', {
  inserted: function(el, binding) {
    const event = binding.arg
    const funcArgs = binding.value.args || []
    const options = binding.value.opt || {}
    const wait = options.seconds || 300
    if (typeof window !== 'undefined') {
      let timer = null
      el.addEventListener(event, e => {
        if (timer) {
          clearTimeout(timer)
        }
        if (options.immediate) {
          let callNow = !timer
          if (callNow) {
            binding.value.func.apply(this, funcArgs)
          }
          timer = setTimeout(() => {
            timer = null
          }, wait)
        } else {
          timer = setTimeout(() => {
            timer = null
            binding.value.func.apply(this, funcArgs)
          }, wait)
        }
      })
    }
  }
})
```

### 节流实现

参数：

- `func`: methods 内的函数名;
- `args`: 向该方法传递的参数，形式为数组;
- `opt` : 防抖选项，包含 seconds 和 leading(未实现),trailing(未实现)

```javascript
Vue.directive('throttle', {
  inserted: function(el, binding) {
    const event = binding.arg
    const funcArgs = binding.value.args || []
    const options = binding.value.opt || {}
    const wait = options.seconds || 300
    if (typeof window !== 'undefined') {
      let previous = 0
      el.addEventListener(event, e => {
        if (!previous) {
          previous = new Date()
          binding.value.func.apply(this, funcArgs)
        } else {
          let now = new Date()
          if (now - previous > wait) {
            previous = now
            binding.value.func.apply(this, funcArgs)
          }
        }
      })
    }
  }
})
```

Spark1e

Category: frontend