![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
JS
·Q·
努力努力
展开
-
获取对象属性的方法和注意点
// 每一个属性绑定一个depfunctiondefineReactive(data,key,val=data[key]){// 内部使用了闭包letdep = newDep();Object.defineProperty(data,key,{enumerable:false,configurable:true,get(){// dep.depend()console.log('访问');return val; },set(newVal){if(val===newVal){ret原创 2021-12-29 01:49:51 · 640 阅读 · 0 评论 -
继承的几种实现方式
继承实现原创 2021-12-20 21:32:35 · 203 阅读 · 0 评论 -
MockJs常见用法总结
属性值是字符串 Stringconsole.log( Mock.mock({ 'data1|1-4': '陈学辉', *//随机重复1-4次* 'data2|3': '好帅', *//固定重置3次* }));属性值是数字 Numberconsole.log( Mock.mock({ 'number1|+1': 100, *//整数,自动加1并且初始值为100* 'number2|1-100': 12, *//整数,1-10原创 2021-05-06 17:59:25 · 942 阅读 · 0 评论 -
Unicode编码和Base64编码
JavaScript定义了 6个全局方法用于 Unicode字符串的编码和解码,说明如表所示。 方法 说明 escape() 使用转义序列替换某些字符来对字符串进行编码 unescape() 对使用escape()编码的字符串进行解码 encodeURI() 通过转义某些字符对 URI进行编码 decodeURI() 对使用encodeURI()方法编码的字符串进行解码 encodeURIComponent() 通过某些转义字符...原创 2021-04-26 23:11:08 · 1600 阅读 · 0 评论 -
手写事件总线
事件总线可以解决所有组件之间进行通信的问题function EventBus() { // 对象存储事件{ event1:[handle1,handle2],event2:[handle1,handle2]} // 监听事件时 接受参数 先判断是否有这个事件 没有的话为这个事件创建一个set用于存储事件函数 // 然后将事件函数添加到set中 //用于存储所有事件 const listeners = {}; retur原创 2021-04-22 13:27:22 · 106 阅读 · 0 评论 -
数组扁平化的几种方法
// 数组扁平化let arr = [1, 2, [2, 3]];console.log(arr.flat(Infinity));arr.toString().split(",").join(",");//利用join将其转化为字符串 再分割console.log(arr.toString().split(",").map((el) => { return Number(el);}))//利用join将其转化为字符串 在分割console.log(arr.join(".原创 2021-04-25 12:28:02 · 78 阅读 · 0 评论 -
函数柯里化
利用闭包实现柯里化curry:柯里化用户固定某个函数的前面的参数,得到一个新的函数,新的函数被调用时,会接受剩余的参数步骤传入原来函数与要固定的参数 返回一个新的函数(当前函数已有固定的参数)调用该函数在新的函数中传入剩下的参数判断当前所有参数是否等于原来参数 大于等于返回函数执行结果 小于继续进行柯里化返回一个新的函数重复步骤 代码实现/** * * @param { * } func 要柯里化的函数 * @param ...原创 2021-04-12 19:51:55 · 91 阅读 · 0 评论 -
Attr和Prop的区别
通用属性操作Attr//自定义属性所有属性都可以添加到标签上,自定义的也可以//$('div').attr('name')//只获取调用的第一个元素上面的属性//$('div').attr({name:'rbq',age:'18'})//添加属性特性 Prop 使用Prop自定义的不能添加到标签上但是在dom对象上 已存在的可以设置在标签上 但不能删除 删除...原创 2021-04-12 13:44:59 · 144 阅读 · 0 评论 -
JS加载时间线
(1)创建 Document 对象,开始解析 web 页面。解析 HTML 元素和他们的文本内容 后添加 Element 对象和 Text 节点到文档中。这个阶段 document.readyState ='loading'。 (2)遇到 link 外部 css,创建线程,进行异步加载,并继续解析文档。 (3)遇到 script 外部 js,并且没有设置 async、defer,浏览器同步加载,并阻塞, 等待 js 加载完成并执行该脚本,然后继续解析文档。 (4)遇到 script 外部 js.原创 2021-04-04 15:35:09 · 99 阅读 · 0 评论 -
js强制渲染
js要操作一个一个dom的动画时 要在每一个状态后强制渲染一次 否则会直接到最终的状态没有动画原创 2021-04-04 15:15:57 · 1052 阅读 · 1 评论 -
本地化存储
cookie为什么使用cookie? http: 是上下文无协议 使用cookie可以在多个页面都显示登录,在别的域也可以显示登录到,一起关联cookie set-cookie 服务器设置cookiecookie特性 1.不可以跨域,一级域名和二级域名之间可以跨域 通过Domin设置一级域名 2.存储在浏览器,同一个浏览器中可以访问 3.每个浏览器中的cookie有数量和大小限制 1.数量在50个左右 超过删除 2.大小在4k左右 4.cookie的存原创 2021-03-25 16:45:26 · 378 阅读 · 0 评论 -
ES6知识点
ES6最全知识总结原创 2021-03-18 10:48:59 · 602 阅读 · 0 评论 -
手动封装Bind函数
Function.prototype.newBind = function(target,...args){ var _this = this; var temp = function(){}; var f = function (){ var argu = [].slice.call(arguments,0); return _this.apply(this.constructor== _this ? this:(target || window),args..原创 2021-03-16 20:52:12 · 104 阅读 · 0 评论 -
Object.keys() 和 Object.getOwnPropertyNames() 的区别
Object.keys() 和 Object.getOwnPropertyNames() 的区别大部分情况下Object.getOwnPropertyNames()与Object.keys(obj)的功能是一样的,我们一般也是用来获取一个对象中所有属性,例如const obj = { property1: 1, property2: 2,};console.log(Object.keys(obj));console.log(Object.getOwnPropertyNames(ob原创 2021-03-14 18:35:45 · 979 阅读 · 2 评论 -
手动封装一个Ajax请求
手动封装一个jQuery版的Ajax请求var $ajax = function(obj) { var url = obj.url; var type = obj.type; var dataType = obj.dataType; var targetProtocol = ""; //目标接口的协议 var targetHost = ""; //目标接口的host,host是包涵域名和端口的 // 如果url不包含http 则为相对路径 一定同源 if (url.indexOf('ht原创 2021-03-10 19:39:41 · 183 阅读 · 0 评论 -
PageX、clientX、screenX、offsetX、layerX的区别
一.PageX和clientXPageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化.二.screenXscreenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议三.offsetX和layerXoffsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode原创 2021-03-08 17:36:46 · 7689 阅读 · 0 评论 -
在原型上扩展方法的优点
答案:节省内存占用没有 prototype 会有什么问题?考虑一下我们在 js 中如何创建类的实例对象?先定义一个方法 Person,然后使用 new 关键词调用这个方法,我们先创建一个实例对象 freeman,然后再创建一个实例对象 newton,如果使用这样的方法在 js 中创建这两个对象,这两个对象时都分别创建了自己的方法,只是名字相同而已(仅此而已)。考虑一个场景,如果我们需要创建一堆这样的实例的时候,我们每个实例都在重复创建这些方法,你会发现内存在持续增长。尤其是对于 virtual DO原创 2021-03-01 23:04:08 · 187 阅读 · 1 评论 -
DOM中的尺寸
查看滚动条的滚动距离 标准方法:window.pageXOffset window.pageYOffset 浏览器中document.documentElement.scrollLeft 和 document.body.scrollLeft 一个有另一个就没有 document.body.scrollLeft(和 window.pageXOffset 效果一样) document.body.scrollTop(和 window.pageYOffse...原创 2021-02-23 21:31:58 · 82 阅读 · 0 评论 -
块级作用域中的函数声明
{ console.log(window.a,a) //全局 undefined 局部 fn a = 2; console.log(window.a,a) //全局 undefined 局部 2 a = 3; console.log(window.a,a) //全局 undefined 局部 2 function a(){} //执行完之后全局变为3 函数声明之后将全局变量赋值为函数声明之前的局部变量值 .原创 2021-02-19 11:19:12 · 1080 阅读 · 1 评论 -
DOM
目录节点树DOM选择器1.document 代表整个文档2.Id选择器 3.Class选择器4.标签选择器 5.Name选择器 (渲染表单数据时常用)6.css选择器 DOM结构树 getElementById方法定义在Document.prototype上,即Element节点上不能使用。 getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使...原创 2021-02-18 17:20:29 · 163 阅读 · 2 评论 -
js运算符
原创 2021-02-05 19:36:12 · 84 阅读 · 0 评论 -
js封装一个Fixed定位
利用窗体事件onscroll,滚动条滚动时,将div的margin-top设为当前滚动条的滚动距离.<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { position: absolute; background-color: #00FFFF; height: 100px;原创 2021-02-05 18:58:03 · 358 阅读 · 1 评论 -
JS预编译过程
JS运行过程语法分析 预编译 解释执行JS预编译过程(在函数执行的前一刻进行)创建一个执行期上下文AO 找形参和变量声名,将变量名和形参作为AO的属性,并赋值为undefined 将实参与形参相统一 在函数体内找函数声明(匿名函数和函数表达式不参与),值赋予函数体(不考虑函数体内有什么东西)eg1:function a(a) { var a = 123; function a() {} var b = function() {} func原创 2021-02-05 00:22:19 · 371 阅读 · 0 评论 -
JS封装Tools
封装针对不同浏览器的一些函数,和一些比较常用的方法,提高浏览器兼容性原创 2021-02-01 21:38:33 · 159 阅读 · 0 评论 -
浅克隆和深克隆
浅克隆和深克隆的实现var tem = "[object Array]"; // 区分对象和数组 function test() { if (typeof(arguments[0]) == "object") { if (Object.prototype.toString.call(arguments[0]) == tem) { console.log("数组"); } else { console.log("对象"); }原创 2021-01-29 19:57:04 · 2640 阅读 · 3 评论