JavaScript
文章平均质量分 53
前端精髓
公众号【前端精髓】
展开
-
TS 映射类型
它的语法与索引签名的语法类型,内部使用了。原创 2023-01-02 22:42:55 · 279 阅读 · 0 评论 -
TS获取对象属性值的类型
查看官方文档:https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html。如果想获取对象属性名的类型,可以这样。原创 2023-01-02 12:08:33 · 8009 阅读 · 0 评论 -
type 和 interface的区别
像我们提到的,类型别名可以像接口一样;然而,仍有一些细微差别。其一,接口创建了一个新的名字,可以在其它任何地方使用。类型别名并不创建新名字—比如,错误信息就不会使用别名。在下面的示例代码里,在编译器中将鼠标悬停在 interfaced 上,显示它返回的是 Interface,但悬停在 aliased 上时,显示的却是对象字面量类型。另一个重要区别是类型别名不能被 extends和 implements(自己也不能 extends和 implements其它类型)。原创 2022-12-25 16:49:25 · 565 阅读 · 0 评论 -
小程序使用分包
在这个配置中,button 和 list 两个自定义组件是跨分包引用组件,其中 button 在渲染时会使用内置组件 view 作为替代,list 会使用当前分包内的自定义组件 simple-list 作为替代进行渲染;一个分包使用其他分包的自定义组件时,由于其他分包还未下载或注入,其他分包的组件处于不可用的状态。独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。原创 2022-11-12 10:26:25 · 422 阅读 · 0 评论 -
Vite HMR API
是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息,比如说这个模块的 URL。对象由一个关键字 “import”,一个点符号和一个meta属性名组成。通常情况下 “import.” 是作为一个属性访问的上下文,但是在这里 “import” 不是一个真正的对象。对象是由 ECMAScript 实现的,它带有一个 null 的原型对象。这个对象可以扩展,并且它的属性都是可写,可配置和可枚举的。原创 2022-11-06 10:53:21 · 702 阅读 · 0 评论 -
effectScope 创建一个 effect 作用域
在 Vue 的 setup 中,响应会在开始初始化的时候被收集,在实例被卸载的时候,响应就会自动的被取消追踪了,这时一个很方便的特性。但是,当我们在组件外使用或者编写一个独立的包时,这会变得非常麻烦。当在单独的文件中,我们该如何停止 computed & watch 的响应式依赖呢?该特性就是试图将组件的 setup() 响应式依赖收集和处理功能抽象为更通用的 API,该 API 可以在组件模型之外复用。原创 2022-10-22 22:52:11 · 778 阅读 · 0 评论 -
理解 rem 方案原理
由于是基于 7.5rem 开发。iPhone6 的物理像素是 375px(dpr是2.0),如果此时还想让 7.5rem 等于设备宽度只能调整 1rem 对应 font-size 的比例, 375 / 7.5 = 50 让 1rem=50px 就可以实现。首先设计稿是基于 iPhone6 设计的也就是宽度 750px。(先不考虑dpr的问题下面会说)然后设置 1rem 等于 100px( HTML font-size 为 100px),相当于 7.5rem = 100%宽度 = 设备的宽度。原创 2022-09-17 15:13:12 · 507 阅读 · 1 评论 -
在 store 中定义 getter 传参
Vuex 3.x 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。Vuex 4.x 允许你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在 Pinia 中将参数传递给 getter 也是这样的,您可以从 getter 返回一个函数以接受任何参数。注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。...原创 2022-08-14 10:47:47 · 1346 阅读 · 0 评论 -
Mpx 插件
小程序代码提示插件原创 2022-06-03 16:12:52 · 274 阅读 · 1 评论 -
不要在路由中使用异步组件
Vue Router 支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入:// 将// import UserDetails from './views/UserDetails'// 替换成const UserDetails = () => import('./views/UserDetails')const router = createRouter({ // ... routes: [{ path: '/users/:id', component: UserDetai原创 2022-05-09 22:27:27 · 935 阅读 · 0 评论 -
webpack混入全局样式的两种方式
如果你使用 stylus 预处理器,默认支持 import 混入一些全局样式。{ test: /\.styl(us)?$/, use: [ MpxWebpackPlugin.wxssLoader(), { loader: 'stylus-loader', options: { stylusOptions: { import: [resolve('./src/theme.styl')], } }原创 2022-05-08 16:50:53 · 754 阅读 · 0 评论 -
deno 安装
前提是要brewbrew install deno然后安装vscode插件原创 2022-05-04 11:46:12 · 701 阅读 · 0 评论 -
什么是 VitePress?
VuePress 是 Vue 驱动的静态网站生成器,享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。VuePress 会为每个页面预渲染生成静态的 HTML。VitePress 是 VuePress 的兄弟(替代品),建立在Vite之上。虽然 VuePress v1 很好,但是构建在 Webpack 之上,为一个只有几页的简单文档站点启动开发服务器所花费的时间变得难以忍受。即使是 HMR 更新也可能需要几秒钟才能反映在浏原创 2022-05-03 21:01:03 · 2782 阅读 · 0 评论 -
CSS的常用动画
CSS实现开关<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D原创 2022-05-02 12:10:39 · 1225 阅读 · 0 评论 -
单线程与与线程优缺点
单线程Node保持了JavaScript在浏览器中单线程的特点。 而且在Node中,JavaScript与其余线程是无法共享任何状态的。单线程的最大好处是不用像多线程编程那样处处在意状态的同步问题,这里没有死锁的存在,也没有线程上下文交换所带来的性能上的开销。同样,单线程也有它自身的弱点,这些弱点是学 习Node的过程中必须要面对的。积极面对这些弱 点,可以享受到Node带来的好处,也能避免潜在 的问题,使其得以高效利用。单线程的弱点具体 有以下3方面。无法利用多核CPU。错误会引起整个应用退出,应原创 2022-03-20 10:50:16 · 2200 阅读 · 0 评论 -
webpack打包后文件分析
(() => { // webpackBootstrap var __webpack_modules__ = ({ "./src/title.js": /*!**********************!*\ !*** ./src/title.js ***! \**********************/ ((module) => { module.exports = 'title' })原创 2021-11-29 09:28:12 · 1013 阅读 · 0 评论 -
Blob URL 是什么?
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。下面的示例是原创 2021-11-20 21:32:17 · 6725 阅读 · 0 评论 -
Streams API
Streams API允许JavaScript以编程的方式访问通过网络接收的数据流,并根据开发人员的需要处理它们。概念和用法流将你希望通过网络接收的资源拆分成小块,然后按位处理它。这正是浏览器在接收用于显示web页面的资源时做的事情——视频缓冲区和更多的内容可以逐渐播放,有时候随着内容的加载,你可以看到图像逐渐地显示。但曾经这些对于JavaScript是不可用的。以前,如果我们想要处理某种资源(如视频、文本文件等),我们必须下载完整的文件,等待它反序列化成适当的格式,然后在完整地接收到所有的内容后再进原创 2021-11-20 11:58:43 · 1104 阅读 · 0 评论 -
Playwright
一个与 Puppeteer 类似的端到端(e2e)测试工具。Playwright 为当代 Web 应用程序提供可靠的端到端测试。支持所有浏览器在 Chromium、Firefox 和 WebKit 上进行测试。Playwright 拥有适用于所有当代浏览器的完整 API,包括 Google Chrome 和 Microsoft Edge(带有Chromium)、Apple Safari(带有WebKit)和 Mozilla Firefox。跨平台 WebKit 测试。借助 Playwright,使用原创 2021-11-02 15:11:09 · 2046 阅读 · 0 评论 -
vue 防抖和节流
vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现。如果某个组件仅使用一次,可以在 methods 中直接应用防抖:<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script><script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounce(function原创 2021-10-31 17:29:59 · 1419 阅读 · 0 评论 -
不要在选项 property 或回调上使用箭头函数
不要在选项 property 或回调上使用箭头函数,比如created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMet原创 2021-10-31 17:21:22 · 299 阅读 · 0 评论 -
多个异步之间的协作方案
一般而言,事件与侦听器的关系是一对多,但在异步编程中,也会出现事件与侦听器的关系是多对 一的情况,也就是说一个业务逻辑可能依赖两个通过回调或事件传递AOP 模式lodash 就有 after,在多少次后执行,私有化预制了 timers 变量。function after (timers, callback) { return function (params) { if (--timers === 0) { callback() } }}let newFn =原创 2021-10-30 10:35:12 · 150 阅读 · 0 评论 -
vue 3.2 的 script setup 语法
vue 3.2 已经正式支持 <script setup> 语法,并且现在就可以在生产环境下使用了,接下开始学习基本用法。<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法,它具有更多优势:更少的样板内容,更简洁的代码。能够使用纯 Typescript 声明 props 和抛出事件。更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。更好的 IDE转载 2021-10-24 19:55:00 · 5008 阅读 · 1 评论 -
vue3不要再使用vuex
Pinia 是一个用于 Vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划。如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发。Pinia的优点1、完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易。2、极其轻巧(体积约 1KB)3、store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见。4、支持原创 2021-10-24 11:50:37 · 5554 阅读 · 0 评论 -
为什么不可变性在 React 中非常重要
handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }注意,我们调用了 .slice() 方法创建了 squares 数组的一个副本,而不是直接在现有的数组上进行修改。在这一节,我们会介绍为什么我们需要创建 square 数组的副本。接下来我们来学习不可变性以及不可变性的重要性。一般来说,有两种改..原创 2021-09-25 21:30:47 · 540 阅读 · 0 评论 -
vue中的watch和dep
export function remove (arr: Array<any>, item: any): Array<any> | void { if (arr.length) { const index = arr.indexOf(item) if (index > -1) { return arr.splice(index, 1) } }}let config = { async: true }let uid = 0/原创 2021-09-14 08:38:34 · 888 阅读 · 0 评论 -
vue中指令的实现原理
首先生成的 ast 会加上一些属性,每个 element 元素可以看作是一个 ast 对象,整颗 DOM 树可以看作是包含依赖关系的 ast 对象。v-if 指令源码在 processIf(element) 函数里面处理// <span v-if="msg">6</span>// (msg)?_c('span',[_v("6")]):_e()let ast = [ { type: 1, tag: 'span', attrsList: [],原创 2021-09-12 12:04:12 · 746 阅读 · 0 评论 -
vue中ast和render的实现原理
var unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;// Regular Expressions for parsing tags and attributesvar attribute = /^\s*(原创 2021-09-11 16:26:25 · 347 阅读 · 0 评论 -
render函数实现原理
我们先使用vue的模板编译库vue-template-compiler验证一下输出结果。const compiler = require('vue-template-compiler')let str = `<div v-if="msg">999</div>`console.log(compiler.compile(str))发现包含ast和render这两个属性。{ ast: { type: 1, tag: 'div', attrsList原创 2021-09-11 12:35:24 · 615 阅读 · 0 评论 -
在 vue/cli 中使用 Module Federation
在 vue/cli 中使用 Module Federationwebpack5 的新特性,分模块共同开发。多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。这通常被称作微前端,但并不仅限于此。我们分为本地模块、远程模块。其中本地模块即为普通模块,是当前构建的一部分;而远程模块不属于当前构建,并在运行时从所谓的容器加载。加载远程模块被认为是异步操作。当使用远程模块时,这些异步操作将被放置在远程模块和入口之间的下一个chunk的加载操作中。如果没有ch转载 2021-09-10 08:17:55 · 2276 阅读 · 9 评论 -
深入理解内容匹配
let html = '[111[2]111]'let endTag = /^\]/let startTag = /^\[/function parseHTML (html) { var last, lastTag; var index = 0; var stack = []; while (html) { last = html if (!lastTag) { var textEnd1 = html.indexOf('[') var tex原创 2021-09-09 21:34:12 · 217 阅读 · 0 评论 -
vue模板编译原理
我们都知道 vue 写代码是需要按照固定的格式,比如下面这样:<template> <div>{{msg}}</div></template><script>export default { data () { return { msg: '' } }}</script>把 html 的内容写在 template 里面,经过 vue 的处理,首先会把模板转换为 AST 抽象语法树原创 2021-09-08 08:00:30 · 362 阅读 · 0 评论 -
18 个惊人的 GitHub 仓库
今天,我想举一些优秀的 GitHub 存储库示例,它们将帮助您实现复杂的动画,以及在您的项目中实现有用的功能。让我们开始吧Adobe After Effects 动画https://github.com/airbnb/lottie-webLottie 是一个用于 Web 和 iOS 的移动库,它使用 Bodymovin 解析导出为 json 的 Adobe After Effects 动画,并在移动设备上本地渲染它们!视差https://github.com/wagerfield/pa原创 2021-09-05 10:46:52 · 299 阅读 · 0 评论 -
vue-cli 原理分析
1、实现交互式命令行const inquirer = require('inquirer')const path = require('path')const fs = require('fs')const execa = require('execa')const Module = require('module')const ejs = require('ejs')const isManualMode = answers => answers.preset === '__manua原创 2021-08-29 22:20:22 · 503 阅读 · 0 评论 -
二分查找的次数
第1题二分查找有序列表[2,10,25,35,40,65,70,73,75,81,82,88,100]如果查找元素75,需要依次比较70817375(0+12)/2 索引6 第1次(7+12)/2 索引9 第2次(7+8)/2 索引7 第3次(8+8)/2 索引8 第4次第2题二分查找有序列表[1,2,3,4,5,6,7,8,9,10,11,12,13,14]如果查找元素4,需要依次比较7354(0+13)/2 索引6 第1次(0+5)/2 索引2原创 2021-08-27 18:58:40 · 8534 阅读 · 1 评论 -
ES2021更新的内容!
2021 年 6 月 22 日,发布了 ES2021 标准,Github 链接 。标准在每年的 6 月份正式发布一次,作为当年的正式版本。任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。1、Stage 0 - Strawman(展示阶段)2、Stage 1 - Proposal(征求意见阶段)3、Stage 2 - Draft(草案阶段)4、Stage 3 - Candi原创 2021-08-22 10:43:05 · 832 阅读 · 0 评论 -
hash、chunkhash和contenthash
webpack.config.js配置如下:const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = { entry: { main: './src/index.js', vender: ['lodash']原创 2021-08-17 10:27:20 · 632 阅读 · 0 评论 -
scroll-snap-type 实现上拉加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-08-15 19:59:13 · 267 阅读 · 0 评论 -
移动端轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-08-15 11:05:27 · 186 阅读 · 0 评论 -
纯 CSS 实现 time-picker 效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-08-15 11:04:14 · 620 阅读 · 1 评论