Web前端性能优化自查清单 前言一份简洁、纯粹的Web前端性能优化清单。每个优化点都包含有概念、实操和参考资料。面试、实战两相宜。 这是一个大工程。在正式开始之前,先统一下语言,澄清每一部分的目的和要求,防止跑偏。 概念:把官话翻译成能看懂、能记住的人话,原则上易读性 > 专业性 实操:自己操作一遍,不做云玩家;记录核心实现,方便CV 参考资料:信息来源选用一手资料,以便保证信息的完整性、准确性和时效性。除非看一 2022-03-10 JavaScript
我的微码 我的微码自己积累的一些常用代码。基于多地存储的原则,线上保存一份。 持续更新…… 场景篇基于策略模式实现的表单验证类封装了常用验证规则、弹窗逻辑,易扩展、复用性强。 封装表单验证类 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 2022-03-03 JavaScript
入门即巅峰,Vue3.0学习总结之响应式API 写作就像开源,即渡人也渡己。 –码农胖大海 前言先赞后看,已成习惯。大家好,我是在编程世界里苟且偷生的大海。 本文旨在通俗易懂的描述“响应式API”的概念、作用和语法,作为自己学习的延续和阶段性成果展示。 一、什么是响应性API 在描述概念之前,先来回顾一下,什么是响应性。 响应性是一种允许我们以声明式的方式去适应变化的编程范例。 适应变化?还是很懵……先来看一个非响应性的例子。 1234 2021-12-24 Vue
入门即巅峰,Vue3.0学习总结之复合式API 写作是对自己思想的开发和研究。 前言先赞后看,已成习惯。大叫好我是奉旨撸码的胖大海。本文旨在通俗易懂的描述“复合式API”的概念、语法和作用,作为自己学习的延续和阶段性成果展示。 一、什么是复合式API?复合式API是Vue3.0新增的、相对于”选项式API“而言的,一种新的组件编写形式。语法层面,主要由setup函数和在其内部调用的生命周期钩子构成,使用时一般还会搭配一些响应式API(下期内 2021-12-15 Vue
手摸手教学之白嫖博客并自动部署 手摸手教学之白嫖博客并自动部署(Hexo+GitHub Pages+GitHub Actions)前言先赞后看,已成习惯,大家好,我是奉旨撸码的胖大海。 年轻的时候弄了个博客,每年都只会被访问一次……在阿里云给我下续费通牒的时候。 很冤,但抱着”每个前端人都应该有自己的博客“的信念,咬着牙续费了几次。 今年3月份,续费通知如约而至,我再一次来到了历史的岔路口。 此刻,6*12块钱和心中的信仰,站在 2021-11-15
入门即巅峰,一文读懂Vue3.0的改进与优化 前言本文旨在通俗易懂的回答:相较于2x,Vue3.0都做了哪些改进与优化。 分为三个层面:性能、源码和新特性。 性能优化1.引入tree-shaking技术,减少打包体积众所周知,ES6的Module,当我们引入某个模块,模块是整个加载的,构建时也会被全部打包。即便我们只用了其中1个方法。 1import { a } from './xxx.js' 我只 2021-03-17 Vue
JavaScript设计模式实践之组合模式 概念组合模式就是将对象组合成树形结构,且这些对象对外提供一致调用方法的设计。它除了能很好的表现对象之间”部分-整体‘的层次结构外,还能方便我们进行统一调用和遍历的操作。 例子如果硬要举一个例子的话,那么……DOM就是组合模式的典范。 它以树形结构组织节点,每个节点又有一致的访问(属性和方法)。 对前端而言,应该没有比这更生动、形象、逼真、易懂的例子了吧…… 场景它比较适合,一系列 有联系的 复杂操 2021-01-11 JavaScript
JavaScript设计模式实践之命令模式 概念命令模式就是将过程式的请求调用封装在command对象的execute方法里的做法。 例子比如说有个“用户点击按钮,刷新菜单目录”的业务逻辑。过程式的调用: 1234567891011const MenuBar = { refresh: function () { console.log('刷新菜单目录'); }};cons 2021-01-06 JavaScript
JavaScript设计模式实践之发布-订阅模式 写在前面最近在读《JavaScript设计模式与开发实践》,恰逢手头上的工作任务是项目重构。本系列文章就是对本次学习实战的记录和总结。 概念发布-订阅模式又叫观察者模式。它定义对象间的一种一对多关系,当一个对象的状态发生变化时,所有依赖于它的对象都将得到通知。 举个现实生活里的例子,比如说你非常喜欢一个博客,但不知道它什么时候会更新,所以你就每天甚至每隔几小时去看一下是否有更新。如果用上发布-订阅 2021-01-03 JavaScript
JavaScript设计模式实践之迭代器模式 写在前面最近在读《JavaScript设计模式与开发实践》,恰逢手头上的工作任务是项目重构。本系列文章就是对本次学习实战的记录和总结。 概念迭代器模式是指提供一种方法,顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。 现代语言一般都内置的有迭代器实现,我们通常称之为遍历函数。这个在咱们js里是比比皆是,forEach、map、filter、find……数不胜数。详情建议查阅我早前 2020-12-31 JavaScript