![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
日积一步
每天保持一小步,十天就是一大步!
展开
-
监听H5的横竖屏
真正想要H5强制竖屏,兼容性上是比较难处理的,然而可以通过别的方式达到类似的效果;1、检测H5横竖屏2、检测到横屏时,给出提示,并隐藏页面元素(引导用户竖屏)话不多说,直接上代码window.addEventListener("resize", function (event) { clearTimeout(this.dialogTimeout) this.dialogTimeout = setTimeout( () =>{ if原创 2022-05-20 18:13:31 · 2143 阅读 · 0 评论 -
es5环境添加es6的伪代码
/** * 以下函数仅为es5环境提供更方便的es6代码 * 如果你的项目中使用了构建工具,如webpack,那么谨慎引入本js文件,因为有可能会覆盖掉es6原始代码。 * 作者:沙漠码农 * Email:huaicheng151201@163.com * Time: 2021/03/01 */(function(){ var ErrorMsg = function(msg){ throw new Error(msg); } var isFunction = funct.原创 2021-05-12 11:08:59 · 179 阅读 · 0 评论 -
js运算四舍五入,保留小数位,小数位不足自动补0,统一个各浏览器的差异。
function tofixed(value, bit){ var pow = Math.pow(10, bit) var arr = (value*pow).toString().split(".") var result = "" if(arr[1] && arr[1].split('')[0] > 4){ result = (Number(arr[0]) + 1) / pow }else{ result = arr.原创 2021-05-12 10:56:37 · 345 阅读 · 0 评论 -
手写实现Promise
function Demand (handel){ this.state = "PENDING" this.value = undefined var resolve = function(value){ this.state = 'FULFILLED' this.value = value this.then() this.finally() }.bind(this) var reject = function(value){.原创 2021-04-15 15:27:10 · 87 阅读 · 0 评论 -
简单实现vue国际化plugin,可在vue2、vue3中使用
/*** * 国际化实现!!! * huaicheng151201@163.com * 2020年11月1日 * * 参数说明 * options: * - locale: 初始化语言 * - messages: 语言配置项 * * 例如: { locale: "zh_CN", messages: { "zh_CN": { option: { .原创 2021-03-24 17:25:21 · 213 阅读 · 0 评论 -
js倒计时精准度修复interval.js
由于js单线程,导致setInterval、setTimeout不准时的结果, 往往在有些业务当中,例如抢购活动,那用户会很在意这个倒计时的表现。github仓库:https://gitee.com/dmui/set-interval引入cdn地址interval.js:https://gitee.com/dmui/set-interval/raw/master/interval.js如何注册一个倒计时任务:var interval_1 = new SetInterval(func..原创 2021-03-23 11:49:56 · 157 阅读 · 0 评论 -
快速实现拖拽,darg.js拿来即用!!!
可根据业务逻辑快速完成拖拽,拿来即用!!!github地址:https://gitee.com/dmui/darg/tree/master/引入cdn文件darg.js:https://gitee.com/dmui/darg/raw/master/darg.js如何完成拖拽注册:<style> .demo{ width: 80px; height: 80px; border-radiu..原创 2021-03-23 11:12:57 · 319 阅读 · 0 评论 -
H5监听键盘弹起收回,用法超简单!兼容Android、iOS。
引入以下代码,仅需2行代码即可监听!/** * 兼容Android、iOS各浏览器 * H5键盘监控弹出(KeyboardUp)、收起(KeyboardDown)事件定义 * auth: huaicheng151201@163.com * time: 2020.11.20 * 用法: * 与click事件的绑定用法无异,如: window.addEventListener("KeyboardUp",function() { //键盘弹起来了 },false)原创 2020-12-15 15:00:31 · 4795 阅读 · 7 评论 -
Vue 3 改动汇总
以下列出vue3中与开发关注较高的改动,欢迎补充!1、v-for 指令不再必须指定 key 值,框架会自动生成。2、<template v-for=“...” >...</template>格式已支持指定 key 值。且将被渲染为原声的template元素。3、同一元素上 v-if 和 v-for 的优先级变更为 v-if 高于 v-for。4、v-bind="属性object" 与标签自身的属性值 合并优先级 由v-bind优先级高变更为 出现的先后顺序来判断。..原创 2020-09-23 10:54:11 · 558 阅读 · 0 评论 -
webpack4 demo
webpack.config.jsconst path = require("path");const webpack = require("webpack");const packagejson = require("./package.json");const HtmlWebpackPlugin = require('html-webpack-plugin');//引入h...原创 2019-05-22 15:39:03 · 286 阅读 · 0 评论 -
初次尝试web浏览器消息通知,并震动提示
注意的是,本地测试服务是完全可以看到消息通知的,如果线上环境,必须要求https协议,否则自动视为拒绝。通知API可能不再从不安全的来源使用。您应该考虑将应用程序切换到安全源,比如HTTPS。见https://goo.gl/rStTGz了解更多细节。js代码:;(function(window){ var _notification = function(){...原创 2019-05-22 14:33:11 · 1395 阅读 · 0 评论 -
高级之路篇二十三:this总结
总之一句话:谁调用,this就指向谁。普通函数中 构造函数中 箭头函数中 原型链上的this getter、setter中 定时器回调函数中 作为对象方法中 dom事件处理函数中 内联事件函数中 在Function构造器中1、普通函数中:非严格模式下指向全局window 严格模式下undefined2、构造函数中:指向实例对象3、箭头函数中:箭...原创 2019-05-16 11:03:10 · 229 阅读 · 0 评论 -
高级之路篇二十二:map、weakMap、set、weakSet、object、array的区别
1、mapMap对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。键值对结构。 任何值(对象或者原始值) 都可以作为一个键或一个值。 强引用存储 null会被当做undefined。 虽然NaN !== NaN , 但是map中 NaN是与NaN相等的。与object的一些对比:一个Object的键只能是字符串或者Symbols,但一个...原创 2019-05-16 10:17:31 · 758 阅读 · 0 评论 -
全面解析var、const、let的区别
作用域:变量作用域(全局变量和局部变量) 、函数作用域(函数内部的变量)作用域链:其实就是一些可访问对象的集合。比如函数执行时会产生一个活动对象,活动对象中。在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],该内部属性...原创 2019-05-11 13:50:24 · 252 阅读 · 0 评论 -
数组排序的几种方式
1、sort排序方法sort()将在原数组上对数组元素进行排序,即排序时不创建新的数组副本。如果调用方法sort()时没有使用参数,将按字母顺序(更为精确地说,是按照字符编码的顺序)对数组中的元素进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如果有必要的话),以便进行比较。如果想按照别的顺序进行排序,就必须提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序...原创 2019-05-11 11:19:52 · 15306 阅读 · 0 评论 -
如何快速随机打散一个数字数组?
随机就离不开Math.random()既然是一个数字数组,写过排序吧,有冒泡排序、sort排序等,都能排序成从小到大或从大到小的数组。那么暂且看看sort生序排列的写法:var a = [10,2,3,5,4,6,7,8,9,1];var randomSoftArr = function(arr){ arr.sort(function(a, b){ return ...原创 2019-05-11 10:32:07 · 1928 阅读 · 0 评论 -
高级之路篇十九:ES6之数组api
1、map2、for....of....3、includes4、Array.from()5、find()、findIndex()、indexOf、lastIndexOf6、Array.isArray()7、filter8、every9、some10、reduce11、reduceRight12、fill13、copyWithin...原创 2019-05-10 21:30:40 · 143 阅读 · 0 评论 -
js之变量、数据、内存篇
内存:用于存放变量、对象、常量的物理空间。js中内存空间可分为三种:栈(stack)、堆(heap)、池(一般归类于栈中)。->栈:存放变量,特点:先进后出,后进先出。例如:string、number、boolean、null、undefined->堆:存放复杂对象,特点:不能被直接访问,更不能直接操作堆空间,只能引用访问、操作。释放引用,会被浏览器自动垃圾回收,释放内存空间。例如...原创 2019-03-28 11:28:38 · 891 阅读 · 0 评论 -
高级之路篇八:你真的了解console吗!
作为调试信息打印语句console.log()每个前端都比较清楚吧。。。对,不就是打印数据到控制台吗,没错!可是油田我遇到了一个变态的面试问题,一下被震住了,问console.log(2/3); 打印结果是多少?不就是一个无限循环的除不尽的数吗,我想了想不会这么简单吧,顿时就有点杀马特了。先吐槽下这个面试官,真作。。。想知道结果自行输出看下结果。具体原因自行百度。 今天要说的是conso...原创 2019-04-26 15:46:40 · 300 阅读 · 0 评论 -
高级之路篇九:一目了然Cookie、session和localStorage、以及sessionStorage之间的区别
cookie session sessionStorage localStorage 储存位置 如果设置了过期时间,存在电脑本地硬盘上; 如果没有设置过期时间,存于内存中 服务器上 浏览器 浏览器 大小限制 4k ---- >5M >5M 保存方式 字符串 对象 字符串 ...原创 2019-04-26 16:28:20 · 172 阅读 · 0 评论 -
高级之路篇十一:前端看http协议以及http协议上能做的事情
http协议其实就是超文本传输协议。http协议是建立在tcp/ip协议之上的应用层协议,主要包括三个部分,状态行,头部信息,消息主体。对应一个http请求就是:请求行,请求头,请求体。通信流程:用户输入url地址,发送一个request ----- >从离自己最近的ip地址开始向外寻找(这就是外国网站比较满的原因之一),找到服务器 ------>服务器处理完成后...原创 2019-04-28 11:53:22 · 320 阅读 · 0 评论 -
高级之路篇一:从浏览器渲染开始
前言:了解并理解浏览器的渲染原理流程,对我们的性能优化有着至关重要的作用。至于渲染引擎,我们大可忽略,知道这个概念就行。流程如下:1、下载html文本文件,生成dom树。2、下载css文件,解析CSS生成CSSOM规则树。3、将DOM树与CSSOM规则树合并在一起生成渲染树。4、遍历渲染树开始布局,计算每个节点的位置大小信息。5、将渲染树每个节点 逐个 绘制到屏幕。...原创 2019-04-24 15:31:33 · 215 阅读 · 0 评论 -
高级之路篇十二:全面解析web安全及防御方法
web安全常见的8大板块:老生常谈的XSS跨站脚本攻击 警惕iframe带来的风险 别被点击劫持了 错误的内容推断 防火防盗防猪队友:不安全的第三方依赖包 用了HTTPS也可能掉坑里 本地存储数据泄露 缺失静态资源完整性校验XSS跨站脚本攻击1.绕过XSS-Filter,利用<>标签注入Html/JavaScript代码;2.利用HTML标签的属...原创 2019-04-29 11:39:59 · 4797 阅读 · 0 评论 -
高级之路篇十三:构造函数、原型、原型链以及如何实现继承
构造函数,原型,实例每创建一个函数,该函数就会自动带有一个prototype属性。该属性是个指针,指向了一个对象,我们称之为原型对象。三者之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。原型...原创 2019-04-29 16:03:19 · 336 阅读 · 0 评论 -
高级之路篇六:Object.defineproperty、Proxy与Reflect
1、Object.defineproperty 属于es5范畴。该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。Object.defineProperty(obj, prop, descriptor) obj:要在其上定义属性的对象。 prop:要定义或修改的属性的名称。 descriptor:将被定义或修改...原创 2019-04-25 15:45:20 · 444 阅读 · 0 评论 -
高级之路篇十五:ES6之箭头函数
MDN定义:箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。与普通函数的区别:1、表面上看,写法更简洁2、没有this,不会创建自己的this,它只会从自己的作用域链的上一层继承this,无论是否严格模式。3、没有arguments,箭...原创 2019-05-09 09:53:03 · 250 阅读 · 0 评论 -
高级之路篇二十一:全面解析js一等公民function
初识function:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。1、具名函数var fun = function(){....} 此种方式变量会提升,函数体留原地。function fun(){....} 此种方式变量函数体都会提升至最顶端,位于变量声明提前之前。2、匿名函数setTimeout(function(){.......原创 2019-05-14 15:11:41 · 227 阅读 · 0 评论 -
高级之路篇十四:Ajax
function Ajax(){ var xmlHttp = null; var createXmlHttp = function(){ if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); if(xmlHttp.overrideMimeType)...原创 2019-05-07 10:36:18 · 183 阅读 · 0 评论 -
高级之路篇十六:web存储模仿微信小程序的缓存api
模仿微信小程序数据缓存的api,对h5本地存储的封装,支持sessionStorage与localStoragefunction Storage(){ this.getDataType = function(data){ var result = '', type = typeof data; if( type ...原创 2019-05-09 20:43:39 · 260 阅读 · 0 评论 -
高级之路篇十七:javascript异步机制
传送门:彻底弄懂 JavaScript 执行机制、javascript执行机制javascript是一门单线程的语言,本身不可异步。但是js的宿主(比如浏览器、node)却是多线程的。宿主环境通过某种方式(事件驱动,下文会讲)使得js具备了异步的属性。Event Loop 是javascript的执行机制。浏览器来看js是单线程语言,浏览器只分配给js一个主线程,用来...原创 2019-05-10 17:46:32 · 188 阅读 · 0 评论 -
高级之路篇十八:setTimeout、Promise、async、await
setTimeoutsetTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。var timerId = setTimeout(func|code, delay)clearTimeout(timerId);timerId = null;注意点:1、定时器回调函数的this指向;2、延迟执行时间受...原创 2019-05-10 20:55:51 · 423 阅读 · 0 评论