理解Javascript_03_javascript全局觀
先來看一張圖吧:
解釋一下:
核心(ECMAScript):定義了腳本語言的所有對象,屬性和方法
文檔對象模型(DOM):HTML和XML應(yīng)用程序接口
瀏覽器對象模型(BOM):對瀏覽器窗口進(jìn)行訪問操作
現(xiàn)在來具體的講一個各個成分:
關(guān)于ECMAScript
ECMAScript的工作是定義語法和對象,從最基本的數(shù)據(jù)類型、條件語句、關(guān)鍵字、保留字到異常處理和對象定義都是它的范疇。
在ECMAScript范疇內(nèi)定義的對象也叫做原生對象。
其實上它就是一套定義了語法規(guī)則的接口,然后由不同的瀏覽器對其進(jìn)行實現(xiàn),最后我們輸寫遵守語法規(guī)則的程序,完成應(yīng)用開發(fā)需求。
關(guān)于DOM
根據(jù)DOM的定義(HTML和XML應(yīng)用程序接口)可知DOM由兩個部分組成,針對于XML的DOM即DOM Core和針對HTML的DOM HTML。
那DOM Core 和DOM HTML有什么區(qū)別與聯(lián)系呢?
DOM Core的核心概念就是節(jié)點(Node)。DOM會將文檔中不同類型的元素(這里不元素并不特指<div>這種tag,還包括屬性,注釋,文本之類)都看作為不同的節(jié)點。
節(jié)點結(jié)構(gòu)圖
上圖描述了DOM CORE的結(jié)構(gòu)圖,比較專業(yè),來看一個簡單的:
<div id="container">
<span>hello world</span>
</div>
來看一下這段代碼在標(biāo)準(zhǔn)瀏覽器里的DOM表現(xiàn):
div和span元素被展現(xiàn)成了一個元素節(jié)點,對應(yīng)到節(jié)點結(jié)構(gòu)圖中的Element元素
"hello world"和div與span之間的間隔,被展現(xiàn)成了文本節(jié)點,對應(yīng)到節(jié)點結(jié)構(gòu)圖中的CharacterDate元素
DOM CORE在解析文檔時,會將所有的元素、屬性、文本、注釋等等視為一個節(jié)點對象(或繼承自節(jié)點對象的對象,多態(tài)、向上轉(zhuǎn)型),根據(jù)文本結(jié)構(gòu)依次展現(xiàn),最后行成了一棵"DOM樹"
DOM HTML的核心概念是HTMLElement,DOM HTML會將文檔中的元素(這里的元素特指<body>這種tag,不包括注釋,屬性,文本)都視為HTMLElement。而元素的屬性,則為HTMLElement的屬性。
再來看一個示例:
從Node接口提供的屬性
myElement.attributes["id"].value;很明顯myElement.attributes["id"]返回一個對象.value是得到對象的value屬性
Element實現(xiàn)的方法返回
myElement.getAttributes("id");很明顯此時id現(xiàn)在只是一個屬性而已,這只是一個得到屬性的操作。
其實上DOM Core和DOM html的外部調(diào)用接口相差并不是很大,對于html文檔可以用DOM html進(jìn)行操作,針對xhtml可以用DOM Core。
關(guān)于BOM
老規(guī)則,先來一張圖:

BOM與瀏覽器緊密結(jié)合,這些對象也被稱為是宿主對象,即由環(huán)境提供的對象。
這里要強(qiáng)調(diào)一個奇怪的對象Global對象,它代表一個全局對象,Javascript是不允許存在獨立的函數(shù),變量和常量,如果沒有額外的定義,他們都作為Global對象的屬性或方法來看待.像parseInt(),isNaN(),isFinite()等等都作為Global對象的方法來看待,像Nan,Infinity等"常量"也是Global對象的屬性。像Boolean,String,Number,RegExp等內(nèi)置的全局對象的構(gòu)造函數(shù)也是Global對象的屬性.但是Global對象實際上并不存在,也就是說你用Global.NaN訪問NaN將會報錯。實際上它是由window來充當(dāng)這個角色,并且這個過程是在javascript首次加載時進(jìn)行的。
好了,好了,就到這吧,本來還有一部分,算了,以后另開一節(jié)再說吧。
- 理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
- 理解Javascript_14_函數(shù)形式參數(shù)與arguments
- 理解Javascript_13_執(zhí)行模型詳解
- 理解Javascript_12_執(zhí)行模型淺析
- 理解Javascript_11_constructor實現(xiàn)原理
- 理解Javascript_10_對象模型
- 理解Javascript_09_Function與Object
- 理解Javascript_08_函數(shù)對象
- 理解Javascript_07_理解instanceof實現(xiàn)原理
- 理解Javascript_06_理解對象的創(chuàng)建過程
- 理解Javascript_05_原型繼承原理
- 理解Javascript_02_理解undefined和null
- 理解Javascript_01_理解內(nèi)存分配原理分析

微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能

JavaScript定義函數(shù)的三種實現(xiàn)方法