JS插件封装——生成表格

调用页面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

页面效果如下：

知识点：

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

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

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

备注：style.width    可改不可读

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

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