`
deepthink
  • 浏览: 56811 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

关于jquery widget插件模式的几点思考

阅读更多

widget是jqueryui 提供的内置插件模式,前面我曾经写过一篇文章 对jQuery做的修改 其中:

 

写道
抛弃了widget的扩展模式,抛弃了 tabs.tabs("swidth","12121") 这种调用模式,使用 obj.method(args) 的调用模式

 

  这里有必要对原因作以下说明,为什么我会抛弃widget的扩展模式

 

widget 可能在设计之初的时候,jquery的开发者可能一直想把所有的事件都设定为脚本绑定,而不是用javascript:obj.method();void(0); 这种模式,这也就出现了我们无法直接调用tabs的swidth的方法的现象,而必须通过tabs.tabs("swidth",args)  的条用方法,然而,这种调用方法还有一个弊端:无法返回数据,只能返回jquery对象本身,我不太清楚jquery为什么会这么做,是因为要和juqery的 fn 插件模式保持一直,还是为了保持jquery是用的简易性、连贯性(可能性比较大),但是不管怎么说,这都导致了再是用jquery进行开发中,开发人员有意识或者无意识的在js代码中使用大量的绑定行为,这就会使我们的HTML代码可阅读性降低,因为我们会再开发的过程中,为了绑定而添加大量的selector认知符,比如id,class ,而这些可能是没有任何意义的(我是这样认为的),关键的问题在于:大家都知道在IE中,循环绑定事件是可能造成内存泄露的,而且有很多人曾经这么做或者现在还在做(包括我自己)。

 

 

虽然绑定行为并不是罪大恶极,而且如果可能,我们要推荐这种方法;

但是事实是残酷的,目前为止对于大部分的项目而言,这种做法是不利的,带来的负面效果远远大于所给我们带来的优势,我们不能纯粹为了追究技术的极致而忽略了实际需要...

 

所以,就有了 对jQuery做的修改 一文,目的在于简化jquery的扩展模式,在保持是用jquery优势的情况下,规避一些不必要的风险

 

下面是base.js 包

 

;
(function($){
		
	/* 对闭包的扩展,是用方式为 function(arg1){...}.bind(obj,arg1);可参考prototype.js中的bind */
	Function.prototype.bind = Function.prototype.bd = function(){
		var method = this ;
		var obj = arguments[0];
		
		var args = arguments;
		
		return function(){
			var newArgs = [];
			var i ,len = args.length ;
			if(len > 1){
				for(i = 1; i < len ; i ++){
					newArgs.push(args[i]);
				}
			}
			
			len = arguments.length ;
			for(i = 0 ; i < len ; i ++){
				newArgs.push(arguments[i]);
			}
			
			method.apply(obj,newArgs);
		}
	};
	
              /* 对象创建方式,使用constructor init */
	window["class"] = window.clazz = {
		create:function(){
			function klass(){
		      this.init.apply(this, arguments);
		    }
			
		    if (!klass.prototype.init)
		      klass.prototype.init = function(){} ;
			
		    klass.prototype.constructor = klass ;
		    return klass ;
		}
	};
})(jQuery);
 

 希望这篇文章能给大家带来一些帮助...

分享到:
评论
1 楼 liusx2010 2010-12-03  

相关推荐

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    将JS文件与CSS文件结合使用时,需要注意以下几点: - **加载顺序**:通常需要先引入jQuery库,然后是jQuery UI的JS文件,最后是CSS文件,确保所有依赖都被正确加载。 - **主题定制**:可以使用在线工具(如...

    前端项目-jquery.ui-contextmenu.zip

    在`jquery.ui-contextmenu`项目中,我们通常会遇到以下几个关键知识点: 1. **jQuery UI**:jQuery UI库是基于jQuery的,提供了许多可定制的UI组件。它通过CSS样式和JavaScript事件处理来增强HTML元素,使其具有...

    下拉多选框(jquery)

    `ehynds-jquery-ui-multiselect-widget-f51f209`这个压缩包可能包含了由开发者ehynds创建的一个基于jQuery UI的多选下拉框插件源码。这个插件允许在下拉菜单中添加复选框,从而实现多选功能,并且兼容多种浏览器,...

    jquery 无刷新上传 ajax 无刷新上传

    - jquery.ui.widget.js:这是jQuery UI库的一部分,可能被jQuery File Upload插件用来实现某些UI组件,如进度条。 - jquery.iframe-transport.js:在某些情况下,由于浏览器安全限制,直接的跨域Ajax文件上传可能...

    Jquery UI Draggable中文API及使用

    下面通过几个简单的例子来展示如何使用 Draggable 插件: ##### 默认情况下拖动 这是最基础的使用方式,只需简单的一行代码即可实现元素的拖动功能。 ```javascript $(function() { $("#draggable").draggable()...

    基于jquery插件制作左右按钮与标题文字图片切换效果

    在现代网页设计中,利用jQuery插件来实现动态的图片切换效果已经成为一种常见做法。本文将深入探讨如何通过jQuery插件制作出具有左右按钮控制与标题文字图片切换效果的交互组件。通过了解和学习本文内容,您可以掌握...

    jQueryUI如何自定义组件实现代码

    在Web开发中,jQueryUI是一个用于增强界面交互体验的JavaScript库,其核心是UI Widget(小部件)...通过上述知识点的学习和实践,开发者们可以熟练地创建和管理自己的jQueryUI Widget,让Web应用的交互更加丰富和高效。

    js封装成插件的步骤方法

    以下是封装插件时需要考虑的几个重要知识点: 1. 自执行函数:使用自执行函数可以创建一个独立的作用域,避免变量污染全局作用域。自执行函数的基本形式为:`(function(){}());`,它可以立即执行,并且在函数内部...

    shopex返回顶部插件挂件半透明矩形简洁

    在“shopex返回顶部插件挂件半透明矩形简洁”这个主题中,我们可以深入探讨以下几个关键知识点: 1. **返回顶部功能**:返回顶部按钮是一种常见的网页交互元素,尤其在内容丰富的长页面中,它可以帮助用户节省时间...

    quick-escape-widget:一个提供快速转义小部件的WordPress插件

    快速逃生小部件(Quick Escape Widget)是一个专为WordPress平台设计的插件,旨在为网站用户提供便捷的退出或离开页面的功能。这个插件的核心是利用PHP编程语言开发的,因此我们来详细探讨一下与PHP和WordPress插件...

    如何使用jQuery Draggable和Droppable实现拖拽功能

    总结起来,使用jQuery Draggable和Droppable实现拖放功能需要考虑以下几个关键点: 1. 初始化可拖动元素,处理拖动范围限制。 2. 创建中间拖拽元素以实现跨容器拖放。 3. 监听鼠标事件来复制拖动元素内容并调整中间...

    serpentsoft-cf-post-formats:表示 CF Post Formats WordPress 插件的修改副本

    在深入研究这个插件之前,你需要了解以下几点关于WordPress插件开发的知识: 1. **WordPress钩子系统**:WordPress通过行动(actions)和过滤器(filters)钩子使插件能够与核心功能交互,添加或改变功能。 2. **...

    tablesorter例子

    在"tablesorter例子"中,我们可以探讨以下几个关键知识点: 1. **tablesorter 插件安装与引入**: 在HTML文件中,首先需要引入`tablesorter`的CSS文件以应用样式,然后引入JavaScript文件来启用功能。通常,这会...

    Thinkphp3.0 cms系统

    此外,CMS系统的开发通常涉及到以下几个核心知识点: 1. **数据库设计**:包括数据表的设计、数据关系的建立(如外键约束),以及优化查询性能(索引、分表等)。 2. **权限管理**:实现用户角色控制,如管理员、...

    如何开发出一个优秀的APICloud应用.docx

    如果您想开发出一个优秀的 APICloud 应用,那么您需要了解以下几点。 首先,在开发过程中,遇到无法解决的问题时,不要自己想办法绕过去,而是要第一时间在开发者社区提交问题或找 APICloud 项目经理提出。这将帮助...

    商城系统v2.65源码2012828

    多层模式开发的开源电子商城系统,可以自行设置模板、配置灵活、功能强大, 它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等,后端有类别管理、 产品管理、客户及...

    淘宝1920全屏轮播代码

    5. JavaScript插件:通常使用如jQuery的轮播插件实现动态效果,如淡入淡出(`fade`效果)和鼠标悬停触发(`mouse`触发类型)。 了解以上知识点后,你可以根据自己的需求调整代码,定制出符合自己店铺风格的全屏轮播...

    三栏布局自适应wordpress主题

    在设计和开发三栏布局自适应WordPress主题时,有几个关键知识点需要掌握: 1. **响应式设计**:自适应意味着主题会根据用户设备的屏幕尺寸进行调整,确保在手机、平板电脑和桌面电脑上都有良好的显示效果。这通常...

    淘宝模版 装饰

    虽然代码片段中没有直接体现JavaScript代码,但通过`data-widget-config`属性,我们可以推测这里可能使用了某种JavaScript库或框架(如jQuery插件)来实现轮播效果。具体而言,`'effect':'fade'`表示图片之间的切换...

    javascript 树控件 比较好用

    根据给定文件的内容,我们可以提炼出一些关于JavaScript树控件的详细知识点,包括它们的实现方法、特点以及各自的优势。 首先,构建树控件的一个基础且简单的方法是使用HTML中的`&lt;ul&gt;`和`&lt;li&gt;`标签组合。这种方式的...

Global site tag (gtag.js) - Google Analytics