轉自http://blog.sunchrome.com/?p=33

一個web頁面需要使用到JS的場景

Parser階段

HTMLDocumentParser 中的HTMLTokenizer在解析到<script>開始標簽時，創建HTMLScriptElement對象，在解析</script>時，開始解析JS代碼啊，如果<script src=”">中含有src,那么發出一個異步請求(在異步請求過程中，parser會中斷，等待JS的解析結果，期間Webkit會來做一些DNS預取，資源預解析等工作，總之WebKit是不會浪費這些寶貴時間的)，等src資源返回后開始解析。

用戶事件驅動

比如鼠標點擊一個按鈕

解析狀態

onload等函數

WebKit中的JS執行的代碼所在的位置

WebKit中所有的JS執行都是通過Frame中的ScriptController m_script;來完成，也就是說，所有的每個Frame只有一個JS入口。

ScriptController中含有一個V8Proxy的V8代理，所有執行過程都是通過V8Proxy來完成的。

如何把DOM接口的相關接口暴露給V8的？

要把DOM傳遞給V8調用就要解決兩個問題，DOM對象怎么傳遞給V8？

DOM對象的中的方法怎么傳遞給V8？

還有諸如其他的Screen等對象是如何傳遞給V8的？

一個Frame中的V8運行環境，也就是上面文章所提到的Context,

W3C—WEB IDL
由該工作草案定義的接口定義語言（interface definition language）叫作Web IDL，它可被用來描述要在Web瀏覽器里實現的接口。Web IDL是一種IDL的變體，它所具有的很多特性使之能夠更容易地對Web平臺里的常用腳本對象的行為進行規定。為了支持過去只能以文字描述的常用功能，該IDL在很多方面得到了擴展。另外，它還為ECMAScript第3版和Java給出了精確的語言綁定。

回歸WebKit核心代碼WebCore中的源代碼，可以發現有許多xxx.idl文件，這些文件就是需要暴露給JS解析引擎的接口。
以WebKit/WebCore/page/DOMWindow.h 為列，改文件主要在C++層次描述了一個Web頁面的所有特性，包括 DOM,screen,History等等相關信息。這些信息都是通過WebKit/WebCore/page/DOMWindow.idl描述文件來描述的，DOMWindow.idl主要分為兩個部分，屬性和方法，DOMWindow.idl的代碼太多了，就不在這里列舉IDL文件內容了。其實xxx.idl文件在C++運行時并不起任何作用，真正起作用的是編譯器利用 xxx.idl文件來生成的對應的C++源文件，由于通過xxx.idl接口描述的屬性和功能規則比較簡單，所以通過編譯器通過perl語言，然后按照一定規則來生成對應的供JS引擎調用的C++源文件。
Chromium生成的V8接口對應的目錄在src/chrome/Debug/obj/global_intermediate/webkit/bindings或者
src/chrome/Release/obj/global_intermediate/webkit/bindings.

通過分析這些動態生成的文件可以發現，他們的組成結構非常簡單，
namespace WebCore {

class V8DOMWindow {

public:
static bool HasInstance(v8::Handle value);
static v8::Persistent GetRawTemplate();
static v8::Persistent GetTemplate();
static DOMWindow* toNative(v8::Handle);
static v8::Handle wrap(DOMWindow*);
static void derefObject(void*);
static WrapperTypeInfo info;
…忽略了下面的部分代碼
};
v8::Handle toV8(DOMWindow*);
v8::Handle toV8(PassRefPtr);
}

