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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

### 何为语义化？

> 语义化的含义就是用正确的标签做正确的事情，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

养成好习惯 - HTML语义化

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

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

Vue使用自定义指令完成节流和防抖