`

jquery工作原理与优化3

阅读更多

这篇就接着上一篇的话题,减少全局变量提高jquery的执行效率,这个应该和jquery本身没有多大关系,而是和js的执行引擎是有相当大的关系。下边我们先说说js的执行引擎的工作原理。
      执行引擎并不直接执行代码,而是先将代码文本分析(parser)成代码树,再按规则执行代码树中的指令结点(op)。指令在JS中总是确定的,例如源代 码中是FOR,那么总是JSOP_FOR*这个操作码。但是,指令所使用的参数却不是确定的,而是通过参数名绑定到一个具体的操作数。参数名是字符串,也 就是标识符;操作数则位于该代码上下文所使用的栈中。这个栈中的操作数使用slot位置来表示。因此,这个关键的函数就是 BindNameToSlot()。
     上边的这段话,不知道大家能理解多少,js这门语言和其他的高级语言有点不一样,先分析再顺序执行,因为我们写代码的时候有可能会在页面的不同地方都是实 现代码,而js本身并不聪明,当遇见全局变量的时候就会在以前的分析树上找相应的上下文(闭包),当然局部变量就不存在这个问题,只是挂载到当前的节点上 即可,如果我们的全局变量比较多的时候,js执行器循环遍历的次数就越多,我们应用会很方便,但是效率就会降低。除非我们万不得已的时候,最后不要全局变 量。
    那我们写jquery的时候应当如何注意这些事情呢?jquery本身就没有全局变量,而是执行一个匿名函数(function(){})();这样的目 的有两个,第一减少全局变量的冲突,第二就是为了提高效率,由于jquery的ajax应用可以执行js代码,我们很多时候为了方便会在被请求的页面上写 js代码例如:
<script>
    var obj=$("#table1").ingrid({
      //........................................
    });
</script>
这里的obj就是一个全局变量,违背上边的理论,优化后的结果:
<script>
   $(function(){
    var obj=$("#table1").ingrid({
      //........................................
    });
});
</script>
这个里的obj就是一个局部变量,当时大家会问,那我就是想要obj成全局变量,其他地方来引用,实际上jquery给我们这个机会,那就是extend这个方法,我们可以把obj扩展到jquery对象的一个属性上,代码如下:
<script>
   $(function(){
    var obj=$("#table1").ingrid({
      //........................................
    });
    $.obj={};
    $.extend($.obj,obj);

});
</script>
这样我们在页面其他地方就可以这样调用obj了:$.obj是不是也达到了全局变量的效果,而并没有重新遍历js分析树,提高执行的效率。

转载自:http://hi.baidu.com/itjquery/blog/item/9cf7d616de4aac0fc93d6d89.html

分享到:
评论

相关推荐

    jquery工作原理

    **jQuery工作原理详解** jQuery,一个著名的JavaScript库,自2006年发布以来,以其简洁易用的API和强大的功能赢得了开发者们的广泛喜爱。它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文将...

    jQuery优化

    深入学习 jQuery API,了解每个方法的工作原理,避免使用效率低下的方法。熟悉插件和扩展,根据需求选择最适合的工具。 通过以上策略,可以有效地优化 jQuery 代码,提升页面性能。在开发过程中,应持续关注性能...

    jquery 工作原理及源代码示列

    **jQuery工作原理** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。其工作原理的核心在于提供了一种更简洁、更易读的API,来处理JavaScript中的常见任务。 1. ...

    jQuery选择器的工作原理和优化分析

    jQuery选择器是jQuery库的核心部分,它用于在DOM树中高效地...理解jQuery选择器的工作原理并对其进行优化,可以显著提高页面加载速度和用户交互体验。在编写jQuery代码时,应始终考虑性能,选择最高效的选择器和方法。

    jquery1.51

    对于进阶开发者,可以研究源码,了解其内部工作原理,以及如何利用jQuery构建高效的应用。 总结,jQuery 1.5.1作为一款经典版本,其强大的功能和易用性使其在Web开发中占有重要地位。理解并掌握这一版本,将有助于...

    jquery.dad.js div拖拽排序,及bug优化

    我们将详细解析其工作原理,以及如何进行优化以解决可能遇到的bug。 首先,`jquery.dad.js`依赖于jQuery框架,因此在使用前需确保页面中已经引入了jQuery库。这个库的核心功能是将普通的`div`元素转化为可拖动并...

    jQuery性能优化指南

    11. **全面掌握jQuery库**:了解jQuery的底层工作原理和最佳实践,避免使用不必要的API,熟悉更高效的方法和技巧。 通过遵循这些规则,开发者可以显著提高jQuery应用的性能,提供更快的页面加载速度和更好的用户...

    jquery 3D立体图像查看

    在IT领域,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。...而实现这一技术的关键在于理解3D变换原理、熟练运用jQuery以及掌握CSS3动画和兼容性处理。

    Jquery性能优化指南

    熟悉jQuery API的所有功能,理解其工作原理,避免使用低效的方法。例如,使用`.data()`代替`.attr("data-*")`来访问数据属性。 在实践中,结合以上优化技巧,可以显著提升jQuery代码的运行效率,使得前端应用更加...

    jquery1.12.4与jquery1.12.4.min

    这个版本的文件大小较大,适合在开发环境中使用,因为其可读性有助于理解和学习jQuery的内部工作原理。 相反,jquery-1.12.4.min.js是经过压缩和优化后的版本,主要用于生产环境。通过删除不必要的空格、换行和注释...

    JQuery学习资料与源代码

    - 理解基础:首先,确保理解jQuery选择器的工作原理和基本的DOM操作,这是使用jQuery的基础。 - 实践操作:通过运行和修改提供的源代码,实践并熟悉jQuery的各种功能。 - 阅读文档:官方文档是学习jQuery的重要...

    jquery MP3 播放器(swf)

    二、jQuery MP3播放器工作原理 1. HTML结构:播放器通常包含一个HTML元素,如`&lt;div&gt;`,用于承载Flash对象。这个元素通过CSS进行样式控制,以适应网页设计。 2. JavaScript控制:jQuery用于操作DOM元素,控制播放、...

    jquery-1.11.1.js和jquery-1.11.1.min.js

    开发者通常在开发和调试阶段使用这个版本,因为它包含了详细的注释和易于理解的代码结构,便于我们理解jQuery的内部工作原理,以及方便在遇到问题时进行调试。未压缩的版本虽然文件体积较大,但其清晰的代码结构对...

    jquery-1.12.4.zip下载

    未压缩版本对于学习和调试非常有用,代码清晰明了,方便理解和学习jQuery的工作原理。而压缩版本则用于生产环境,通过去除不必要的空格和换行,将文件大小最小化,以提升网页加载速度。 在实际开发中,jQuery提供了...

    jquery-2.1.4.zip

    这个文件对于初学者来说尤其有用,因为可以清晰地看到每段代码的结构和功能,便于学习和理解jQuery的工作原理。 而"jquery.min.js"则是经过压缩和优化的版本,它去除了所有不必要的空格、换行和注释,使得文件体积...

    Jquery 3.2.1.zip

    这对于想要深入了解其内部工作原理的开发者来说,是非常宝贵的资源。jQuery的源码分为两个版本,一个是未压缩的"js"源码,代码清晰、注释详尽,适合阅读学习;另一个是"min"压缩版源码,经过压缩优化,体积小,适用...

    jQuery无缝滚动原理分析

    实现jQuery无缝滚动的核心原理主要涉及以下几个方面: 1. **jQuery库**:jQuery是一个轻量级的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果等功能,极大地简化了JavaScript的开发工作。在无缝滚动中,...

    犀利开发+jQuery内核详解与实践(1)+代码

    而“jQuery内核详解与实践”则更为深入,它探讨了jQuery库内部的工作原理,如选择器引擎、事件处理、动画效果、AJAX请求等关键模块。通过对这些核心组件的了解,读者可以更好地理解jQuery是如何处理常见的前端任务,...

    jQuery制作网页表格数据优化插件.rar

    本篇文章将深入探讨一个名为“jQuery制作网页表格数据优化插件”的主题,解析其工作原理,以及如何利用这个插件提升网页表格的性能和用户体验。 首先,我们需要理解jQuery的核心优势。jQuery简化了DOM操作,提供了...

    jQuery中文资料电子书教程

    - `jquery-1.4.2.js` 是jQuery的源代码文件,其中可能附带了中文注解,有助于开发者深入理解jQuery的工作原理,这对于进行性能优化和自定义扩展非常有帮助。 4. **学习教程**: - `从零开始学习jQuery.pdf` 和 `...

Global site tag (gtag.js) - Google Analytics