Nano - a miniature JavaScript framework

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

    But sometimes, it happens, 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)  { returndocument.getElementById(id); },
    	tag : function (tag) { returndocument.getElementsByTagName(tag); },
    };
    


    It seems that more is not necessary for a start. And then you remember 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 even to the smallest projects without a twinge of conscience. In compressed form, it weighs only 4 kilobytes (20 times less than jQuery).
    And there is one more advantage in comparison with all modern frameworks - a complete rejection of outdated browsers, due to which half of JQuery fits in these 4 kilobytes.

    So welcome, the Nano JavaScript Framework

    Read the current second part!





    Idea


    In fact, I already have one project in this framework, but I will show it a little later)
    Nano is unlikely to be useful for development on ordinary sites in normal mode, but sometimes this framework is a better choice than one of the JavaScript monsters.

    It takes full advantage of the JavaScript 1.8 features that are only supported by modern browsers, such as Firefox 3.5+. Yes, even in the third Fox part does not work. I hope that such a step will bring a twist to the framework and expand the range of possibilities.

    Where can I use it? When you write some kind of test script, when you develop something for the latest versions of browsers, for example plugins or user-scripts and on the server side. Moreover, the current version will not break anything even if you connect it to an existing project.

    Work with the DOM


    When working with the DOM, it feels the effect 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, therefore it will work extremely quickly.

    Class creation


    OOP from Mutulza had little impact on me, but I tried to simplify it as much as possible and not go far from the original JavaScript approach. No Kosher Class. Two static methods are used to expand an object: node.extend to expand the object itself and node.implement to extend its prototype. In fact, this short recording is 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 () {
    		returnMath.round((this.r * 3 + this.g * 6 + this.b * 1) * 0.1);
    	},
    	isDark : function () {
    		returnthis.getLuminance() < 128;
    	}
    });
    


    JavaScript 1.8.5 Compatiblity


    Three methods are implemented that are not yet supported by most browsers - Function.prototype.bind , Object.keys , Array.isArray . It’s a pity that all sorts of freeze and defineProperty cannot be implemented)

    Prototype expansion


    If called nano.rich(), the prototypes of some built-in 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 happy to accept offers and patches.

    Also popular now: