李公子丶-CSDN博客

原创 mockjs的基本使用和演示案例

什么是mockjsmockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。当然模拟数据有一定的规则请参考： http://mockjs.com/...

2022-02-12 16:57:58 1349

VeeValidate 是 Vue.js 表单验证框架。VeeValidatehttps://vee-validate.logaretm.com/第一步：安装npm i [email protected]第二步：导入// 导入组件import { Form, Field } from 'vee-validate'export default { name: 'LoginForm', components: { Form, Field }}第三步：使用 .

2022-01-26 22:09:31 2497

原创 Vue中自动批量注册组件

使用require提供的函数context加载某一个目录下的所有.vue后缀的文件。然后context函数会返回一个导入函数importFn它又一个属性keys()获取所有的文件路径通过文件路径数组，通过遍历数组，再使用importFn根据路径导入组件对象遍历的同时进行全局注册即可// 导入library文件夹下的所有组件// 批量导入需要使用一个函数 require.context(dir,deep,matching)// 参数：1. 目录 2. 是否...

2022-01-19 18:17:47 914

原创 Vue指定组件内容的三种方式（el， template ，render）

指定组件显示的内容：new Vue({选项})el 选项，通过一个选择器找到容器，容器内容就是组件内容提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。项目中会有index.html 文件,里面会存在一个div<div id="ap

2022-01-19 17:56:30 1794

原创 Vue3 通过自定义指令实现图片懒加载

介绍一个webAPI：IntersectionObserverIntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。检测某个元素是否进入了"视口"（viewport），即用户能不能看到它。// 创建观察对象实例const observer = new IntersectionObserver(callback[, options].

2022-01-14 18:24:03 260

原创 Vue3配置注册插件

什么是插件扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。这就是插件插件的语法要素vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展// 导入组件import Skeleton from './skeleton.vue'// 向外暴露一个对象需要有 install 方法export de

2022-01-11 21:06:27 959

原创 Vuex持久化插件(vuex-persistedstate)

为什么使用持久化目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。在开发的过程中，像用户信息（名字，头像，token）需要vuex中储存且需要本地储存再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页面需要储存在本地使用步骤1. 首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化npm i vuex-persistedstate2. 然后：在src/store 文件夹下新建 modules

2022-01-08 13:01:32 21591 7

原创 vue3中通过ref属性获取DOM

