bitqiang/fee-skills

整理前端博客好文，以及自己的博客

fee-skills's Issues

JavaScript数据结构--链表

链表是一种数据结构。

实现一个单项链表

// 链表单个节点
class Node {
  constructor (value) {
    this.value = value
    this.next = null
  }
}

实现一个链表的

append 添加节点方法

removeAt 删除指定位置节点

insert 指定位置插入

indexOf 查找是否包含

remove 删除指定节点

size 返回链表代下

isEmpty 判断是否为空

初始化方法如下

class LinkedList {
  constructor (value = null) {
    this.head = null
    this.length = 0
    if (value) {
      this.head = new Node(value)
      this.length = 1
    }
  }
  append (value) {}
  removeAt (position) {}
  insert (position, value) {}
  indexOf (value, start = 0) {}
  remove (value, start = 0) {}
  size () {}
  isEmpty () {}
}

完整代码

// 链表单个节点
class Node {
  constructor (value) {
    this.value = value
    this.next = null
  }
}

class LinkedList {
  constructor (value = null) {
    this.head = null
    this.length = 0
    if (value) {
      this.head = new Node(value)
      this.length = 1
    }
  }
  
  append (value) {
    const node = new Node(value)
    
    // 如果head为null 说明链表没有数据，直接添加到头部
    if (this.head === null) {
      this.head = node
    } else {
      let current = this.head
      
      // 循环最next为false说明next为null，则把当前节点添加到链表尾部
      while (current.next) {
        current = current.next
      }
      current.next = node
    }
    this.length += 1
  }
  
  removeAt (position) {
    
    // 判断移除的节点是否在 链表内
    if (position >= this.length || position < 0) {
      return null
    }
    
    let current = this.head
    
    // 如果为0，则直接将 head 设置为 head.next
    if (position === 0) {
      this.head = current.next
    } else {
      let index = 0
      let prev = null
      
      // 循环 找到需要删除position的节点，将其上一个节点的next 设置为当前的节点
      while (index < position) {
        prev = current
        current = current.next
        index += 1
      }
      prev.next = current.next
    }
    
    this.length -= 1
    return current.next
  }
  
  insert (position, value) {
    if (position >= this.length || position < 0) {
      return false
    }
    
    const node = new Node(value)
    
    // 节点在头部则 直接将节点next指向this.head。然后将head的指针指向新节点
    if (position === 0) {
      node.next = this.head
      this.head = node
    } else {
      let index = 0
      let current = this.head
      let prev = null
      
      // 遍历循环找节点添加进入
      while (index < position) {
        prev = current
        current = current.next
        index += 1
      }
      node.next = current
      prev.next = node
    }
    this.length += 1
    return true
  }
  
  indexOf (value, start = 0) {
    if (start > this.length) {
      return false
    }
    
    let index = 0
    let current = this.head
    
    while (index < this.length) {
      if (current.value === value && start <= index) {
        return index
      }
      current = current.next
      index += 1
    }
    return -1
  }
  
  remove (value, start = 0) {
    const index = this.indexOf(value, start)
    return this.removeAt(index)
  }
  
  size () {
    return this.length
  }
  
  isEmpty () {
    return !!this.length
  }
}

let test = new LinkedList('a')
test.append('b')
test.append('c')
test.removeAt('1')
test.insert(1, 'e')
let e = test.indexOf('e')
console.log('e', e)
console.log('test', test)

HTTPS之证书相关

前言

随着互联网的快速发展，网络安全逐渐成为大家所关注的点，对于网页的安全更是需要注意的地方，互联网应用安全主要包含两部分

• HTTP本身的安全问题
• web应用的安全问题

http常见安全问题-中间人攻击

