1

我已经在移动设备上工作了，但是由于 jQuery 的 32kb gzip-ed 我想知道是否可以创建此代码

$(document).ready(function() {
  $('body').addClass('js');

  var $menu = $('#menu'),
        $menulink = $('.menu-link'),
        $wrap = $('#wrap');

    $menulink.click(function() {
        $menulink.toggleClass('active');
        $wrap.toggleClass('active');
        return false;
    });
});

可以在不依赖任何原生 JavaScript 的库中编写。

可以做到吗？我从哪里开始？

4

5 回答 5

18

JQuery 使用 javascript/DOMscripting 来创建它的框架。JQuery 所做的一切，都可以在基本脚本中完成。例如$('body').addClass('js')可以写成：

document.querySelector('body').className += ' js';

$menulink.toggleClass('active');就像_

var current     = $menulink.className.split(/\s+/)
   ,toggleClass = 'active'
   ,exist       =  ~current.indexOf(toggleClass)
;
current.splice(exist ? current.indexOf(toggleClass) : 0,
               exist ? 1 : 0,
               exist ? null : toggleClass);
$menulink.className = current.join(' ').replace(/^\s+|\s+$/,'');

这就是 JQuery 包装这种代码的原因。

这个 jsfiddle包含一个使用没有框架的 javascript 的工作示例。除此之外，它还演示了如何编写自己的元素包装器。

从哪儿开始？我想你必须深入研究javascript。或者检查这个SO-question

于 2012-10-13T14:51:29.493 回答
3

仅适用于现代浏览器。®

document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('js');

    var wrap = document.getElementById('wrap');
    var menuLinks = Array.prototype.slice.call(document.getElementsByClassName('menu-link'));

    var toggleActive = function(element) {
        element.classList.toggle('active');
    };

    menuLinks.forEach(function(menuLink) {
        menuLink.addEventListener('click', function(e) {
            menuLinks.forEach(toggleActive);
            toggleActive(wrap);
        }, false);
    });
}, false);
于 2012-10-13T15:58:30.557 回答
2 
var toggleClass = function (el, className) {
  if(el) {
    if(el.className.indexOf(className)) {
      el.className = el.className.replace(className, '');
    }

    else {
      el.className += ' ' + className;
    }
 }
};

document.addEventListener('DOMContentLoaded', function () {
  document.body.className += ' js';

  var $menu = document.querySelector('#menu'),
  $menulink = document.querySelectorAll('.menu-link'),
  $wrap = document.querySelector('#wrap');

  $menulink.addEventListener('click', function (e) {

    toggleClass($menulink, 'active');
    toggleClass($wrap, 'active');
    e.preventDefault();
  });
});
于 2012-10-13T15:06:15.373 回答
1

总是有classList（包括不兼容浏览器的解决方法）。

于 2012-10-13T14:27:25.527 回答
0

绝对地。由于 jQuery 是 JavaScript 的子集（完全用 JavaScript 编写），因此您可以复制任何您喜欢的函数。这是你想付出多少努力的问题。下面是我如何在您的帖子中复制有限的 jQuery 子集，并且它可以合理地跨浏览器兼容（如果有点长......）。

var Vanilla;
if (!Vanilla) {
    Vanilla = {};
}
//execute this now to have access to it immediately.
(function () {
    'use strict';
    Vanilla.addHandler = function (elem, event, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(event, handler, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + event, handler);
        }
    };
    Vanilla.hasClass = function (elem, cssClass) {
        var classExists = false;
        //
        if (elem && typeof elem.className === 'string' && (/\S+/g).test(cssClass)) {
            classExists = elem.className.indexOf(cssClass) > -1;
        }
        //
        return classExists;
    };
    Vanilla.addClass = function (elem, cssClass) {
        if (elem && typeof elem.className === 'string' && (/\S+/g).test(cssClass)) {
            //put spaces on either side of the new class to ensure boundaries are always available
            elem.className += ' ' + cssClass + ' ';
        }
    };
    Vanilla.removeClass = function (elem, cssClass) {
        if (elem && typeof elem.className === 'string'&& (/\S+/g).test(cssClass)) {
            //replace the string with  regex
            cssClass = new RegExp('\\b' + cssClass + '\\b', 'g');
            elem.className = elem.className.replace(cssClass, '').replace(/^\s+/g, '').replace(/\s+$/g, ''); //trim className
        }
    };
    Vanilla.toggleClass = function (elem, cssClass) {
        if (Vanilla.hasClass(elem, cssClass)) {
            Vanilla.removeClass(elem, cssClass);
        } else {
            Vanilla.addClass(elem, cssClass);
        }
    };
    Vanilla.getElementsByClassName = function (cssClass) {
        var nodeList = [],
            classList = [],
            allNodes = null,
            i = 0,
            j = 0;
        if (document.getElementsByClassName1) {
            //native method exists in browser.
            nodeList = document.getElementsByClassName(cssClass);
        } else {
            //need a custom function
            classList = cssClass.split(' ');
            allNodes = document.getElementsByTagName('*');
            for (i = 0; i < allNodes.length; i += 1) {
                for (j = 0; j < classList.length; j += 1) {
                    if (Vanilla.hasClass(allNodes[i], classList[j])) {
                        nodeList.push(allNodes[i]);
                    }
                }
            }
        }
        return nodeList;
    };
}());
//Now we have a proper window onload
Vanilla.addHandler(window, 'load', function () {
    'use strict';
    var body = document.body,
        menu = document.getElementById('menu'),
        menulink = [],
        wrap = document.getElementById('wrap'),
        i = 0,
        menulinkClickHandler = function (e) {
            var i = 0;
            for (i = 0; i < menulink.length; i += 1) {
                Vanilla.toggleClass(menulink[i], 'active');
            }
            Vanilla.toggleClass(wrap, 'active');
            return false;
        };
    Vanilla.addClass(body, 'js');
    menulink = Vanilla.getElementsByClassName('menu-link');
    for (i = 0; i < menulink.length; i += 1) {
        Vanilla.addHandler(menulink[i], 'click', menulinkClickHandler);
    }
});
于 2012-10-14T03:53:25.940 回答