1.11自调用匿名函数self-invoking anonymous function
打开jQuery源码,首先我们可以看到这样的代码结构:
( function(widow,undefined){
//code ....
})(window)
- 这是一个自调用匿名函数。那到底是什么呢?在第一括号内,创建一个匿名函数;第二个括号,表示立即执行。 → what
- 那么为什么要创建一个“自调用匿名函数”呢?
通过定义一个匿名函数,创建一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。
这一点很重要也非常有用,也是一个js框架必须的要支持的功能。jQuery被应该到海量的javaScript程序当中,必
须保证jQuery创建的变量不能和导入它的程序所使用的变量发生冲突。
3. 匿名函数从语法上叫 “函数直接量”,JavaScript语法需要包围匿名函数的括号,但是事实上自调用匿名函数有2中写法(注意红色括号)
//第一种
(function() {
console.info( this );
console.info( arguments );
}( window ) );
//第二种
(function() {
console.info( this );
console.info( arguments );
}
)( window );
4.为什么要传入window呢?
通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.6.1.min.js:
(function(a,b){})(window);// window被优化为a
|
5.为什么要在在参数列表中增加undefined呢?
在自调用匿名函数的作用域内,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。
undefined = "now it's defined";
alert( undefined );
|
浏览器测试结果:
浏览器
|
测试结果
|
结论
|
ie
|
now it's defined
|
可以改变
|
firefox
|
undefined
|
不能改变
|
chrome
|
now it's defined
|
可以改变
|
opera
|
now it's defined
|
可以改变
|
6.注意到源码最后的分号了吗?
分号是可选的,但省略分号并不是一个好的编程习惯;为了更好的兼容性和健壮性,请在每行代码后加上分号并养成习惯。
1.12 总体架构
接下来看看在自调用匿名函数中都实现了什么功能,按照代码顺序排列:
(function( window,undefined) {
//构造jQuery对象
varjQuery =function( selector, context ) {
returnnewjQuery.fn.init( selector, context, rootjQuery );
}
//工具函数Utilities
//异步队列Deferred
//浏览器测试Support
//数据缓存Data
//队列queue
//属性操作Attribute
//事件处理Event
//选择器Sizzle
// DOM遍历
// DOM操作
// CSS操作
//异步请求Ajax
//动画FX
//坐标和大小
window.jQuery = window.$ = jQuery;
})(window);
--------------------------
通过jQuery(xxx)的调用实现没有生成对象,它的this是指向window对象的,那么jQuery的那些实例方法是怎么样继承过来的呢?接下来看一下:
varjQuery =window.jQuery=function( selector, context ) {
returnnewjQuery.fn.init( selector, context, rootjQuery );
}
这是jQuery的总入口,jQuery对象不是通过new jQuery来继承prototype中的方法,而是jQuery.fn.init函数生成的对象。
1.2 jQuery ---- 正则表达式
分享到:
相关推荐
- **开发框架**:Java服务端推荐Struts2+Spring3+iBatis或MyBatis,前端Web端推荐使用jQuery1.7.2版本,兼容IE6、7、8浏览器,UI组件需与jQuery兼容。 这份设计文档旨在规划大数据系统的整体结构,确保系统的稳定...
《大数据功能模块概要设计》V1.1的文档详细阐述了大数据系统的设计与构建,主要涵盖系统总体架构、通用组件、技术选型等方面。以下是关键知识点的详细说明: 1. **系统总体架构**: - 系统分为业务库、公共基础...
- **基础页面组件**:前端使用jQuery作为基础JS框架,考虑到兼容性,推荐使用jQuery UI框架如easyui、jquery ui或dwz。组件包括图表、编辑器、表单验证、listbox、日期组件、进度条、对话框、按钮、Grid、Tree、...
- **组件选择**:根据具体需求选取合适的前端库和框架,如Bootstrap、jQuery等,以提升用户体验和开发效率。 #### 案件导入导出架构设计 - **设计要点**: - 支持批量导入导出功能,确保数据完整性和一致性。 - ...
2.3 jquery开发框架介绍 7 3 系统的需求分析 8 3.1可行性分析 8 3.1.1技术性可行性 9 3.1.2经济性可行性 9 3.1.3操作性可行性 10 3.2需求分析 10 3.2.1系统总体概述 10 3.2.2功能性需求 11 3.3非功能性需求 12 4 ...
总体来说,jQuery leonaScroll是一个功能丰富、使用方便的自定义滚动条解决方案。它通过简洁的API和灵活的配置选项,为Web开发者提供了一个优雅的方式来增强网页的用户交互体验。随着1.1版本的发布,leonaScroll在...
1. **DLT算法核心理念**:该章节介绍了基于DLT模型的高维数据流聚类算法的核心理念、总体框架及其实现细节。 2. **算法特点**:介绍了DLT算法的独特之处,如高效性、准确性等。 3. **算法实现**:详细描述了DLT算法...
1.1 系统需求 - 物资管理:系统应能够进行物资的采购、入库、出库、库存查询等操作,确保物资的合理调配。 - 人力资源管理:记录员工信息,处理考勤、工资、福利等事务,支持人力资源的合理分配。 - 设施维护:记录...
3. 项目总体框架设计 3.1 网站总体设计图 网站采用分层架构,包括前端展示层、业务逻辑层和数据访问层,确保各部分职责明确,易于维护和扩展。 3.2 前端静态网页总体设计 前端设计注重用户体验,采用响应式布局,...
- **前端框架**:Bootstrap、jQuery - **后端框架**:Springboot - **安全框架**:Spring Security - **持久层**:Mybatis - **数据库**:MySQL #### 2.1 可行性分析 - **经济可行性**:考虑到开发成本和后期维护...
- **使用框架**:考虑使用Bootstrap等前端框架,简化布局和样式设计。 - **响应式设计**:确保网页在不同设备上的良好显示效果。 - **交互效果**:利用jQuery等库增强页面的动态效果和用户体验。 综上所述,基于JSP...
- **前端框架**:Bootstrap、jQuery ##### 4.3 总体结构 系统采用MVC架构模式进行设计,主要包括: - **Model层**:负责数据的存储与处理。 - **View层**:负责页面显示。 - **Controller层**:负责业务逻辑处理。 ...
系统总体框架 ##### 2.1 模型结构 采用MVC(Model-View-Controller)架构模式进行设计: - **Model(模型层)**:负责业务逻辑处理和数据持久化操作。 - **View(视图层)**:展示界面给用户,通常由...
- **SSH框架**:Spring、Struts、Hibernate框架组合,支持快速开发Java Web应用。 #### 五、系统分析与设计 ##### 5.1 需求分析 - **性能需求**:系统的响应时间、并发用户数等指标。 - **功能需求**:系统提供的...
##### 1.1 SpringBoot框架简介 SpringBoot是Spring框架的一个子项目,旨在简化Spring应用的初始搭建以及开发过程。它内置了一个轻量级容器,可以直接运行在任何支持Java的环境中,而无需外部容器。SpringBoot的主要...
- **前端**:使用Bootstrap框架提升用户体验,结合jQuery简化DOM操作。 - **后端**: - **Spring**:作为依赖注入容器,管理Bean的生命周期。 - **SpringMVC**:处理HTTP请求,转发至相应控制器。 - **MyBatis**...