美文网首页
仿jq写插件

仿jq写插件

作者: Biao_349d | 来源:发表于2018-10-08 11:25 被阅读0次
    (function (global, factory) {
        if (typeof module === "object" && typeof module.exports === "object") {
            module.exports = factory();
    
        } else if (typeof define === "function" && define.amd) {
            define("MyAutoComponent", [], function () {
                return factory();
            });
        } else {
            if (!global.$$) {
                global.MyAutoComponent = global.$$ = factory();
            } else {
                global.MyAutoComponent = factory();
            }
        }
    })( this, function() {
        function MyAutoComponent() {
            return MyAutoComponent.fn.init;
        };
        MyAutoComponent.fn = MyAutoComponent.prototype = {
            el: document.querySelector('body'),
            init: function() {
                var args = arguments;
                if (args.length === 0) {
                    return MyAutoComponent.fn;
                }
                else if (typeof args[0] === 'string' && args.length === 1 ) {
                    var elements = document.querySelectorAll(args[0]);
                    var i =0;
                    l = elements.length;
                    for (; i<l; i++) {
                        this.el = elements[i];
                        return MyAutoComponent.fn;
                    }
                } else if ( typeof args[1] === "boolean" && args.length === 2 ) {
                    var elements = document.querySelectorAll(args[0]);
                    var i = 0;
                    l = elements.length;
                    for (; i < l; i++) {
                        this.el = elements[i];
                        if (args[1]) {
                            return this.el;
                        } else {
                            return MyAutoComponent.fn;
                        }
                    }
                } else {
                    return MyAutoComponent.fn;
                }
            },
            rename: function(name){
                if(window) {
                    window[name] = new MyAutoComponent;
                }
            },
            on: function(){
                var args = arguments;
                if (!args.length) {
                    return MyAutoComponent.fn;;
                }
    
                var name = args[0];
                var callback = function () { };
                var childrenName = '';
                var isBuhuo = 'false';
    
                if (args[1] && typeof args[1] === "function") {
                    callback = args[1] ;
                }
                if (args[1] && typeof args[1] === 'string') {
                    childrenName = args[1];
                }
                if (args[2] && args[2] ===  "function") {
                    callback = args[2];
                }
                if (childrenName) {
                    this.el.addEventListener(name, function(e){
                        var target = e.target;
                        callback.call( target, e );
                    }, isBuhuo);
                } else {
                    this.el.addEventListener(name, function(e){
                        callback.call(this.el, e);
                    }, isBuhuo);
                }
            },
            render: function(list) {
                var list = list || [];
                var i = 0;
                var l = list.length;
                var html = '';
                for (; i < l; i++) {
                    html += '<li>'+ list[i] +'</li>';
                }
                return html;
            },
            Component: function(options) {
                var list = options.list;    ///////////////渲染的数据;
                var allList = options.allList; /// 总数据;
                var el = options.el;    /// 插入的地方;
                var value = options.value || '';  /// 更改是的数据;
                list = this.searchData(allList, value);  //返回匹配的数据;
                var html = this.render( list );   // 渲染, 返回虚拟dom;
                var dom = document.querySelector(el);   // 获取插入的dom;
                dom.innerHTML = html;   // 插入;
                return list;
            },
            //  找到模糊匹配的数据;
            searchData: function(data, srarchdata) {
                var i=0;
                var l = data.length;
                var arr = [];
                if (!srarchdata) {
                    return data;
                }
                for (i; i<l; i++) {
                    var patten = new RegExp(srarchdata, 'i');
                    var isTrue = data[i].toString().search(patten);
                    if (isTrue !== -1) {
                        arr.push(data[i]);
                    }
                }
                return arr;
            }
        }
        return new MyAutoComponent();
    } )
    
    

    相关文章

      网友评论

          本文标题:仿jq写插件

          本文链接:https://www.haomeiwen.com/subject/rhbdaftx.html