小宇的博客

setup语法糖的使用

Sat, 26 Feb 2022 15:24:16 GMT

前言

在setup()中手动暴露状态和方法会很冗长。幸运的是,只有在不使用构建步骤时不是必要的.当使用单文件中，我们可以通过<script setup>大大简化使用

基本使用

<script setup>
  // imported components are also directly usable in template
  import Foo from './Foo.vue'
  import { ref } from 'vue'

  // write Composition API code just like in a normal setup()
  // but no need to manually return everything
  const count = ref(0)
  const inc = () => {
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

编译结果

import Foo from './Foo.vue'
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(1)
    const inc = () => {
      count.value++
    }

    return function render() {
      return h(Foo, {
        count,
        onClick: inc
      })
    }
  }
}

定义 props 和 emit

<script setup>
  // expects props options
  const props = defineProps({
    foo: String
  })
  console.log(props.foo)

  // expects emits options
  const emit = defineEmits(['update', 'delete'])
  emit('update')
</script>

编译结果

export default {
  props: {
    foo: String
  },
  emits: ['change', 'delete'],
  setup(props, { emit }) {
    // setup code
  }
}

导入组件

<script setup> 内导入的组件，可以直接在模版中使用。

<script setup>
  import Foo from './Foo.vue'
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <Foo />
  <my-component />
</template>

编译结果

import Foo from './Foo.vue'
import MyComponent from './MyComponent.vue'

export default {
  setup(){
    return function render(){
      return [h(Foo),h(MyComponent)]
    }
  }
}

使用指令

指令以类似的方式工作--除了名为 v-my-dir 的指令名映射到 setup作用域中名为 vMyDir 的变量

<script setup>
  import { directive as vClickOutside } from 'v-click-outside'
</script>

<template>
  <div v-click-outside />
</template>

编译结果

import { directive as vClickOutside } from 'v-click-outside'

export default {
  setup() {
    return function render() {
      return withDirectives(h('div'), [[vClickOutside]])
    }
  }
}

使用 slots 和 attrs

<script setup>
  import { useSlots, useAttrs } from 'vue'

  const slots = useSlots()
  const attrs = useAttrs()
</script>

暴露组件公用接口

<script setup>
  const a = 1
  const b = ref(2)

  defineExpose({
    a,
    b
  })
</script>

与普通的script标签一起使用

有些情况下，代码必须在模块范围内执行，例如：

申报命名出口
应该只执行一次的全局副作用。

在这种情况下，正常的<script>块可以与<script setup>一起使用

<script>
  performGlobalSideEffect()

  // this can be imported as `import { named } from './*.vue'`
  export const named = 1
</script>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>

编译结果

import {ref} from 'vue'
performGlobalSideEffect()
export const named = 1
export default {
  setup(){
    const count = ref(0)
    return { count }
  }
}

声明其他选项

<script setup>语法提供了表达大多数现有选项API选项的等效功能的能力，但以下几个选项除外：

name
inheritAttrs
插件或库所需的自定义选项

如果需要声明这些选项，请使用带有导出默认值的单独<script>

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

provide & inject

<script setup>
import { ref, provide } from 'vue'
const name = ref('xiaoyu')
provide('name',name)
</script>

<!-- 子组件 -->
<script setup>
import { inject } from 'vue'
const name:string = inject('name')
</script>

vue获取组件实例父子组件实例

Sat, 26 Feb 2022 14:17:10 GMT

前言

最近再写弹框组件时通过调用函数的方式调用弹框需要获取到组件实例在此总结一下

Vue2

获取当前组件实例

1 render()

// render 获取组件实例
function create(Component, props) {
  const vm = new Vue({
    render: (h) => h(Component, { props }), // h() 返回vnode 虚拟dom 需要挂载才能变成真实dom
  }).$mount(); // 不指定宿主元素，会创建真实dom 但是不会追加操作

  //  现在vm 就是根组件实例
  // 获取真实dom  vm.$el 就是真实dom  将真实dom 放在body上
  document.body.appendChild(vm.$el);

  // Component 是组件描述对象 comp是组件的实例
  const comp = vm.$children[0];

  // 删除
  comp.remove = () => {
    document.body.removeChild(vm.$el);
    vm.$destroy();
  };
  return comp;
}

2 Vue.extend()

// Vue.extend() 获取组件构造函数
function create(Component, props) {
  // 获取组件构造函数
  const Constructor = Vue.extend(Component);
  const component = new Constructor({
    propsData: props,
  }).$mount();
  // mount 后才有$el 属性
  document.body.appendChild(component.$el);
  component.remove = () => {
    document.body.removeChild(component.$el);
    component.$destroy();
  };
  return component;
}

获取父组件实例

this.$parent

获取子组件实例

this.$children

Vue3

获取当前组件实例

createApp 获取组件实例

import { createApp, h } from "vue";
const div = document.createElement("div");
const app = createApp({
  render() {
    return h(Component, {
      title: "提示",
      content: "内容",
      onXxx: () => {
        console.log("xxx");
      },
    });
  },
}).mount(div);
document.body.appendChild(div);

如果是title 和 content 是插槽

import { createApp, h } from "vue";
const div = document.createElement("div");
const app = createApp({
  render() {
    return h(
      MessageBox,
      {
        onXxx: () => {
          console.log("xxx");
        },
      },
      {
        // h 第三个参数传递插槽
        title,
        content,
      }
    );
  },
}).mount(div);
document.body.appendChild(div);

获取父组件实例

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const parent = instance.parent

获取子组件实例

Vue3 中实例没有$children 属性了那么子组件实例如何获取呢？

1 ref

以 form 组件为例点击登录需要获取 loginForm 的 validate 方法

<!-- demo.vue -->
<template>
  <x-form :model="userInfo" :rules="rules" ref="loginForm">
    <x-form-item label="用户名" prop="username">
      <x-input
        v-model="userInfo.username"
        placeholder="请输入用户名"
        clear
      ></x-input>
    </x-form-item>
    <x-form-item>
      <x-button @click="login" type="primary">登录</x-button>
    </x-form-item>
  </x-form>
</template>
<script lang=ts setup>
  const loginForm = ref(null) // ref 获取loginForm 实例
  const login = () => {
    loginForm.value.validate(valid => {
    if(valid){
      openMessageBox({title: '提示',content: '登录成功'})
    }
  }
</script>

但是需要在loginForm 中暴露validate方法

// form.vue
const validate = (callback) => {
  ...
};
defineExpose({validate})

2 slots.default()

如果子组件是通过插槽的方式传递进来的可以通过slots.default() 方法获取

setup(props,{slots}){
  const children = slots.default()
}

// setup 语法糖
import { useSlots } from "vue";
const slots = useSlots();
const children = slots.default();

可以通过这种方式约束子组件标签

// 检查每个子组件的类型
import ChildCompont form './ChildChomponent'
children.forEach( tag => {
  if(tag.type !== ChildCompont){
    throw new Error('子组件必须是 ChildComponent')
  }
})

这种方法可以获取到子组件实例但是不能调用子组件中的方法

实现一个拖动改变列宽的table组件

Wed, 26 Jan 2022 16:25:13 GMT

前言

一直以来都很想实现一个拖拽改变列宽的 table 组件,这几天终于有机会去研究它。哈哈，笔者不才，没能自己实现，还是去网上找了个案例，研究了下。

乍一看好像挺简单的其实就是原生 js 那些事，还是自己基础太差,想的太复杂了。

核心思想

在鼠标移动单元格右边距离右边距小于 10px 的时候将鼠标改为col-resize样式, 如果当前单元格(哈哈哈，注意这个当前单元格 后面有坑)鼠标是按下的状态那就鼠标移动多少距离当前单元格就增加或减少多少宽度

大致代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>火星黑洞</title>
  </head>
  <body>
    <table id="table" cellspacing="0" cellpadding="1" width="100%" border="1">
      <tbody>
        <tr align="center" bgcolor="#1890ff">
          <td style="width:100px;">id</td>
          <td>公司名称</td>
          <td>姓名</td>
          <td>岗位</td>
        </tr>
        <tr>
          <td>20</td>
          <td>科技有限公司</td>
          <td>火星黑洞</td>
          <td>web开发</td>
        </tr>
      </tbody>
    </table>
    <script type="text/javascript">
      var tTD;
      var table = document.getElementById("table");
      for (i = 0; i < table.rows[0].cells.length; i++) {
        table.rows[0].cells[i].onmousedown = function () {
          console.log("onmounseDown");
          tTD = this;
          if (event.offsetX > tTD.offsetWidth - 10) {
            tTD.mouseDown = true;
            tTD.oldX = event.x;
            tTD.oldWidth = tTD.offsetWidth;
          }
        };
        table.rows[0].cells[i].onmouseup = function () {
          if (tTD == undefined) tTD = this;
          tTD.mouseDown = false;
          tTD.style.cursor = "default";
        };
        table.rows[0].cells[i].onmousemove = function () {
          console.log(event.offsetX, this.offsetWidth);
          if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = "col-resize";
          else this.style.cursor = "default";
          if (tTD == undefined) tTD = this;
          console.log(tTD.mouseDown, "ttd.mouseDown");
          if (tTD.mouseDown != null && tTD.mouseDown == true) {
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
              tTD.width = tTD.oldWidth + (event.x - tTD.oldX); // 现在的宽度
            tTD.style.width = tTD.width;
            tTD.style.cursor = "col-resize";
            table = tTD;
            while (table.tagName != "TABLE") table = table.parentElement;
            for (j = 0; j < table.rows.length; j++) {
              table.rows[j].cells[tTD.cellIndex].width = tTD.width;
            }
          }
        };
      }
    </script>
  </body>
</html>

vue 实现 table 组件

感觉自己可以了很快上手 table 组件

给 th 绑定事件

<thead>
  <tr>
    <th
      v-for="head in thead"
      @mousedown="mouseDown"
      @mousemove="mouseMove"
      @mouseup="mouseUp"
    >
      {{ head.prop ? head.prop : head }}
    </th>
  </tr>
</thead>

实现相关事件

按照原生 js 那一套我事先按照自己的理解将它的 tTD 都改为了 event.target, 想着 event.target 就是事件发生的元素但是很遗憾,是可以实现拖动改变列宽效果,但是必须慢慢拖动,才可以改变列宽,一旦鼠标移速过快,该单元格宽度不会跟着鼠标变化, 鼠标会滑到下一个单元格上百思不得其解感觉逻辑没有问题代码也几乎改成了一模一样只有源码是tTD 我用的event.target 为什么源码写的表格拖拽起来是如此丝滑，鼠标到哪单元格右边边框线跟到哪而我的组件,就是跟不上我的鼠标这到底是怎么回事呢？

又将源码中的 tTD 全部改为 event.target bug 重现了，那重点还是在于它这个 tTD 的作用于是又一行一行改，然后又打印对比 tTD 与 event.target 到底为什么不一样

当我在公司名称那一列快速往右移时, tTD 永远都是公司名称那一个单元格 event.targt会变成姓名那一单元格

恍然一下想到了在写 canvase 画板的时候画笔的速度跟不上鼠标 move 的速度中间会出现空白也就是说鼠标移动太快的话改变宽度的代码还来不及执行而当前的 event.target 已经变成了下一列所以我要改变的那一列宽度就不会改变

终于知道原因了,这也就是源码中定义了全局变量 tTD 的原因所在 tTD 并不是事件发生的当前元素而是记录要改变宽度的那一单元格!!!

重新修改代码

let th = undefined;

const mouseDown = (e, xxx) => {
  if (!border) return;
  th = e.target;

  if (e.offsetX > th.offsetWidth - 10) {
    th.down = true;
    th.oldWidth = th.offsetWidth;
    th.oldX = e.x;
  }
};

const mouseMove = (e) => {
  if (!border) return;
  if (e.target.offsetWidth - e.offsetX < 10) {
    e.target.style.cursor = "col-resize";
  } else {
    e.target.style.cursor = "default";
  }
  if (!th) th = e.target;
  if (th.down) {
    th.width = th.oldWidth + (e.x - th.oldX);
    th.style.cursor = "col-resize";
  }
};

const mouseUp = (e) => {
  if (!border) return;
  if (!th) th = e.target;
  th.down = false;
  th.style.cursor = "defult";
};

终于可以很顺畅的滑动了单元格的宽度变化终于跟得上我的手速了~~~~~~~

给定初始列宽

但是我们在使用组件的时候都会给每一列一个初始宽度用 colgroup 统一管理列

<table>
  <colgroup>
    <col v-for="head in thead" :width="head.width" />
  </colgroup>
  ...
</table>

使用组件

<template>
  <div>
    <x-table border :thead="theadData" :data="tableData"></x-table>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    setup() {
      const theadData = ref([
        { prop: "日期", width: 200 },
        { prop: "姓名", width: 200 },
        { prop: "地址" },
      ]);
      const tableData = ref([
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [11, 12, 13],
      ]);
      return { tableData, theadData };
    },
  });
</script>

任意改变列宽

这样给定了初始宽度后发现无法将列改变到很小的宽度应该是初始宽度限制了列的最小宽度我们应该改变 col 的宽度

vue3 v-for 中的 ref 数组获取 col

<colgroup>
  <col
    :ref="setColRef"
    v-for="head in thead"
    :width="head.width ?? head.width"
  />
</colgroup>

组合式 API

let colRefs = [];
const setColRef = (el) => {
  if (el) {
    colRefs.push(el);
  }
};

最终代码同样需要一个变量记录当前需要改变列宽的索引值否则会引发同样的问题

let th = undefined;
let currentIndex = undefined;

let colRefs = [];
const setColRef = (el) => {
  if (el) {
    colRefs.push(el);
  }
};

const mouseDown = (e, index) => {
  if (!border) return;
  th = e.target;
  currentIndex = index;

  if (e.offsetX > th.offsetWidth - 10) {
    th.down = true;
    th.oldWidth = th.offsetWidth;
    th.oldX = e.x;
  }
};

const mouseMove = (e, index) => {
  if (!border) return;
  if (e.target.offsetWidth - e.offsetX < 10) {
    e.target.style.cursor = "col-resize";
  } else {
    e.target.style.cursor = "default";
  }
  if (!th) {
    th = e.target;
    currentIndex = index;
  }
  if (th.down) {
    // 改变当前索引 col 的宽度
    colRefs[currentIndex].width = th.oldWidth + (e.x - th.oldX);
    th.style.cursor = "col-resize";
  }
};

const mouseUp = (e) => {
  if (!border) return;
  if (!th) {
    th = e.target;
    currentIndex = undefined;
  }
  th.down = false;
  th.style.cursor = "defult";
};
return { setColRef, mouseDown, mouseMove, mouseUp };

大功告成 ~~~~~~~

vite构建库并发布

Mon, 17 Jan 2022 14:18:15 GMT

添加入口文件 src/lib/index.ts

export { default as Button } from './Button.vue'
export { default as Switch } from './Switch.vue'
// 相当于
// import Switch from './Switch.vue'
// export { Switch }

修改vite.config.js

参考链接: vite构建库构件库配置项

build: {
  lib: {
    entry: path.resolve(__dirname, 'src/lib/index.ts'),
    name: 'xinyi-ui',
    fileName: (format) => `xinyi-ui.${format}.js`
  },
  rollupOptions: {
    // 确保外部化处理那些你不想打包进库的依赖
    external: ['vue'],
    output: {
      // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      globals: {
        vue: 'Vue'
      }
    }
  }
}

format 默认是['es','umd'] 所以会生成 xinyi-ui.es.js 和 xinyi-ui.umd.js 两个文件

修改package.json

"files": ["dist"],
"main": "./dist/xinyi-ui.umd.js",
"module": "./dist/xinyi-ui.es.js",
"exports": {
  ".": {
    "import": "./dist/my-lib.es.js",
    "require": "./dist/my-lib.umd.js"
  }
},

各字段意义

files 字段是要包含在项目中(npm publish 打包的tarball)的文件数组。
main CommonJS 规范的包入口文件
module ES Module 的包入口文件 package.json module
exports Node.js 12+ 支持作为"main" 的替代方案，它可以支持定义子路径导出和条件导出，同时封装内部未导出的模块。 package.json exports

发布npm 包

npm login 登录在https://www.npmjs.com/ 注册的账号
npm whomi 确认登录
npm publish

注意事项

name:

必须是小写字母可用 - 或 _ 连接
不能跟npm上现有的name 重名

version

每次publish 的版本不能与之前每一次的相同
所以从第二次开始先改version 再publish

测试是否发布成功

vue create test-xinyi-ui 新建一个项目目录
在 App.vue 中引入相关组件和 css

import { Button } from 'xinyi-ui'
import 'xinyi-ui/dist/style.css'
export default {
  components: { Button }
}

在模板中使用组件

<Button>按钮</Button>

如何使用cli及脚手架原理

Fri, 14 Jan 2022 22:35:06 GMT

如何使用cli

在《写一个cli脚手架中》使用了npm link 来使用 my-cli 但是使用npm link 只是为了方便在开发的时候测试但是我们要想在一个项目中使用脚手架的命令怎么用呢？

很简单直接

npm install <cli-package-name>

原理分析

但是为什么可以这样做呢? 我发现 npm install 的时候其实是做了两件事

根据package.json 安装项目依赖
在node_modules/.bin 下创建所有依赖项bin字段下所有命令的软链接

先将{prefix}/bin/{name}下的test2命令删除

比如现在我在my-cli 同级目录下新建 test-my-cli 目录

mkdir test-my-cli
cd test-my-cli
npm init -y
npm install ../my-cli

可以看到node_modules/.bin 下存在两个软链接

npm run-script

那么现在我们就可以执行my-cli中的命令了么? 直接执行test2 肯定不行(先将环境变量中的test2命令删除) 因为test2 是放在 node_modules/.bin目录下的所以我们需要

./node_modules/.bin/test2

但是这样使用起来很麻烦我们通常都不是这么用的而是将命令写在package.json 中的scripts 字段中

"scripts": {
  "test": "test2 init aaa"
}

然后再运行 npm run test 也可以执行test2 命令

那么这是为什么呢？为什么放在scripts 中就可以执行test2命令了？

In addition to the shell's pre-existing PATH, npm run adds node_modules/.bin to the PATH provided to scripts. Any binaries provided by locally-installed dependencies can be used without the node_modules/.bin prefix.

For example, if there is a devDependency on tap in your package, you should write:

"scripts": {"test": "tap test/\*.js"}

instead of

"scripts": {"test": "node_modules/.bin/tap test/\*.js"}

原来是npm run 的时候将当前目录下的 node_modules/.bin 添加到了环境变量中

写一个cli脚手架

Fri, 14 Jan 2022 19:27:13 GMT

1 新建项目目录

mkdir my-cli
cd my-cli
npm init —y  # 生成package.json 文件

2 新建 bin 目录创建脚本 test.js

#!/usr/bin/env node       //指定一个解释器  告诉shell 用node解释器去执行脚本
console.log('test')

3 在package.json 配置bin 字段

bin字段用来指定各个内部命令对应的可执行文件的位置。

test 有毒不生效所以这里新建了一个test2.js 脚本(命令)

"bin": {
  "test": "./bin/test.js",    // 好像test 命令有毒 不打印 其他可以
  "test2": "./bin/test2.js"
  },

4 运行 npm link (参考博客 npm link 详解)

将包中的任何bin链接到{prefix}/bin/{name} npm config get prefix 查看前缀 test2 命令已被添加到环境变量中

5 执行test2

6 引入commander 添加子命令

test2.js 初始化项目

