前端组建
组件web component,什么是组件以及表现形式
定义：
1、以页面功能组件为单位聚合前端资源（读取前端资源）
2、自动加载约定的css、js资源
3、将业务数据到渲染数据的转换给独立出来
特点：
1、按需加载 只加载必要的前端资源
2、对应关系明确（所需要加载的资源在同一目录）
3、职责明确且唯一，对应关系显著
为了适应复杂的页面业务需求，很多组件选择的是生命周期的方式来组织自己的事件和方法
一个组件的生命周期包括：
init 初始化组件根结点和配置
fetch 加载css和js资源
render 内容渲染
ready 进行数据绑定等操作
update 用来数据的更新
destory 解除所有的事件监听，删除所有组件节点
...
设计模式之工厂模式：构造器+protoType
前端组建简单例子
html
<!DOCTYPE html> <html> <head> <title>css3动画按钮</title> <!-- <link rel="stylesheet" type="text/css" href="./css/animate.css"></link> --> </head> <body> <div id="button"> <div id="second"></div> </div> </body> </html> <script type="text/javascript" src="js/btn.js"></script>
js
/*
0625按钮前端组件实现
作者：karila
*/
function ButtonFn(){
//this.txt=txt;
/*公共方法可以放在构造器中*/
this.getId=function(n){
return document.getElementById(n);
}
/*自动化加载CSS*/
this.fetchCss=function(_href){
var _dom=document.createElement("link");
_dom.rel="stylesheet";
_dom.type="text/css";
_dom.href=_href;
document.body.appendChild(_dom);
}
this.init();
}
ButtonFn.prototype={
/*特有的方法放在prototype中*/
/*初始化*/
init:function(_config){
var _self=this;
_self.event(_config);
},
/*定义事件*/
event:function(_config){
var _self=this;
var _wrap=_self.getId("button");
_wrap.onclick=function(){
console.log("按钮被电击了");
_self.renderTxt(_config.txt);
}
},
/*渲染*/
renderTxt:function(t){
var _self=this;
var _second=_self.getId("second");
second.innerHTML=t;
}
}
/*组件需要有通用型,需要添加配置文件*/
var config={
txt:"叫我孙悟空"
}
var btnObj=new ButtonFn();
btnObj.init(config);
btnObj.fetchCss("./css/animate.css");
css
#button{
width:300px;
height:70px;
background:#6959ff;
margin:100px auto;
overflow: hidden;
border-radius:10px;
cursor: pointer;
}
#second{
width:300px;
height:70px;
background:#ddd;
border-radius:10px;
transform:translateX(-310px) skew(0deg);
animation:remove 1s reverse;
text-align:center;
line-height:70px;
font-size: 50px;
}
#button:hover #second{
animation: moves 1s forwards;
}
@-webkit-keyframes remove{
0%{-webkit-transform:translateX(-320px) skew(0deg);}
20%{-webkit-transform:translateX(50px) skew(-20deg);}
40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
80%{-webkit-transform:translateX(-15px) skew(8deg);}
100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@-webkit-keyframes moves{
0%{-webkit-transform:translateX(-320px) skew(0deg);}
20%{-webkit-transform:translateX(50px) skew(-20deg);}
40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
80%{-webkit-transform:translateX(-15px) skew(8deg);}
100%{-webkit-transform:translateX(0px) skew(0deg);}
}
