Pull to refresh

SugarJS — Синтаксический сахар для JavaScript

Reading time 4 min
Views 22K


Что такое SugarJS?


SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом, повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутиной.

На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

Кратко...

  • Расширяет нативные элементы Javascript полезными, интуитивными методами.
  • Прост для понимания и в использовании.
  • Метод SugarJS не используется при наличии метода в родной реализации браузера.
  • Имеет систему тестирования, имеющую огромный набор тестов.
  • Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть).
  • Отлично ладит с другими фреймворками и сторонним кодом.
  • Модульность, вы можете включать только нужные пакеты.
  • Полностью совместимый ECMAScript.
  • Заявлена поддержка всех основных браузеров, включая мобильные.
  • Поддерживает Node.js.
  • Имеет хорошую и удобную документацию.


Заинтересовало? Добро пожаловать под кат.

Более подробно о работе JS можно почитать в соответствующем разделе документации.
Пожалуйста, учитывайте, что стандартная поставка SugarJS может не включать некоторые функции. Используйте конфигуратор на сайте для подключения нужных модулей (обратите внимание на значок справа от имени метода в документации).

Основной функционал SugarJS разделен на семь разделов, я вынесу сюда наиболее интересные на мой взгляд функции:

String — работа со строками

'dopamine'.insert('e', 3); // "dopeamine"

'carve me up!'.from(2); // "rve me up!"

'carve me up!'.to(2); // "ca"

'carve me up!'.first(2); // "ca"

'carve me up!'.last(2); // "p!"

'jumpy'.has('py');  // true

'add me!'.add('to ', 4); // "add to me!"

'[you] escape <me>'.escapeHTML(); // "[you] escape <me>"

'Добро пожаловать!'.hasCyrillic(); // true

'welcome'.pad(' ', 1).pad('-', 3); // "--- welcome ---"

'hell, no!'.parameterize(); // "hell-no"

'anVzdCBnb3QgZGVjb2RlZA=='.decodeBase64(); // "just got decoded"

'{n} and {r}'.assign({ n: 'Cheech' }, { r: 'Chong' }); // "Cheech and Chong"


Number — работа с числами

(125.425).round(2); // 125.43

(4235000).format(); // "4,235,000"

(50).pad(5); //00050;

(5).daysAfter('Wednesday'); //"Monday, October 8, 2012 00:00"

(1000000).abbr(); // "1m"

(75).minutes().duration('ru'); // "1 час"

(23654).hex(); // "5c66"

(17).isEven(); // false

(8).times(function(i) {
  // Эта функция будет вызвана 8 раз. 
});

(125.425).round(-2); // 100


Array — работа с массивами

['a','b','c'].forEach(function(el) {
  // Будет вызвано 3 раза, el - текущий элемент массива
});

['a','b','c'].indexOf('c'); // 2

['rocksteady','and','bebop'].map('length'); // [10,3,5]

['rocksteady','and','bebop'].sortBy('length'); // ["and","bebop","rocksteady"]

['rocksteady','and','bebop'].findAll(/o/); // ["rocksteady","bebop"]

['rocksteady','and','bebop'].first(1); // ["rocksteady"]

['rocksteady','and','bebop'].from(1); // ["and","bebop"]

['three','two','one'].groupBy('length'); // {"3":["two","one"],"5":["three"]}

[1,65,2,77,34].average(); // 35.8

[1,2].add([2,3]); // [1,2,2,3]

[1,2].subtract([2,3]); // [1]

[1,2].intersect([2,3]); // [2]

[1,2].union([2,3]); // [1,2,3]


Object — работа с объектами

Object.extended({ broken: 'wear' }).keys(); // ["broken"]

Object.extended({ broken: 'wear' }).values(); // ["wear"]

Object.keys({ broken: 'wear' }); // ["broken"]

Object.has({ foo: 'bar' }, 'foo'); // true

Object.merge({a:1},{a:2}, false, function(key, a, b) {
  return a + b; 
}); // {"a":3}


Function — работа с функциями

(function(a) {
  // this = 'wasabi', a = 'bobby'  
}).bind('wasabi', 'bobby')();

(function() {
  // задержка выполнения функции 500ms  
}).delay(500);

[1,2,3].each(function() {
  // Каждая итерация будет иметь задержку 5ms
}.lazy(5));

var fn = (function() {
  // Выполнится только один раз
}).once();


RegExp — работа с регулярными выражениями

RegExp.escape("oh not /b/, aren't those guys gone?"); // "oh not \\/b\\/, aren\\'t those guys gone\\?"

/broken/.setFlags('gim'); // /broken/gim

/broken/im.addFlag('g'); // /broken/gim

/broken/gi.removeFlag('g'); // /broken/i


Date — работа с датами

Date.create('2002-06-15'); // "Saturday, June 15, 2002 00:00"

Date.create('June 15, 2002'); // "Saturday, June 15, 2002 00:00"

Date.create('today'); // "Wednesday, October 3, 2012 00:00"

Date.create('2 days ago'); // "Monday, October 1, 2012 09:24"

Date.create('the last day of 1998'); // "Thursday, December 31, 1998 00:00"

Date.create('先週金曜日','ja'); // "Friday, September 28, 2012 00:00"

Date.create('25 минут назад', 'ru'); // "Wednesday, October 3, 2012 08:59"

Date.create('二十五日', 'zh-CN'); // "Thursday, October 25, 2012 00:00"

Date.create('il y a une semaine', 'fr'); // "Wednesday, September 26, 2012 09:24"

Date.create().format('{12hr}:{mm}{tt} on {Weekday}'); // "9:24am on Wednesday"

Date.create().iso(); // "2012-10-03T03:24:16.831Z"

Date.create('3200 seconds ago').relative(); // "53 minutes ago"

Date.create('3200 seconds ago').relative('zh-TW'); // "53分鐘前"

Date.create('3200 seconds ago').relative('de'); // "vor 53 Minuten"

Date.create('3200 seconds ago').relative('ko'); // "53분 전"

Date.create().is('tuesday'); // false

Date.create().is('the 7th of June'); // false

Date.create().addMonths(2); // "Monday, December 3, 2012 09:24"


DateRange — работа с диапазонами дат


Пример кода



getLatestTweets(function(tweets) {
  var users     = tweets.map('user').unique(),
      total     = users.sum('statuses_count').format(),
      top       = users.max('followers_count'),
      followers = top.followers_count.format(),
      started   = Date.create(top.created_at);

  return users.length + ' users with a total of ' + total + ' tweets.\n' +
         top.screen_name + ' is the most popular with ' + followers + ' followers\n' +
         'and started tweeting ' + started.relative() + '.';
});

Результат:
20 users with a total of 203,499 tweets.
Hi_Im_Dopee is the most popular with 744 followers
and started tweeting 1 year ago.


Я использую эту библиотеку совместно с jQuery, Knockout, Bootstrap уже больше месяца, и никаких проблем при ее эксплуатации не было.
Tags:
Hubs:
+84
Comments 67
Comments Comments 67

Articles