js
文章平均质量分 89
小白Hard
这个作者很懒,什么都没留下…
展开
-
js实现拖拽及细节
<style> *{ margin: 0; padding: 0; } html,body{ height:400%; background:-webkit-linear-gradient(top left,lightblue,orange); } .box{ position:fixed...原创 2020-09-17 11:10:37 · 101 阅读 · 0 评论 -
基于单例模式构建发布订阅库
基于单例模式设计模式是一种设计思想:用来有效管理代码的思想。经典设计模式:发布订阅 <style> #box{ position:relative; left:0; top:0; width:100px; height:100px; background-color: hotpink; } </s原创 2020-09-15 15:06:36 · 109 阅读 · 0 评论 -
浏览器底层渲染机制和性能优化
客户端从服务器获取到需要渲染的源代码后:[浏览器开辟一个“GUI渲染线程”,自上而下解析代码,最后绘制出对应的页面](1)关于CSS 的资源的加载:——遇到的是<style>"内嵌样式"=>"同步”交给GUI渲染线程解析;——遇到的是<link>“外链样式”=>“异步” 开辟一个新的“HTTP网络请求线程”(注意:同一个源下,根据不同的浏览器,最多只允许同时开辟4~7个HTTP线程 “HTTP的并发数”),不等待资源信息请求回来,GUI渲染线程继续向下渲染,GU.原创 2020-09-14 21:56:00 · 253 阅读 · 1 评论 -
基于事件的放大镜案例
<style> .magnifier{ margin: 20px auto; width: 500px; display: flex; justify-content: flex-start; align-items: flex-start; } .magnifier .abbre{ positi...原创 2020-09-14 11:42:37 · 91 阅读 · 0 评论 -
事件和事件绑定
一.DOM什么是事件:事件是浏览器赋予元素的默认行为,也可以理解为事件是天生具备的,不论我们是否为其绑定方法,当某些行为触发的时候,相关的事件都会被触发执行。什么是事件绑定:给元素默认的事件行为绑定方法,这样可以在行为触发的时候,执行这个方法。鼠标事件click:点击事件(PC:频繁点击N次,触发N次点击事件)单击事件(移动端:30ms内没有发生第二次点击操作,算作单击事件行为,所以click在移动端有300ms延迟)dbclick:双击事件contextmenu:鼠标右键点击触发mouse原创 2020-09-14 11:18:25 · 518 阅读 · 0 评论 -
基础数据结构之队列和栈
十进制转二进制 <script> //基于Number.prototype.toString([radix]) let num=18279; console.log(num.toString(2)); </script>栈——十进制转二进制 <script> class Stack{ container=[]; enter(v.原创 2020-09-07 14:59:03 · 77 阅读 · 0 评论 -
数组类型检测的底层机制
数据类型检测(1)typeof 检测数据类型的运算符返回结果是一个字符串,字符串中包含了对应的数据类型" number/string/boolean/undefined/symbol/bigint/object/function" =>typeof typeof xxx 结果都是"string"存在的BUGtypeof的原理:按照计算机底层存储的二进制结果进行检测的,对象都是以000…开始的。typeof null “object” =>null的二进制存储值000。所.原创 2020-09-06 09:37:16 · 107 阅读 · 0 评论 -
js中数组对象的深浅拷贝
浅克隆(1)对象的浅克隆: <script> //=>浅克隆:只复制对象或者数组的第一级内容//=>深克隆:克隆后数组的每一级都和原始数组没有关联//那么请说出,浅克隆都怎么去实现,如何实现深度克隆 let obj = { a: 100, b: [10, 20, 30], c: { x: 10 }, d: /^\d+$/ }; .原创 2020-09-05 15:56:08 · 221 阅读 · 0 评论 -
queryURLParams
网址的拆分及获取 <script> function queryURLParams(url){ let askIndex=url.indexOf('?'), polIndex=url.lastIndexOf('#'), askText='', polText=''; polIndex===-1?polIndex=url.len.原创 2020-09-03 10:36:56 · 298 阅读 · 0 评论 -
js之时间字符串格式化
(1) <script> let time='2020/9/2 15:7:0'; let arr=time.split(' '); let arrLeft=arr[0].split('/'); let arrRight=arr[1].split(':'); arrLeft=arrLeft.map(function(item){ return item.length<2?'0...原创 2020-09-02 16:41:21 · 1379 阅读 · 0 评论 -
js中this的情况
关于JS中THIS的处理情况汇总(1)给当前元素的某个事件行为绑定方法,当事件行为触发,方法被执行,方法中的this一般都是当前操作的元素。排除:IE6~8中,基于attachEvent进行的DOM2事件绑定,方法中的this是window document.body.onclick=function (){ console.log(this); //body }; document.body.addEventListener.原创 2020-08-31 17:23:50 · 112 阅读 · 0 评论 -
原型扩充方法及函数角色
写在内置类原型上的方法,实例调用的时候:“实例.xxx()",方法中的this是要操作的实例。向内置类原型扩充方法:把一些公共的方法扩展到内置类的原型上,调用起来非常的方便。 <script> Array.prototype.unique=function unique(){ if(!Array.isArray(this)) throw new TypeError('确保操作的是一个数组!'); return Array.from(n.原创 2020-08-31 14:40:10 · 159 阅读 · 0 评论 -
匿名函数具名化
函数具名化(设置了名字):设置的名字只能在函数内部使用,外部是无法使用的(基于这种方式代替严格模式下不兼容的arguments.callee,并以此实现递归算法【自己调用自己】)在函数内部去修改这个名字值,默认是不能修改的,代表的依然是函数本身(除非这个函数名字在函数中被重新声明过,重新声明后,一起都按照重新生命的为主)<script> (function fn(){ console.log(fn); //第一种 函数本身 fn=10; .原创 2020-08-24 17:25:29 · 260 阅读 · 0 评论 -
数组去重(双for、对象键值对、Set)
双for循环(1)解决数组塌陷的问题<script> let arr=[1,2,2,3,4,5,1,2,4,5,2,4]; // i<arr.length-1最后一项不需要再拿出来了,因为每一次都是和当前项后面进行比较,而最后一项后面没有任何的东西,所以也就没有必要再拿出来比较了 for(let i=0;i<arr.length-1;i++){ // 每一次拿出来要和后面依次比较的那一项 let item=arr[i];.原创 2020-08-21 10:20:48 · 462 阅读 · 0 评论 -
js数组之常用方法
基于进行比较的时候,左右两边数据类型不一致,隐式转换规则。NaNNaN //false NaN和任何值(包含自己本身)都不相等InfinityInfinity //true Infinity只和自己相等,和其他值都不想等Symbol(1)Symbol(1) //falsenullundefined //true 他们两个等号比较是相等的,三个等号比较是不相等的,除此之外,他们和任何值相比较都不相等。*对象字符串* 对象转化为字符串除上述规则外,其余的都.原创 2020-08-21 09:04:05 · 337 阅读 · 0 评论 -
js之常识-细节
JS组成的三部分:ECMAScript (ES3/ES6~9) 定义了JS的语法规范DOM(document object model) 文档对象模型,提供对应的属性和方法,可以让JS操作页面中的DOM元素。BOM(browser object model) 浏览器对象模型,提供操作浏览器的属性和方法。JS中创建变量:ES3 varES6 let / const(常量)function创建函数class 类名(首字母大写)import/require导入模块js中的注释:ctr..原创 2020-08-20 11:49:43 · 164 阅读 · 0 评论 -
选项卡的动态实现
实现的效果图:实现的代码:css:<style> *{ margin:0; padding:0; } #tabBox{ width: 500px; margin: 20px auto; } #tabBox .tab{ position: relative; top:原创 2020-08-19 10:35:32 · 155 阅读 · 0 评论