JQuery模拟一

浏览数：20 / 时间：2015年06月09日

上次参加阿里的实习面试的时候面试官和我提到假如给你一定的时间来证明你的JavaScript水平你会做什么

我毫不犹豫的就回答开发一套JavaScript框架在这个过程中不仅可以熟练使用JavaScript而且还学会解决一些浏览器兼容问题等

这更有利于我们对JavaScript的理解

下面就开始第一步吧我要先把jQuery重写一遍重在理解框架实现原理

//自调函数把window这个全局变量传入
(function(){
    //把jQuery和$另存一份
    var _jQuery = window.jQuery,_$ = window.$;
    //定义jQuery对象
    var jQuery = window.jQuery = window.$ = function(){
        //返回的其实是function init()的实例
        return  new jQuery.fn.init();
    }
    jQuery.fn = jQuery.prototype = {
        //这个方法用来构造jQuery对象
        init:function(){
            return this;
        },
        //定义一些其他的属性
        length: 0,
        jquery:"1.0.0",
        author:"BaiQiang",
        size:function(){
            return this.length;
        }
    };
    //使用jQuery的原型覆盖init的原型 这样就自动把jQuery.prototype的方法可以在init里面使用
    jQuery.fn.init.prototype=jQuery.fn;
})(window);

测试一下像jQuery一样调用属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        console.log($().jquery);
        console.log($().author);
        </script>    
    </body>
</html>