最近学习了一下js组件相关知识，但找到的资料比较少，一知半解，先做个简单的笔记吧。
首先定义一个类，可以在里面添加方法：
//这是个下拉框组件，放在select.js里
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; } };
然后就可以在前端页面直接调用这个方法：
<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="70%;float: right;" id="type"></span> </p> </div> <script>tree.treeList("type");</script> //此处调用 </body> </html>
实现自动打字效果的组件：https://wenwen.sogou.com/z/q719005033.htm，共同进步吧，少年。