美文网首页程序员Web 前端开发
《JavaScript 应用开发实践指南》阅读笔记

《JavaScript 应用开发实践指南》阅读笔记

作者: ghwaphon | 来源:发表于2016-10-30 11:31 被阅读331次
  1. 用户之所以访问我们的网站,并不是为了看那些精心制作的壮丽图景,华美流畅的 CSS 动画以及语义丰富的 HTML 标记,他们关心的是网站内容能不能满足其需求,也就是网站的功能是不是他们想要的!

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

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

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

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

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

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

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

    (function() {
        var Person = {

              eat: function() {
                  console.log("I am eating!");
              },
              sleep: function() {
                  console.log("I am sleeping!");
              }
     }
        Person.eat();
    })();

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

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

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

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

相关文章

  • 《JavaScript 应用开发实践指南》阅读笔记

    用户之所以访问我们的网站,并不是为了看那些精心制作的壮丽图景,华美流畅的 CSS 动画以及语义丰富的 HTML ...

  • OpenGL ES学习笔记(一):相关基本概念

    注:这篇文集是针对《OpenGL ES应用开发实践指南 iOS卷》的学习笔记。 后续会根据学习进度不断更新Open...

  • 自己收集一些前端电子书

    nodejs开发指南中文 精通CSS CSS揭秘 JavaScript权威指南 JavaScript面向对象指南 ...

  • OpenGL ES 学习笔记

    学习书籍推荐 OpenGL ES 应用开发实践指南 iOS 篇下载:https://pan.baidu.com/s...

  • 2021-10-23

    推荐书籍:《HBase原理与实践》《HBase实战》《HBase权威指南》《HBase企业应用开发实战》《HBas...

  • devops实践指南

    devops实践指南 - 读书笔记 ***************************************...

  • 2015年书单

    这是2015年的书单 技术 《C++ Primer(中文版 第5版)》 《Core Data应用开发实践指南》 《...

  • 2、vue的特点

    易用 已经会了html、css、javascript 即刻阅读指南开始构建应用 灵活 简单小巧的核心,渐进式技术栈...

  • OpenGL ES--入门热身

    本身大多内容都来自 《OpenGL ES应用开发实践指南 iOS卷》。使用OpenGL ES大多时候是要用到缓存....

  • OpenGLES学习之路-纹理(二)

    学习之路系列 OpenGLES学习之路 这两天在看<>这本书的时...

网友评论

    本文标题:《JavaScript 应用开发实践指南》阅读笔记

    本文链接:https://www.haomeiwen.com/subject/wiyyuttx.html