- 博客(22)
- 收藏
- 关注
原创 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
60
原创 关于javascript中的this默认绑定以及如何修改
文章目录this默认绑定先总结:再分别举例:改变this绑定call(),apply(),bind()使用以及区别this默认绑定先总结:有明确调用方时:多数情况下,方法中的this总是绑定方法的调用方;没有明确调用方时: 在全局环境调用时是全局对象(浏览器中是window对象); 严格模式下没有调用方,方法里访问this就是undefined箭头函数: 箭头函数内部的this是方法定义时就确定的,也就是说这个this跟箭头函数外部的this上下文一致再分别举例:
2020-11-13 18:01:41
234
原创 vuex学习笔记
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。需调用 Vue.use(Vuex)是一个全局的单例模式:整个应用只有一个store实例;与视图之间相互独立进行维护;状态是响应式的;引用官网:“你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更
2020-10-24 20:47:45
96
原创 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
1282
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
269
原创 响应式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
533
原创 值类型和引用类型,以及区分方式
值类型:数值(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
182
原创 http协议1.x/2.x区别
http2的新特性:1.二进制帧层:客户端和服务器端传输数据时把数据分成帧,然后两端进行二进制编码和解码。优势:所有的通信都建立在一个TCP连接上,可以传递大量的双向流通的流,每个流都有独一无二的标志和优先级,每个消息都是逻辑上的请求和相应消息,由一个或者多个帧组成,来自不同流的帧可以通过帧头的标志来关联和组装起来2.请求和响应的多路复用:允许客户端和服务端把HTTP消息分解成独立的帧,交错传输,然后在另一端组装。优势:交错的多个并行的请求,而不需要阻塞,使用一个连接传递所有的并行的请求和响应,移除
2020-06-30 20:48:52
1192
原创 常见浏览器兼容性问题和解决方案
常见的浏览器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
1095
原创 VUE基础知识点
学习vue,顺手记录下的基础点笔记。一定要有随手保存代码的习惯,除非你的开发工具设置了自动保存。1. 组件使用组件定义时名称为驼峰,例如HelloWorld,但在html里使用时用小写字母横杆连接,hello-world自定义的组件在single-file components(.vue文件)/string template/jsx中使用时采用自闭合单标签形式,但是在html中使用时,要采用双标签,自闭合的单标签在默认情况下根本不管用。例如:<app/><hello-wor
2020-06-30 20:19:28
224
原创 html5常用的语义化标签
HTML5新出的一些语义化标签,使用语义化标签,可以根据标签就能知道它充当的角色,而且有利于SEO。常用的语义标签:<header>文档或某区域的头部区域</header><nav>文档的主导航</nav><article>一篇文章</article><main>文档的主体部分</main><aside>非主体部分,例如侧边栏广告</aside><section>
2020-05-21 01:53:29
285
原创 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
293
原创 关于cookie、session、sessionStorage、localStorage各自的特点和使用方法
因为HTTP协议是一种无状态协议,每一次HTTP请求都是独立的,不受它之前和之后的请求的影响,所以比如登录信息,这次请求带着登录的信息,下次请求不知道有没有登录,无法追踪上次的请求,所以如果没有别的手段只能每次传很多参数。cookie和session,可以与服务器交互通信的。Cookie:cookie保存在浏览器端,单个数据大小不超过4KB,是服务器发送到客户端的特殊信息,保存成字符串类型以文本的方式保存在客户端,会随着每次HTTP请求头request header发送到服务器端。如果不在浏览器中设置
2020-05-19 03:11:51
839
原创 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
370
原创 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
1065
原创 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
394
原创 前台实时获取数据
实现网站实时通信· 四种方式,第二三四种方式需要服务器端做操作的写计时器进行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
1886
原创 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
667
原创 善用try-catch块
日常工作中,对于有可能报错的代码块,一定要用上try-catch,不然报错位置开始后续的脚步将不再执行,从而导致前端画面显示异常,给客户带来非常不好的使用体验。使用结构try { // 可能报错的代码块} catch (ex) { // 异常处理 console.log(ex);}// 其他处理...
2020-04-28 23:58:54
296
原创 数组互相赋值内存的变化
好多同学在工作中会遇到关于数组赋值的问题,比如循环数组a去操作a的值,却发现b的值也被修改了,很困惑,不明白为什么,下面大概讲一下我的理解,希望能够对大家有所帮助。// 声明a,给a赋初始值,这个时候会在内存中给a分配一段空间,内容是a的值对应的内存空间的指针var a = [ { key: 2, value: '1' }];// 声明b,把a赋值给b,这个时候会在内存中给b...
2020-04-28 21:14:44
602
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
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人