JavaScript进阶学习笔记

最新推荐文章于 2021-06-23 18:23:40 发布

夜夜夜夜千机

最新推荐文章于 2021-06-23 18:23:40 发布

阅读量299

点赞数 2

分类专栏：前端笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_39385607/article/details/109458982

版权

前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

@[TOC]JavaScript进阶学习笔记

一、JavaScript的特点及组成

1.1 JavaScript的特点

解释执行
整个网页是从上往下一行一行代码解释执行的，浏览器负责解析代码，将代码解释成CPU能够读懂的01命令，即解释一行，执行一行。
编译执行，一次性把代码编译成可执行的代码，然后再一行一行执行。
这里，编译执行的速度快。
灵活动态特性
可以随意给对象增加属性和方法。
头等函数
函数在JS中是一等公民。
执行环境
宿主环境(即浏览器)。

1.2 JavaScript的组成

ECMAScript -语法规范
- 变量、数据类型、类型转换、操作符
- 流程控制语句：判断、循环语句
- 数组、函数、作用域、预解析
- 对象、属性、方法、简单类型在复杂类型的区别
- 内置对象：Math、Date、Array，基本包装类型String、 Number、Boolean
BOM
- onload页面加载事件，window顶级对象
- 定时器
- location、history
DOM
- 获取页面元素，注册事件
- 属性操作，样式操作
- 节点属性，节点层级
- 动态创建元素
- 事件：注册事件的方式、事件的三个阶段、事件对象

1.3 JavaScript执行过程

JS运行分为两个阶段：

预解析
- 全局预解析（所有变量和函数声明都会提前：同名的函数和变量函数的优先级高）
- 函数内部预解析（所有的变量、函数和形参都会参与预解析
  - 函数
  - 形参
  - 普通变量
执行
先预解析全局作用域，然后执行全局作用域的代码。
在执行全局代码的过程中遇到函数调用就会先进行函数预解析，然后再执行函数内代码。

二、面向对象的程序设计

2.1 原型模式

2.1.1 对象的原型模式

原有的构造函数，每构造一个新的对象，浏览器都会指定一块新的物理内存的物理地址给该对象。

原型模式：我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
好处：可以让所有对象实例共享它所包含的属性和方法。
换句话说，不必在构造函数中定义对象实例的信息，而是将这些信息直接添加到原型对象中。

function Person(){
}
Person.prototype.name="Nich";
Person.prototype.age=18;
Person.prototype.sayName = function(){
	alert(this.name);
};

var p1 = new Person();
p1.sayName();	//"Nich"

var p2 = new Person();
p2.sayName();	//"Nich"
alert(p1.age == p2.age);	//true，说明指向的物理地址是一致的。其中，__proto__等同于prototype。

2.1.2 构造函数的原型模式

function Person(name, age){
	this.name=name;
	this.age=age;
}

Person.prototype.sayName = function(){
	console.log("大家好，我是" + this.name);
}

var p1 = new Person('Nich','18');
var p2 = new Person('ykb','68');

p1.sayName();	//"大家好，我是Nich"
console.dir(p1);	//dir输出对象p1

注意：当构造函数存在一个与原型函数同名的函数时，会优先显示构造函数里的函数。
即，当调用对象的属性或者方法时，先去找对象本身的属性和方法，如果对象没有该属性或方法，此时再去调用原型中的属性或者方法；如果两者都找不到，报错。

在原型对象中有一个属性 constructor 构造函数
其作用：记录了创建该对象的构造函数。

2.2 继承

许多语言都支持两种继承：接口继承和实现继承。
接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承，故ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。

2.2.1 原型链

基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

三、函数表达式

3.1 闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。

3.2 DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的结点树，允许开发人员添加、移除和修改页面的某一部分。

四、事件

JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

4.1 事件类型

Web浏览器中可能发生的事件有很多类型。不同的事件类型具有不同的信息，而“DOM3级事件”规定了以下几类事件。

UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或失去焦点时触发；
鼠标事件，当用户获得鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

4.2 内存和性能

影响页面整体运行性能的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须从事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。事实上，从如何处理好事件处理程序的角度出发，还是有一些方法能够提升性能的。

4.2.1 事件委托

对“事件处理程序过多“问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个单击的元素分别添加事件处理程序：

<ul id = "myLinks">
	<li id = "goSomewhere">Go Somewhere</li>
	<li id = "doSomething">Do Something</li>
	<li id = "sayHi">Say hi</li>
</ul>

五、表单脚本

List item

5.1 表单的基础知识

5.1.1 提交表单

5.1.2 重置表单

5.1.3 表单字段

5.2 文本框脚本

5.2.1 选择文本

5.2.2 过滤输入

5.2.3 自动切换焦点

5.2.4 HTMLS约束验证API

5.3 选择框脚本

5.3.1 选择选项

5.3.2 添加选项

5.3.3 移除选项

5.3.4 移动和重排选项

5.4 表单序列化

5.5 富文本编辑

5.5.1 使用contenteditable属性

5.5.2 操作富文本

5.5.3 富文本选区

5.5.4 表单与富文本

六、使用Canvas绘图

List item

6.1 基本用法

七、JSON

List item

7.1 语法

7.1.1 简单值

7.1.2 对象

7.1.3 数组

7.2 解析与序列化

7.2.1 JSON对象

7.2.2 序列化选项

7.2.3 解析选项

八、Ajax与Comet

List item

8.1 XMLHttpRequest对象

8.2 XMLHttpRequest2级

8.3 跨源资源共享

8.4 其他跨域技术

8.4.1 图像Ping

8.4.2 JSONP

8.4.3 Comet

8.4.4 服务器发送事件

8.4.5 Web Sockets

九、离线应用与客户端存储

List item

9.1 离线检测

9.2 应用缓存

9.3 数据存储

9.3.1 Cookie

9.3.2 IE用户数据

夜夜夜夜千机

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录