前端組建

時間 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);}
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。