重学JavaScript

coolFish
521 阅读3分钟

打算花一些时间重整基础，然后每天学习的知识点，和碰到的问题会持续更新在掘金上，供自己复习使用，复习用书目前定为最新版的红宝书，后期补充为unknownJS;

One Day

第 1 章，介绍 JavaScript ：

从哪里来，如何发展，以及现今的状况。这一章会谈到 「JavaScript」 与「ECMAScript」的关系、DOM、BOM，以及 Ecma 和 W3C 相关的标准

1 JavaScript的成分

  • 核心（ECMAScript） ：ECMA-262定义的语言，浏览器是其「宿主」，提供ECMAScript的基准实现和与环境自身交互必需的扩展，

  • 文档对象模型（DOM） ：是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM将整个页面抽 象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。这些代码通过DOM可以表示为一组分层节点

    • DOM0级事件：具有极好的跨浏览器优势，会以最快的速度绑定。为某一个元素的同一个行为绑定不同的方法在「行内会分别执行」。为某一个元素的同一个行为绑定不同的方法在「script标签中后面的方法会覆盖前面的方法」。

  • DOM1：一般只有设计规范没有具体实现，

    • DOM2： 是通过addEventListener绑定的事件，IE下的DOM2事件通过attachEvent绑定；可以给某一个元素的同一个行为绑定不同的方法在行内会分别执行， 删除DOM 2事件处理程序，通过removeEventListener
    • DOM3：事件在DOM2级事件的基础上添加了更多的事件类型 。如load，scroll，blur，mousewheel。等用户触发事件。同时允许自定义一些事件

  • 浏览器对象模型（BOM）：

    • 主要针对浏览器窗口和子窗口，例如弹出，缩放，移动关闭浏览器窗口的能力，

    • location对象，提供加载页面的详细信息，

      • localtion.href获取当前页面地址
      • location.reload();重新加载页面。

    • screen，提供屏幕分辨率的详情

    • navigator，浏览器的详情

    • history，历史记录

      • history.forward() <=>history.go(1) 前进

      • history.back()<=>history.go(-1) 后退

1.1 HTML里的JS

  • 使用标签引入：

    • 要包含外部文件中的JavaScript，就必须使用 src 属性。这个属 性的值是一个URL，指向包含JavaScript代码的文件，比如：

    ​ 使用了 src 属性的 标签中再包含其他JavaScript代码。

    • 最早放在head里，但是这意味着js文件下载解析完成后才开始渲染，所以会出现渲染明显延迟，所以后来统一放在body的最后面，

  • defer属性：

    • 在上设置defer，会告诉浏览器立刻下载，推迟执行，有两个的时候会按顺序先后执行

      • example1优于2执行

  • async属性：立刻下载，没有优先执行顺序

1.2 行内代码和外部文件

  • 必要性：可维护性，缓存，适应未来
    • 可维护性：如果分散在个个页面，不好维护，统一页面更好管理
    • 缓存：如果两个页面用到同一个js文件，只需要下载一次，加载更快
    • 适应未来：外链不必考虑xhtml的区别，

1.3 文档模式

  • doctype用来切换文档模式： 暂时没兴趣发掘区别
    • 标准模式
    • 混杂模式

总结：

  • 主要讲了组成js的三个部分（要求明确知道哪三个部分，每个部分各司其职，dom0,1,2,3，的分别作用，bom的一些常用的操作）
  • js文件在html的引入（引用位置和原因，defer和async的用处和区别）
  • 行内代码和外部文件，（分别有什么优势，最终的选择）
  • dectype的作用

本文使用 mdnice 排版

avatar
文章
阅读
粉丝