SugarJS-JavaScriptの構文シュガー





SugarJSとは何ですか?



SugarJSは、有用なメソッドでネイティブオブジェクトを拡張するオープンソース(MITライセンス)Javascriptライブラリです。 コードの表現力を高める直感的で控えめなツールになるように設計されているため、少ないコードでより多くのことを実行し、ルーチンについて考える必要が少なくなります。



実際、彼らは非常に有益でシンプルなサイトを持っています-すべてがすでによく書かれています

主なポイントの概要を説明します。



簡単に...






に興味がありますか? 猫へようこそ。



JSの詳細については、ドキュメントの対応するセクションをご覧ください。

標準のSugarJS配信には一部の機能が含まれていない場合があることに注意してください。 サイトのコンフィギュレータを使用して、必要なモジュールを接続します(ドキュメントのメソッド名の右側にあるアイコンに注意してください)。



SugarJSの主要な機能は7つのセクションに分かれています。ここでは、私の意見で最も興味深い機能を紹介します。



文字列 -文字列を使用


'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"
      
      







数字 -数字を操作する


 (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
      
      







配列 -配列を操作します


 ['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.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(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.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-日付範囲を操作する




コード例




 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で1か月以上使用しており、その操作に問題はありませんでした。



All Articles