最近学习了一下js组件相关知识，但找到的资料比较少，一知半解，先做个简单的笔记吧。
首先定义一个类，可以在里面添加方法：
//这是个下拉框组件，放在select.js里
<script>
var tree = {
treeList: function(myContent) {
var list=‘<select class="select">‘+
‘<option value ="type1">selectOne</option>‘+
‘<option value ="type2">selectTwo</option>‘+
‘<option value ="type3">selectThree</option>‘+
‘<option value ="type4">selectFour</option>‘+
‘<option value ="type5">selectFive</option>‘+
‘<select>‘;
document.getElementById(myContent).innerHTML=list;
}
};
</script>
然后就可以在前端页面直接调用这个方法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js组件</title>
<script src="select.js"></script> //封装起来调用即可
<style>
.select{
line-height: 21px;
width: 100%;
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
background-color: #fff;
}
.select:hover{
background: :blue;
}
.txt{
width: :20%;
float: left;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<p>
<span class="txt">请选择类型</span>
<span style="width:70%;float: right;" id="type"></span>
</p>
</div>
<script>tree.treeList("type");</script> //此处调用
</body>
</html>
实现自动打字效果的组件：https://wenwen.sogou.com/z/q719005033.htm，共同进步吧，少年。
原文：https://www.cnblogs.com/tenfly/p/11494191.html