获取单个ref属性绑定的dom元素vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。<template> <h1 ref="box">Ref属性获取dom</h1></template><script>import { ref, onMounted } from 'vue'export default { name: 'Ref',

2022-01-07 15:22:12 6021 1

原创 vue3中路由的配置

创建路由模块在项目中创建router.js 路由模块，在其中按照如下4个步骤创建并得到路由的实例对象：1. 从vue-router中按需导入两个方法2. 导入需要使用路由控制的组件3. 创建路由实例对象4. 向外共享路由实例对象5. 在mian.js中导入并挂载路由模块// 1. 从vue-router 中按需导入两个方法// 2. createRouter 方法用于创建路由的实例对象// 3. createHashHistory 用于指定路由的工作模式（hash 模式）

2022-01-05 20:33:48 2259

原创 webpack 环境下的 Source Map

生产环境遇到的问题前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情变量被替换成没有任何语义的名称空行和注释被剔除什么是 Source MapSource Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错.

2021-12-20 11:00:00 644 1

原创 webpack 配置打包发布

为什么要打包发布项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。配置 webpack 的打包发布在 package.json 文件的 scripts 节点下，新增 build 命令如下： "scripts": {...

2021-12-19 09:00:00 548 1

原创 webpack 中的 loader

loader 概述在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：⚫ css-loader 可以打包处理 .css 相关的文件⚫ less-loader 可以打包处理 .less 相关的文件⚫ babel-loader 可以打包处理 webpack 无

2021-12-18 00:09:43 1052

原创 webpack插件的使用

webpack 插件的作用通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 插件有如下两个：① webpack-dev-server⚫ 类似于 node.js 阶段用到的 nodemon 工具⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建② html-webpack-plugin...

2021-12-17 19:21:15 763

原创 webpack基本用法

什么是webpack？概念： webpack是前端工程化的具体解决方案。主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆，处理浏览器中JavaScript的兼容性，性能优化等强大的功能。好处：让程序员把工作重心放到具体功能的实现上，提高了前端的开发效率和项目的可维护性。注意：目前Vue，react等前端项目，基本都是基于webpack进行工程化开发的。webpack 示例我们通过一个demo来演示webpack的使用过程我么先创建一个文件夹，初始化项目文件新

2021-12-17 16:36:53 909

原创移动端的兼容问题（ios和安卓）

ios和安卓系统存在的兼容问题1.禁止图片点击放大部分安卓手机点击图片会放大，如需要禁止放大，只需要设置 css 属性img{ pointer-events: none;}这个会让 img 标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层2.禁止 iOS 识别长串数字为电话<meta name="format-detection" content="telephone=no">3.禁止复制、选中文本// 设置CSS属性 .

2021-12-09 17:45:40 1654

原创 ES7中修饰器的作用

修饰器是一个函数，它可以给class类或属性上，加上一些其他的操作修饰器对类的行为的改变是在代码编译时发生的，而不是在运行时，这意味着，修饰器能够在编译阶段执行代码。也就是说，修饰器的本质就是编译时执行的函数。修饰器的第一个参数就所要修饰的目标对象。...

2021-12-08 18:16:49 529

原创微信小程序分包流程

为什么要分包？小程序要求压缩包体积不能大于 2M，否则无法发布实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传分包后可解决 2M 限制，并且能分包加载内容，提高性能分包后单个包的体积不能大于 2M 分包后所有包的体积不能大于 16M分包形式?常规分包独立分包分包预下载常规分包开发者通过在 app.json subpackages 字段声明项目分包结构特点：加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容分包的页面

2021-12-07 16:03:14 1270

原创数组排序算法

冒泡排序(Bubble Sort) 数组中有n个数，比较每相邻的两个数，如果前者大于后者，就把两个数交换位置，第一轮就可以选出一个最大的数放在最后面；那么经过n-1(数组的 length-1)轮，就完成了所有数的排序。”// 冒泡排序，拿出数组的当前项和后一项对比，满足条件交换位置var arr = [6,7,4,3,5,1,2]for (let i = 0; i < arr.length - 1; i++) { for (let j = i + 1; j &lt...

2021-11-29 18:24:42 186

原创数组扁平化的几种方式

var arr = ['1', [2,3],4,[5,6,7,[8,9]]]// 使用ES6新增的flat方法来实现console.log(arr.flat(Infinity));// 检测数组里面的元素是否包含数组数组元素有数组就解构一层继续递归, 否则直接返回arrfunction flat (arr) { let flag = arr.some(item => Array.isArray(item)) return flag ? flat(...

2021-11-11 21:09:40 684

原创从一个URL到页面渲染完成发生了什么？

DNS解析：将域名地址解析为IP地址（查找规则如下）浏览器DNS缓存系统DNS缓存路由器DNS缓存网络运营商DNS缓存递归搜索：（例如：limobai.ag.com） .com域名下查找DNS解析 .ag域名下查找DNS解析 limobai域名下查找DNS解析出错了通过TCP建立连接：TCP三次握手第一次握手，由浏览器发起，告诉服务器我要发送请求了第二次握手，由服务器发起，告诉浏览器我准备好接收了，你赶紧发送吧第三次握手，

2021-11-03 15:37:24 69

原创 js作用域

js的作用域作用域说明:一般理解指-个变量的作用范围全局作用域全局作用域在页面打开时被测建,页面关闭时被销毁编写在script标签中的变量和函数,作用域为全局，在页面的任意位置都可以访问到在全局作用域中有全局对象window ,代表一个浏览器窗口，由浏览器创建,可以直接调用全局作用域中声明的变量和函数会作为window对象的属性和方法保存函数作用域调用函数时,函数作用域被创建,函数执行完毕，函数作用域被销毁每调用一次函数就会创建一个新的函数作用域，...

2021-10-26 18:22:18 90

原创防抖（debounce）和节流（throttle）

防抖函数当持续触发事件，定时间内没有再触发事件事件处理函数才会执行一次，如果设定的时间到来之前，又触发了事件就重新开始延时。触发事件一段时间内没有触发事件执行肯定是定时器(在设定的时间内又-次触发了事件重新开始延时代表的就是重新开始定时器)(那么意味着上一次还没有结束的定时器要清除掉重新开始)<input type="text" name="" id="txt"><script> const input = document.querySelecto.

2021-10-26 15:26:44 111

原创对象的深拷贝和浅拷贝

什么是深拷贝和浅拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝是将一个对象从内存中完整的拷贝份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。针对引用类型来说赋值深拷贝浅拷贝的区别浅拷贝赋值的区别当我们把一个对象赋值给一个新的变量时，...

2021-10-25 23:40:02 991

原创 ES6 模块化的介绍和使用

S6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。// ES6模块import { stat, exists, readFile } from 'fs';上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效

2021-10-22 16:46:18 285

原创 class 继承的介绍和使用

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。// 继承class Father { constructor (name, age, sex) { this.name = name this.age = age this.sex = sex } eat () { console.log("我会吃饭"); }}class Son exten

2021-10-22 14:40:13 237

原创 class 的介绍和使用

class介绍ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。calss基本语法我们先来回顾一下ES5类的写法function Person(name, age) { this.name = name; this.age = age;}.

2021-10-21 16:30:10 2223

原创 Generator 函数的介绍和使用

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。异步编程对 JavaScript 语言太重要。JavaScript 语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。ES6 诞生以前，异步编程的方法，大概有下面四种。回调函数事件监听发布/订阅 Promise 对象什么是异步？所谓"异步"，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头

2021-10-20 14:29:00 304

原创 Promise的介绍和使用

Promise是ES6引入的异步编程的新解决方案。语法止Promise是-一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。Promise 构造函数: Promise (excutor) {} Promise.prototype.then 方法 Promise.prototype.catch 方法Promise的基本使用实例化Promisenew Promise()在实例化的时候接受一个参数，这个参数是一个函数。这个函数有两个形参，resolve...

2021-10-18 17:12:22 257

原创 Symbol的基本使用

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是Javascript语言的第七种数据类型,是一种类似于字符串的数据类型。Symbol的特点Symbol的值是唯一的,用来解决命名冲突的问题 Symbol值不能与其他数据进行运算 Symbol定义的对象属性不能使用for.in循环遍历,但是可以使用Reflect.ownkeys来获取对象的所有键名...

2021-10-15 18:18:41 1603

原创 2021最新~某知名软件服务商的前端工程师笔试题

摘要：本片文章中的题目均来自大厂，这些企业是行业内的标杆，代表了行业的最高水准，经过了层层筛选得出了一些较好的题目，难易适中，内容丰富，笔试面试中必考或者常规试题，记录分享在此，希望看完对你有一定的帮助。在本片文章中，我详细记录了做题时的想法和遇到的问题，将解题思路一丝不苟的记录了下来，在结合之后查阅文档，对题目的答案做出了详细的解释，并对知识点做出了充分的补充。如果文中有的地方语义有偏差，或者解释不充分，欢迎大家在文章底部留言或者私信我，我会虚心...

2021-10-11 21:28:19 927 1

原创组件上v-model和.sync修饰符的作用

v-model的作用当你传递给子组件的数据既要使用也要修改，例如这里的name这种情况下我们可以使用v-model简写v-model只能使用一次<div id="app"> {{sum}}   <btn v-model="s

2021-10-11 16:43:21 181

原创 2021最新~某知名社交平台的前端工程师笔试题——看看有哪些是你不会的？

摘要：本片文章中的题目均来自大厂，这些企业是行业内的标杆，代表了行业的最高水准，经过了层层筛选得出了一些较好的题目，难易适中，内容丰富，笔试面试中必考或者常规试题，记录分享在此，希望看完对你有一定的帮助。在本片文章中，我详细记录了做题时的想法和遇到的问题，将解题思路一丝不苟的记录了下来，在结合之后查阅文档，对题目的答案做出了详细的解释，并对知识点做出了充分的补充。如果文中有的地方语义有偏差，或者解释不充分，欢迎大家在文章底部留言或者私信我，我会虚心...

2021-09-30 22:57:35 1481

原创大厂面试都问些什么？快来看看吧。大厂经典面试题详解，祝你斩获offer

摘要：本片文章中的题目均来自大厂，这些企业是行业内的标杆，代表了行业的最高水准，经过了层层筛选得出了一些较好的题目，难易适中，内容丰富，笔试面试中必考或者常规试题，记录分享在此，希望看完对你有一定的帮助。在本片文章中，我详细记录了做题时的想法和遇到的问题，将解题思路一丝不苟的记录了下来，在结合之后查阅文档，对题目的答案做出了详细的解释，并对知识点做出了充分的补充。1. 以下能够控制元素的盒模型的属性是A. box-sizingB. box-shado...

2021-09-27 22:35:25 863 6

原创图片裁切器Cropper.js的使用

cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。支持 39 个选项支持27种方法支持6个事件支持触摸（移动）支持缩放支持旋转支持缩放（翻转）支持多种作物支持在画布上裁剪支持通过画布在浏览器端裁剪图像支持翻译 Exif 方向信息跨浏览器支持官方github文档：https://github.com/fengyuanchen/cropperjs使用方法...

2021-09-24 21:19:03 1753

原创项目中如何处理相对时间

推荐两个第三方库：Moment.jsDay.js两者都是专门用于处理时间的 JavaScript 库，功能差不多，因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些，因为它采用了插件化的处理方式。Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。Day.js

2021-09-15 17:38:05 118

原创如何处理第三方图片资源403的问题

返回403的原因为什么文章列表数据中的好多图片资源请求失败返回 403？这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。第三方平台怎么处理图片资源保护的？服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。Referer 是什么东西？Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含...

2021-09-15 17:14:32 162

原创深度作用操作符 /deep/

组件的样式作用域在组件中的style标签中默认是全局样式我们在组件使用style设置了HelloWorld组件中元素的样式HelloWorld组件内容在父组件中给子组件内部元素添加样式有作用域的组件如果不希望当前组件中的样式影响到别的组件，我们可以添加作用域在有作用域的组件中给子组件设置样式默认只能作用到子组件的根节点上使用子组件根节点本身的class类名 ...

2021-09-14 12:37:28 1426

原创优化封装本地存储 localStorage 模块

为什么要封装？在我们项目的后续业务中的很多地方都需要操作本地存储，如果每次都像上面那样写的话比较麻烦，所以我们这里建议把操作本地存储的代码封装到一个单独的模块中进行处理。封装方法创建 src/utils/storage.js 模块。在文件中封装方法并导出/* 封装本地存储模块 */export const getItem = name => { // 获取数据 const data = window.local...

2021-09-12 16:02:50 688

原创项目中移动端 REM 适配方法和 PostCSS 的使用

什么是适配我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同，视口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。rem介绍rem是css3 的一个长度单位，相对文档跟元素 html；比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小；移动端 R...

2021-09-12 13:07:02 1859

原创项目中如何导入 Vant 组件库

Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。官方文档 GitHub 仓库下面是在 Vant 官网中列出的一些优点：60+ 高质量组件90% 单元测试覆盖率完善的中英文文档和示例支持按需引入支持主题定制支持国际化支持 TS支持 SSR在我们的项目中主要使用 Vant 作为核心组件库，下面我们根据官方文档将 Vant 导入项目中。将 Vant 引入项...

2021-09-12 11:57:13 3460

基于element组件库封装的动态表单组件

空空如也