<style>
<!--
p
{text-indent:2em}
-->
</style>
之前也有封装过简单的Javascript组件,但是因为没有遵循和参考过好的编码原则,封装的方式有诸多不妥。最近参考了几个框架的源代码解析,加上自己的理解,总结成文供以后参考。
笔者认为,所谓类库(或称框架)通常就是一个闭包,这个闭包可以访问外部宿主函数中定义的一些对外不可见的方法和变量,而对外提供的方法则放在类库的原型prototype中。关于闭包的概念,详见笔者的《深入理解JavaScript闭包》。类库对外提供一个初始化的入口,用于构造实例对象,此时宿主函数就是实例的作用域。由于类库的内部实现对外界是透明的,其内部变量不对外部全局变量造成影响,具有很好的封装性。
整个类库代码最外层应该是一个“自调用匿名函数”,匿名函数作为类库闭包的宿主函数,创建了一个“私有”的命名空间,最后通过将类库闭包赋值给Global对象window,将其暴露给最外层的全局作用域。先来看一下JQuery代码的总体结构:
(function( window, undefined ) {
var jQuery = (function(p1,p2) {
// jquery code
return new jQuery.fn.init(p1,p2,p3);
});
window.jQuery = window.$ = jQuery;
})(window);
之所以要传入window变量,是为了使window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.x.x.min.js:
(function(a,b){})(window); //window被优化为a,undefined被优化为b
在参数列表中增加undefined的原因,应该主要也是为了便于最大程度的压缩代码;纵观jquery原始的未压缩代码,里面有很多地方引用了window和undefined变量,将二者作为参数引入并进行压缩是非常值得的。
总的来说,JavaScript类库比较流行的总体结构就是:1、用“自调用匿名函数”封装并运行类库的所有代码,将类库的接口暴露给全局作用域;2、用原型prototype给类库的实例提供方法。剩下的就是细节问题了~
分享到:
相关推荐
鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架...
本项目是利用 Bootstrap 样式进行封装的 UI 组件库。 组件 Blazor应用基于组件。 Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类,用来: 1、定义灵活的 UI ...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本项目是利用Bootstrap样式进行封装的UI组件库。 Blazor应用基于组件。Blazor中的组件是指UI元素,例如页面、对话框或数据输入窗体。 组件是内置到.NET程序集的.NET类,用来: 1、定义灵活的UI呈现逻辑。 2、处理...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的死锁,通过对 Java 字节码的动态分析来完成死锁分析。 Java的Flash解析、生成器 ...
本项目是利用 Bootstrap 样式进行封装的 UI 组件库。 组件 Blazor应用基于组件。 Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类,用来: 1、定义灵活的 UI ...
/ prototype.js prototype框架类库文件 第21章(/ch21) 程序描述:本章将实现通过滑块来显示分页数据的功能。传统的分页方式,多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来...