Geekly Articles each Day
📜 ⬆️ ⬇️

SugarJS - Syntax Sugar for JavaScript



What is SugarJS?


SugarJS is an open source (MIT license) Javascript library that extends native objects with useful methods. It is designed to be an intuitive, unobtrusive tool that enhances the expressiveness of code that allows you to do more with less code and think less about the routine.

In fact, they have a very informative and simple site - where everything is already well written.
I'll just try to highlight the main points.
')
Briefly...



Interested? Welcome under cat.

More information about the work of JS can be found in the relevant section of the documentation.
Please note that the standard delivery of SugarJS may not include some features. Use the configurator on the site to connect the required modules (note the icon to the right of the method name in the documentation).

The main functionality of SugarJS is divided into seven sections, I bring here the most interesting functions in my opinion:

String - work with strings

'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 - work with numbers

 (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 - working with arrays

 ['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 - working with objects

 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 - working with functions

 (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 - working with regular expressions

 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 - work with dates

 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 ya 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 - working with date ranges


Code example


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

Result :
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.

I have been using this library with jQuery, Knockout, Bootstrap for more than a month, and there were no problems with its operation.

Source: https://habr.com/ru/post/153279/

More articles:


All Articles