前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript编程精解(二)

JavaScript编程精解(二)

作者头像
硬核项目经理
发布2019-08-07 15:36:09
8100
发布2019-08-07 15:36:09
举报
文章被收录于专栏:硬核项目经理的专栏

八、处理缺陷与错误

A.严格模式

当启用了严格模式(strict mode)后,JS就会在执行代码时变得更为严格。只需在文件或函数顶部放置字符串“use strict”就可以启用严格模式了。

B.异常

1.异常是一种当代码执行中遇到问题时,可以触发(或抛出)异常的机制,异常只是一个普通的值。触发异常类似于从函数中强制返回:异常不只跑出到当前函数中,还会跳出函数调用方,走到当前执行流初次调用函数的位置。这种方式被称为“堆栈展开(Unwinding the Stack)”。

2.异常真正强大的地方在于你可以在堆栈上设置一个“障碍物”,当异常缩减堆栈到达这个位置时会被捕获。接着你就可以对异常进行一些处理,并使得程序从异常捕获点开始继续执行。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/8.html

九、正则表达式

1.exec方法,如果无法匹配模式则返回null,否则返回一个表示匹配字符串信息的对象。字符串也有个match方法

2.字符串replace,第二个参数可以用函数

3.//gi,g表示全局,i表示不分大小写

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/9.html

十、模块

A.模块的好处

1.模块根据一些标准将程序划分为不同的代码块,每份代码都自成一个整体。

2.设计良好的模块可以提供外部代码访问所需的接口。定义良好的模块接口可以确保旧接口在模块更新后保持不变。对外提供的接口应该具有统一和内聚的特性。

B.使用函数作为命名空间

1.为了防止模块内部使用的变量会污染全局命名空间,我们将该模块包裹在函数中。

2.将命名空间函数放在一对圆括号中:如果表达式使用关键字function开头,表明这是一个函数表达式。但如果一个语句使用function开头,则将该语句看成一个需要函数名的函数声明,而非一个表达式,也就是说,我们无法在语句后面添加括号来调用该函数。

C.使用对象作为接口

对于代码量比较大的模块来说,定义一个对象,并在定义完需要导出的某些元素时,将这些元素添加到该对象的属性中。

D.与全局作用域分离

构造一个require函数,调用该函数时指定一个模块名称,该函数会装载模块文件(依赖于我们运行的平台)并返回合适的接口对象

E.将数据作为代码执行

不推荐eval,使用new Function(“参数名列表”,“函数体”)

F.接口设计

1.可预测性

2.可组合性

3.层次化接口

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/10.html

项目实战:开发编程语言

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/11.html

十二、文档对象模型

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/12.html

十三、处理事件

A.事件与DOM节点

addEventListener;removeEventListener;

B.传播

1.若段落和按扭都有事件处理器,则先执行最特殊的事件处理器(按扭的事件处理器)。也就是说事件向外传播,从触发事件的节点到其父节点,最后直到文档根节点。最后,当某个特定节点上注册的所有事件处理器按其顺序全部执行完毕后,窗口对象的事件处理器才有机会响应事件。

2.事件处理器任何时候都可以调用事件对象的stopPropagation方法,阻止事件进一步传播。

3.可以使用target属性来创建出特定类型事件的处理网络。event.target.textContent

C.默认动作

调用event.preventDefault,不执行默认的动作

D.焦点事件

focus和blur事件,不会传播!

E.脚本执行时间线

1.即使任何时候都可以触发事件,但同一文档中无法同时执行两个脚本。若一个脚本已经在运行,事件处理器和使用其他方法调度的代码会使该脚本等待执行。

2.若想放到后台进行,同时防止页面无响应,可以使用浏览器提供的Web Worker。

F.定时器

setTimeout,一定时间后执行,clearTimeout

setInterval,每隔一定时间循环执行,clearInterval

利用setTimeout可以进行事件降频

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/13.html

项目实战:平台游戏

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

十四、使用canvas绘图

A.SVG

1.可缩放矢量图形,专用于描述图形文档而非描述文字文档,保存了对于聊天挖墙脚的基本信息的描述,可以随时移动或修改图像。

B.canvas元素

