005--面试原型之jQuery和zepto的简单使用

zepto的简单实现

(function (window) {

    var zepto = {}

    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    zepto.Z = function (dom, selector) {
        return new Z(dom, selector)
    }

    zepto.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }

    var $ = function (selector) {
        return zepto.init(selector)
    }
    window.$ = $

    $.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return '这是一个模拟的 html 函数'
        }
    }
    Z.prototype = $.fn
})(window)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>zepto test 1</p>
    <p>zepto test 2</p>
    <p>zepto test 3</p>

    <div id="div1">
        <p>zepto test in div</p>
    </div>

    <script type="text/javascript" src="./my-zepto.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px')
        alert($p.html())

        var $div1 = $('#div1')
        $div1.css('color', 'blue')
        alert($div1.html())
    </script>
</body>
</html>

jQuery的简单实现

(function (window) {

    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return 'html'
        }
    }

    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    init.prototype = jQuery.fn

    window.$ = jQuery

})(window)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>jquery test 1</p>
    <p>jquery test 2</p>
    <p>jquery test 3</p>

    <div id="div1">
        <p>jquery test in div</p>
    </div>

    <script type="text/javascript" src="./my-jquery.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px')
        alert($p.html())

        var $div1 = $('#div1')
        $div1.css('color', 'blue')
        alert($div1.html())
    </script>
</body>
</html>

为什么会把原挂载到$.fn上或者jQuery.fn上?

只有 $ 会暴露在 window 全局变量
将插件扩展统一到 $.fn.xxx 这一个接口，方便使用

例如$.fn.add=function(x,y){return x+y}

2019-05-09 17:45:04

posted on 2019-05-09 17:46 旧梦丶阅读(108) 评论(0) 编辑收藏举报