显示隐藏模块封装
来源：2-11 将显示隐藏封装成模块--完善
soso_crazy
2019-04-03 18:04:08
$.fn.extend({
showHide: function(option) { //判断option是否是对象
return this.each(function() { //为了能连缀. .，返回this
var $this = $(this),
options = $.extend({}, defaults, typeof option === 'object' && option), //将外部传入的参数options覆盖defaults相同属性放到空对象中，将赋值后的对象给options
//&&是短路操作符，如果typeof option==='object'为真，则将option的值传入showHide,如果typeof option==='object'为假，不会执行&&后面的option，将false传入showHide
//如果把false传给showHide, option的值没有覆盖到defaults 就是不使用外部参数，使用defaults的值
mode = $this.data('showHide');
if (!mode) { //没有mode 是第一次执行
$this.data('showHide', mode = showHide($this, options));
}
if (typeof mode[option] === 'function') {
mode[option]();
}
})
}
})
老师，可以详细解析一下这段代码吗？ 单例是什么？可以举个例子吗？
2回答
-
Miss路
2019-04-04
同学你好。
单例模式，是一种编程的思想，主要是用来给那些只能实例化一次的对象用的，比如说一个国家只有一个皇帝，那么如果是这样的角色的话，就需要用单例模式，是一种编程的思想，了解一下即可。
关于这段代码的实现详细讲解，参考小星星老师的代码标注。
组件化实战这块的内容不好理解，也建议你多听几遍视频，多练习几遍，有问题解决不了可以请教老师。加油！
如果帮助到了你，欢迎采纳！
祝学习愉快！
0 -
好帮手慕星星
2019-04-03
你好，可以参考下面代码中的解释：
$.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](); } }); } });同学说的单例是在哪里听到的呢，可以具体描述一下哦，便于准确定位问题。
祝学习愉快！
0h019-04-03
相似问题