1.用于绘制二维图形的“2d”与通完openGL接口绘制三维图形的“webgl”

2.filleStyle决定了图形的填充方式

3.strokeStyle和lineWidth用来控制线条的绘制方式

4.fillRect和strokeRect来绘制矩形

5.fillText和strokeText绘制文字

6.beginPath创建一个新的路径,lineTo方法画一条直线,路径画完时可以使用fill填充或stroke勾勒轮廓

7.drawImage从一张图片或另一个画面上移动像素到我们的画布上

8.translate、scale与rotate进行图形变换,一个变换的状态可以通过save来保存,通过restore来恢复

9.clearRect可以在绘制动画时,清除画布的某一部分

C.选择图像接口

1.SVG可以被用来制造可以做任意缩放而仍然清晰的图像。比单纯的HTML更加难以使用,但是更加强大。

2.画布的基于像素的方法在需要绘制大量的微小元素时会有优势,不会构建新的数据结构 而是仅仅重复的在同一个像素上绘制,使得画布在每个图形上拥有更低的消耗。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/15.html

十五、HTTP协议概述

A.XMLHttpRequest对象

B.HTTP沙箱

请求头中包含Access-Control-Allow-Origin:*告诉其他域名发送请求是没问题的

C.Promise断言

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/16.html

十六、表单和表单域

A.聚焦

在document.activeElement中的值会关联到当前聚焦的元素。通过focus和blur方法来控制聚焦

B.作为整体的表单

1.当一个域被包含在<form>元素中时,其DOM元素会有一个form属性指向form的DOM元素,<form>元素则会有一个叫作elements属性包含一个类似于数据的集合,其中包含全部的域

2.submit方法可以调用事件对象的preventDefault来禁用默认行为

C.文本域

selectionStart和selectionEnd属性包含光标和所选文字的信息。当没有选中文字时,这两个属性的值相同,表明当前光标的信息。当一部分域被选中时,这两个你属性值会不同,表明文字开始位置和结束位置

D.选择域

multiple可以多选,size用来设置同时可展示的选项,设置3显示3行,与multiple无关。<select>域有类似于数组的options属性

E.客户端保存数据

localStorage和sessionStorage,sessionStorage会在浏览器关闭时结束

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/17.html

项目实战:绘图程序

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/18.html

十七、Node.js

A.node命令

1.变量process是Node中的全局变量,提供了process.exit方法(结束进程),process.argv(获取传递给脚本的命令行参数)

2.与浏览器相关的功能,如document与alert不存在在node中

3.全局作用域对象在浏览器中名为window,而在Node中则名为global

B.文件系统模块

1.fs:readFIle()、writeFile()、readdir()将目录中的文件以字符串数组的方式返回、stat函数用于获取文件信息、rename用于重命名、unlink用于删除

2.fs模块中的许多函数都有异步与同步的两种变体,如readFile的同步函数为readFileSync

C.流

1.可写流:所有的可写流都有一个write方法,可以传递字符串或Buffer对象。可写流的end方法用于关闭流,如果 线定一个参数,该方法会在关闭流前输出指定的一段数据。这两个方法都可以使用一个回调函数作为额外参数,当写入数据或关闭流完成后,会调用用户指定的回调函数。

2.可读流:data事件在每次数据到来时触发,end事件在流结束时触发。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-1.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-2.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/garble.js

项目实战:技能分享网站

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/router.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/20.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/public/

十八、JavaScript和性能

1.性能分析器:Chrome的Profiler

2.函数内联:函数内联通过许多方法来回忆代码运行速度。在机器级别,函数和方法需要使用一定的协议调用。

3.交叉编译:当编译热点函数时,该函数已经执行过了许多次。如果在这些执行过程中,每次都调用同一个函数,那么内联该函数就是合理的。

4.没有任何JS引擎能够内联forEach调用。可以使用传统的for循环来取代forEach

5.为什么对象如此昂贵呢?一是引擎需要寻找位置来有些话对象,二是引擎需要分别看v化学成分全局再也不需要使用而应该进行垃圾回收。Chrome使用世代型垃圾回收机制(Generational Garbage Collection)

6.如果你希望一段代码执行得足够快,那么最好保持类型一致。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/21.js

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 码农老张 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档