首页 新闻 赞助 找找看

请问 requirejs 能否写一个公共模块 如何向这个公用模块里传参?

0
[已关闭问题] 关闭于 2017-07-06 11:40

比如  多个页面都用到增删改方法 ,现在能否写一个公共的模板,各个页面用到时调用就行,而不是需要每个页面都要写一遍??

问题补充:
$(document).ready(function() {
     //绑定新增按钮
     $("#add_btn").click(function(e){
         addOrUpdate('0');//新增
     });
     //绑定修改按钮
     $("#update_btn").click(function(e){
         addOrUpdate('1');//修改
     });
     //绑定删除按钮
     $("#del_btn").click(function(e){
         deletePlan();
     });

 });

 //新增
function addOrUpdate(type) {
    
    var title = '';
    var guid = '';
    if(type=='0'){//新增
        title = '新增执法计划';
    }else{
        title = '修改执法计划';
        var selectedRows = planGrid.fnGetSelected();
        if (selectedRows != null && selectedRows.length != 1) {
            layer.msg("请选择一条执法计划!", {icon: 0});
            return;
        }
        guid = selectedRows[0].guid;
    }
    layer.open({
        type: 2,
        title: title,
        content:"${ctx}gtPatrolPlan/addOrUpdate.html?guid="+guid,
        area:["550px","600px"],
        shadeClose:true,
        maxmin:true
    });
}
 //删除
function deletePlan() {
     var selectedRows = planGrid.fnGetSelected();
     var ids = "";
     if (selectedRows == null || selectedRows.length == 0) {
         layer.msg("请选择要删除的角色!", {icon: 0});
     } else{
         layer.confirm('确定要删除所选记录?', {icon: 3, title:'提示'}, function(index){
              for(var i=0, len = selectedRows.length; i < len; i++){
                  ids += selectedRows[i].guid;
                 if(i != selectedRows.length - 1){
                     ids += ",";
                 }
              }
             $.ajax({
                 async : true,
                cache : false,
                url : "${ctx}gtPatrolPlan/delete.html",
                data : {
                    "ids" : ids
                },
                dataType : "json",
                type : "post",
                success : function(data) {
                     if (data.flag == "true") {
                        layer.msg("删除成功!", {icon: 1});
                        planGrid.reload();
                    } else {
                        layer.msg("删除失败!", {icon: 2});
                    } 
                },
                error : function(data) {
                    layer.msg("网络故障!", {icon: 0});
                }
             }); 
             //layer.close(index);
         });
     }
 }

请问  以这段代码为例 ,应该怎么写呢?求一段实例

主要的哪些放到模块里,传参怎么传??各个页面要使用的话怎么调用??

能否给出具体代码?实在是没用过require,加上水平有限,现在一头雾水。

非常感谢

mx夕酉的主页 mx夕酉 | 菜鸟二级 | 园豆:222
提问于:2017-05-25 10:22
< >
分享
所有回答(3)
0

必须得可以呀

czd890 | 园豆:14292 (专家六级) | 2017-05-25 11:07
 1 $(document).ready(function() {
 2      //绑定新增按钮
 3      $("#add_btn").click(function(e){
 4          addOrUpdate('0');//新增
 5      });
 6      //绑定修改按钮
 7      $("#update_btn").click(function(e){
 8          addOrUpdate('1');//修改
 9      });
10      //绑定删除按钮
11      $("#del_btn").click(function(e){
12          deletePlan();
13      });
14     
15  });
16 
17  //新增
18 function addOrUpdate(type) {
19     
20     var title = '';
21     var guid = '';
22     if(type=='0'){//新增
23         title = '新增执法计划';
24     }else{
25         title = '修改执法计划';
26         var selectedRows = planGrid.fnGetSelected();
27         if (selectedRows != null && selectedRows.length != 1) {
28             layer.msg("请选择一条执法计划!", {icon: 0});
29             return;
30         }
31         guid = selectedRows[0].guid;
32     }
33     layer.open({
34         type: 2,
35         title: title,
36         content:"${ctx}gtPatrolPlan/addOrUpdate.html?guid="+guid,
37         area:["550px","600px"],
38         shadeClose:true,
39         maxmin:true
40     });
41 }
42  //删除
43 function deletePlan() {
44      var selectedRows = planGrid.fnGetSelected();
45      var ids = "";
46      if (selectedRows == null || selectedRows.length == 0) {
47          layer.msg("请选择要删除的角色!", {icon: 0});
48      } else{
49          layer.confirm('确定要删除所选记录?', {icon: 3, title:'提示'}, function(index){
50               for(var i=0, len = selectedRows.length; i < len; i++){
51                   ids += selectedRows[i].guid;
52                  if(i != selectedRows.length - 1){
53                      ids += ",";
54                  }
55               }
56              $.ajax({
57                  async : true,
58                 cache : false,
59                 url : "${ctx}gtPatrolPlan/delete.html",
60                 data : {
61                     "ids" : ids
62                 },
63                 dataType : "json",
64                 type : "post",
65                 success : function(data) {
66                      if (data.flag == "true") {
67                         layer.msg("删除成功!", {icon: 1});
68                         planGrid.reload();
69                     } else {
70                         layer.msg("删除失败!", {icon: 2});
71                     } 
72                 },
73                 error : function(data) {
74                     layer.msg("网络故障!", {icon: 0});
75                 }
76              }); 
77              //layer.close(index);
78          });
79      }
80  }

请问以这段代码为例的话,应该怎么修改呢?能否给一个实例,实在是不知道怎么写了,

