高精度全局权限处理

权限的控制由前端处理的场景很多，例如根据后台返回内容，判断该人是否对此功能有权限，进而去修改元素v-if / v-show，这种情况下，当这个功能在多处地方出现，就会导致我们做很多很多不必要的重复代码，如果判断条件繁琐的情况，更加冗余，代码量也会增加很多。因此我们可以造一个小车轮，挂在全局上对权限进行处理

在项目里新建一个common文件夹用于存放全局 .js 文件
这种全局文件夹做法相当普遍，一般项目里都应该有这样一个文件夹来管理全局的东西

// common/jurisdiction.js  用于存放与权限相关的全局函数/变量
export function checkJurisdiction(key) {
    // 权限数组
    let jurisdictionList = ['1', '2', '3', '5']
    let index = jurisdictionList.indexOf(key)

    if (index > -1) {
        // 有权限
        return true
    } else {
        // 无权限
        return false
    }
}

NANAbout 1 min

WebGL学习笔记

WebLG 容器

在浏览器使用 canvas 作为 weblg 容器

<canvas  id="canvas"> </canvas>

NANAbout 1 min

顶点着色器与片源着色器

::: vue-playground webgl 绘制一个点

NANAbout 2 min

Map 与 WeakMap

Map 映射表

在MDN上是这么描述 Map 的:

该Map对象保存键值对并记住键的原始插入顺序。任何值（对象和原始值）都可以用作键或值。

说到键值对形式的数据格式，我会很容易联想到数组(Array)和对象(Object),我们先来看一下它的区别

/**
 * Array
 * 在 javascript 中数组是一组数据的集合，并且可进行迭代的
 * key 必须为number，从 0 开始依次递增，
 * vaule 可以为任何类型
 */
const array = new Array([a,b,c,d,e])
console.log(array[0]); // a
array.forEach((value,key)=>{
  console.log(value+' => '+key + ', ');
}) // 0 => a, 1 => b, 2 => c, 3 => d, 4 => e

/**
 * Object
 * 在 javascript 中对象是一组属性的集合，不能进行迭代
 * key 必须为string，通常我们称它为属性名
 * vaule 可以为任何类型
 */
const object = new Object({
  name: 'aaa'
})
console.log(object.name); // aaa
object.forEach((value,key)=>{
  console.log(key+' => '+value + ', ');
})// Error 因为Object不可以进行迭代

NANAbout 4 min

vue 响应式数据原理

什么是响应式?

首先响应式是一个过程，由两个参与者组成，一个是触发者，另个是响应者

触发者：数据
响应者：引用数据的函数 (vue3中称之为副作用函数(effect))

当数据改变时，引用数据的副作用函数响应数据的改变并重新执行，这个过程就是响应式

响应式核心：Proxy 代理

new Proxy 传入一个源对象，返回一个Proxy实例

NANAbout 9 min