js代码封装

发送AJAX请求时，会用到大量的重复代码，如果能将这些代码进行封装，重复使用，那么开发效率是能够大大提高的。

封装的原理

JS支持自定义函数/类（使用function），可以编写一个工具类（工具函数），通过对参数进行类型检测、正则匹配等方式，进行功能的分治（伪重载）。

// 封装工具类（工具函数）：jQuery（山寨版）
function jQuery(selector){
    // 以"#"开头的string类型参数，视为id选择器，将选择的元素封装为一个jQuery对象
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            // 不以 var 声明的变量，作为全局变量（实例变量）
            domObj = document.getElementById(selector.substring(1))
            return new jQuery() // 封装成jQuery对象，方便连续调用完成回调函数的注册
        }
    }
    
    // 参数类型为函数（函数句柄）时，注册为window.onload的回调函数
    if (typeof selector == "function") {
        window.onload = selector
    }
    
    // 注册选择器选择对象的回调函数。
    // domObj是选择器选择的对象，封装在jQuery对象中，通过对象属性的赋值完成domObj回调函数的注册
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }

    // 静态的方法，发送ajax请求。通过类名jQuery调用
    /**
     * 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
     *      请求的方式(type)：GET/POST
     *      请求的URL(url)：url
     *      请求时提交的数据(data)：data
     *      请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
     */
    jQuery.ajax = function(jsonArgs){ // 使用json对象完成参数的指定
        // AJAX请求四部曲
        // 1.
        var xhr = new XMLHttpRequest();
        // 2.
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
                    var jsonObj = JSON.parse(this.responseText)
                    // 将响应的json字串解析后，调用参数中指定的函数
                    jsonArgs.success(jsonObj) // .success 为响应成功时调用的函数句柄
                }
            }
        }
        // 是POST请求时
        if (jsonArgs.type.toUpperCase() == "POST") {
            // 3.
            xhr.open("POST", jsonArgs.url, jsonArgs.async)
            // 4.
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }
        // 是GET请求时
        if (jsonArgs.type.toUpperCase() == "GET") {
            // 3.
            xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
            // 4.
            xhr.send()
        }

    }
}

$ = jQuery // 使用$简化类名（函数句柄赋值）
// 这里有个细节，执行这个目的是为了让静态方法ajax生效。
new jQuery()

JS静态方法需要类加载后才能执行，如创建对象完成类加载。

封装库的使用

将封装的JS代码写入.js文件，通过<script>标签完成引入。

<!--使用src属性指定封装文件的路径-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>

<script type="text/javascript">
    // 通过$完成函数的调用
    // 参数为function，注册为window.onload回调函数
    $(function(){
        // #开头的string，id选择器获取元素，并封装为属性对象domObj
        $("#btn1").click(function(){ 
            // 返回jQuery对象，连续调用.click方法，注册domObj.onclick的回调函数
            // 使用静态方法发送AJAX请求，所需参数以json格式给出
            $.ajax({
                type : "POST",
                url : "/ajax/ajaxrequest11",
                data : "username=" + $("#username").val(),
                async : true,
                success : function(json){ // 成功时调用的函数
                    $("#div1").html(json.uname)
                }
            })
        })
    })
</script>