js组件

最近学习了一下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="width:70%;float: right;" id="type"></span>
　　　　</p>
　　</div> 
　　<script>tree.treeList("type");</script> //此处调用
</body>
</html>
复制代码

实现自动打字效果的组件：https://wenwen.sogou.com/z/q719005033.htm，共同进步吧，少年。

posted @   TenFly  阅读(1526)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae