- 博客(115)
- 收藏
- 关注
RSS订阅
1原创 Vue中extend基本用法
可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。我个人的理解来看，extend提供了一个能够构造组件的函数（也就是构造器）。在一些特定的应用场景（如自己构建一个复杂弹窗）下，我们使用这种函数式的构造组件的方法，会更灵活一些。(2) 新建messageBox.js。
2023-09-08 11:47:05
551
原创 peerDependency到底是什么
它告诉 NPM 忽略项目中引入的各个 modules 之间的相同 modules 但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本 modules 共存。在 NPM v7 中，默认安装 peerDependencies，在我们日常使用的插件例如 babel-plugin-dynamic-import-node、babel-plugin-transform-vue-jsx、lottie-web，它们都依赖于 webpack 进行开发的。正常开发中，我们经常接触到的是。
2023-08-04 15:05:41
775
原创 前端代码审查清单
前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候，总会各种各样的问题，自测的时候由于太熟悉自己的代码逻辑往往测试不够充分，无法发现问题。前端代码审查清单就是为了解决这个问题！清单存放了一些常见的问题，当我们开发完成之后，对照清单思考一下这些问题在代码中是否遇到或者妥善处理，从而提高代码质量。由于本人才疏学浅，部分场景没有覆盖，欢迎大家补充更多审查点，提高前端代码质量！
2023-04-24 11:01:24
1166
原创 css设置超出几行显示省略号（单行、多行）,兼容数字英文不换行问题，兼容中文字符隔空换行问题
1、单行文本超长显示省略号2、多行文本显示省略号因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。3、兼容 数字、英文 不换行只需要加入下面的代码4、中文字符隔空换行如上图只需加上下面样式即可。
2023-03-28 10:34:29
1928
转载 Vue2.0源码解析——编译原理
实际上Vue最终在渲染函数的时候是通过js进行渲染的，Vue封装了所有创建DOM的操作，基于虚拟dom来渲染真实dom（真实dom包含太多无用属性，操作起来太消耗性能），因此创建一个虚拟dom对这个虚拟dom进行操作，最后生成一个最终的虚拟dom,然后利用js创建dom的方法生成真实dom。那是以因为当我们在书写出一个Vue的模板的时候，Vue会在内部做一个编译的过程，这个过程就是把我们写的浏览器不认识的带有指令版本的模板(中可以找到所有创建DOM的方法，而这些方法最终会被引用用于创建真正的DOM。
2023-03-21 17:25:17
216
原创 Vue3源码里的一些知识点理解
call 知识点：call 是 Function 对象自带的一个方法，可以改变函数体内部的 this 指向，第一个参数就是 this要指向的对象，也就是想指定的上下文，后面的参数它会按顺序传递进去。如果 data 是个对象，那么整个vue实例将共享一份数据，也就是各个组件实例间可以随意修改其他组件的任意值，但是 data 定义成一个函数，将会 return 出一个唯一的对象，不会和其他组件共享一个对象。官网解释：调用一个对象的一个方法，以另一个对象替换当前对象。data 为什么是个函数而不是个对象？
2023-03-15 16:18:17
93
转载 104道 CSS 面试题，助你查漏补缺
CSS 面试知识点总结最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！1.介绍一下标准的 CSS 的盒子模型？低...
2020-03-25 14:28:28
761
转载 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；比起sublime，vscode颜值更高，安装配置插件更为方便...
2020-03-24 19:51:41
312
转载 var、let 和 const 区别的实现原理
var和let的区别，面试老生常谈的问题，大多数人回答可能就是作用域和变量提升这两点不同，少有人能够知道内在原理，这样的回答面试官会满意吗？（手动滑稽）我们就从声明过程，内存分配，和变量提升这三点来看这三者之间的区别。一.声明过程var：遇到有var的作用域，在任何语句执行前都已经完成了声明和初始化，也就是变量提升而且拿到undefined的原因由来function： 声明、初始化、赋...
2020-03-21 19:50:24
672
转载 前端模块化的理解
在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说...
2020-03-21 16:33:27
220
转载 webpack打包（含面试）
1.打包入口entry: { chunkkey:'' // 使用chunkkey扩展性好，清楚的知道入口文件对应的key}2.处理CSS引入csscss-loader提取css文件extract-text-webpack-plugin3.本地开发服务器：webpack-dev-server路径重定向，支持https，浏览器中可以显示编译错误，可以进行接口代理，模块热...
2020-03-18 11:57:01
714
转载 webpack打包原理 ? 看完这篇你就懂了 !
前言[实践系列] 主要是让我们通过实践去加深对一些原理的理解。[实践系列]前端路由[实践系列]Babel 原理[实践系列]实践这一次,彻底搞懂浏览器缓存机制[实践系列]你能手写一个 Promise 吗？Yes I promise。有兴趣的同学可以关注[实践系列]。 求 star 求 follow~本文通过实现一个简单 webpack,来理解它的打包原理,看完不懂直接...
2020-03-18 11:49:19
3994
转载 vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件2.在build目录下的 dev-server.js的文件作如下更改var appData = require('../test/data.json')// 获取...
2020-03-18 11:38:34
310
转载 详解vue-cli项目中怎么使用mock数据
前言注意：网上很多教程说需要在build目录下的dev-server.js文件中配置，但目前最新的vue-cli是没有dev-server.js这个文件的，因为已经被合并到webpack.dev.conf.js文件中，所以直接在该文件中配置即可步骤1、在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文件转存失败重新上传取消dir.pngposts.json...
2020-03-18 11:27:23
552
转载 vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 data.json文件, 用来存放模拟的 json 数据2.在build目录下的 dev-server.js的文件作如下更改3. 在.vue做请求, 就可以成功获取data.json的数据了, 下面使用 axios 进行请求4.最后必须重新运行npm run dev，则...
2020-03-18 11:26:26
170
转载 5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言，javascript正扮演着越来越重要的地位，它不仅能为浏览器端赋能，在web服务器方面也有很大的价值（我们可以用nodeJS来写服务端代码，启动web服务器），因此本文所要描述的，便是javascript在服务端的应用。我将介绍如何使用nodeJS来搭建一个mock服务器，方便前端自定义mock数据请求，提高前端开发的主观能动性和对项目健壮性的探索。我们将学到koa基本...
2020-03-18 11:16:27
339
转载 Vue插件开发，发布到npm并安装使用
我们可以先查看Vue的插件的开发规范我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样：ps: 这里注意一下包的名字前缀是 ending ，组件的名字前缀是 endimport EndingUI from 'ending-ui';// 或者 const CustomUI = require('ending-ui');...
2020-03-18 10:56:46
106
转载 通用前端组件
往期面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus的实现 面试官系列(3): 前端路由的实现 面试官系列(4): 基于Proxy 数据劫持的双向绑定优势所在 面试官系列(5): 你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但...
2020-03-17 17:15:25
1404
原创 项目性能优化
你有对 Vue 项目进行哪些优化？如果没有对 Vue 项目没有进行过优化总结的同学，可以参考本文作者的另一篇文章《 Vue 项目性能优化 — 实践指南 》，文章主要介绍从 3 个大方面，22 个小方面详细讲解如何进行 Vue 项目的优化。（1）代码层面的优化v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添...
2020-03-17 17:07:03
121
原创 Vue框架原理知识总结
前言本文分享 vue 高频原理面试题,覆盖了 vue 核心实现原理,使用通俗易懂的方式让读者更好的理解Vue ❤️1.什么是 MVVM？MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，Vie...
2020-03-17 15:17:43
518
转载 Async/Await：比Promise更好的6个理由
通过之前的几篇文章学习Promise，我们了解到promise是ES6为解决异步回调而生，避免出现这种回调地狱，那么为何又需要Async/Await呢？你是不是和我一样对Async/Await感兴趣以及想知道如何使用，下面一起来看看这篇文章：Async/Await替代Promise的6个理由。什么是Async/Await?async/await是写异步代码的新方式，以前的方法有回调函数和P...
2020-03-17 15:00:13
377
转载 【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a;console.log(a===b);...
2020-03-17 10:18:10
121
转载 promise的工作原理
Promise原理和使用Promise基本用法异步加载图片实例Ajax异步操作实例Promise新建后立即执行promise实例作为参数调用resolve或reject不会终结 Promise的参数函数的执行模拟一个Promise的最简单实现Promise接口超时模拟Promise基本用法Promise对象是一个构造函数，用来生成Promise实例，构造函数接受一个函数作为参数...
2020-03-16 20:16:38
177
转载 8张图帮你一步步看清 async/await 和 promise 的执行顺序
为什么写这篇文章？ 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什么写这篇文章？说实话，关于js的异步执行顺序，宏任务、微任务这些，或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢，简单来说，业务中很少用async，不太懂async呢，研究了一天，感觉...
2020-03-16 18:51:34
200
转载 这一次，彻底弄懂 JavaScript 执行机制
不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：...
2020-03-15 22:48:00
95
原创 ES5中forEach和map的区别？
相同点：1、都是遍历数组的每一项2、匿名函数传参都为3个分别为（item,index,arr）3、匿名函数中的this都指向window4、只能遍历数组区别：forEach不会返回数据，对数组操作会改变原数组 ，map会返回一个新的数组，操作不会改变原数组forEach无法进行跳出循环，可以使用thorw new error抛出异常的形式跳出循环使用return f...
2020-03-15 22:29:56
212
原创 ES6中for...in和for...of的区别
区别：1、for in遍历的是数组的索引（即键名），而 for of遍历的是数组元素值。2、for in会遍历数组所有的可枚举属性，包括原型。for of遍历的只是数组内的元素，而不包括数组的原型3、for in遍历顺序有可能不是按照实际数组的内部顺序总结：for..of 适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象....
2020-03-15 22:27:42
873
转载 如何用for...of循环对象？
首先了解一下for..of..: 它是es6新增的一个遍历方法，但只限于迭代器(iterator), 所以普通的对象用for..of遍历是会报错的。下面来说明一下如何用for..of..遍历普通对象类数组对象如果对象是一个类数组对象，那好办，用Array.from转成数组即可。var obj = { 0:'one', 1:'two', length: 2...
2020-03-15 22:24:01
1084
转载 为什么要用SVG？SVG与iconfont、图片多维度对比
一、SVG是什么？SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。二、svg和其他格式图片对比它和传统图片格式有什么不同？1. 兼容现有图片能力...
2020-03-15 20:44:32
1637
转载 前端图片优化的方案
使用base64编码代替图片 合并图片sprite 图片延迟加载 使用css、svg、canvas或iconfont代替图片 加载对应尺寸图片 预加载 更好的图片格式我们拿淘宝网来做案例分析:1.使用base64编码代替图片场景：将图片转换为base64编码字符串inline到页面或css中，适用于图片大小小于2KB，页面上引用图片总数不多的情况。Paste_Imag...
2020-03-15 20:38:41
210
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人