前端基础总结之JS(中)

JS类的实现及实例化

在JavaScript中可以使用function关键字来定义一个“类”,在函数内通过this指针引用的变量或者方法都会成为类的成员。

1,构造函数

一个指明了对象类型的函数,构造函数来创建对象(class),然后通过new这个关键字来实例化一个对象

(1)当解释器遇到new操作符时便创建一个空对象;

(2)开始运行class这个函数,并将其中的this指针都指向这个新建的对象;

(3)因为当给对象不存在的属性赋值时,解释器就会为对象创建该属性,这样函数执行就是初始化这个对象的过程,即实现构造函数的作用;

(4)当函数执行完后,new操作符就返回初始化后的对象。

缺点:

(1)将所有的初始化语句、成员定义都放到一起,代码逻辑不够清晰,不易实现复杂的功能。

(2)每创建一个类的实例,都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建

2,原型对象(prototype)

一种为类添加成员的机制:prototype对象。当new一个function时,该对象的成员将自动赋给所创建的对象,所有实例共享相同的方法和属性。、

(1)创建一个新的对象,并让this指针指向它;

(2)将函数的prototype对象的所有成员都赋给这个新对象;

(3)执行函数体,对这个对象进行初始化操作;

(4)返回(1)中创建的对象。

3,静态成员

静态成员属于一个类的成员,它可以通过“类名.静态成员名”的方式访问。在JavaScript中,可以给一个函数对象直接添加成员来实现静态成员,因为函数也是一个对象,所以对象的相关操作,对函数同样适用。

自定义事件

Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加、删除事件。

创建一个事件管理器。handlers是一个存储事件处理函数的对象。

addHandler:是添加事件的方法,该方法接收两个参数,一个是要添加的事件的类型,一个是这个事件的回调函数名。调用的时候会首先遍历handles这个对象,看看这个类型的方法是否已经存在,如果已经存在则添加到该数组,如果不存在则先创建一个数组然后添加。

fire方法:是执行handlers这个对象里面的某个类型的每一个方法。

removeHandler:是相应的删除函数的方法。

观察者模式:

这是一种创建松散耦合代码的技术。它定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

基本原理:事件队列,即将监听程序存到一个数组中,再自定函数执行时,将添加监听数组中每个函数执行一遍。

定义一个对象专门用于存储自定义事件,定义一个方法用于注册监听,还有一个方法需要我们主动触发这个注册的监听程序(因为不像click等事件可以被浏览器监听捕获,浏览器无法识别我们自己定义的东西)。

jQuery的fire函数

定义和用法

callbacks.fire() 函数用于传入指定的参数调用所有的回调。

此方法返回一个回调对象到它绑定的回调列表。

callbacks.fire( arguments )

polyfill

polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库,在不支持这些标准 API 的浏览器中模拟它们。

例如,geolocation(地理位置)polyfill 可以在 navigator 对象上添加全局的 geolocation 对象,还能添加 getCurrentPosition 函数以及“坐标”回调对象,

所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API,所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发,

一旦对这些 API 的支持变成绝对大多数,则可以方便地去掉 polyfill,无需做任何额外工作。

Ajax

创建ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

特点

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

原理:

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:

a、向服务器提交数据的类型,即post还是get。

b、请求的url地址和传递的参数。

c、传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。

ajax请求的时候get 和post方式的区别

1、GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。

2、GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

3、在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

若符合下列任一情况,则用POST方法:

* 请求的结果有持续性的副作用,例如,数据库内添加新的数据行。

* 若使用GET方法,则表单上收集的数据可能让URL过长。

* 要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况,则用GET方法:

* 请求是为了查找资源,HTML表单数据仅用来帮助搜索。

* 请求结果无持续性的副作用。

* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

XMLHttpRequest这个对象的属性

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText 从服务器进程返回数据的字符串形式。

responseXML 从服务器进程返回的DOM兼容的文档数据对象。

status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

status Text 伴随状态码的字符串信息

readyState 对象状态值

0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

1 (初始化) 对象已建立,尚未调用send方法

2 (发送数据) send方法已调用,但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

异步加载和延迟加载defer和async

defer并行加载js文件,会按照页面上script标签的顺序执行

async并行加载js文件,下载完成立即执行,不会按照页面上script标签的顺序执行

1.异步加载的方案: 动态插入script标签

2.通过ajax去获取js代码,然后通过eval执行

3.script标签上添加defer或者async属性

4.创建并插入iframe,让它异步执行js

5.延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。

js 设计模式:

单例模式

单例模式的核心是确保只有一个实例,并且提供全局访问。

特点:

满足“单一职责原则” : 使用代理模式,不在构造函数中判断是否已经创建过该单例;

