August Tech

UI = render(data)

webpack优化highlight按需加载

性能优化 最近在做项目性能优化，说到性能优化，一方面是加载速度，一方面是运行性能； 1、加载速度上，涉及代码压缩混淆，gzip，webpack路由懒加载，cdn加速，url-loader利用base64;代码分割splitChunks(commonChunks)；公共代码提取，最大程度利用缓存； 2、运行运能，使用flex布局，减少重绘重排，web worker等 关于代码分割之前有写，......

Posted by Sixiang Le on 2021-04-22

webpack

防抖与节流

防抖： 将多次执行变成最后一次执行； 节流： 将多次执行变成每隔一段时间执行； 防抖（deounce）: 可用于input.change实时输入校验，比如输入实时查询，你不可能摁一个字就去后端查一次，肯定是输一串，统一去查询一次数据。 可用于 window.resize 事件，比如窗口缩放完成后，才会重新计算部分 DOM 尺寸 节流（throttle），用于监听 mousemo......

Posted by Sixiang Le on 2021-04-07

-javascript

原型继承和Class继承

首先要知道Class只是一个语法糖，js并不存在类, Class只是语法糖，Class的本质是一个函数 12class Person {}Person instanceof Function // true ES5 和 6 继承的区别： ES6 继承中子类需要调用 super() 才能拿到子类，ES5 的话是通过 call 这种绑定的方式 12345678910111......

Posted by Sixiang Le on 2021-04-07

javascript

Vue3笔记

创建API Vue 2.x是使用new Vue()，Vue 3.x需要使用新的 createApp()方法创建一个Vue对象的实例。 在旧的API下，我们添加的任何全局配置（plugins，mixins，原型属性等）都将永久更改全局状态。 在新的API下，调用 createApp 将返回一个新的app实例，该实例不会被应用于其他实例的任何全局配置污染。 1234567891011121314......

Posted by Sixiang Le on 2021-04-02

vue

写一个Vue自定义drag指令

实现一个弹窗在屏幕可视范围内随意拖动 先上代码 12345678910111213141516171819202122232425262728293031let vDrag = {};let drag = { inserted: (el) => { el.onmousedown = function (e) {......

Posted by Sixiang Le on 2019-05-16

vue

如何为一个项目切换主题色

这里讲的不是本地自定义修改那种场景，而是根据后端返回的值来判断用哪种主题来展示。 1、换肤思路 本地存储n种静态css主题文件，根据登陆后后端的主题返回值来动态加载对应的主题文件 2、实现方式 123456789let loadLink = (url) => { let link = document.createElement("link"); link.t......

Posted by Sixiang Le on 2019-05-16

JavaScript

JS的EventLoop之宏任务与微任务

EventLoop是什么 JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task) 宏任务：包括整体代码script，setTimeout，setInterval 微任务：Promise.then(非new Promise)，process.nextTick(node中) 事件的执行顺序，是main script运行结束后，先执行微任务......

Posted by Sixiang Le on 2019-03-28

JavaScript

el-form-item回车刷新页面解决

问题描述: 使用element-ui 中的el-form进行提交，当el-form-item仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题； 搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 element官方解决方案：在el-from 加上 @submit.native......

Posted by Sixiang Le on 2019-03-28

vue element-ui

Webpack之CodeSplitting大法

Code Splitting 是什么以及为什么 在以前，为了减少 HTTP 请求，通常地，我们都会把所有的代码都打包成一个单独的 JS 文件。但是，如果这个 JS 文件体积很大的话，那就得不偿失了。这时，我们不妨把所有代码分成一块一块，需要某块代码的时候再去加载它。 所以说，Code Splitting 其实就是把代码分成很多很多块（ chunk ）咯。 Code Splitting 怎......

Posted by Sixiang Le on 2019-02-13

webpack webpack3

Vue风格指南

文件组件文件的大小写 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case) 模板中的组件名大小写 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。 JS/JSX 中的组件名大小写 JS/JSX 中的组件名应该始终是 P......

Posted by Sixiang Le on 2019-01-28

vue
FEATURED TAGS
css JavaScript vue webpack 前端 小程序
ABOUT ME

Living in HangZhou, Le

RECENT POSTS
FRIENDS
ARCHIVES