created() { | |
document.addEventListener('click', this.clickOutsideEvent) | |
}, | |
destroyed() { | |
document.removeEventListener('click', this.clickOutsideEvent) | |
}, | |
methods: { | |
clickOutsideEvent(e) { | |
// console.log(this.$el.contains(e.target)) | |
if (!this.$el.contains(e.target)){ | |
this.handleOperater = false | |
} | |
} | |
} |
见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。
最近发现有不少介绍 JS 单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。 因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料， 从浏览器多进程到 JS 单线程，将 JS 引擎的运行机制系统的梳理一遍。
展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系， 重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。
内容是：从浏览器进程，再到浏览器内核运行，再到 JS 引擎单线程，再到 JS 事件循环机制，从头到尾系统的梳理一遍，摆脱碎片化，形成一个知识体系
目标是：看完这篇文章后，对浏览器多进程，JS 单线程，JS 事件循环机制这些都能有一定理解， 有一个知识体系骨架，而不是似懂非懂的感觉。
另外，本文适合有一定经验的前端人员，新手请规避，避免受到过多的概念冲击。可以先存起来，有了一定理解后再看，也可以分成多批次观看，避免过度疲劳。
我们可以通过 getCurrentInstance 这个函数来返回当前组件的实例对象，也就是当前 vue 这个实例对象，下面这篇文章主要给大家介绍了关于 Vue3 组合式 API 之 getCurrentInstance 的相关资料，需要的朋友可以参考下
当你在编写 css 代码的时候，是否遇到这样的困扰：不知道取什么 class 名？修改某个组件的样式，担心影响了其他组件？编写的组件样式如何复用？为了解决这些问题，聪明的程序猿发明了 BEM 命名法。
BEM 命名法，是对 css 命名的一种规范，将页面模块化，隔离样式，提高代码的复用性，减少后期的维护成本。BEM 的意思就是 Block (块)、Element (元素)、modifier (修饰符)，通过双下划线
__或者双中划–链接。BEM 通常用于框架开发中，比如微信 WEUI、饿了么 element-ui、有赞 vant 等。笔者也是通过阅读这些优秀框架的源码，学习到了这一套 css 命名大法，从此走上人生巅峰，赢取白富美。
//index.js | |
import { createStore } from './gvuex.js' | |
const store = createStore({ | |
// 定义 store 的状态 | |
state() { | |
return { | |
count: 1 | |
} | |
}, | |
// 定义获取 state 状态数据的计算属性 getters，以下的值都被认为是 state 的派生值 | |
getters: { | |
double(state) { | |
return state.count * 2 | |
} | |
}, | |
// 定义修改 state 状态数据的方法 mutations | |
mutations: { | |
add(state) { | |
state.count++ | |
} | |
}, | |
// 定义异步操作的方法 actions | |
actions: { | |
asyncAdd({ commit }) { | |
setTimeout(() => { | |
commit('add') | |
}, 1000) | |
} | |
} | |
}) |
App.vue
<script setup> | |
import { useStore } from '../store/gvuex' | |
import { computed } from 'vue' | |
let store = useStore(); | |
let count = computed(()=>{ store.state.count }) | |
let double = computed(()=>{ store.getters.double }) | |
function add() { | |
store.commit('add') | |
} | |
function asyncAdd() { | |
store.dispatch('asyncAdd') | |
} | |
</script> | |
<template> | |
<div class=""> | |
* 2 = | |
<button @click="add">add</button> | |
<button @click="asyncAdd">async add</button> | |
</div> | |
</template> | |
<style scoped> | |
</style> |
知道了 vuex 的用法，你会不会发出以下疑问：
store.commit('add') 才能触发事件执行呢？可不可以进行直接调用 mutation 函数进行操作呢？state 存储的状态进行修改，只能通过调用 mutation 函数的方式修改呢？store.dispatch('asyncAdd') 函数才能完成呢？可以直接调用 store.commit('asyncAdd') 嘛？如果不可以，为什么呢？createStore() 和 useStore() 到底发生了什么？那么下面就来一一解密吧。
JavaScript 中有些 API 可能使用率比较低，下面我们逐一介绍它们的用法和使用场景。
Blob API 用于处理二进制数据，可以方便地将数据转换为 Blob 对象或从 Blob 对象读取数据。
// 创建一个 Blob 对象 | |
const myBlob = new Blob(["Hello, world!"], { type: "text/plain" }); | |
// 读取 Blob 对象的数据 | |
const reader = new FileReader(); | |
reader.addEventListener("loadend", () => { | |
console.log(reader.result); | |
}); | |
reader.readAsText(myBlob); |
使用场景：在 Web 应用中，可能需要上传或下载二进制文件，使用 Blob API 可以方便地处理这些数据。
提到设计模式，相信知道的同学都会脱口而出，五大基本原则（SOLID）和 23 种设计模式。SOLID 所指的五大基本原则分别是：单一功能原则、开放封闭原则、里式替换原则、接口隔离原则和依赖反转原则。逐字逐句诠释这五大基本原则违背了写这篇文章的初衷，引用社区大佬的理解，SOLID 可以简单概括为六个字，即 “高内聚，低耦合”：