#!/usr/bin/env node
const program = require('commander')
// 以package.json 的version 作为test2 的version
program.version(require('../package.json').version)
program
  .command('init <name>')
  .description('init project  ')
  .action(require('../lib/init'))

// 解析主进程参a
program.parse(process.argv)

7 使用 figlet chalk 输出欢迎界面

// init.js
const { promisify } = require('util')
const figlet = promisify(require('figlet'))
const chalk = require('chalk')   // chalk 5 是ESM  chalk 4 是CSM
const log = content => console.log(chalk.green(content))
module.exports = async name => {
  const data = await figlet('Welcome')
  log(data)
  log(`下载项目: ${name}`)
}

8 download-git-repo 从远程仓库拉取项目

const {clone} = require('./download')
// init.s
log(`下载项目: ${name}`)
// 现在默认分支不是master了 所以要指定分支main
await clone('github:cxyxiaoyuyu/xinyi-ui#main',name)

使用 ora 在下载时显示loading

// download.js
const { promisify } = require('util')
const ora = require('ora')

module.exports.clone = async function(repo,desc){
  const download = promisify(require('download-git-repo'))
  const process = ora(`下载..... ${repo}`)
  process.start()
  await download(repo,desc)
  console.log(repo,desc)
  process.succeed()
}

执行完成后项目会多了一个执行命令时输入的目录

9 执行命令自动安装依赖

使用 spawn 执行命令

//init.js
const {spawn} = require('child_process')
/**
spawn 开一个子进程 用来执行脚本(暂且这么了解吧)
_spawn 自己封装的函数 开一个子进程 让子进程的输出信息打印给主进程 并监听子进程结束
直接用spawn 命
*/
const _spawn = async (...args) => {
  return new Promise((resolve)=>{
    const proc = spawn(...args)
    proc.stdout.pipe(process.stdout)  // 为了打印出日志输出
    proc.stderr.pipe(process.stderr)
    proc.on('close',()=>{     // 知道子进程结束了
      resolve()
    })
  })
}
log('安装依赖')
await _spawn('npm',['install'],{cwd: `./${name}`})
log(`安装完成`)

10 自动启动项目

使用open 打开浏览器

// init.js
log('启动')
// 直接写spawn 是在主进程执行 不会打印输出信息
// 如果需要打印信息 需要使用自己封装的_spawn  但是这个进程不会结束 所以下面的open 不会执行 所以open 要放在上面
// spawn('npm',['run','dev'],{cwd: `./${name}`})

open(`http://localhost:3001`)
_spawn('npm',['run','dev'],{cwd: `./${name}`})

11 实现约定路由功能

根据views下的文件自动生成路由使用handlebars 模板引擎

const fs = require('fs')
const handlebars = require('handlebars')

const program = require('commander')
program
  .command('create component <name>')
  .description('init project  ')
  .action(refresh)
program.parse(process.argv)

// module.exports = async () => {
async function refresh (name){
  console.log(name)
  // 获取列表
  const list = fs.readdirSync('./src/views')
    .filter(v => v !== 'Home.vue')
    .map(v => ({
      name: v.replace('.vue','').toLowerCase(),
      file: v
    }))
  console.log(list)

  // 生成路由定义
  compile({list},'./src/router/index.js','./template/router.js.hbs')

  // 生成菜单
  compile({list},'./src/App.vue','./template/App.vue.hbs')

  /**
   * 模板编译
   * @param {*} meta
   * @param {*} filePath
   * @param {*} templatePath
   */
  function compile(meta,filePath,templatePath){
    if(fs.existsSync(templatePath)){
      const content = fs.readFileSync(templatePath).toString()
      const result = handlebars.compile(content)(meta)
      fs.writeFileSync(filePath,content)
      console.log(`${filePath}创建成功`)
    }
  }
}

安装nvm

Fri, 14 Jan 2022 16:18:04 GMT

卸载之前的node

brew uninstall node --force
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

安装nvm

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

然后提示重新打开terminal 或者执行以下三行命令

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

遇到的问题

执行完可以使用nvm 命令但是重启terminal 会报 nvm cammand not found

原因

是因为最新的mac 系统catalina 默认shell 是zsh

解决

所以将三行命令放进 ~/.zshrc 中再重启终端或 source ~/.zshrc

nvm 基本使用

nvm install <node 版本> nvm ls-remote 查看远程所有可安装的node版本 nvm ls 本地已安装的node版本 nvm use <node版本> 切换node 版本

vscode 中不能使用node 命令

然后发现vscode 的terminal 没有node 命令了因为vscode 的terminal 是基于bash 的解决方法有很多知道原因就好办

复制那三行命令，粘贴到~/.bash_profile 里重新打开vscode 或 source ~/.bash_profile
也可以将~/.zshrc 里的内容改为 source ~/.bash_profile
或者在 ~/.bash_profile 里写source ~/.zshrc
将vscode 的terminal 改为 zsh

npm link详解

Thu, 13 Jan 2022 22:43:33 GMT

npm link 分为两个步骤

Package linking is a two-step process.

npm link
npm link package-name

npm link 的时候发生了什么

首先 npm link 会在全局目录{prefix}/lib/node_modules/<package> 创建一个当前目录的软连接
将包中bin下的命令链接到{prefix}/bin/{name} 目录
npm config get prefix 可以查看prefix

// package.json
"bin":{
  "test": "./bin/test.js",
  "test2": "./bin/test2.js"
}

第二步 npm link package-name

另一个目录 npm link package-name 将创建一个从全局安装的包名到当前文件夹的node_modules/的符号链接。
注意 package-name 是从package.json 中的名字不是目录名

The package name can be optionally prefixed with a scope. See npm-scope. The scope must be preceded by an @-symbol and followed by a slash. 包名称可以选择性地加上作用域前缀。参见npm-scope。作用域前面必须有@-符号，后面必须有斜杠。

When creating tarballs for npm publish, the linked packages are "snapshotted" to their current state by resolving the symbolic links. 通过npm publish 命令去发布链接的包将“快照”到其当前状态。

This is handy for installing your own stuff, so that you can work on it and test it iteratively without having to continually rebuild. 这对于安装您自己的东西很方便，因此您可以对其进行操作并进行迭代测试，而无需不断地重新构建。

For example:

cd ~/projects/node-redis    # go into the package directory
npm link                    # creates global link
cd ~/projects/node-bloggy   # go into some other package directory.
npm link redis              # link-install the package

Now, any changes to ~/projects/node-redis will be reflected in ~/projects/node-bloggy/node_modules/node-redis/. Note that the link should be to the package name, not the directory name for that package.

You may also shortcut the two steps in one. For example, to do the above use-case in a shorter way: cd ~/projects/node-bloggy # go into the dir of your main project npm link ../node-redis # link the dir of your dependency

The second line is the equivalent of doing:

(cd ../node-redis; npm link)
npm link redis

That is, it first creates a global link, and then links the global installation target into your project's node_modules folder.

Note that in this case, you are referring to the directory name, node-redis, rather than the package name redis. If your linked package is scoped (see npm-scope) your link command must include that scope, e.g. npm link @myorg/privatepackage

实现node中的util.promisify

Thu, 13 Jan 2022 22:33:41 GMT

将原本需要通过传入回调参数来实现回调执行改为利用promise.then的方式来调用,或者通过 async/await 的方式调用从而实现逻辑上的同步操作。

实现原理:

改变callback 在执行callback 的时候将参数resolve 出去这样就可以在执行函数的时候拿到回调函数的参数再执行真正的callback

  function a(str,callback){
    callback(str+'456')
  }

  function promisify(fn) {
    return function (...args) {
        return new Promise(function (resolve, reject) {
            let callback = function(...args) {
              resolve(...args)
            }
            fn.apply(null, [...args,callback]);
        });
    }
  }

  const aa = promisify(a)

  async function xxx(){
    const data = await aa('123’)   // data 就是回调函数中的参数
    console.log(data)
  }

  xxx()

vite支持custom-block功能显示源码

Thu, 13 Jan 2022 20:19:17 GMT

在写xinyi-ui的时候就想实现一个展示demo 并显示源代码的功能了解到custom-block这个功能

这个问题折腾了我一整天,不过真是不负有心人,还好我没有放弃,现在对vite的原理不是很了解,只是记一下步骤,等以后再看吧

参考链接

在demo.vue 中添加自定义标签如demo

<!--SwitchDemo-->
<demo>常规用法</demo>

<template>
   <Switch v-model:value="value" />
</template>

<script lang="ts">
import Switch from "../lib/Switch.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "",
  setup() {
    const value = ref(true)
    return {value};
  },
  components: { Switch },
});
</script>

实现插件获取源码添加源码到组件

打印了好多东西才发现在请求这个添加了自定义块的vue的时候会有两个请求而我要匹配的就是type=demo的那个请求

然后根据这个路径获取到源码添加到组件的__sourCode属性上

如果style标签有内容的话也会有type=style 的请求这其中怎么分的后面一定要了解下 tranform 函数怎么return 的不一样呢? 什么时候返回字符串什么时候返回对象？在plugin-vue 中对这种自定义块是怎么处理的？

const vueDemoPlugin = {
  name: 'vue-i18n',
  transform(code, path) {
    if (/vue&type=demo/.test(path)) {
      const file = fs.readFileSync(path.split('?')[0]).toString()
      const parsed = baseParse(file).children.find(n => n.tag === 'demo')
      const main = file.split(parsed.loc.source).join('').trim()
      return `export default Comp => {
        Comp.__sourceCode = ${JSON.stringify(main)}
        Comp.__sourceCodeTitle = ${JSON.stringify(code)}
      }`
    }
  }
}

组件中显示源码

在组件中引入SwitchDemo.vue

import SwitchDemo from 'xxx'
console.log(SwtichDemo)  // 发现SwitchDemo是一个对象 __sourceCode含有源码

在vite项目下支持markdown文件

Thu, 13 Jan 2022 20:15:48 GMT

前言

需求如下在写xinyi-ui 官网时,需要对组件进行文档说明,说明文档都是md格式的文件,能否直接将md文件显示到页面上,而不改为html 呢？现在有 install.md 和 get-started.md 两个文件

第一步实现一个vite插件 md => html

将对md文件的请求进行数据处理
通过markdown-it 将源文件转为html字符串

var MarkdownIt = require('markdown-it')
const marked = new MarkdownIt()

const mdToJs = str => {
  const content = JSON.stringify(marked.render(str))
  return `export default ${content}`
}

export function md() {
  return {
    name: 'md',
    transform(src,url){
      if(url.endsWith('.md')){
        return {
          code: mdToJs(src),
          map: null // 如果可行将提供 source map
        }
      }
    }
  }
}

第二步创建组件模板 Markdown.vue

因为只是md文件不同,可以使用同一个组件模板,通过文件路径显示不同的html内容

<template>
  <article v-html="content"></article>
</template>

那么如何获取这个content 呢? 只要引入md 文件 vite插件就会自动将md文件转为html 字符串

//router.js
// 通过渲染函数将 path 传递给 markdown.vue 在markdown.vue 中引入md文件
const md = (filename:string) => h(Markdown, { path: `../markdown/${filename}.md`, key: filename })
const routes = {
  // component 可以使VNode
  { path: 'install', component: md('install')},
  { path: 'get-started', component: md('get-started') },
}

但是我们不能再setup 中使用 import xxx from ... 的语法，可以使用异步引入的方式

// Markdown.vue
export default {
  props: {
    path: {
      type: String,
      required: true,
    },
  },
  setup(props:any) {
    const content = ref<string>('');
    import(/* @vite-ignore */props.path).then((result) => {
      content.value = result.default;    // 这里可以获取到
    });
    return {
      content,
    };
  },
};

显示在页面并添加样式

安装 github-markdown-css
在main.ts 或 MarkDown.vue中引入 css
在article上添加class markdown-body
v-html 显示 html

<article class="markdown-body" v-html="content"></article>

将动态引入改为静态引入

build后发现在生产环境会报错是因为rollup打包不接受这种拼接字符串的模式所以将动态引入文件改为静态引入

这样也将异步引入改为了同步引入了

// main.ts
import install from '../markdown/install.md'
import getStarted from '../markdown/get-started.md'

// 直接将content 传给Markdown.vue
const md = (content:string) => h(Markdown, { content })
const routes = {
  { path: 'install', component: md(install)},
  { path: 'get-started', component: md(getStarted) },
}

这样直接引入 ts 会报错可以加 // @ts-ignore 不管也可以在markdown中添加一个声明文件 markdown.d.ts

declare module "*.md" {
  const content: string;
  export default content;
}

这样打开就不会报错啦

Markdown.vue中显示markdown

<template>
  <!--content 就是 html 格式的字符串-->
  <article class="markdown-body" v-html="content"></article>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  }
};
</script>

手写系列-手写深拷贝

Sun, 13 Sep 2020 18:39:57 GMT

前言

什么是深拷贝？

简单理解: b 是 a 的一份拷贝，b 中没有对 a 中对象的引用另一种理解: b 是 a 的一份拷贝，a、b 各自画图，a 与 b 没有连接

简单的方法

JSON 序列化与反序列化

let obj = {a:1,b:[2,3],c:{xx:4,yy:5}}
let obj2 = JSON.parse(JSON.stringify(obj))
obj2.a = 11
obj2.b[0] = 11
obj2.c.xx = 44
console.log(obj)  // {a:1,b:[2,3],c:{xx:4,yy:5}} 原先的obj不会被改变

缺点:

不支持函数
不支持 undefind(因为 JSON 只有 null)
不支持日期(会把 date 变成 iso8601 格式的日期字符串)
不支持正则
不支持 Error 对象
不支持环状结构
NaN Infinity 会变成 null

const obj = {
  a: "a",
  b: undefined, // undefinde 丢失
  c: function () {
    // 函数丢失
    console.log("this is a fnction");
  },
  d: NaN, // NaN 变为 null
  e: Infinity, // Infinity 变为 null
  f: new Date(), // 时间对象变为 iso8601格式字符串
  g: /123/, // 正则 变为 空对象
  h: new Error("error"), // 变为空对象
};
console.log(JSON.parse(JSON.stringify(obj)));
// {a: 'a',d:null,e: null,f: 'iso8601格式字符串'，g:{},h: {}}

obj.i = obj;
console.log(JSON.parse(JSON.stringify(obj))); // 报错

自己实现一个深拷贝

复制基本类型

基本类型：

Number
String
Boolean
Symbol
undefined
null

基本类型直接返回就好了

function deepClone(souce) {
  return souce;
}

引用类型递归克隆

普通对象

function deepClone(source) {
  if (source instanceof Object) {
    const dist = new Object();
    for (let key in source) {
      dist[key] = deepClone(source[key]);
    }
    return dist;
  } else {
    return source;
  }
}

Array 数组对象
如果是数组的话用上面的方法去拷贝返回的是一个伪数组 且不会拷贝 length 属性 所以我们的 dist 要是一个数组对象

function deepClone(source) {
  if (source instanceof Object) {
    if (source instanceof Array) {
      // 数组
      const dist = new Array();
      for (let key in source) {
        dist[key] = deepClone(source[key]);
      }
      return dist;
    } else {
      // 普通对象
      const dist = new Object();
      for (let key in source) {
        dist[key] = deepClone(source[key]);
      }
      return dist;
    }
  } else {
    return source;
  }
}

Function 对象
函数的话有两种方法第一种就是再封装一个函数去调用源函数

if(source instance of Function){
  const dist = function () {
    return source.apply(this, arguments);
  };
  for (let key in source) {
    dist[key] = deepClone(source[key]);
  }
  return dist;
}

但是这种方法不会拷贝 length 属性也就是函数形参个数可以通过正则匹配函数体函数参数然后重新生成函数

const sourceString = source.toString();
let body = sourceString.match(/(?<={)((\n*.*)*)(?=})/m)[0];
let params = sourceString.match(/(?<=\().*(?=\))/)[0];
dist = new Function(...params.split(","), body);

RegExp 正则对象

else if (source instanceof RegExp) {
  dist = new RegExp(source.source, source.flags);
  for (let key in source) {
    dist[key] = deepClone(source[key]);
  }
  return dist
}

Date 日期对象

else if (source instanceof Date) {
  dist = new Date(source);
  for (let key in source) {
    dist[key] = deepClone(source[key]);
  }
  return dist
}

环结构

a = { name: "a" };
a.self = a;

a 就是环状结构可以通过缓存的方式去拷贝环结构在拷贝 a.self 的时候我们已经拷贝过 a 了可以将 a 与 a 的深克隆结果缓存起来

const cache = []
function deepClone(source){
  if(source instanceof Object){
   const sourceDist = cache.find((value) => value[0] === source)?.[1];
    if (sourceDist) {
      return sourceDist;
    } else {
      let dist
      ...
      // 放在for 循环的上面 否则会进入死循环
      cache.push([source,dist])
      for (let key in source) {
        dist[key] = deepClone(source[key]);
      }
      return dist
    }
  }
}

最终代码

// 会有bug catch 没有清空 会有影响 可以用面向对象的方法解决
const cache = [];
module.exports = function deepClone(source) {
  // 判断是不是对象
  if (source instanceof Object) {
    const sourceDist = cache.find((value) => value[0] === source)?.[1];
    if (sourceDist) {
      return sourceDist;
    } else {
      let dist;

      // 数组
      if (source instanceof Array) {
        dist = new Array();

        // 函数
      } else if (source instanceof Function) {
        // dist = function () {
        //   return source.apply(this, arguments);
        // };

        const sourceString = source.toString();
        let body = sourceString.match(/(?<={)((\n*.*)*)(?=})/m)[0];
        let params = sourceString.match(/(?<=\().*(?=\))/)[0];
        dist = new Function(...params.split(","), body);

        // 正则
      } else if (source instanceof RegExp) {
        dist = new RegExp(source.source, source.flags);

        // 日期
      } else if (source instanceof Date) {
        dist = new Date(source);

        // 普通对象
      } else {
        dist = new Object();
      }

      cache.push([source, dist]);
      for (let key in source) {
        // 跳过原型上的属性
        if (source.hasOwnProperty(key)) {
          dist[key] = deepClone(source[key]);
        }
      }
      return dist;
    }

    // 基本类型
  } else {
    return source;
  }
};

JS数据类型-Number类型

Thu, 03 Sep 2020 22:35:47 GMT

前言

最近在做题目LeetCode表示数值的字符串这道题的时候对数值类型又有了新的认识打算重新总结下

1. 整数、浮点数

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数 1 === 1.0 // true

保留两位小数

1 四舍五入

    var num = 2.446242342
    num = num.toFixed(2)     // 输出是字符串 需要用parseFloat或Number再转一下

2 不四舍五入

    Math.floor(15.7784514000 * 100) / 100       // 15.77

2. 数值的进制

十进制：没有前导0的数值
八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值
```
012  // 10
0o12 // 10
0O12 // 10
078  // 78   超出范围 无效的八进制 解析为十进制
```
十六进制：有前缀0x或0X的数值
```
0xA   // 10
0x12  // 18
0XAB  //171
```
二进制：有前缀0b或0B的数值
```
0b111 // 7
0B11  // 3
```

默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制

3. 进制之间的转换

1) Number.prototype.toString([radix])

toString() 方法返回指定 Number 对象的字符串表示形式。 radix 指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。

(12).toString()   // "12"   十进制转十进制
(012).toString()  // "10"     八进制转十进制
(10).toString(2)  // "1010"   十进制转二进制
(0b1010).toString(8)  // "12"  二进制转八进制

toString()以后是字符串格式在通过格式转换转为数值类型就好啦怎么转换，后续有介绍哦

2) parseInt(string,[radix])

parseInt() 可以将任意进制的数转为10进制

