老师这个插件使用单例 传进去的值是如何更新的呢?
$.fn.extend({
showHide: function (option) {
return this.each(function () {
var $this = $(this),
options = $.extend({}, defaults, typeof option === 'object' && option),
mode = $this.data('showHide');
if (!mode) {
$this.data('showHide', mode = showHide($this, options));
}
if (typeof mode[option] === 'function') {
mode[option]();
}
});
}
});
正在回答
你好,可以参考下面解释:
$.fn.extend({ //在jq原型上扩展一个方法,对外可以直接调用showHide //方法中有一个参数 showHide: function(option) { //将调用方法的元素进行循环遍历,又可能是多个元素 return this.each(function() { // 将循环的每一个元素赋值给$this变量 var $this = $(this), // 检测传入的参数option是否是一个对象,如果是的话,和默认的参数default合并成一个对象,再赋值给options参数,也就是下面的参数: // $box.showHide({ // css3: true, // js: false, // animation: 'slideUpDown' // }); options = $.extend({}, defaults, typeof option === 'object' && option), // 通过data方法获取showHide属性值 mode = $this.data('showHide'); //如果开始mode没有值的话,也就是undefined,说明元素之前没有使用data添加过这个属性 if (!mode) { //使用data方法添加上showHide属性,属性值是调用showHide方法返回出来的一个对象,里面有两个方法 // return { // show: $.proxy(mode.show, this, $elem), // hide: $.proxy(mode.hide, this, $elem) // }; $this.data('showHide', mode = showHide($this, options)); } //如果mode有值,说明已经添加过这个属性了,通过传入的参数也就是mode对象的属性名检测是否是一个函数,如果是的话调用这个方法即可,也就是下面的传参: // $('#btn-hide').on('click', function() { // $box.showHide('hide'); // }); if (typeof mode[option] === 'function') { mode[option](); } }); } });
如果还有疑问可以继续问题。
祝学习愉快!
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星