- 博客(47)
- 收藏
- 关注
RSS订阅原创 重写hasPubProperty
检测是否是私有属性：hasOwnPropertyfor…in… 优先遍历数字属性，而且按照从小到大遍历，再去遍历其他的属性； 无法遍历Symbol的私有属性；【内置类是不可枚举的】获取私有属性：Object.keys(obj) Object.getOwnPropertyNames(obj)获取Symbols：Object.getOwnPropertySymbols(obj)共有或私有属性均可以判断：in判断是否是共有属性： <script> Object..
2021-01-25 21:22:40
181
原创 插入排序和快速排序
插入排序时间复杂度为O(n^2) <script> Array.prototype.insert=function insert(){ let _this=this, handle=[]; handle.push(_this[0]); for(let i=1;i<_this.length;i++){ let A=_this[i]; .
2021-01-17 10:46:49
317
1
原创 数组去重的N种方法
不需要开辟新的数组空间，可以实现去重<script> var arr=[1,2,3,4,5,1,3,4,6,7]; for(let i=0;i<arr.length-1;i++){ let item=arr[i], ary=arr.slice(i+1); if(ary.indexOf(item)>-1){ arr.splice(i,1).
2021-01-17 10:00:54
206
原创 数组冒泡排序
时间复杂度是O(n^2)（最坏的）最好的是O(n) <script> function swap(arr,i,j){ let temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; return arr; } Array.prototype.bubble=function bubble(){ .
2021-01-15 16:15:08
100
原创 reactHook_useState、useCallback
import React,{useCallback, useState} from 'react';import ReactDOM from 'react-dom';class Counter extends React.Component{ state={ count:10 } add=()=>{ this.setState({ count:this.state.count+1 }) }...
2020-11-02 20:10:39
640
原创 react中的事件（this指向）
vue中的事件是@click，React中是onClick.import React from 'react';class Counter extends React.Component{ state={ count:10 } // 需要传参数时写如下： fn(e,n){ // 是一个公有的属性 console.log(this,e,n); } // 不需要传参数时，写如下的箭头函数 fn2=(.
2020-11-02 10:02:13
215
原创 react中jsx语法
搭建react：（1）全局安装npm i create-react-app -g创建项目：create-react-app 项目名（2）直接npx create-react-app 项目名安装时如果出现错误：Unexpected end of JSON input while parsing near ‘…t-app-2.1.8.tgz","fil’使用命令：npm cache clean --forcereact中src下的index.js相当于vue项目中main.js想在项目中使用sc.
2020-11-01 16:41:01
126
原创 父子祖孙组件通信
可以使用vue serve和vue build命令对单个*.vue文件进行快速原型开发，但需要安装一个全局的扩展：npm install -g @vue/cli-service-global支持.vue后缀文件（快速原型开发）开发环境下：vue serve App.vue生产环境下：vue build App.vue组件的通信入口文件：<template> <div> <Parent></Parent> <.
2020-10-21 09:52:36
249
原创 全局组件&局部组件&嵌套组件
全局组件：component<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>.
2020-10-20 16:22:22
434
原创 watch&computed&animate
watch中使用到的属性必须在data中声明，可以有异步操作。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head&.
2020-10-20 09:56:11
108
原创 vue2.0响应式原理的应用
监测属性的变化function observe(target){ if(typeof target !=="object" || target==null){ return target; } //对对象中的每一个属性进行监视 for(let key in target){ defineReactive(target,key,target[key]); }}function defineReactive(target,key,.
2020-10-19 21:17:50
137
原创 vue指令及自定义指令(全局&局部)
指令v-text : 默认渲染成文本v-html ：渲染成htmlv-once：只渲染一次，再更改时直接从缓存中获取v-for：数组，字符串 对象 想遍历谁，就在谁上面加v-forv-if v-else v-else-if：操作DOM元素 一旦条件不成立，DOM元素不存在。v-show：更改样式,显示/隐藏v-if：不要跟v-for在同一个标签中使用 v-for优先级高于v-if....
2020-10-19 18:35:00
200
原创 webpack基础配置及使用
1.第一步：进入文件夹，初始化形成package.json，使用命令：npm init -y。第二步：安装webpack，形成node_modules和package-lock.json文件，使用命令：npm install webpack webpack-cli -D（其中-D是指在开发环境）第三步（这种一般不用了）：0配置将文件进行打包，使用命令：npx webpack（要求node版本必须是5.2.0以上）可以进行打包是因为可以找到node_modules下的bin下的命令webpack，
2020-09-23 16:15:16
221
原创 ModalPlugin插件封装
1.调用一次插件，创建一套新的插件结构，而关闭的时候，就是把这套结构移除掉。title[string] 标题template[string] 自定义的内容或者模板（基于ES6的模板字符串，拼接更丰富的内容结构）button[array] 自定义按钮（组）[{text:‘确定’,click:[callback],…}]modal[boolean] 控制遮罩层是否显示 默认是truedrag[boolean] 是否允许拖拽，默认是trueopened[boolean] 弹出框显示或者隐藏，默认是tr
2020-09-21 16:26:03
244
原创 Canvas动态创建时钟
效果图：实现的代码： <style> canvas{ margin: 20px auto; display: block; } </style></head><body> <canvas id="canvas" width="500" height="500"></canvas></body><scr
2020-09-19 19:15:38
172
原创 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
115
原创 js之正则表达式及案例
正则表达式创建的方式：（1）字面量创建方式（两个斜杠之间包起来的，都是用来描述规则的元字符）let reg1=/\d+/;（2）构造函数模式创建 两个参数：元字符字符串、修饰符字符串let reg2=new RegExp("\d+");正则表达式由两部分组成：元字符、修饰符。（1）常用的元字符：量词原字符——设置出现的次数，如下：*-零到多次±一次到多次？-零次或者一次{n}-出现n次{n,}-出现n到多次{n,m}-出现n到m次特殊元字符：单个或者组合在一起代表特殊的含义.
2020-09-16 16:49:53
1079
原创 基于单例模式构建发布订阅库
基于单例模式设计模式是一种设计思想：用来有效管理代码的思想。经典设计模式：发布订阅 <style> #box{ position:relative; left:0; top:0; width:100px; height:100px; background-color: hotpink; } </s
2020-09-15 15:06:36
124
原创 浏览器底层渲染机制和性能优化
客户端从服务器获取到需要渲染的源代码后：[浏览器开辟一个“GUI渲染线程”，自上而下解析代码，最后绘制出对应的页面](1)关于CSS 的资源的加载：——遇到的是<style>"内嵌样式"=>"同步”交给GUI渲染线程解析；——遇到的是<link>“外链样式”=>“异步” 开辟一个新的“HTTP网络请求线程”（注意：同一个源下，根据不同的浏览器，最多只允许同时开辟4~7个HTTP线程 “HTTP的并发数”），不等待资源信息请求回来，GUI渲染线程继续向下渲染，GU.
2020-09-14 21:56:00
276
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
106
原创 事件和事件绑定
一.DOM什么是事件：事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行。什么是事件绑定：给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法。鼠标事件click：点击事件（PC：频繁点击N次，触发N次点击事件）单击事件（移动端：30ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端有300ms延迟）dbclick：双击事件contextmenu：鼠标右键点击触发mouse
2020-09-14 11:18:25
548
原创 同步异步编程
async/await：ES7中新提供的语法糖async修饰一个函数：保证函数返回的是一个promise实例。async：和then很相似，函数执行不报错，返回成功的promise实例，报错返回的是失败的。return的值或者报错的原因就是promise实例的结果。如果return的是一个新的promise实例，则新实例的结果影响返回promise的结果。 <script> async function func(){ return {}.
2020-09-12 11:27:31
121
原创 “玩转”Promise
Promise是ES6新增的内置类：承诺模式，主要用来规划异步编程的。回调函数：把一个函数作为值，传递给另外一个函数，在另外一个函数执行的时候，再把传递进来的函数进行处理。 <script> arr.forEach(function(item,index){ //传递的匿名函数就是回调函数 });//================================ Array.prototype.forEac.
2020-09-10 13:09:57
574
原创 基础数据结构之队列和栈
十进制转二进制 <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
84
原创 数组类型检测的底层机制
数据类型检测（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
117
原创 js中数组对象的深浅拷贝
浅克隆（1）对象的浅克隆： <script> //=>浅克隆：只复制对象或者数组的第一级内容//=>深克隆：克隆后数组的每一级都和原始数组没有关联//那么请说出，浅克隆都怎么去实现，如何实现深度克隆 let obj = { a: 100, b: [10, 20, 30], c: { x: 10 }, d: /^\d+$/ }; .
2020-09-05 15:56:08
240
原创 js之数据类型等面试题（二）
考察push方法的运行 <script> Array.prototype.push=function push(value){ //1.把value放到末尾 this[this.length]=value; //2.长度累加 this.length++; }; let arr=[10,20]; arr.push(30);//=============.
2020-09-05 11:51:47
165
原创 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
311
原创 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
1405
原创 JS中的多种继承
JS中第一种继承方案：原型继承（让子类的原型等于父类的实例即可）原型继承：（1）父类中私有的和公有的属性方法，最后变为子类实例公有的（2）和其他不同，原型继承并会把父类的属性方法“拷贝”给子类，而是让子类实例基于__proto__原型链找到自己定义的属性和方法（ “指向/查找”方法） <script> function Parent(){ this.x=100; } Parent.prototype.getX=function getX().
2020-09-01 11:19:17
142
原创 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
124
原创 原型扩充方法及函数角色
写在内置类原型上的方法，实例调用的时候：“实例.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
174
原创 js之面向对象（原型链、重定向、重写new)
一.原型原型链所有的类都是函数数据类型的（包含内置类）所有的函数都天生自带一个属性：prototype原型prototype的属性值默认是一个对象数据类型值【堆】在对象中存储的是供实例能调用的公共属性和方法并且在类的原型对象上，默认有一个属性constructor构造函数，属性值是当前类本身所有对象数据类型值也天生自带一个属性：__proto__原型链__proto__属性的属性值：当前实例所属类的原型prototype.实例.proto===类.prototype都哪些值是对象数据类型的
2020-08-31 10:09:40
415
原创 闭包应用之函数防抖和节流
函数的防抖：对于频繁触发某个操作，我们只识别一次 <script> //debounce参数如下： // @params //func[function]：最后要触发执行的函数 //wait[number]：“频繁”设定的界限 //immediate[boolean]:默认多次操作，我们识别的是最后一次，但是immediate=true,让其识别第一次 //@r.
2020-08-26 16:27:59
226
原创 闭包应用之compose组合
（1）实现的代码如下： <script> const add1=x=>x+1; const mul3=x=>x*3; const div2=x=>x/2; function compose(...funcs){ return function operate(x){ if(funcs.length===0) return x; ...
2020-08-26 09:34:19
170
原创 闭包应用之高阶编程函数
惰性函数特点：懒、能执行一次的绝对不会执行第二次 <script> //如此编写，每一次执行方法都需要处理兼容：其实这种操作是没有必要的，第一次执行已经知道兼容情况了，后期在执行方法（浏览器也没有刷新，也没有换浏览器）兼容校验是没必要处理的 function getCss(element,attr){ if(window.getComputedStyle){ return window.getC.
2020-08-25 18:54:43
117
原创 闭包应用之单例设计模式
模块化/单例设计模式（1）<script> // 在没有对象和函数的情况下，我们编写代码，经常会出现“全局变量污染” // let name="zh"; // let age=22; // let sex='男'; // let name='lly'; // let age=20; // let sex='女';</script>（2） //为了防止“全局.
2020-08-25 12:11:37
313
原创 面试题（套娃题）
<script> function fun(n,o){ console.log(o); return { fun: function(m){ return fun(m,n); } }; } var c=fun(0).fun(1); c.fun(2); c.fun(3);综上图所示，答案是undefined 0 1 1..
2020-08-24 22:50:28
266
原创 匿名函数具名化
函数具名化（设置了名字）：设置的名字只能在函数内部使用，外部是无法使用的（基于这种方式代替严格模式下不兼容的arguments.callee，并以此实现递归算法【自己调用自己】）在函数内部去修改这个名字值，默认是不能修改的，代表的依然是函数本身（除非这个函数名字在函数中被重新声明过，重新声明后，一起都按照重新生命的为主）<script> (function fn(){ console.log(fn); //第一种 函数本身 fn=10; .
2020-08-24 17:25:29
285
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人