JQ闭包 / JS插件开发
前端笔记 2017-03-28 15:14:03

 

 

JS插件开发demo

 

JavaScript Code复制内容到剪贴板
  1. //plugin.js  
  2. ;(function(undefined) {  
  3.   "use strict"  
  4.   var _global;  
  5.   
  6.   function result(args, fn) {  
  7.     var argsArr = Array.prototype.slice.call(args);  
  8.     if(argsArr.length > 0) {  
  9.       return argsArr.reduce(fn);  
  10.     } else {  
  11.       return 0;  
  12.     }  
  13.   }  
  14.   
  15.   var plugin = {  
  16.       add: function() {  
  17.           return result(arguments, function(pre, cur) {  
  18.               return pre + cur;  
  19.           });  
  20.       },  
  21.       sub: function() {  
  22.           return result(arguments, function(pre, cur) {  
  23.               return pre - cur;  
  24.           });  
  25.       },  
  26.       mul: function() {  
  27.           return result(arguments, function(pre, cur) {  
  28.               return pre * cur;  
  29.           });  
  30.       },  
  31.       div: function() {  
  32.           return result(arguments, function(pre, cur) {  
  33.               return pre / cur;  
  34.           });  
  35.       },  
  36.       sur: function() {  
  37.           return result(arguments, function(pre, cur) {  
  38.               return pre % cur;  
  39.           });  
  40.       }  
  41.   }  
  42.   
  43.   // 将插件对象暴露给全局对象  
  44.   _global = (function(){ return this || (0, eval)('this'); }());  
  45.   if(typeof module !=="undefined" && module.exports) {  
  46.       module.exports = plugin;  
  47.   } else if (typeof define === "function" && define.amd) {  
  48.       define(function() {return plugin;});  
  49.   } else {  
  50.       !('plugin' in _global) && (_global.plugin = plugin);  
  51.   }  
  52.   
  53. }());  
  54.   
  55. //输出结果  
  56. with(plugin){  
  57.     console.log(add());  
  58.     console.log(add(2, 1)); //3  
  59. }  

 

 

 

 

 

闭包写法，var 表示只能在函数内使用，_self开放给外部使用的方法

 

 (function($){


    var WidgetPlugin = function(){

        var _self = this;
        var ses = {
            'show_plug' : '#plugin .modal-body .form-horizontal',
        };

        /* 渲染配置表单 */
        _self.renderPluginConfigForm = function(data){
            var index = layer.load(1);
            $.post("/admin/plan/com/plugin/view", data,
                function(rep){
                    layer.close(index);
                    if(rep.code == 200){
                        $(ses.show_plug).html(rep.data);
                    }else{
                        layer.msg("拉取失败，请重试");
                    }
                }, "json");
        }

        /* 保存插件配置 */
        _self.saveWidgetConfig = function(data){
            var index = layer.load(1);
            $.post("/admin/plan/com/plugin/edit", data,
                function(rep){
                    layer.close(index);
                    var content= rep.data;
                    layer.msg(content, {
                        time: 1000
                    }, function(){
                        document.location.reload();
                    });
                }, "json");
        }

        _self.insertInstance = function(data){
            layer.open({
                title:'信息',
                content: "是否确定启用实例",
                btn: ['是', '否'],
                yes:function(index){
                    $.post("/admin/plan/com/plugin/create", data,
                        function(rep){
                            if(rep.code == 200){
                                layer.msg(rep.data, {
                                    time: 1000
                                }, function(){
                                    document.location.reload();
                                });
                            }else{
                                layer.msg(rep.data);
                            }
                        }, "json");
                }
            });
        };

        /* 初始化加载layer插件 */
        var init = function(){
            layui.use(['layer'], function(args){
                var layer = layui.layer;
            });
        }
        init();
    }

    //-- Process event --
    var widgetHandler = new WidgetPlugin;

    $(".editPlug").on('click', function() {
        var id = $(this).attr("instance-id");
        var csrfToken = $('meta[name="csrf-token"]').attr("content");
        var data = { "id": id,"_csrf":csrfToken };
        widgetHandler.renderPluginConfigForm(data);
    });

    $("#up_btn").on('click', function() {
        var data = $("#pluginForm").serialize();
        widgetHandler.saveWidgetConfig(data);
    });

    $(".addInstance").on('click', function() {
        var id = $(this).attr("data-widget-id");
        var csrfToken = $('meta[name="csrf-token"]').attr("content");
        var data = {"widgetId":id,"_csrf":csrfToken};
        widgetHandler.insertInstance(data);
    });

})(jQuery);

 

闭包函数如何访问外部变量：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     // var name = "The Window";  
  3.     // var object = {  
  4.     //     name : "My Object",  
  5.     //     getNameFunc : function(){  
  6.     //         return function(){  
  7.     //             return this.name;  
  8.     //         };  
  9.     //     }  
  10.     // };  
  11.     // alert(object.getNameFunc()()); // 访问闭包内外部元素  
  12.   
  13.   
  14.   
  15.     var name = "The Window";  
  16.     var object = {  
  17.         name : "My Object",  
  18.         getNameFunc : function(){  
  19.             var that = this;  
  20.             return function(){  
  21.                 return that.name;  
  22.             };  
  23.         }  
  24.     };  
  25.     alert(object.getNameFunc()());// 只能访问内部的元素  
  26.   
  27. </script>  

 

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/94.html

上一篇 客户端(浏览器端)数据存储技术概览
下一篇 js判断当前页面在移动设备还是在PC端中打开
相关的文章
Powered by yoyo苏ICP备15045725号