README

vanilla JavaScript 的辅助工具。

安装

下载最新包或使用Composer

composer require frontpack/lucy.js

DOM & 事件

包含 src/dom.js。

LucyDom.getById(document, 'element-id');
LucyDom.findAll(document, 'selector'); // returns elements collection
LucyDom.find(document, 'selector'); // returns one element
LucyDom.getClosest(element, 'selector');
LucyDom.each(document, 'selector', function (element, info) {
	console.log(info.index);
	console.log(info.isFirst);
	console.log(info.isLast);
});

LucyDom.hasClass(element, 'class-name');
LucyDom.addClass(element, 'class-name');
LucyDom.removeClass(element, 'class-name');
LucyDom.toggleClass(element, 'class-name');

元素事件

LucyDom.onEvent(eventTarget, 'eventName', handler);

// for example
LucyDom.onEvent(myElement, 'click', function (event) {
	console.log('Clicked!');
	console.log(this); // this === myElement
});

委托事件

LucyDom.onChildEvent(eventTarget, 'child selector', 'eventName', handler);

// for example
LucyDom.onChildEvent(myElement, 'a.ajax', 'click', function (event) {
	console.log('AJAX click');
	console.log(this); // this === child
});

BEM

包含 src/bem.js。

var bem = new LucyBem(document);

// blocks
bem.eachBlock('block', function (block, info) {
	block.hasModifier('xyz');
	block.addModifier('xyz');
	block.removeModifier('xyz');
	block.toggleModifier('xyz');

	console.log(info.index);
	console.log(info.isFirst);
	console.log(info.isLast);
});


// events
bem.onElementEvent('block', 'element', 'click', function (element, event) {
	element.hasModifier('xyz');
	element.addModifier('xyz');
	element.removeModifier('xyz');
	element.toggleModifier('xyz');
});

模态框

包含 src/modal.js。

var myModal = new LucyModal('My Title', function (modal) {
	console.log('Modal opened!');
	modal.title.textContent = 'Hello Title!';
	modal.body.innerHTML = '<p>Modal content</p>';
	modal.closeButton.setAttribute('title', 'Close this');

}, function (modal) {
	console.log('Modal closed!');
});

许可证：新BSD许可证
作者：Jan Pecha，https://www.janpecha.cz/