WebKit的JS Binding解析

简介: 转载请注明出处:http://blog.csdn.net/horkychen WebCore与JavaScriptCore之间使用了Proxy模式,WebCore为JSC提供了一层binding层做为封装。
转载请注明出处:http://blog.csdn.net/horkychen
WebCore与JavaScriptCore之间使用了Proxy模式,WebCore为JSC提供了一层binding层做为封装。
Webkit参照W3C Web IDL(之前称为Language Bindings for DOM Specifications) 描述DOM接口,但不完全相同。其完整的名称为WebKitIDL, 详细的定义可以参考下面的链接:
 
每一个DOM组件除了实现文件外,都有一个IDL文件定义它的接口规格。可以在WebCore相关的目录下找到。

 

WebKit提供了一组perl脚本完成IDL转换功能。入口脚本为generate-binding.pl, 示意图如下:

 

生成的接口通过JSNode与Node关联,从而实现了与DOM各组件的关联。

 

JSDocument会在初始化时被JSGlobalObject的addStaticGlobals压入一个jsNull到JSC的Heap, 在准备解析脚本前将一个对象通过JSDomWindowBase::updateDocument更新到JSC::Heap中,供JSC在执行期使用。Frame的setDocument方法也会在读到脚本时被调用,以更新合适的document对象到JSC。

当JavaScript以document为接口,呼叫如getElementById获取组件时, 其执行序列如下:

 

下面是jsDocumentPrototypeFunctionGetElementById的实现:

EncodedJSValue JSC_HOST_CALL jsDocumentPrototypeFunctionGetElementById(ExecState* exec)

{

    JSValue thisValue = exec->hostThisValue();

……

    JSC::JSValue result = toJS(exec, castedThis->globalObject(), WTF::getPtr(impl->getElementById(elementId)));

    return JSValue::encode(result);

}

*其中的impl就是通过JSNode接口关联到的Document对象.


参考:为JavaScript Binding添加新DOM对象的三种方式及实作

 

目录
相关文章
|
2月前
|
JavaScript 前端开发
Vue 应用 main.js 里的源代码解析
Vue 应用 main.js 里的源代码解析
26 0
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
3天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
JavaScript 前端开发 IDE
JavaScript 中的 structuredClone():详尽解析
您是否知道,现在 JavaScript 中有一种原生的方式可以深拷贝对象?
|
2月前
|
前端开发 JavaScript BI
JavaScript的过滤大师:深度解析Filter用法
JavaScript的过滤大师:深度解析Filter用法
68 0
|
2月前
|
JSON 前端开发 JavaScript
掌握现代JavaScript:ES7到ES12的新特性全解析!
ES2016(ES7)中新增了如下特性👇 Array.prototype.includes Exponentiation Operator
|
3月前
|
JavaScript
js生成二维码和解析二维码
js生成二维码和解析二维码
25 0

推荐镜像

更多