AtomJS — миниатюрный JavaScript фреймворк


    Всем привет! Вторая часть про миниатюрный javascript фреймворк Atom (бывший Nano).
    Теперь из Core убрано всё лишнее, вес — 1 кб.
    Как и прежде — полный отказ от устаревших браузеров.
    Dom, Class, Ajax и т.п. — подключаются как плагины.
    Поменялся адрес репозитария: github.com/theshock/atomjs
    Под катом — расскажу, что нового и опишу, как создавать плагины


    Более подробный api есть на ГитХабе

    Core


    В Core осталось самая малость — средство для расширения фреймворка, кое-какие полезные методы и расширения прототипов для совместимости с JavaScript 1.8.5

    atom.extend, atom.implement


    atom.extend позволяет расширять объекты и сам Атом.
    atom.implement позволяет расширять прототипы элементов и Атома
    Именно этим методы используются для написания плагинов.

    На текущий момент есть плагин для работы с Dom а-ля JQuery, плагин для создания классов похожий на тот, что в MooTools и наборосок плагина Ajax

    Плагин Dom мало изменился со времени предыдущего топика, потому описывать не буду, а Ajax-плагин будет описан ниже, в виде примера плагина

    Atom.Plugins.Class


    Плагин Class немного похож на тот, который идёт в MooTools
    Простое создание класса и наследования — достаточно простое:
    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');
    	}
    });
    


    Но можно создавать не класс, а фабрику класса, которая может расширять его статичными свойствами и примесями:

    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']);
    


    Фабрику можно получить из класса, а класс из фабрики:
    var AnimalFactory = atom.Factory({});
    var Animal = AnimalFactory.get();
    Animal.factory == AnimalFactory;
    


    В общем, обычное такие классы как в JavaScript

    Создание плагина, расширяем прототипы


    Итак, часто необходимо расширить прототип встроенных объектов. Давайте расширим прототип стандартного Array, добавив туда, если еще нету, forEach, map и toArray в статическое свойство:

    // 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);
    	}
    });
    


    Создание полноценного Атом-плагина


    (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 });
    })();
    


    Теперь, если подключён Dom-плагин, можно расширить его методом, который будет получать данные с помощью ajax и загружать в текущий элемент.

    // Добавляем метод в 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;
    		}
    	});
    }
    


    Как видите, ничего сложного)

    PS


    Я открыт для предложений, идей, коммитов) Сам развитие этого фреймворка не потяну, но если сообщество поддержит, то буду рад.
    Поделиться публикацией

    Комментарии 75

      +3
      А как у с потреблением памяти?
      И быстродействием?
        +1
        jQuery — я считаю толстопузом, и пока пользуюсь своими наработками и где позволительно Custom Build Mootools.
          0
          Я приводил тесты в предыдущем топике — он значительно быстрее большинства существующих фреймворков за счёт отказа от поддержки IE и использования нативных функций JavaScript
            0
            В частности, почти в два раза быстрее, чем JQuery в Фоксе.
              0
              Я про мобильные браузеры.
                0
                Я догадался) В большинстве мобильных браузеров не нужны Хаки IE, а JQuery их тащит. Т.К. я не парсю селекторы и json вручную, не тяну кучу ветвлений для совместимости и не перенапихиваю его функциями, стараюсь максимально пользоваться тем, что есть в JavaScript — он будет очень клёво работать на мобильных браузерах. Это обсуждалось в прошлом топике)
                  0
                  А учитывая, что почти все мобильные браузеры на базе webkit, то еще проще становится.
                    0
                    именно. например есть быстрая реализация querySelector
                      0
                      Попробую использовать, если все будет хорошо, то я попробую присоеденится к разработке.
                        0
                        *присоединится
                          0
                          welcome)
                          • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        А как вебкит относится к js-движку браузера?
                          0
                          К примеру пара функций: webkitSupportsFullscreen и webkitEnterFullscreen, а еще у Firefox: mozRequestFullScreen и mozCancelFullScreen и т.д.
              0
              Шо?! Опять? Куда делся нано? Или вы каждую неделю по фрэймворку выпускаете :)
                +1
                Просто переименован в Atom в силу того, что название «nano» для JavaScript фреймворка — занято
                  +1
                  Теперь я проверил интернет на предмет таких названий и даже зарегил домен:
                  atomjs.com/
                  0
                  Наверное переименовался.
                    0
                    > Atom (бывший Nano)
                    При первом пролете не заметил ссылку в скобках.

                    P.S. Вы опять всех запутаете с атомом :) бтв Intel® Atom
                      +2
                      Ну, Процессор и ДжаваСкрипт фреймворк все-таки очень разные категории. Если тяжело будет понять из контекста, то можно называть AtomJS
                  +9
                  > Я открыт для предложений, идей

                  Предлагаю: не писать README на русском. Иначе распространение будет сугубо локальное.

                  Терпеть не могу находить интересные проекты с ридми только на японском. Невозможно разобраться. :)
                    0
                    Еще момент: хорошо бы доку, как писать плагины и подключать их снаружи. :)
                      0
                      c README согласен) но у меня бывают ошибки в английском, потому надеюсь, что с переводом мне кто-то поможет)

                      ну про плагины я написал в топике. потом просто этот кусок бросаем в наш файл atom.js и все — можно пользоваться) или еще как-то объяснить лучше будет?
                        0
                        Я имею в виду доку в репозитории/на сайте. Доки в статьях на хабре за доки не считаются, я куче знакомых не смогу ссылку дать, тут всë на русском. %)

                        С README, если в ближайшие дни будет время и вдохновение, переведу, там же по сути немного слов.
                          0
                          ну, та же херня, я английский читаю хорошо, а вот пишу с ошибками и медленно) буду рад переводу)
                      +2
                      Предлагаю не не писать на русском, можно readme и прочитайменя.рф readme.rus
                        +3
                        Ну, можно и так, но фактически зачем на русском? Минус большой — надо поддерживать сразу две документации, плюсов? Типа кто-то не знает английский и ему будет проще? Не лучше ли зафорсить изучение английского, всë равно никуда без него не денешься.
                          –1
                          Ну, пока, как я вижу, всё равно английская версия будет создаваться переводом русской, почему бы рядом и оригинал не выложить? А насчёт зафорсить — «не сыпь мне соль на рану», я уже печатать вслепую почти научился, думал никогда не смогу, но вот английский… тут на моторной памяти не вылезешь
                            0
                            ну если вам важнее форсинг то да, а если хотите чтобы люди использовали вашу разработку — извольте писать так как им удобно.
                              0
                              Ну чего вы? Это ж просто обсуждение.
                              Спасибо ingspree, он уже перевёл на английский, а русская осталась рядом.
                              Будем вести две документации, если ничего не поменяется
                                +1
                                «им» — это намеченной аудитории? Так подавляющее большинство не знает русского, на русском говорит меньше 250 млн человек из 7 млрд.
                            0
                            Предлагаю ридми писать НЕ ТОЛЬКО на русском, но и на английском.
                              +1
                              если будет желающий поддерживать английскую версию — пока так и будет)
                              +1
                              Спасибо за столь быстрый перевод, ingspree)
                              0
                              Убери антинаучную картинку из топика. :D
                                0
                                с тебя логотип)
                                  0
                                  между прочим, картинка не антинаучная, просто схематичная)
                                    0
                                    А что антинаучного? Схематичное изображение атома гелия разве не так выглядит?
                                      0
                                      Только в классической (школьной) физике.
                                      Впрочем, для приверженцев квантовой механики, на картинке есть и намёк на вероятностное облачко :)
                                        0
                                        ну я больше химию знал, чем физику.
                                        и мы схематически его именно так рисовали.
                                        а как по-научному тогда?
                                          0
                                          Ваша схема вполне научна, но несколько устарела.
                                          С точки зрения квантовой механики атом гелия выглядит так (разумеется, такая визуализация тоже условна):
                                          Атом гелия
                                    0
                                    Было бы неплохо добавить поддержку старых браузеров в виде плагина. Т.е. проверять наличие каких-либо нативных функций браузера, и вслучае отсутствия, подгружать плагин. Так имеем малый вес и быструю работу для современных браузеров и поддержку старых.
                                      0
                                      в устаревших браузерах нельзя реализовать, к примеру, геттеры/сеттеры.
                                        0
                                        Можно, хаками, и через Vbscript =) Не так давно здесь даже статья была про это
                                          0
                                          видел) имхо, это уж слишком) тем более, парсер всё-равно будет спотыкаться на
                                          {
                                              get prop () {},
                                              set prop () {}
                                          }
                                          
                                          0
                                          Постараюсь после нового года найти время и заняться реализацией такого плагина :) Также могу помочь с сайтом для проекта. С модульным подходом просто необходима возможность делать кастомные сборки фреймворка.
                                            0
                                            гуд) жду П.М.)
                                          0
                                          Да, плагин для Sizzle, например. :)
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            именно об этом я и писал в прошлом топике)
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                0
                                                еще один — это тот же, что и в предыдущем топике?
                                                это тот же фреймворк, просто был переименован в силу того, что предыдущее название оказалось занято
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    ну, я про это тоже писал в предыдущем топике. зачем на каждый проект писать мини-фреймворк, если можно взять какой-нибудь маленький фреймворк типа Atom? :)
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        согласен, но ведь бывают ситуации, когда необходимо миниатюрный фреймворк, без поддержки ie, но не хочется писать самому. Вот это и есть ЦА atomjs)
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Уберите ООП, либо сделайте его плагином, в прототипном языке, и маленьких проектах (судя по всему Ваш фреймворк нацелен именно на маленькие проекты) оно ни к чему, лучше подумайте лучше над API
                                              0
                                              ООП идёт плагином.
                                                0
                                                Dom, кстати, тоже
                                                  0
                                                  и об этом в первом абзаце написано):
                                                  Dom, Class, Ajax и т.п. — подключаются как плагины.
                                                  0
                                                  Надо просто наверное нацеливаться на то, что это всë должно быть отдельными файликами и уметь собираться в один скриптом/сайтом.
                                              0
                                              Не нашел в списке поддерживаемых браузеров IE. То есть вообще никакого, даже 9-ки.
                                              Я понимаю, любить его особо не за что, но будем реалистами — многим ли на практике пригодится фреймворк, который не работает в IE?
                                                0
                                                Это описывалось ранее. Основное применение данного фреймворка — приложения для мобильных браузеров. Автор не собирается реализовывать обратную совместимость, так как если нужна совместимость, то есть jQuery.
                                                  0
                                                  Не только мобильные браузеры, но и еще и плагины для браузеров, userjs и серверный фреймворк.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      если на него можно установить нормальный браузер, то не пролетает)
                                                    0
                                                    1. Теоретически, в 9-ке должен работать
                                                    2. Если вам нужен IE — у вас есть JQuery.
                                                    3. В прошлом топике обсуждали
                                                    0
                                                    А почему в гитхабе все в одном файле идет? Особенно плагины. Не лучше ли разбить по отдельным файлам?
                                                      0
                                                      Пока так, скоро разобъю.
                                                      0
                                                      в качестве ядра достаточно одной единственной функции, которая занимается подключением модулей, следит чтобы они не конфликтовали, и чтобы никто их случайно не затёр. всё остальное — в модули.
                                                        0
                                                        там практически так и есть.

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                      Самое читаемое