JavaScript Library Boilerplate
JavaScript Library Boilerplate helps you roll your own js library with a tiny and robust core base.
Create your own library such as jQuery, Zepto, Prototype, etc, very easy and adding your own methods.
The code is written in CoffeeScript, TypeScript and pure JavaScript.
Compiling
**Skip to Usage section if you want to use pure JavaScript version**
For compiling CoffeeScript or TypeScript you will need to install Node.js
After installing Node.js you can compile the files throgh command-line
CoffeeScript
Install CoffeeScript package:
$ npm install -g coffee-scriptCompile file:
$ coffee jslibraryboilerplate_coffee.coffeeTypeScript
Install TypeScript package:
$ npm install -g typescriptCompile file:
$ tsc jslibraryboilerplate_class.tsUsage
Include the .js file in an html document and you are done!
$(...)
Use any valid CSS selector for getting elements from the document
// all p elements
$('p');
// all elements with class 'test'
$('.test');
// checkboxes
$('input[type="checkbox"]');Demo
Copy, paste to an .html file and run (Live demo)
<!doctype html>
<title>JavaScript Library Boilerplate</title>
<!-- include .js file (you may change the name) -->
<script src="jslibraryboilerplate.js"></script>
<script>
// wait for the dom be ready
$(function () {
// get all p elements
var ps = $('p');
console.log('There are ' + ps.length + ' paragraphs on the page');
// set some text for the empty paragraphs
$('.fillme').text('yeah!!');
// iterate p elements to know if they are even or odd
ps.each(function (i, el) {
var evenodd = i % 2 === 0 ? ' even' : ' odd';
this.textContent += ' (' + i + evenodd + ')';
});
});
</script>
<p>This is a paragraph</p>
<p>Another p</p>
<p class="fillme"></p>
<p class="fillme"></p>
<p class="fillme"></p>Adding new methods
You can add any method you need to work with a JSLB DOM collection
Example
$.fn.highlight = function (color) {
color = color || 'yellow'
return this.each(function () {
this.style.setProperty('color', color);
});
};
// highlight all 'strong' elements
$('strong').highlight('red');That's all, go and roll your own JavaScript Library.
License
See LICENSE.txt
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent