![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
js
ygx_work
好好学习,天天向上
展开
-
笔记 前端需要了解的attribute和property的区别
定义Property:属性,所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型,对大小写敏感,自定义的property不会出现在html代码中,只存在js中。Attribute原创 2020-05-24 16:26:51 · 928 阅读 · 0 评论 -
笔记 前端需要了解的用js去除字符串空格
正则去除所有空格::str = str.replace(/\s*/g,"")去除两头空格::str = str.replace(/^\s*|\s*$/g,"")去除左空格: str = str.replace( /^\s*/, “”)去除右空格: str = str.replace(/(\s*$)/g, "")str.trim(str)局限性:无法去除中间的空格var str = " xiao ming ";var str2 = str.trim();console.log(st原创 2020-05-24 16:23:16 · 267 阅读 · 0 评论 -
笔记 前端需要了解的JavaScript 与 HTML 之间交互的事件模型分为几个阶段
捕获阶段:在事件冒泡的模型中,捕获阶段不会响应任何事件;目标阶段:目标阶段就是指事件响应到触发事件的最底层元素上;冒泡阶段:冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层(根节点),事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层;...原创 2020-05-21 20:31:04 · 80 阅读 · 0 评论 -
js中阻止事件冒泡和默认事件
使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。防止冒泡和捕获:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true取消默认事件:w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;...原创 2020-05-17 17:45:41 · 118 阅读 · 0 评论 -
笔记 前端需要了解的ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。(异步无刷新)优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离缺点:ajax不支持浏览器back按钮。安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。破坏了程序的异常机制。不容易调试。AJAX的工作原理:创建ajax对象(XMLHttpReq原创 2020-05-17 17:43:21 · 201 阅读 · 0 评论 -
js中添加、移除、移动、复制、创建和查找节点
创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的原创 2020-05-17 17:27:07 · 217 阅读 · 0 评论 -
js中new 的原理
在调用 new 的过程中会发生以上四件事情:新生成了一个对象链接到原型绑定 this返回新对象代码实现newfunction create() { let obj = {} let Con = [].shift.call(arguments) obj.__proto__ = Con.prototype let result = Con.apply(obj, arguments) return result instanceof Object ? result : obj原创 2020-05-17 16:08:35 · 172 阅读 · 0 评论 -
js中的异步编程
并发(concurrency)和并行(parallelism)区别并发是宏观概念,我分别有任务 A 和任务 B,在一段时间内通过任务间的切换完成了这两个任务,这种情况就可以称之为并发。并行是微观概念,假设 CPU 中存在两个核心,那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。回调函数(Callback)回调函数有一个致命的弱点,就是容易写出回调地狱(Callback hell)ajax(url, () => { // 处理逻辑 ajax(url1,原创 2020-05-17 15:07:43 · 113 阅读 · 0 评论 -
js中的map, filter, reduce
mapmap 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后放入到新的数组中。 let arr = [1,2,3] let newArr = arr.map(item => item + 1) console.log(newArr)//[2,3,4]另外 map 的回调函数接受三个参数,分别是当前索引元素,索引,原数组。filterfilter 的作用也是生成一个新数组,在遍历数组的时候将返回值为 true 的元素放入新数组,我们可以利用这个函数删除一些不原创 2020-05-17 14:31:02 · 164 阅读 · 0 评论 -
js中的class继承
这里只提供部分代码用于展示,它与普通的继承概念是一样的。//class的继承 class Plane{ constructor(x,y) { this.x = x; this.y = y; this.move = function () { console.log('移...原创 2020-04-16 16:26:33 · 546 阅读 · 0 评论 -
js中的原型继承
组合继承组合继承是最常用的继承方式。 function Parent(value) { this.val = value } Parent.prototype.getValue = function() {//在Parent上建一个getVlaue的方法 console.log(this.val) } function Child(value) { Parent.call(this, value) } Chi原创 2020-05-17 13:50:20 · 155 阅读 · 0 评论 -
笔记 前端需要了解的设计模式
设计模式设计模式总的来说是一个抽象的概念,前人通过无数次的实践总结出的一套写代码的方式,通过这种方式写的代码可以让别人更加容易阅读、维护以及复用。工厂模式class Man { constructor(name) { this.name = name } alertName() { alert(this.name) }}class Factory { ...原创 2020-05-03 17:05:51 · 162 阅读 · 1 评论 -
笔记 前端需要了解的监控小知识
监控前端监控一般分为三种,分别为页面埋点、性能监控以及异常监控页面埋点页面埋点应该是大家最常写的监控了,一般起码会监控以下几个数据:PV / UV;停留时长;流量来源;用户交互实现思路大致可以分为两种,分别为手写埋点和无埋点的方式。性能监控对于性能监控来说,我们可以直接使用浏览器自带的 Performance API 来实现这个功能。对于性能监控来说,其实我们只需要调用 perfo...原创 2020-05-03 15:50:08 · 160 阅读 · 0 评论 -
Promise的作用及手写Promise
Promise的作用Promise 翻译过来就是承诺的意思,这个承诺会在未来有一个确切的答复,并且该承诺有三种状态,分别是: 等待中(pending);完成了 (resolved);拒绝了(rejected)这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了,也就是说一旦状态变为 resolved 后,就不能再次改变当我们在构造 Promise 的时候,构造函数内部的代码是立即执行的...原创 2020-04-30 14:45:44 · 251 阅读 · 0 评论 -
手写 call、apply 及 bind 函数
实现 call Function.prototype.myCall = function(context) {//首先context为可选参数,如果不传,上下文默认为window; if(typeof this !== 'function'){ throw new TypeError('Error'); } contex...原创 2020-04-30 15:13:26 · 144 阅读 · 0 评论 -
js中使用call、apply 及 bind改变this指向
首先我们引用一段代码,较为直观的展示三者的区别 function allPlane(src,x,y,speed,blood) {//所有的飞机模板 this.src = src; this.x = x; this.y = y; this.speed = speed; this.blood = blood; ...原创 2020-04-16 16:24:24 · 85 阅读 · 0 评论 -
js中的深复制与浅复制
二者的区别深复制只复制对象的值,在复制后指向不同的地址,但两个对象的值相同浅复制复制的是对象的地址,在复制后指向同一个地址,两个对象的地址与值都相同浅复制 let a = {name:'abc'}; let b = a; console.log(a);//{name: "abc"} console.log(b);//{name: "abc"}如果改变b的n...原创 2020-04-16 16:03:43 · 145 阅读 · 0 评论 -
js中var、let 及 const 区别
var、let 及 const使用 var 声明的变量会被提升到作用域的顶部。在全局作用域下使用 let 和 const 声明变量,变量并不会被挂载到 window 上,这一点就和 var 声明有了区别。let 和 const 优于 var 的地方不能在声明前就使用变量,存在暂时性死区总结:函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部...原创 2020-04-16 15:39:40 · 64 阅读 · 0 评论 -
js函数作用域及变量声明提前
作用域函数的作用域指的是在{}内所执行的方法。 function foo() { var a = 1;//这个a的作用域在foo中 function foo2() { var a = 2;//这个a的作用域在foo2中 console.log(a)//2 } foo2() ...原创 2020-04-16 15:33:55 · 163 阅读 · 0 评论 -
js对象的操作方法
关于对象的操作方法主要有三个:in 判断这个对象里面有没有某个属性,hasOwnproperty 判断对象有没有某个属性和方法,通过构造函数创建的属性和方法instanceof 判断该对象是不是通过这个构造函数创造出来的 function foo() { this.name = 'abc'; } foo.prototype.sex = '男'; ...原创 2020-04-16 15:12:03 · 213 阅读 · 0 评论 -
js初识原型与原型链
在了解原型之前,需要对构造函数有一个简单的理解。 function plane() {//飞机的构造函数 this.move = function () { console.log('移动') } } let p1 = new plane();//构造一个飞机实例1 p1.move();//调用飞机的move方...原创 2020-04-16 14:59:48 · 103 阅读 · 0 评论 -
js中的this指向与箭头函数中的this指向
普通this指向 function foo() { console.log(this)//window console.log(this.a)//123 } var a = 123 foo()对于直接调用 foo 来说,不管 foo 函数被放在了什么地方,this 一定是 window function foo() { ...原创 2020-04-16 14:12:08 · 174 阅读 · 0 评论 -
js中typeof 与 instanceof 之间的比较
typeoftypeof 是一个一元运算,放在一个运算数之前,这个运算数可以是任意的基本数据类型,而它的返回值是该运算数所对应的基本数据类型的字符串。这也就是说typeof其实就是判断参数是什么类型的实例,就一个参数,返回值一般只能是如下几个结果:number、string、boolean、object、function、undefined。 var number = 123; ...原创 2020-04-16 10:56:45 · 127 阅读 · 0 评论 -
js四则运算(+,-,*,/)
四则运算符 ( + - * / ) var a = 10; var b = 5; console.log(a+b);//15 console.log(a-b);//5 console.log(a*b);//50 console.log(a/b);//2 var c = '2' console.log(a+c);//102 co...原创 2020-04-16 10:23:12 · 1044 阅读 · 0 评论 -
js数据类型,原始类型和对象类型的区别与类型转换
原始(Primitive)类型(6种)boolean、null、undefined、number、string、symbol其中symbol为es6新增的数据类型原始类型与对象类型(Object)的区别原始类型存储的是值,对象类型存储的是地址(指针)例如: var a = 123; var b = {'b':123}; console.log(a) con...原创 2020-04-16 10:15:26 · 325 阅读 · 0 评论