javascript全局观

简介:

今天让我们站在语言的高度来看一下Javascript都有点什么。因为是全局性的俯瞰,所以不针对细节作详细的讲解。

先来看一张图吧:

 

解释一下:

核心(ECMAScript):定义了脚本语言的所有对象,属性和方法

文档对象模型(DOM):HTML和XML应用程序接口

浏览器对象模型(BOM):对浏览器窗口进行访问操作

 

现在来具体的讲一个各个成分:

关于ECMAScript

 ECMAScript的工作是定义语法和对象,从最基本的数据类型、条件语句、关键字、保留字到异常处理和对象定义都是它的范畴。

在ECMAScript范畴内定义的对象也叫做原生对象。

其实上它就是一套定义了语法规则的接口,然后由不同的浏览器对其进行实现,最后我们输写遵守语法规则的程序,完成应用开发需求。

 

关于DOM

根据DOM的定义(HTML和XML应用程序接口)可知DOM由两个部分组成,针对于XML的DOM即DOM Core和针对HTML的DOM HTML。

那DOM Core 和DOM HTML有什么区别与联系呢?

DOM Core的核心概念就是节点(Node)。DOM会将文档中不同类型的元素(这里不元素并不特指<div>这种tag,还包括属性,注释,文本之类)都看作为不同的节点。

节点结构图

 

上图描述了DOM CORE的结构图,比较专业,来看一个简单的:

1 <div id="container">
2     <span>hello world</span>
3   </div>

 来看一下这段代码在标准浏览器里的DOM表现:

div和span元素被展现成了一个元素节点,对应到节点结构图中的Element元素

"hello world"和div与span之间的间隔,被展现成了文本节点,对应到节点结构图中的CharacterDate元素

DOM CORE在解析文档时,会将所有的元素、属性、文本、注释等等视为一个节点对象(或继承自节点对象的对象,多态、向上转型),根据文本结构依次展现,最后行成了一棵"DOM树"

 

DOM HTML的核心概念是HTMLElement,DOM HTML会将文档中的元素(这里的元素特指<body>这种tag,不包括注释,属性,文本)都视为HTMLElement。而元素的属性,则为HTMLElement的属性。

再来看一个示例:

从Node接口提供的属性

myElement.attributes["id"].value;很明显myElement.attributes["id"]返回一个对象.value是得到对象的value属性

Element实现的方法返回 

myElement.getAttributes("id");很明显此时id现在只是一个属性而已,这只是一个得到属性的操作。

 

其实上DOM Core和DOM html的外部调用接口相差并不是很大,对于html文档可以用DOM html进行操作,针对xhtml可以用DOM Core。

 

关于BOM

 老规则,先来一张图:

 

 BOM与浏览器紧密结合,这些对象也被称为是宿主对象,即由环境提供的对象。

这里要强调一个奇怪的对象Global对象,它代表一个全局对象,Javascript是不允许存在独立的函数,变量和常量,如果没有额外的定义,他们都作为Global对象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待,像Nan,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number,RegExp等内置的全局对象的构造函数也是Global对象的属性.但是Global对象实际上并不存在,也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来充当这个角色,并且这个过程是在javascript首次加载时进行的。

本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/archive/2011/09/05/2167521.html,如需转载请自行联系原作者

相关文章
|
计算机视觉
Mac-Mini 外接三个显示器教程
Mac-mini 官方只支持连接2个显示器,ctrl cv 复制粘贴代码和写博客的时候十分不方便,这时候需要外接第三个显示器,下面看看如何操作。
1607 0
Mac-Mini 外接三个显示器教程
|
10月前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
398 80
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
|
自动驾驶 物联网 5G
标题:5G频段解析:低频、中频与毫米波的奥秘
标题:5G频段解析:低频、中频与毫米波的奥秘
1234 64
|
10月前
|
机器学习/深度学习 存储 人工智能
《C++ 赋能强化学习:Q - learning 算法的实现之路》
本文探讨了如何用C++实现强化学习中的Q-learning算法。强化学习通过智能体与环境的交互来学习最优策略,Q-learning则通过更新Q函数估计动作回报。C++凭借高效的内存管理和快速执行,在处理大规模数据和复杂计算时表现出色。文章详细介绍了环境建模、Q表初始化、训练循环及策略提取等关键步骤,并分析了其在游戏开发、机器人控制等领域的应用前景,同时指出了可能面临的挑战及应对策略。
313 11
|
10月前
|
存储 自然语言处理 算法
【北京大学 软件工程】四、结构化分析方法
结构化分析方法是一种系统化的软件开发方法学,旨在通过使用问题域术语建立系统的功能模型,以明确“系统必须做什么”。该方法包括结构化分析、设计和程序设计三个主要部分。其核心工具是数据流图(DFD),用于表达系统功能模型,并结合数据字典定义数据流和数据存储。此外,还使用加工小说明(如判定表或判定树)描述加工逻辑。 结构化分析过程遵循自顶向下、逐步求精的原则,首先建立系统环境图确定边界,然后通过分解加工、分派数据流和引入文件来细化模型。整个过程中需确保模型平衡和信息组织的复杂性控制。最终输出为需求规格说明书(SRS),确保需求的正确性、无二义性、完整性和可验证性等特性。
|
存储 监控 安全
TG7100CWiFi&BLE双模芯片 一键连接AIoT平台让你快速自定义智能方案
面对市面上眼花缭乱的双模芯片,许多应用方案商往往挑花了眼,不知道该选择哪款。今天我们推荐是天猫精灵联合平头哥推出的TG7100CWiFi&BLE双模芯片。它具有低功耗、宽工作温度等特点,广泛适用于智能家居,电工照明等领域。
TG7100CWiFi&BLE双模芯片 一键连接AIoT平台让你快速自定义智能方案
|
10月前
|
Web App开发 数据采集 JavaScript
CDP与Selenium相结合——玩转网页端自动化数据采集/爬取程序
本文介绍了Selenium、Chrome DevTools及Chrome DevTools Protocol (CDP) 的基本功能与应用。Selenium是一款开源自动化测试工具,适用于网页端应用程序测试和数据采集,具备跨平台特性。Chrome DevTools内置浏览器中,提供调试、分析Web应用程序的功能,包括元素、控制台、源代码和网络选项卡等。CDP是一套用于与Chromium内核浏览器通信的API,支持自动化测试和性能分析。文中还展示了Selenium与CDP结合使用的示例,如捕获网络请求数据和打印网页内容,并推荐了相关书籍和资源以供深入学习。
1333 39
CDP与Selenium相结合——玩转网页端自动化数据采集/爬取程序
|
10月前
|
存储 前端开发 关系型数据库
鸿蒙开发:实现键值数据库存储
对于数据量比较的小的,我们直接选择轻量级的用户首选项方式即可,而对于数据量比较大的情况下,直接可以使用数据库,而对于相对来说,比较大的数据,我们就可以使用键值型数据库方式
288 2
|
10月前
|
SQL 存储 分布式计算
Hologres+Paimon构建一体化实时湖仓
Hologres 3.0全新升级,面向未来的一体化实时湖仓。它支持多种Table Format,提供湖仓存储、多模式计算、分析服务和Data+AI一体的能力。Hologres与Paimon结合,实现统一元数据管理、极速查询性能、增量消费及ETL功能。Dynamic Table支持流式、增量和全量三种刷新模式,满足不同业务需求,实现一份数据、一份SQL、一份计算的多模式刷新。该架构适用于高时效性要求的场景,也可用于成本敏感的数据共享场景。
|
10月前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
1461 5