parseInt(111,2) // 3
parseInt(12,8)  // 10
parseInt(0xA)   // 10
parseInt(014)   // 12

关于parseInt()的详细解释在后面

4. Number() 函数

在说NaN 之前先说下Number函数

Number() 函数是数值类型的构造函数同时也可以将其他类型转为数值类型如果无法转为数值就返回NaN

Number()函数的转换规则如下

Boolean false => 0 true => 1
Number 直接返回
null => 0
undefined => NaN
字符串 1 空字符串转为0 2 只包含数字(包含前导正负号) 将其转为十进制 3 如果包含有效的进制格式将转为相同大小的十进制 4 如果包含有效的浮点格式将其转为对应的浮点数值 5 如果不符合以上条件返回NaN

对象调用对用的valueOf()方法然后按照前面的规则进行转换如果转换的结果是NaN 则调用对象的toString()方法，然后再依照前面的规则进行转换

Number(false)      // 0 布尔值false对应0
Number(123)        // 123 数值类型直接返回
Number(null)       // 0
Number(undefined)  // NaN
Number('')         // 0
Number('abc')      // NaN 'abc' 不能被转为数字
Number('123')      // 123  '123' 可以被转为数字
Number('123a)      // NaN  '123a' 不是只包含数字不能被转换
Number('0x12')     // 18    0x12是有效的进制格式 站位10进制
Number('1.1')      // 1.1   有效的浮点格式 转为相应的浮点格式

Number([])        // 0   因为[].toString() ==> ''  Number('') ==> 0
Number([2])       // 2   因为[2].toString() ==> '2' Number('2') ==> 2
Number([1,2,3])   // NaN  [1,2,3].toString() ==> '1,2,3' 不能转为数值

Number({})        // NaN   ({}).toString() ==> "[object Object]"  不能转为数值

所以对于leetCode 这道题我们可以利用Number()函数对于字符串的转换规则如果结果是NaN 就不符合条件否则就是可以转为数值的字符串

    var isNumber = function (s) {
      s = s.trim()
      if (s == '') return false  // 因为 Number('') === 0 所以需要做特殊判断
      return !isNaN(Number(s))
    }

5. NaN

NaN 表示“非数字”（Not a Number）是一个特殊的数值数据类型依然属于Number

主要出现在将字符串解析成数字出错的场合
一些数学函数的运算结果会出现NaN 比如 0除以0也会得到NaN
NaN不等于任何值，包括它本身

针对NaN的特性 ES定义了isNaN()函数该函数接受一个参数可以为任何类型 isNaN()会尝试将这个参数转为数值转换规则与Number()函数一致所以isNaN方法可以用来判断一个值是否 "不是数值"

    NaN === NaN  // false
    isNaN(NaN)   // true
    isNaN(123)   // false

    // isNaN()只对数值有效，如果传入其他值，会先转成数值类型
    isNaN('')             // false
    isNaN('hello')        // true
    //相当于
    isNaN(Number('hello')) //true

    isNaN(false)           // false  false会转为0
    isNaN({})              //true
    isNaN([1,2])           //true
    // 所以isNaN() 为true的时候，有可能是一个字符串，或对象或数组
    // 所以使用isNaN()时，需要先判断下数据类型
    // 但是当数组为空，或数组长度为1时返回false
    isNaN([]) //false
    isNaN([1]) //false

由于isNaN()函数会对参数进行转换那这题又可以直接写为

    var isNumber = function (s) {
      s = s.trim()
      if (s == '') return false  // 因为 Number('') === 0 所以需要做特殊判断
      return !isNaN(s)
    }

6. parseInt()

parseInt()解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。如果不能解析的话返回NaN

parseInt 参数

parseInt(string,[radix]) 接受两个参数

string 如果参数不是字符串类型会通过toString()方法转为字符串
radix 从2-36 表示字符串的基数需要注意的是 10不是默认值

如果 radix 是 undefined、0或未指定的，JavaScript会假定以下情况：

如果输入的 string以 "0x"或 "0x"（一个0，后面是小写或大写的X）开头，那么radix被假定为16，字符串的其余部分被当做十六进制数去解析。
如果输入的 string以 "0"（0）开头， radix被假定为8（八进制）或10（十进制）。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制)，但不是所有的浏览器都支持。因此，在使用 parseInt 时，一定要指定一个 radix。
如果输入的 string 以任何其他值开头， radix 是 10 (十进制)。

parseInt(110,2)  // 6 二进制110 转为十进制是 6
parseInt(123,8)  // 83 八进制的123 转为十进制是83
parseInt(89,8)   // NaN 不是合法的八进制
parseInt('014')  // 14  被当做十进制解析
parseInt(014)    // 12  因为(014).toString() => 12

一道有意思的面试题

["1", "2", "3"].map(parseInt)  // [1,NaN,NaN]
// 相当于parseInt(1,0)  => 1 string不以任何其他值开头 radix为十进制 parseInt(1,10) => 1
// parseInt(2,1) => NaN  1进制不合法 所以返回NaN
// parseInt(3,2) => NaN  3 是不合法的二进制 所以返回NaN

parseInt 忽略后续字符

如果 parseInt 遇到的字符不是指定 radix 参数中的数字，它将忽略该字符以及所有后续字符，并返回到该点为止已解析的整数值。 parseInt 将数字截断为整数值。允许前导和尾随空格。

parseInt('123a',2) // 1 因为符合二进制的只有1
parseInt('1123110',2)  // 3  符合二进制的只有前面的11 找到2不符合 会忽略后面的字符 解析为十进制为3
parseInt('123abc')     // 123 这通常用来在字符串中提取前面的数值

7. parseFloat()

parseFloat() 函数解析一个参数（必要时先转换为字符串）并返回一个浮点数。

如果 parseFloat 在解析过程中遇到了正号（+）、负号（- U+002D HYPHEN-MINUS）、数字（0-9）、小数点（.）、或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。
第二个小数点的出现也会使解析停止（在这之前的字符都会被解析）。
参数首位和末位的空白符会被忽略。
如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。
parseFloat 也可以解析并返回 Infinity。
parseFloat解析 BigInt 为 Numbers, 丢失精度。因为末位 n 字符被丢弃。

// 以下的栗子全部返回3.14
parseFloat(3.14);
parseFloat('3.14');
parseFloat('  3.14  ');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14some non-digit characters');
parseFloat({ toString: function() { return "3.14" } });

8. 其他类型转换为数值类型

有三个函数可以将非数值转为数值类型: Number() parseInt() parseFloat() 这三个函数对于同样的输入会返回不同的类型

方法1 `Number()`

转换规则上面已说过

    Number('1') // 1
    Number('1.123') // 1.123
    Number('1.abc') // NaN
    Number('')    // 0
    Number(true)  // 1
    Number(false) // 0
    Number(null) // 0
    Number(undefined) // NaN
    Number({a:1})  // NaN

方法2 `parseInt()`

parseInt() 主要是将字符串转为整数它会从第一个字符开始，直到不是数字结束

    parseInt('1') //1
    parseInt('1.23') // 1
    parseInt('  123') // 123
    parseInt('1234abc')  // 1234
    parseInt('abc') // NaN
    parseInt('a567bc') // NaN
    parseInt(true) // NaN
    parseInt(null) // NaN
    parseInt(undefined) // NaN
    parseInt({a:1}) // NaN
    parseInt([1,2,3]) // 1

方法3 `parseFloat()`

parseFloat() 主要是将字符串转为浮点数

    parseFloat('3.14') // 3.14
    parseFloat('314e-2') // 3.14
    parseFloat('0.0314E+2') // 3.14
    // 其他与parseInt()结果相同

方法4 `- 0`

    '1' - 0 // 1
    '1.23' - 0  // 1.23
    '1.abc' -0 // NaN
    '' - 0  // 0
    true -0 // 1
    false - 0  // 0
    null - 0 // 0
    undefined - 0 // NaN
    ({a:1}) - 0

方法5 取正

    + '1' // 1
    + '1.23' // 1.23
    + '1.abc' // NaN
    + '' // 0
    + true // 1
    + false // 0
    + null // 0
    + undefined // NaN
    + {a:1} // NaN

9. 补充一个比较运算符的坑

不同类型

比较不同类型的数据也许会出现不可预料的结果。如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0 非数值字符串将被转换为始终为 false 的 NaN。

' ' >= 0 && ' ' <= 9  // true 因为空字符串会转为0
'a' >= 0 || 'a' <= 9  // false  'a' 转为数值 NaN
'123a' >= '123'       // false '123a'也会转为NaN

相同类型都为字符串

字符串大小会按照字母排序

'2' > '12'   // true
'2020-6-8' > '2020-6-14'  // true 因为 '8' > '14'
// 所以时间格式比较日期格式要yyyy-MM-dd去比较
'2020-06-08' > '2020-06-14' // false  '08' < '14'

JS基础巩固篇

Sun, 30 Aug 2020 21:27:48 GMT

一些关于JS的基础知识巩固复习、整理

学了忘忘了学。。。

一 instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

arr = [1,2,3]
arr instanceof Array
// true  因为 arr.__proto__ === Array.prototype
arr instanceof Object
// true  因为 arr.__proto__.__proto__ === Object.prototype

一般情况下instanceof 不能判断基本类型

'abc' instanceof String   // false
123 instanceof Number     // false
true instanceof Boolean   // false

自己实现 instanceof

const myInstanceof = function(instance, constructor){
  // 如果是基本类型就返回false 用 typeof 判断
  if(typeof instance !== 'object' && typeof instance !== 'function' || instance === null){
    return false
  }

  let proto = instance.__proto__
  // 或者 proto = Object.getPrototypeOf(instance)

  while(proto !== null){   // 因为原型链的终点是 null
    if(proto === constructor.prototype) return true
    proto = proto.__proto__
  }
  return false

  // 或者直接用isPrototypeOf判断
  // return constructor.prototype.isPrototypeOf(instance)
}

测试一下

myInstanceof(123,Object)         // false
myInstanceof('abc',String)       // false
myInstanceof([],Array)           // true
myInstanceof([],Object)          // true
myInstanceof({},Array)           // false
myInstanceof({},Object)          // true
myInstanceof(Math.max,Function)  // true

二 call bind apply的区别

这三个方法都是在函数的原型链上的方法，作用是用来改变this指向这三个函数的第一个参数都是指定this

call方法

// 通过数组的方法将类数组转为数组avascript
let arr3 = {0:1,1:0,2:3,3:2,length:4}
Array.prototype.slice.call(arr3)  // 这样arr3本来没有slice方法 现在也可以使用了

apply方法

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

appyl与call的区别

call的第二个参数传的是参数列表
apply的第二个参数传的的数组

// 求最大值
Math.max(1,3,4,2)  // 4
Math.max.call(null,1,3,2,4)
Math.max.apply(null,[1,3,2,4])  // 这样可以直接求数组中的最大值

bind方法

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 bind改变this指向后不会立即调用而是返回一个yongq8

let obj = {
  say(){
    console.log(this)
  }
}
setTimeout(obj.say,1000)   // 调用的时候打印的this是window,1000)
// 我们可以通过bind绑定this
setTimeout(obj.say.bind(obj),2000)   // 打印的时候是obj

const fn = function(){
  console.log(this.name)
}
let obj = {
  name: 'obj 的name'
}
let objFn = fn.bind(obj)
objFn()  // 'obj'的name

三 Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

对象数据属性默认有四个特性

value 值默认为undefined
configurable (是否可修改描述符对象是否能通过delete删除属性默认为false)
enumerable (是否可被遍历默认为false)
writable (是否可改变默认为false)

对象访问器属性不包含数据值有四个特性：

Configurable
Enumerable
Get
Set

要修改属性的默认特性，必须使用Object.defineProperty()方法接受三个参数：属性所在的对象属性的名字一个描述符对象

const object = {};

Object.defineProperty(object, 'property1', {
  value: 42,
  writable: false,      // 值不可变
  configurable: true,   // 可以被修改 可以被delete
  enumerable: false
})

object.property1 = 77   // throws an error in strict mode
console.log(object.property1)  // 42 因为该属性的值是不可改变的

Object.defineProperty(object, 'property1', {
  value: 42,
  writable: true,      // 重新修改为值可变
})

object.property1 = 77
console.log(object.property1)   // 77 现在值是可变的

delete object.property1   // true 可以被删除

Object.defineProperty(object,'property2',{
  value: 55,
  enumerable: true
})

// 可被遍历的属性
Object.keys(object)   // ['property2'] 因为property2的enumerable是true
for(let key in object) {
  console.log(key)       // 'property2'  只有一个属性可被遍历到
}

Object.property2 = 77  // throws an error in strict mode
console.log(Object.property2)  // 55 默认就是不可变的

Object.defineProperty(object,'property2',{
  writable: true
})   // 报错 因为 configurable 默认为false 不可再重新定义描述符对象

delete object.property2  // false configurable 默认为false 属性不可被删除

定义访问器属性

var book = {
   _year: 2004,
   edition: 1
}

Object.defineProperty(book,'year',{
  get: function(){
    return this._year
  },
  set: function(newValue){
    if(newValue){
      this._year = newValue
      this.edition += newValue - 2004
    }
  }
})
// {_year: 2004, edition: 1}
book.year = 2005  // 2005
book.edition      // 2

定义多个属性时可以用 Object.defineProperties方法

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
})

四 Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor()方法可以读取属性的描述符

Object.getOwnPropertyDescriptor(object,'property1')

同理 Object.getOwnPropertyDescriptors()方法用来获取一个对象的所有自身属性的描述符

Vue-组件通信

Sun, 30 Aug 2020 15:15:55 GMT

前言

vue组件通信的方式如此之多今天我们来总结一下完整代码

一、 props、$emit/v-on

父组件通过props向子组件传递数据子组件使用事件抛出一个值

父组件代码

<template>
  <div class="parent">
    <h4>我是父组件</h4>
    <child :title="title" @getMsg="getMsgFromChild"></child>
    <div>子组件向我传递的消息 <b>{{ msgFromChild }}</b></div>
  </div>
</template>

<script>
// @ is an alias to /src
import child from '@/components/child.vue'

export default {
  data(){
    return {
      title: '我是来自父组件的title',
      msgFromChild: ''
    }
  },
  methods: {
    getMsgFromChild(msg){
      this.msgFromChild = msg
    }
  },
  components: {
    child
  }
}
</script>

子组件代码

<template>
  <div class="child">
    <h4>我是子组件</h4>
    <div>这是来自父组件的title: <b>{{ title }}</b></div>
    <button @click="sendMsgToParent">点我向父组件传递信息</button>
  </div>
</template>
<script>
  export default {
    props: ['title'],
    methods: {
      sendMsgToParent(){
        this.$emit('getMsg','我是来自子组件的信息')
      }
    }
  }
</script>

二、事件总线 $on/$emit

通过事件总线的话我们需要在Vue原型上添加一个Vue实例作为事件总线，实现组件间相互通信,从而不受组件关系影响

// 在main.js中
Vue.prototype.$bus = new Vue()

// 子组件中通过 $bus.$emit发送事件
this.$bus.$emit('getMsgByBus','我是通过事件总线传递的信息')

// 父组件通过 $bus.$on 来监听事件
this.$bus.$on('getMsgByBus',(msg)=>{
  this.msgFromChild = msg
})

在原型上添加一个vue实例其实就是需要用到实例的$emit和$on 方法我们也可以自己写一个事件总线

class Bus {
  constructor(){
    this.callbacks = {}
  }
  $on(name, fn){
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  $emit(name, args){
    if(this.callbacks[name]){
     this.callbacks[name].forEach(cb => cb(args))
    }
  }
}

那么现在就可以在原型上添加Bus的实例达到同样的效果

Vue.prototype.$bus = new Bus()

三、 vuex

四、 provide/inject

五 attrs/listeners

六、边界情况 $root $parent $children $refs

$root

$parent

$children

$refs

Vue-双向绑定v-model

Sun, 30 Aug 2020 13:48:42 GMT

前言

我们都知道v-model可以实现双向绑定，之前对v-model的了解还比较单一，今天来总结一下

单向绑定与双向绑定

单向绑定就是当我们用JavaScript代码更新Model时，View就会自动更新。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

首先单向绑定 vue的响应式系统已经帮我们做了，那么我们如何在用户更新视图时更新数据呢？对于文本输入框，在用户修改时，就会触发input事件，那么可以监听这个input事件，将这个输入框的值赋值到对应的数据

    <input type='text' :value="value" @input="value = $event.target.value"/>

v-model是个语法糖

以上我们已经实现了双向绑定用v-model刚好可以替代这种复杂的语法

    <input type='text' v-model="value" />

哈哈，简洁了不少

其他元素上的v-model

v-model会根据控件类型自动选取正确的方法来更新元素

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

具体参考表单输入绑定

自定义组件实现v-model

当用在组件上时，v-model 则会这样：

    <custom-input
      :value="searchText"
      @input="searchText = $event">
    </custom-input>

这里的$event表示子组件传回来的值

为了让它正常工作，这个组件内的<input>必须：

将其 value attribute 绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

    Vue.component('custom-input', {
      props: ['value'],
      template: `
        <input
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        >
      `
    })

现在 v-model 就应该可以在这个组件上完美地工作起来了：

    <custom-input v-model="searchText"></custom-input>

vue3的v-model

以上都是vue2的v-model vue3对v-model进行了一些改进

首先属性名任意不一定要是value (这里以xxx举例)
事件变成了update:xxx

那么vue3的v-model 对searchText属性进行双向绑定时就是

    <custom-input
      :xxx="searchText"
      @updae:xxx="searchText = $event">
    </custom-input>

子组件接收xxx属性并触发update:xxx事件

    Vue.component('custom-input', {
      props: ['xxx'],
      template: `
        <input
          v-bind:value="xxx"
          v-on:input="$emit('update:xxx', $event.target.value)"
        >
      `
    })

在父组件中使用v-model

