每日知识分享阶段结束——最后是JS知识一览

142 阅读6分钟

说明:因为进度安排问题,之前的每日学习分享到这个阶段就结束了,今天是把后面的一些内容进行了一个略读概括,没用展开太多。后面开始,就是对实践过程中、运用过程中、或者被问到的问题中比较难的部分进行一个特别分享,同时还有实践分享。

1.H5的canvas让我们动态创建图形和图像。

  • 图形是在特定上下文中创建的,一种是2d上下文,也就是二维平面,还有一种是3D上下文,即是WebGL上下文。
  • WebGL拥有更强大的图形图像处理能力,但WebGL的浏览器支持度较小。 

2.H5除了定义新的标记规则,还定义了一些JavaScript API。

  • 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来自不同域的文档间传递消息。
  • 使用audio或video时,应该先使用canPlayType()检测浏览器是否支持特定的格式。

3.浏览器的错误机制(提供用户的使用好感):

  • 自己先使用try-catch语句去处理错误,不必等到浏览器自己去处理。
  • 还可以使用window.onerror事件,还可以捕捉到更多的错误类型。
  • 还应该对自己的Web程序进行错误情况分析,进行错误解决方案制定。
  1. 分析致命错误、非致命错误
  2. 分析代码,看是否发生类型转换的错误、数据类型判断上的错误、发送给服务器或从服务器接收到的数据有错误。

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的离线应用:

  •  目前已经实现用户是否离线、指定在应用缓存中的文件,以便在离线状态下去访问。
  • 客户端存储方案:
  1. cookie:只能存储少量数据,对于大量数据效率降低。
  2. IE使用命令数据空间进行数据存储。
  3. H5的Web Storage定义了两种存储数据的对象:session和local Sorage,前者是对话中保存数据,关闭后,数据被删除。后者是持久化数据,还可以跨会话、跨域。
  • IndexedDB是一种类型SQL数据库的结构化数据存储机制。数据保存在对象存储空间之中。
  • 以上的数据缓存不会加密,不要存储敏感数据。

11.JS开发注意问题:

  • 可维护性:
  1. 需要针对其松散类型的性质创造一些特殊的约定。
  2. JS定义行为、HTML定义内容、CSS定义外观。
  • 性能:
  1. JS执行时间相较来说是比较长的,所以优化JS的执行性能是非常有必要的。
  2. 与DOM交互开销很大,所以需要限制DOM操作的次数。
  • 部署:
  1. 尽量写少的JS文件,尽可能是一个文件。
  2. 使用压缩器将文件尽可能变小。
  3. 和HTTP 压缩一起使用可以让JS文件尽可能小。

12.其他的一些API:

  • 不属于H5。
  • 还在制定中,部分得到浏览器的支持。
  • requestAnimationFrame():着眼于优化JS动画的API,在动画运行期间触发信号。浏览器可以自动优化屏幕重绘操作。
  • Page Visibility API:用户什么时候正在看着页面,什么时候页面是隐藏的。
  • Geolocation API:得到许可的情况下,可以确定用户所在的位置。
  • File API:读取文件内容、显示、上传,与拖放功能结合,实现拖放上传功能。
  •  Web Timing:给出页面加载和渲染过程的很多信息,性能优化。
  • Web Workers:异步运行JS代码,避免阻塞用户界面。一般用于复杂计算的时候。   

13.JS的一些库(联想到之前面试问,这个项目是使用什么方案实现的):

  •  通用库和专用库。
  • 通用库:
  1. YUI(组件方式)
  2. Prototype(提供类)
  3.  Dojo Toolkit
  4. MoolTools(精简和优化)
  5. jQuery(函数式编程接口,构建于css选择器上的,用来操作DOM元素       
  • 专用库(快速开发框架)
  1. Backbone(基于Underscore的一个迷你MVC开源库)
  • 动画和特效库:
  1. script.aculo.us(与Prototype搭配使用)
  2. Lightbox(创建图像浮动层)
  • 加密:
  1. JavaScript MD5(MD4、MD5安全散列函数)