您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

DOM怎么封装的?各种库是怎么写的?

时间:2023-05-19 13:44:29  来源:今日头条  作者:NativeBase


DOM怎么封装的?各种库是怎么写的?(DOM库,AJAX库,动画 库,事件库)?

在作用域套作用域的时候;子作用域内尽量不返回引用数据类型,因为闭包内的值,是另外一个子闭包的返回值的时候,如果子闭包的返回值是字面量,那么浏览器会在空闲的时候,把作用域销毁;而如果返回值的是一个引用数据类型的值,那么闭包是不会销毁的,在性能优化上,不好!

下面是封装思路;

var Tool = function () {
  //构造函数模式;用的时候需要new一下;
  this.flag = "getElementsByClassName" in document;
	//getElementsByClassName 在IE678中是不存在的。用这个来判断是不是低版本的IE浏览器;
	//每次只需要判断this.flag是否存在就可以了;如果存在就是标准浏览器,如果不存在就是IE; 5 };
  Tool.prototype = {//方法是定义在Tool的prototype上的;
    constructor: Tool,
  //重写prototype后,prototype的constructor已经不是原来的Tool了;需要手动给他强制写会到Tool上去;
    getIndex: function () {},//简单的备注说明;
    toJSON:function(){},//简单的备注说明;
    likeArray:function(){}//简单的备注说明;  
}

下面是一些 DOM 封装的技术:

1.封装元素:通过封装 html 元素,可以让我们更加灵活地访问和修改 HTML 元素。比如,通过封装元素可以方便地对文本内容进行修改,而不需要直接修改 HTML 代码。

DOM 封装的一种方式是使用 createElement 和 AppendChild 方法来创建和添加 HTML 元素。例如:

var element = document.createElement('div');  
var textNode = document.createTextNode('这是一个段落');  
element.appendChild(textNode);  
  
var element2 = document.createElement('p');  
var textNode2 = document.createTextNode('这是另一个段落');  
element2.appendChild(textNode2);  
  
document.body.appendChild(element);  
document.body.appendChild(element2);

2.提供元素节点对象:DOM 提供了一些接口来操作文档中的元素节点,比如 getElementById、getElementsByClassName、getElementsByTagName 等。这些接口可以让我们更加方便地访问和修改文档中的元素。

DOM 封装的另一种方式是使用 document.querySelector、document.querySelectorAll、document.getElementById 等方法来获取和操作元素节点。例如:

var element = document.querySelector('#myElement');  
var children = element.children;

3.提供事件接口:DOM 还提供了一些接口来封装和管理文档的事件处理逻辑,比如 addEventListener、removeEventListener、dispatchEvent 等。这些接口可以让我们更加灵活地管理和触发文档中的事件。

DOM 封装的第三种方式是使用 addEventListener 方法来添加事件监听器。例如:

element.addEventListener('click', function() {  
  // 处理点击事件的逻辑  
});

4.提供动画功能:DOM 提供了一些接口来实现动画效果,比如 requestAnimationFrame、css 动画等。这些接口可以让我们更加方便地实现动画效果,而不需要手动编写复杂的动画代码。

DOM 封装的第四种方式是使用 CSS 动画来实现动画效果。例如:

@keyframes myAnimation {  
  from {  
    transform: rotate(0deg);  
  }  
  to {  
    transform: rotate(360deg);  
  }  
}  
  
element.style.animation = 'myAnimation 2s linear forwards';


Tags:DOM   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Vue中虚拟Dom技术,你学会了吗?
在Vue中,虚拟DOM(Virtual DOM)是一项关键的技术,它是一种用JavaScript对象模拟真实DOM结构的机制。虚拟DOM的引入旨在提高DOM操作的效率,特别是在频繁的数据变化时。1. 为什么需...【详细内容】
2023-12-26  Search: DOM  点击:(65)  评论:(0)  加入收藏
Python中的Random模块,随机性的神奇世界
随机性在计算机编程和数据科学中扮演着至关重要的角色。Python中的random模块提供了丰富的工具和函数,帮助我们生成随机数、操作随机序列,以及模拟随机性事件。在本文中,我们将...【详细内容】
2023-10-27  Search: DOM  点击:(80)  评论:(0)  加入收藏
大型DOM结构是如何影响交互性的
没有办法绕过这一点:当你构建一个网页时,该页面一定会有一个文档对象模型(DOM)。DOM代表了你页面HTML的结构,并为JavaScript和CSS提供了访问页面结构和内容的途径。然而,问题在于D...【详细内容】
2023-09-25  Search: DOM  点击:(290)  评论:(0)  加入收藏
通过WebAssembly,C++率先打响虚拟 DOM 第一枪!
前言本文主要和大家讨论 asm-dom,即通过 WebAssembly 技术 C++ 率先支持虚拟DOM。在年初,我也确实使用 WebAssembly 将客户端应用成功移植到了 Web,这也是为什么我一直对 WebAs...【详细内容】
2023-08-22  Search: DOM  点击:(284)  评论:(0)  加入收藏
一次DOM曝光封装历程
随着最近曝光埋点的需求越来越频繁,就想把之前写好的曝光逻辑抽出来封装了一下作为公用。初版逻辑:window.scroll 监听滚动 + 使用 getBoundingClientRect() 相对于视口位置...【详细内容】
2023-08-02  Search: DOM  点击:(249)  评论:(0)  加入收藏
Maps与WeakMaps在DOM节点管理中的妙用
使用 Maps 和 WeakMaps 可以提高代码的可读性和可维护性。将DOM节点与相关数据关联起来,有助于使代码更清晰易懂。这篇文章讨论了使用 Maps 和 WeakMaps 处理DOM节点的优势。...【详细内容】
2023-05-22  Search: DOM  点击:(316)  评论:(0)  加入收藏
DOM怎么封装的?各种库是怎么写的?
DOM怎么封装的?各种库是怎么写的?(DOM库,AJAX库,动画 库,事件库)?在作用域套作用域的时候;子作用域内尽量不返回引用数据类型,因为闭包内的值,是另外一个子闭包的返回值的时候,如果子...【详细内容】
2023-05-19  Search: DOM  点击:(252)  评论:(0)  加入收藏
DOM的概念和操作
DOM(Document Object Model)也称为文档对象模型,是 W3C 组织推荐的处理可扩展标记语 言的标准编程接口。DOM 是一种与浏览器、平台和语言无关的应用程序接口(API),它可以动态 地访...【详细内容】
2022-12-03  Search: DOM  点击:(335)  评论:(0)  加入收藏
我让虚拟DOM的diff算法过程动起来了
去年写了一篇文章手写一个虚拟DOM库,彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程,当时使用的是双端diff算法,今年看到了Vue3使用的已经是快速diff算法,所以也想...【详细内容】
2022-10-30  Search: DOM  点击:(243)  评论:(0)  加入收藏
原生Javascript常用的获取dom元素的几种方法
<div class="wrap"> <div id="wrap-con"> <input type="text" /> <div class="form-item">1</div> <div class="form-item">2</div> </div&...【详细内容】
2022-06-20  Search: DOM  点击:(523)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(12)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(32)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(69)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(38)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条