- 博客(22)
- 收藏
- 关注
RSS订阅原创 webpack常见面试题
从代码角度：体积更小（tree-shaking，noParse，ignorePlugin，压缩，合并等），加载更快；可以使用高级语言或语法（TS，ES6+，模块化，scss）；webpack是打包构建工具，是多个loader plugin的集合，需要什么功能就配置什么loader或plugin；输出：对编译后的module组合成chunk，把chunk转换成最终的bundle文件并输出；编译构建：从入口module开始根据依赖递归地进行编译解析，使用各自模块对应的loader；
2023-10-24 20:18:41
43
原创 关于javascript中的this默认绑定以及如何修改
文章目录this默认绑定先总结：再分别举例：改变this绑定call(),apply(),bind()使用以及区别this默认绑定先总结：有明确调用方时：多数情况下，方法中的this总是绑定方法的调用方；没有明确调用方时： 在全局环境调用时是全局对象(浏览器中是window对象)； 严格模式下没有调用方，方法里访问this就是undefined箭头函数： 箭头函数内部的this是方法定义时就确定的，也就是说这个this跟箭头函数外部的this上下文一致再分别举例：
2020-11-13 18:01:41
217
原创 vuex学习笔记
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。需调用 Vue.use(Vuex)是一个全局的单例模式：整个应用只有一个store实例；与视图之间相互独立进行维护；状态是响应式的；引用官网：“你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更
2020-10-24 20:47:45
84
原创 vue项目，elementUI框架，elUpload控件上传预览tiff格式图片
项目需求：上传图片并预览，要求可以预览tiff格式的图片。上传组件用的el-upload，处理tiff格式图片使用了tiff.js首先，使用npm安装element-ui和tiff.jsnpm install element-uinpm install tiff.js在main.js中引用elementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Ele
2020-09-03 23:22:39
1193
1
原创 npm/webpack常见问题及解决方案
webpack是现在比较流行的打包工具。使用过程中遇到的问题记录如下：问题：执行npm run build命令时报错：warning is not supported option方案：把webpack config文件里的warning:false外面包的那层compress去掉，即：new ParallelUglifyPlugin({ cacheDir: '.cache/', uglifyJS: { output: { comments:
2020-08-30 22:27:22
228
原创 响应式flex布局
flex布局方式，设置display: flex | inline-flex 的元素为flex container容器，子元素为flex item项目。注意，设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效。下面简述容器和子项目的属性：flex container容器的属性flex-direction(项目排列方向): row 默认 从左到右 row-reverse 从右到左 column 从上到下 column-reverse
2020-07-31 23:25:22
506
原创 值类型和引用类型，以及区分方式
值类型：数值(number)、字符串(string)、布尔值(boolean)、null、undefined，（ECMAScript2015即es6新增的symbol）引用类型：对象(Object)、数组(Array)和函数(Function)值类型使用typeof来检测数据类型，引用类型使用instanceof检测数据类型。例子：// 值类型var a = 123; console.log(typeof(a) == 'number'); // truevar b = "fls";conso
2020-06-30 20:56:06
167
原创 http协议1.x/2.x区别
http2的新特性：1.二进制帧层：客户端和服务器端传输数据时把数据分成帧，然后两端进行二进制编码和解码。优势：所有的通信都建立在一个TCP连接上，可以传递大量的双向流通的流，每个流都有独一无二的标志和优先级，每个消息都是逻辑上的请求和相应消息，由一个或者多个帧组成，来自不同流的帧可以通过帧头的标志来关联和组装起来2.请求和响应的多路复用：允许客户端和服务端把HTTP消息分解成独立的帧，交错传输，然后在另一端组装。优势：交错的多个并行的请求，而不需要阻塞，使用一个连接传递所有的并行的请求和响应，移除
2020-06-30 20:48:52
1141
原创 常见浏览器兼容性问题和解决方案
常见的浏览器IE、Firefox、Chrome等主流浏览器兼容性问题和解决方案：1，各浏览器默认的margin/padding值不同解决方案：共通css里头部加上 * {margin: 0; padding: 0;}2，块级元素设置display: inline-block;时在某些浏览器两个元素之间会有小间隙解决方案：可以在父元素样式里加上font-size:0;然后子元素加上各自的font-size设置；或者可以使用float布局3，设置的高度小于浏览器默认高度时显示不正常解决方案：设置样式
2020-06-30 20:34:06
1056
原创 VUE基础知识点
学习vue，顺手记录下的基础点笔记。一定要有随手保存代码的习惯，除非你的开发工具设置了自动保存。1. 组件使用组件定义时名称为驼峰，例如HelloWorld，但在html里使用时用小写字母横杆连接，hello-world自定义的组件在single-file components(.vue文件)/string template/jsx中使用时采用自闭合单标签形式，但是在html中使用时，要采用双标签，自闭合的单标签在默认情况下根本不管用。例如：<app/><hello-wor
2020-06-30 20:19:28
201
原创 html5常用的语义化标签
HTML5新出的一些语义化标签，使用语义化标签，可以根据标签就能知道它充当的角色，而且有利于SEO。常用的语义标签：<header>文档或某区域的头部区域</header><nav>文档的主导航</nav><article>一篇文章</article><main>文档的主体部分</main><aside>非主体部分，例如侧边栏广告</aside><section>
2020-05-21 01:53:29
276
原创 promise的理解和使用
es6中出现的promise可以用来处理异步请求。promise、MutationObserver属于微服务，setTimeout、setInterval、requestAnimationFrame、整段的script属于宏服务。new Promise创建promise并添加回调，串联方式new Promise((resolve, reject) => { setTimeout(function () { var i = Math.random(); if
2020-05-21 01:44:09
273
原创 关于cookie、session、sessionStorage、localStorage各自的特点和使用方法
因为HTTP协议是一种无状态协议，每一次HTTP请求都是独立的，不受它之前和之后的请求的影响，所以比如登录信息，这次请求带着登录的信息，下次请求不知道有没有登录，无法追踪上次的请求，所以如果没有别的手段只能每次传很多参数。cookie和session，可以与服务器交互通信的。Cookie:cookie保存在浏览器端，单个数据大小不超过4KB，是服务器发送到客户端的特殊信息，保存成字符串类型以文本的方式保存在客户端，会随着每次HTTP请求头request header发送到服务器端。如果不在浏览器中设置
2020-05-19 03:11:51
781
原创 Math常用的属性方法
Math对象是JS内置的对象。常用属性：Math.E 返回算术常量e，即自然对数的底数（或称为基数），约等于2.718Math.PI 返回圆周率，约等于3.14159常用方法：Math.abs(x) 返回x的绝对值Math.ceil(x) 对x进行向上取整Math.floor(x) 对x进行向下取整特例：因为js浮点数存储精度丢失的原因，9.54*100 = 953.9999999999999，所以Math.floor(9.54*100) = 953;Math.round(x) 把x四舍五
2020-05-18 03:41:11
325
原创 js浮点数计算失精原理
js中的数字都是双精度的浮点数，在进行计算时，计算机会把十进制数转换成64位二进制，这个过程可能会导致精度丢失。计算机存储是按照IEEE754标准来把64位分成3个区域十进制浮点数转换成二进制，然后转换成指数格式，由于尾数部分只能保留52位，第53位0舍1入，所以截取52位导致精度丢失。以0.1和0.5为例，0.1损失精度，0.5不损失精度0.1转换成二进制：0.0001100110011001100110011001100110011001100110011001100110011001100
2020-05-18 03:00:14
1015
原创 es8/es9新特性
es8(es2017)新增特性一览async、await异步解决方案Object.entries()Object.values()Object.getOwnPropertyDescriptors()函数参数列表和调用中的尾逗号**字符串填充padStart(目标长度[,填充字符])、padEnd()**不改变原值，默认填充空格，目标长度小于原字符串长度时，返回原字符串var a = '123';console.log(a.padStart(4, 'a')); // a
2020-05-10 23:52:04
375
原创 前台实时获取数据
实现网站实时通信· 四种方式，第二三四种方式需要服务器端做操作的写计时器进行Ajax轮询// 每秒调用一次http请求setInterval(function () { var xhr = new XMLHttpRequest(); xhr.open('POST', 'url', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(); xhr.onreadys
2020-05-10 23:44:08
1842
原创 ajax请求发送/接收/终止：原生js、jQuery、常用状态码
原生js中的Ajax请求// 1.创建XMLHttpRequest对象,也就是创建一个异步调用对象.var xmlHttp = new XMLHttpRequest();// 2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及是否异步请求.// get方式传参直接拼在url后url?param1=1¶m2=2xmlHttp.open("post", "url", true);// 3.post请求下需要配置请求头信息xmlHttp.setRequestHeade
2020-05-10 23:39:20
648
原创 善用try-catch块
日常工作中，对于有可能报错的代码块，一定要用上try-catch，不然报错位置开始后续的脚步将不再执行，从而导致前端画面显示异常，给客户带来非常不好的使用体验。使用结构try { // 可能报错的代码块} catch (ex) { // 异常处理 console.log(ex);}// 其他处理...
2020-04-28 23:58:54
287
原创 数组互相赋值内存的变化
好多同学在工作中会遇到关于数组赋值的问题，比如循环数组a去操作a的值，却发现b的值也被修改了，很困惑，不明白为什么，下面大概讲一下我的理解，希望能够对大家有所帮助。// 声明a，给a赋初始值，这个时候会在内存中给a分配一段空间，内容是a的值对应的内存空间的指针var a = [ { key: 2, value: '1' }];// 声明b，把a赋值给b，这个时候会在内存中给b...
2020-04-28 21:14:44
561
1
原创 前端基础点
script的defer属性：当<script defer></script>时，script的内容会在Dom加载完后再执行。注：只在IE有效++a是先增一后赋值，a++是先赋值后增一var a = 1; var b = a++; console.log(a + '--' + b); // 结果：2--1var a = 1; var b = ++...
2020-04-27 23:52:48
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人