前端精髓
文章平均质量分 51
看前端技术文章,就在前端精髓。
前端精髓
前端开发
展开
-
组件库都在使用CSS变量了
通常,element-plus 自定义主题,如果您的项目也使用了 SCSS,可以直接修改 Element Plus 的样式变量。通过 webpack 的 postcss-loader + postcss-css-css-variable 编译,上述代码转变成。通过 webpack 的 postcss-loader + postcss-css-css-variable 编译生成固定的代码。还可以通过 CSS 变量设置,现在 element-plus 中用 css 变量来重构了几乎所有组件的样式系统。原创 2022-11-24 22:47:49 · 1338 阅读 · 0 评论 -
中止一个或多个 Web 请求
我们在处理前后端交互的过程中,有时需要仔细斟酌接口的请求时机(例:频繁的Tab切换、树节点切换、数据录入时,请求什么时候发?)或接口返回数据的处理时机(例:接口还没返回时就要切换路由,路由都切换走了,之前请求的数据怎么办?),避免一些无用的请求或者接口返回顺序的差异(例如:同一个按钮点了多次,如果后点的先返回,先点的后返回,怎么办?)。常见的处理方式有:加防抖:控制请求时机。对于频繁操作,只在最后一次动作时,发出请求。锁状态:控制请求时机。直接禁止很频繁的操作,必须一个接一个。原创 2022-11-20 16:09:47 · 737 阅读 · 0 评论 -
css实现三列等宽等间距排列(九宫格)
使用 flex 布局实现需要注意一个点,就是需要用 flex-wrap 属性来使其换行。将当前元素定义为弹性容器。每个方块设置左浮动,宽度30%,左外间距2.5%。width:30%;表示是父级元素宽度的30%。原创 2022-11-19 21:41:44 · 1008 阅读 · 0 评论 -
表单提交类型
曾经想通过 post 提交方式提交数据,只能是使用 form 表单 submit 的方式来提交,因为过去没有 ajax 的提交方式。表单未指定 enctype 属性时的默认值为 application/x-www-form-urlencoded。通过上⾯例⼦发现,结构简单的时候 formdata 数据更简单,结构复杂的时候(array)JSON数据更简单。元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。元素时需使用 enctype 为 multipart/form-data。原创 2022-11-19 20:52:15 · 891 阅读 · 0 评论 -
KMP算法(字符串匹配)
字符串匹配是常见的算法题,就有一个字符串判断里面是否包含另一个字符串。举例来说,有一个字符串"AAAAAABC"(主串),我想知道,里面是否包含另一个字符串"AAAB"(模式串)?对主串和模式串做匹配。首先,字符串 “AAAAAABC” 的第一个字符与搜索词 “AAAB” 的第一个字符,进行比较。AAAAAABCAAAB字符串有一个字符与搜索词的第一个字符相同,接着比较字符串和搜索词的下一个字符,还是相同。直到字符串有一个字符,与搜索词对应的字符不相同为止。当字符串的索引为 3 的时候发现不原创 2022-02-11 08:49:08 · 588 阅读 · 0 评论 -
memoize 记忆函数
/** @template T @typedef {function(): T} FunctionReturning *//** * @template T * @param {FunctionReturning<T>} fn memorized function * @returns {FunctionReturning<T>} new function */const memoize = fn => { let cache = false; /** @ty原创 2022-01-08 11:20:24 · 578 阅读 · 0 评论 -
求集合的所有子集问题
给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。示例 1:输入:nums = [1,2,3]输出:[[],[1],[2],[1,2],[3],[1,3],[2,3],[1,2,3]]function subsets(nums) { let result = [] result.push([]) for (const num of nums) { let newSubsets = [] for (const subset of r原创 2022-01-08 10:30:36 · 3379 阅读 · 0 评论 -
数组全排列问题
题目:给定一个数组,打印出数组的所有排列。比如数组为[1, 2, 3],那最终输出为:[1, 2, 3][1, 3, 2][2, 1, 3][2, 3, 1][3, 1, 2][3, 2, 1]就是把数组的所有顺序的可能都输出出来。解题思路1、递归解法思路递归的主旨思想就是把问题转化成一个或几个更小规模的子问题,比如说[1, 2, 3]的全排列不好处理,那我们固定第一位是1,然后求[2, 3]的全排列,然后再把第一位固定为2,求[1, 3]的全排列,最后把第一位固定成3,求[1,原创 2022-01-07 21:19:39 · 422 阅读 · 0 评论 -
V8中的代码缓存--code caching
简介一份 JavaScript 代码从 Blink 交给 V8 开始到执行,经历了解析,编译,运行,优化以及包括 GC 这些过程。下面这张图展示了 V8 在运行中实际测量得出的数据。可以看到解析 Parse 和编译 Complie 所花费的时间占到了整个运行周期总时间的三分之一。所以,这是为什么 V8 需要做 code cache,引擎希望尽可能的减少解析和编译所用的时间。其总体思想就是,既然解析和编译花费的时间占据这么大,那么满足一定条件后,V8 会把编译和解析的结果缓存下来,等到下次遇到相同的文件原创 2022-01-05 22:21:57 · 1479 阅读 · 0 评论 -
require(‘module‘) 是什么?
在很多框架中经常会看到导入 module 模块来使用,那么导入的 module 模块和文件中的 module 变量到底又有什么区别呢?const Module = require('module');module 变量在每个模块中,module 变量是对代表当前模块的对象的引用。Module { id: '.', exports: 2, parent: null, filename: '/Users/leinov/github/node-api/module/module.js',原创 2022-01-03 21:00:33 · 868 阅读 · 0 评论 -
执行webpack发生了什么
本文主要介绍 webpack 和 webpack-cli 模块的关系和部分源码分析。webpack4.0 以后,似乎执行方式就发生了改变,不再是 webpack 一波流,而是多了一个 webpack-cli。webpack3 中 webpack-cli 是合在 webpack 中。所以在命令行运行 webpack 命令的同时,会提示让你再装一个 webpack-cli。执行脚本到打包结束流程1、当我们安装了webpack 模块后,就会在 node_modules/.bin 目录下生成一个 webpac原创 2022-01-03 10:52:32 · 615 阅读 · 0 评论 -
React RouterV6新特性
安装npm install react-router-dom@6配置路由import { render } from "react-dom";import { BrowserRouter, Routes, Route} from "react-router-dom";// import your route components toorender( <BrowserRouter> <Routes> <Route path=原创 2022-01-02 11:36:19 · 679 阅读 · 0 评论 -
neo-async 模块
neo-async 和 async 模块都是为了解决嵌套金字塔,和异步流程控制而生,neo-async 是 async 的替代品,因为 neo-async 比 async 的性能更快。为什么要使用这个模块,举个例子,比如我们需要读取多个文件,将读取文件的结果保存在数组中。let list = []fs.readFile('file1', 'utf8', function (err, res) { list.push(res) fs.readFile('file2', 'utf8', funct原创 2021-12-26 16:35:19 · 838 阅读 · 0 评论 -
瀑布流布局
要实现的效果如下图:首先最容易想到的就是分两列,然后把内容添加进行就可以了。 <style> .container { display: flex; flex-direction: row; justify-content: space-between; padding: 12px; } .left,.right { margin-right: 6px; flex: 1; } &l原创 2021-12-25 11:51:41 · 743 阅读 · 0 评论 -
node监听子进程的错误
/** * @param {string} command process to run * @param {string[]} args command line arguments * @returns {Promise<void>} promise */const runCommand = (command, args) => { const cp = require("child_process"); return new Promise((resolve, reje原创 2021-12-19 09:27:53 · 798 阅读 · 0 评论 -
贪心算法-纸币问题
从一个生活问题谈起先来看看生活中经常遇到的事吧——假设您是个土豪,身上带了足够的1、5、10、20、50、100元面值的钞票。现在您的目标是凑出某个金额w,需要用到尽量少的钞票。依据生活经验,我们显然可以采取这样的策略:能用100的就尽量用100的,否则尽量用50的……依次类推。在这种策略下,666=6×100+1×50+1×10+1×5+1×1,共使用了10张钞票。function main () { const RMB = [100, 50, 20, 10, 5, 1] // 钞票金额 c转载 2021-12-12 19:20:49 · 1933 阅读 · 0 评论 -
require.resolve和path.resolve
非相对路径require.resolve 会找node_modoule里面的模块// node_moudles里面的webpackrequire.resolve('webpack')path.resolve 会从当前目录出发找模块// 当前目录里面的webpackpath.resolve('webpack')相对路径基本没什么区别// 当前目录里面的webpackpath.resolve('webpack')// 当前目录里面的webpackrequire.resolve('w原创 2021-12-08 08:21:15 · 2164 阅读 · 0 评论 -
如何编写webpack插件
现在插件的书写格式:// 简单插件class MyPlugin { constructor (options) { console.log(options) } apply (compiler) { compiler.hooks.done.tap('MyPlugin', () => { console.log('构建结束') }) }}// 复杂插件class AssetPlugin { constructor(options) {原创 2021-12-06 11:38:28 · 703 阅读 · 0 评论 -
loader中的this是什么
loader 怎么执行的全靠 loader-runner,查看 GitHub 地址import { runLoaders } from "loader-runner";runLoaders({ resource: "/abs/path/to/file.txt?query", // 资源路径 // String: Absolute path to the resource (optionally including query string) loaders: ["/abs/path/to/lo原创 2021-12-06 09:40:35 · 268 阅读 · 0 评论 -
抽象语法树
webapck打包代码的时候会自动修改导入导出的格式,比如下面的例子:require('./title')// 修改为__webpack_require__(/*! ./title */ "./src/title.js")完整的打包之后的代码如下:(() => { var __webpack_modules__ = ({ "./src/title.js": ((module) => { module.exports = 'title'原创 2021-12-04 21:28:14 · 382 阅读 · 0 评论 -
webpack 懒加载原理
分析__webpack_require__.f = {}__webpack_require__.e = (chunkId) => { return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => { // promises = [], key = "j" // chunkId = src_title_js, promises = [] __webpack_requir原创 2021-12-02 10:45:48 · 1331 阅读 · 0 评论 -
让Vue文件直接在浏览器中运行
项目背景我非常非常讨厌Webpack,这个东西结构复杂,概念繁多,难以理解,主体与插件设计并不一致,我曾尝试学习,但官方只是教你怎么用,不解释配置底层原理,我不喜欢这种只知表面不知原理的感觉。或者设计者和众多开发者自己也不是完全清楚到底怎么解释原理吧!!!首先说,Vue自创的单文件组件这个太好用了,封着性好,开发组件没什么学习成本,好用!但是,Vue虽然号称“渐进式框架”,但如果【不想】只使用基本语法做点小玩意,【想】使用组件搞Vue开发,却必须依赖Webpack这个复杂的工具,这非常不符合“渐进式框原创 2021-02-10 14:59:08 · 15491 阅读 · 1 评论 -
了解 babel 的包
核心包(Packages)1、@babel/core 2、@babel/parser3、@babel/traverse4、@babel/generator@babel/core 是Babel编译器本身;它暴露了其中的babel.transform方法:transformedCode = transform(src).code编译器可分为三部分:解析器: @babel/parser代码转换(transformer[s]):通过插件/预设,这些都是使用@babel/traverse遍历AST原创 2021-02-07 15:34:06 · 377 阅读 · 0 评论 -
关于graphql快速入门
GraphQL是什么?一种用于 API 的查询语言,GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定原创 2021-01-31 12:30:09 · 12658 阅读 · 0 评论 -
菜单栏底部线条切换效果(标题滚动居中显示)
要实现的效果是当点击某一个菜单的时候,菜单的底部有一个线条高亮,从上一次的位置切换到点击的位置,而且需要添加动画效果。首先我们的DOM结构是这样的,li 是显示每一个菜单的内容,我们添加了自定义的属性,用来区分在点击的时候具体是点击第几个的位置。线条是通过定位在最底下的。<div class="wrapper"> <ul class="list" id="list"> <li class="item" data-index="0">首页</li&.原创 2021-01-16 20:19:37 · 763 阅读 · 0 评论 -
如何清除浮动
css代码如下 <div>开始</div> <div class="parent"> <div class="first"> </div> </div> <div class="step"></div> <div class="last"&...原创 2020-03-22 12:41:42 · 755 阅读 · 1 评论 -
谈谈你对闭包的认识
关于回答这个问题,我们可以从四个方面入手:什么是闭包闭包解决了什么问题闭包的应用场景闭包的缺点什么是闭包一句话解释就是可以访问另一个函数作用域中变量的函数。然后解释一下这句话,在JS的函数执行会形成一个作用域,执行完成作用域会销毁,但是闭包就不要一样了,由于闭包函数是函数内部的子函数,内部函数可以访问上级作用域,由于函数作用域中存在变量引用,所以执行完成不会立即销毁。闭包解决了...原创 2020-03-21 22:41:22 · 575 阅读 · 0 评论 -
关于JS代码的优化
避免二次解析Function 构造函数可以接收任意数量的参数,但最后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数。来看下面的例子:var sum = new Function(“num1”, “num2”, “return num1 + num2”); // 不推荐技术角度讲,这是一个函数表达式。但是,我们不推荐读者使用这种方法定义函数,因为这种语法会导致解析两次代码(...原创 2020-03-20 09:28:24 · 213 阅读 · 0 评论 -
前端面试技巧
当面试官问你为什么从上一家公司离职?正确师范:原则:客观陈述,保持语气,不涉及抱怨,不进行诋毁,表达感恩。比如:其实上一份工作老板对我很好(表示感恩),但公司在一直在走下坡(客观陈述),我尝试过努力去改变(表达进取心)。而贵司在行业内非常有知名度(表示羡慕),听闻培训体系很健全(表示自己爱学习),所以……总之,我对全公司还是很感恩的,他们培养了我。当面试官问你你有什么要问我的吗?一、...原创 2020-03-19 13:06:04 · 640 阅读 · 1 评论 -
移动端常见问题
iOS无法识别的时间格式 2020-03-15 9:30:30 ,在时间中不要使用 - 短横线,当传入new Date('2020-03-15 9:30:30') 会发生报错,可以使用 / 斜杠分隔,而安卓则都可以识别。iOS微信分享问题,当你开发单页引用的时候,网页需要运行在微信浏览器,使用了路由库比如 vue-router,首页可以正常分享,但是跳转到其他页面的则无法分享,必须使用 win...原创 2020-03-15 15:34:17 · 325 阅读 · 0 评论 -
谈谈你对keep-alive的了解
keep-alive可以实现组件的缓存,不会对当前组件卸载,include/exclude属性,生命周期activated/deactivated。LRU算法keep-alive 是抽象组件原创 2020-03-14 16:00:56 · 2196 阅读 · 0 评论 -
三道题就能考察你对Vue掌握了多少!
1.谈一下你对MVVM原理的理解?2.请说一下响应式数据的原理?3.Vue中是如何检测数组变化?扫描下方二维码,发送“面试题”获得题目的完整答案!...原创 2020-02-24 14:08:20 · 344 阅读 · 0 评论 -
为什么需要Vue对组合API?
目前在Vue世界中,最热门的话题是Composition API,这是Vue 3.0中引入的基于函数的API。 在本文中,我们将学习这个新API的需求,然后学习如何使用基于函数的API。 我也尝试以尽可能简单的方式向初学者解释它。所以,让我们开始吧在我们深入探讨之前,无需担心组合API将彻底改变Vue。 Composition API是现有组件附加的功能,因此Vue 3.0中没有重大更改此外...翻译 2020-02-20 22:09:00 · 1205 阅读 · 0 评论 -
创建 Refs 的几种方式
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。到目前为止,我们有三种方式创建 Refs 。回调 RefscreateRef API 的方式使用 useRef() hook回调 Refs现在有一段代码,需要实现的功能是点击 button 按钮然后给 input 表单获取焦点。代码结构如下:import React...原创 2020-02-03 11:07:29 · 1962 阅读 · 0 评论 -
用svrx实现mock数据
安装npm install @svrx/cli -g如果你的接口/api/user需要这样的数据{ "code":-6, "msg":"", "message":"", "data":{}}那么我们在route.js可以这样配置// 配置get请求get('/api/user').to.json( { "code":-6, "msg":"", "messa...原创 2019-12-11 18:30:49 · 243 阅读 · 0 评论 -
JavaScript中的DOM操作基础知识
DOM操作可以使用 querySelector() 方法查询 DOM,该方法将任意 CSS 选择器作为参数:const myElement = document.querySelector('#foo > div.bar')通过 Doument 类型调用 querySelector() 方法时,会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用 querySele...原创 2019-11-08 19:25:39 · 381 阅读 · 0 评论 -
了解微前端
微前端就是后端的微服务的缩影!!!微服务与微前端,都是希望将某个单一的单体应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合,从而满足业务快速变化及分布式多团队并行开发的需求。微服务与微前端原理和软件工程,面向对象设计中的原理同样相通,都是遵循单一职责、关注分离、模块化与分而治之等基本的原则。前端应用越来越复杂,我们该如何应对?先思考一个问题,比如淘宝这样的大型...原创 2019-11-02 22:16:07 · 381 阅读 · 0 评论 -
分析webpack打包后的代码
在webpack.config.js添加如下配置。const path = require('path')module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'd...原创 2019-11-02 11:09:14 · 1490 阅读 · 0 评论 -
单项数据流
vue单项数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。<template> <div id="app"> <HelloWorld :total="total" /> <...原创 2019-10-29 14:11:39 · 373 阅读 · 0 评论 -
使用Nginx作为HTTP负载均衡
介绍跨多个应用程序实例的负载平衡是一种用于优化资源利用率,最大化吞吐量,减少延迟和确保容错配置的常用技术。可以将nginx用作非常有效的HTTP负载平衡器,以将流量分配到多个应用程序服务器,并使用nginx改善Web应用程序的性能,可伸缩性和可靠性负载均衡方法nginx支持以下负载平衡机制(或方法):轮询-对应用程序服务器的请求以轮询方式分发,最少连接-将下一个请求分配给活动连接...翻译 2019-10-28 14:06:55 · 443 阅读 · 0 评论