webkit 中 javascript 与 WebCore DOM 的绑定

转载请注明出处：http://blog.csdn.net/awebkit

由于工作中需要调试 JavaScript 的时候并不过，我对 WebKit 中 JavaScript 的了解并不深刻，我只能对 JavaScript 与 WebCore DOM 之间的接口进行一番解释。

如有错误，欢迎指正。

JavaScript 的基础知识

我们先来了解一下 JavaScript Engine 到底是什么。

通俗的讲，JavaScript Engine 就是一个脚本解释器，内置了一些对象如 date 。事实上， JavaScript Engine 只识别对象，可以说我们看到的所有变量都是对象。根据 ECMAScript 标准，JavaScript 提供的对象如下。

仔细看看，你会发现没有 window 对象。惊讶吗？没错，确实没有 window 对象。那么，对于 JavaScript:window.open ，JavaScript Engine 又是如何解释的呢？

这里就涉及到了 JavaScript Engine 与 DOM 的绑定。

 

总结一下就是 JavaScript Engine 作为一个 Script Engine ，只提供了很简单的一些功能，但是他又提供了一种扩展，可以把其他扩展对象加入到这个 Script Engine 里面，让这个 Script Engine 能解释这些新对象。其中，对 DOM 的操作就是通过扩展来实现的，又叫 JavaScript 与 DOM 的绑定。

DOM 绑定时机

DOM 是在什么时候绑定的呢？

我们知道 script 对应 frame 。frame 里面的 ScriptController 是运行 script 的关键类。在遇到 script 标签需要运行script 的时候，会调用 ScriptController 的 initScript ，从名字可以看出来，这是初始化的操作。那么，都做了哪些初始化操作呢？我们看一下代码

JSDOMWindowShell* ScriptController::initScript(DOMWrapperWorld* world){    ASSERT(!m_windowShells.contains(world));    JSLock lock(SilenceAssertionsOnly);    JSDOMWindowShell* windowShell = createWindowShell(world);    windowShell->window()->updateDocument();    if (Page* page = m_frame->page()) {        attachDebugger(windowShell, page->debugger());        windowShell->window()->setProfileGroup(page->group().identifier());    }       m_frame->loader()->dispatchDidClearWindowObjectInWorld(world);    return windowShell;}

先来分析 createWindowShell 

JSDOMWindowShell* ScriptController::createWindowShell(DOMWrapperWorld* world){    ASSERT(!m_windowShells.contains(world));    Global<JSDOMWindowShell> windowShell(*world->globalData(), new JSDOMWindowShell(m_frame->domWindow(), world));    Global<JSDOMWindowShell> windowShell2(windowShell);    m_windowShells.add(world, windowShell);    world->didCreateWindowShell(this);    return windowShell.get();}

JSDOMWindowShell::JSDOMWindowShell(PassRefPtr<DOMWindow> window, DOMWrapperWorld* world)    : Base(JSDOMWindowShell::createStructure(*world->globalData(), jsNull()))    , m_world(world){    ASSERT(inherits(&s_info));    setWindow(window);}

