JS插件封装——生成表格

最新推荐文章于 2024-09-11 16:02:59 发布

霜月枫桥

最新推荐文章于 2024-09-11 16:02:59 发布

阅读量3.3k

点赞数 3

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78531746

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

调用页面HTML代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		输入行数: <input type="text" name="" id="rows"><br>
		输入列数：<input type="text" name="" id="cols"><hr>
		<input type="button" value="生成表格" οnclick="build()">
	</div>
	<div id="table"></div>
	<script src="table.js"></script>
	<script>
	function build(){
		var rows=document.getElementById("rows").value;
		var cols=document.getElementById("cols").value;
		var table=new Table(document.getElementById("table"));
		document.getElementById("table").innerHTML="";
		table.createTable({
			rows:rows,cols:cols
		});
	}
	
	</script>
</body>
</html>

插件js代码如下：

(function(){
	window.Table=function(node){
		this.nodeEle=node;
		this.width=node.clientWidth;
		//console.log("创建Table成功");
	}
	Table.prototype={
		createTable:function(json){
			if(!json){
				throw "Place check your rows and cols";
			}else{
				this.width=this.width/json.cols;
				this.cssStyle();
				
				console.log(this.width);
				//console.log("行数为："+json.rows+"\n列数为："+json.cols);
				/*生成行*/
				for(var i=0,rows=json.rows;i<rows;i++){
					var rowNode=document.createElement("div");
					rowNode.className = "row";
					if(i%2){
						rowNode.className += " double";
					}
					/*生成列*/
					for(var j=0,cols=json.cols;j<cols;j++){
						var colNode=document.createElement("div");
						colNode.className="col";
						rowNode.appendChild(colNode);
					}
					this.nodeEle.appendChild(rowNode);
				}
			}
			//console.log(this.nodeEle);
		},
		cssStyle:function(){
			var style=document.getElementsByTagName("style")[0];
			if(!style){
				style=document.createElement("style");
			}
			style.innerHTML += " #table .col{float:left;width:"+this.width+"px;box-sizing:border-box;border:1px solid #999;height:36px}"
							 + " #table .row::after{content:'';display:block;clear:both;}"
							 + " #table .double{background-color:skyblue}";
			document.head.appendChild(style);
		},
	};
}());

页面效果如下：

知识点：

一、插件是功能的集合例如jQuery和vue.js，面向的开发人员，而不是普通客户
插件都是写在函数作用域中的，并暴露出一个实例（对象）or构造函数（产生对象的构造函数）
函数作用域，防止变量冲突
函数作用域中声明全局函数
(function(){
window.fn=function(){

}
})();
//IIEF(立即执行函数) 通过作用域在全局作用域下暴露一个名字

插件封装原则：
1、暴露出来的实例必须只有一个
2、IIFE包裹！执行包裹函数作用域保护
3、实例方法不要写在函数中

备注：style.width 可改不可读

f.__proto__ ===fn.prototype; //true __proto__:关系的维持

原型链：关系
JS参考的为C和self语言