- 博客(28)
- 收藏
- 关注
RSS订阅
原创 移动端根元素html的font-size设置
移动端根元素html的font-size设置px, ptjs动态计算根元素font-sizepx, pt移动端的适配需要用rem来做适配开发（rem是依据根元素 html的font-size ）我们在开发的时候，进行调试页面的宽度一般是375PT，这个pt指的是逻辑像素或逻辑分辨率，而一般移动端的设计稿给的是750（有时是640）宽的设计图，这个750指的是px，也就是物理像素。px和pt一般是一个倍数关系，一般是pt是px的2倍，个别设备也不一样需要去查比如：这个Reader就是倍数关系js动
2021-03-29 12:55:54
1174
原创 JS Proxy
JS ProxyProxy是一个代理，当我们对某个数据值进行操作的时候，进行拦截处理，监听操作。let a = new Proxy(target, handler);他有两个参数：第一个传入的参数是我们要对其拦截的那个对象（这个对象可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。第二个参数是一个对象，这个对象的属性是当执行一个操作时定义代理的行为的函数，（就是拦截的回调函数）示例：let test = { 'name':'ni' } let a
2021-03-24 16:13:11
997
转载 div垂直居中
div垂直居中方案一：使用定位，父元素relative，子元素也设置定位absolute，top设置父级的一半“50%”，然后margin-top设置自身高度一半：<style> #father { width: 1000px; height: 300px; background-color: skyblue; position: relative;} #son { height: 100p
2021-03-23 16:47:43
139
原创 VUE对数组的劫持操作
VUE对数组的劫持操作大家都知道 vue的双向绑定都是用object.defineProperty操作的，但是这个方法只能监听对对象的操作，不支持数组，所以vue对数组监听用了另一种方式，就是把数组的原型上的方法进行了更改，相当于对数组操作的方法（push，pop，shift等）进行了监听。以下是对数组方法unshift举例<div id="app"></div> <script type="text/javascript"> let state = [
2021-03-23 15:17:33
622
原创 object.defineProperty()用法
defineproperty用法概念数据描述符：存取描述符概念object.defineProperty用来定义对象的一些属性，或者修改一些已存在的属性语法糖为object.defineProperty(obj,name,desc) 这个方法需要传三个参数，obj是要修改的的对象，name是对其设置的属性名，最后一个是属性描述符一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属
2021-03-22 17:22:42
176
原创 高德GIS地图动态显示打点数据
该案例的需求为根据不同的地图层级，动态展示对应的打点（业务操作如：当地图缩放到省级单位时，显示省级的地图打点数据，当缩放到市级则显示市级对应打点数据，依次类推…一直到街道）！注意：该功能在引入高德api时还需要引入一个插件（plugin=ElasticMarker）<body> <h1 id="zoom">4</h1> <div class="" id='map'> </div></body><script
2021-03-18 17:31:07
1201
原创 d3实现曲线面积图，柱状图，天气曲线 案例
d3实现曲线面积图，柱状图本案例将曲线，曲线面积，柱状图，曲线圆点等统一做成工厂函数去方便单独一一调用（调用时，将基本的图形颜色宽度等参数传入即可） let sevenheight = '100' let sevenlineObj = { color: 'rgba(255, 191, 0, 1)', width: 1, top: 30 } let seventextObj = { fill: '#303133', size: 14, text
2020-12-15 15:52:19
389
原创 用JS判断数据类型（常见四种）
常用的js判断数据类型（number、boolean、symbol、string、object、undefined、function）方法有三种：typeof判断toString判断constructorinstanceoftypeof判断typeof判断基本类型可以（null除外，null也返回object），但是指引类型均返回object，如图：toString判断toString()是Object的原型方法，调用该方法，默认返回当前对象的[[Class]]。这是一个内部属性，其格式为[obje
2020-09-14 17:21:08
216
原创 前端SPA和SSR
前端SPA和SSRSPA是？SPA优点SPA缺点SSR是？SSR的优缺点SPA是？SPA，就是单页面应用，就是目前前端开发最常见的一种，整个网站由一个html页面构成。三大框架Angular Vue React都是SPASPA优点页面内交互响应速度快减轻服务器压力SPA缺点不利于SEO搜索引擎优化项目首屏打开的很慢，需要先下载SPA所依赖的框架包及一些公共资源SSR是？就是通过服务端去渲染页面，将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客
2020-06-02 14:10:08
1012
原创 JavaScript reduce() 方法
@[TOC](JavaScript reduce() 方法)JavaScript reduce() 方法个人理解reduce方法是一个自动循环的的api，每次循环会执行一次回调函数。reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。 var arr = [1,5,3,3,1,10] var newArr = arr.reduce(function(p
2020-05-29 17:54:14
228
原创 input file 上传图片及压缩
VUE3.0大概总结判断浏览器判断ie为某个版本鉴别PC及移动端判断浏览器判断浏览器时我们需要用到navigator.userAgentnavigator是一个对象，他包含了有关浏览器的信息userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)完整的代码为var explorer = navigator
2020-05-19 14:55:11
1627
原创 js判断浏览器及终端
js判断浏览器及终端判断浏览器判断ie为某个版本鉴别PC及移动端判断浏览器判断浏览器时我们需要用到navigator.userAgentnavigator是一个对象，他包含了有关浏览器的信息userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2...
2019-08-20 16:49:20
192
原创 table标签中如何将几个＜td＞合在一起
html中的table标签中如何将几个合在一起在td里使用colspan属性，等于几就相当于合并几个单元格
2019-07-23 15:14:23
2404
原创 ios移动端 FullScreen
ios移动端 FullScreen在开发视屏video时，我们有时需要让视频全屏播放，正常PC及移动安卓的方法为：//进入全屏function FullScreen() { var ele = document.documentElement; if (ele .requestFullscreen) { ele .requestFullscreen(); ...
2019-06-21 16:13:40
2912
1
转载 浅析前端页面渲染机制
浅析前端页面渲染机制浏览器占比浏览器基础结构浏览器内核渲染引擎及关键渲染路径（Critical Rendering Path）解析顺序构建DOM树构建CSSOM树执行JavaScript构建渲染树(render tree)渲染树与DOM树布局（Layout）或回流（reflow，relayout）流（flow）全局布局与局部布局脏位系统（dirty bit system）布局过程强制回流绘制（pa...
2019-06-20 17:12:28
134
原创 requestAnimationFrame动画简介
requestAnimationFrame动画简介与settimeout setInterval 比较兼容性特点对比css3动画requestAnimationFrame使用样例requestAnimationFrame主要用途是按帧对网页进行重绘。与settimeout setInterval 比较requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统...
2019-06-20 16:54:38
208
转载 $("#audio").play()报错 not a function
video,play事件报错<audio id="audio" src="waring.wav" preload="auto" controls loop></audio>$(’#audio’).play();报错原因：play()方法属于DOM对象方法，$(’#audio’)为jquery对象解决办法：将jquery对象转换为DOM对象首先打印jquery对象$...
2019-06-17 11:48:36
1581
原创 textarea光标初始位置
textarea光标初始位置在html里写textarea标签的时候，中间不能有空格及换行结果如下：即使换行也不能有：
2019-06-17 09:15:57
2188
转载 各浏览器对ES2015/ES6的支持情况（桌面端、移动端、以及服务器
JS - 各浏览器对ES2015/ES6的支持情况（桌面端、移动端、以及服务器）2015年6月， ES2015（即 ECMAScript 6、ES6） 正式发布。ES2015 是该语言的一个显著更新，也是自 2009年 ES5 标准确定后的第一个重大更新。ES6 提供了许多新特性，但并不是所有的浏览器都能够完美支持。好在目前各大浏览器自身也加快速度兼容 ES6 的新特性，其中对 ES6 新特性...
2019-05-31 14:43:08
1013
原创 es6的async, await使用方法及执行机制
es6的async, await使用方法及执行机制async/await其实就是promise和generator的语法糖：async function demo01() {console.log(1)return ‘demo1’;}demo01().then(function(a){console.log(a)});输出结果为1，demo1async用来表示函数是异步的，...
2019-05-22 17:13:26
752
原创 js实现搜索框的节流与防抖
js处理搜索框，节流与防抖防抖节流以下是完整示例代码：在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。防抖防抖的实现思路：每...
2019-05-21 11:21:09
11870
3
原创 原生JS实现bind方法
原生JS实现bind方法第一种方法在return function 里使用 self.call(ctx)：第二种是使用apply第三种使用call第四种也是用的apply总结以下是回的方法Function.prototype.my_bind = function(ctx){ console.log(this) //这里指向的是函数 不是window let se...
2019-05-20 09:04:15
508
原创 js事件委托，事件冒泡及捕获
js事件委托，事件冒泡及捕获事件冒泡事件捕获事件委托阻止冒泡事件冒泡事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。以下示例：创建三个div ， 给每一个div添加事件，（利用事件监听添加点击事件，第三个参数是布尔值，默认false，false是事...
2019-05-14 14:20:23
3502
1
转载 HTTP协议六种请求方法
HTTP协议六种请求方法,get,head,put,delete,postgetpostputdeleteheadOptionsgetpostputdeleteheadOptions1，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。...
2019-05-06 17:32:03
664
原创 最直白且通俗易懂的call apply bind 使用区别
最直白的call apply bind 使用区别创建一个函数，及一个空对象，同时使用call apply bind来操作改变函数内部的this指向，并给该函数传入参数创建一个函数，及一个空对象，同时使用call apply bind来操作改变函数内部的this指向，并给该函数传入参数var obj = {}function test (x, y) {console.log(x)cons...
2019-05-06 11:06:46
257
原创 解构时常犯的语法错误 Uncaught SyntaxError: Unexpected token =
解构时常犯的语法错误 Uncaught SyntaxError: Unexpected token =解决：{x, y} = { name: ‘小明’, x: 100, y: 200};// 语法错误: Uncaught SyntaxError: Unexpected token =解决：({x, y} = { name: ‘小明’, x: 100, y: 200});这是因为J...
2019-05-06 10:13:32
902
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人