RequireJs初步了解和使用

RequireJs的作用：
1.防止js加载阻塞页面渲染
2.使用程序调用的方式加载js，防止书写过多的.js文件
require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短
define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数
关于requireJs的几个小Demo
首先添加requireJs的js文件
Demo1:

a.js

//第一种写法/*function fun1(){  alert("it works");}fun1();*///第二种写法/*(function(){    function fun1(){      alert("it works2");    }    fun1();})()*///第三种写法/*define(function(){    function fun1(){      alert("it works");    }    fun1();})*///第四种写法define(["test1",'js2/test2'],function(test1,test2){    function fun1(){      alert("it works");      alert(test1.add(3,7));      alert(test2.sub(10,4));    }    fun1();})

test1.js

define(function(){     var add=function(x,y){          return x+y;        };        return{            add:add        };});

main.js

require.config({    paths : {       /* "test1":"test1",*/        "a":"a"    }})

.jsp写法

<script src="js/require.js" data-main="js/main"></script><script type="text/javascript">/* require(["test1","a"],function(test1,a){    alert(test1.add(5,8));}) */require(["a"],function(a){    alert(a);})</script>

Demo2:
定义一个.js文件

define(    [        'dojo/_base/declare',        'dist/js/command/_baseCommand'    ],function(declare,baseCommand) {        var exports = dojo.declare("CommonMethods",baseCommand, {             tableId:null,               myMap:null,             url:null,             guid:"1EC3E7ED-0F84-4E80-A681-F7E49D48535A",             name:"CommonMethods",            /**             * 构造函数             * @param map Map对象             * @returns 无             */            constructor: function (tableId) {                                      this.tableId=tableId;            },            /**             * 点击             * @returns 无             */            daochu:function(){                try{                                 var tableData='<table cellspacing="0" class="pb" border="2">';                 tableData+='\n<tr>';                 var tableName='';                 var tableArray=[];                 //获取列                 var opts = $(this.tableId).datagrid('getColumnFields');                 //获取表头和表头属性                 for(var i=1;i<opts.length;i++){                     var col = $(this.tableId).datagrid( "getColumnOption" , opts[i] );                     tableData+='\n<th>';                     tableData+=col.title;                     tableData+="</th>";                    // tableArray.push(col.title);                     tableArray[i]=opts[i];                 }                 tableData+='</tr>';                /* for(var i=0;i<tableArray2.length;i++){                     tableData+=tableArray2[i]+",";                 }*/                 /*for(var i=0;i<tableArray.length;i++){                     tableData+='\n<th>';                     tableData+=tableArray[i];                     tableData+="</th>";                              }*/                var table=$(this.tableId).datagrid("getRows");//获取当前页的所有行                 for(var i=0;i<table.length;i++){                   tableData+='\n<tr>';                    for(var j=1;j<tableArray.length;j++){                        if(table[i][tableArray[j]]!=null){                                tableData+='\n<td>'+table[i][tableArray[j]]+'</td>';                           }else{                            tableData+='\n<td>'+'暂无数据'+'</td>';                        }                                                           }                    tableData+='</tr>';                }                tableData+='</table>';                 document.getElementById("hlf").value=tableData;                var ss=document.getElementById("hlf").value ;                // alert("sss");                 document.getElementById("formAction").submit();                                                  }catch(ex){                }            }        });        return exports;    });

格式就是：

define([xxx,xxx2,xxx3],function(xxx1,xxx2,xx3){  var methodName=dojo.declare("本.js名称"{         tableId:null,        name:"本.js名称",        constructor: function (tableId) {                                      this.tableId=tableId;            },        daochu:function(){        },})；return methodName;})

其他.js文件调此.js文件的方法
首先在顶端添加依赖
然后通过new一个对象使用
示例：

 $("#report").on('click',function(){                                        //this.mCommonMethods=new CommonMethods(this.myMap,"#staticsTable");                      this.mCommonMethods=new CommonMethods("#staticsTable");                                                   this.mCommonMethods.daochu();                                                            });