关于写一些组件的思路

有时候为了想一组组件动态变化的过程的时候，总是会让人奔溃，因为我们会陷入一种类似于“连贯性动作合成的纠结中”，我总会考虑的让界面如何一下子“动起来”，这样的思考反而容易将我陷入纠结的状态，有时候这种复杂的反应也会附加在js的代码中，让本该简单的作业却陷入了难以维系的状态。

解决的办法就是 js+html+css完全分离，js则负责动作，html是骨架，css如同外衣一般。

例子

图1

将“点击按钮内容显示/内容消失”组件划分为两个状态，状态1是面板消失的状态，所以先将状态1的面板用css表现出来

.wrapper>.popver{

min-width:100px;

min-height:100px;

background-color:red;

display:none;

}

2当点击后的状态是是面板如上图，可以尝试写出状态2的样式如下：

.wrapper ,.active>.popver{

display:block;

}

最后用js来进行两种状态的切换：

$(".wrapper").on("click",function(e){

var $wrapper=$(e.currentTarget);

if($wrapper.hasClass("active")){

$wrapper.removeClass("active");

}

else{

$wrapper.addClass("active");

}

});

效果如下：

图三