首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript/MooTools - 最好将元素保存在对象属性中,而不是每次使用$('elem')进行访问?

当然可以。在使用JavaScript或MooTools进行开发时,如果需要频繁地访问某个元素,最好将该元素保存在对象属性中,而不是每次使用$('elem')进行访问。这样做的好处有以下几点:

  1. 性能优化:通过将元素保存在对象属性中,可以减少对DOM的查询次数,从而提高代码的执行效率。
  2. 代码可读性:将元素保存在对象属性中,可以使代码更加易读和易懂,同时也有助于代码的维护。
  3. 代码复用性:将元素保存在对象属性中,可以使得代码更加模块化,有助于提高代码的复用性。
  4. 避免重复查询:使用$('elem')进行访问时,每次都会查询一次DOM,如果页面中有大量的元素需要访问,这样会导致性能问题。

以下是一个简单的示例,展示了如何将元素保存在对象属性中:

代码语言:javascript
复制
var myApp = {
  init: function() {
    this.myElement = $('elem');
  },
  doSomething: function() {
    // 使用this.myElement进行操作,而不是每次使用$('elem')
    this.myElement.setStyle('color', 'red');
  }
};
myApp.init();
myApp.doSomething();

在这个示例中,我们将元素保存在myApp对象的myElement属性中,然后在doSomething方法中使用this.myElement进行操作。这样做可以避免每次都使用$('elem')进行访问,提高代码的执行效率。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【兼容性】js 浏览器兼容问题处理方式

(3)CSS的"float"属性访问 问题描述: Javascript访问一个给定CSS 值的最基本句法是:object.style.property,但部分CSS属性Javascript的保留字命名相同...(5)访问和设置class属性 问题描述: 同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。...,按钮没反应,IE,就可以,因为对于IE来说,一个HTML 元素的 ID 可以直接在脚本当作变量名来使用Firefox不可以。...因为IEevent作为window对象的一个属性可以直接使用,但是Firefox使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。...title:照片的tip说明, IE如果没有定义title,alt也可以作为img的tip使用,但是Firefox,两者完全按照标准的定义使用 兼容处理: 最好将alt和title对象都写全

31420

JavaScript Property 和 Attribute 的区别详解

原来“sth”被放到了attributes这个对象里面,这个对象按顺序记录了我们TAG定义的属性属性的数量。...由此可以得出: HTML标签定义的属性和值会保存该DOM对象的attributes属性里面; 这些attribute属性JavaScript的类型是Attr,不仅仅是保存属性名和值这么简单; 那么...执行完setAttribute以后,就如同直接更改attributes的同名属性getAttribute的结果与访问property的结果一模一样,不会像直接访问attritudes那样返回一个...而且,这并不是简单的双向绑定,property的href永远保存绝对路径,attribute的href则是保存相对路径。...可以使用DOM的setAttribute方法来同时更改attribute; 直接访问attributes上的值会得到一个Attr对象通过getAttribute方法访问则会直接得到attribute

