LeBronChao's Blog

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！掘金原文链接 认识Plugin Loader是用于特定的模块类型进行转换; Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等; 常用Plugin CleanWebpackPlugin 每次修改了一些配置，重新打包时，都需要手动删除dist文件夹: 我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin; 安装： npm install clean-webpack-plugin --save 配置： const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = { entry: "./src/js/main.js", output: { filename: "bundle.js", path: path. ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ 认识Loader Loader可以用于对模块的源代码进行转换； 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须定制对应的loader来完成这个功能。 loader配置方式 内联方式：import "css-loader!../css/index.css"; loader和文件路径用！分隔 配置方式：webpack.config.js 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息 module.rules中允许我们配置多个loader（因为我们也会继续使用其他Loader，来完成其他文件的加载） 这种方式可以更好地标识loader配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览； module.rules的配置如下 rules属性对应的值是一个数组：[Rule] 数组中存放的是一个个Rule，Rule是一个对象，对象中可以设置多个属性 test属性：用于多resourc ...

写作不易，未经作者允许禁止以任何形式转载！ 如果觉得文章不错，欢迎关注、点赞和分享！ Webpack初体验 用Webpack解决什么问题 模块化 高级特性、开发效率、安全性 ES6+、Typescript、sacc、less 监听文件变化并反映到浏览器上，提高开发效率 开发完成后的打包，压缩、合并、tree-shaking等以及其他相关的优化 Webpack是什么 Webpck是一个静态的模块化打包工具，为现代的JS应用程序 我们来对上面的解释进行拆解： 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具。 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器） 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等 现代的modern：现代前端开发面临各种各样的问题，才催生了webpack的出现和发展 Webpack和Vite Webpack会被Vite取代吗？ vite推出后确实引起了很多的反响，也有很多人看好vite的发展 但是 ...

机身：SONY A7M2 镜头：SONY 24-70GM 出镜：无 地点：华侨城·欢乐港湾 点击可看大图

一、虚拟DOM 什么是虚拟DOM？ 虚拟DOM就是把真实DOM树的结构和信息抽象出来，以对象的形式模拟树形结构，如下： 真实DOM: <div> <p>Hello World</p></div> 对应的虚拟DOM就是： let vnode = { tag: 'div', children:[ {tag:'p', text:'Hello World'}]} 为什么需要虚拟DOM？ 渲染真实DOM会有一定的开销，如果每次修改数据都进行真实DOM渲染，都会引起DOM树的重绘和重排，性能开销很大。那么有没有可能只修改一小部分数据而不渲染整个DOM呢？虚拟DOM和Diff算法可以实现。 怎么实现？ 先根据真实DOM生成一颗虚拟DOM树 当某个DOM节点数据发生改变时，生成一个新的Vnode 新的Vnode和旧的oldVnode进行对比 通过patch函数一边比对一边给真实DOM打补丁或者创建Vnode、移除oldVno ...

为什么需要缓存 通过缓存机制，可以在相应场景下复用以前获取的资源。 显著提高网站的性能和响应速度 减少网络流量和等待渲染时间 降低服务器压力 HTTP缓存类型 强缓存 协商缓存 强缓存 对于强缓存，服务器返回的静态资源响应头会设置一个强制缓存的时间，在缓存时间内，如刷新浏览器请求相同资源，在缓存时间未过期的情况下，则直接使用已缓存资源。如缓存资源已过期，执行协商缓存策略。 以下为与强缓存相关的HTTP头部字段 字段 用途 实例 优先级 HTTP版本 Expires 强缓存的过期日期 Expires:Thu,06 Aug 2021 14:36:18 GMT 低 1.0 Cache-Control 指定指令实现缓存机制 Cache-Control:max-age=60 高 1.1 Expires 响应头Expires字段包含强缓存资源的过期时间 值为0表示资源已过期或非强缓存 Cache-Control 通用消息头字段，通过指令来实现缓存机制。说明一下容易弄混的两个字段，其他指令参考指令大全。 no-cache 在发布缓存副本之前，强制要求缓存把 ...

Vue的前世今生 2013 尤雨溪个人项目 2014.2 0.1版本发布 2015.10 1.0版本发布 模板语法改进 2016.9 2.0版本发布 跨端 新的渲染机制 2019.10 3.0 alpha发布 性能 架构 按需引入 Composition API Proxy observer AOT优化 Vue 1 响应式原理 构建响应式对象流程 walk函数遍历data对象中的属性，调用defineReactive将其变成响应式对象 对于对象属性进行递归调用walk，以保证data整个对象树中的属性都是响应式对象。 defineReactive中使用watchers数组储存watcher，使用Object.defineProperty的get函数收集watcher和返回值，set函数用来设置值和对watchers中的watcher进行视图更新。 Walk函数实现 function walk(data){ Object.keys(data).foreach(key => { defineReactive( ...

前端路由介绍 什么前端路由 路由这个概念最早出现在后端，通过⽤户请求的url导航到具体的html⻚⾯。现在的前端路由不同 于传统路由，它不需要服务器解析，⽽是可以通过hash函数或者history API来实现。在前端开发中，我 们可以使⽤路由设置访问路径，并根据路径与组件的映射关系切换组件的显示，⽽这整个过程都是在同 ⼀个⻚⾯中实现的，不涉及⻚⾯间的跳转，这也就是我们常说的单⻚应⽤（spa）。 前端路由带来了什么 相⽐多⻚应⽤(mpa)来说，spa有以下优点： 不涉及html⻚⾯跳转，内容改变不需要重新加载⻚⾯，对服务器压⼒⼩。 只涉及组件之间的切换，因此跳转流畅，⽤户体验好。 ⻚⾯效果会⽐较炫酷（⽐如切换⻚⾯内容时的转场动画）。 组件化开发便捷。 但是同时spa也有以下缺点： ⾸屏加载过慢。 不利于seo。 ⻚⾯复杂度提⾼很多。 ⽤原⽣ js 实现前端路由 什么前端路由 路由这个概念最早出现在后端，通过⽤户请求的 url 导航到具体的 html ⻚⾯。现在的前端路由不同于 传统路由，它不需要服务器解析，⽽是可以通过 hash 函数或者 h5 history API 来实现。 ...

TypeScript学习笔记 TS简介 Ts微软开发，包含ES6、包含ES5 编译 tsc xx.ts 每一次都得编译，可以自动编译 开发工具中配置typescirpt自动编译 vscode: 创建tsconfig.json文件 tsc --init 生成配置文件 tsconfig.json配置文件中，修改outDir配置项，取消注释然后修改为.js vscode中，点击上方栏位run task，选择ts监听 完成 TS类型 与es5中的区别 // es5：类型变化不报错var flag = true;flag = 234;// ts：必须指定类型typescriptvar flag:boolean=true;flag = 131;//报错 TS类型： boolean number string array数组： 方式1：var arr:number[] = [1,2,3]//制定arr里面全是数字 方式2：var arr:Array= [1,2,3] 元组类型（tuple） 方式1：属于数组的一种，即数组中每一个元素指定类型 方式2：var arr:[number, ...

嵌入式SQL SQL语言提供了两种不同的使用方式 交互式 嵌入式 为什么要引入嵌入式SQL SQL语言是非过程性语言 事务处理应用需要高级语言 这两种方式细节上有差别，在程序设计的环境下，SQL语句要做某些必要的扩充 嵌入式SQL的处理过程 主语言 嵌入式SQL是将SQL语句嵌入程序设计语言中，被嵌入的程序设计语言，如C、C++、Java，称为宿主语言，简称主语言。 处理过程 预编译方法 为了区分SQL语句与主语言语句，所有SQL语句必须加前缀EXEC SQL， 主语言为C语言时，语句格式： EXEC SQL <SQL语句>; 主语言为Java语言时，语句格式： # SQL <SQL语句>; 主语言为C++语言时 使用ADO： 嵌入式SQL语句与主语言之间的通信 将SQL嵌入到高级语言中混合编程，程序中会含有两种不同计算模型的语句 SQL语句 描述性的面向集合的语句 负责操纵数据库 高级语言语句 过程性的面向记录的语句 负责控制逻辑流程 它们之间应该如何通信？ 数据库工作单元与源程序工作单元之间的通信 ...