• 连接wifi网络，提供wifi网络的攻击者可以获取所有的http流量，而http流量本身是明文的，攻击者可以直接看到用户的密码等敏感信息。
• 垃圾广告攻击，用户访问一些网页的时候，发现页面偶尔会弹出广告，而广告跟网页根本没有关系，主要是isp发动是一个攻击。由于我们访问的网页，总是会经过ISP，ISP为了一些目的，就可以在响应中插入一段HTML，就导致了该攻击的产生。这种攻击还算是轻的，万一插入了一个恶意的JavaScript就影响更大了，如xss攻击。

协议不安全的根本原因

• 数据没有加密
• 无法校验身份 TCP能确保双方正确地通信，但是在客户端和服务器不能确认对面的身份，对于服务器来说，只要它接受的http请求格式正确，就能发送响应信息，对于客户端来说，他可能请求的baidu.com，但是最终链接的可能是qq.com。
• 数据易篡改 如ISP可以插入广告

https之证书校验

相关概念

• PKI：Public Key Infrastructure，公钥基础设施。
• CA：Certificate Of Authority，认证中心。
• 数字证书：提供了一种发布公钥的简便途径；
  一个数字证书包括：拥有者身份信息、公钥、CA数字签名、有效期等其他信息。
• 数字签名：用来确认发送者的身份，具有防篡改、防抵赖、防伪造。

这篇文章主要是介绍https跟证书相关的一些知识，首先我们知道证书是从CA机构申请，然后将其放到服务端进行部署，此时浏览器端需要校验证书是否是真的从CA机构发的，防止服务端返回证书的时候被篡改。就会需要使用到数字签名的一个流程来验证证书的合法性。

数字签名流程

签名流程 如图1

1.发送者对消息计算摘要
2.发送者使用私钥对摘要进行签名得到签名值
3.发送者将原始消息跟签名值一起发送给接受者

签名验证流程 如图2

1. 收到消息后，分出消息和签名值A
2. 会用公钥对消息进行运算得到摘要值B
3. 对摘要A和摘要B进行比较，相同则表签名验证成功，否则是失败
   

介绍完数字签名流程，我们知道CA机构收到用户申请证书的请求后，会将一些重要信息如（网站的域名，RSA密钥对的公钥，营业执照等）如下图

核实申请的者的身份后，会将这些信息是由CA的私钥对信息进行签名，得到签名值，此时将其附属在这些重要信息的后面，返回给用户。此时证书就申请完成了。申请证书与校验证书流程可以如下图所示。

最后是一个客户端与服务端通信的一个流程图。

vue 计算属性 set 相关

问题：使用vue的时候，大多数时候都是使用其默认的get方法，今天写一个set属性的时候，发现set计算属性的某个key的时候始终不起作用，然后看了下vue源码。

<template>
  <div>
    <input type="text" v-model="test.a">
    <input type="text" v-model="test.b">
    <button @click="change">hhhh</button>
  </div>
</template>

<script>
  export default {
    name: 'test',
    components: {},
    data () {
      return {
        test: {
          a: 1,
          b: 1
        }
      }
    },
    computed: {
      test2: {
        get () {
          return JSON.parse(JSON.stringify(this.test))
        },
        set (value) {
          this.test = value
        }
      }
    },
    props: {},
    watch: {},
    methods: {
      change () {
        this.test.a = 2
      }
    },
    mounted () {
    }
  }
</script>

类似如图，当时觉得vue 既然能get到变化，为什么set不到具体值，然后就看vue相关computed的代码。

vue 的 computed 在 stateMixin方法里面执行了。对应文件路径为src/core/instance/state.js

// 初始化init计算属性

function initComputed (vm: Component, computed: Object) {
  const watchers = vm._computedWatchers = Object.create(null)
  const isSSR = isServerRendering()

 // 遍历计算属性这个对象
  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production' && getter == null) {
      warn(
        `Getter is missing for computed property "${key}".`,
        vm
      )
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }

  
   // 如果key没有在data 或者 prop里面定义，就执行defineComputed
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }
  }
}

