问题描述
前些天阅读了某网友上传的一段jQuery代码,他,自己写的一个横拉级别选择的控件。Code中的jQuery书写模式感觉很优雅,自己简单的研究试写了一下,模式的大致意思理解了,但其中的一些细节地方还是不太明白, 趁空闲之余放在iteye上让大家帮我解释一下,谢谢指点 外部js文件 jQuery.plugin-model // JavaScript template using Windows Script Host(function($){$.extendPlugin = function(other){var params = $.extend({name : "JackQiu",age : 22,sex : "Fmale",job : "programer",addr : "成都高新区孵化园"},other||{});var action = {initPeople : function(){var say = "Hi!, goodmoring, eveybody who is here. my name is " + params.name + ",and i'm" + params.age + "yeas old, my job is"+params.job + "and i'm do work in " + params.addr ;alert(say);}};action.initPeople(); //初始化}})(jQuery)HTML文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>jQuery函数设计模式研究之选择控件</title><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jQuery.plugin-model.js"></script><script type="text/javascript">$(function(){$("#open").click(function(){$.extendPlugin({name : "JackZhang",age : 22,sex : "Fmale",job : "programer",addr : "成都高新区孵化园"});});});</script></head><body>Hello World!<br/><input type="button" name="open" id="open" value="open" /></body></html>基本模式是这样的(function($){ $.extendPlugin = function(p){ var param = $.extend({ name : "JackQiu", age : "22", sex : "Fmale" },p||{}); var action = function(){ }; }})(jQuery) 我不明白的地方是: (function($){ })(jQuery) 、 p||{} 、 $.extendPlugin , 能帮我解释这三个地方的意思 ,谢谢
解决方案
// (function($){ })(jQuery) (function($){...})(jQuery)实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){...})(param)这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQueryvar fn = function($){....};fn(jQuery);一样 // p||{}这里是为了防止传一个undefined进来,而导致报错。而采用P||{},如果p存在,就直接让p合并,如果p不存在,就用一个{}去合并。// $.extendPlugin定义插件。