然后CPP文件中是這樣實現的
static const BatchedAttribute shadowAttrs[] = {
// Attribute ‘location’ (Type: ‘attribute’ ExtAttr: ‘V8DisallowShadowing DoNotCheckDomainSecurity CPPCustom V8CustomSetter JSCCustom’)
{“location”, DOMWindowInternal::locationAttrGetter, V8DOMWindow::locationAccessorSetter, 0 /* no data */, static_cast(v8::ALL_CAN_READ | v8::ALL_CAN_WRITE | v8::PROHIBITS_OVERWRITING), static_cast(v8::None | v8::DontDelete), 0 /* on instance */},
// Attribute ‘window’ (Type: ‘readonly attribute’ ExtAttr: ‘V8DisallowShadowing DoNotCheckDomainSecurity’)
{“window”, DOMWindowInternal::windowAttrGetter, 0, 0 /* no data */, static_cast(v8::ALL_CAN_READ | v8::PROHIBITS_OVERWRITING), static_cast(v8::None | v8::DontDelete), 0 /* on instance */},
// Attribute ‘top’ (Type: ‘attribute’ ExtAttr: ‘V8DisallowShadowing DoNotCheckDomainSecurityOnGet Replaceable V8ReadOnly’)
{“top”, DOMWindowInternal::topAttrGetter, 0, 0 /* no data */, static_cast(v8::ALL_CAN_READ | v8::PROHIBITS_OVERWRITING), static_cast(v8::None | v8::DontDelete), 0 /* on instance */},
};
static const BatchedAttribute DOMWindowAttrs[] = {
// Attribute ‘screen’ (Type: ‘readonly attribute’ ExtAttr: ”)
{“screen”, DOMWindowInternal::screenAttrGetter, 0, 0 /* no data */, static_cast(v8::DEFAULT), static_cast(v8::None), 0 /* on instance */},
// Attribute ‘history’ (Type: ‘readonly attribute’ ExtAttr: ‘JSCCustomGetter DoNotCheckDomainSecurity’)
{“history”, DOMWindowInternal::historyAttrGetter, 0, 0 /* no data */, static_cast(v8::ALL_CAN_READ), static_cast(v8::None), 0 /* on instance */}
……下面的代碼忽略,
}

static const BatchedCallback DOMWindowCallbacks[] = {
{“getSelection”, DOMWindowInternal::getSelectionCallback},
{“print”, DOMWindowInternal::printCallback},
{“stop”, DOMWindowInternal::stopCallback},
{“open”, V8DOMWindow::openCallback},
{“showModalDialog”, V8DOMWindow::showModalDialogCallback},
{“alert”, DOMWindowInternal::alertCallback},
{“confirm”, DOMWindowInternal::confirmCallback},
{“prompt”, DOMWindowInternal::promptCallback},
{“find”, DOMWindowInternal::findCallback},
{“scrollBy”, DOMWindowInternal::scrollByCallback},
{“scrollTo”, DOMWindowInternal::scrollToCallback},
{“scroll”, DOMWindowInternal::scrollCallback},
{“moveBy”, DOMWindowInternal::moveByCallback},
{“moveTo”, DOMWindowInternal::moveToCallback},
{“resizeBy”, DOMWindowInternal::resizeByCallback},
{“resizeTo”, DOMWindowInternal::resizeToCallback},
{“getMatchedCSSRules”, DOMWindowInternal::getMatchedCSSRulesCallback},
{“setTimeout”, V8DOMWindow::setTimeoutCallback},
{“clearTimeout”, DOMWindowInternal::clearTimeoutCallback},
{“setInterval”, V8DOMWindow::setIntervalCallback},
{“clearInterval”, DOMWindowInternal::clearIntervalCallback},
{“atob”, DOMWindowInternal::atobCallback},
{“btoa”, DOMWindowInternal::btoaCallback},
{“addEventListener”, V8DOMWindow::addEventListenerCallback},
{“removeEventListener”, V8DOMWindow::removeEventListenerCallback},
{“captureEvents”, V8DOMWindow::captureEventsCallback},
{“releaseEvents”, V8DOMWindow::releaseEventsCallback},
};

注意到這兩部分分別定義了JS所能調用的 屬性和所使用的方法。
然后再把這些屬性和方法注冊到V8執行時所需要的Context中，其流程大致是這樣的。
ScriptController::executeScript
ScriptController::evaluate
v8::Handle v8Context = V8Proxy::mainWorldContext(m_proxy->frame());
proxy->mainWorldContext();
V8DOMWindowShell::initContextIfNeeded
V8DOMWindowShell::createNewContext
V8DOMWindow::GetShadowObjectTemplate
static v8::Persistent ConfigureShadowObjectTemplate
void batchConfigureAttributes
void configureAttribute
(attribute.onProto ? proto : instance)->SetAccessor(v8::String::New(attribute.name),
attribute.getter,
attribute.setter,
v8::External::Wrap(attribute.data),
attribute.settings,
attribute.attribute);

注冊函數的執行流程和上面這個流程類似。
這樣V8就可以在指定的Context中調用所有WEB IDL中所規則的屬性和方法了。

總結

以上是生活随笔為你收集整理的webkit如何实现JS DOM binding—基于V8分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。