📜 ⬆️ ⬇️

Nano - miniature javascript framework

Hello, reader. There are many excellent and powerful JavaScript frameworks. JQuery, MooTools, ExtJS, and many others. They are cross-browser and huge. And to use them is a pleasure.

But sometimes, sometimes, I want to write some small script for 5 kilobytes and somehow my conscience torments me to connect JQuery, which weighs 75 kilobytes in compressed form. And every time you start writing your own mini-framework:
var dom = { id : function (id) { return document.getElementById(id); }, tag : function (tag) { return document.getElementsByTagName(tag); }, }; 


It seems to be more to start and do not. And then you remember about createElement, an easy way to assign CSS, inheritance, extension prototype. And in general, every time you write your bike.
This time I decided to write a miniature framework that could be connected to even the smallest projects without conscience. In compressed form, it weighs only 4 kilobytes (20 times less than JQuery).
And there is another advantage in comparison with all modern frameworks - a complete rejection of outdated browsers, due to which half of JQuery was contained in these 4 kilobytes.
')
So, welcome to the Nano JavaScript framework.

Read the current second part!





Idea


In fact, I already have even one project on this framework, but I will show it a bit later)
Nano is hardly useful for developing on regular sites as usual, but sometimes this framework is a better choice than one of the JavaScript monsters.

It uses the full power of JavaScript 1.8, which is supported only by modern browsers, such as Firefox 3.5+. Yes, even in the third Fox part will not work. I hope that such a step will bring a highlight to the framework and expand the range of possibilities.

Where can it be used? When you write some kind of test script, when you are developing something for the latest browsers, such as plugins or user-scripts and on the serverside. Moreover, the current version will not break anything even if you connect it to an existing project.

Work with DOM


When working with DOM feels the influence of jQuery):
 nano(); nano('tag .class'); nano({ tag : 'tag' }); nano({ id : 'id' }); nano({ Class : 'class' }); nano(document.getElementsByTagName('tag')); nano(selector, context); 

 nano(function () { // DOMContentLoaded }); nano().ready(true, function () { // document.onload }); 


You can make call chains:
 nano('tag .class') .css({ 'background' : 'red', 'color' : 'blue' }) .appendTo('body') .find('code') .destroy(); $('table').delegate('td', 'click', function (e) { nano(e.target).css({ background : 'green' }); }); 


For css selectors, I use querySelectorAll , because it will work extremely fast.

Class creation


PLO from Mutuls had a minor effect on me, but I tried to simplify it as much as possible and not go far from the original approach in JavaScript. No "kosher" Class. To expand an object, two static methods are used: node.extend for expanding the object itself and node.implement for expanding its prototype. In fact, this is a short record quite familiar.
 ClassName.prototype.methodName = function () {} 


 var Color = nano.implements(function (r,g,b) { this.r = r; this.g = g; this.b = b; }, { getLuminance : function () { return Math.round((this.r * 3 + this.g * 6 + this.b * 1) * 0.1); }, isDark : function () { return this.getLuminance() < 128; } }); 


JavaScript 1.8.5 Compatiblity


Implemented three methods that are not yet supported by most browsers - Function.prototype.bind , Object.keys , Array.isArray . It is a pity that all sorts of freeze and defineProperty will not work)

Prototype expansion


If you call nano.rich() , then the prototypes of some embedded objects will be expanded, for example, Number.prototype.between or Array.prototype.contains will appear.

Where to get?


Under the LGPL license, the latest version can be downloaded from the GitHub repository . There is also documentation.
I am pleased to accept offers and patches.

Source: https://habr.com/ru/post/109762/


All Articles