一种编译声明式组件为高效JS并精准更新DOM的前端开发框架制造技术

技术编号:40916982 阅读:13 留言:0更新日期:2024-04-18 14:43
本发明专利技术公开了一种编译声明式组件为高效JS并精准更新DOM的前端开发框架,其涉及web前端开发框架技术领域,旨在解决框架本身所依赖的代码也会被打包到最终的构建产物中,这就不可避免增加了打包后的体积的问题,其技术方案要点是包括系统框架,所述系统框架内部包括有模板编译模块、脏检查模块和双向绑定模块,所述模板编译模块、脏检查模块和双向绑定模块电性连接;所述模板编译模块采用Template模板约束jsx的方式进行编译;所述脏检查模块采用位掩码的技术来跟踪哪些值是脏的;所述双向绑定模块用于记录数据和DOM节点之间的对应关系。达到了精准更新,减少不必要的diff和缓存,大幅提高性能的效果。

【技术实现步骤摘要】

本专利技术涉及web前端开发框架,尤其是涉及一种编译声明式组件为高效js并精准更新dom的前端开发框架。


技术介绍

1、前端开发是创建web页面或app等前端界面呈现给用户的过程,通过html、css及javascript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互;

2、在前端领域,目前流行的框架,如react,vue,angular都是基于运行时的框架,当用户在你的页面进行各种操作改变组件的状态时,框架的运行时会根据新的组件状态(state)计算(diff)出哪些dom节点需要被更新,从而更新视图。

3、如申请号为cn202111193277.7的一种前端跨框架通信方法及前端框架结构,本申请中的前端跨框架通信方法,在确定第一前端开发框架作为外层框架时,将第二前端开发框架以嵌入式框架的形式作为第一前端开发框架的内层框架,完成第一前端开发框架和第二前端开发框架的隔离,由于第一前端开发框架包括与第二前端开发框架相关联的第一关联组件,第二前端开发框架包括与第一前端开发框架相关联的第二关联组件,在第一前端开发框架本文档来自技高网...

【技术保护点】

1.一种编译声明式组件为高效JS并精准更新DOM的前端开发框架,包括系统框架,其特征在于:所述系统框架内部包括有模板编译模块、脏检查模块和双向绑定模块,所述模板编译模块、脏检查模块和双向绑定模块电性连接;

2.根据权利要求1所述的一种编译声明式组件为高效JS并精准更新DOM的前端开发框架,其特征在于:所述模板编译模块的jsx具有JavaScript的完整表现力,用于构建非常复杂的组件,所述Template模板是一种非常有约束的语言,用于限制jsx的灵活语法。

3.根据权利要求2所述的一种编译声明式组件为高效JS并精准更新DOM的前端开发框架,其特征在于:所述模板编...

【技术特征摘要】

1.一种编译声明式组件为高效js并精准更新dom的前端开发框架,包括系统框架,其特征在于:所述系统框架内部包括有模板编译模块、脏检查模块和双向绑定模块,所述模板编译模块、脏检查模块和双向绑定模块电性连接;

2.根据权利要求1所述的一种编译声明式组件为高效js并精准更新dom的前端开发框架,其特征在于:所述模板编译模块的jsx具有javascript的完整表现力,用于构建非常复杂的组件,所述template模板是一种非常有约束的语言,用于限制jsx的灵活语法。

3.根据权利要求2所述的一种编译声明式组件为高效js并精准更新dom的前端开发框架,其特征在于:所述模板编译模块采用template模板约束jsx的方式编译情况如下:

4.根据权利要求3所述的一种编译声明式组件为高效js并精准更新dom的前端开发框架,其特征在于:所述p函数用于当name发生变更的时候,调用原生方法把t1这个原生dom节点更新。

5.根据权利要求4所述的一种编译声明式组件为高效js并精准更新dom的前端开发框架,其特征在于:所述脏检查模块中的位掩码用于将多个布尔值存储在单个整数中的技术,且一个比特位存放一个数据变化状态。

6.根据权利要求5所述的一种编译声明式组...

【专利技术属性】
技术研发人员:俞飞
申请(专利权)人:天翼云科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1