3.7K20
  • 【翻译】JavaScript内存泄露

    我们进行JavaScript开发时,很少会考虑内存的管理。JavaScript变量的声明和使用看起来是一件很轻松的事,底层的细节处理交给浏览器去做就好了。...典型的的便是调用栈(call stack)中被引用的全部对象(即当前function域内的所有局部变量和参数),以及部分全局变量。...比如每次请求创建的函数,它们不被回收因为它们是监听器或者其他有用的东西。 如果外层的变量只被外层函数使用不被内层函数引用,这样的变量可以通过设置null来节省内存。...这个API的目的是令DOM节点不产生对JavaScript对象的直接引用。用一个安全的数字来标识。被设置的data属性jQuery.cache,内部的事件监听也是通过$.data()API驱动。...然后就可以使用detach()方法了,detach()方法删除元素的同时并不会清除data属性和原生方法; 如果你不喜欢第一种方法,并且DOM树非常庞大,你可以将$elem.detach()和$(elem

    2.1K60

    JavaScript

    本教程,我们将了解到一些广受欢迎的 JavaScript 框架: jQuery Prototype MooTools 所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM...本教程,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。 ---- jQuery jQuery 是目前最受欢迎的 JavaScript 框架。...它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。 jQuery 同时提供 companion UI(用户界面)和插件。.../jquery.min.js"> ---- 使用框架 您决定为网页使用 JavaScript 框架之前,首先对框架进行测试是明智的。...JavaScript 框架很容易进行测试。您无需计算机上安装它们,同时也没有安装程序。 通常您只需从网页引用一个库文件。 本教程的下一章,我们会为您完整地讲解 jQuery 的测试过程。

    52320

    翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    这些技巧第 5 章已经提到了。 概括一下我们的小工具的功能:代码将在每次收到添加新股票事件时添加 元素,并在股票价格更新事件发生时更新价格。...用来股票信息对象添加一个 name 属性,它的值和这个对象 id 一致。name 会作为股票的名称展示工具。 有一个关于 transformObservable(..)...映射函数先把 DOM 元素映射成它的子元素数组,然后我们用 Array.from(..) 把这个数组变成一个真实的数组(不是一个 NodeList)。...我们用闭包在这两个中间函数中保存了 ticker 数据,第 7 章,我们知道了还可以把 ticker 保存对象属性上,通过使用两个函数上的指向 stockTickerUI 的 this 来访问...感谢你参与到我学习 JavaScript 的函数式编程的原理的过程来。我希望你的学习过程和我的一样,充实充满希望!

    80000

    面试前必备的 JavaScript 基础知识梳理总结

    为了使代码简洁易懂,建议函数主要使用局部变量和参数,不是外部变量。 与不获取参数但将修改外部变量作为副作用的函数相比,获取参数、使用参数并返回结果的函数更容易理解。...和其他系统不同,JavaScript 时间戳以毫秒为单位,不是秒。 有时我们需要更加精准的时间度量。JavaScript 自身并没有测量微秒的方法(百万分之一秒),但大多数运行环境会提供。...类生命中,它们都被用关键字 static 进行了标记。 静态属性被用于当我们想要存储类级别的数据时,不是绑定到实例。...为了隐藏内部接口,我们使用受保护的或私有的属性: 受保护的字段以 _ 开头。这是一个众所周知的约定,不是语言级别强制执行的。程序员应该只通过它的类和从它继承的类访问以 _ 开头的字段。...性能:基准测试(benchmark)取决于引擎,但通常使用简单的代理访问属性所需的时间也要长几倍。实际上,这仅对某些“瓶颈”对象来说才重要。 56.

    80320

    如何使JavaScript更高效

    有更多的方法给开发者提供使得,比如使用一个普通变量来引用对象,然后通过这个变量来访问属性。显然只有当属性不是字面类型,比如字符串或布尔型的时候,才能这样做。...所有属性和方法都是字符串对象不是值上定义的。如果你对字符串值调用属性和方法,ECMAScript 引擎必须用相同的字符串值隐式地创建一个新的字符串对象,然后才能调用方法。...每次访问 length 属性每次调用 charAt 方法的时候都会创建对象: var s = '0123456789';for(var i = 0; i < s.length; i++) { s.charAt...如果某个引用保存在当前文档的全局变量,或者保存在某个长期存在的对象属性,通过将其设置为 null,或者通过 delete 来清除它。...理论上来说,页面加载完成之后可以通过 SCRIPT 元素来加载额外的脚本并通过 DOM 添加到文档。当前所有主流浏览器都支持这样做,但是它实际上可能是浏览器上请求不是立即加载脚本。

    1.6K10

    JavaScript 面试必备的基础知识梳理(71个知识点)

    为了使代码简洁易懂,建议函数主要使用局部变量和参数,不是外部变量。 与不获取参数但将修改外部变量作为副作用的函数相比,获取参数、使用参数并返回结果的函数更容易理解。...和其他系统不同,JavaScript 时间戳以毫秒为单位,不是秒。 有时我们需要更加精准的时间度量。JavaScript 自身并没有测量微秒的方法(百万分之一秒),但大多数运行环境会提供。...类生命中,它们都被用关键字 static 进行了标记。 静态属性被用于当我们想要存储类级别的数据时,不是绑定到实例。...为了隐藏内部接口,我们使用受保护的或私有的属性: 受保护的字段以 _ 开头。这是一个众所周知的约定,不是语言级别强制执行的。程序员应该只通过它的类和从它继承的类访问以 _ 开头的字段。...性能:基准测试(benchmark)取决于引擎,但通常使用简单的代理访问属性所需的时间也要长几倍。实际上,这仅对某些“瓶颈”对象来说才重要。 56.

    1.2K10

    十二、面向对象实战之封装拖拽对象

    为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽。 •不封装对象直接实现;•利用原生JavaScript封装拖拽对象;•通过扩展jQuery来实现拖拽对象。...点击查看一个让元素动起来的小例子[2] 由于修改一个元素top/left值会引起页面重绘,translate不会,因此从性能优化上来判断,我们会优先使用translate属性。...实际开发,一个对象我们常常会单独放在一个js文件,这个js文件将单独作为一个模块,利用各种模块的方式组织起来使用。当然这里没有复杂的模块交互,因为这个例子,我们只需要一个模块即可。...如果属性值只能被实例单独拥有,比如person对象的name,只能属于某一个person实例,又比如这里拖拽对象,某一个元素的初始位置,也仅仅只是这个元素的当前位置,这个属性,则适合放在构造函数。...如果一个属性仅仅供内部方法访问,这个属性就适合放在模块作用域中。 关于面向对象,上面的几点思考我认为是这篇文章值得认真思考的精华。

    80520

    回到基础:理解 JavaScript DOM

    浏览器用于创建文档的描述被称为文档对象模型(DOM)。它使 Javascript 能够访问和操作页面的元素和样式。...该模型构建在基于对象的树结构,并定义: HTML 元素作为对象 HTML 元素属性和事件 访问HTML元素的方法 ? HTML DOM模型 元素的位置称为节点。...(“h1”).style.borderBottom = “solid 3px #000”; CSS 属性需要用 camelcase 不是普通的 css 属性名来编写。...在这个例子,我们用 borderBottom 不是 border-bottom。 添加和删除元素 现在我们来看看如何添加新元素和删除现有元素。...删除元素 1var elem = document.querySelector('#header'); 2elem.parentNode.removeChild(elem); 本例我们得到一个元素使用

    2.5K30

    mootools入门

    介绍 MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。 它为web开发者提供了一个跨浏览器js解决方案。处理js、css、html时候。...为什么使用MooTools 灵活,模块化的框架,用户可以选择自己需要的组件。 MooTools符合OO的思想,使代码更强壮,有力,有效。 高效的组件机制,可以和flash进行完美的交互。...MooTools虽然也能用在中小项目上,但是,其潜力的发挥要在大型、需要编写大量JavaScript的应用的网站项目上。 下载安装 下载并引用最新MooTools 1.6核心库。... 如何使用 MooTools 选择器 DOM元素选择器 //...MooTools使用的类型有: String Array Number Function RegExp Date Boolean MooTools自定义的类型有: Element Elements Event

    1.3K20

    深入理解JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API。...文档上的任何内容,我们都可以使用JavaScript和DOM API来访问,所以类似地,我们也可以访问上面的无序列表,唯一的问题是该元素没有ID属性,如果ID的话就可以使用相同的方式,或者使用如下getElementsByTagName...不是所有的属性都是原始数据类型(strings, numbers, Booleans等等),sytle属性也是一个包含自己属性对象,很多元素属性都是只读的,也就是说不能修改他们的值。...: 注:正如我们上章所说的,DOM和JavaScript语言是2个单独的东西,浏览器事件是DOM API的一部分,不是JavaScript的一部分。...总结 原生的DOM方法和属性足够我们日常的应用了,今天的内容,我们还覆盖到了DOM元素的操作以及相关的浏览器事件模型,同时也列举了一些例子便于大家理解。如果还有什么问题,欢迎留言讨论交流。

    64330

    JavaScript的函数重载(Function overloading)

    overload(1,2); //两个参数 JavaScript,同一个作用域,出现两个名字一样的函数,后面的会覆盖前面的,所以 JavaScript 没有真正意义的重载。...这个需求 find方法 需要根据参数的个数不同执行不同的操作,下来我们通过一个 addMethod 函数,来 users 对象添加这个 find 方法。...而在只有一个参数的情况下,如果参数类型是字符串或者数组就是获取属性值,如果参数是对象,就是是设置属性值。 jQuery 的 css( ) 方法就是通过判断参数的类型,来确定执行什么操作。..., function( elem, name, value ) { var styles, len, map = {}, i = 0; // 判断属性名是不是数组 // 是数组就遍历...3、jQuery.css( ) :DOM元素上读取DOM样式值 这里的 jQuery.css( ) 是通过 jQuery.extend( ) 添加的方法,而我们开始提到的 css( )方法

    1.5K10

    js 设置html标签样式表,js怎么设置css样式?

    1、直接设置style对象(内联样式) 使用JavaScript设置元素样式的简单方法是使用style属性我们通过JavaScript访问的每个HTML元素时都有一个 style对象。...此对象允许我们指定CSS属性并设置其值。...= ‘150px’; 注:JavaScript使用驼峰原则(例:backgroundColor)不是短划线(background-color)表示属性名称 该style属性元素上添加样式内联: Hello...2、设置style属性–添加全局样式 另一种方法是将里带有CSS属性元素注入DOM。将在设置应用于一组元素不仅仅是一个元素的样式时,这非常有用。 首先,我们将创建一个样式元素。...要使用JavaScript完成相同的结果,我们将使用classList API。

    23.9K30

    翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    这些技巧第 5 章已经提到了。 概括一下我们的小工具的功能:代码将在每次收到添加新股票事件时添加 元素,并在股票价格更新事件发生时更新价格。...用来股票信息对象添加一个 name 属性,它的值和这个对象 id 一致。name 会作为股票的名称展示工具。 有一个关于 transformObservable(..)...映射函数先把 DOM 元素映射成它的子元素数组,然后我们用 Array.from(..) 把这个数组变成一个真实的数组(不是一个 NodeList)。...我们用闭包在这两个中间函数中保存了 ticker 数据,第 7 章,我们知道了还可以把 ticker 保存对象属性上,通过使用两个函数上的指向 stockTickerUI 的 this 来访问...感谢你参与到我学习 JavaScript 的函数式编程的原理的过程来。我希望你的学习过程和我的一样,充实充满希望!

    96350

    史上最全的前端基础面试题,你必须掌握哦!

    如果没有设置值,这个属性是继承属性,从父元素继承 如果没设置,并且不是继承属性使用css规范指定的初始值 computed value: 以specified value根据规范定义的行为进行计算...属性清理浮动元素上下的空白 * 2 使用display使用table不是block:可以防止容器和 * 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7 * zoom:...有什么区别和联系 e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素源文件设置的属性 e.propName通常是HTML文档访问特定元素的特性...,浏览器解析元素后生成对应对象(如a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用getAttribute进行访问 e.getAttribute...,当子类需要这些参数时应该在构造函数中进行初始化和设置 总结:继承应该是继承方法不是属性,为子类设置父类实例属性应该是通过子类构造函数调用父类构造函数进行初始化 方法2: 优点:正确设置原型链实现继承

    1.9K31

    2019年初 JS面试必考(概率大)的面试题

    setInterval() 传递函数不是字符串作为参数 尽量使用直接量创建对象和数组 最小化重绘(repaint)和回流(reflow) DOM 元素 e 的 e.getAttribute(propName...通常是 HTML 文档访问特定元素的特性,浏览器解析元素后生成对应对象(如 a 标签生成 HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,...Document 对象是 HTML 文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点) Document 对象使我们可以通过脚本对 HTML 页面的所有元素进行访问 Document...工厂模式: 主要好处就是可以消除对象间的耦合,通过使用工程方法不是 new 关键字。...attribute 是 dom 元素文档作为 html 标签拥有的属性; property 就是 dom 元素 js 作为对象拥有的属性

    96720

    JS框架设计之命名空间设计一种子模块

    命名空间 1、种子模块作为一个框架的开始,除了负责初始化框架的基础部分。 2、种子模块作为框架的开始,那么什么是种子框架的开始呢?...4、Javascript的一切都是基于对象的,Javascript通过复合类型的对象来构建命名空间比如:function,regexp,object等,我们往一个对象上添加一个属性,而这个属性又是一个对象...6、全局变量的污染 全局变量的污染主要分两类 (1)对js原生对象的污染、Prototype,mootools和Base2归为一类,Prototype的原理是对Javascript对象进行扩展,但是他没有考虑到和其他库的兼容性问题...,Prototype的基础上 ,而且有点渊源的插件几乎都和Prototype有关,mootools是Prototype的升级版,更加的oo,全面复制其API,Base则想修复IE的bug,让IE拥有标准浏览器的...7、jQuery(命名空间)多库共存问题 因为jQuery最初也是非常弱小的,它想人家使用自己的框架,他也想Prototype那样使用$符作为命名空间。

    1K100

    深入理解Shadow DOM v1

    shadow DOM不是超级英雄电影的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(或简称DOM)缺少的树封装方法。...W3C文档对象模型(DOM)提供了一个平台和语言无关的应用程序编程接口(API),用于表示和操作存储HTML和XML文档的信息。 通过使用DOM,程序员可以访问、添加、删除或更改元素和内容。...DOM将网页视为树结构,每个分支以节点结束,每个节点包含一个对象,可以使用JavaScript等脚本语言对其进行修改。...概念方面,这类似于元素的工作方式。 可继承的样式 shadow DOM允许你创建独立的DOM元素不会从外部看到选择器可见性,但这并不意味着继承的属性不会通过shadow边界。...重新定位事件 shadow DOM内触发的事件可以穿过shadow边界并冒泡到light DOM;但是,Event.target的值会自动更改,因此它看起来好像该事件源自其包含的shadow树不是实际元素

    1.1K20
    领券