jquery更改ready方法调用顺序,在ready以后执行Js代码

jquery更改ready方法调用顺序,在ready以后执行Js代码

Table of Contents

• 问题描述
• 在全部的ready方法以后执行上面的方法
• 重写$.fn.ready方法
• 查看$.fn.ready的源码定义
• 修改本身的$.fn.ready
• 闭包,增长安全性

问题描述

我想要控制Input,回车不提交表单,思路以下:

$(function(){
    $("form input").on("keypress",function(event){
        if(event.keycode == 13){
            return false;
        }
    })
})

固然上面这段代码要放是base.js(全部页面都要引入的基础函数)里面,由于有好多页面都存在这个问题. 问题来了,在某些页面中,当执行上面的代码时,$("form input")还不存在,,这些元素是在页面的$(function(){})–(我把它叫作ready方法)中产生的.. 因此,如今就有一个需求 在全部的ready方法以后执行上面的方法

在全部的ready方法以后执行上面的方法

jQuery的ready方法以下:

$(function(){
//....
});

或者

$(document).ready(function(){
//....
});

jQuery的方法分两种,一种是$.extend等,另外一种是\(("button").on(...),(定义为\).fn.on)从上面分析,ready方法应该属于第二种 因此我打算从新ready方法

重写$.fn.ready方法

1. easy test

$.fn.ready = function(){alert("hello,world");}

放到base.js中,发现全部页面在加载的时候,都不执行本身的ready方法了,而是弹出了"hello,world"

1. 执行页面中的ready方法

$.fn.ready = function(func){
if(func){   //若是有本身的ready方法,
 func();    //运行该方法
}
alert("hello,world");
}

执行结果是,既执行了本身的ready方法(在里面写了个alert(1)作为测试),也执行了后续方法.. 可是,页面没有加载出来,由于你们都知道,ready方法是当页面加载完成才去执行的,而如今是当运行到$(function(){})这里的时候,就执行了,而没有等待页面加载..

查看$.fn.ready的源码定义

源码定义以下:

jQuery.fn.ready = function( fn ) {

        // Add the callback
        jQuery.ready.promise().done( fn );

        return this;
};

jQuery 用Deferred和promise等来控制等加载完成后执行.而done方法能够接受多个函数.

修改本身的$.fn.ready

jQuery.fn.ready = function( fn ) {
        // Add the callback
        jQuery.ready.promise().done(fn,function(){
        $("form input").on("keypress",function(event){
            if(event.keycode == 13){
                return false;
            }
        })
    });
        return this;
};

测试,可用,顺序是先执行fn(页面中的多个ready方法),后执行本身的方法,而此时input已经建立成功了,即能访问到了

闭包,增长安全性

最终代码以下:

(function($){
        $.fn.ready = function( fn ) {
                $.ready.promise().done(fn,function(){
                        $("form input").on("keypress",function(event){
                                if(event.keyCode == 13){
                                        return false;
                                }
                        });
                });
                return this;
        };
})(jQuery);

Created: 2016-05-04 周三 17:48

Emacs 24.5.1 (Org mode 8.2.10)

Validate