展开

关键词

重构进阶前端开发入门 (一) DOM 操作

这样切图、使用 HTML + CSS 编写网页的工作过程,我们一般称之为网页重构,关于网页重构和前端开发是否应该分离也一直存在争议。 但就日常工作的情况来看,二者还是很难彻底分开的,前端开发写脚本时必定需要网页重构的基础(比如动画控制、3D变换等),网页重构时也需要提前考虑前端脚本可控制标签的埋点,尽量避免后期再对页面结构和样式调整改动 那么,新同学们掌握网页重构后,又该开始哪些知识的学习?以便向前端开发进阶,拓展自己的技能树、全面发展呢? 个人认为主要需要学习的都是各类 JS 知识点。 DOM 操作 1. 什么是 DOM 做前端开发,每天都在和 DOM 打着交道,那么 DOM 到底是什么呢? 其它方式需要自己注意浏览器兼容性问题,以及区分单个 DOMDOM 数组返回值的情况。

4630

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 这个入口,连同对HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。在 1998 年,W3C 发布了第一级的 DOM 规范。 所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):        Core DOM                定义了一套标准的针对任何结构化文档的对象         XML DOM                定义了一套标准的针对 XML 文档的对象         HTML DOM                定义了一套标准的针对 HTML

48500
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    重构学习-重构原则

    什么是重构: 视上下文重构有两个不同的定义,第一个定义是名词形式 对软件内部结构的一种调整,目的是在不改变软件可观察行为的前提下,提高其可理解性,降低其修改成本 重构的另一人用法是动词形式 使用一系列的重构手法 强调一下,重构不会改变软件的可观察行为,也就是说重构之后功能和原来一样。 为什么要重构重构改进软件设计,如果没有重构,程序的设计会逐渐腐败变质。 重构的原动力是:代码设计无法帮助我轻松的添加我所需要的功能,如果用某种设计方式,添加功能会简单的多,这种情况可以用 重构来弥补。重构是一个快速流畅的过程,一旦完成重构,新特性的添加会更快速,更流畅。 如果在修改bug和审查代码时发现不合理的地方也要进行重构,这样是为了更好的阅读和理解代码 何时不重构: 如果发现代码太混乱,重构它不如重写来的简单这种情况下建议重写,不用进行重构。 最后你没有时间进行重构表明你其实早就该进行重构重构与性能: 有时为了让代码更容易理解,会做出一些使程序运行变慢的修改,这是个重要的问题。

    31050

    DOM

    概念 概念: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。 DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。 Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。 html中的标签在DOM中称为元素 为什么要获取页面上的元素呢? ​ 元素, 如果没有返回null getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组 常用的非表单元素属性有哪些?

    30830

    dom啦8 DOM事件

    18720

    DOM

    document.getElementsByTagName("p").length获得长度; 1.3 document.getElementsByClassName("one") (此方法可能在某些DOM

    24210

    DOM

    下述内容主要讲述了《JavaScript高级程序设计(第3版)》第10章关于“DOM”。 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。 结构动态执行查询的结果,因此DOM结构的变化能够自动反应在NodeList对象中。 返回nodeName属性等于name的节点 dom.attributes.removeNamedItem(name) 从列表中移除nodeName属性等于name的节点 dom.attributes.setNamedItem Comment类型 注释在DOM中是通过Comment类型来表示的。 二、DOM操作技术 1. 动态脚本 在元素添加到页面之前,是不会下载外部文件的。

    32421

    DOM

    1.DOM节点树 ?

    30030

    模拟虚拟dom生成实际dom

    // 生成虚拟dom function createVdom(tagName,props,children){ const VDom={ tagName, props , children } return VDom; } // 把虚拟dom转换成真实dom function createRdom(vDom,elm){ const {tagName,props,children}=vDom; //创建出真实的dom节点 const rDom=document.createElement(tagName);

    18310

    DOM

    文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来 .DOM属于浏览器,而不是javascript语言规范的规定的核心内容· 一丶查找元素 1·直接查找 document.getElementById //根据ID获取一个标签

    24630

    DOM

    下述内容主要讲述了《JavaScript高级程序设计(第3版)》第10章关于“DOM”。 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。 DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。 一、节点层次 在HTML页面中,文档元素始终都是元素。 1. 结构动态执行查询的结果,因此DOM结构的变化能够自动反应在NodeList对象中。 Comment类型

    注释在DOM中是通过Comment类型来表示的。

    二、DOM操作技术

    1.

    11230

    重构

    个人觉得代码重构非常有必要,写程序不但要给机器运行,更让人看的明白。 写代码如写诗一样才行。(内容代码为主,建议实践一下比较好点) 实例 一个图书馆出租书的程序。 接着:直接看下面的代码重构呗 Book类: 将按照书的不同类型,按照不同价格统计的方法移动到Book类中,因为这个按理应该属于Book类中的。 第二次重构 经过第一次重构,还是没有实现需求修改增加多个分类的效果。那么接下来使用接口抽象来再次重构。 最后想说: 如果你发现自己需要为程序添加一个特性,而代码结构使你无法很方便地达成目的,那么就先重构那个程序,使特性的添加比较容易进行,然后再添加特性。 参考文章 【重构】作者: Martin Fowler

    23110

    DOM Core 与 HTML-DOM

    1.DOM DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。 DOM与特定的平台、浏览器、语言无关,很多种语言都实现了DOM,比如因为JavaScript和PHP都实现了DOM,所以 JavaScript中有getElementsByTagName()方法,PHP 3.DOM Core和HTML-DOM 由于HTML与XML的相似性及差异,JavaScript不仅实现了标准的DOM方法和属性(即由W3C制定的),而且还实现了HTML特有的 DOM方法和属性,前者称为 DOM Core,并不专属于JavaScript,后者称为HTML-DOM。 不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样。

    46510

    边缘智能(EI):重构算力、重构算法、重构商业智能

    边缘智能(EI),重构智能算法引擎 真正和老百姓生活息息相关的应用都是哪些呢?一般来说与老百姓出门相关的都是衣食住行,那么衣食住行当中的AI和计算机视觉会有怎样关联呢? ? 衣食住行无外乎是智能家居、智能出行和线下零售等等几个常用的场景,这些场景当中都有硬件、软件和计算机算法等等完整的处理方式,我们通过EI重构数字空间,其中三个方面,重构算力、重构算法,同时也重构商业模式。 我们要用边缘计算的算法和系统,重构这个零售的空间。 ? 重构的空间能够给人解决什么—实时主动决策 我们认为主要是提供了变革性的决策,也就是主动地决策。

    51130

    vue源码解读--Vitual DOM(虚拟DOM)

    我这里下雨了,雨声很好听~ Virtual DOM产生的原因是浏览器中DOM是很“昂贵”的,我们来看一下一个p元素的属性都有哪些: ? 哇偶,这可不是全部的截图哦,可以看出,真正的DOM元素是非常庞大的。所以如果我们频繁的去做DOM更新,会产生一定的性能问题。 Virtual DOM是用一个原生的JS对象去描述一个DOM节点,所以它比创建一个DOM的代价要小很多。 在Vue.js中,Virtual DOM是用一个叫做VNode的Class来描述的,定义在src/core/vdom/vnode.js中: export default class VNode { 由于VNode只是用来映射到真实的DOM的渲染,不需要包含操作DOM的方法,so它是非常轻量和简单的。 愿我们有能力不向生活缴械投降---Lin

    25140

    代码重构(一):函数重构规则

    此时,你要考虑重构了。 重构,在《重构,改善既有代码的设计》这本经典的书中给出了定义,大概就是:在不改变代码对外的表现的情况下,修改代码的内部特征。 本篇博客的主题就是通过一些列的重构手法,对既有的需要重构的函数或者方法进行重构。并且会将每个示例在GitHub上进行分享,感兴趣的小伙伴可以对其进行下载。 实在是没有必要再找其他的例子说明这些重构规则,因为《重构:改善既有的代码的设计》这本书真的是太经典了。 1.需要重构的代码如下所示。 在写好需要重构的类后,我们要为该类写一个测试用例。这便于在我们重构时对重构的正确性进行验证,因为每次重构后都要去执行该测试用例,以保证我们重构是正确的。 所为我们可以再次对上述方法进行重构重构后的具体代码如下: ? 今天的博客主要讲了如何对既有代码中的函数进行重构,在本篇博客中提到了8大规则。

    55750

    代码重构(二):类重构规则

    在上篇博客《代码重构(一):函数重构规则(Swift版)》中,详细的介绍了函数的重构规则,其中主要包括:Extract Method, Inline Method, Inline Temp, Replace 关于上述这些函数重构的规则更为详细的信息请参考上一篇博客,在此就不做过多的赘述了。 今天这篇博客主要介绍一下类的重构。在我们写代码时,有些类是不规范的,需要重构。 当然,在你实现时,测试用例是必不可少的,因为测试用例可以在你重构时及时发现因为重构而产生的错误。言归正传,进入今天博客的主题。 搬移后,我们可以再使用函数的重构规则对新组的函数进行重构。下方就通过一个实例来直观的感受一下Move Method。 关于这两个函数重构的规则的具体细节请参见《代码重构(一):函数重构规则(Swift版)》中的介绍。下方截图是对BookCustomer类中的charge()函数进行重构后的结果,如下所示: ?

    469100

    代码重构(三):数据重构规则

    在《代码重构(一):函数重构规则(Swift版)》和《代码重构(二):类重构规则(Swift版)》中详细的介绍了函数与类的重构规则。 对数据的组织形式以及操作进行重构,提高了代码的可维护性以及可扩展性。 与函数重构与类重构类似,对数据结构的重构也是有一定的规则的。通过这些规则可以使你更好的组织数据,让你的应用程序更为健壮。 在本篇博客中将会结合着Swift代码实现的小实例来分析一下数据重构的规则,并讨论一下何时使用那些重构规则进行数据重构。 还是那句话“物极必反”呢,如果不恰当的使用重构规则,或者过度的使用重构规则不但起不到重构的作用,有时还会起到反作用。废话少说,进入今天数据重构的主题。 一.  在本次重构中,依照重构的规则,我们不会去修改我们的测试用例,这一点很重要。 (1)从根本解决问题,首先我们对Customer进行重构

    41860

    什么是重构,什么不是重构

    在这个过程中发现了bug、修改bug,这不是重构。优化不是重构。强化异常捕捉、增加预防性代码不是重构。让代码更容易测试不是重构——尽管重构能达到相同的效果。这些所有的事都是有益的。 Martin Fowler等人的贡献是使重构代码的最佳实践方法格式化,并把常见的、证明切实有效的重构模式——重构的目标和重构的步骤——进行归档分类。   重构很简单。 重构模式和现代化的IDE里的重构工具使重构变得容易、安全和代价低廉。 不要为了重构重构   重构可以被当成一种能给你的代码变更带来帮助的措施。 你不是为了重构重构,你重构是因为你想做其它的事情,而重构能帮助你完成这些事情。   重构的范围应该受你需要实施的代码变更或代码修正来决定——为了让代码变更更安全和更简洁,你应该做些什么? 换句话说:不要为了重构重构。不要对那些你不打算进行变更或不会变更的代码进行重构

    7520

    DOM小结

    DOM是针对HTML和XML文档的一个API(应用程序编程入口)。DOM描绘了一个层次化的节点树,允许开发人员添加/移除和修改页面某一部分。 注:从上面的引述中可以得知,DOM不仅存在于HTML中,DOM也不是JS的一部分。DOM只是提供了一些规范,具体JS就是根据这些规范去实现它提出的一些接口 。 这里有个问题, IE中所有的DOM对象都是以COM对象实现的,所以DOM对象和JS原生对象行为或活动特点不一致。这也导致JS对象引用IE DOM对象会内存泄漏。

    294100

    相关产品

    • 智能保险助手

      智能保险助手

      腾讯云智能保险助手CII可以将各类医疗票据结构化,辅助核保师给出AI建议的核保结论,帮助保险企业长期积累用户数据的同时提高核保效率。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券