- 博客(130)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 webpack学习篇-性能优化
我们的目标如下：开发环境性能优化1.优化打包速度HMR(热模块替换)2.优化代码调试source-map生产环境性能打包1.优化代码打包速度oneof：提高loader的匹配效率 babel缓存，判断是否以及打包过 多进程打包 externals（外部扩展）：他可以规定那个文件不需要打包，从而让期通过CDN引入 dll：动态链接库，防止某一些引用库的多次引用，从而导致多次打包2.优化代码运行性能缓存 tree-shaking code split （代码分割）
2021-03-12 11:10:27
789
原创 webpack学习总结-生产环境
要求上线的代码稳定（js，css的兼容处理），运行速度块（将css改为单独文件用link引入），传输速度块（代码压缩）提取css成单独文件下载 引入mini-css-extract-plugin 文件mini-css-extract-plugin 将取代style-loader，作用：提取js中的css代码为单独文件（一个），防止html太大，所以弊端就是css文件太大了（如果是单入口，所以vue中用了自己的vue-style-loader来防止css全部聚焦在一起）const { re.
2021-03-11 17:40:32
220
原创 webpack学习总结-开发环境
首先我们的目标，可以让代码运行，对代码调试的时候方便一些基础配置创建webpack.config.jsconst { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。module.exports = { entry: './src/js/index.js', // 入口文件 // 输出配置 output: { filename: './built.js', // 输出文件名 path: resolve(__d
2021-03-11 15:06:24
245
原创 webpack基础介绍
自我学习，自我总结wbpack 是什么webpack是一种前端的资源构建工具，一个静态模块打包器（module bundler）。在webpack看来，前端的所有资源文件（js/json/css/img/less/。。。）都应该作文模块处理它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）Wbpack的核心概念Entry入口（entry）指示webpack以哪一个文件为入口起点开始打包，分析构建内部依赖图output输出（output）指示we
2021-03-11 11:18:18
190
原创 vue中Axios的封装和API接口的管理
vue中Axios的封装和API接口的管理https://www.kancloud.cn/yunye/axios/234845 axioshttps://juejin.cn/post/6844903652881072141#heading-8vue-router分装安装npm install axios; // 安装axios复制代码引入一般我会在项目的src目录中，新建一个request文件夹一个api.js文件。api.js文件中的index.js用来封装我们的a...
2021-03-07 17:33:16
260
翻译 typeScript学习总结
1. 基础类型TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做boolean（其它语言中也一样）。let isDone: boolean = false;isDone = true;// isDone = 2 // error数字和 JavaScript 一样，TypeScript 里的所有数字都.
2021-03-06 17:08:11
3660
2
原创 性能工具的使用
使用 Chrome 发现内存泄漏<body> <!-- 1. 一直添加DOM导致内存泄漏 --> <div id="nodes"></div> <script> var x = []; // 2. 全局变量 不会被回收 function createSomeNodes() { var div, i = 100, frag = document.createDocu
2021-02-27 23:41:27
364
原创 从输入 URL 到页面展示发生了什么？
从输入 URL 到页面展示发生了什么？“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。今天就结合下图对这个过程进行分析。当然实际过程还远比这张图复杂得多。一、用户输入用户输入查询关键字后，地址栏会判断输入的关键字是搜索内容还是请求的 URL。如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成带关键字的 URL。 如果输入内容符合 URL 规则，地址栏
2021-02-26 11:30:22
1438
原创 css替换元素
替换元素内容可以被替换的元素img iframe video select input button textarea 元素特性有自己的尺寸替换元素的基线是元素的下边框，和一个inline block 元素中要是没有内容，那么其基线也是下边框的特性相同，应该就是为了防止替换元素有内容和没内容，如果基线不固定，那么后续的line box就可以会出现出现渲染的不支持:：before 和 ::after 伪元素对应display的值注意：img标签在没有src属性的时候在表现的就是一个内联元素
2021-01-19 22:43:30
734
1
原创 js继承
什么是继承一个类（函数）可以重用另另一个类（函数）的属性和方法1.原型链继承function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { this.subproperty = false;}// 这里是关键，创建SuperType的实例，并将该
2021-01-11 23:54:41
372
原创 垂直水平居中的方法
<div class="container"> <div class="box box_11">1</div> </div> <div class="container container_1"> <div class="box box_1">2</div> </div>...
2021-01-09 15:59:13
139
原创 javaScript进制之间相互转换
相关API介绍numObj.toString([radix])方法返回指定 Number 对象的字符串表示形式。作用：将10进制的数字转为任意进制（默认是转10进制，对就是默认不转）参数：radix:指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。parseInt(string, radix)解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。作用：将任意进制转为10进制参数
2021-01-05 12:05:23
193
2
原创 setTimeout和setInterval的使用的时候的问题总结
this的指向问题由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象例子（来自MDN）let myArray = ["zero", "one", "two"];myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this);};myArray
2021-01-04 22:10:52
669
原创 MVC 与 MVVM的
MV-C 与 MV-VM的区别1.MVVM对视图层（v）与模型层（m）的分离MVC流程图MVVM流程图好处就是Controller（控制器）的消失，减少对DOM的操作，从而降低了耦合性比如一个js有通过一个class去找一个DOM，当这个class改变就要去改JS文件，这个就是高耦合性Model（模型）代表数据内容的访问层View（视图）视图就是用户屏幕上看的到的解构，布局和外观（UI）Controller （控制器）业务逻辑：对DOM的绑定，对数据的修改ViewMod
2021-01-04 18:51:23
214
原创 获取对象属性
获取对象属性枚举和迭代的区别枚举：是一次性列举去集合中的元素迭代（遍历）：并不是一次列举全部元素，是在循环的过程中遍历出元素获取属性各个API介绍for…of遍历数组获取value不可以遍历对象，对象可以使用Object.entries()或者Object.keys()或者Object.vaules()将对象转为数组后在遍历for…in遍历获取key，所以一般用来遍历对象问题; 遍历属性包含了原型链上可以枚举的解决：使用hasOwnProperty 判断是否为自身属性补充：in
2020-12-19 15:11:06
1129
1
原创 ES6模块和CommonJs的区别，以及注意事项
区别CommonJS模块输出是一个值的拷贝，ES6模块输出的值是引用CommonJS是运行时候加载，ES6模块的编译的时候输出接口CommonJS是require()同步加载模块，ES6模块是import命令是异步加载，有一个独立的模块依赖的解析阶段CommonJS模块输出是一个值的拷贝，ES6模块输出的值是引用CommonJSCommonJS是一个值的拷贝也就是说，一旦输出一个值，模块内部的变化就影响不到这个值例子 来自// lib.jsvar counter = 3;func
2020-12-18 12:40:36
1151
原创 addEventListener
作用将实现EventListener的函数添加到调用他的EventTarger上的指定类型事件的帧听器列表中参数target.addEventListener(type, listener, useCapture, wantsUntrusted ⚠);type表示监听事件类型的字符串listever当监听事件触发时，会触发（listevent 可以是函数也可以是一个实现了Eventlistener接口的对象）options一个指定listener属性可选参数对象capture：Bool
2020-12-18 11:15:07
3573
原创 js隐式转换
js数据类型基本类型（原始值）：UndefinedNullStringNumberBooleanSymbol 引用类型（对象值）：object(数组Array;函数Function;正则RegEXP;日期Date)来源+：运算符既可以是数字相加,也可以是字符串相加 ==：==不同于===有多不同情况的隐式转换（以前我看一本书书尽量还是多用==，多拥抱js的隐式转换少用===，但是当我用了===，我就回不去了） -*/：这一些运算符就比较友好了，他们只针对number...
2020-09-25 19:10:13
489
原创 0.1 + 0.2 不是等于 0.3的原因，以及处理方法
原因js中的数字JavaScript的Number类型为双精度IEEE 754 64位浮点类型。那么一个Number的二进制的形态为第0位：符号位，0表示正数，1表示负数(s) 第1位到第11位：储存指数部分（e） 第12位到第63位：储存小数部分（即有效数字）fJS中Number的最大安全整数为(2^52 -1) =4503599627370495 是一个16位的整数，因此当我们赋值大于安全整数的一个Number给一个变量的时候，那么到输出的时候就会得到的值和我们赋予的值.
2020-09-25 17:22:00
876
原创 前端面试题
为什么有的编程规范要求用void0代替undefined？因为JavaScript的代码undefined是一个变量，而并非是一个关键字，这是JavaScript语言公认的设计失误之一，所以，我们为了避免无意中被篡改（全局定义了undefined为='DCW'，那么在引用undefined的时候就是'DCW'）,因此我建议使void0来获取undefined值。字符串有最大长度吗？有： js处理整数的最大值（253- 1），超过了就处理不了了，为什么呢？大家应该...
2020-09-25 16:28:04
144
原创 项目中规范使用git分支
此管理规范主要包括以下内容：master、release、test、develop、feature、hotfix等分支的作用及使用场景master，作用：是项目的稳定版本。项目需要正式发布上线，必须要在master上，使用master的代码进行打包或部署。通常发布版本前，可以在master上创建标签（tag），标记此次版本的重要信息。严格管理规范下，只有主要管理者才拥有master的push、merge等权限。release作用：是预发布分支来自：在规范的操作中，release一般从
2020-09-25 14:19:07
518
原创 设计模式
订阅发布者 class Pubsub { constructor() { this.handles = {} } /** * 事件的订阅 * @param {String} [type] 发布的事件类型 * @param {Function} [handle] 需要执行的事件 */ on(type, handle) { if (!this.handles
2020-09-23 13:53:29
95
原创 js中的节流和防抖
在学习Element-ui源码的过程中有注意到题目使用的节流防抖居然是引用的一个npm包，而不是自己写的一个utils为什么我会这样想呢，因为在看Data组件的时候E没有使用一些常见的比如moment这样的组件库，我当时还很惊讶，想着E中的程序员就是厉害，什么都自己亲力亲为，后来经过这个事情发现，他们用一些：小，但稳定而不是全部都自己写throttle-debounce就是其中一个当我看npm他们的一些API的时候大部分参数还是可以理解的，比如：delaycallback，但是也有一些我无法...
2020-09-22 17:39:18
353
1
原创 css弹性动画
通过css让生硬的动画变得更加自然效果图：我们知道没一个物体运动都有一个运动轨迹，例如上面的小球是模拟的弹簧运动从而让动画更加自然，而上图的运动轨迹图如下： （easeOutElastic）我们就可以根据这个动画曲线得到他每个时间点的位置就形成了动画常用的运动曲线https://easings.net/好像是要安全上网才可以访问我们随便点击一个（easeOutElastic）进去注意：参数x表示运行的进度我们会得到这样的一个公式，我们就可以通过这个公.
2020-07-10 11:50:43
1679
原创 剖析Vue数据劫持的实现原理
原文：https://github.com/DMQ/mvvm几种实现双向绑定的做法发布者-订阅者模式（backbone.js） 脏值检查（angular.js） 数据劫持（vue.js）发布者-订阅者模式:一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set('property', value)，脏值检查:angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过setInterval()定时轮...
2020-07-09 12:46:09
1622
原创 line-height理解
行高的单位百分比：突出了行高和字体大小的基佬关系当字体行高的单位为百分比的时候，行高以字体大小为依据em：em这个单位当当作用在行高的时候是以当前文字大小为依据，当作用在字体大小的时候是以当前元素的父元素的字体大小为依据行高的组成部分行距+实际高度（不同字体和字体大小组成的高度）实际高度组成部分：由4根线组成：上线 主线（median） 基线（baseline） 下线行距行距就是当行高的大小设置高于了字体大小可以形成的高度的时候其余高度就会自动向两边平分，也就是为什么
2020-07-06 17:08:33
818
原创 for..in 和 for..of的区别
in：支持IE6+枚举对象枚举字符串（IE9+后支持）枚举数组，但是数组只身的方法，和原型上的方法也会枚举出来，（可以使用hasOwnProperty来判断是否原型是的对象，但是还是回有自身的属性遍历出来）补充：如果使用forEach来遍历数组，他不可以break或者return falseof：ES6的时候引入不可以迭代对象迭代数组，可以使用break或者re...
2020-04-10 10:29:53
112
原创 javaScript 快速排序
简单理解首先我觉得我们要明确一般算法都是需要递归的，所以我们首先完成第一循环第一个循环我们找到一个主元（数组的中间），我们把大于的放右边，小于的放左边然后在分别把主元左边的和右边的在重复上面的过程就可以达到排序了具体步骤1.首先，从数组中选择中间一项作为主元2.创建两发指针，一个指第一项（左边），一个指最后一项（右边）3.我们要在左边找大的值，右边找小的值，让他们相互交...
2020-03-07 18:03:54
190
原创 Vue $nextTick
使用场景1.当改变了DOM中的数据后，立马去获取字段DOM中的值2.当我们在watch侦听器中改变了数据，立马用这一些数据去做一些操作，这里为什么不可以呢？因为watch其实应该也算是会被推到队列中去执行，而nextTick就是等当前DOM更新，也就是队列全部完成后执行3.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因...
2020-03-06 20:49:28
687
原创 this的由来
js函数中this的四种使用方法 1.方法调用模式 2.函数调用模式 3.改造器调用模式 4，apply,call,bind调用模式 1.方法调用模式,函数有所属对象，this就是这个对象的本身 当一个函数被保存在为对象的一个属性的时，我们称它为一个方法，...
2020-03-05 21:27:11
197
原创 执行上下文
this执行上下文也叫this执行环境？为什么呢就让我这个英语zz来解释下context：环境； 上下文执行环境：执行环境中定义了变量或函数有权访问的其他数据，决定了他们给各自行为，每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保持在这个对象中，虽然我们无法访问到这个对象，但是解析器可以在处理数据的时候在后台使用他...
2020-03-05 21:05:53
1751
1
原创 css小测--两栏布局
目标效果这个题得分我是6分中国题是针对表格布局，flex布局，inline-block布局，absolute布局来完成，大家突然问题来了为什么没float，嗯，这个看个人习惯和场景应用，我是不这么喜欢用float布局的HTML <div class="quiz"> <h6 class="quiz-h">201912</h6> ...
2019-12-29 13:55:00
215
2
原创 table-call布局
学习了旭哥的文章总结等分 <style> .container { display: table; height: 300px; width: 100%; border: 1px solid red; } .child { display: table-cell; border...
2019-12-23 11:16:43
517
原创 移动端配置
物理像素iphone 6 的宽度有750给物理像素逻辑像素也叫设备的独立像素，css像素也是逻辑像素的一种逻辑像素比（dpr）物理像素➗逻辑像素，iphone6 的dpr=2常见问题图片模糊 1px问题1.图片模糊一个图片大小200px * 200px（逻辑像素） 在dpr为1的屏幕下显示正常，在dpr为2的情况下那么在200px * 200px（逻辑像素）下物......
2019-11-19 18:18:59
862
原创 图片懒加载
什么的图片懒加载和预加载大家应该都明白，那么小面就来看看如何用JS书写原生懒加载下面我们在写出懒加载代码块的时候我们先来复习一些下面会遇到的一些知识点获取客户端高度var viewHeight = document.body.clientHeight 设置data-*属性HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在HTML或DOM中的元...
2019-11-14 18:01:37
118
原创 在vue-cli中使用vue-property-decorator装饰器
安装npm i -s vue-property-decorator如果你的项目是安装了TS那么就可以直接使用，如果没有安装TS但是还是想用vue-property-decorator装饰器那么就还需要去配置一下了使用vue-property-decorator要用babel转义,因为我们的项目中是没安装TS的是直接使用在babel.config.js文件中module.ex...
2019-10-15 15:49:17
4069
原创 前端小测----DOM测试38
得分我得了2分，难受，明明感觉是3分的 哈哈分析其实这个题目就是对伪类进行了一定考察，我太菜了，呜呜呜第一问：获取所有匹配required必选的单选框元素我的答案var requiredInputAll = document.querySelectorAll("input[type='radio'][required]")正解let disabledArr...
2019-10-14 14:55:35
12035
原创 sync修饰符的使用
为什么使用sync再vue中官网的介绍：我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源目的：再子组件去改变父组件的值的时候会有明显的代码样式，方便维护，为什么要这样为什么不用v-molder，因为v-model中已经说明了不要直接去改变v-model中的值，可以去拷贝在改变，在传值...
2019-10-10 16:10:43
307
原创 localStorage和sessionStorage区别和使用
一、什么是localStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。二、localStorage、sessionStorage的优...
2019-10-08 16:26:19
446
原创 Base64的学习
来源再一次看比如的代码的时候发现别人的图标是一串很长的字符串，而不是路径引用，从而开启了我对Base64的学习解决原生的atob和btoa方法进行Base64的编码atob：解码 从a(base64) 到 b(lob) 的写法btoa：编码 从 b(lob) 到 a(base64) 的写法问题那么我们如何再页面中使用Base64转义过的SVN图片呢？1.直接用在线...
2019-09-12 16:47:54
618
圆形进度条圆形进度条
2018-10-18
原生JS响应式相册相册
2018-10-02
响应式top图片切换
2018-10-01
原生js客服代码原生js客服代码
2018-09-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人