前端组建

组件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);}
}

　　

　

 

posted @ 2017-06-25 16:04  karila  阅读(277)  评论(0)    收藏  举报