资讯专栏INFORMATION COLUMN

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

张巨伟 / 2011人阅读

摘要:精致从细节做起。标准会在每年的月发布一次,作为当年的正式版本,便是年发布的正式版本。支持情况各大浏览器对的支持情况浏览器支持情况对的支持情况支持情况。在浏览器中基于实现的已经成为的重要组成部分。

精致从细节做起。

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

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

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

核心(ECMAScript)

文档对象模型(DOM)

浏览器对象模型(BOM)

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 有望朝着兼容性越来越高的方向发展。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93232.html

相关文章

  • 精致Java教程】01:认识Java

    摘要:小组最开始由两名程序员和,一名工程师三人组成,后续有人员扩充。其中是最具代表性的人物,如今被称为语言之父。后于年月日对外公布这门编程语言,标志着的诞生。官方宣称全世界有万开发者。数据显示目前处于榜首。 欢迎你来到Java的世界,作为Java的第一篇文章不可免俗的要做一次介绍,这些东西往往比较枯燥所以我尽可能写的有故事趣味一点。对于初学者历史或者特性的东西浏览一遍有所了解即可,即使不知所...

    keithxiaoy 评论0 收藏0
  • 求职准备 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章,转载请务必保留原出处为:http://www.54tianzhisheng.cn/... , 欢迎访问我的站点,阅读更多有深度的文章。 实例变量 和 类变量...

    cuieney 评论0 收藏0
  • 巧用Android图片资源,打造更精致APP

    摘要:所以完美的方案就是,需要提供尺寸均一的大图片,适配到下相比微信的高清图片资源,展现的精致效果在级别及更高版本中,可定义矢量图片,而且图片可在不损失清晰度的情况下缩放。 前言 由于android系统的开放性,以及IOS的相对封闭。第三方设备想要使用苹果的OS,目前来说是不可能。所以,各厂商纷纷的投入了android的怀抱,android阵营也越来越强大,如今移动操作系统也就是androi...

    iamyoung001 评论0 收藏0
  • 精致Java教程】04:第一个Java程序,HelloWorld!

    摘要:配置好开发环境之后,我们来写第一个程序。注原谅我这里只贴了张截图,因为我觉得第一个程序你最好自己敲而不是复制粘贴。运行程序现在命令行窗口输出了一句,如下图好了,恭喜你,你已经是一名程序员了,太腻害了。注是编译器,是运行器。 配置好开发环境之后,我们来写第一个Java程序。 Step1:敲代码 可以在任意目录,为了方便管理我在D盘下新建了一个Source文件夹专门放代码,又在Source...

    Kylin_Mountain 评论0 收藏0
  • 工作面试

    摘要:作者简书款精致简洁的个人面试简历模板包含等格式,方便自由修改和学习。要换工作还不来看看面试题马上就要到三月份这个跳槽季了来看看面试题吧史上最全面试资料集合教你如何面试教你如何写简历分享给正在找工作或者准备找工作的童鞋们。 2016 年末,腾讯,百度,华为,搜狗和滴滴面试题汇总 2016 年未,腾讯,百度,华为,搜狗和滴滴面试题汇总 杭州找Android工作的点点滴滴 写在前面的话 我从...

    luodongseu 评论0 收藏0

发表评论

0条评论

张巨伟

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<