前端组建

时间 2019-11-08

标签前端组建繁體版

原文原文链接

组件web component,什么是组件以及表现形式javascript

定义：css

一、以页面功能组件为单位聚合前端资源（读取前端资源）html

二、自动加载约定的css、js资源前端

三、将业务数据到渲染数据的转换给独立出来java

特色：css3

一、按需加载只加载必要的前端资源web

二、对应关系明确（所须要加载的资源在同一目录）设计模式

三、职责明确且惟一，对应关系显著css3动画

为了适应复杂的页面业务需求，不少组件选择的是生命周期的方式来组织本身的事件和方法app

一个组件的生命周期包括：

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>

/*
  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);}
}