- 博客(54)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 webpack 打包原理解析
文档https://webpack.js.org/1、webpack简介webpack is a module bundler（模块打包工具）Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递 归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中是⼯程化、⾃动化思想在前端开发中的体现。2、webpack 安装2.1安装# 安装最新的稳定版本npm i -D webpack# 安装指定版本npm i -D w
2022-01-28 10:28:41
1394
原创 事件排序组件
需求分析HTML部分<div class="time-line"> <el-timeline> <el-timeline-item v-for="(item, index) in sportsPerformanceList" :key="index" :timestamp="item.date" placement="top" > <div slo
2022-01-21 17:06:21
782
原创 自动生成api.js文件
介绍在项目开发中，通常前端需要和后端进行接口对接，常规操作步骤为：1、打开后端接口文档地址2、找到接口3、复制接口4、打开前端的api.js文件，赋值，并进行接口备注在一个项目中，当有大量的接口时，就要重复多次的做这种事，大大影响开发效率。而通过接口爬取的方式直接生成api.js文件将大大提升开发效率。实现步骤1、在src下的tool中新建api.js文件，主要用来实现对接口文档的接口爬取。主要利用node的request模块发起接口请求，fs模块进行写入操怍，具体实现如下：const
2022-01-20 11:44:54
2036
原创 节流和防抖
节流和防抖节流和防抖都是用来控制某些函数的调用频率。如窗口的resize，可视区变化的过程中，resize事件会被触发很多次，每次都去请求一次的话浪费性能，这时候就需要节流防抖来控制。节流（throttle）当事件触发后，在一段时间内不再触发，也就是多次触发以第一次为准实现方式：时间戳版function throttle (func, delay){ var last = 0 return function () { var now = Date.now() if ( now &
2021-12-30 15:08:00
449
原创 import被webpack编译成了啥？
import 被webpack 编译成了啥？我们知道，webpack 打包过程如下：合并webpack.config.js和命令行传递的参数，形成最终的配置解析配置，得到entry入口读取入口文件内容，通过@babel/parse将入口内容（code）转换成ast通过@babel/traverse遍历ast得到模块的各个依赖通过@babel/core（实际的转换工作是由@babel/preset-env来完成的）将ast转换成es5 code通过循环伪递归的方式拿到所有模块的所有依赖并都转换
2021-03-09 17:26:59
790
原创 VUE源码解析-数据驱动
介绍vue一个核心思想就是数据驱动。所谓数据驱动，是指视图由数据驱动生成的，vue对视图的修改不是直接操作DOM，而是通过数据的修改。与传统前端开发相比（直接修改DOM），大大简化了代码量，特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变得非常清晰，因为DOM变成数据的映射，我们所有的逻辑都是对数据的修改，而不再触碰DOM，这样的代码利于维护。在Vue.js中可以采用简洁的模板语法来声明将数据渲染为DOM：<div id="app"> {{ message }}</di
2021-02-04 19:43:07
710
原创 Vue源码解析-准备工作
Vue源码解析–准备工作FlowFlow 是 facebook 出品的JavaScript 静态类型检查工具。Vue.js的源码利用了Flow做了静态类型检查。所以，了解Flow有助于阅读源码。通常检查类型分成两种：类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型示例/*@flow*/function split(str) { return str.split(' ')}split(11)str 应该是个字符串类型，而我们输入了数字。类型注释
2021-01-15 16:37:14
820
原创 JS设计模式（访问者模式和解释器模式）
访问者模式概念将数据操作和数据结构进行分离适用场景不多解释器模式概念描述语言语法如何定义，如何解释和编译用于专业场景（例如sass 、less）
2020-12-18 11:12:37
163
原创 JS设计模式（备忘录模式）
备忘录模式概念随时记录一个对象的状态变化随时可以恢复之前的某个状态（如撤销功能）未找到js中经典应用，除了一些工具（如编辑器）演示设计原则验证状态对象与使用者分开，解耦符合开放封闭原则...
2020-12-18 10:42:07
222
原创 JS设计模式（命令模式）
命令模式概念执行命令时，发布者和执行者分开中间加入命令对象，作为中转站演示JS中的应用网页富文本编辑器操作，浏览器封装了一个命令对象document.execCommand(“blod”)document.execCommand(“undo”)设计原则验证命令对象与执行对象分开，解耦符合开放封闭原则...
2020-12-18 10:26:21
126
原创 JS设计模式（模板方法模式和职责链模式）
模板方法模式和职责链模式模板方法模式职责链模式概念一步操作可能分为多个职责角色来完成把这些角色都分开，然后用一个链串起来将发起者和各个处理者进行隔离演示js中的链式操作职责链模式 和 业务结合较多，JS中能联想到链式操作jQuery的链式操作 Promise.then 的链式操作设计原则验证发起者与各个处理者进行隔离符合开放封闭原则...
2020-12-17 11:39:31
153
原创 JS设计模式（策略模式）
策略模式概念不同策略分开处理避免出现大量if…else 或者 switch…case(JS 中未找到经典应用场景)演示青铜写法：王者写法：（摆脱很多的if…else写法）设计原则验证不同策略，分开处理，而不是混在一起符合开放封闭原则...
2020-12-17 11:19:33
168
原创 JS设计模式（享元模式）
享元模式概念共享内存（主要考虑内存，而非效率）相同的数据，共享使用（JS中未找到经典应用场景）演示采用共享数据的思想设计原则验证将相同的部分抽象出来符合开放封闭原则...
2020-12-17 11:10:59
123
原创 JS设计模式（组合模式）
组合模式概念生成树形结构，表示“整体-部分”关系让整体和部分都具有一致的操作方式演示JS经典应用中，未找到这么复杂的数据类型虚拟DOM中的vnode是这种形式，但数据类型简单小结：整体和单个节点的操作是一致的整体和单个节点的数据接口也保持一致总结将整体和单个节点的操作抽象出来符合开放封闭原则...
2020-12-17 11:03:55
196
原创 vue中使用自定义指令解决重复点击问题
vue中使用自定义指令解决重复点击问题// directive.jsexport default { install(Vue) { // 防重复点击(指令实现) //使用： 在需要的按钮中加 v-repeatClick 指令即可 Vue.directive('repeatClick', { inserted(el, binding) { el.addEventListener('click', () => {
2020-11-19 18:15:45
1197
原创 sass中混合宏 VS 继承 VS 占位符
sass中混合宏 VS 继承 VS 占位符//SCSS中混合宏使用@mixin mt($var){ margin-top: $var; }.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: orange; @include mt(5px); span{ display:block; @include mt(5
2020-11-02 17:40:04
177
原创 JS设计模式（代理模式）
代理模式无法直接访问一个对象，通过代理间接访问。介绍使用者无权访问目标对象中间加代理，通过代理做授权和控制示例科学上网，如访问github.com，模拟代理class RealImg { constructor(fileName) { this.fileName = fileName this.loadFormDisk() //初始化即从硬盘中加载，模拟 } loadFormDisk() { console.log('
2020-10-30 14:30:38
120
原创 JS设计模式（桥接模式）
桥接模式概念用于把抽象化与实现化解耦使得二者可以独立变化（在JS中未找到实际应用）演示青铜写法：王者操作：设计原则验证抽象和实现分离，解耦符合开放封闭原则
2020-10-30 11:32:34
245
原创 JS设计模式（原型模式）
原型模式概念clone自己，生成一个新对象java默认有clone接口，不用自己实现应用js中的应用 - Object.create对比JS中的原型prototypeprototype可以理解为ES6 class的一种底层原理而class是实现面向对象的基础，并不是服务于某个模式Object.create 会长久存在...
2020-10-30 11:18:24
271
1
原创 JS设计模式（状态模式）
JS设计模式（状态模式）介绍一个对象有状态变化每次状态变化都会触发一个逻辑不能总用 if…else 来控制演示UML类图传统UML类图简化后的UML类图示例：交通信号灯不同颜色的变化// 状态class State { constructor(color) { this.color = color } // 设置 handle(context) { console.log(`turn to ${this.colo
2020-10-29 16:19:58
627
原创 JS设计模式（迭代器模式）
JS设计模式（迭代器模式）介绍顺序访问一个集合使用者无需知道集合的内部结构（封装）演示jQuery的多种遍历方式修改后UML类图代码class Iterator { constructor(container) { this.list = container.list this.index = 0 } next() { if(this.hasNext()) { return thi
2020-10-28 18:24:14
287
原创 前端性能优化（CSS）
前端性能优化（CSS）加载性能：（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行的效率更高。（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。选择器性能：（1）关键选择器（key selector）。选择器的最后面的部分为关
2020-10-28 14:47:16
239
原创 JS设计模式（观察者模式）
观察者模式介绍发布 & 订阅（将某件事说好之后只需等待，如：订报纸，订牛奶）一对多演示UML类图场景网页时间绑定PromisejQuery callbacknodejs自定义事件在node的stream中用到了自定义事件readline 中也用到了自定义事件其他场景1、nodejs中：处理http请求；多进程通讯2、vue 和 react 组件生命周期触发3、vue watch总结主题和观察者分离，不是主动触
2020-10-27 18:31:51
246
原创 vue中的接口封装
vue中的接口封装安装npm install axios; // 安装axios引入在src目录下，新建一个request文件，包含http.js 和 api.js 文件http.js用来封装axiosapi.js用来管理接口// 在http.js中引入axiosimport axios from 'axios'; // 引入axiosimport QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到// vant的toast提示框组件，大家
2020-10-23 16:14:01
1190
原创 JS设计模式（外观模式）
外观模式介绍为子系统中的一组接口提供了一个高层接口使用者使用这个高层接口UML类图场景设计原则验证不符合单一职责原则和开放封闭原则，因此谨慎使用，不可滥用。（出现胖接口）...
2020-10-04 17:50:38
125
原创 适配器模式VS装饰器模式VS代理模式
适配器模式、装饰器模式、代理模式比较代理模式 VS 适配器模式适配器模式：提供一个不同的接口（如不同版本的插头）代理模式：提供一模一样的接口代理模式 VS 装饰器模式装饰器模式：扩展功能，原有功能不变且可以直接使用代理模式：显示原有功能，但是经过限制或阉割之后的...
2020-10-03 22:27:04
233
原创 JS设计模式（装饰器模式）
装饰器模式介绍为对象添加新功能不改变其原有的结构和功能可以借助第三方库 core-seractors，具体查看文档比较常 用的有 readonly(只读)、deprecate(即将要废弃的api)示例原有接口实现了画一个圆功能，现需要在圆上加一个红色边框UML类图传统UML类图简化之后UML类图demo代码class Circle { draw() { console.log('画一个圆') }}class Decorator {
2020-10-02 12:19:33
277
原创 JS设计模式（适配器模式）
适配器模式介绍旧接口格式和使用者不兼容中间加一个适配转化接口示例登录框class SingleObject { login() { console.log('login...') }}SingleObject.getInstance = (function() { let instance return function() { if(!instance) { instance = new Si
2020-10-01 19:21:13
194
原创 JS设计模式（单例模式）
单例模式避免多次初始化，影响性能介绍系统中被唯一使用一个类只有一个实例示例登录框class SingleObject { login() { console.log('login...') }}SingleObject.getInstance = (function() { let instance return function() { if(!instance) { instance =
2020-09-25 18:15:14
275
1
原创 JS设计模式（工厂模式）
工厂模式介绍将new单独封装遇到new时，就要考虑是否该使用工厂模式示例购买汉堡，只需点餐、取餐，无需自己亲手做商店哟啊“封装”做汉堡的工作，做好直接给顾客UML类图demo代码class Product { constructor(name) { this.name = name } init() { console.log('生产一个' + this.name) } fn1() { con
2020-09-22 16:33:38
834
原创 JS设计原则 + 设计模式 + demo环境搭建
设计原则S：单一职责原则（重点）O：开放封闭原则（重点）对扩展开放，对修改封闭L：李氏置换原则I：接口独立原则D：依赖导致原则设计模式创建型：工厂模式、单例模式、原型模式结构型：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式行为型：JS设计模式环境搭建初始化项目 npm initwebpack配置1、webpack安装cnpm i webpack webpack-cli --save-dev2、根目录下新建webpack.dev.con
2020-09-22 14:47:05
200
原创 webpack总结
webpack4常用配置webpack 的核心价值就是前端源码的打包，即将前端源码中每一个文件（无论任何类型）都当做一个 pack ，然后分析依赖，将其最终打包出线上运行的代码。webpack 的四个核心部分entry 规定入口文件，一个或者多个output 规定输出文件的位置loader 各个类型的转换工具plugin 打包过程中各种自定义功能的插件本文针对webpack 4，虽然已经有v5，但是常用的配置基本没有变。初识 webpackwebpack 作为前端工程化的核心工具，是非常
2020-09-11 10:27:12
202
原创 VUE的watch、computed、filter的比较
watch与computed、filter：watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选watch与computed的区别:1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性2.watch不会缓存数据，每次打开页面都会重新加载一次，而computed如果之前进行过计算他会将计算的结果缓存，如果再次请
2020-09-04 11:44:42
794
原创 左滑删除组件
左滑删除组件组件SlideDelete.vue使用：组件SlideDelete.vue<template> <div :class="componentName" v-slide=""> <div class="slide__top" ref="slideItem" :style="wrapperStyle"> <slot name="item" v-if="$slots.item" /> <slo
2020-08-24 17:07:10
324
原创 mini vue
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2020-04-30 14:16:40
330
原创 工具类
import qs from 'qs';import base64 from './base64';import constant from '../../utils/constant';import configs from "../../utils/config";import serverConfig from "../../../server.config"const mome...
2020-04-29 16:35:35
178
原创 微信小程序弹框
微信小程序弹框结合了部分业务需求，需要进行修改wxml<!-- 底部弹框外壳 --><view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view><!-- 弹出框内容 --><view animation="{{anima...
2020-04-20 17:57:09
228
原创 SHA、MD5
SHA --信息摘要算法大版本有 ：SHA-1（被破解了） 与 SHA-2，SHA-2又包含很多子版本，有SHA-224（256的阉割版），SHA-256，SHA-384（512的阉割版），SHA-512长度越长不同明文的碰撞几率越低，但性能也会低想要追求安全性，可以多个摘要算法一起用，例如md5摘要和SHA-256一起用，除非知道拼接规则，否则不可能破解MD5 --信息摘要算法...
2020-03-02 09:44:47
168
原创 B+树
B+树B-树的一种变体，比B-树更高的查询性能一个m阶的B+树具有如下几个特征：1.有k个子树的中间节点包含有k个元素（B树中是k-1个元素），每个元素不保存数据，只用来索引，所有数据都保存在叶子节点。2.所有的叶子结点中包含了全部元素的信息，及指向含这些元素记录的指针，且叶子结点本身依关键字的大小自小而大顺序链接。3.所有的中间节点元素都同时存在于子节点，在子节点元素中是最大（或最小）...
2020-03-02 09:32:12
147
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人