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

Powered by yoyo苏ICP备15045725号