`

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.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的...

    jQuery权威指南-源代码

    4.2.1 ready()方法的工作原理/85 4.2.2 ready()方法的几种相同写法/86 4.3 绑定事件/86 4.4 切换事件/90 4.4.1 hover()方法/90 4.4.2 toggle()方法/93 4.5 移除事件/94 4.6 其他事件/96 4.6.1 方法one() /...

    jQuery权威指南366页完整版pdf和源码打包

    3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready()方法的工作原理 4.2.2 ready()方法的几种相同写法 4.3 绑定事件 ...

    如何做到jQuery-free?

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。据统计,...

    基于jbpm与activiti的工作流平台技术架构介绍

    BPMX3支持多个业务系统同时运行及切换处理,根据不同的用户授权允许用户进入不同的系统进行访问,而不同的业务系统的开发可以基于BPMX3平台上开发,也可以由其他开发框架开发再与BPMX3做整合。这种模式非常适合企业...

    interview:前端面试浏览器原理v8内存管理http1.xhttp2 webpack babel前端es6手撕

    路由实现babel实现webpack实现配置加载程序插件优化文件监听工作原理 vue原理实现vuex 汇总webpack之间选择 css浏览器的一些宽高可是区域滚动区域 docker原理kubernetes 信使 地理服务器 浏览器原理浏览器缓存机制...

    python入门到高级全栈工程师培训 第3期 附课件代码

    09 socket底层工作原理解释 10 tcp三次握手与四次挥手 第30章 01 上节课复习 02 客户端服务端循环收发消息 03 socket收发消息原理剖析 04 服务端循环链接请求来收发消息 05 补充 06 udp套接字 07 recv与recvfrom的...

    Java面试宝典2020修订版V1.0.1.doc

    15、Hibernate的工作原理? 92 16、hibernate优缺点? 92 17、Hibernate是如何延迟加载的? 93 18、如果优化Hibernate? 93 19、什么是ORM? 94 20、Hibernate的主键生成策略? 94 21、Hibernate的级联操作 94 22、...

    ASP.NET MVC 3高级编程

    5.2.3 html辅助方法的工作原理 96 5.2.4 设置专辑编辑表单 97 5.2.5 添加输入元素 98 5.2.6 辅助方法、模型和视图数据 102 5.2.7 强类型辅助方法 104 5.2.8 辅助方法和模型元数据 105 5.2.9 模板辅助方法 105 ...

    达内java培训目录

    透彻理解JSP引擎工作原理;透彻理解标记库原理;熟悉常见的Java Web设计模式;为后续的Java Web开发打下坚实的理论基础。 Ajax Ajax基础、XHR对象、Ajax设计模式、JSON技术。 掌握Ajax的基本通信原理;掌握基于...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    不是直接教学员怎么拖ASP.Net控件进行快速开发,而是通过ashx的模式开发原始的动态网站,让学员明白“请求—处理—响应模型”、“Http协议、Http无状态”、“c#代码渲染生成浏览器端JavaScript”、“ViewState的作用...

    自己动手写搜索引擎(罗刚著).doc

    2.1.1 准备工作环境(10分钟) 5 2.1.2 编写代码(15分钟) 6 2.1.3 发布运行(5分钟) 9 2.2 搜索引擎基本技术 14 2.2.1 网络蜘蛛 14 2.2.2 全文索引结构 14 2.2.3 Lucene 全文检索引擎 15 2.2.4 Nutch网络搜索软件...

    原生JS实现微信通讯录

    最近工作当中再一次遇到要实现一个车辆列表,要求能够...Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使用的React框架,这个静态的dom结构肯定不适用,不过万变不离其宗,原理都是通过id实现的。 &lt;!D

    leetcode怎么查看以前提交的代码-interview:面试

    3、懒加载怎么实现的(因为第二问说了) 4、vue响应式原理,数组监听,vue3有了解吗,区别 5、es6:箭头函数和普通函数区别?this绑定,判断数组 6、http缓存,cache-control属性 7、项目优化,(nginx配置,跨域,...

    庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术

    7.2.2 webcontrol基类对样式的支持功能及其工作原理 249 7.2.3 htmltextwriter类对控件样式的支持 252 7.2.4 定义控件内部的样式属性规则 253 7.2.5 两个常用转换方法 256 7.3 应用示例 260 7.3.1 复合控件样式...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    7.2.2 webcontrol基类对样式的支持功能及其工作原理 249 7.2.3 htmltextwriter类对控件样式的支持 252 7.2.4 定义控件内部的样式属性规则 253 7.2.5 两个常用转换方法 256 7.3 应用示例 260 7.3.1 复合控件样式...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    7.2.2 webcontrol基类对样式的支持功能及其工作原理 249 7.2.3 htmltextwriter类对控件样式的支持 252 7.2.4 定义控件内部的样式属性规则 253 7.2.5 两个常用转换方法 256 7.3 应用示例 260 7.3.1 复合控件样式...

    java面试题

    72.3. 请写出Struts的工作原理、工作机制 67 72.4. struts的处理流程。 67 72.5. Struts 2框架的大致处理流程如下: 68 72.6. Struts体系结构中的组件 69 72.7. struts如何实现国际化 70 72.8. struts2.0的常用标签 ...

Global site tag (gtag.js) - Google Analytics