GetDataAll

第一步,创建一个名为$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();
})();

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值