第一步,创建一个名为$Data的类
class $Data { }
将这个类返回 return $Data();调用这个类的时候必须new,在它外层嵌套一个方法借助它砍掉new
var $Data = (function (d) {
class $Data { }
return new $Data();
}
创建一个接口
interface init {
el: string;
done: Function;
way: string;
not: string;
begin: Function;
}
首先需要封装一个方法用来获取节点,这里有两个获取节点的方法,主要想到这个插件以后可能会扩展。querySelector和
querySelectorAll不同,querySelector只找一个,querySelectorAll找所有。
// 获取元素节点
public static GetNode(el: string) {
return document.querySelector(el);
}
// 获取元素节点
public static GetNodes(el: string) {
return document.querySelectorAll(el);
}
主要用来检测重要参数有没有拿到
public static init($d: init) {
if (!$d.el || $d.el === "" || typeof $d.el !== "string") {
console.log("%c Initialization failed, el parameter is missing...", "background: #e7445a ;color: #fff;padding: 10px;border-radius: 5px;border: 2px solid #fff;");
return false;
}
if (!$d.not || $d.not === "" || typeof $d.not !== "string") {
console.warn("Some data may be lost because the not parameter is missing. Are you sure to continue?");
}
if (!$d.way || $d.way === "" || typeof $d.way !== "string") {
console.warn("Missing way parameter detected,system has turned on default match 'name'....");
}
return true;
}
getChildren方法主要用来获取一级子元素,参数为element类型(DOM)
public static getChildren(obj: Element) {
var objChild = [];
var objs = obj.getElementsByTagName(’*’);
for (var i = 0, j = objs.length; i < j; ++i) {
if (objs[i].nodeType != 1) {
alert(objs[i].nodeType);
continue;
}
var temp = objs[i].parentNode;
if (temp.nodeType == 1) {
if (temp == obj) {
objChild[objChild.length] = objs[i];
}
} else if (temp.parentNode == obj) {
objChild[objChild.length] = objs[i];
}
}
return objChild;
}
创建GetsArrayList方法,它是用来获取数据并将数据格式化的方法,s接收的是一个对象,可以看到它的类型为init,也就是我们创建的接口
GetsArrayList(s: init) {
检测参数
let SystemState = $Data.init(s);
如果检测到没有重要的参数提示它并且不执行下面的代码!
if (!SystemState) return;
检测有begin参数并且类型为function,如果是那么执行这个方法,实现开始执行前的回调
if (s.begin && typeof s.begin === "function") s.begin();
检测way参数并初始化
if (!s.way || s.way == "" || typeof s.way !== "string") s.way = "name";
这个常量拿到的是需要获取数据的对象
const $dom = $Data.GetNode(s.el);
拿到$dom里面的全部一级子元素
let FirstNode = $Data.getChildren($dom),
Data = [];数据集
遍历一级子元素
for (let i = 0; i < FirstNode.length; i++) {
拿到一级子元素里面的所有节点
let node = FirstNode[i].getElementsByTagName("*"),
obj = {};临时数据集
遍历一级子元素里面所有节点
for (let y = 0; y < node.length; y++) {
获取指定的属性作为KEY,默认为name
const way = node[y].getAttribute(s.way);
处理如果没有属性出现的奇怪现象 如:{null:”hello world!”,undefined:”hello world!”}
if (way) {
判断该属性是否为自定义属性,如input有name,div也有name,但div的name是自定义属性而input是input原型里面的,div不能通过成员所属运算符获取
if (node[y].value) {
通过成员所属运算符获取
obj[way] = node[y].value ? node[y].value : "";
} else {
if (s.not || s.not !== "") {
通过获取属性获取
obj[way] = node[y].getAttribute(s.not) ? node[y].getAttribute(s.not) : "";
}
}
}
}
最后返回处理好的数据
Data.push(obj);
}
if (s.done && typeof s.done === "function") s.done(Data);
return Data;
}
最后使用tsc编译TypeScript 【tsc js/index.ts】
调用方法
$Data.GetsArrayList({
el: ".tableTag div",
way: "name",
not: "value",
begin: function () {
alert("我要开始啦");
},
done: function ($d) {
console.log($d);
}
});
完整代码
var $Data = (function (d) {
//接口
interface init {
el: string;
done: Function;
way: string;
not: string;
begin: Function;
}
class $Data {
GetsArrayList(s: init) {
let SystemState = $Data.init(s);
if (!SystemState) return;
if (s.begin && typeof s.begin === "function") s.begin();
if (!s.way || s.way == "" || typeof s.way !== "string") s.way = "name";
const $dom = $Data.GetNode(s.el);
let FirstNode = $Data.getChildren($dom),
Data = [];
for (let i = 0; i < FirstNode.length; i++) {
let node = FirstNode[i].getElementsByTagName("*"),
obj = {};
for (let y = 0; y < node.length; y++) {
const way = node[y].getAttribute(s.way);
if (way) {
if (node[y].value) {
obj[way] = node[y].value ? node[y].value : "";
} else {
if (s.not || s.not !== "") {
obj[way] = node[y].getAttribute(s.not) ? node[y].getAttribute(s.not) : "";
}
}
}
}
Data.push(obj);
}
if (s.done && typeof s.done === "function") s.done(Data);
return Data;
}
// 获取一级子元素
public static getChildren(obj: Element) {
var objChild = [];
var objs = obj.getElementsByTagName('*');
for (var i = 0, j = objs.length; i < j; ++i) {
if (objs[i].nodeType != 1) {
alert(objs[i].nodeType);
continue;
}
var temp = objs[i].parentNode;
if (temp.nodeType == 1) {
if (temp == obj) {
objChild[objChild.length] = objs[i];
}
} else if (temp.parentNode == obj) {
objChild[objChild.length] = objs[i];
}
}
return objChild;
}
// 获取元素节点
public static GetNode(el: string) {
return document.querySelector(el);
}
// 获取元素节点
public static GetNodes(el: string) {
return document.querySelectorAll(el);
}
// 初始化配置
public static init($d: init) {
if (!$d.el || $d.el === "" || typeof $d.el !== "string") {
console.log("%c Initialization failed, el parameter is missing...", "background: #e7445a ;color: #fff;padding: 10px;border-radius: 5px;border: 2px solid #fff;");
return false;
}
if (!$d.not || $d.not === "" || typeof $d.not !== "string") {
console.warn("Some data may be lost because the not parameter is missing. Are you sure to continue?");
}
if (!$d.way || $d.way === "" || typeof $d.way !== "string") {
console.warn("Missing way parameter detected,system has turned on default match 'name'....");
}
return true;
}
}
// 构造函数必须使用new,外包一个函数砍掉new
return new $Data();
})();