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 的 ...