jquery框架原理是什么?jquery原理解析

KLQ 2020-06-22 10:01:12 java常见问答 7597

对于jquery框架是什么相信大家都很清楚了,那么下面要给大家介绍的就是jquery框架的原理,一起来了解一下吧!

下面是一个简单的总结。

jquery框架的总体结构:

(function (w, undefined)
{
    //定义一些变量和函数   
    var
        //对外提供的接口
        jQuery = function (selector, context)
        {
            return new jQuery.fn.init(selector, context, rootjQuery);
        };
    //结jQuery对象添加一些方法和属性
    //jQuery的继承方法
    //jQuery.extend 扩展一些工具的方法(静态方法) jQuery.trim();
    //Sizzle 复杂选择器的实现
    //Callbacks 回调对象--函数的统一管理
    //Deferred 延迟对象,对异步的统一管理
    //support 功能检测
    //Data 数据缓存     
    //queue 队列管理
    //Attribute 属性操作
    //Event 事件处理
    //DOM操作 添加删除、包装筛选等
    //CSS操作
    //提交的数据和ajax
    //运动/动画 FX
    //坐标和大小
    //支持的模块化的模式
    w.jQuery = w.$ = jQuery;
})(window);

jquery框架的实现原理:

/******************** jQuery 框架部分 ************************/
(function (w, undefined)
{
    //第一步:创建一个jQuery函数
    var jQuery = function ()
    {
        //第四步:
        return new jQuery.fn.init();
    }
    //第三步:
    jQuery.fn = jQuery.prototype; //是覆盖prototype
    jQuery.fn = {
        //当创建了一个函数之后,js源码会自动生成 jQuery.prototype.constructor = jQuery;
        //在jQuery中使用这个是为了防止恶意修改:如 jQuery.prototype.constructor = Array;
        constructor: jQuery
        , init: function ()
        {
            return this;
        }
    , };
    jQuery.fn.init.prototype = jQuery.fn; //如果不使用这个,在第四步当中是无法使用new的
    //第五步:使用extend将jQuery模块化(其实原码并不是这样的)这里使用了拷贝,关于拷贝请看 4.js浅拷贝与深拷贝
    //好处:插件扩展时直接使用此方法
    jQuery.fn.extend = jQuery.extend = function ()
    {
        var target = this
            , source = arguments[0] ||
            {};
        for (var key in source)
        {
            if (source.hasOwnProperty(key))
            {
                jQuery.fn[key] = jQuery[key] = source[key];
            }
        }
        return target;
    }
    //第六步:模块一
    jQuery.fn.extend(
    {
        html: function () {}
        , text: function () {}
    , });
    //第六步:模块二
    jQuery.extend(
    {
        ajax: function ()
        {
            //处理json格式的参数及回调函数success,error
            console.log("ajax method");
        }
        , each: function () {}
    , });
    //第二步:对外提供一个接口
    w.jQuery = w.$ = jQuery;
})(window);
//测试1
jQuery.ajax();
//测试2:外部框架的扩展
/******************** 基于jQuery框架的ui框架部分 ************************/
(function (w, jQuery)
{
    //jQuery对象的方法扩展
    jQuery.fn.extend(
    {
        drag: function ()
        {
            console.log("drag method");
        }
        , dialog: function ()
        {
            console.log("dialog method");
        }
    , });
    //jQuery类的方法扩展
    jQuery.extend(
    {
        tool: function ()
        {
            console.log("tool method");
        },
        //....
    });
})(window, jQuery);

示例:

<html>
<head>
<script>
(function(win, undefined){
    var doc = win.document;
    var loc = win.location;
    var jQuery;
    jQuery = function(selector, context){
        return new jQuery.fn.init(selector, context);
    }
    var _jQuery = win.jQuery, _$ = win.$;
    jQuery.fn = jQuery.prototype;

    jQuery.fn = {
        constructor: jQuery,
        init : function(selector, context){
            if(selector.charAt(0)=="#"){
                this.context = doc.getElementById(selector.substr(1));
            }else if(selector.charAt(0)=="."){
                this.context = doc.getElementsByName(selector.substr(1));
            }else if(selector.charAt(0)==":"){
                this.context = doc.getElementsByTagName(selector.substr(1));
            }else{
                this.context = doc.getElementsByTagName(selector);   
            }
            return this;
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;
    
    jQuery.fn.extend = jQuery.extend = function() {
           var target  = this;
           var source = agruments[0] || { };
       for (var p in source) {
            if (source.hasOwnProperty(p)) {
                target[p] = source[p];
            }
        }
        return target;
    }    
    // 对象的方法
    jQuery.fn.extend( {
        val : function() {
            if((typeof _value)=="undefined"){
                return this.context.value;
            }else if((typeof _value)=="string"){
                return this.context.value=_value;
            }      
        },
        
        html : function() {},
        
        text : function() {},
        
        attr : function() {},
        
        prop : function() {},
        
        //...
        
    });
    
    // CSS操作
    jQuery.fn.extend( {
        addClass : function() {},
        
        removeClass : function() {},
        
        css : function() {},
        
        //...
    });    

    // 插件扩展的方法
    jQuery.extend( {
        ajax: function() {},
        
        each: function() {},
        
        when: function() {},
        
        //...
    });  
    // 对外提供的接口,即使用$ 或 jQuery      
    win.jQuery = win.$ = jQuery;

})(window);

window.onload = function(){
    var value = jQuery("#test").val();
    console.log("------"+value);
}
</script>
</head>

<body>
<input type="text" id="test" value="123456" />
</body>
</html>

对于jquery框架的原理你都了解了吗?之前还给大家介绍过jquery框架的特点,也可以去了解一下哦。

希望上面的内容可以对你有所帮助,更多关于jquery框架的入门知识,请继续关注本站来进行了解吧,更多java常见问题为你解答。

推荐阅读:

jquery框架的优势,有哪些优势?

jquery框架有哪些?简要介绍

jquery ajax请求以及如何服务响应?