JQuery模拟一

上次参加阿里的实习面试的时候 面试官和我提到假如给你一定的时间来证明你的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>

 

 

输出信息：

1.0.0
BaiQiang

 

posted @ 2014-04-18 21:52  强子~Developer  阅读(122)  评论(0)  编辑  收藏  举报