说明:因为进度安排问题,之前的每日学习分享到这个阶段就结束了,今天是把后面的一些内容进行了一个略读概括,没用展开太多。后面开始,就是对实践过程中、运用过程中、或者被问到的问题中比较难的部分进行一个特别分享,同时还有实践分享。
1.H5的canvas让我们动态创建图形和图像。
- 图形是在特定上下文中创建的,一种是2d上下文,也就是二维平面,还有一种是3D上下文,即是WebGL上下文。
- WebGL拥有更强大的图形图像处理能力,但WebGL的浏览器支持度较小。
2.H5除了定义新的标记规则,还定义了一些JavaScript API。
- 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来自不同域的文档间传递消息。
- 使用audio或video时,应该先使用canPlayType()检测浏览器是否支持特定的格式。
3.浏览器的错误机制(提供用户的使用好感):
- 自己先使用try-catch语句去处理错误,不必等到浏览器自己去处理。
- 还可以使用window.onerror事件,还可以捕捉到更多的错误类型。
- 还应该对自己的Web程序进行错误情况分析,进行错误解决方案制定。
- 分析致命错误、非致命错误
- 分析代码,看是否发生类型转换的错误、数据类型判断上的错误、发送给服务器或从服务器接收到的数据有错误。
4.JS与XML:
- 不同浏览器对XML的支持API各行其道。
- 主要是解决XML的解析和序列化问题。
- Firefox的实现方案成为主流。
- XPath是在DOM文档中查找节点或节点集合。
- XML:存储和通过因特网传输结构化数据的标准。
5.E4X:
- 是ES语言的可选扩展。
- 目的在于对XML的原生支持。
- 与DOM相比,E4X只用一个类型来表示XML中的各种节点。
- 使用..表示要匹配所有后代元素,*是一个通配符,匹配任意类型的节点。
- 主要支持浏览器是Firefox。
6.对DOM、HTML、XML、JS关系理解:
HTML和XML都是一系列数据,而DOM是可以去解析这些数据并且序列化这些数据的,而JS就是去访问、操作这些数据。
7.JSON:
- 是JS的一个严格的子集,利用了JS中的一些模式来表示结构化数据。
- 是一种数据格式,不是编程语言。
- 不只是JS可以解析JSON,其他语言也可以是解析JSON数据。
- ES5定义了原生的JSON对象,使用JSON.stringify()和JSON.parse()方法实现对对象的序列化和对JSON的解析。
- 可以表示对象、数组、字符串、数字、null、布尔值。
8.Ajax(一般是http协议):
- 是无需刷新页面就能够从服务器取得数据的一种方法。实现局部刷新,增强用户体验。
- 核心对象是XMLHttpRequst(XHR)。
- 同源策略是对XHR的一个主要约束,它对通信设置了”相同的域、相同的端口、相同的协议“这一限制。(联想之前的面试题,将两个页面部署在不同的端口进行通信,看来也是一种跨域通信问题)。
- 解决跨域问题,方案是CORS(cross-origin resources sharing),还有其他方案是图像Ping和JSONP技术。
- comet是对Aajx技术的扩展:让服务器能够实时地向客户端推送数据。实现手段有:长轮询和HTTP流。SSE(服务器发送事件)是一种实现comet交互的浏览器API。
- Web Sockets是一种与服务器进行全双工,双向通信的信道。使用自定义协议,传输小数据。
9.JS中的函数:
- 是一类对象。所以才有了闭包这种方法,可以去访问其他函数对象中定义的属性或者方法。
- 可以创建安全的构造函数,确保在缺少new操作符时调用构造函数不会改变错误的环境对象。
- 函数绑定可以创建在指定环境中运行的函数。
- 将绑定和柯里化结合使用,可以在任意环境中以任意参数执行任意函数。
- 防篡改对象:不可扩展、密封、冻结对象。
- setTimeout()和setInterval()创建定时器。异步函数。
- 将拖放行为和自定义事件结合起来,可以创建一个可重复使用的框架。
10.Web的离线应用:
- 目前已经实现用户是否离线、指定在应用缓存中的文件,以便在离线状态下去访问。
- 客户端存储方案:
- cookie:只能存储少量数据,对于大量数据效率降低。
- IE使用命令数据空间进行数据存储。
- H5的Web Storage定义了两种存储数据的对象:session和local Sorage,前者是对话中保存数据,关闭后,数据被删除。后者是持久化数据,还可以跨会话、跨域。
- IndexedDB是一种类型SQL数据库的结构化数据存储机制。数据保存在对象存储空间之中。
- 以上的数据缓存不会加密,不要存储敏感数据。
11.JS开发注意问题:
- 可维护性:
- 需要针对其松散类型的性质创造一些特殊的约定。
- JS定义行为、HTML定义内容、CSS定义外观。
- 性能:
- JS执行时间相较来说是比较长的,所以优化JS的执行性能是非常有必要的。
- 与DOM交互开销很大,所以需要限制DOM操作的次数。
- 部署:
- 尽量写少的JS文件,尽可能是一个文件。
- 使用压缩器将文件尽可能变小。
- 和HTTP 压缩一起使用可以让JS文件尽可能小。
12.其他的一些API:
- 不属于H5。
- 还在制定中,部分得到浏览器的支持。
- requestAnimationFrame():着眼于优化JS动画的API,在动画运行期间触发信号。浏览器可以自动优化屏幕重绘操作。
- Page Visibility API:用户什么时候正在看着页面,什么时候页面是隐藏的。
- Geolocation API:得到许可的情况下,可以确定用户所在的位置。
- File API:读取文件内容、显示、上传,与拖放功能结合,实现拖放上传功能。
- Web Timing:给出页面加载和渲染过程的很多信息,性能优化。
- Web Workers:异步运行JS代码,避免阻塞用户界面。一般用于复杂计算的时候。
13.JS的一些库(联想到之前面试问,这个项目是使用什么方案实现的):
- 通用库和专用库。
- 通用库:
- YUI(组件方式)
- Prototype(提供类)
- Dojo Toolkit
- MoolTools(精简和优化)
- jQuery(函数式编程接口,构建于css选择器上的,用来操作DOM元素
- 专用库(快速开发框架)
- Backbone(基于Underscore的一个迷你MVC开源库)
- 动画和特效库:
- script.aculo.us(与Prototype搭配使用)
- Lightbox(创建图像浮动层)
- 加密:
- JavaScript MD5(MD4、MD5安全散列函数)