AtomJS - miniature javascript framework

Hello! The second part is about the miniature javascript framework Atom ( formerly Nano ).
Now all the excess is removed from the Core, the weight is 1 KB.
As before - a complete rejection of outdated browsers.
Dom, Class, Ajax, etc. - connect as plugins.
Changed repository address: github.com/theshock/atomjs
Under the cut - I'll tell you what's new and describe how to create plugins


More detailed api is on GitHub

Core

In Core, only a little remains - a means to extend the framework, some useful methods and prototype extensions for compatibility with JavaScript 1.8.5
')

atom.extend, atom.implement

atom.extend allows atom.extend to extend objects and the atom itself.
atom.implement allows atom.implement to expand the prototypes of the elements and the Atom
These are the methods used to write plugins.

Currently there is a plugin for working with Dom a la JQuery, a plugin for creating classes similar to the one in MooTools and a set of Ajax plugin

The Dom plugin has changed little since the previous topic , so I will not describe it, and the Ajax plugin will be described below as an example of the plugin

Atom.Plugins.Class

The Class plugin is a bit like the one that goes to MooTools
Simple class creation and inheritance is fairly simple:

 var Animal = atom.Class({ constructor : function (name) { this.name = name; this.log('Animal.constructor'); }, walk : function () { this.log('Animal.walk'); }, //       _name : 'default', set name (name) { this._name = name || 'anonymous'; }, get name () { return this._name; } }); var Dog = atom.Class(Animal, { constructor : function (name, breed) { this.parent(name); this.breed = breed; this.log('Dog.constructor'); }, bark : function () { return this.log('Dog.bark'); } }); 

But you can create not a class, but a class factory, which can expand it with static properties and impurities:

 var AnimalFactory = atom.Factory({ constructor : function (name, breed) { this.name = name; alert(this.self.staticProperty) } }).extend({ staticProperty : 123 }).mixin(MixClass1, MixClass2); var animal = AnimalFactory.produce(['name', 'breed']); 

The factory can be obtained from the class, and the class from the factory:

 var AnimalFactory = atom.Factory({}); var Animal = AnimalFactory.get(); Animal.factory == AnimalFactory; 

In general, the usual classes like in javascript

Creating a plugin, expanding prototypes

So, it is often necessary to extend the prototype of embedded objects. Let's extend the prototype of the standard Array by adding there, if not yet, forEach, map and toArray in the static property:

 // safe            atom.implement(Array, 'safe', { forEach : function (fn) { for (var i = 0, l = this.length; i < l; i++) if (i in this) { fn(this[i], i); } return this; }, map : function (fn) { var arr = []; for (var i = 0, l = this.length; i < l; i++) if (i in this) { arr[i] = fn(this[i], i); } return arr; }, //    ,        get isEmpty () { return !this.length; } }); atom.extend(Array, 'safe', { toArray : function () { return Array.prototype.slice.call(elem); } }); 

Creating a full-featured Atom plugin

 (function () { //      . //  true     atom.plugins['ajax'] = true; //   atom.ajax(config) var ajax = function (userConfig) { //  - var config = atom.extend({ interval : 0, type : 'plain', method : 'post', url : location.href, onLoad : function(){}, onError : function(){} }, userConfig); //   ,      ? var req = new XMLHttpRequest(); req.onreadystatechange = ajax.onready; req.open(config.method.toUpperCase(), config.url, true); req.send(null); }; //     //        ajax.onready = function (e) { if (req.readyState == 4) { if (req.status != 200) return config.onError(e); var result = req.responseText; if (config.type.toLowerCase() == 'json') { result = JSON.parse(result); } if (config.interval > 0) setTimeout(function () { atom.ajax(config); }, config.interval * 1000); config.onLoad(result); }; }; //    Atom atom.extend({ ajax : ajax }); })(); 

Now, if the Dom-plugin is connected, you can extend it with a method that will receive data using ajax and load it into the current element.

 //    Atom atom.extend({ ajax : ajax }); //     Dom if (atom.plugins['dom']) { //      atom.implement({ ajax : function (config) { config = extend({}, config); //  ,  ,   , //      atom() atom.ajax(extend(config, { //       //      onLoad : (config.onLoad || function (res) { this.get().innerHTML = res; }).bind(this), onError : (config.onError || function(){}).bind(this) })); return this; } }); } 

As you can see, nothing complicated)

PS

I am open to suggestions, ideas, commits) I can’t draw the development of this framework myself, but if the community supports, I will be glad.