闭包创建自己的 plugin 示例 加载 loading

plugin  插件

什么是 plugin?

实现一个功能，与主应用程序分离，减少主应用程序的大小，高复用，可维护

制作过程中，一定要避免依赖其他的元素，减少 id 等的使用，避免与页面中其他内容冲突

 

举个例子，项目中很多时候会用到加载等待的情况，做一个加载中的插件，随情况自动调用

页面加载的效果----灰色蒙层 + 加载文案 + 小动效

loading.css:

loading.js:

var showload = (function(){
    //classname  loading不同的展示形式
    // loadfont 加载的提示文字
    var _showload = function(classname,loadinfo){
        var $loadcover = $("<div class='loadcover'></div>");
        var $loading = $("<div class='"+classname+"'>"+ loadinfo+"</div>");
        $loadcover.append($loading);
        $("body").append($loadcover);
    }
    return {
        showload: _showload
    }
})();

var hideload = (function () {
    var _hideload = function(){
        $(".loadcover").remove();
    }
    return {
        hideload: _hideload
    }
})();

// 界面的使用方法：
/*
现有的 classname 包括: loadone; loadtwo; loadthree; loadfour; loadfive
* showload.showload('loadone','更在加载。。。')
* hideload.hideload()
*
* */

通过闭包的形式，函数可以自动调用，而且只调用一次，减少内存的占用，避免冗余。
闭包格式： (function name(){ //code })()