方法定义与参数
在 jQuery 里面,咱们通常会花点时间把方法定义搞定,为函数起个名字,设定下形参等等。最重要的地方就在执行函数的那部分,要让它懂得如何处理这些号码的数据才行。形参真是厉害得很它决定你调用时能传送哪些数据进去,并且告诉它应该怎样处理!当然,通过形参搞定,jQuery 的插件就能变得像便利贴那样好使,而且还可以轻松拓展!
options属性详解
用jQuery写代码时,这个叫params的功能区就是咱们设置参数的宝地。别看这东西小巧,它里面可是有默认值的参数列表。例如,我们可以随便放些变量到这儿,然后随心所欲地改变它们,超级方便好用!
你们发现没?选择器功能挺有用的,比如说那个弹出框小玩意儿,只要在菜单里点一下「选项」,就可以一次性搞定弹出框的各种设置,包括标题啊、内容啊、按钮标签什么的。这样的话,就不用那么麻烦地修改源代码咯。
$.fn.myMethod = function(options) { var defaults = { text: 'Hello World', className: 'my-class' }; var settings = $.extend({}, defaults, options); return this.each(function() { $(this).text(settings.text).addClass(settings.className); }); };
你知道吗,在jQuery里,”options”就像是万能药,哪儿都能用得到!例如,那个$ajax()函数,每次要发Ajax请求,都离不开它,用来设置各种个性设置。那你想用什么方式发Ajax请求?别急,咱们看看怎么巧妙使用这些 options ,包括 GET、POST,甚至还有JSONP等等。
callback属性应用
别忘了”callback”这个好使的招数!你可能在哪见过这个词,淡定哈。简单说就是某个功能干完以后,咱们可以干点啥。挺多用处的,像响应触发,搞个动画之类的,学会了超实用!
是不是想显示个图,结果加载太慢了?别急,有叫‘callback’这个小工具能帮上忙!告诉它等照片加载好了要做什么就行,比如马上看还是调整尺寸、定位这些,统统能搞定!
放心,编程里的代码复杂得让人头疼?用callback函数,你的代码就能变得简单明了起来。给函数加个回调函数,把大问题分成几个小步骤,代码就更容易修改变得,还能随时反复用!
$.fn.success = function(callback) { return this.each(function() { if (callback && typeof callback === 'function') { callback.call(this); } }); };
任意数量参数传递
简单加个option跟call就行,这两个小玩意儿可以让我们在函数里加入好多实用的变量!以后处理问题可就不头大了。
就像上网注册这些小事儿,有时候少打几个字母就能通过,但有的地儿可是要用到正则表达式才行。别管他们有多么挑剔,有了我们这个小插件,全都不是问题!
简而言之,咱们就像是把各种数字当做是小零食一样递给了其他人。这可真是让人省心多了!不用再绞尽脑汁去看那些复杂的代码,维护起来也相对方便许多。如果你想升级或新增功能怎么办?别怕,轻轻加一点点,完全不用担心会影响到原有的代码。
形式参数设计注意事项
$.fn.fadingText = function(text, opacity) { return this.each(function() { $(this).text(text).animate({opacity: opacity}, 1000); }); };
哥们儿,咱们聊聊如何搞jQuery函数的参数。首先,尽量要让用户觉得顺手些,参数别太多或儿难理解;然后,参数要有序,添东西时别漏了之前的;最后但同样重要的是,考虑未来可能有些新的需求,设计时要留个余地。
在学 jQuery 定义函数时,别只看名字,要关心下参数。搞定 options 和 callback 这俩货,再搭配各种传参技巧,你就可以理解 jQuery 的函数们是怎么回事了,也能更好地满足自己的需要~
评论0