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();                                            
                });