require.js 入门讲解（二）

require.js使用AMD体系，采用异步方式加载模块，即模块的加载不影响，加载代码后面语句的运行，采用回调函数方式在模块加载完毕后执行回调函数，语法如下示意：

require([module], callback);

该语法说明如下：

module代表需要加载的模块，多个模块采用数组方式表示，依次加载，实际加载的代码如下示意：

require(['math','Eng'], function (math) {

　　　　math.add(2, 3);
       Eng.say('hello');

　　});

采用require.js语法更适合浏览器的运行环境，因为模块代码来自远端服务器，受网络运行环境影响，代码的下载即加载速度都可能比较缓慢，因此需要AMD方式，异步的进行代码的加载与运行；

node.js的模块加载代码：var math = require('math');采用CommonJS的方式，适合在服务器端环境运行，在浏览器环境中可能导致模块加载的卡顿。因此在浏览器环境中采用var math = require('math')加载模块是错误的方式；

二、采用require.js加载模块

       理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

非AMD模块加载语法示例：

require.config({

　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},

　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}

　　});

实际开发环境中，require加载示例：

//=====================模块加载配置======================
requirejs.config({
    baseUrl: '/Scripts',
    paths: {
        app: '/Scripts/app',
        jquery: '/Scripts/jquery-1.10.2.min',
        'jquery.ui': '/Scripts/jquery-ui.min',
        'jquery.validate.min': '/Scripts/jquery.validate.min',
        'jsGrid': '/Scripts/jsgrid.min'
    },
    shim: {       
        'jsGrid': {
            deps: ['jquery']
        },
        'jquery.validate.min': {
            deps: ['jquery']
        } 
    }
});

//==========================加载主模块====================
requirejs(['app/main']);

模块定义示例：

//======================定义应用层面的模块=====================
define(["jquery", "jquery.ui", "jsGrid", 'jquery.validate.min'], function ($,ju,jsGrid,jv) {
    var formSubmitHandler = $.noop;
    var datas = { "name": "test", "password": "test" };
    var editItem = { Name: '', Age: '', Address: '', Country: '', Married: '' };
    var oprResult = false;
    var showDetailsDialog = function (dialogType, client) {

        $("#name").val(client.Name);
        $("#age").val(client.Age);
        $("#address").val(client.Address);
        $("#country").val(client.Country);
        $("#married").prop("checked", client.Married);
      
        

        $("#detailsDialog").dialog("option", "classes.ui-dialog", "highlight");
        buttons = [{
            text: "Ok",
            icon: 'ui-icon-mail-open',
            type: "submit",
            value:"submit",
            click: function () {
                //$(this).dialog("close");
                oprResult = true;      
                //$("form").validate().form();
                if ($("#detailsForm").valid())
                {
                    values = { Name: $("#name").val(), Age: $("#age").val(), Address: $("#address").val(), Country: $("#country").val(), Married: $("#married").prop("checked") };
                    editItem = $.extend(editItem, values);
                    submitData(editItem);

                }
                
           
            }
        }];
        var dl = $("#detailsDialog").dialog("option", "buttons", buttons);

         dl.dialog("open");
    };



    var submitData = function (e) {
        var i = $.Deferred();

        updateData = { Name: e.Name, Age: e.Age, Country: e.Country, Address: e.Address, Married: e.Married };
        $.ajax({
            url: '/Grid/UpdateData',
            type: 'put',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(updateData)
        }
        ).done(function (e) {
            alert('update data successed');
            i.resolve(e);
            $("#detailsDialog").dialog("close");

        }).fail(function (e) {
            alert('update failed!');
        });
        return i.promise();
    };

    var saveClient = function (client, isNew) {
        $.extend(client, {
            Name: $("#name").val(),
            Age: parseInt($("#age").val(), 10),
            Address: $("#address").val(),
            Country: parseInt($("#country").val(), 10),
            Married: $("#married").is(":checked")
        });

        $("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);

        $("#detailsDialog").dialog("close");
    };

    var loadData = function (e) {
        var d = $.Deferred();
        //=================服务端分页需要将页面索引传递到服务端=======================
        pageSize = e.pageSize;
        pageIndex = e.pageIndex;
        $.ajax({
            url: '/Grid/IndexData',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(datas)
        }
        ).done(function (e) {
            alert('load data successed');
            //===========================服务端分页的话就没必要取子集了=========================
            subdata = e.slice(pageSize * (pageIndex - 1), pageSize * pageIndex);
            pagingdata = { data: subdata, itemsCount: e.length };
            d.resolve(pagingdata);
        }).fail(function (e) {
            alert('load failed!');
        });
        return d.promise();
    };

    var insertData = function (e) {
        var d = $.Deferred();
        $.ajax({
            url: '/Grid/UpdateData',
            type: 'put',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(e)
        }
        ).done(function (data) {
            alert('load data successed');
            d.resolve(data);
        }).fail(function (msg) {
            alert('load failed:' + msg + "!");
        });
        return d.promise();
    };

    var deleteData = function (e) {
        var d = $.Deferred();
        $.ajax({
            url: '/Grid/DeleteData',
            type: 'delete',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(e)
        }
        ).done(function (data) {
            alert('delete data successed');
            d.resolve(data);
        }).fail(function (msg) {
            alert('delete failed:' + msg + "!");
        });
        return d.promise();
    }

    return {
        showDetailsDialog,
        saveClient,
        loadData,
        submitData,
        insertData,
        deleteData
    }

});