UDN-企业互联网技术人气社区

板块导航

浏览  : 703
回复  : 0

[讨论交流] 《JavaScript 应用开发实践指南》阅读笔记

[复制链接]
呵呵燕的头像 楼主
发表于 2016-11-27 21:47:18 | 显示全部楼层 |阅读模式
  用户之所以访问我们的网站,并不是为了看那些精心制作的壮丽图景,华美流畅的 CSS 动画以及语义丰富的 HTML 标记,他们关心的是网站内容能不能满足其需求,也就是网站的功能是不是他们想要的!

  有些人喜欢尝鲜,它们会使用 HTML5 以及 CSS3 中的新属性,但是不做浏览器适配,这样的话就导致在有些浏览器中我们的界面看上去十分高大上,而且一些不支持新属性的浏览器中看上去却格格不入。所以我建议当使用 CSS3 或者 HTML5新属性的时候,首先去查看一下属性在各浏览器的支持情况,针对那些不支持新属性的浏览器做出优雅的替代方案。你可以在 HTML5 Readiness 查看新属性在浏览器中的支持情况。

  渐进增强是网页前端开发的基础,什么是渐进增强呢?从基础层面上说,就是将 HTML, CSS, JavaScript 分成不同的三个层面, HTML 是结构层, CSS 是表现层, JavaScript 是行为层。我们让上方的层依赖于下方的层,也就是 JavaScript 依赖 CSS, CSS 又依赖于 HTML。和渐进增强模型相似的,还有一个称之为平稳退化的开发模型,这两种方式的主要区别在于,渐进增强模型关注的重点是内容,而平稳退化模型关注的重点是浏览器。

  我们可以通过 Http 请求去获取我们需要的图像或者 CSS 资源,默认情况下,浏览器会成对的下载这些资源,由于带宽的限制,你不可能一次就把所有的资源全部下载下来。通常来说,一次获取两个资源,可以将处理器的负载保持在合适的水平上,不至于影响到运行在用户电脑上的其它程序。但是 JavaScript 文件受到浏览器的特殊照顾,只要用 HTTP 请求来获取这种文件,那么其它资源的下载都要停止,这也是我们为什么将对 JS 文件的引用放置到页面末尾。

  JavaScript 所做的大部分工作,就是在行为层中改善用户体验,也就是拓展网站现有的功能对其锦上添花。 但是,我们切不可乱用 JavaScript, 怎么检测我们是否乱用呢? 最好的办法就是关闭浏览器的 JavaScript 功能,以用户的角度看看网站是否还能正常工作。

  还有一个值得注意的问题是,由于浏览器渲染 CSS 的速度要比 JavaScript 快的多,所以在能用 CSS 替代 JavaScript 的情况下,那就替代它。

  在编写应用程序时,最好能把所有的变量都集中在 JavaScript 文件或函数头部,这样的话,它们就能立即被缓存起来,供稍候使用。比如像下面这样。

  1.   var first = 1,

  2.   second = 2,

  3.   third = 3;
复制代码


  匿名函数就是那种没有名字的函数,使用它的一个巨大优势就在于原本会落入到全局作用域的变量,现在就全部局限在该匿名函数的内部了。比如下面这个例子,我们将 eat 和 sleep 全部放置到 Person 对象当中,显得更加直观。

  1.   (function() {

  2.   var Person = {

  3.   eat: function() {

  4.   console.log("I am eating!");

  5.   },

  6.   sleep: function() {

  7.   console.log("I am sleeping!");

  8.   }

  9.   }

  10.   Person.eat();

  11.   })();
复制代码


  当然,在对象中嵌入函数和在对象中添加变量一样,也有相同的性能忧患。一个函数在对象中嵌套的越深,调用时所需的解析时间就越长。

  在使用函数的时候,如果在函数名后加上括号,则表示立刻调用,如果不加括号,则表示不想立刻调用,比如在我们添加事件监听的时候,往往使用不加括号的形式。

  JavaScript 有两种常见的开发模式,分别是 “函数与闭包模式” 和 “事件驱动模式”。所谓函数与闭包模型就是将所有的内容封装城一个对象,并且在不暴露那个对象中其它函数和局部变量的情况下,创造出一套可以在整个应用程序中使用的公共 API.而事件驱动模式更为直接,就是直接设置好函数,在事件监听器中调用即可。

  JQuery 中有个 ready() 方法,它与原生的 load 事件有所不同。 load 事件会等到包括图片在内的所有资源都加载好了之后,才被触发。而 ready() 方法不会等到所有图片都加载完了才去执行回调代码,而是只等 DOM 对象被构建好之后就开始执行,这样用户的体验就会更加平滑一些。

原文作者:高华峰 来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部