一起来体味jQuery编程

jQuery类库在许多编程环境中会用到，本示例通过制作一个web网页，放置一个按钮，当点击(doclick)按钮时，修改（dochange）按钮显示文本值（value），并显示修改后的值，借以抛砖引玉。

在Visual Studio 2017中创建网站项目，引入 jQuery；

基于基于jQuery定义功能：

在HTML页面加入按钮：<input id="btnCallme" type="button" value="Click Me" />

一、定义基本的操作方法（doclick、dochange）

top.cobol = (function ($) {
    "use strict";
    var cobol = {
        doclick: function () {
            this.dochange();
        },
        dochange: function () {
            alert($("#btnCallme").val("Changed!").val());
        }
    };
    return cobol;
})(window.jQuery);

二、绑定基础方法到按钮事件（click）

var bootstrapx = function ($, cobol) {
    "use strict";
    var cme = {
       init:function () {
            this.bind();
        },
        bind: function () {
            $("#btnCallme").on("click", function () {
                return cobol.doclick();
            });
        }
    };
    cme.init();
};

三、实例化以加载定义

$(function () {
      bootstrapx(jQuery,top.cobol)
});

也可以将此步骤自执行函数与步骤二的放在一起，如下：

(function ($, sunjet) {
    "use strict";
    var cme = {
        init: function () {
            this.bind();
        },
        bind: function () {
            $("#btnCallme").on("click", function () {
                return cobol.doclick();
            });
        }
    };
    $(function () {
        cme.init();
    });
})(window.jQuery, top.cobol);

扩展思考：

如果需要对cobol进行扩展，可以传入已经定义的cobol，通过jQuery的功能扩展实现，代码如下：

(function ($, cobol) {
    "use strict";
    $.extend(cobol, {
        httpShowInfo: function (msg) {
            alert(cobol.domerge(msg));
        }
    });

})(window.jQuery, top.cobol);

在HTML加入：

<input id="btnShowInfo" type="button" value="Do Merge" />

在bind方法中加入以下功能：

$("#btnShowInfo").on("click", function () {
      return cobol.httpShowInfo("all thing");
});

扩展的形式有多种，可以扩展原有的自定义对象、对既有的jQuery对象扩展、将方法属性扩展到指定的命名空间：

(function ($, cobol) {
    "use strict";
    //扩展到 自定义的cobol对象
    $.extend(cobol, {
        httpGetInfo: function (msg) {
            return cobol.domerge(msg);
        }
    });

    //扩展到jQuery对象
    $.fn.extend({
        fnhttpShowInfo: function (msg) {
            return msg + "from fnhttpShowInfo";
        }
    });

    //在jQuery中创建net空间,并创建方法、属性
    $.extend({ net: {} });
    $.extend($.net, {
        httpShowInfo: function (msg) {
            return cobol.domerge(msg);
        },
        myMessage: "Message from myMessage properity",
        EmbledMessage: { Name: 'Json', Address: 'Shanghai' }
    },
        { Zip: '242000' }, { Zip: '241106' });

})(window.jQuery, top.cobol);

在bind方法中，注册的click事件中添加如下代码行：

$("#btnShowInfo").on("click", function () {
      alert(cobol.httpGetInfo('extend function httpGetInfo in cobol object.'));
      alert($.fn.fnhttpShowInfo('fnhttpShowInfo function in $.fn.extend.'));
       alert($.net.httpShowInfo("$.extend net workspace function httpShowInfo"));
       alert('$.extend net workspace properity:' + $.net.Zip);
       alert('$.extend net workspace Embled properity merge:' + $.net.EmbledMessage.Name + " lived in " + $.net.EmbledMessage.Address); 

       alert($("#btnCallme").fnhttpShowInfo('jQuery selector(#btnCallme) call extend function:fnhttpShowInfo'));
            });

以上代码，总体上基于jQuery定义与使用自定义功能。