JavaScript 常见算法
前言看这篇文章之前，我们不妨自问一下，我们为什么要去学习算法？这个对我们有什么好处？ 学习算法可以开拓我们的思维，让我们的逻辑更加严谨 学习算法是成为一名优秀的开发者的途径之一 可以高质、高效地完成我们业务上的需求 排序算法冒泡排序 依次比较相邻的两个元素，根据大小互换位置，保证每一次比较大的数都在最后 重复n+1次，就可完成排序 1234567891011121314// 时间复杂度 O(n ^ 2) n为数组长度// 空间复杂度 O(1)Array.prototype.bubbleSort = function () { // 获取当前的数组 const ctx = this for (let i = 0; i < ctx.length - 1; i++) { for (let j = 0; j < ctx.length - 1 - i; j++) { // 判断后面一个数是否大于前面的，如果是则交换位置 if (ctx[j] > ctx[j + 1]) { ...
vue-router钩子函数和具体的执行流程
前言vue-router 有几种钩子函数？具体是什么及执行流程是怎样的？ 思维导图： vue-router 提供的导航守卫主要用来通过 跳转 或 取消 的方式 守卫导航 。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。也就是：全局守卫、路由守卫、组件守卫。 全局守卫前置守卫 beforeEach 全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。 12345router.beforeEach((to, from, next) => { console.log('to:', to); console.log('from:', from); next(); }) beforeEach 全局前置守卫接收三个参数： to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由对象 next: Function: 一定要调用该方法不然会阻塞路由 next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止 ...
经典 JavaScript 手撕面试题
前言最近裁员找工作，在此记录一下面试中常见的手写函数实现，每天闲时不定时更新。 防抖函数12345678910111213141516171819202122232425262728293031323334353637383940414243/** * 实现函数的防抖（目的是频繁触发中只执行最后一次） * @param {*} callback 需要执行的函数 * @param {*} delay 检测防抖的间隔频率，默认500ms * @param {*} immediate 是否是立即执行 true：第一次，false：最后一次，默认false * @return {可被调用执行的函数} */const debounce = (callback, delay = 500, immediate = false) => { // 声明一个定时器容器 let timer = null // isImmediateInvoke变量用来记录是否立即执行, 默认为false ...
大环境下失业引发的思考
前言2022-07-11，天气晴，外面的 ☀️ 太阳公公炙烤着大地，散发的余热让街道上匆匆的行人 🚶 大汉淋漓。 我在办公室正常办公，睡了一个好不舒服的午觉，朦胧的双眼透露着一股不满足的气息。今天又是和甲方的需求评审会议，我像往常一样认真地分析需求，并在需要的时候发表自己的一些看法，突然微信弹出了一个语音通话，一看是上级领导，一种不详的征兆涌上心头，特别是在我刚过半年转正的这个敏感的时间点。因为在我看来，领导找你无非两个原因，一个是你工作做得不好，找你谈话，一个就是大环境下的裁员。(我的工作安排在华南地区有主管安排，一般总监不会直接找你) 大概意思如下：领导：’明伟，公司这两个季度业绩亏损状态，你在裁员名单里面，本来可以提前叫你走的，但考虑到转正可以赔偿n+1，所以现在才跟你说，这也是我尽可能做的了，还希望理解。‘我：’好吧，谢谢。‘ 我也明白这个不是领导能决定的，我也表示很理解，但突然袭来的裁员让我措手不及，一下就打乱了我的计划。本来我想这公司福利和业务都算不错，现在大环境求职也不好，好好的在这呆个几年，沉淀一下。 这下好了，本来简历都不怎么好的，现在又加了一条半年的裁员经历，感觉 ...
create-react-app 配置代理
教程 在项目 src 目录下创建 setupProxy.js: 1234567891011121314151617181920const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) { app.use( createProxyMiddleware('/api', { // 遇到/api1前缀的请求，就会触发该代理配置 // 转发给谁 target: 'http://localhost:5001', // 让服务器知道从哪发出的 控制服务器收到的请求头的Host字段的值 changeOrigin: true, // 把api1 替换成空格。去除请求前缀，保证交给后台服务器是正常请求地址 pathRewr ...
create-react-app 配置路径别名
我们使用第三方库 @craco/craco 配置别名 教程 安装 @craco/craco 1npm i -D @craco/craco 在项目根目录下创建配置文件 path.tsconfig.json: 12345678910{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }} 修改 package.json 中的脚本命令 123456"scripts": { "start": "craco start", "build": "craco build", &quo ...
React.js框架 + TSX 知识点归纳
用了几年 Vue，但对于 React 还处在懵懂的状态，趁着最近工作不忙，赶紧把 React 的知识补上 强烈推荐哔哩哔哩上的张天禹老师的教程：尚硅谷React教程（2022加更，B站超火react教程） 有 vue 基础的上手特别快，有需要学习 React 的伙伴可以观看一下 什么是 ReactReact 是一个简单的 javascript UI 库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用 虚拟DOM 来有效地操作 DOM。它遵循从高阶组件到低阶组件的单向数据流。 React 和 Vue 的区别核心思想不同 Vue 的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的 MVVM 框架。 React 的核心思想是声明式渲染和组件化、单向数据流，React 既不属于 MVC 也不属于 MVVM 架构。声明式是什么意思？声明式与之相对应的是命令式，命令式指的是通过DOM操作一步步把网页变成想要的样子，而声明式则是只需要通过状态去形容最后的网页长什么样子即可 ...
Vue3 中如何使用 JSX 语法
本文转载自 前端Vuer，请收下这份《Vue3中使用JSX简明语法》，如何侵权，请联系作者删除，本文仅当学习使用 各位 Vuer，Vue3 现在已经成为默认版本，今天我们来熟悉一下在 Vue3 中如何使用 JSX 的基本语法 文本插值Vue 中的文本插值默认是使用双大括号: 1<h1>{{msg}}</h1> 在 JSX 中变成了单大括号: 12const name = 'World'const element = <h1>Hello, { name }</h1> 和在 Vue 模板语法中的文本插值一样，大括号内支持任何有效的 JavaScript表达式,比如：2 + 2，user.firstName，formatName(user)等。 条件渲染 使用 if/else 1234567const element = (name) => { if (name) { return <h1>Hello, ...
渐变星空 Sky 粒子背景特效
之前的 Cherry 樱花雨背景特效 感觉太花里胡哨了，自己整了个渐变星空背景，效果看着还不错，有兴趣的伙伴可以观摩一下。 教程 [Blogroot]\_config.butterfly.yml 找到 index_img 设置为空： 12# The banner image of home pageindex_img: [Blogroot]\_config.butterfly.yml 找到 background 设置渐变色： 1234# Website Background (設置網站背景)# can set it to color or image (可設置圖片 或者 顔色)# The formal of image: url(http://xxxxxx.com/xxx.jpg)background: 'linear-gradient(to right top, #009fff, #ec2f4b)' [Blogroot]\themes\butterfly\source\css\_global\index.styl 找到 #web_bg 设置渐变动画： 12 ...
Vue3 + Vite 构建组件库发布到 npm
你有构建完组件库后，因为不知道如何发布到 npm 的烦恼吗？本教程手把手教你用 Vite 构建组件库发布到 npm 使用 vue-cli 创建 vue3+vite 项目123456## 安装或升级脚手架yarn install -g @vue/cli## 确保 vue-cli 版本在 4.5.0 以上vue -V## 创建项目vue create Hellow-World 这里以我的项目 vue3-xmw-table 为例 调整目录结构 首先需要创建一个 packages 目录，用来存放组件 将 src 目录改为 examples 用作示例 启动项目的时候，默认入口文件是 src/main.js，将 src 目录改为 examples 之后，就需要重新配置入口文件，在根目录下创建一个 vue.config.js 文件 1234567891011121314// vue.config.jsmodule.exports = { // 将 examples 目录添加为新的页面 pages: { index: { // page 的 ...
