当前位置: 首页 > news >正文

做一名精致的JavaScripter 01:JavaScript简介

精致从细节做起。

前端的工作也有一段时间了,大大小小的前端框架都有接触过,越是深入学习越是感觉之前的学习过于粗糙,基础不够扎实,于是准备近期把JavaScript的基础知识点梳理一下,查缺补漏,做一名精致的JavaScripter。
本系列文章作为《JavaScript高级程序设计》(第3版)和《ECMAScript6入门》(第3版)的学习笔记,ES6相关知识点会有单独标识。

如有错误,欢迎指出;如有疑问的地方,请在文章下方提问。

一个完整的JavaScript实现由下列三个部分组成:

  • 核心(ECMAScript)
  • 文档对象模型(DOM)
  • 浏览器对象模型(BOM)

JavaScript的组成

ECMAScript

ECMAScript 是一门语言标准,JavaScript 便是在这基础上构建的相对完善的脚本语言。

我们常见的 Web 浏览器只是 ECMAScript 实现的运行环境之一,运行环境不仅提供基本的 ECMAScript 实现,同时也会提供该语言的扩展——DOM,DOM 则利用 ECMAScript 的语法实现具体功能。其它宿主环境还有 Node 和 Adobe Flash。

ECMAScript 由下列部分组成:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象
ECMAScript、ES6 是什么意思?

1996年,JavaScript 的创造者 Netscape 公司将 ECMAScript 提交给标准化组织 ECMA。次年,ECMA 发布262号标准文件(ECMA-262),并将这种语言称为 ECMAScript,这个版本就是1.0。

2011年,ECMAScript 5.1版本发布后,就开始定制6.0版本,ES6泛指5.1版本后 JavaScript 的下一代标准,涵盖了ECMAScript2015、ECMAScript2016、ECMAScript2017等等。

ECMAScript 标准会在每年的6月发布一次,作为当年的正式版本,ECMAScript2015 便是2015年发布的ECMAScript正式版本。

ES6 支持情况

各大浏览器对 ES6 的支持情况:ES6浏览器支持情况;

Nodejs 对 ES6 的支持情况:Nodejs支持情况。

Babel 转码

在开发过程中我们需要用到 ES6 的新特性,但又需要考虑浏览器的兼容性,这时候我们就可以使用 Babel 来帮助我们;使用 Babel 可以把 ES6 的代码转成 ES5 的代码,从而让我们的代码可以在不支持 ES6 的环境运行;

babel快速入门手册:点击查看。

文档对象模型(DOM)

文档对象模型(DOM,Document Object Model)是处理 HTML 或 XML 文档的API;

DOM把整个页面映射为多层节点结构,HTML 或 XML 页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。下面是一个 HTML 页面节点结构的实例:

图片描述

DOM 不是 JavaScript 独有的,许多其他语言都实现了它。在 Web 浏览器中基于 ECMAScript 实现的 DOM 已经成为 JavaScript 的重要组成部分。

DOM Level

1998年10月,DOM Level1 成为了 W3C 的推荐标准,为 DOM 的跨平台开发奠定基础。

DOM Level1 由两个模块组成:DOM Core 和 DOM HTML 。其中,前者提供了基于 XML 的文档的结构图,以便访问和操作文档的任意部分;后者添加了一些 HTML 专用的对象和方法,从而扩展了 DOM Core。

DOM Level2 在 DOM Level1 的基础上引入了下列模块,也给出了众多新类型和新接口的定义:

  • DOM 视图:定义了跟踪文档视图的接口;
  • DOM 事件:定义了事件和事件处理的接口;
  • DOM 样式:定义了基于 CSS 为元素应用样式的接口;
  • DOM 遍历和范围:定义了遍历和操作文档树的接口。

DOM Level3 进一步扩展了DOM,引入了以统一的方式载入和保持文档的方法,以及验证文档的方法;DOM Core 开始支持 XML 1.0 规范。

DOM Level4 定义了基于事件和节点的平台中立(platform-neutral)模型,增加了 Mutation Observers 作为 Mutation 事件的替换。

不同浏览器对于 DOM 的支持程度,可以在 caniuse - 点击访问 进行查询。

浏览器对象模型(BOM)

从根本上讲,BOM 只处理浏览器窗口和框架,但人们习惯把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分,BOM 由下列部分组成:

  • 弹出新浏览器窗口的功能;
  • 移动、缩放和关闭浏览器的功能;
  • navigator 、 location 、 screen 、 XMLHttpRequest(ActiveXObject)对象;
  • 对 cookies 的支持;

由于没有 BOM 标准可以遵循,所有每个浏览器都有自己的实现,当然也存在一些默认的标准;现在有了 HTML5 ,BOM 有望朝着兼容性越来越高的方向发展。

相关文章:

  • Hibernate【inverse和cascade属性】知识要点
  • IE安全系列之——昨日黄花:IE中的ActiveX(I)
  • 管道符和作业控制,shell变量和环境变量配置文件
  • Hadoop发行版某厂商发布TPC-DS评测结果
  • node.js中npm安装的模块在哪个目录下
  • AMD和英伟达区块链的闸门已然开启 投资者兴奋不已
  • 大话爬虫的实践技巧
  • 轮播效果
  • python 获取网页内容新增网页分类+删除指定后缀数组元素功能(基于python 3.6)...
  • 我是她的奇迹
  • 解决 Boost安装:fatal error: bzlib.h: No such file or directory 问题
  • 李益:展览工程“绿色供应链”解决之道
  • 当然我在扯淡
  • 另类起床提示 模仿iPod的数字时钟
  • 《2017年人工智能行业发展研究报告白皮书》发布 以数洞见行业未来
  • [译] 怎样写一个基础的编译器
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • centos安装java运行环境jdk+tomcat
  • Debian下无root权限使用Python访问Oracle
  • golang 发送GET和POST示例
  • java小心机(3)| 浅析finalize()
  • leetcode讲解--894. All Possible Full Binary Trees
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • mockjs让前端开发独立于后端
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • overflow: hidden IE7无效
  • rabbitmq延迟消息示例
  • Solarized Scheme
  • springboot_database项目介绍
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 从重复到重用
  • 搭建gitbook 和 访问权限认证
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 给新手的新浪微博 SDK 集成教程【一】
  • 构建工具 - 收藏集 - 掘金
  • 使用 Docker 部署 Spring Boot项目
  • C# - 为值类型重定义相等性
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 翻译 | The Principles of OOD 面向对象设计原则
  • 扩展资源服务器解决oauth2 性能瓶颈
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • #FPGA(基础知识)
  • #单片机(TB6600驱动42步进电机)
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • (3)llvm ir转换过程
  • (4)logging(日志模块)
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (五)关系数据库标准语言SQL
  • (一)appium-desktop定位元素原理
  • (转)Google的Objective-C编码规范
  • (转)linux下的时间函数使用
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .[hudsonL@cock.li].mkp勒索加密数据库完美恢复---惜分飞