满足惰性原则

订阅发布模式

将许多对象弱耦合起来,当一个对象的状态发生变化时,所有订阅了该变化的对象都会收到通知。DOM事件是典型的订阅发布模式,同时我们还可以自定义事件

策略模式

定义一个个可以相互替换的算法,并且把他们封装起来。

特点:

符合开放-封闭原则 : 要修改使用的算法时不用深入函数内部进行修改,只需修改策略类;

将算法的实现与使用分离开,提高算法复用性;

通过组合、委托和多态避免多重条件选择语句;

应用:动画实现不同的缓动效果。

代理模式

代理就像一个经纪人,当用户不方便直接访问某个对象或者需要对访问进行一些过滤/加工时,可以通过代理来进行对象访问。代理会对请求进行一些处理,然后再将请求传递给本体。

一般分为保护代理和虚拟代理:

保护代理负责过滤掉一些请求;

虚拟代理则是将一些花销比较大的操作延迟到真正他的时候再去创建,例如new一个对象。

特点:

保证对象符合单一职责原则;

应用:

图片预加载, 合并http请求, 惰性加载, 缓存代理(避免重复计算,可以写一个通用的缓存对象(其实就是一个闭包),将高阶函数作为参数传入)。

迭代器模式

迭代器可以将对于一个聚合对象内部元素的访问与业务逻辑分离开。

一般分为内部迭代器和外部迭代器:

内部迭代器只需一次初始调用,不需要关心迭代器的内部实现;

外部迭代器需要显式地请求下一个元素,因此可以手工控制迭代过程和顺序,例如调用iterator.next();

无论是哪种迭代器,只要聚合对象有length属性并且可以通过下标访问,那么就可以被迭代。因此类数组对象及字面量对象(用for in)都可以。绝大部分语言都内置了迭代器。

应用:

可以通过添加终止条件来中断迭代:在callback函数中判断,如果return值为false,则通过break跳出迭代循环。

由此可以设计根据浏览器类型创建的返回对象,按优先级一个个迭代。

命令模式

可以解决请求发送者和请求接受者之间的耦合关系。实际上,我们只需要调用command对象中的execute方法就行,他会自动调用命令接收者对应的命令。

应用:

可实现命令的撤销和重做,只需纪录一个oldState或者使用一个缓存来存放历史命令;

可实现命令队列,将command对象压入堆栈,只需依次调用他们的execute函数,由此可实现宏命令;

组合模式

组合模式将对象组合成树形结构,以表示层级结构。借助于对象的多态性,它使得用户可以统一地对待组合对象(单个对象的组合)和单个对象。

应用:

可实现宏命令,只需要调用根结点的execute,程序会自动遍历整棵树并依次执行各中间节点和叶结点的execute函数。重点是,叶结点与中间结点有统一借口。

可用来模拟文件和文件夹层级结构

JS产生对象的方法:

工厂模式:

主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

工厂模式解决了重复实例化的问题 ,但还有一个问题,那就是识别问题,因为根本无法 搞清楚他们到底是哪个对象的实例。

构造函数模式:

使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题,该模式与工厂模式的不同之处在于:

1.构造函数方法没有显示的创建对象 (new Object());

2.直接将属性和方法赋值给 this 对象;

3.没有 renturn 语句。

原型模式

  我们创建的每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。

混合模式:(原型模式 + 构造函数模式)

混合模式中构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性,但同时又共享着方法,最大限度的节省了内存。另外这种模式还支持传递初始参数。优点甚多。这种模式在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。

5,动态原型模式

6,寄生构造函数模式

7,稳妥构造函数模式

javascript继承的6种方法

1,原型链继承

2,借用构造函数继承

3,组合继承(原型+借用构造)

4,原型式继承

5,寄生式继承

6,寄生组合式继承

严格模式主要有以下限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用with语句
  • 不能对只读属性赋值,否则报错
  • 不能使用前缀0表示八进制数,否则报错
  • 不能删除不可删除的属性,否则报错
  • 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • eval和arguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
  • 增加了保留字(比如protected、static和interface)

    设立”严格模式”的目的,主要有以下几个:

  1. 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  2. 消除代码运行的一些不安全之处,保证代码运行的安全;
  3. 提高编译器效率,增加运行速度;
  4. 为未来新版本的Javascript做好铺垫。

一个页面从输入URL到页面加载显示完成的过程

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。

5、握手成功后,浏览器向服务器发送http请求,请求数据包。

6、服务器处理收到的请求,将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容,浏览器渲染,解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

猜你喜欢

转载自blog.csdn.net/qq_30422457/article/details/80973988
今日推荐