JavaScript笔记
代码的浪漫
这个作者很懒,什么都没留下…
展开
-
JS的多种设计模式
一、单例模式 从定义来看,一个类只有一个实例。即一个构造函数只能有一个实例,无论new多少次,都是这一个实例。 单例模式保证一个类仅有一个实例,并提供全局访问。 function VirtualDom(name, age) { this.name = name, this.age = age } VirtualDom.getInstance = (function(){ let instance;原创 2022-05-06 14:00:12 · 1155 阅读 · 0 评论 -
深拷贝和浅拷贝
浅拷贝: 如果是数组,可以使用数组的一些方法实现:slice(),concat() // 浅拷贝 是原始对象的第一层属性的精准拷贝 let obj = { name: 'admin', age: 18, foo: { id: 10001 } }; function shallowCopy(src) { const dist = {}; for (let prop in src) { if (src.hasOwnProp原创 2022-05-06 14:00:25 · 245 阅读 · 0 评论 -
JS的事件流和事件委托
事件流 HTML 中与 javascript 交互是通过事件驱动来实现的,例如鼠标点击事件 onclick、页面的滚动事件 onscroll 等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。 事件流:事件流描述的是从页面中接收事件的顺序,DOM2 级 事件流包括下面几个阶段: 事件捕获阶段 事件冒泡阶段 addEventListener:addEventListener 是 DOM2 级事件新增的指 定事件处理程序的操作,这个原创 2022-04-26 14:17:53 · 148 阅读 · 0 评论 -
Ajax 如何使用
Ajax 如何使用 一个完整的 AJAX 请求包括五个步骤: 1、创建 XMLHTTPRequest 对象 2、使用 open 方法创建 http 请求,并设置请求地址 xhr.open(get/post,url,async,true(异步),false(同步)) 经常使用前三个参数 3、设置发送的数据,用 send 发送请求 4、注册事件(给 ajax 设置事件) 5、获取响应并更新页面 function Api ({url, method = 'GET', header = {}, callback原创 2022-04-26 13:58:00 · 2514 阅读 · 0 评论 -
JavaScript实现继承
面向对象三大特征——封装、继承、多态 封装:通过修饰符对其成员访问权限进行限制。 其中修饰符指外部、父子本类 public;本类、子类 protected;私有 private。 继承:一个类(子类、派生类)继承了其另一个类(父类)。 多态:对象多种形态。 接下来要解析的是JavaScript实现继承的多种方式。 方式一 function Person() { this.name = '王' } function Parent() { this.na原创 2022-04-26 13:20:17 · 1023 阅读 · 0 评论 -
原生JS的基础算法之冒泡排序、选择排序、快速排序及二分查找
原生JS的基础算法 冒泡排序 思路及步骤: 1、比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。 2、针对所有的元素重复以上的步骤,除了最后一个。 3、持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。 //方式一 //从前往后走进行比较 let arr = [12, 4, 35, 36, 1, 54, 20]; for (let原创 2022-04-26 10:47:13 · 283 阅读 · 0 评论