Jquery 插件封装

(function($){ 

    if(!$ || !$.prototype.jquery) throw new ReferenceError('must import jquery');

    // 向其原型获取方法

    $.fn.extend({

        zTree(data,callback){

            typeof callback === 'undefined' ? callback = function(){} : null; 

            let $self = this;

            let n=0;

            // 数据绑定

          

            let getHTML = data => { 

                let str = ``;

                n++;

                data.forEach((item,index) => {

                    let {name,open,children} = item;

                    str +=`<li>

                                <a href="" class="title">${name}</a>

                                ${children && children.length > 0 ?`

                                    <em class="icon ${open ? 'open' : ''}"></em>

                                    <ul class="level level${n}" style="display:  ${open ? 'block' : 'none'};">

                                        ${getHTML(children)}

                                    </ul>`

                                 : '' } 

                            </li>

                    `;

                });

                n--;

                return str; 

            }

            $self.html(`

            <ul class="level level0">

                ${getHTML(data)}

            </ul>

            `);

            // 折叠展开切换

            $self.on('click',function(ev){

                // 获取事件源：点击的谁，事件源就是谁

                let target = ev.target,

                $target = $(target);

                // 点击的是 em

                if(target.tagName === 'EM'){

                    let $ul = $target.next('ul');

                    $ul.stop().slideToggle(200);

                    $target.toggleClass('open');

                    // 执行回调函数

                    callback && callback($target[0],$ul[0]);

                } 

            })

        }

    })

   

 

})(typeof jQuery !== 'undefined' ? jQuery : undefined);

 

调用