公共的函数封装有问题，一直显示对象初始化的问题，不知道怎么改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示与隐藏</title>
<link rel='stylesheet' type='text/css' href='show-hide.css' />
<script type="text/javascript" src='jquery.min.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
margin: 0 auto;
}
.btn {
width: 100px;
height: 30px;
}
/* visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。
请使用 "display" 属性来创建不占据页面空间的不可见元素。
visibility规定元素的内容是否显示；而display规定元素本身的现实方式，可以决定元素本身是否可见。 */
#box {
display:none;
/* visibility:hidden;
opacity:0; */
width: 200px;
height: 200px;
/* border: #333 solid 1px; */
background:red;
}
/* 为box添加了transition但是并没有出现动画，因为 */
.transition{
transition:all 0.5s;
}
/* 哪个元素要用淡出动画就添加这个class名,js中显示时移除这个fadeout类名,隐藏时添加这个fadeout */
.fadeOut{
visibility:hidden !important;
opacity:0 !important;
}
/* 上下卷帘通过改变垂直高度来实现动画 */
.sliderUpDownCollapse{
height:0 !important;
/* 如果使用者没有设置高度，而是用padding来填充，动画也没法实现 */
padding-top:0 !important;
padding-bottom:0 !important;
/* 优先级的问题，虽然这里设置了高，但是如果元素本身的id也设置了，动画了无法实现，加上important */
}
.slideLeftRightCollapse{
width:0 !important;
/* 如果使用者没有设置高度，而是用padding来填充，动画也没法实现 */
padding-left:0 !important;
padding-right:0 !important;
}
</style>
<body>
<button id='btn-show' class='btn'>显示</button><button id='btn-hide' class='btn'>隐藏</button>
<div id='box' class=''></div>
<script type="text/javascript" src='show-hide.js'></script>
<script type="text/javascript" src='show-hide2.js'></script>
<script type="text/javascript" src='show-hide3.js'></script>
<script>
function init($ele, hiddenCallback) { //元素初始化
if ($ele.is(':hidden')) {
$ele.data('status', 'hidden');
}
if (typeof hiddenCallback === 'function') {
hiddenCallback();
// $ele.addClass('fadeOut');
} else {
$ele.data('status', 'shown');
}
}
function show($ele, callback) { //show公共部分
if ($ele.data('status') === 'show') return;
if ($ele.data('status') === 'shown') return;
$ele.data('status', 'show').trigger('show');
callback();
}
function hide($ele, callback) { //hide公共部分
if ($ele.data('status') === 'hide') return;
if ($ele.data('status') === 'hidden') return;
$ele.data('status', 'hide');
callback();
}
var js = { //init\show\hide的判断之前已经封装好了，不同的回调函数调用就行
_init: function ($ele, hiddenCallback) { //公共初始状态
$ele.removeClass('transition'); //如果在HTML标签中设置css动画样式，js就不能政策执行了
init($ele, hiddenCallback);
},
_show: function ($ele, mode) { //公共show
show($ele, function () { //回调函数
$ele.stop()[mode](function () { //这里的stop相当于css方法中的off
$ele.data('status', 'shown').trigger('shown');
});
})
},
_hide: function ($ele, mode) { //公共hide
hide($ele, function () { //回调函数
$ele.stop()[mode](function () {
$ele.data('status', 'hidden').trigger('hidden');
})
})
},
fadeSlideUpDown: { //封装后的代码
init: function ($ele) {
js._customInit($ele, {
'opacity': 0,
'height': 0,
'padding-left': 0,
'padding-right': 0
})
//用一个对象保存css中的属性
},
show: function ($ele) {
js._customShow($ele);
},
hide: function ($ele) {
js._customHide($ele, {
'height': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
// // e、fades+lideLeftRight
fadeSlideLeftRight: { //封装的
init: function ($ele) {
js.custom_Init($ele, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function ($ele) {
js._customShow($ele);
},
hide: function ($ele) {
js._customHide($ele, {
'width': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
//jQuery中没有的样式的公共的函数封装
_customInit = function ($ele, options) {
var styles = {};
for (var p in options) {
styles[p] = $ele.css('p');
$ele.data('styles', styles); //data自定义style,将上面定义的styles传给定义的styles
js._init($ele, function () {
$ele.css(options);
})
};
},
_customShow = function ($ele, styles) {
show($ele, function () { //回调最外层公共的show
var styles = $ele.data('styles');
$ele.show();
$ele.stop().animate(styles, function () { //动画完毕后的状态
$ele.data('status', 'shown').trigger('shown');
});
})
},
_customHide = function ($ele, options) {
hide($ele, function () {
$ele.stop().animate(options, function () {
$ele.data('status', 'hideen').trigger('hidden');
});
});
}
}
var $box = $('#box');
js.fadeSlideLeftRight.init($box);
$('#btn-show').on('click', function () {
js.fadeSlideLeftRight.show($box);
});
$('#btn-hide').on('click', function () {
js.fadeSlideLeftRight.hide($box);
})
</script>
</body>
</html>
封装的一层套一层有些屡不清楚了，组件化意思就是将源代码公共的部分提取，用回调函数回调公共部分，在不同样式你写不同于其他样式的代码，公共的部分大家都可区调用，的这个意思吗？这种一层一层的关系怎么屡？回调函数怎么调？感觉很混乱！老师能介绍好的思路方法吗？
另外在实际工作中，是否我们自己写这种组件化的代码？
正在回答
老铁，你说的没毛病，组件化就是为了后期开发方便而封装的，相当于个小接口吧。
你这代码中后面定义方法的时候怎么用的等于啊,
还有p是变量，不能变成字符串属性。我给你修改了下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示与隐藏</title>
<link rel='stylesheet' type='text/css' href='show-hide.css' />
<script type="text/javascript" src='js/jquery.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
margin: 0 auto;
}
.btn {
width: 100px;
height: 30px;
}
/* visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。
请使用 "display" 属性来创建不占据页面空间的不可见元素。
visibility规定元素的内容是否显示；而display规定元素本身的现实方式，可以决定元素本身是否可见。 */
#box {
display:none;
/* visibility:hidden;
opacity:0; */
width: 200px;
height: 200px;
/* border: #333 solid 1px; */
background:red;
}
/* 为box添加了transition但是并没有出现动画，因为 */
.transition{
transition:all 0.5s;
}
/* 哪个元素要用淡出动画就添加这个class名,js中显示时移除这个fadeout类名,隐藏时添加这个fadeout */
.fadeOut{
visibility:hidden !important;
opacity:0 !important;
}
/* 上下卷帘通过改变垂直高度来实现动画 */
.sliderUpDownCollapse{
height:0 !important;
/* 如果使用者没有设置高度，而是用padding来填充，动画也没法实现 */
padding-top:0 !important;
padding-bottom:0 !important;
/* 优先级的问题，虽然这里设置了高，但是如果元素本身的id也设置了，动画了无法实现，加上important */
}
.slideLeftRightCollapse{
width:0 !important;
/* 如果使用者没有设置高度，而是用padding来填充，动画也没法实现 */
padding-left:0 !important;
padding-right:0 !important;
}
</style>
<body>
<button id='btn-show' class='btn'>显示</button><button id='btn-hide' class='btn'>隐藏</button>
<div id='box' class=''></div>
<script type="text/javascript" src='show-hide.js'></script>
<script type="text/javascript" src='show-hide2.js'></script>
<script type="text/javascript" src='show-hide3.js'></script>
<script>
function init($ele, hiddenCallback) { //元素初始化
if ($ele.is(':hidden')) {
$ele.data('status', 'hidden');
}
if (typeof hiddenCallback === 'function') {
hiddenCallback();
// $ele.addClass('fadeOut');
} else {
$ele.data('status', 'shown');
}
}
function show($ele, callback) { //show公共部分
if ($ele.data('status') === 'show') return;
if ($ele.data('status') === 'shown') return;
$ele.data('status', 'show').trigger('show');
callback();
}
function hide($ele, callback) { //hide公共部分
if ($ele.data('status') === 'hide') return;
if ($ele.data('status') === 'hidden') return;
$ele.data('status', 'hide');
callback();
}
var js = { //init\show\hide的判断之前已经封装好了，不同的回调函数调用就行
_init: function($ele, hiddenCallback) { //公共初始状态
$ele.removeClass('transition'); //如果在HTML标签中设置css动画样式，js就不能政策执行了
init($ele, hiddenCallback);
},
_show: function($ele, mode) { //公共show
show($ele, function() { //回调函数
$ele.stop()[mode](function() { //这里的stop相当于css方法中的off
$ele.data('status', 'shown').trigger('shown');
});
})
},
_hide: function($ele, mode) { //公共hide
hide($ele, function() { //回调函数
$ele.stop()[mode](function() {
$ele.data('status', 'hidden').trigger('hidden');
})
})
},
fadeSlideUpDown: { //封装后的代码
init: function($ele) {
js._customInit($ele, {
'opacity': 0,
'height': 0,
'padding-left': 0,
'padding-right': 0
})
//用一个对象保存css中的属性
},
show: function($ele) {
js._customShow($ele);
},
hide: function($ele) {
js._customHide($ele, {
'height': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
// // e、fades+lideLeftRight
fadeSlideLeftRight: { //封装的
init: function($ele) {
// js.custom_Init($ele, {
js._customInit($ele, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function($ele) {
js._customShow($ele);
},
hide: function($ele) {
js._customHide($ele, {
'width': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
//jQuery中没有的样式的公共的函数封装
// _customInit = function($ele, options) {
_customInit: function($ele, options) {
var styles = {};
for (var p in options) {
// styles[p] = $ele.css('p');
styles[p] = $ele.css(p);
}
console.log(styles)
$ele.data('styles', styles); //data自定义style,将上面定义的styles传给定义的styles
js._init($ele, function() {
$ele.css(options);
})
},
// _customShow = function($ele, styles) {
_customShow: function($ele, styles) {
show($ele, function() { //回调最外层公共的show
var styles = $ele.data('styles');
$ele.show();
$ele.stop().animate(styles, function() { //动画完毕后的状态
$ele.data('status', 'shown').trigger('shown');
});
})
},
// _customHide = function($ele, options) {
_customHide: function($ele, options) {
hide($ele, function() {
$ele.stop().animate(options, function() {
$ele.data('status', 'hideen').trigger('hidden');
});
});
}
}
var $box = $('#box');
js.fadeSlideLeftRight.init($box);
$('#btn-show').on('click', function() {
js.fadeSlideLeftRight.show($box);
});
$('#btn-hide').on('click', function() {
js.fadeSlideLeftRight.hide($box);
})
</script>
</body>
</html>你试试行不行，jquery地址换成你原来的就行，我给改了。
在实际开发中一般用第三方插件比较多，用其他人写好的，踩过坑的。不过还得看公司的要求，就想要封装公司自己小组件的话，只能一点一点的开发了。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星