void JSDOMWindowShell::setWindow(PassRefPtr<DOMWindow> domWindow){    // Explicitly protect the global object's prototype so it isn't collected    // when we allocate the global object. (Once the global object is fully    // constructed, it can mark its own prototype.)    RefPtr<Structure> prototypeStructure = JSDOMWindowPrototype::createStructure(*JSDOMWindow::commonJSGlobalData(), jsNull());    Global<JSDOMWindowPrototype> prototype(*JSDOMWindow::commonJSGlobalData(), new JSDOMWindowPrototype(0, prototypeStructure.release()));    RefPtr<Structure> structure = JSDOMWindow::createStructure(*JSDOMWindow::commonJSGlobalData(), prototype.get());    JSDOMWindow* jsDOMWindow = new (JSDOMWindow::commonJSGlobalData()) JSDOMWindow(structure.release(), domWindow, this);    prototype->putAnonymousValue(*JSDOMWindow::commonJSGlobalData(), 0, jsDOMWindow);    setWindow(*JSDOMWindow::commonJSGlobalData(), jsDOMWindow);}

代码很啰唆，可以只看我标记为黑体的部分，先理清一条线。

我们看到 createWindowShell 里面会创建 JSDOMWindow 。这是一个非常重要的类，对应了 DOMWindow的 JavaScript 类。我们看到所有的 JSXXX 对应的都是绑定JavaScript 与 XXX 关系的类，而且这部分类大都（除了bindings下面的 JSXXX 类）是根据 IDL 和脚本自动生成的（牛掰啊）。所以，我们可以看到 window.open 会先调用 JSDOMWindow ，然后调用到 DOMWindow 。JSDOMWindow 构造没什么好说的，继承于 JSDOMWindowBase ，我们看一下 JSDOMWindowBase 吧。

JSDOMWindowBase::JSDOMWindowBase(NonNullPassRefPtr<Structure> structure, PassRefPtr<DOMWindow> window, JSDOMWindowShell* shell)    : JSDOMGlobalObject(structure, shell->world(), shell)    , m_impl(window)    , m_shell(shell){    ASSERT(inherits(&s_info));    GlobalPropertyInfo staticGlobals[] = {        GlobalPropertyInfo(Identifier(globalExec(), "document"), jsNull(), DontDelete | ReadOnly),        GlobalPropertyInfo(Identifier(globalExec(), "window"), m_shell, DontDelete | ReadOnly)    };    addStaticGlobals(staticGlobals, WTF_ARRAY_LENGTH(staticGlobals));}

addStaticGlobals

把 window 对象加入到了 JavaScript 执行环境中，对应 JSDOMWindowShell （是个 JSObject 对象），从此，window 再也不是未定义了。

关于 addStaticGlobals 的详细介绍以后再说。你只要了解这个类把一些 JSObject 对象添加到了 JavaScript 执行环境中就可以了。

再回到开始的地方，还有一个标记黑色的函数 updateDocument，代码如下

void JSDOMWindowBase::updateDocument(){           ASSERT(m_impl->document());    ExecState* exec = globalExec();    symbolTablePutWithAttributes(exec->globalData(), Identifier(exec, "document"), toJS(exec, this, m_impl->document()), DontDelete | ReadOnly);}

其实，就是更新了 document 对应的类。这样，DOM 的两个基本对象（window 和 document）就都有了。

总结一下，ScriptController 在 initScript 中把 window 对象，document 对象添加到了 JavaScript 执行环境中，对window 等全局对象的操作可以找到对应的类。

如何扩展 JavaScript 对象

上面我们讲了 WebKit 是如何在 JavaScript Engine 中扩展 window document 对象的，理解了整个流程，对于我们扩展自己对象就轻车熟路了。可以查看后面的参考。

如果每个对象都像参考里面说的需要修改源码，那就太麻烦了，对于浏览器开发者来说，需要给上层提供扩展对象的接口。就像 android 里面的 addJavaScriptInterface 。

那么，在哪里添加接口呢？

再回到刚开始的地方，我们看到还有一个标记黑体的函数 dispatchDidClearWindowObjectInWorld ，这个首先是 FrameLoader 的函数，然后会走到 FrameLoaderClient 的对应函数。

我们看一下 android 这个函数的实现

// This function is used to re-attach Javascript<->native code classes.void FrameLoaderClientAndroid::dispatchDidClearWindowObjectInWorld(DOMWrapperWorld* world){    if (world != mainThreadNormalWorld())        return;    ASSERT(m_frame);    LOGV("::WebCore:: windowObjectCleared called on frame %p for %s\n",            m_frame, m_frame->loader()->url().string().ascii().data());    m_webFrame->windowObjectCleared(m_frame);}

经过 JNI 代码，调用到 java 部分 BrowserFrame 的代码。（请注意解释）

    /*        * This method is called by WebCore to inform the frame that     * the Javascript window object has been cleared.     * We should re-attach any attached js interfaces.     */    private void windowObjectCleared(int nativeFramePointer) {        Iterator<String> iter = mJavaScriptObjects.keySet().iterator();        while (iter.hasNext())  {            String interfaceName = iter.next();            Object object = mJavaScriptObjects.get(interfaceName);            if (object != null) {                nativeAddJavascriptInterface(nativeFramePointer,                        mJavaScriptObjects.get(interfaceName), interfaceName);            }            }            mRemovedJavaScriptObjects.clear();        stringByEvaluatingJavaScriptFromString(SearchBoxImpl.JS_BRIDGE);    }   

nativeAddJavascriptInterface 经过 JNI ，又会调用到 WebCoreFrameBridge::AddJavascriptInterface 函数。这个函数把新扩展的对象加入到 window 对象中。

static void AddJavascriptInterface(JNIEnv *env, jobject obj, jint nativeFramePointer,        jobject javascriptObj, jstring interfaceName){#ifdef ANDROID_INSTRUMENT    TimeCounterAuto counter(TimeCounter::NativeCallbackTimeCounter);#endif    WebCore::Frame* pFrame = 0;    if (nativeFramePointer == 0)        pFrame = GET_NATIVE_FRAME(env, obj);    else        pFrame = (WebCore::Frame*)nativeFramePointer;    LOG_ASSERT(pFrame, "nativeAddJavascriptInterface must take a valid frame pointer!");    JavaVM* vm;    env->GetJavaVM(&vm);    const char* myname = getCharactersFromJStringInEnv(env, interfaceName);    DBG_NAV_LOGD("::WebCore:: addJSInterface: %p, js %s", pFrame, myname);#if USE(JSC)    // Copied from qwebframe.cpp    JSC::JSLock lock(JSC::SilenceAssertionsOnly);    WebCore::JSDOMWindow *window = WebCore::toJSDOMWindow(pFrame, mainThreadNormalWorld());    if (window) {        RootObject *root = pFrame->script()->bindingRootObject();        setJavaVM(vm);        // Add the binding to JS environment        JSC::ExecState* exec = window->globalExec();        JSC::JSObject* addedObject = WeakJavaInstance::create(javascriptObj,                root)->createRuntimeObject(exec);        const jchar* s = env->GetStringChars(interfaceName, NULL);        if (s) {            // Add the binding name to the window's table of child objects.            JSC::PutPropertySlot slot;            window->put(exec, JSC::Identifier(exec, (const UChar *)s,                    env->GetStringLength(interfaceName)), addedObject, slot);            env->ReleaseStringChars(interfaceName, s);            checkException(env);        }    }#elif USE(V8)    if (pFrame) {        RefPtr<JavaInstance> addedObject = WeakJavaInstance::create(javascriptObj);        const char* name = getCharactersFromJStringInEnv(env, interfaceName);        // Pass ownership of the added object to bindToWindowObject.        NPObject* npObject = JavaInstanceToNPObject(addedObject.get());        pFrame->script()->bindToWindowObject(pFrame, name, npObject);        // bindToWindowObject calls NPN_RetainObject on the        // returned one (see createV8ObjectForNPObject in V8NPObject.cpp).        // bindToWindowObject also increases obj's ref count and decreases        // the ref count when the object is not reachable from JavaScript        // side. Code here must release the reference count increased by        // bindToWindowObject.        // Note that while this function is declared in WebCore/bridge/npruntime.h, for V8 builds        // we use WebCore/bindings/v8/npruntime.cpp (rather than        // WebCore/bridge/npruntime.cpp), so the function is implemented there.        // TODO: Combine the two versions of these NPAPI files.        NPN_ReleaseObject(npObject);        releaseCharactersForJString(interfaceName, name);    }#endif}

上面我讲了 android 平台如何扩展 JavaScript 对象的，当我们作浏览器开发的时候，可以照猫画虎。

但上面只是讲的流程，如果需要扩展 JavaScript 对象，必须对扩展的对象 JSObject 熟悉，知道 JavaScript 是如何认识对象的，这个以后再讲。

参考：

http://blog.csdn.net/horkychen/article/details/7640052