    <custom-input v-model:xxx="searchText"></custom-input>

需要注意的是 vue3的v-model语法取代了.sync语法

位操作符与逻辑操作符

Mon, 17 Aug 2020 21:36:55 GMT

前言

在判断分支中使用符号"&“和”&&"作为逻辑判断是经常见的，但是这两者又有什么区别呢？他们分别代表的位运算符和逻辑运算符又有什么区别呢？

位操作符

位操作符用于在最基本的层次上，即按内存中表示数值的位来操作数值

补充知识点负数存储

负数同样是以二进制存储但使用的格式是二进制补码

计算一个数值(负数)的二进制补码，需要经过三个步骤 1）求这个数值绝对值的二进制码例如要求 -18的二进制补码先求出18的二进制码 2）求二进制反码即将0换为1 1换为0 3）最后二进制反码 + 1

1 按位非( ~ )

执行按位非的结果就是返回数值的反码

~25 = -26
~10 = -11
~-10 = 9

然后我们发现了规律好像就是 这个数的负数减一 我们知道一个数的负数二进制存储是该数取反 +1 那么很容易推出一个数的反码就是该数的负数 -1

2 按位与( & )

按位与只有在两个数值的对应位都是1时才返回1 任何一位是0 结果都是0

0b110 & 0b011  // 2
25 & 3     // 1

3 按位或( | )

只有两个数值的对应位都是0的情况下才返回0 否则返回1

0b110 | 0b011  // 0b111 => 7
0b001 | 0b011  // 0b011 => 3

4 按位异或( ^ )

这两个数值的对应位上有一个1时才返回1 否则返回0

0b011 ^ 0b0101    // 0b0110 => 6
25 ^ 3   // 26

异或的应用

任何数和0异或得到他本身和自己异或得到0

15 ^ 0   // 15
15 ^ 15  // 0

5 左移( << )

这个操作符会将所有位向左移动指定的位数向左移动后原始值的右侧会多出空位，左移操作会用0来填充这些空位以便得到的结果是一个32位的二进制数

2 << 5  // 64   10 => 1000000

需要注意的是，左移不会影响操作数的符号位

-2 << 5 // - 64

左移的应用

左移一位相当于在右边补一个0 相当于原数 * 2

2 << 1  // 4
5 << 1  // 10

6 有符号的右移( >> )

有符号的右移会将所有位向右移动但保留符号位有符号的右移与左移相反

64 >> 5   // 2   1000000 => 10

移动过程中也会出现空位不过空位是出现在原数值的左侧符号位的右侧而此时ES会用符号位的值来填补空位

7 无符号的右移( >>> )

这个操作会将所有的32位都像右移动即符号位也右移无符号右移是以0来填充空位所以,对正数来说, 无符号的右移与有符号右移的结果相同

64 >> 5   // 2
64 >>> 5  // 2

但对于负数来说，情况就不一样了

-64 >>> 5  //  134217726

因为负数是以其绝对值的二进制补码表示,无符号右移会把这个二进制当做正数表示，所以会导致右移后的结果非常大

逻辑操作符

逻辑运算符用于进行逻辑运算的，他的返回值只有true和false

逻辑非( ! )

逻辑非首先会操作数转换为对应的布尔值，然后对其求反

我们知道js中有五大falsy值分别是 NaN 0 空字符串 undefined null 所以对这五个falsy值取反得到的是true

!undefined  // true
!null       // true
!''         // true
!0          // true
!NaN        // true

需要注意的是js中空数组和空对象对应的布尔值都是true

!{}  // false
![]  // false

使用两次逻辑非就可以得到一个数的布尔值相当于Boolean()函数

!!{}  // true
!!0   // false
!!undefined // false

逻辑或( || )

两个表达式只要有一个是true 那么结果就是true 短路操作符如果第一个表达式结果是true 那么就不会看第二个表达式

2 > 3 || 3 < 5    // true
2 > 3 || 3 > 5    // false
false || true     // true
false || false    // false

逻辑与( && )

只有两个表达式结果都为true 结果才为true 否则为false 短路操作符如果第一个表达式是false 那么直接返回false 不会看第二个表达式

2 > 3 && 3 < 5    // false
2 > 3 && 3 > 5    // false
2 < 3 && 3 < 5    // true
false && true     // true
true && true      // true

排序算法--快速排序

Sun, 09 Aug 2020 12:50:45 GMT

快速排序

什么是快速排序？

通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列

排序流程

(1)首先设定一个分界值pivot，通过该分界值将数组分成左右两部分。
(2)大于pivot的放到右边,小于pivot的放到左边
(3)对于左侧和右侧的数据又可以用递归的方式进行排序

非原地快速排序

非原地排序即不需要在原数组上修改顺序所以我们可以自己定义一个结果数组以arr[0]作为分界值

代码如下

function quick_sort(arr){
    if(arr.length < 2){
        return arr
    }else{
        let pivot = arr[0]
        let left = [], right = []
        for(let i=1;i<arr.length;i++){
            if(arr[i] <= pivot){
                left.push(arr[i])
            }else{
                right.push(arr[i])
            }
        }
        return [...quick_sort(left),pivot,...quick_sort(right)]
    }
}

原地快速排序

不能创建新数组必须就地排序

function quick_sort_in_place(arr){
    var quick_sort = (arr,start,end)=>{
        if(end - start <=1) return
        let pivotIndex = handlePivot(arr,start,end)
        quick_sort(arr,start,pivotIndex)
        quick_sort(arr,pivotIndex+1,end)
    }
    quick_sort(arr,0,arr.length)
}

// 原地将小的放左边 大的放右边  找到基准值的下标
function handlePivot(arr,start,end){
    if(end - start <= 1) return end - start - 1
    let k = start + 1
    while(end - k > 0){
        if(arr[k] > arr[start]){
            swap(arr,k,end-1)   // 当最后一次arr[k] > arr[start]时 会自己跟自己交换
            end --
        }else{
            k++
        }
    }
    swap(arr,start,k-1)
    return k - 1
}

随机化快排

每一次都以第一个数作为分界值如果数据不太巧的话会让交换的次数更多所以可以随机选择排序数列的任意一个作为分界值找到后与第一个数交换位置

function handlePivot(arr,start,end){
    if(end - start <= 1) return end - start - 1

    // 在[start,end)之间随机生成一个位置  然后与第一个数交换位置
    let random = Math.floor(Math.random()*(end - start)+start)
    swap(arr[random],arr[0])

    let k = start + 1
    while(end - k > 0){
        if(arr[k] > arr[start]){
            swap(arr,k,end-1)   // 当最后一次arr[k] > arr[start]时 会自己跟自己交换
            end --
        }else{
            k++
        }
    }
    swap(arr,start,k-1)
    return k - 1
}

关于CSS的一些零碎应用整理

Wed, 29 Jul 2020 22:56:26 GMT

关于CSS的一些零碎应用整理

1 隐藏滚动条

.menuList::-webkit-scrollbar {
    display:none
}

1 :after+content 清除浮动

// 是给浮动元素的父元素加上
.floatEleParent::after{
    display:block;
    content:"clear";
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

3 select 去掉默认的下拉箭头

select {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
}

4 修改input placeholder 样式

input::-moz-placeholder {
    color:#7DC0B8; font-size:16px;
}

5 background linear-gradient 线性渐变设置位置

// 从上到下 开始是#11998E 到62%开始渐变为#38EF7D
linear-gradient(#11998E 62%, #38EF7D);

// 渐变轴为45度，从蓝色渐变到红色
linear-gradient(45deg, blue, red);

// 从右下到左上、从蓝色渐变到红色
linear-gradient(to left top, blue, red);

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
linear-gradient(0deg, blue, green 40%, red);

6 background-clip: text 背景被裁剪成文字的前景色

7 单行文字、多行文字溢出省略

// 单行文字
div {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

// 多行文字
div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

8

发布自己的npm包

Sun, 19 Jul 2020 22:42:45 GMT

创建npm项目

1 创建一个目录进入这个目录 2 npm init 创建 package.json

name 包名 version 版本号通常是1.0.0 main 入口文件通常是index.js

3 创建入口文件 index.js 4 入口文件 index.js 添加如下内容

  // 导出 printMsg函数
  exports.printMsg = function() {
    console.log("This is a message from the demo package");
  }

5 创建readme.md 文件发布后会显示在页面上

发布到npm官网

1 注册npm账号 2 npm login 登录 npm whoami 确认登录 3 npm publish 发布到官网 4 测试 https://npmjs.com/package/<package> 查看是否发布成功

使用自己的npm包

1 进入另一个目录 2 npm install <your-package> 3 创建一个test.js文件，requier这个包，并调用printMsg方法

let value = require('xiaoyu-npm-demo')
value.printMsg()

4 执行node test.js 查看是否有输出

动态规划的那些题

Sun, 12 Jul 2020 21:57:52 GMT

动态规划

1 将数字翻译成字符串

给定一个数字，我们按照如下规则把它翻译为字符串：0 翻译成 “a” ，1 翻译成 “b”，……，11 翻译成 “l”，……，25 翻译成 “z”。一个数字可能有多个翻译。请编程实现一个函数，用来计算一个数字有多少种不同的翻译方法。

输入: 12258 输出: 5 解释: 12258有5种不同的翻译，分别是"bccfi", "bwfi", "bczi", "mcfi"和"mzi"

// 主要就是判断最后两个数字是否在10-25之间
var translateNum = function(num) {
    var num_str = num.toString()
    var n = num_str.length
    var d = [1]
    d[-1] = 1
    for(let i=1;i<n;i++){
        let dig = +num_str.substr(i-1,2)
        if(dig >= 10 && dig <=25){
            d[i] = d[i-1] + d[i-2]
        }else{
            d[i] = d[i-1]
        }
    }
    return d[n-1]
}

2 最长重复子数组

给两个整数数组 A 和 B ，返回两个数组中公共的、长度最长的子数组的长度。

输入: A: [1,2,3,2,1] B: [3,2,1,4,7] 输出: 3 解释: 长度最长的公共子数组是 [3, 2, 1]

状态转移方程 dp[i][j] = dp[i-1][j-1] + 1

const findLength = (A, B) => {
    const m = A.length;
    const n = B.length;
    const dp = Array.from(Array(n+1),()=>Array(n+1).fill(0))
    let res = 0;
    for (let i = 1; i <= m; i++) {
        for (let j = 1; j <= n; j++) {
            if (A[i - 1] == B[j - 1]) {
            dp[i][j] = dp[i - 1][j - 1] + 1;
            }
            res = Math.max(dp[i][j], res);
        }
    }
    return res;
}

3 交错字符串

给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的。

输入: s1 = "aabcc", s2 = "dbbca", s3 = "aadbbcbcac" 输出: true

输入: s1 = "aabcc", s2 = "dbbca", s3 = "aadbbbaccc" 输出: false

f[i][j] |= f[i-1][j] && s2[i-1] === s3[p]

var isInterleave = function(s1, s2, s3) {
    let n1 = s1.length
    let n2 = s2.length
    let n3 = s3.length
    if(n1+n2 !== n3){
        return false
    }

    let f = new Array(n2+1)
    for(let i=0;i<n2+1;i++){
        f[i] = []
    }
    f[0][0] = true

    for(let i=0;i<n2+1;i++){
        for(let j=0;j<n1+1;j++){
            let p = i+j-1
            if(i>0){
                f[i][j] |= f[i-1][j] && s2[i-1] === s3[p]
            }
            if(j>0){
                f[i][j] |= f[i][j-1] && s1[j-1] === s3[p]
            }
        }
    }
    return f[n2][n1]
}

二叉树的反序列化

Sun, 05 Jul 2020 21:37:43 GMT

前言

遍历树的两个策略

DFS 分为先序遍历中序遍历后序遍历 BFS 可以按照层次的顺序从上到下遍历所有的节点

准备 TreeNode 构造函数

function TreeNode(val){
  this.val = val
  this.left = this.right = null
}

1. DFS 先序遍历

反序列化

// 将先序遍历后的字符串 转为二叉树结构
var deserialize = (data) => {
  const list = data.split(',')       // 转成list数组
  return buildTree(list)             // 构建树，dfs的入口
}

var buildTree = (list) => {
  let nodeVal = list.shift()
  if(nodeVal === 'X') return null

  let node = new TreeNode(nodeVal)
  node.left = buildTree(list)
  node.right = buildTree(list)
  return node
}

序列化

// 将二叉树先序遍历 返回字符串
var serialize = (root) => {
  if (root == null) return 'X,' // 遇到null节点
  const leftSerialized = serialize(root.left)   //左子树的序列化字符串
  const rightSerialized = serialize(root.right) //右子树的序列化字符串
  return root.val + ',' + leftSerialized + rightSerialized // 根|左|右
}

中序遍历可以反序列化吗?

答案是否定的请看下图

如果增加一个条件，即二叉树的高度平衡，是否可以唯一确定一个二叉树

答案仍然是否定的

后序遍历可以反序列化吗?

2 BFS

序列化

var serialize = (root) => {
  let queue = [root]
  let res = []

  while(queue.length){
    let node = queue.shift()
    if(node){
      res.push(node.val)
      queue.push(node.left)
      queue.push(node.right)
    }else{
      res.push('X')
    }
  }
  return res.join(',')
}

反序列化

var deserialize = (data) => {
  if(data === 'X') return null
  let list = data.split(',')
  let root = new TreeNode(list[0])

  let queue = [root]
  let cursor = 1
  while(cursor < list.length){
    node = queue.shift()
    leftVal = list[cursor]
    rightVal = list[cursor+1]
    cursor += 2
    if(leftVal !== 'X'){
      let leftNode = new TreeNode(leftVal)
      node.left = leftNode
      queue.push(leftNode)
    }
    if(rightVal !== 'X'){
      let rightNode = new TreeNode(rightVal)
      node.right = rightNode
      queue.push(rightNode)
    }
  }
  return root
}

二叉树的序列化(遍历二叉树)

Sun, 28 Jun 2020 23:20:30 GMT

前言

遍历树的两个策略

DFS 分为先序遍历中序遍历后序遍历 BFS 可以按照层次的顺序从上到下遍历所有的节点

构造一颗二叉树

const node = (value,left,right)=>{
  return {
    value,
    left,
    right
  }
}

const binaryTree =
  node("A",
    node("B",node("D")),
    node("C",
      node("E",undefined,node("G")),
      node("F",node("H"),node("J"))
    )
  )

1. DFS 先序遍历

利用递归先序遍历

let resultFirst = []
const traverseRootFirst = (bTree) => {
  if(!bTree) { return}
  resultFirst.push(bTree.value)
  traverseRootFirst(bTree.left)
  traverseRootFirst(bTree.right)
}
traverseRootFirst(binaryTree)
console.log('先序遍历')
console.log(resultFirst)  // ["A", "B", "D", "C", "E", "G", "F", "H", "J"]

不利用递归先序遍历

自己维护一个栈当前节点指向根节点

如果当前节点不为空就将当前节点入栈并push到结果数组中并让当前节点指向该节点的左节点
如果当前节点为空就从栈中pop一个节点并让当前节点指向pop出节点的右节点

如果栈不为空或者当前节点不为空重复以上步骤

let resultFirst2 = []
const traverseRootFirst2 = (bTree) => {
  const stack = []
  let current = bTree
  while(stack.length || current){
    if(current){
      resultFirst2.push(current.value)
      stack.push(current)
      current = current.left
    }else{
      current = stack.pop()
      current = current.right
    }
  }
}
traverseRootFirst2(binaryTree)
console.log('\n 不利用递归先序遍历')
console.log(resultFirst2)  // ["A", "B", "D", "C", "E", "G", "F", "H", "J"]

2 DFS 中序遍历

递归

let resultMiddle = []
const traverseRootMiddle = (bTree) => {
  if(!bTree) { return }
  traverseRootMiddle(bTree.left)
  resultMiddle.push(bTree.value)
  traverseRootMiddle(bTree.right)
}
traverseRootMiddle(binaryTree)
console.log('中序遍历')
console.log(resultMiddle)   // ["D", "B", "A", "E", "G", "C", "H", "F", "J"]

不利用递归

自己维护一个栈当前节点指向根节点

如果当前节点不为空就让当前节点指向该节点的左节点
如果当前节点为空就从栈中pop一个节点并将该节点push到结果数组中并将当前节点指向该节点的右节点

如果栈不为空或者当前节点不为空重复以上步骤

与先序遍历唯一不同的就是什么时候放入结果数组

let resultMiddle2 = []
const traverSeRootMiddle2 = (bTree) => {
  const stack = []
  let current = bTree
  while(stack.length || current){
    if(current){
      stack.push(current)
      current = current.left
    }else{
      current = stack.pop()
      resultMiddle2.push(current.value)
      current = current.right
    }
  }
}
traverSeRootMiddle2(binaryTree)
console.log('\n 不利用递归中序遍历')
console.log(resultMiddle2)  // ["D", "B", "A", "E", "G", "C", "H", "F", "J"]

3 DFS 后续遍历

递归

let resultLast = []
const traverseRootLast = (bTree) => {
  if(!bTree) { return }
  traverseRootLast(bTree.left)
  traverseRootLast(bTree.right)
  resultLast.push(bTree.value)
}
traverseRootLast(binaryTree)
console.log('后序遍历')
console.log(resultLast)  // ["D", "B", "G", "E", "H", "J", "F", "C", "A"]

4 BFS

维护一个队列将根节点放入队列中

从队列中取出一个节点node
如果node节点为空的话就将当前的左右节点先后放入队列中
如果当前节点为空队列中push null

如果队列部位空重复以上步骤直到队列中的节点全部被取出遍历完成

var serialize = (root) => {
  let queue = [root]
  let res = []

  while(queue.length){
    let node = queue.shift()
    if(node){
      res.push(node.val)
      queue.push(node.left)
      queue.push(node.right)
    }else{
      res.push('X')
    }
  }
  return res
}

JS零碎知识点整理

Sun, 24 May 2020 21:09:56 GMT

关于JS的零碎知识点整理

1. 保留两位小数

四舍五入

var num = 2.446242342
num = num.toFixed(2)     // 输出是字符串 需要用parseFloat或Number再转一下

不四舍五入

Math.floor(15.7784514000 * 100) / 100       // 15.77

2. 字符串反转

利用数组的reverse方法

let str = 'abcdefg'
let str_r1 = str.split('').reverse().join('')    // 'gfedcba'
let str_r2 = [...str].reverse().join('')         // 'gfedcba'

3. 一位数左边补0

('0'+9).slice(-2)       // '09'
('0'+12).slice(-2)      // '12'
(''+9).padStart(2,0)    // '09'
(''+12).padSart(2,0)    // '12'

4. Object.is()判断两个值是否相等

isNaN(NaN)           // true
Object.is(NaN,NaN)   // true
Object.is(1,1)       // true

5. 字符与ASCII码互转

String.fromCharCode(97)  // 'a'
String.fromCharCode(65)  // 'A'
'a'.charCodeAt()         // 97
'abc'.charCodeAt(1)      // 98

6. Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述（descriptor）。 ES8 引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

7.Object.getOwnPropertyDescriptors() 实现深拷贝

该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题

8. 右移一位可以实现除以2并向下取整

5 >> 1   // 2
4 >> 1   // 2
9 >> 1   // 4
10 >> 1  // 5

9. typeof

typeof 对初始化(未赋值)的变量返回undefined 对未声明的变量也会返回undefined ，而不是报错

var message
typeof message    // undefined
typeof message2   // undefined

10. isFinite() 判断一个数值是否有穷

正或负的infinity不能参与计算

isFinite(3)          // true
isFinite(Infinity)   // false

11. isNaN()的用法

接受一个参数，会先将这个值转为数值，如果不能转为数字，直接返回true

isNaN(true)       // false
isNaN('abc')      // true
isNaN(10)         // false
isNaN('10')       // false
isNaN(null)       // false
isNaN(undefined)  // true

12. (123).toString() 与 ‘123'.toString()

(123.toString()) 是 Number.prototype.toString 可用于数字转为各种进制

(45).toString(2)  // "101101"
(45).toString(8)  // "55"
(45).toString(16) // "2d"
(45).toString()   // "45"  为空则默认为10进制

'123'.toString() 是 String.prototype.toString

13. Array.from()生成值为0的二维数组

// 错误的写法
arr = new Array(5).fill(new Array(5).fill(0))
// 如果这时只改变arr[0][1] 那么其他项的第一列也会跟着变换
arr[0][1] = 3
console.log(arr[1][1])   // 3

// 正确的写法
arr = Array.from(Array(5),()=>Array(5).fill(0))
arr[0][1] = 3
console.log(arr[1][1]) // 0

14 码点与字符串互换

String.prototype.charCodeAt() 返回 0 到 65535 之间的整数(十进制)，表示给定索引处的 UTF-16 代码单元 String.fromCharCode() 返回由指定的UTF-16代码单元序列创建的字符串

'z'.charCodeAt()              // 122
String.fromCharCode('122','0o172','0x7a')    // "zzz"

但是对于超过两个字节的字符ES5无法正确转换

String.fromCharCode(0x20BB7)   // "ஷ"  乱码  因为0x20BB7超过两个字节,无法正确解读

ES6的两个方法可以解决这一bug

String.codePointAt() 返回UTF-16的完整码点 String.fromCodePoint() 返回由指定的UTF-16代码单元序列创建的字符串

"🚀".codePointAt()              // 128640
String.fromCodePoint(128640)    // "🚀"
"𠮷".codePointAt()              // 134071
String.fromCodePoint(0x20BB7,134071)   // "𠮷𠮷"

// 对于小于两个字节的也完全适用
"a".codePointAt()               // 97
String.fromCodePoint(97)        // "a"
"z".codePointAt()               // 122
String.fromCodePoint('122','0o172','0x7a')   // "zzz"

另外一些bug,请参考javascript有个unicode的天坑

15 生成指定范围的随机数随机整数

Math.random            //  [0,1)
Math.random()*10       //  [0,10)

Math.ceil(Math.random()*10)       //  [0,10] 为0的概率极小 向上取整
Math.floor(Math.random()*10)      //  [0,9]

Math.round(Math.random())         //  只能是0或者1  概率各一半
Math.round(Math.random()*10)      //  [0,10]，其中获取最小值0和最大值10的几率少一半

所以希望生成[min,max]的随机数，公式如下：
// parseInt() 和 Math.floor()结果都是向下取整
parseInt(Math.random()*(max - min + 1) + min,10)
Math.floor(Math.random()*(max - min +1) + min)

正则入门

Sun, 08 Dec 2019 19:56:56 GMT

创建一个正则表达式

可以使用正则表达式字面量，也可以通过RegExp构造函数 var re = /abc/gi var re = new regexp("abc",'gi')

其中abc是re.source gi是re.flags

lastIndex 改变

注意: 在全局匹配模式下，lastIndex的值在每次调用exec()或test()后都会增加，而在非全局模式下则始终保持不变。

var regex = /foo/g;

// regex.lastIndex is at 0
regex.test('foo'); // true

// regex.lastIndex is now at 3
regex.test('foo'); // false

String.prototype.match()

返回值

如果使用g标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组。如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。

'hhabcdefxx'.match(/abc(?<xxx>def)/g)  // ['abcdef']
let res = 'hhabcdefxx'.match(/abc(?<xxx>def)/)   //
// ["abcdef", "def", index: 2, input: "hhabcdefxx", groups: {xxx: def}]

res表示的内容

res[0] 匹配到的字符串 res[1,n] 分组匹配到的字符串 res['index'] 匹配到的字符串位于原始字符串的索引 res['input'] 原始字符串 res['groups'] 各个分组匹配到的字符串 key值为分组名

关于正则的灵活运用

Sun, 08 Dec 2019 19:56:56 GMT

1 替换字符串中最后出现的字符串

(?!exp) 零宽度负预测先行断言

'abcxxyyabczioewf'.replace(/abc(?!\w*abc)/,'ABC')   // "abcxxyyABCzioewf"
'abcabcxxxabcbxx'.replace(/abc(?!\w*abc)/,'ABC')    //  "abcabcxxxABCbxx"

2 将数字转为金额表示

3 计算字符串中重复出现的字符的个数

// 'abc' = > 0
// 'aabbb' => 2   // 因为 a和b重复出现了，是两个字符
function duplicateCount(text){
  return (text.toLowerCase().split('').sort().join('').match(/(.)\1+/g) || []).length
}

4 交换字符串中的两个单词 (mdn)

使用$1 和 $2 代替替换文本

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1"); // Smith, John

5 修改日期格式

var reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
'2020-06-20'.replace(reg,'$<year>/$<month>/$<day>')      // "2020/06/20"

var reg = /(\d{4})-(\d{2})-(\d{2})/
'2020-06-20'.replace(reg,'$1/$2/$3')       // "2020/06/20"

6 将驼峰命名法改为 "-" 命名

'borderTop'.replace(/[A-Z]/g,value=>'-'+value.toLowerCase())   // border-top

7 将华氏温度转为摄氏温度 (mdn)

8 leetCode 8 字符串转整数 (规则与parseInt相同)

即用正则实现parseInt

var myAtoi = function(str) {
  var INT_MAX = 2**31-1
  var INT_MIN = (-2)**31
  var num = str.match(/^\s*([\+\-]?\d+)/)
  return Math.max(Math.min(num ? num[1]: 0,INT_MAX),INT_MIN)
}

9 leetCode 16.18 模式匹配

你有两个字符串，即pattern和value。 pattern字符串由字母"a"和"b"组成，用于描述字符串中的模式。例如，字符串"catcatgocatgo"匹配模式"aabab"（其中"cat"是"a"，"go"是"b"），该字符串也匹配像"a"、"ab"和"b"这样的模式。但需注意"a"和"b"不能同时表示相同的字符串。编写一个方法判断value字符串是否匹配pattern字符串。

输入： pattern = "abba", value = "dogcatcatdog" 输出： true

// 思路 命名分组 反向引用
var patternMatching = function(pattern, value) {
  if(pattern === '') return value === ''
  let reg = pattern.replace('a','(?<a>\\w*)').replace('b','(?<b>\\w*)')
  reg = reg.replace(/(?<!\<)a/g,'\\k<a>').replace(/(?<!\<)b/g,'\\k<b>')
  let match = new RegExp('^'+reg+'$').exec(value)
  return !!match && match[1] !== match[2]
}

10 计算字符串中重复出现的字符的个数

'abc' = > 0 // 没有重复的字符 'aabbb' => 2 // 因为 a和b重复出现了，是两个字符

// match 使用g标志，则将返回与完整正则表达式匹配的所有结果
function duplicateCount(text){
  return (text.toLowerCase().split('').sort().join('').match(/(.)\1+/g) || []).length
}

11 密码正则 6-20位字母与数字的组合

要求字母与数字的组合不能全为数字也不能全为字母

// 1 排除法
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,20}$/
// 2 包含法
/^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,20})$/      // 最后的一组括号可以不要

如果要求还要包含大写字母

/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(.{6,20})$/

我的问题 为什么 (?=exp)可以判断而 (?<=exp) 不可以

原来是因为 ?<=不能匹配任意长度的东西

JS RSA AES 加解密

Wed, 13 Nov 2019 10:16:41 GMT

前言

需求:

对加密文本 textPlain 进行 AES 加密 AES 加密中的 key 通过 RSA 加密并通过加解签对解密结果进行验证

本文为了统一, 随机数 key 为固定字符串

let key = "zCpdywHdFfPYQwYi";
let textPlain = "{id:'123',name:'xiaoyu',address:'address:'上海市浦东新区'}";

如果 key 随机生成,代码如下

let key = randomString(16);

function randomString(len) {
  len = len || 32;
  // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  let maxPos = $chars.length;
  let str = "";
  for (i = 0; i < len; i++) {
    str += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return str;
}

其中 RSA 加密中的公密钥可通过此链接生成

let privateKey = `-----BEGIN RSA PRIVATE KEY-----
    MIICWwIBAAKBgG+u7KERg6DWKDhK7NRUe63FPpxbzBAUWxULzjYCJexsvgzXjj/m
    UPvTR/wjFXf49sidHDcEwhzx18k8aJ0+Rt5AUtNExTeAIIGo/mytyQwlS0GuazdW
    Sqw+1IOEJe88f/I62prFuuVuY+cIxucXDVpxwv5mfkMjeiTIixWyju4tAgMBAAEC
    gYABkOtiitNUswwXVf2iMJkXY7ewC5198DsivWqj2T3c5d14YqFtBfbGwTy2LWvE
    peoYABQANYHfVAjZmo5A/jmSKWHaCHd+k8sMQeThdklGVGHBctZ46aJ32c4CRmZa
    pHAtgYVYBxOyn/55WlJb9cYEYGE1M9ouOmsEwW/sUruyZQJBANmmXVhte5LNCrmr
    c7GFbJQLNT4YTcGPXHyRdxjGBRfcgAK0IHREUrBGjCY+N4DYd3QxRYTAF+EYileF
    ou3C1bcCQQCDXKz9d3pibVtfi/qcO6bn3Bdqfv641sEO5++dD/SCAeUSTrd8KO/e
    ZoVIkYV8lcj5Ol6cRhXr9TGTGHUXzbs7AkACvxmwcvk7OgEnpKU6GT/sglOyq+XX
    SnLVU5SYKG+KBItM/W7naLFObiV4mhJjOtgPDEwfR7lFauTcA+CxdWLzAkBaOEVr
    lCqO/VKbTdVihim85tGCSBSEOKLBrRRJyBKDU+/TYhLtCGSuV7VEwQVwKqOsYKVo
    KU6XD4Dr6QlKvvbPAkEAkjlU5ua5BfGh601U8va1xWyxh0TqemBTsyoQ8bSwOpZH
    NgGjWqv5Z0QoK99pJv7VfReKbLyIg2MXhpigTogeWA==
    -----END RSA PRIVATE KEY-----`;

let publicKey = `-----BEGIN PUBLIC KEY-----
    MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgG+u7KERg6DWKDhK7NRUe63FPpxb
    zBAUWxULzjYCJexsvgzXjj/mUPvTR/wjFXf49sidHDcEwhzx18k8aJ0+Rt5AUtNE
    xTeAIIGo/mytyQwlS0GuazdWSqw+1IOEJe88f/I62prFuuVuY+cIxucXDVpxwv5m
    fkMjeiTIixWyju4tAgMBAAE=
    -----END PUBLIC KEY-----`;

另外还需下载aes.js jsencrypt.js jsrsasign.js

<script src="./jsencrypt.js"></script>
<script src="./aes.js"></script>
<script src="./jsrsasign-all-min.js">

RSA 加解密 key

let RSACrypt = new JSEncrypt();

RSA 加密

RSACrypt.setKey(publicKey);
let keyEnc = RSACrypt.encrypt(key); // 每次加密结果不一致

RSA 解密

RSACrypt.setKey(privateKey);
let keyDec = RSACrypt.decrypt(keyEnc); // zCpdywHdFfPYQwYi

AES 加解密

AES 加密

let textEnc = AESEncrypt(textPlain, key); // 每次加密结果一致
// xoJ9fYIqyoAA3Qbhm/h8nGy4KjcmHVtusheMTd61mpUB8Lr6SDFQ1pWimi+WwlZyL5ncvZ9kQKjoRcRXUB7/D6uVkl724DzxBu/Ns1ivWnA=

// AES加密函数
function AESEncrypt(textPalin, key) {
  let key = CryptoJS.enc.Utf8.parse(key);
  let textEnc = CryptoJS.AES.encrypt(textPlain, key, {
    iv: CryptoJS.enc.Utf8.parse("1234567812345678"),
    mode: CryptoJS.mode.CBC,
    //padding: CryptoJS.pad.Iso10126
  });
  return textEnc.toString();
}

AES 解密

// 利用解密后的keyDec解密textEnc
let textDec = AESDecrypt(textEnc, keyDec); //  {id:'123',name:'xiaoyu',address:'address:'上海市浦东新区'}

// AES解密函数
function AESDecrypt(word, key) {
  let key = CryptoJS.enc.Utf8.parse(key);
  let decrypt = CryptoJS.AES.decrypt(word, key, {
    iv: CryptoJS.enc.Utf8.parse("1234567812345678"),
    mode: CryptoJS.mode.CBC,
    //padding: CryptoJS.pad.Pkcs7
  });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

RSA 加解签

RSA 加签

let sign = getSign(textPlain); // 每次加签结果一致
// 3b073ad8655293c8ec92dddeb6b986fbad190d642e2ca74f57f90aeedb1645be20449e0e3a7824f483d72de120221b0a29f2adf5c0cd0b913cee01d8d6a13eeb55c9f2b9a3868dc29181cddbd0fde15264d40a46f74ab7db23a09bc48d93a376eb8d50c84e67a7d08ea9810a76badfc4bb7f5e8cdbd045ef3551389eb1b9cef7

// 加签函数
function getSign(signData) {
  let signPrivateKey = privateKey;
  let sig = new KJUR.crypto.Signature({
    alg: "SHA1withRSA",
    prvkeypem: signPrivateKey,
  });
  let hashAlg = "sha1"; // 设置sha1
  let sign = sig.signString(signData, hashAlg); // 加签
  return sign;
}

RSA 验签

let result = verifySign(textDec, sign); // true

// 验签函数
function verifySign(standData, signData) {
  try {
    let signPublicKey = publicKey;
    let sig = new KJUR.crypto.Signature({
      alg: "SHA1withRSA",
      prvkeypem: signPublicKey,
    });
    sig.updateString(standData);
    let result = sig.verify(signData);
    return result;
  } catch (e) {
    console.error(e);
  }
}

在 vue 项目中使用加解密

安装各加密模块

npm install crypto-js
npm install jsencrypt
npm install jsrsasign

import AESCrypto from "crypto-js";
import JSEncrypt from "jsencrypt";
import Jsrasign from "jsrsasign";

RSA 加解密对象需要初始化

var RSACrypto = new JSEncrypt();

在加解签时需要修改

// 将 new KJUR.crypto.Signature 改为
new Jsrasign.Signature();

利用 Crypto 进行格式转换

字符串转其他格式

let str = "abc";
let str_utf8 = CryptoJS.enc.Utf8.parse(str);

// 转为 hex
let str_hex = CryptoJS.enc.Hex.stringify(str_utf8); // '616263'

// 转为 base64
let str_base64 = CryptoJS.enc.Base64.stringify(str_utf8); // "YWJj"

hex 转为其他格式

let hex = "616263";
let hex_hex = CryptoJS.enc.Hex.parse(hex);

// 转为字符串
hex_str = CryptoJS.enc.Utf8.stringify(hex_hex); // 'abc'

// 转为 base64
let hex_base64 = CryptoJS.enc.Base64.stringify(hex_hex); //  "YWJj"

我遇到的一个问题

以上所写的都是客户端加密客户端解密,但是通常工作都是客户端加密,服务端解密,服务端加密,客户端解密。

当后端传回来的 keyEnc 为

6e1c9600284212f2425d9a490a1f4d9b2d0e2d8605691cc02debe2dcf7a4b6cc51f81534ed6df592cdb035e14d03b8276a90192b76ba51c240d8e26b55bb9ad195b1044fbe5ce444c3be2940f33b698df812020619c1e4b4071361732d8f0d6fe98c222467d64ce8f0a9f77a02eef22b57833e6474e5fc5cf4e00c97f2706fad

将这个 16 进制字符串转为 base64,然后用RSACrypt.decrypt对它进行解密,得到的结果却是茁yˎѬ۽ܽ_뀅,然后代入 AES 解密得到的是乱码。然后用 node 去解密得到是<Buffer b8 0c c1 79 cb 4e d1 ec db bd dc 7d 5f ab 80 05>,通过toString()得到的是,通过toString('hex')得到b80cc179cb4ed1ecdbbddc7d5fab8005,与茁yˎѬ۽ܽ_뀅转为的 16 进制并不一样。将这个 16 进制字符串带入 AES 解密,得到了正确的解密结果。这样看来,node 解密的结果是正确的，难道 js 的解密方法不对吗？

AES 解密如果 key 是 16 进制的话

// 将 let key = CryptoJS.enc.Utf8.parse(key) 改为
let key = CryptoJS.enc.Hex.parse(key);

然后查看源码的时候发现在pkcs1unpad2函数里有 utf-8 decode,仔细研究发现这个 b80cc179cb4ed1ecdbbddc7d5fab8005不是一个 utf-8 编码的字符串,因为根据utf-8 的编码规则,没有10110110开头的,但是源码把它当作 utf-8 的 16 进制解析,所以与 node 结果不一致。

那我能不能不让它 decode,在 decode 之前就直接得到它

function pkcs1unpad2(d, n) {
  // ...
  var array = [];
  while (++i < b.length) {
    var c = b[i] & 255;
    array.push(c);
  }
  array = array
    .map((value) =>
      value.toString(16).length === 1
        ? 0 + value.toString(16)
        : value.toString(16)
    )
    .join("");

  return array;
}

然后这里得到跟 node 解密一样的 16 进制字符串,问题已解决。

因为后台进行 RSA 加密的时候,key 并不一定就是字符串,也有可能就是非 utf-8 编码的 16 进制的 Buffer。比如：

var key_utf16 = "b80cc179cb4ed1ecdbbddc7d5fab8005";
var key = Buffer.from(key_utf16, "hex");

这时我们再用 utf-8 解码的时候，会得到错误的结果。

NodeJS AES RSA 加解密

Wed, 06 Nov 2019 17:51:46 GMT

前言

需求:

对加密文本textPlain进行AES加密,AES加密中的key通过RSA加密,并通过加解签对解密结果进行验证

本文为了统一, 随机数key为固定字符串

let key = 'zCpdywHdFfPYQwYi'
let textPlain = "{id:'123',name:'xiaoyu',address:'address:'上海市浦东新区'}"

如果key随机生成,代码如下

let key = randomString(16)

function randomString(len) {
  len = len || 32
  // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  let maxPos = $chars.length;
  let str = ''
  for (i = 0; i < len; i++) {
    str += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return str;
}

其中RSA加密中的公密钥可通过此链接生成

let privateKey = `-----BEGIN RSA PRIVATE KEY-----
MIICWwIBAAKBgG+u7KERg6DWKDhK7NRUe63FPpxbzBAUWxULzjYCJexsvgzXjj/m
UPvTR/wjFXf49sidHDcEwhzx18k8aJ0+Rt5AUtNExTeAIIGo/mytyQwlS0GuazdW
Sqw+1IOEJe88f/I62prFuuVuY+cIxucXDVpxwv5mfkMjeiTIixWyju4tAgMBAAEC
gYABkOtiitNUswwXVf2iMJkXY7ewC5198DsivWqj2T3c5d14YqFtBfbGwTy2LWvE
peoYABQANYHfVAjZmo5A/jmSKWHaCHd+k8sMQeThdklGVGHBctZ46aJ32c4CRmZa
pHAtgYVYBxOyn/55WlJb9cYEYGE1M9ouOmsEwW/sUruyZQJBANmmXVhte5LNCrmr
c7GFbJQLNT4YTcGPXHyRdxjGBRfcgAK0IHREUrBGjCY+N4DYd3QxRYTAF+EYileF
ou3C1bcCQQCDXKz9d3pibVtfi/qcO6bn3Bdqfv641sEO5++dD/SCAeUSTrd8KO/e
ZoVIkYV8lcj5Ol6cRhXr9TGTGHUXzbs7AkACvxmwcvk7OgEnpKU6GT/sglOyq+XX
SnLVU5SYKG+KBItM/W7naLFObiV4mhJjOtgPDEwfR7lFauTcA+CxdWLzAkBaOEVr
lCqO/VKbTdVihim85tGCSBSEOKLBrRRJyBKDU+/TYhLtCGSuV7VEwQVwKqOsYKVo
KU6XD4Dr6QlKvvbPAkEAkjlU5ua5BfGh601U8va1xWyxh0TqemBTsyoQ8bSwOpZH
NgGjWqv5Z0QoK99pJv7VfReKbLyIg2MXhpigTogeWA==
-----END RSA PRIVATE KEY-----`

let publicKey = `-----BEGIN PUBLIC KEY-----
MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgG+u7KERg6DWKDhK7NRUe63FPpxb
zBAUWxULzjYCJexsvgzXjj/mUPvTR/wjFXf49sidHDcEwhzx18k8aJ0+Rt5AUtNE
xTeAIIGo/mytyQwlS0GuazdWSqw+1IOEJe88f/I62prFuuVuY+cIxucXDVpxwv5m
fkMjeiTIixWyju4tAgMBAAE=
-----END PUBLIC KEY-----`

RSA 加解密

RSA 公钥加密

let keyEnc = publicEncrypt(key)          // RSA每次加密结果不一致

// RSA公钥加密函数 返回16进制字符串
function publicEncrypt(key){
  key = Buffer.from(key)
  let keyEnc = crypto.publicEncrypt({key:publicKey,padding:crypto.constants.RSA_PKCS1_PADDING}, key);
  return keyEnc.toString('hex');
}

RSA 私钥解密

let keyDec = privateDecrypt(keyEnc)       // zCpdywHdFfPYQwYi

// RSA私钥解密函数
function privateDecrypt(keyEnc){
  let keyDec = crypto.privateDecrypt(
    {
      key:privateKey,
      padding:crypto.constants.RSA_PKCS1_PADDING
    },
    // `keyEnc`是16进制第二个参数就是`hex` `keyEnc`是Base64第二个参数就是`base64`
    Buffer.from(keyEnc,'hex')
  )
  return keyDec
}

AES 加解密

AES加密用到的iv写在函数里了,固定为1234567812345678

AES 加密

let textEnc = AESEncrypt(plainText,key)    // 每次AES加密结果一致
// xoJ9fYIqyoAA3Qbhm/h8nGy4KjcmHVtusheMTd61mpUB8Lr6SDFQ1pWimi+WwlZyL5ncvZ9kQKjoRcRXUB7/D6uVkl724DzxBu/Ns1ivWnA=

// AES 加密函数
function AESEncrypt(content,key){
  let iv = '1234567812345678'
  let cipher = crypto.createCipheriv('aes-128-cbc', key, iv);
  let encrypted = cipher.update(content,'utf8','binary');
  encrypted += cipher.final('binary');
  encrypted = Buffer.from(encrypted,'binary').toString('base64')
  return encrypted;
}

AES 解密

// 用解密后的keyDec通过AES解密textEnc
let textDec = AESDecrypt(textEnc,keyDec)
// {id:'123',name:'xiaoyu',address:'address:'上海市浦东新区'}

function AESDecrypt(content,key){
  let iv = "1234567812345678";
  content = Buffer.from(content,'base64').toString('binary')
  let cipher = crypto.createDecipheriv('aes-128-cbc', key, iv);
  let decrypted = cipher.update(content,'binary','utf8');
  decrypted += cipher.final('utf8');
  return decrypted;
}

RSA 加解签

RSA 加签

let sign = getSign(plainText)       // 每次签名结果一致
// 3b073ad8655293c8ec92dddeb6b986fbad190d642e2ca74f57f90aeedb1645be20449e0e3a7824f483d72de120221b0a29f2adf5c0cd0b913cee01d8d6a13eeb55c9f2b9a3868dc29181cddbd0fde15264d40a46f74ab7db23a09bc48d93a376eb8d50c84e67a7d08ea9810a76badfc4bb7f5e8cdbd045ef3551389eb1b9cef7

//获取签名
function getSign(content){
  let sign = crypto.createSign('RSA-SHA1');
  sign.update(content);
  return sign.sign(privateKey,'hex');
}

RSA 验签

let result = verifySign(textDec,sign)      // true

// 验证签名
function verifySign(standard,sign){
  let verify = crypto.createVerify('RSA-SHA1');
  verify.update(standard,'utf8');
  return verify.verify(publicKey,sign,'hex');
}

CSS-BFC与IFC

Fri, 01 Nov 2019 16:53:50 GMT

BFC (Block Formatting Context)

所以我们没有办法说明什么是BFC, 但我们知道如何创建一个BFC。

比如 overflow: hidden 的块级元素,但是我们只想让他变成BFC,发挥自己的作用,这个样式却会导致其他问题。 display: flow-root,可以单纯将一个元素变成一个BFC。

那BFC有什么作用呢

BFC作用1-父元素包住子元素

我们知道如果子元素是浮动元素,父元素不设置高度,就不会被子元素撑起来,就不会包住子元素,这会导致很多问题。我们通常利用伪元素清楚浮动，但这里我们可以通过将父元素变为BFC的方式包住子元素

BFC作用2-兄弟节点划清界限

两个块级元素一个浮动,浮动元素就会飘到另一个不浮动元素上面,会导致有重合部分,或挡住另一元素

将不浮动的节点变为BFC,两个节点就会分开,就不会让兄弟元素挡住自己

通俗来说,一个块级元素变为BFC后,里面的元素出不去,外面的元素进不来

IFC (Inline Formatting Context)

CSS-堆叠上下文

Fri, 01 Nov 2019 15:27:34 GMT

计算机编码与js字符串

Fri, 01 Nov 2019 09:25:27 GMT

前言

世界上只有10种人, 认识二进制的和不认识的计算机只能存储0和1, 所有信息在新计算内部最终都是以二进制的形式存储。

每一个二进制位(bit)都只有0和1两种状态,八位二进制(一个字节byte)可以表示2**8 === 256种状态,从00000000~11111111。

既然计算机只能存储0和1,它是怎么存储数字以及各种字符呢？先从简单的数字说起吧

如何存储数字

存储数字很容易,直接转为二进制就好了

15 => 0b1111
-15 => -0b1111
0.75 => 0b0.11

计算机只能存储1和0 负数以补码的形式存储小数以浮点数的形式存储

如何存储字符

上个世纪60年代，美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。这被称为 ASCII 码，一直沿用至今。

比如字符a的ascii码对应的十进制是97, 二进制是0110 0001; 字符5的ascii码对应的十进制是53, 二进制是0011 0101。

ASCII 码一共规定了128个字符的编码,只用了一个字节。

如何存储中文字符

ASCII码只能存储128个英文字符, 不能存储中文字符,所以在ASCII的基础上,中国推出了GB2321编码

GB2312 共收录 6763 个汉字，同时收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的 682 个字符。

后来为了存储生僻字、繁体字、日语、朝鲜语等，微软推出了 GBK 字符集

如何存储所有字符

为了存储全球字符，将全球字符编号,有了unicode编码,包括中日韩文字、藏文、盲文、楔形文字、颜文字:-)、绘文字😂

比如汉字严的 Unicode 是十六进制数4E25，转换成二进制数10011100 00100101 汉字你的 Unicode 是十六进制数4f60, 转换成二进制数01001111 01100000，

Unicode只规定了每个字符的码点，到底用什么样的字节序表示这个码点，就涉及到编码方法。

最直观的编码方法是，每个码点使用四个字节表示，字节内容一一对应码点。这种编码方法就叫做UTF-32。

4个字节表示一个字符完全对应unicode编码

比如 a的utf-32为0x00000061 即二进制 00000000 00000000 00000000 01100001

如何节省空间 (UTF-8编码)

虽然utf-32编码简单直观,查找起来很方便,但是浪费空间,比如字符'a',ascii码只用了一个字节存储,utf-32却用了四个字节所以我们需要一种节省空间的表示方法，这导致了utf-8的诞生

UTF-8是一种变长的编码方法，字符长度从1个字节到4个字节不等。

所以这里我们知道,unicode是一种字符集,而utf-8是为了节省存储空间的编码方法

以下是utf-8编码规则

00000000 00000000 00000000 01111111 即 0x0000007F 以下 0XXXXXXX

00000000 00000000 00000111 11111111 即 0x000007FF 以下 110XXXXX 10XXXXXX

00000000 00000000 11111111 11111111 即 0x0000FFFF 以下 1110XXXX 10XXXXXX 10XXXXXX

00000000 00011111 11111111 11111111 即 0x001FFFFF 以下 11110XXX 10XXXXXX 10XXXXXX 10XXXXXX

如果一个字节的第一位是0，则这个字节单独就是一个字符；如果第一位是1，则连续有多少个1，就表示当前字符占用多少个字节。

比如字符'你'的unicode编码是 0100 1111 0110 0000 即 0x4f60 在0x000007FF~0x0000FFFF之间,所以需要三个字节格式是1110XXXX 10XXXXXX 10XXXXXX ,从'你'的二进制最后一位开始,从右向左替换'X',高位补0 会得到 11100100 10111101 10100000 即 E4BDA0,所以'你'的UTF-8编码是E4BDA0

还有更多的unicode编码方式,请参考

UTF-8 可变字节序列，用 1 到 4 个字节表示一个码点 UTF-16 可变字节序列，用 2 或 4 个字节表示一个码点 UTF-32 固定字节序列，用 4 个字节表示一个码点

Javascript采用的编码方式 (USC-2编码)

由于js诞生的时候只有UCS-2编码, 所以js采用的编码是UCS-2编码

USC-2 1990年发布使用2个字节表示已经有码点的字符 js是1995年诞生的 UTF-16 1996年7月发布

由于js采用的是USC-2编码,只能读取2个字节的字符(即范围在0x0000~0xFFFF),这会导致很多问题

字符的unicode表示法

这里请参考字符的unicode表示法

ES6 加强了对 Unicode 的支持, 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

'\u4f60' // '你'

但是在读取超过两个字节的字符时,就会只读取前两个字节

'\u20bb7'  // "₻7"

而大于两字节的字符的length也会显示错误

"𠮷".length  // 2

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符,以UTF-16的编码方式。

"\u{20BB7}"    // "𠮷"

"\u{41}\u{42}\u{43}"     // "ABC"

let hello = 123;
hell\u{6F}  // 123   因为'\u{6f}'表示字符'o'

'\u{1F680}' === '\uD83D\uDE80' // true  都表示字符"🚀"

javaScript 共有 6 种方法可以表示一个字符。

'\z' === 'z'  // true
'\172' === 'z' // true     这里是unicode码的八进制
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

将字符串转为数组

('𠮷𠮷𠮷').split('')  //  ["�", "�", "�", "�", "�", "�"] 超过两个字节的字符无法正确识别

解决办法: ES6推出了Array.from方法

Array.from('𠮷𠮷𠮷')  //  ["𠮷", "𠮷", "𠮷"]

码点与字符互换

String.prototype.charCodeAt() 返回 0 到 65535 之间的整数(十进制)，表示给定索引处的 UTF-16 代码单元 String.fromCharCode() 返回由指定的UTF-16代码单元序列创建的字符串

'z'.charCodeAt()              // 122
String.fromCharCode('122','0o172','0x7a')    // "zzz"

但是对于超过两个字节的字符ES5无法正确转换

String.fromCharCode(0x20BB7)   // "ஷ"  乱码  因为0x20BB7超过两个字节,无法正确解读

ES6的两个方法可以解决这一bug

String.codePointAt() 返回UTF-16的完整码点 String.fromCodePoint() 返回由指定的UTF-16代码单元序列创建的字符串

"🚀".codePointAt()              // 128640
String.fromCodePoint(128640)    // "🚀"
"𠮷".codePointAt()              // 134071
String.fromCodePoint(0x20BB7,134071)   // "𠮷𠮷"

// 对于小于两个字节的也完全适用
"a".codePointAt()               // 97
String.fromCodePoint(97)        // "a"
"z".codePointAt()               // 122
String.fromCodePoint('122','0o172','0x7a')   // "zzz"

另外一些bug,请参考javascript有个unicode的天坑

JS模拟继承

Wed, 30 Oct 2019 15:00:52 GMT

什么是继承

继承（英语：inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。

而javascript中没有类,虽然es6引入了class,但那只是一个语法糖。所以javascript不能继承,只能通过原型模拟继承

每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象( prototype )。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

比如

num = new Number(123)
num.__proto__ === Number.prototype // true
Number.prototype.__proto__ === Object.prototype  // true
Object.prototype.__proto__ === null    // true

num.toString()  // '123'

这里的num为什么会有toString方法呢,打印一下num看看

区域1是Number的原型对象Number.prototype 区域2是Object的原型对象Object.prototype javascript为了节省空间，num在调用toString方法时会先在自身的属性上找，如果没有则继续向__proto__属性中找，找到的话就调用该属性，如果没找到则继续向下一级__proto__中找，找到Object.prototype都还没找到，就返回undefined。而Object的原型对象有toString属性,所以num可以调用该方法

那我们说Number继承了Object,所以Number实例对象具有Object.prototype的各种属性和方法

怎样继承

正是因为Number.prototype.__ptoto__ 指向了 Object.prototype对象, num才能具有Object.prototype的属性和方法这里的Number继承Object,是js自身实现,如果我们需要实现一个'类'继承另一个'类'呢？

继承属性

比如父类Animal 子类Cat Animal具有方法run Cat具有方法say 我们想让Cat也有run方法通过继承Animal

function Animal(name){
  this.name = name
}
Animal.prototype.run = function(){
  console.log('I can run')
}
function Cat(){
  this.age = 1
}
let animal = new Animal()
let cat = new Cat()

这个时候我们看下animal和cat

如果我们想让cat也具有name属性,可以在定义Cat时调用一下Animal方法,用call绑定this,这样cat的name就是'cat'了

function Animal(name){
  this.name = name
}
Animal.prototype.run = function(){
  console.log('I can run')
}
function Cat(){
  Animal.call(this,'cat')
  this.age = 1
}
let animal = new Animal()
let cat = new Cat()

继承方法

继承属性还不够,我们还需要继承共有方法呢！根据上文,我们要让Cat继承Animal,让Cat.prototype 的 __proto__ 指向 Animal.prototype 不就可以了吗？那我们来试试

Cat.prototype.__proto__ = Animal.prototype

真的实现了呢，现在我们的小猫也可以 run了,但是这种方法在IE不兼容,有什么解决办法呢？总结一下我们就是让一个对象的__proto__ 只想另一个对象的prototype,好熟悉,有木有？在num = new Number() 的时候 num.__proto ==== Number.prototype 那就套一下呗

Cat.prototype = new Animal('cat')
let cat2 = new Cat()

但是这样Cat.prototype却会多出一个name属性,我们并不想要这个name属性我们不应该直接new这个Animal,不然它就会给实例对象添加name属性。通过一个空函数,间接改变指向

var f = function(){}
f.prototype = Animal.prototype
Cat.prototype = new f()

这个时候

Cat.prototype.__proto__ === Animal.prototype  // true

其实上面的代码就是Object.create()的Polyfill 所以我们也可以直接这么写

Cat.prototype = Object.create(Animal.prototype)

改变constructor指向

虽然我们已经实现了Cat.prototype.__proto__ === Animal.prototype

但是Cat.prototype.constructor方法缺丢失了,打印一下看看

可以看到Cat.prototype只有一个__proto__属性,

但是当我们打印Cat.prototype.constructor是有输出的，输出的是Animal函数

那为什么会这样呢, 因为

Cat.prototype.constructor === Cat.prototype.proto.constructor // true Cat.prototype.proto.constructor === Animal.prototype.constructor // true Animal.prototype.constructor === Animal // true

所以我们调用的是Animal.prototype的constructor,当然是Animal函数啦

所以我们需要手动加上Cat.prototype的constructor属性

Cat.prototype.constructor = Cat

这时候再看Cat.prototype就会多了一个constructor

ES5 写法

总结一下ES5 的写法

function Animal(name){
  this.name = name
}
Animal.prototype.run = function(){
  console.log('I can run')
}
function Cat(){
    Animal.call(this,'cat')
    this.age = 1
}
var f = function(){}
f.prototype = Animal.prototype
Cat.prototype = new f()
Cat.prototype.constructor = Cat

// 后面再给Cat添加公有属性
Cat.prototype.say = function(){
  console.log('miao miao miao')
}

也叫作寄生组合继承

ES6 写法

ES6引入了class语法糖,跟java类似

class Animal{
    constructor(name){
        this.name = name
    }
    run(){
        console.log("I can run")
        return undefined
    }
}
class Cat extends Animal{
    constructor(name){
        super(name)
        this.age = 1
    }
    say(){
      console.log('miao miao miao')
    }
}

cookie、session与登录注册(基于Node.js)

Mon, 28 Oct 2019 14:56:36 GMT

本文代码基于Node.js,参考完整代码

登录与注册流程

注册流程

注册时传入用户名,密码,确认密码
注册成功将用户名与密码存入数据库
密码与确认密码不同，或已经注册的用户，返回400

注册具体实现

客户端传递注册时需要的数据

let value = ['username','password','password_confirm']
  value.forEach(name=>{
      data[name] = $(`input[name=${name}]`).val()
  })
  $.post({
      url: './sign_up',
      type: 'post',
      data
  }).then( response => {
      window.location.href = './sign_in'
  }).fail( error => {
      alert(error.responseText)
  })

服务端获取数据readBodyData

// 因为数据是一个一个上传的
function readBodyData(request){
  return new Promise(function(resolve,reject){
    let data = ''
    request.on('data',chunk => {
      data += chunk.toString()
    })
    request.on('end', ()=>{
      let params = data.split('&')
      let hash = {}
      params.forEach(value => {
        let temp = value.split('=')
        hash[temp[0]] = temp[1]
      })
      resolve(hash)
    })
  })
}

读取数据库文件,判断用户是否已经注册

// else if(path === '/sign_up' && method === 'POST')

readBodyData(request).then(data => {
   let { username,password,password_confirm } = data

  let users = JSON.parse(fs.readFileSync('./database.json','utf8') || "[]")
  let userExist = false
  for(i=0;i<users.length;i++){
    if(users[i].username === username){
      userExist = true
    }
  }

  // 已经注册返回400,提示已经注册,注册成功将用户名密码写入数据库

  if(userExist){
      response.statusCode = 400
      response.setHeader('Content-Type', 'application/json;charset=utf-8')
      response.write('该用户已注册,请勿重复注册')
    }else{
      users.push({username,password})
      fs.writeFileSync('./database.json',JSON.stringify(users))
      response.statusCode = 200
    }
    response.end()
})

登录流程

登录时传入用户名密码
如果与数据库匹配，则登录成功，跳转到主页面
如果用户不存在或密码错误，返回404

登录具体实现

客户端传递数据与注册类似

let value = ['username','password']
value.forEach(name=>{
    data[name] = $(`input[name=${name}]`).val()
})
$.post({
    url: './sign_in',
    type: 'post',
    data
}).then( response => {
    // 登录成功 前往主页
    window.location.href = './'
}).fail( error => {
    console.log(error,'error')
    alert(error.responseText)
})

匹配数据库,用户名密码是否匹配

readBodyData(request).then(data=>{
  let { username,password } = data

  // 判断数据库是否有该用户
  let users = JSON.parse(fs.readFileSync('./database.json','utf8') || "[]")
  console.log(users)
  let userMatch = false
  for(i=0;i<users.length;i++){
    if(users[i].username === username && users[i].password === password){
      userMatch = true
    }
  }
  if(userMatch){
    response.statusCode = 200
  }else{
    response.setHeader('Content-Type', 'application/json;charset=utf-8')
    response.write('用户名或密码错误')
  }
  response.end()
})

以上已经实现的基本的登录与注册但是我们也可以直接输入主页的url访问主页，并不要经过登录啊，有没有什么方法可以判断,用户访问主页，如果登录了就返回主页面，如果没有登录就跳转到登录页面呢？如果我们还想要在主页显示用户的用户名呢？

由于Http是无状态协议,也就是说，服务器单从网络连接上无从知道客户身份。

HTTP无状态协议，是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

如果每次请求的时候,都带上相关标志呢, 让我们来看看cookie是如何工作的吧

cookie判断是否登录

在登录成功的时候, 设置响应头,

response.setHeader('Set-Cookie',`username=${username}`)

// 设置多个cookie
response.setHeader('Set-Cookie',[`username=${username}`,'a=123','b=456'])

这样,客户端在请求同一域名的情况下，都会带上这个cookie 比如在登录成功跳转到主页面的时候发送请求,就会带上刚才拿到的cookie

我们也可以在控制台中看到cookie,并且可以随意修改cookie

这时,我们就可以通过请求头的cookie判断用户是否登录

if(request.headers.cookie){
  let cookies = request.headers.cookie.split('; ')
  let cookieObj = {}
  cookies.forEach(value => {
    let temp = value.split('=')
    cookieObj[temp[0]] = temp[1]
  })
  let username = cookieObj.username

  // 登录成功替换页面用户名
  body = body.replace('__username__',username)
}else(
  response.writeHead(301, {'Location': './sign_in'})
)

好啦,通过cookie判断用户是否登录,并且通过cookie可以获取到用户相关信息,当然这个值也是服务器自己设置的

但是刚才说过cookie是不安全的,它是可以手动修改的,如果我们主页显示的是用户的隐私信息呢,比如余额,薪资什么的,只要将cookie的username改为其他人的,不就想看谁的就看谁的了嘛,那不就太危险了,有什么解决办法呢?

session存储信息

如果我们在服务器设立一小块内存,存储用户的隐私信息,并给每个用户信息设置一个Id标志,每次登录成功,生成一个随机数Id传给客户端,用户每次通过cookie将这个随机数传到服务器,那这个内存就存储了所有的session, 这个随机数标志就是sessionId

因为随机数范围很大,所以用户根本无法篡改那么现在我们登录成功的需要做的事情是这样,假设sessions在内存中是这样的sessions = {}

// 设置sessionId
let sessionId = Math.random() * 100000
response.setHeader('Set-Cookie',`sessionId=${sessionId}`)
// 用session存储用户隐私数据
sessions[sessionId] = { username,password }

主页面从sessions中获取username

let username = sessions[cookieObj.sessionId].username

总结

一般来说，Session 基于 Cookie 来实现。

cookie

服务器通过 Set-Cookie 头给客户端一串字符串
客户端每次访问相同域名的网页时，必须带上这段字符串
客户端要在一段时间内保存这个Cookie
Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
大小大概在 4kb 以内

session

将 SessionID（随机数）通过 Cookie 发给客户端
客户端访问服务器时，服务器读取 SessionID
服务器有一块内存（哈希表）保存了所有 session
通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
这块内存（哈希表）就是服务器上的所有 session

npm安装、更新与卸载

Thu, 24 Oct 2019 16:47:53 GMT

npm 安装、更新与卸载

本地安装

npm install <package-name>
npm install <package-name> --save
npm install <package-name> --save-dev

安装完安装包会出现在当前目录的node_modules下

--save 与 --save--dev的区别

--save 保存在package.json 的 dependencies 字段 --save-dev 保存在package.json 的 devDependencies 字段

生产环境依赖包

"dependencies": These packages are required by your application in production.

测试环境依赖包

"devDependencies": These packages are only needed for development and testing.

更新本地安装包

npm update

更新完成后执行 npm outdate 没有任何输出

本地卸载

npm uninstall <package-name>

不加参数可自动卸载，也可添加参数指定卸载

npm uninstall <package-name> --save
npm uninstall <package-name> --save-dev

全局安装

npm install -g <package-name>

全局安装路径可通过 npm config get prefix 查看

更新全局安装包

npm update -g <package-name>   // 指定更新某个包
npm outdated -g --depth=0      // 更新需要更新的
npm update -g                  // 更新全局所有的

卸载全局安装的包

npm uninstall -g <package-name>

更新npm

查看npm版本

npm -v

更新成为最新的

npm install npm@latest -g

将要发布的下一版本

npm install npm@next -g

Promise解决回调地狱问题

Thu, 24 Oct 2019 14:19:53 GMT

回调地狱问题的由来

需求：封装一个方法，给定文件路径，可以读取文件内容，并把文件内容返回，如果错误返回错误结果

  const fs = require('fs')
  const path = require('path')

  // 普通读取文件的方式
  function getFileByPath(fpath){
    fs.readFile(fpath,'utf-8',(err,data) => {
      if(err) throw err
      console.log(data)
      return data
    })
  }

  let result = getFileByPath(path.join(__dirname,'.files/1.txt'))
  console.log(result)
```

这样确实可以读到文件内容，但是`result`却是`undefined`，因为`readFiles`是异步读取的

于是想到在调用`getFileByPath`时添加回调函数

```js
  function getFileByPath(fpath，callback){
    fs.readFile(fpath,'utf-8',(err,data) => {
      if(err) throw err
      callback(data)
    })
  }

  getFileByPath(path.join(__dirname,'.files/1.txt'),(data)=>{
    console.log(data)
  })
```

但是如果error了，`readFile`里的`callback`就不执行了，
需要将成功的结果和失败的结果都返回给用户，所以添加两个回调函数，一个成功调用`succCb`，一个失败调用`errCb`

```js
  function getFileByPath(fpath，succCb, errCb){
    fs.readFile(fpath,'utf-8',(err,data) => {
      if(err) return errCb
      succCb
    })
  }

  getFileByPath(path.join(__dirname,'.files/1.txt'),(data)=>{
    console.log(data)
  },(err)=>{
    console.log(err)
  })
```

看起来很完美呢，如果这时候再加个需求呢，读取文件1成功后，再读取文件2，读取文件2成功后再读取文件3，那么代码将会是下面的样子

    getFileByPath(path.join(__dirname,'.files/1.txt'),(data1)=>{
      console.log(data1)

      // 读取文件2
      getFileByPath(path.join(__dirname,'files/2.txt'),(data2)=>{
        console.log(data2)

        // 读取文件3
        getFileByPath(path.join(__dirname,'files/3.txt'),(data3)=>{
          console.log(data3)
        })
      })
    })

哈哈，层层缩进，如果后面还要读取很多文件呢，那么就陷入了回调地狱，看看下面这张图，很形象有木有

![回调地狱](./callback_hell.jpg)

## 用Promise解决回调地狱问题

如果不想让代码变成酱紫，我们就开始使用Promise，其实Promise的本质就是单纯为了解决回调地狱问题，它会让代码变的优雅，并不会减少代码量

    > console.log(Promise)
      ƒ Promise() { [native code] }

可以看出来Promise是一个构造函数，我们通过new Promise可以生成一个Promise的实例

关于Promise更详细的说明 [Promise](http://es6.ruanyifeng.com/?search=fetch&x=0&y=0#docs/promise)

如果用Promise来实现读取三个文件的需求呢

首先构建一个方法，返回一个promise

    function getFileByPath(fpath){
      var promise = new Promise(resolve,reject){
        fs.readFile(fpath,'utf-8',(err,data)=>{
          if(err) return reject(err)
          resolve(data)
        })
      }
      return promise
    }

开始读取文件

    getFileByPath('files1.txt').then((data1)=>{
      console.log(data1)

      getFileByPath('files2.txt').then((data2)=>{
        console.log(data2)

        getFileByPath('files3.txt').then((data3)=>{
          console.log(data3)
        })
      })
    })

咦，写完了，这好像还是回调地狱啊，纳尼？

    getFileByPath('files1.txt').then( data1 => {
      console.log(data1)
      return getFileByPath('files2.txt')
    }).then( data2 => {
      console.log(data2)
      return getFileByPath('file3.txt')
    }).then( data3 => {
      console.log(data3)
    })

emmmmm...，正确打开方式是这样，是不是很优雅

但是为什么第二个`then`会获取到`getFileByPath('files2.txt')`的结果呢？

> 上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。

什么是JSONP

Tue, 19 Mar 2019 23:36:26 GMT

先简单说下跨域问题

协议相同

域名相同

端口相同

满足以上三个就是同源

可以发请求的 HTML 标签

form 表单 a 标签 link 标签 img 标签 script 标签

基本需求

比如我有 100 元，我每次点击付钱的按钮就会支付一元，后台将这 100 元存于数据库(本文中存于 txt) 假设页面有一个 id 为 button 的 button 按钮

在最开始的前端

form 表单发请求

我们都知道form表单可以发post或get请求到后台,但是会刷新页面，为了更好的用户体验我们怎么能每次变更数据都刷新页面呢，所以得想办法局部更新呀。

创建 img 标签发请求(get)

    前端代码
    button.addEventListener('click', (e)=>{
        let image = document.createElement('img')
        image.src = '/pay'
        image.onload = function(){ // 状态码是 200~299 则表示成功
            remain.innerText = remain - 1
        }
        image.onerror = function(){ // 状态码大于等于 400 则表示失败
            alert('失败')
        }
    })

    后端代码

这种方法虽然可以实现，但是每此都要请求一个图片，当你返回不是图片类型的时候，浏览器也不是那么傻，它就报错啦，我们每一次都返回一个图片，总感觉多次一举。emmmmmm....有没有什么更好的办法呢,试试创建script标签发请求吧。

创建 script 标签发请求

    前端代码
    button.addEventListener('click', (e)=>{
        let script = document.createElement('script')
        script.src = '/pay'
        document.body.appendChild(script)
        script.onload = function(e){ // 状态码是 200~299 则表示成功
            e.currentTarget.remove() // 发一次请求就会多一个script标签，需要删除
            remain.innerText = remain - 1
        }
        script.onerror = function(e){ // 状态码大于等于 400 则表示失败
            e.currentTarget.remove()
        }
   })

    后端代码

为什么不直接返回 script 脚本呢

既然后端返回给前端的是js,嵌入到页面时脚本就会执行，我何必多写一个onload函数，好像有点道理哎~
那就后端来写局部刷新代码吧

写完后，后端不开心了,作为后端，我只想做后端的事，这样前后端发生了耦合，如果后端程序员不熟悉前端，那不就写不下去了嘛，怎么办呢，解耦合呀。

解决前后端耦合 => Jsonp 技术的由来

怎么解耦合呢，那前端想了，说我们封装一个函数吧，你们成功后就调用一下这个回调函数，把要返回的值放在回调函数的第一个参数里。这样的话，后端说好呀，那你们封装好函数，函数名传给我，我成功就调用一下。

以上，这个技术就叫jsonp啦，总结一下

请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据

约定

哎呦,还不错，就是我们能不能做些规定,前端传过来回调函数的key值能不能统一,如下:

callbackName -> callback
yyy -> 随机数 function12312312312321325() (为了不重复)

jquery 封装的 API

$.ajax({
    url: "http://jack.com:8002/pay",
    dataType: "jsonp",
    success: function( response ) {
        if(response === 'success'){
        amount.innerText = amount.innerText - 1
        }
    }
})

linux 常用命令使用

Tue, 12 Mar 2019 21:30:22 GMT

1. ls ==> list segment 列出文件

ls #列出当前目录下的文件

$ls
_config.yml  node_modules/  package-lock.json  scaffolds/  themes/
db.json      package.json   public/            source/

ls -lh #-l以长格式显示文件 -h以人性化显示文件大小

$ ls -l
total 237K
-rw-r--r-- 1 CXY 197121 1.8K 10月  4 19:37 _config.yml
-rw-r--r-- 1 CXY 197121  174 10月  4 19:38 db.json

ls -a #显示隐藏文件(以"."开头的文件)

$ ls -a
./   .deploy_git/  _config.yml  node_modules/  package-lock.json  scaffolds/  themes/
../  .gitignore    db.json      package.json   public/            source/

$ ls ~/local
demo/  demo.js  demo.txt  jsdemo.js*  kk/  shell/  xxx/  yyy/  zzz/

2. cat 查看文件内容

cat 文件名 #显示整个文件内容

$ cat demo.js
var fs = require('fs');
var dirName = process.argv[2]
if(fs.existsSync('./' + dirName)){
console.log('file exists')
}
else{
    fs.mkdirSync(dirName)
    process.chdir(dirName)
    fs.mkdirSync('css')
    fs.mkdirSync('js')

    fs.writeFileSync('./index.html','<!DOCTYPE html>\n\t<title>Hello</title>\n\t<h1>Hi</h1>')
    fs.writeFileSync('css/style.css','h1 {color: red;}')
    fs.writeFileSync('js/main.js','var string = "Hello World"\n\talert(string)')
}

cat -n 文件名 #显示行号

$ cat -n demo.js
1  var fs = require('fs');
2  var dirName = process.argv[2]
3  if(fs.existsSync('./' + dirName)){
4      console.log('file exists')
5  }
6  else{
7      fs.mkdirSync(dirName)
8      process.chdir(dirName)
9      fs.mkdirSync('css')
10      fs.mkdirSync('js')
11
12      fs.writeFileSync('./index.html','<!DOCTYPE html>\n\t<title>Hello</title>\n\t<h1>Hi</h1>' )
13      fs.writeFileSync('css/style.css','h1 {color: red;}')
14      fs.writeFileSync('js/main.js','var string = "Hello World"\n\talert(string)')
15  }

cat file1 file2 > file3 #将文件1和文件2的内容合并到文件3中

$ cat file1
hello file1

$ cat file2
hello file2

$ cat file1 file2 > file3

$ cat file3
hello file1
hello file2

3. mv ==> move #移动文件或重命名文件

mv 文件名文件名 #将源文件名改为目标文件名 mv 文件名目录名 #将文件移动到目标目录 mv 目录名目录名 #目标目录已存在，将源目录移动到目标目录；目标目录不存在则改名

$ mv test.log test1.txt   # 将test.log 改名为 test1.txt
$ mv test1.txt test3      #将test1.txt 移动到test3目录
$ mv log1.txt log2.txt log3.txt test3   # 将log1.txt log2.txt log3.txt 都移动到test目录

常用选项

-i 询问是否覆盖
-f 强制覆盖

4. touch 创建文件

touch new_file #创建新文件 touch -t 201811142234.50 old_file #设定文件的时间戳

关于linux中不懂的命令，可以将完整命令复制到explanshell.com 中，查看命令详细解释。

初步理解jQuery

Wed, 05 Dec 2018 21:28:30 GMT

封装addClass函数

    function addClass(node,classes) {
        classes.forEach( (value) => node.classList.add(value) )
    }

    let divNode = document.getElementById('xxx')
    addClass(divNode,['a','b','c'])

命名空间

> 如果别人也写了addClass这个函数，就会重复，所以需要命名空间

    window.xiaoyu = {}
    xiaoyu.addClass = function(node,classes) {
        classes.forEach( (value) => node.classList.add(value) )
    }

    let divNode = document.getElementById('xxx')
    xiaoyu.addClass(divNode,['a','b','c'])

能不能把node放在前面

方法一扩展node接口

    Node.prototype.addClass = function(classes){
        classes.forEach( (value) => this.classList.add(value) )
    }

    let divNode = document.getElementById('xxx')
    divNode.addClass(['a','b','c'])

方法二返回一个新的node对象

    function newNode(node){
        newNode = {
            0: node,
            length: 1,
        }
        newNode.addClass = function(classes){
            classes.forEach( (value) => this.classList.add(value) )
        }
        return newNode
    }

    let divNode = document.getElementById('xxx')
    let newnode = newNode(divNode)
    newnode.addClass(['a','b'])

给生成newNode对象的函数改个名字吧

    function jQuery(node){
        newNode = {
            0: node,
            length: 1,
        }
        newNode.addClass = function(classes){
            classes.forEach( (value) => this.classList.add(value) )
        }
        return newNode
    }

    window.$ = jQuery
    let divNode = document.getElementById('xxx')
    let $newnode = $divNode)
    $newnode.addClass(['a','b'])

让这个参数可以接收selector，以及元素结点

    window.jQuery = function(nodeOrSelector){
        if(typeof nodeOrSelector === 'string'){
            temp = document.querySelectorAll(nodeOrSelector)
                var nodes = {}
            for(var i=0;i<temp.length;i++){
                nodes[i] = temp[i]
            }
            nodes.length = temp.length
        }else{
            console.log(2)
                nodes = {
                    0: nodeOrSelector,
                    length: 1
                }
        }

        // 参数可以不为数组
        nodes.addClass = function(){
            let classes = []
            for(let i=0;i<arguments.length;i++){
                classes.push(arguments[i])
            }
            classes.forEach((value)=> {
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
                }
            })
        }

        // 获取文本或设置文本内容
        nodes.text = function(text){
            if(typeof text === 'undefined'){
                let texts = []
                for(let i=0;i<nodes.length;i++){
                    texts.push(nodes[i].textContent)
                }
                return texts
            }
            else{
                for(let i=0;i<nodes.length;i++){
                    nodes[i].textContent = text
                }
            }
        }

        return nodes
    }

    window.$ = jQuery
    let $div = $('div')

    $div.addClass('a','b')
    $div.text('hello jquery')

原型与原型链

Tue, 06 Nov 2018 21:34:41 GMT

普通类型与对象的区别

在javascript中，一切东西都可以被当做对象

    var n1 = 1
    var n2 = new Number(1)
    n1.toString() // "1"
    n2.toString() // "1"

这两种方法都是定义一个数字1，但n1是基本类型，n2是对象但为什么n1也有toString()方法呢，因为在调用n1.toString()时，内存中会临时生成一个对象temp=new Number,temp.toString() 的结果给n1.toString() 同理,字符串也有两种声明的方法

    var s1 = '123'
    var s2 = new String('123')
    s1.toString() // '123'
    s2.toString() // '123'

共有属性(原型对象)

    var n1 = new Number(1)
    var n2 = new Number(2)
    var s1 = new String('123')
    var s2 = new String('abc')
    n1.valueOf()  // 1
    n2.valueOf()  // 2
    s1.charAt(0)  // "1"
    s2.charAt(0)  // "a"
    s1.valueOf()  // "123"
    s2.valueOf()  // "abc"

为什么s1和s2都有charAt()属性,n1和n2都有valueOf()属性,n1,n2,s1,s2都有valueOf()属性？

javascript为了节省空间，将n1和n2的公用属性封装在了Number.prototype，Number的原型对象中，在n1调用属性时，会先在自身的属性上找，如果没有则继续向__proto__属性中找，找到的话就调用该属性，如果没找到则继续向下一级__proto__中找，找到Object.prototype都还没找到，就返回undefined。而Number的原型对象有valueOf()属性,所以n1和n2都可以调用此方法。

javascript将所有对象共有的属性封装在了Object的原型对象中(Object.prototype),但是因为Number，String，Boolean类型又有不同的属性，所以分别又有Number.prototye，Boolean.prototype,String.prototype分别存储了Number，String，Boolean类型的共有属性,不同类型的实例对象可以通过__proto__访问该类型的原型对象,Number,String,Boolean的实例对象的__proto__又指向Object.prototype.

prototype 与 proto

拿Number举例,var n = new Number,n是对象，n有__proto__属性,指向Number的原型对象(Number共有属性)==> Number.prototype 而原型对象也有__proto__属性，Number原型对象的__proto__指向Object的原型对象==>Object.prototype

    var number = new Number(1)
    number.__proto__ === Number.prototype  // true
    Number.prototype.__proto__ === Object.prototype // true
    Object.prototype.__proto__ === null
    Number.__proto__ === Function.prototype // true

number的原型链 number ==> Number.prototype ==> Object.prototype ==> null

    var string = new String('123')
    string.__proto__ === Number.prototype // true
    String.prototype.__proto__ === Object.prototype // true
    Object.prototype.__proto__ === null
    String.__proto__ === Function.prototype // true

string的原型链 string ==> String.prototype ==> Object.prototype ==> null

    var bool = new Boolean(true)
    bool.__proto__ === Boolean.prototype // true
    Boolean.prototype.__proto__ === Object.prototype // true
    Object.prototype.__proto__ === null
    Boolean.__proto__ === Function.prototype // true

bool的原型链 bool ==> Boolean.prototype ==> Object.prototype ==> null

以上总结一个公式

    var 对象 = new 函数()
    对象.__proto__ === 函数.prototype
    函数.prototype.__proto__ === Object.prototype
    Object.prototype.__proto__ === null
    函数.__proto__ === Function.prototype

对象类型的原型链最短,直接指向Object.prototype

    var obj = new Object()
    obj.__proto__ === Object.prototype  // true
    Object.prototype.__proto__ === null  // true
    Object.__proto__ === Function.prototype  // true

obj的原型链 obj ==> Object.prototype ==> null

Function函数比较特殊

Function._proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype

JS中的类型转换

Sat, 03 Nov 2018 20:00:17 GMT

==> String

方法1 `toString()`方法

null 和 undefined 没有toString() API object 的 toString() 不能得到想要的结果 console.log() 默认调用toString()方法

    123.toString() // '123'
    true.toString() // 'true'
    null.toString()  // Cannot read property 'toString' of null
    undefined.toString()  //Cannot read property 'toString' of undefined
    var a = {a:1}
    a.toString()  // "[object Object]"
    ({a:1}).toString() // "[object Object]"

方法2 `+ ''` 加空字符串

    1 + '1' // '11'  ==> '+' 会自动进行类型转换,优先变为字符串
    123 + '' // '123'
    true + ''  // 'true'
    null + '' // 'null'
    undefined + '' // 'undefined'
    ({a:1}) + '' // "[object Object]"
    '' + {a:1}  // "[object Object]"

方法3 全局函数`String()`

    String(1)  // '1'
    String(true) // 'true'
    String(null)  // 'null'
    String(undefined) // undefined
    String({a:1})  // "[object Object]"

==> Boolean

方法1 全局方法`Boolean()`

    Boolean(1) // true
    Boolean(0) // false
    Boolean(NaN) // false
    Boolean('') // false
    Boolean(' ') // true
    Boolean('123') // true
    Boolean(null)  // false
    Boolean(undefined) //false
    Boolean({})  // true
    Boolean({a:1}) //true

方法2 双重取反 ==> `!!`

    !! 1  // true
    !! NaN // false
    !! 0 // false
    !! '' // false
    !! ' ' // true
    !! '123' // true
    !! null // false
    !! undefined //false
    !! {}  // true
    !! {a:1} // true

五个falsy值

0 NaN null undefined ''

==> Number

方法1 `Number()`

    Number('1') // 1
    Number('1.123') // 1.123
    Number('1.abc') // NaN
    Number('')    // 0
    Number(true)  // 1
    Number(false) // 0
    Number(null) // 0
    Number(undefined) // NaN
    Number({a:1})  // NaN

方法2 `parseInt()`

parseInt() 主要是将字符串转为整数它会从第一个字符开始，直到不是数字结束

    parseInt('1') //1
    parseInt('1.23') // 1
    parseInt('  123') // 123
    parseInt('1234abc')  // 1234
    parseInt('abc') // NaN
    parseInt('a567bc') // NaN
    parseInt(true) // NaN
    parseInt(null) // NaN
    parseInt(undefined) // NaN
    parseInt({a:1}) // NaN
    parseInt([1,2,3]) // 1

方法3 `parseFloat()`

parseFloat() 主要是将字符串转为浮点数

    parseFloat('3.14') // 3.14
    parseFloat('314e-2') // 3.14
    parseFloat('0.0314E+2') // 3.14
    // 其他与parseInt()结果相同

方法4 `- 0`

    '1' - 0 // 1
    '1.23' - 0  // 1.23
    '1.abc' -0 // NaN
    '' - 0  // 0
    true -0 // 1
    false - 0  // 0
    null - 0 // 0
    undefined - 0 // NaN
    ({a:1}) - 0

方法5 取正

    + '1' // 1
    + '1.23' // 1.23
    + '1.abc' // NaN
    + '' // 0
    + true // 1
    + false // 0
    + null // 0
    + undefined // NaN
    + {a:1} // NaN

JS中普通类型与对象的区别

普通类型 Number Bool String Symbol Null Undefined

数据直接存在栈内存中

    var a = 1
    var b = a
    a = 2
    b // 1

将a中的数据直接赋值给b，所以改变a，不会影响b ==> 深复制所以普通类型之间的复制都是深复制

引用类型 Object

栈内存中保存的是对象在堆内存中的引用地址通过这个引用地址可以快速查找到保存中堆内存中的对象

    var a = {name:1}
    var b = a
    a.name = 2
    b // {name:2}

将a赋值给b的时候，实际上是b也指向了与a地址相同的对象，改变a会影响b == > 浅复制

    var a = {name:1}
    var b = a
    a = {name:2}
    b // {name:1}

a = {name:2} 时，a指向了另一个对象的地址,而b还指向原来地址的对象,所以给a重新赋值不会影响b

CSS-REM与动态REM

Thu, 01 Nov 2018 14:01:13 GMT

什么是em

相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。

什么是rem

这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值

所以em与rem没有任何关系

动态rem

动态rem是通过js动态改变html的font-size,也就是改变rem，一般是改为页面宽度的十分之一，确保最小字号不会小于12px。

动态rem可以用于移动端页面布局

如果页面宽度是1000px,将rem设为 1000px / 10 => 100px 所以1em就是100px, 将一个div元素设为3em,他就会占页面的十分之三

这样元素的宽高都以屏幕宽度为基准,对于不同的移动设备,屏幕宽度不同,页面元素都会等比例缩放

代码如下

<scrtip>
  document.write(`
      <style>
          html {
              font-size: ${window.innerWidth/10}px
          }
      </style>
  `)
</script>

这样就可以让rem为页面宽度的十分之一

利用scss 函数设置元素rem值

一般ui设计稿都是给定宽度的,我们不能一一计算每个元素的比例,这时候就可以通过scss里的函数自动计算比例. 假设设计稿的页面宽度为640px,xxx元素的宽度为320px(二分之一), 高度为160px(四分之一)。

$pageWidth = 640
function px2rem(px){
  return px/$pageWidth * 10 + rem
}

.xxx {
  width: px2rem(320);  // 5em
  height: px2rem(160); // 2.5em
}

JS中的数据类型

Mon, 29 Oct 2018 18:46:30 GMT

JS中一共有七大数据类型

2. 字符串(string)

字符串也可以叫做字符数组

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

空字符串与空格字符串

空字符串没有字符,长度为0 空格字符串只有一个空格的字符串，空格也是一个字符，所以长度为1

多行字符串(3种) ,ES6新语法

 var s='1234\    //使用"\"换行
 5677'
 s
 "12345677"     //输出还是一行

 var s='1234'+   //使用"+"连接字符串
 '5677'
 s
 "12345677"    //输出还是一行

 //ES6新语法
 var s=`1234    //使用"`" 换行
 5678`
 s
 "1234        //输出为两行,length为9，换行符也为一个字符
 5678"

 //使用转义符
 var s='1234\n5678'   //"\n"表示换行符
 s
 "1234        //输出为两行
 5678"

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

\0 : null
\b : 后退键
\f : 换页符
\n : 换行符
\r : 回车键
\t : 制表符
\v : 垂直制表符
' : 单引号
\ : 反斜杠

字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）

    var s = "hello"
    s[0] // 'h'
    s[1] // 'e'
    s[4] // 'o'
    s[-1] // undefined

字符串是不可变的数据类型，不可以通过此方法改变字符串

    var s = "hello"
    delete s[0]
    s // 'hello'
    s[0] = "G"
    s// 'hello'

3. 布尔(boolean)

只有true 和 false 两个值,用于条件判断

4. 符号(symbol) ES6新增

5. unidefine 只有一个值==> undefined

6. null 只有一个值==> null

undefined 与 null 都表示什么也没有

undefined 与 null 的区别

一个变量被声明而没有赋值，则返回undefined

一个非空对象，现在不想给值，var xxx=undefined ==> 空非对象

一个对象，不想给值， var obj=null ==> 空对象

7. 对象(object)

简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。数组和方法也是对象

    var obj = {a:1,b:2}

如果键名是数字，会自动转为字符串，如果不加引号，会按照标识符规则，不符合就报错
键名又称为属性，值可以为任意数据类型
对象的引用

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。

    var o1 = {}
    var o2 = o1

    o1.a = 1
    o2.a //1 o1改变，也会影响到o2

    o2.b = 2
    o1.b //2 o2改变，也会影响到o1

    o1 = 1    //取消o1对原对象的引用
    o2 // {a:1,b:2}  //o2不变

对属性的读取

 var obj = {'name':'xiaoyu'}
 obj['name'] // 'xiaoyu'
 obj.name    // 'xiaoyu'  <==> obj['name']

 var key =  'name'
 obj.key  //error!  obj['key'],这个对象没有key这个属性

对象有哪些属性

 var obj = {'name':'xiaoyu','age':'18'}
 Object.keys(obj) //['name','age']

对象的遍历

for...in 循环用来遍历一个对象的全部属性。它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。它不仅遍历对象自身的属性，还遍历继承的属性。

    var obj = {'name':'xiaoyu','age':'18'}
    for(var attr in obj){
        console.log(attr+'==>'+obj[attr]) // name==>xiaoyu age==>18
    }

其他

typeof 查看数据类型，两个bug，一个特殊的name

var num = 1
typeof num  //number

//bug1
function f(){]
typeof f //function  js没function这个数据类型

//bug2
var a = null
typeof a //object

//特殊的name  ==>  window.name 会将值通过toString()方法转为字符串
var name = [1,2,4]
typeof name // string
name  // '1,2,4'

CSS布局

Sat, 13 Oct 2018 00:50:02 GMT

左右布局
左中右布局
水平居中
垂直居中

左右布局

<div class="clearfix">
    <div class="a">左</a>
    <div class="b">右</a>
</div>

.clearfix {
    content: '';
    display: block;
    clear: both;
}
.a,
.b {
        width: 50%;
        height: 200px;
        float: left;
}

父元素的class设为clearfix 子元素全部设为左浮动,可设置width的百分比决定每个子元素占据的宽度

左中右布局(三列布局)

<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>

.left{
    width: 200px;height: 300px; background: yellow; float: left;
}
.right{
    width: 170px; height: 300px; background: green; float: right;
}
.middle{
    height: 300px; background: red; margin-left: 220px; margin-right: 180px;
}

通过给左右两边设定宽度,左右元素分别向左右浮动中间元素设置左右边距

水平居中

内联元素给该内联元素所在的块父级元素添加text-align: center; 样式
块级元素给该元素添加margin: 0 auto; 样式

垂直居中

居中文字将该元素的line-height设为与height 一样的值
块级元素

.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

几个关于CSS的套路

Mon, 08 Oct 2018 22:28:21 GMT

横向布局

将子元素全部浮动起来
父元素添加 clearfix 属性
给clearfix类添加三行样式,清除浮动带来的影响

<head> ... <style> clearfix::after { content: ''; display: block; clear: both; nav>ul>li { float: left; } </style> </head> <body> <nav> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </body>

如果是两列显示在一行可以将li的高度设为50%;

文档流

文档流就是文档内元素的流动方向，内联:左->右,块级:上->下脱离文档流会影响body的高度脱离文档流会导致宽度收缩，需设置width: 100%;解决

元素的高度

块级元素的高度由其内部文档流元素高度的总和决定
内联元素的高度

position 定位

sticky 粘性定位
static 当前位置
relative 相对定位(参照自身原来的位置)
absolute 绝对定位(参照父级)
fixed 固定定位(参照浏览器)

通常将父级元素设置为相对定位，子元素设置为决定定位，子元素参照父级设定位置

背景图片居中，自适应

background-position: center center;
background-size: cover;

引用SVG图标

常用的网站：iconfont.cn

其他很实用的小技巧

max-height,max-weight
一般不给元素设定固定的height和width,容易出bug

通常从内向外加pading，将元素撑到指定宽高

内联元素不接受宽高度, 设置margin-top和margin-bottom不生效

display: block / inline-block;

hr 一条横线,样式设置

hr { height: 0; border: none; border-top: 1px solid red; }
work-break: break all

对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

HTML常用标签

Sun, 07 Oct 2018 11:49:03 GMT

iframe 和 a

iframe 标签通常用于嵌套页面
framborder 属性设置为0用于消除边框
name 属性与a标签结合起来

target="xxx" #跳转到name为xxx的窗口或iframe target="_blank" #在新的窗口打开 target="_self" #在当前窗口打开 target="_parent" #在父级窗口打开 target="_top" #在顶层窗口打开

    <iframe src="https://www.baidu.com" name="xxx"></iframe>
    <a target="xxx" href="http://qq.com">QQ</a>

a标签的download属性提供下载功能
```
<a herf="./test.png" download>test</a>
```
a标签的href属性可以发送http请求(只有锚点不发送请求，其他全部发送get <请求)

href="#" #跳到页面顶部，锚点变为"#" href="" #刷新页面，跳转自身 href="//qq.com" #以当前协议访问qq.com href="?q=xxx" #发送get请求,在地址栏显示 href="javascript:;" #鼠标点击什么也不做,javascript伪协议

form 和 table

form

除了a标签可以发送请求外，form标签也可以发送请求，通常是post请求 action 指定请求路径，请求路径中也可加查询参数，method指定请求动词 form 中提交信息的标签，必须添加name属性要想发送请求，form标签里必须有提交按钮

form 中有<button>,没写type属性，自动升级为提交按钮 form 中如果有<input>,只有type为submit时,才为提交按钮

    <form action='query' method="post">
        <label>Username<input type="text" name="name"></label>
        <label>Password<input type="password" name="pwd"></label>
        <input type="submit" value="submit">
    </form>

input与文字关联

通常写法,id与for关联

<input type="checkbox" id="xxx"><label for="xxx">Something</label>

常用套路,label将input包起来

<label><input type="checkbox">Something</label>

table
table的全部用法见下图

其他标签

nav,navigation 用来写导航条
ul,un-ordered list 无序列表
ol,ordered list 有序列表
除了span标签和div标签，其他标签都有默认样式
body默认margin为8px
strong和b都是加粗，strong表示语气上的强调，b只是单纯加粗
空元素 <img> <input> <meta> <link> <br> <hr> <col> <colgroup>
可替代元素 <img> <object> <video> <textarea> <input>

curl常用用法以及http协议

Sat, 06 Oct 2018 22:38:26 GMT

curl命令常用参数

最简单的用法，直接加网址

curl http://www.baidu.com       #返回下载进度，及网页源代码

-X 指定请求方式
- GET 请求
```
curl -X GET http://www.baidu.com  # -X GET 是可选的
```
- POST 请求
```
curl -X POST -d '123' http://www.baidu.com
```
  -d 后是向服务端发送的数据，写-d 选项后可省略 -X POST

-H 增加头部信息

   curl -H "Content-Type:application/json" -d '{"data":"123","key":"456"}' http://www.baidu.com
   #即指定发送数据的格式为json格式

-s silent 静静的下载，不输出进度条

-v 显示请求详细信息,HTTP协议的请求内容和响应

    $ curl -s -v http://www.baidu.com
    ...
    > GET / HTTP/1.1
    > Host: www.baidu.com
    > User-Agent: curl/7.55.0
    > Accept: */*
    >
    < HTTP/1.1 200 OK
    < Accept-Ranges: bytes
    < Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
    < Connection: Keep-Alive
    < Content-Length: 2381
    < Content-Type: text/html
    < Date: Sun, 07 Oct 2018 02:59:01 GMT
    < Etag: "588604c4-94d"
    < Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
    < Pragma: no-cache
    < Server: bfe/1.0.8.18
    < Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
    <

http协议(hyper text translate protocol) 超文本传输协议

通过curl命令查看http请求和响应

参考curl命令-v参数，>开头的为http请求，<开头的为响应请求的内容为

> GET / HTTP/1.1 > Host: www.baidu.com > User-Agent: curl/7.55.0 > Accept: / >

响应的内容为

       < HTTP/1.1 200 OK
       < Accept-Ranges: bytes
       < Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
       < Connection: Keep-Alive
       < Content-Length: 2381
       < Content-Type: text/html
       < Date: Sun, 07 Oct 2018 02:59:01 GMT
       < Etag: "588604c4-94d"
       < Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
       < Pragma: no-cache
       < Server: bfe/1.0.8.18
       < Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
       <

另一个请求示例

curl -X POST -d "data" -s -v -H "Xiaoyu: xxx" -- "https://www.baidu.com"

请求的内容为

> POST / HTTP/1.1 > Host: www.baidu.com > User-Agent: curl/7.55.0 > Accept: / > Xiaoyu: xxx > Content-Length: 4 > Content-Type: application/x-www-form-urlencoded

data

请求的格式为

1 动词路径协议/版本 #动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等 2 Key1: value1 2 Key2: value2 2 Key3: value3 2 Content-Type: application/x-www-form-urlencoded 2 Host: www.baidu.com 2 User-Agent: curl/7.54.0 3 #空格 4 要上传的数据 #可以为空

响应的内容为

< HTTP/1.1 302 Found < Connection: Keep-Alive < Content-Length: 17931 < Content-Type: text/html < Date: Sun, 07 Oct 2018 03:08:53 GMT < Etag: "54d97485-460b" < Server: bfe/1.0.8.18 < data #下载的数据，数据格式由content-type决定

响应的格式为

1 协议/版本号状态码状态解释 2 Key1: value1 2 Key2: value2 2 Content-Length: 17931 2 Content-Type: text/html 3 4 要下载的内容

通过Chrome浏览器查看http请求和响应

打开 Network
地址栏输入网址
在 Network 点击，查看 request/response，点击「view source」
点击「view source」
如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到
如果是响应，可以点击Response查看响应的数据

小宇的博客

setup语法糖的使用

前言

基本使用

定义 props 和 emit

导入组件

使用指令

使用 slots 和 attrs

暴露组件公用接口

与普通的script标签一起使用

声明其他选项

provide & inject

vue获取组件实例 父子组件实例

前言

Vue2

获取当前组件实例

1 render()

2 Vue.extend()

获取父组件实例

获取子组件实例

Vue3

获取当前组件实例

获取父组件实例

获取子组件实例

1 ref

2 slots.default()

实现一个拖动改变列宽的table组件

前言

核心思想

vue 实现 table 组件

给 th 绑定事件

实现相关事件

给定初始列宽

任意改变列宽

vite构建库并发布

添加入口文件 src/lib/index.ts

修改vite.config.js

修改package.json

发布npm 包

注意事项

测试是否发布成功

如何使用cli及脚手架原理

如何使用cli

原理分析

npm run-script

写一个cli脚手架

1 新建项目目录

2 新建 bin 目录 创建脚本 test.js

3 在package.json 配置bin 字段

4 运行 npm link (参考博客 npm link 详解)

5 执行test2

6 引入commander 添加子命令

7 使用 figlet chalk 输出欢迎界面

8 download-git-repo 从远程仓库拉取项目

9 执行命令 自动安装依赖

10 自动启动项目

11 实现约定路由功能

安装nvm

卸载之前的node

安装nvm

遇到的问题

原因

解决

nvm 基本使用

vscode 中不能使用node 命令

npm link详解

npm link 分为两个步骤

npm link 的时候发生了什么

第二步 npm link package-name

实现node中的util.promisify

实现原理:

vite支持custom-block功能显示源码

在demo.vue 中添加自定义标签 如demo

实现插件获取源码 添加源码到组件

组件中显示源码

在vite项目下支持markdown文件

前言

第一步 实现一个vite插件 md => html

第二步创建组件模板 Markdown.vue

显示在页面 并添加样式

vue获取组件实例父子组件实例

2 新建 bin 目录创建脚本 test.js

9 执行命令自动安装依赖

在demo.vue 中添加自定义标签如demo

实现插件获取源码添加源码到组件

第一步实现一个vite插件 md => html

显示在页面并添加样式

引用类型递归克隆

方法1 `Number()`

方法2 `parseInt()`

方法3 `parseFloat()`

方法4 `- 0`

二、事件总线 $on/$emit