发表于 | 分类于

Object.defineProperty

Vue2响应式基于Object.defineProperty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const target = {
    name:'cny',
    age:22
}

function reactive(obj,key,value){
    Object.defineProperty(target,key,{
        get(){
            return value
        },
        set(newval){
            if(newval !== value){
                return value = newval
            }
        }
    })
}
Object.keys(target).forEach(key => reactive(target,key,target[key]))

console.log(target.name)
console.log(target.name = 'cny2')

//但target新增属性进行重新访问和设值，都不会再触发get\set方法，Object.defineProperty支队初始对象的属性具有监听作用，新增属性失效 数组只能操作七种方法，修改某一项值无法劫持
//解决方法 Vue.$set(target,'fruit','apple') 
target.fruit = 'apple'
target.fruit = 'banana'
阅读全文 »

发表于 | 分类于

CommonJs

CommonJs是一种JavaScript语言的模块化规范，它通常会在服务端的nodejs上使用，项目是由多个模块组成的，模块与模块之间的调用，需要各个模块有相同规范的API，这样一来在使用的过程中不会有那么多的学习成本，并且对于单个模块来说是类聚的。

在CommonJs的模块化规范中，每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。

阅读全文 »

发表于 | 分类于

MyUse.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import type { App } from 'vue'

import { app } from '../main'

interface Use {
  install: (app: App, ...options: any[]) => void
}

const installList = new Set()

export function MyUse<T extends Use>(plugin: T, ...options: any[]) {
  if (installList.has(plugin)) {
    console.log('has been registered');
  } else {
    plugin.install(app, ...options)
    installList.add(plugin)
  }
}
阅读全文 »

发表于 | 分类于

Loading.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import type { App, VNode } from 'vue'

import Loading from './index.vue'

//通过createVNode转成Vnode
import { createVNode, render } from 'vue'

export default {
  install(app: App) {
    const Vnode: VNode = createVNode(Loading)
    render(Vnode, document.body)
    app.config.globalProperties._loading = {
      show: Vnode.component?.exposed?.show,
      hide: Vnode.component?.exposed?.hide,
    }
    console.log(app, Vnode.component?.exposed);
  }
}
阅读全文 »

发表于 | 分类于

图片通过canvas转base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { onMounted } from 'vue'

type Options = {
  el: string
}

export default function useBase64(options: Options): Promise<{ baseUrl: string }> {
  return new Promise((resolve) => {
    onMounted(() => {
      //获取图片实例
      let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
      //是否加载完成    
      img.onload = () => {
        resolve({
          baseUrl: base64(img)
        })
      }
    })

    const base64 = (el: HTMLImageElement) => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext("2d")
      canvas.width = el.width
      canvas.height = el.height
      ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
      return canvas.toDataURL('image/png')
    }
  })
  
  // useBase64({ el: "#img" }).then(res => {
  //   console.log(res.baseUrl);
  // })

发表于 | 分类于

type 关键字 （可以给一个类型定义一个名字） 多用于符合类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//定义类型别名
type str = string
let new:str = 'CNY'

//定义函数别名
type fn = () => string
let fun:fn = () => 'CNY'

//定义联合类型别名
type str = string | number
let str2:str = 22
let str3:str = '22'

//定义值的别名
type value = boolean | 0 | ’123‘
let a:value = false

nerver类型

使用 never 类型来表示不应该存在的状态

阅读全文 »

发表于

不断自我思考。

发表于 | 分类于

类型系统

  • 在开发过程中找错
  • 使用”类型注解“来分析代码
  • 仅存在于开发阶段
  • 不会提供性能优化

类型

  • 一个更方便我们去更简便地描述一个具有相应的属性和方法的值的东西

值

  • 我们能够赋值给变量（variable）的东西
  • 每一个值都会有相应的类型
阅读全文 »

发表于 | 分类于

深拷贝

  • 还可以通过JSON.stringfy() 和JSON.parse()互相转化，实现深拷贝
  • 但json数据中，不带任何方法，拷贝方法时无法实现

数组

1
2
3
4
5
6
7
8
9
var arr1 = []    //数组字面量
var arr2 = new Array()  //不推荐
//通过系统内置的Array构造函数声明数组

var arr3 = Array()
var arr3 = Array(5)    //数组长度为5

//所有数组都及继承于Array.prototype
var arr = [,,,,,1,1]    //稀松数组
阅读全文 »

发表于

逆而顺之，顺而逆之。