主要是哪些写在模块里,然后传参怎么传,谢谢

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-05-25 11:13

@mx夕酉: 

comm:

exports.delete=function(table,id){}

list page:

var comm=require('comm')

delete btn:comm.delete

insert btn:comm.insert

支持(0) 反对(0) czd890 | 园豆:14292 (专家六级) | 2017-05-25 11:18

@calvinK: 没有看懂  但还是谢谢

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-05-25 11:28
0

不知道你想要的是不是这样:

定义一些公用方法,需要时直接调用模块传参。

我大概写了一下。

  HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 </head>
 7 <body>
 8     <script data-main="./main" src="./require.min.js" defer
 9         async="true"></script>
10 </body>
11 </html>

  main.js

 1 require.config({
 2     baseUrl: './',
 3     paths: {
 4         'app': 'app',
 5         'demo': 'demo'
 6     },
 7     shim: {
 8         'demo': ['app']
 9     }
10 })
11 require(['app', 'demo'], function($) {
12 
13 })

  app.js为公用方法类

 1 define([], function() {
 2 
 3     var service = {};
 4 
 5     service.add = function(msg) {
 6         console.log(msg)
 7     }
 8     service.del = function() {
 9         console.log('del')
10     }
11 
12     return service;
13 });

  然后在demo.js中调用app.js中的方法

1 define(['app'], function(app) {
2     console.log(app.add("Hello World"))
3 })

  不知道你是不是想这样。

朝云暮雨 | 园豆:204 (菜鸟二级) | 2017-07-05 10:57

谢谢,想法是这样的。但是实际操作遇到问题,在demo.js中用到ztree树,删除之后要求刷新树列表,但是ztree相关写在demo.js里,,在app.js里删除之后无法调用demo.js里的函数,如果这样的话要怎样能够刷新ztree?

//app.js    
define(['jquery','ClearForm','appDept'],function($,appDept){
    
    function demo(ids){
         $.ajax({
                async : true,
                cache : false,
                url : baseUrl+"gtDept/delete.html",
                data : {"ids" :ids},
                dataType : "json",
                type : "post",
                success : function(data) {
                    if (data.flag == "true") {
                        layer.msg("删除成功!", {icon: 1});
                        appDept.queryDeptTreeWithoutRoot();//ztree
//                        clear_form();
                    } else {
                        layer.msg("删除失败!", {icon: 2});
                    }
                },
                error : function(data) {
                    layer.msg("网络故障!", {icon: 0});
                }
            });
    }
    return{
        demo:demo
    }
    
})

部分demo.js


var setting = null;
var treeObj = null;
var deptId;
$(document).ready(function() {
/*加载公司部门树*/
setting = {
async : {
enable : true,
url : baseUrl+'gtDept/queryDeptTree.html?',
autoParam : ["id"]
},
data : { // 必须使用data
key : {
title : ""
},
simpleData : {
enable : true,
idKey : "id", // id编号命名 默认
pIdKey : "pId", // 父id编号命名 默认
rootPId : 0 // 用于修正根节点父节点数据,即 pIdKey 指定的属性值
}
},
view : {
selectedMulti : false //不允许多选
},
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
deptId = treeNode.id;
findDetails(deptId);
},
/*捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数*/
onAsyncError : zTreeOnAsyncError,//onAsyncError和 onAsyncSuccess默认为null
onAsyncSuccess : function(event, treeId, treeNode, msg) {
}
}
};
/*异常错误的事件回调函数*/
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
layer.msg("网络故障!", {icon: 0});
}
queryDeptTreeWithoutRoot();
});

 

function queryDeptTreeWithoutRoot() {
treeObj = $.fn.zTree.init($("#dept_tree"), setting);
}


/*
删除*/ function deleteDept(id) { var nodes = treeObj.getSelectedNodes(); var ids = ""; // 需要删除的id if (nodes.length == 0) { layer.msg("请选择要删除的部门", {icon: 0}); }else{ layer.confirm('确定要删除该部门及其所有子部门吗?', {icon: 3, title:'提示'},   
function(index){ for(var i=0; i < nodes.length; i++){ ids += nodes[i].id; if(i != nodes.length - 1){ ids += ","; } } /*common del*/ del.demo(ids); layer.close(index); }); } }

 

 

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-07-05 15:44

@mx夕酉: 你在app.js里引用demo.js模块的tree生成方法试试看咯。

支持(0) 反对(0) 朝云暮雨 | 园豆:204 (菜鸟二级) | 2017-07-05 20:03

@mx夕酉: 你仔细看看上面的demo,我觉得你这个完全是很好解决的。

支持(0) 反对(0) 朝云暮雨 | 园豆:204 (菜鸟二级) | 2017-07-05 20:11

@mx夕酉: 给app.js模块删除方法添加一个回调,应该就可以。

支持(0) 反对(0) 朝云暮雨 | 园豆:204 (菜鸟二级) | 2017-07-05 20:16

@坐忘松雪: thank you  已解决

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-07-06 11:37
0

在公共该方法中,原原来的刷新树方法弃用,重新在公共方法下单独写了一个删除节点方法

/*删除节点*/
function removeNodes()
{
/*获取组织机构树*/
  var treeObj = $.fn.zTree.getZTreeObj("dept_tree");
  /*选中节点*/
  var nodes = treeObj.getSelectedNodes();
  for (var i=0; i < nodes.length; i++)
  {
    /*删除选中的节点*/
    treeObj.removeNode(nodes[i]);
  }
}
mx夕酉 | 园豆:222 (菜鸟二级) | 2017-07-06 11:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册