export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  const shouldCache = !isServerRendering()

 // 如果计算属性是一个function的话，直接将其设置为get，没有set，是对象的话会分别取get跟set设置
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : createGetterInvoker(userDef.get)
      : noop
    sharedPropertyDefinition.set = userDef.set || noop
  }
  if (process.env.NODE_ENV !== 'production' &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }

 // 在这句可以看到，vue计算属性只对外出key做了劫持，所以我们修改对象属性里面的key是不能触发set方法。
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

解决办法

可以将计算属性修改的地方，使用onchange事件进行触发 之前定于在set里面需要触发的逻辑。

最后：如有不对，欢迎指出

JavaScript内存管理

JavaScript内存管理

标签（空格分隔）： JavaScript

---

1、内存的生命周期

分配你所需要的内存
使用分配到的内存（读、写）
不需要时将其释放\归还

2、分配内存JavaScript中有两种情况

基本类型值 【字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol】

因为其大小固定，所以会直接存在栈内存中。

引用类型值【对象(Object)、数组(Array)、函数(Function)】

左值会声明在执行栈，右值是其引用地址。

3、垃圾回收

1、标记清除

1、可以简单理解成 对象是否可达
高程P79页说 2008年之后浏览器的JavaScript都使用的标记清除方式，只是其垃圾回收时间间隔不同。
所以在9102年的今天，应该不需要考虑循环引用内存泄漏的问题。

2、新一代chorme以及nodejs使用js引擎是V8
v8的回收策略是将内存空间分为新生代（new generation）和老生代（old generation）。
新生代中会放置存活时间较短的对象，比如局部变。老生代则是存活时间较长的比如全局变量、闭包之类的。

一开始运行的时候，对象都会现在新生代进行创建，在满足某些条件后，会被移动到老生代。

2、引用计数

1、跟踪记录每个值被引用的次数
曾经在IE8 COM使用以及Netscape Navigation3.0使用过，其他浏览器并未使用其。
产生的问题有：循环引用无法清除、早期IE8dom不是原生JavaScript对象，其中BOM、DOM对象是C++以COM（component Object model）对象实现的，然后其采用的垃圾回收是引用计数，在JavaScript使用Dom会导致存在循环引用bug。例如

var el = document.getElementById('test')
var myObj = {}
myObj.el = el
el.obj = myObj

就会导致循环引用无法回收的bug，但是其只存在于IE8

扩展阅读

内存管理
前端基础进阶：详细图解 JavaScript 内存空间
聊聊V8引擎的垃圾回收

<head>标签里有什么?

主要包含了页面是元数据

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

title和h1的区别：

h1 会加载显示在页面中

title 是用来表示整个html文档大致内容的元数据

元数据 <meta>

在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属 性来定义。name 表示元信息的名，content 则用于表示元信息的值。

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— 元素。

• charset 指定了文档的字符编码
  <meta charset="utf-8">
• name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。<meta name="author" content="Chris Mills">
• content 指定了实际的元数据内容。
• description也被使用在搜索引擎显示的结果页中

<meta name="description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">

利用meta标签对viewport进行控制

一个典型的针对移动端优化的站点包含类似下面的内容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport主要有以下属性

属性	说明
width	页面具体宽度，可以取具体数值
height	页面高度，可以取值具体的数字
initial-scale	初始缩放比例。
minimum-scale	最小缩放比例
maximum-scale	最大缩放比例
user-scalable	是否允许用户缩放

自定义图标

• 将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

添加css和JavaScript

<link rel="stylesheet" href="my-css-file.css">

<script src="my-js-file.js"></script>

其他meta

• application-name:如果页面是 Web application，用这个标签表示应用名称。
• author: 页面作者。
• description:页面描述，这个属性可能被用于搜索引擎或者其它场合。
• generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网 页，不需要加这个 meta。
• keywords: 页面关键字，对于 SEO 场景非常关键。
• referrer: 跳转策略，是一种安全考量。
• theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外 的UI(如窗口边框或者 tab 的颜色)。