понедельник, 30 декабря 2013 г.

JavaScript Примитивные типы

В JavaScript существует несколько примитивных типов:

null - Специальный тип, содержит только значение null.
undefined - Специальный тип, содержит только значение undefined.
number - Числа: 0, 3.14, а также значения NaN и Infinity
boolean - true, false.
string -  Строки, такие как "Мяу" или пустая строка "".

Все остальные значения являются объектами, включая функции и массивы.

JavaScript Создание функции из строки new Function()

Существует ещё один способ создания функции. Этот способ используется очень редко, но в отдельных случаях бывает весьма полезен, так как позволяет конструировать функцию во время выполнения программы, к примеру из данных, полученных с сервера или от пользователя. Он выглядит так:

var sum = new Function('a,b', ' return a+b; ');

var result = sum(1,2);

alert(result); // 3

То есть, функция создаётся вызовом new Function(params, code):

params - Параметры функции через запятую в виде строки.
code - Код функции в виде строки.


В JavaScript функции можно объявлять условно

var age = prompt('Сколько вам лет?');
var sayHi;

if (age >= 18) {
  sayHi = function() {  alert('Вход разрешен');  }
} else {
  sayHi = function() {  alert('Извините, вы слишком молоды');  }
}

sayHi(); // запустит ту функцию, которая присвоена в if

Устаревший getYear()

Некоторые браузеры реализуют нестандартный метод getYear(). Где-то он возвращает только 2 цифры из года, где-то 4. Так или иначе, этот метод отсутствует в стандарте JavaScript. Не используйте его. Для получения года есть getFullYear().

Пример.

var date = new Date();
var year = date.getFullYear();

console.log(year);

среда, 25 декабря 2013 г.

JavaScript Преобразование данных

В JavaScript есть три преобразования:

Строковое: String(value) - в строковом контексте или при сложении со строкой: '' + 1 или 1 + ''.
Численное: Number(value) - в численном контексте, включая унарный плюс +value.
Логическое: Boolean(value) - в логическом контексте, можно также сделать двойным НЕ: !!value.

JavaScript Build tree from array

Построение дерева посредством JavaScript из плоского массива данных.

”http://jsfiddle.net/elado/yxmKZ/embedded/js,css,result”



Файл index.js

var treeData=[
    {"id":1,"parentId":null,"title":"1"},
    {"id":2,"parentId":1,"title":"1.1"},
    {"id":3,"parentId":null,"title":"2"},
    {"id":4,"parentId":1,"title":"1.2"},
    {"id":5,"parentId":1,"title":"1.3"},
    {"id":6,"parentId":4,"title":"1.2.1"},
    {"id":7,"parentId":4,"title":"1.2.2"},
    {"id":8,"parentId":4,"title":"1.2.3"},
    {"id":9,"parentId":null,"title":"3"},
    {"id":10,"parentId":9,"title":"3.1"},
    {"id":11,"parentId":10,"title":"3.1.1"},
    {"id":12,"parentId":11,"title":"3.1.1.1"},
    {"id":13,"parentId":11,"title":"3.1.1.2"},
    {"id":14,"parentId":11,"title":"3.1.1.3"},
    {"id":15,"parentId":13,"title":"3.1.1.2.1"}
];

function NodeItem(data) {
    this.data=data;

    var container=document.createElement("li"),
        title=container.appendChild(document.createElement("div"));

    title.innerHTML=this.data.title;

    this.element=container;
}

NodeItem.prototype= {
    // lazy children element creation - not all nodes have children
    getChildrenElement:function () {
        return this._childElement = this._childElement || this.element.appendChild(document.createElement("ul"));
    }
};

// convert all nodes to NodeItem instance
var nodeCollection=treeData.map(function (node) { return new NodeItem(node); });

// for faster lookup, store all nodes by their id
var nodesById={};
for (var i=0;i<nodeCollection.length;i++) nodesById[nodeCollection[i].data.id]=nodeCollection[i];

var rootNodeItemsContainer=document.createElement("ul");

// the magic happens here:
// every node finds its parent (by the id), and it's being adopted by the parent's children element
// that, actually, builds the tree, before it's in the document
// all root nodes are appended to a root container which is appended to an element on the document
for (var i=0;i<nodeCollection.length;i++) {
    var node=nodeCollection[i];
    var parentElement=node.data.parentId ? nodesById[node.data.parentId].getChildrenElement() : rootNodeItemsContainer;
    parentElement.appendChild(node.element);
}

document.body.appendChild(rootNodeItemsContainer);

Файл index.css

* { font-family:lucida grande, arial; font-size:11px; }

ul {
    padding:3px;
    border:1px solid #aaa;
}
    ul li {
        padding:5px;
        background-color:#eee;
    }
        ul li > div { padding:3px; margin-bottom:5px; background-color:#ccc; }
        ul li > div + ul { margin-top:5px; }
        ul li ul { margin-left:15px; }

четверг, 19 декабря 2013 г.

NPM JavaScript - Частые команды по работе с Node Package Manager

Установка пакетов в Node Package Manager.

Устанавливает пакет express.

npm install express

Устанавливает все пакеты, перечисленные в package.json.

npm install

Устанавливает express и вносит запись о нем в package.json в секцию dependencies.

npm install express --save

Устанавливает grunt и вносит запись о нем в package.json в секцию devDependencies.

npm install grunt --save-dev

Варианты с --save и --save-dev сделают запись в package.json только, если он уже существует.

Чтобы каждый раз не указывать --save, можно прописать:

npm config set save true

Теперь все устанавливаемый пакеты будут автоматом прописываться в package.json.

Обычно получается быстрее отредактировать package.json, удалить ненужные пакеты, добавить новые, подкорректировать версии и сделать

npm prune
npm install

чем ставить - удалять каждый пакет отдельно.

Сокращенные варианты команд.

Для ускорения процесса ввода команд удобно использовать сокращения:

Ключ Сокращение
install i
uninstall r
config c
update up
list ls
--save -S
--save-dev -D

Пример.

npm install express --save

и то же самое

npm i express -S

Подготовка к npm init

Не очень удобно при создании package.json при помощи npm init каждый раз вводить персональные данные. Чтобы этого избежать, сделаем настройку:

Внесем информацию об авторе "по умолчанию".

npm set init.author.name "$NAME"
npm set init.author.email "$EMAIL"
npm set init.author.url "$SITE"

Вместо переменных среды $NAME и тому подобных можно внести сами данные.

Данная команда выведет список всех возможных настроек.

npm config ls -l

Проверить, не устарели ли пакеты.

npm outdated

Фиксируем версии пакетов.

npm shrinkwrap

Прежде чем передавать продукт в промышленную эксплуатацию, по хорошему, нужно указать в package.json точные версии пакетов с которыми все 100% работает. Эта команда так и сделает. После ее выполнения в вашем package.json все версии пакетов будут жестко зафиксированы.

Обновление версии NPM.

npm update npm -g