TAµÄÿÈÕÐÄÇé | ÎÞÁÄ ×òÌì 09:05 |
---|
Ç©µ½ÌìÊý: 1050 Ìì Á¬ÐøÇ©µ½: 1 Ìì [LV.10]²âÊÔ×Ü˾Áî
|
1¡¢¹¤¾ß¿â
¡¡¡¡£¨1£©Lodash
¡¡¡¡LodashÊÇÒ»¸öÒ»ÖÂÐÔ¡¢Ä£¿é»¯¡¢¸ßÐÔÄÜ¡¢Ìá¸ß¿ª·¢ÕßЧÂʵÄJavaScript ʵÓù¤¾ß¿â¡£Lodash ͨ¹ý½µµÍ array¡¢number¡¢objects¡¢string µÈµÈµÄʹÓÃÄѶȴӶøÈà JavaScript ±äµÃ¸ü¼òµ¥¡£Lodash µÄÄ£¿é»¯·½·¨£¬·Ç³£ÊÊÓÃÓÚ£º
¡¡¡¡¡¤±éÀú array¡¢object ºÍ string¡£
¡¡¡¡¡¤ ¶ÔÖµ½øÐвÙ×÷ºÍ¼ì²â¡£
¡¡¡¡¡¤ ´´½¨·ûºÏ¹¦Äܵĺ¯Êý¡£
¡¡¡¡£¨2£©Underscore.js
¡¡¡¡Underscore.js ÊÇÒ»¸öʵÓÃµÄ JavaScript ¹¤¾ß¿â£¬ËüÌṩÁËÒ»ÕûÌ׺¯Êýʽ±à³ÌµÄʵÓù¦ÄÜ£¬µ«Ã»ÓÐÀ©Õ¹ÈκΠJavaScript ÄÚÖöÔÏ󣬶øÊǽ«Êý¾Ý·â×°ÔÚÒ»¸ö×Ô¶¨Òå¶ÔÏóÖС£
¡¡¡¡£¨3£©Ramda
¡¡¡¡Ramda µÄÄ¿±êÊÇרÃÅΪº¯Êýʽ±à³Ì·ç¸ñ¶øÉè¼Æ£¬¸üÈÝÒ×´´½¨º¯Êýʽ pipeline¡¢ÇÒ´Ó²»¸Ä±äÓû§ÒÑÓÐÊý¾Ý¡£Ramda Ö÷ÒªÌØÐÔÈçÏ£º
¡¡¡¡Ramda Ç¿µ÷¸ü¼Ó´¿´âµÄº¯Êýʽ·ç¸ñ¡£Êý¾Ý²»±äÐԺͺ¯ÊýÎÞ¸±×÷ÓÃÊÇÆäºËÐÄÉè¼ÆÀíÄî¡£Õâ¿ÉÒÔ°ïÖúÄãʹÓüò½à¡¢ÓÅÑŵĴúÂëÀ´Íê³É¹¤×÷¡£
¡¡¡¡Ramda º¯Êý±¾Éí¶¼ÊÇ×Ô¶¯¿ÂÀﻯµÄ¡£Õâ¿ÉÒÔÈÃÄãÔÚÖ»Ìṩ²¿·Ö²ÎÊýµÄÇé¿öÏ£¬ÇáËɵØÔÚÒÑÓк¯ÊýµÄ»ù´¡ÉÏ´´½¨Ðº¯Êý¡£
¡¡¡¡Ramda º¯Êý²ÎÊýµÄÅÅÁÐ˳Ðò¸ü±ãÓÚ¿ÂÀﻯ¡£Òª²Ù×÷µÄÊý¾Ýͨ³£ÔÚ×îºóÃæ¡£
¡¡¡¡£¨4£©Collect.js
¡¡¡¡collect.jsÊÇ JavaScript ´¦ÀíÊý×éºÍ¶ÔÏóµÄ·½±ãÇÒÎÞÒÀÀµµÄ°ü×°À๤¾ß¡£ÆäÌṩÁ˳£ÓõÄÊý×éºÍ¼¯ºÏµÄ²Ù×÷API£¬map£¬reduce£¬filter µÈ¼¯ºÏµÄ¸ß¼¶·½·¨£¬Éè¼ÆÁé¸ÐÀ´Ô´ÓÚ Laravel Collection¡£
¡¡¡¡2¡¢ÈÕÆÚ
¡¡¡¡£¨1£©date-fns
¡¡¡¡date-fns ÊÇÒ»¸öÏÖ´úµÄ JavaScript ÈÕÆÚ¹¤¾ßÀà¿â£¬ÌṩÁË×îÈ«Ãæ¡¢×î¼òµ¥ºÍÒ»ÖµĹ¤¾ß¼¯£¬ÓÃÓÚÔÚä¯ÀÀÆ÷ºÍ Node.js ÖвÙ×÷ JavaScript ÈÕÆÚ¡£Æä¾ßÓÐÒÔÏÂÌØÐÔ£º
¡¡¡¡¡¤ Ä£¿é»¯£º¸ù¾ÝÐèÇóÑ¡ÔñÐèÒªÒýÓõÄÄ£¿é
¡¡¡¡¡¤ ²»¿É±ä£ºdate-fns ʹÓô¿º¯Êý¹¹½¨£¬²¢ÇÒʼÖÕ·µ»ØÒ»¸öеÄÈÕÆÚʵÀý£¬¶ø²»ÊǸü¸Ä´«µÝµÄÈÕÆÚʵÀý¡£ËüÔÊÐí·ÀÖ¹´íÎó²¢Ìø¹ý³¤Ê±¼äµÄµ÷ÊԻỰ
¡¡¡¡¡¤ ¿ÉÐÅÀµ£º×ñÑÓïÒå°æ±¾£¬Ê¼ÖÕÏòºó¼æÈÝ
¡¡¡¡¡¤ ¿ìËÙ£ºÇáÁ¿¿ìËÙ£¬ÎªÓû§Ìṩ×î¼ÑµÄʹÓÃÌåÑé
¡¡¡¡¡¤ TypeScript & Flow£ºdate-fns ͬʱ֧³Ö Flow ºÍ TypeScript
¡¡¡¡import { format, formatDistance, formatRelative, subDays } from 'date-fns'
¡¡¡¡format(new Date(), "'Today is a' eeee")
¡¡¡¡//=> "Today is a Saturday"
¡¡¡¡formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
¡¡¡¡//=> "3 days ago"
¡¡¡¡formatRelative(subDays(new Date(), 3), new Date())
¡¡¡¡//=> "last Friday at 7:26 p.m."
¡¡¡¡£¨2£©Moment.js
¡¡¡¡Moment.js ÊÇÒ»¸ö¼òµ¥Ò×ÓõÄÇáÁ¿¼¶ JavaScript ÈÕÆÚ´¦ÀíÀà¿â£¬ÌṩÁËÈÕÆÚ¸ñʽ»¯¡¢½âÎö¡¢ÑéÖ¤µÈ¹¦ÄÜ¡£ËüÖ§³ÖÔÚä¯ÀÀÆ÷ºÍ NodeJS Á½ÖÖ»·¾³ÖÐÔËÐС£´ËÀà¿âÄܹ»½«¸ø¶¨µÄÈÎÒâÈÕÆÚת»»³É¶àÖÖ²»Í¬µÄ¸ñʽ£¬¾ßÓÐÇ¿´óµÄÈÕÆÚ¼ÆË㹦ÄÜ£¬Í¬Ê±Ò²ÄÚÖÃÁËÄÜÏÔʾ¶àÑùµÄÈÕÆÚÐÎʽµÄº¯Êý¡£
¡¡¡¡£¨3£©Day.js
¡¡¡¡Day.jsÊÇÒ»¸ö¼«¼òµÄJavaScript¿â£¬¿ÉÒÔΪÏÖ´úä¯ÀÀÆ÷½âÎö¡¢ÑéÖ¤¡¢²Ù×÷ºÍÏÔʾÈÕÆÚºÍʱ¼ä¡£Æä¾ßÓÐÒÔÏÂÌص㣺
¡¡¡¡¡¤ºÍ Moment.js ÏàͬµÄ API ºÍÓ÷¨
¡¡¡¡¡¤ ²»¿É±äÊý¾Ý (Immutable)
¡¡¡¡¡¤ Ö§³ÖÁ´Ê½²Ù×÷ (Chainable)
¡¡¡¡¡¤ ¹ú¼Ê»¯ I18n
¡¡¡¡¡¤ ½ö 2kb ´óСµÄ΢ÐÍ¿â
¡¡¡¡¡¤ È«ä¯ÀÀÆ÷¼æÈÝ
¡¡¡¡dayjs().format(); // 2020-09-08T13:42:32+08:00
¡¡¡¡dayjs().format('YYYY-MM-DD'); // 2020-09-08
¡¡¡¡dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2020-09-08 13:47:12
¡¡¡¡dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00
¡¡¡¡3. Ëæ»úÖµ
¡¡¡¡£¨1£©Chance.js
¡¡¡¡Chance ÊÇÒ»¸öÇáÁ¿¼¶µÄ JavaScript Ëæ»ú×Ö·û´®Éú³ÉÆ÷²å¼þ£¬¿É°ïÖú¼õÉÙ±àдµ¥µ÷µÄ´úÂ룬ÌرðÊÇÔÚ±àд×Ô¶¯»¯²âÊÔʱ¾³£ÐèÒª¸÷ÖÖËæ»úÄÚÈÝ¡£¿ÉÒÔʹÓÃËüÀ´²úÉúËæ»úÊý¡¢×Ö·û¡¢×Ö·û´®¡¢Ãû×Ö¡¢µØÖ·¡¢÷»×ӵȡ£
¡¡¡¡£¨2£©UUID
¡¡¡¡UUID ÊÇÒ»¸öÓÃÓÚÔÚ JavaScript ÖÐÉú³É·ûºÏ RFC µÄ UUID µÄʵÓóÌÐò¿â¡£Æä¾ßÓÐÒÔÏÂÌص㣺
¡¡¡¡¡¤ÍêÕû£ºÖ§³Ö RFC4122 °æ±¾ 1¡¢3¡¢4 ºÍ 5 UUID¡£
¡¡¡¡¡¤ ¿çƽ̨£ºÖ§³ÖCommonJS¡¢ECMAScript Ä£¿éºÍ CDN ¹¹½¨£»Node 12, 14, 16, 18£»Chrome¡¢Safari¡¢Firefox¡¢Edge ä¯ÀÀÆ÷¡£Webpack ºÍ rollup.js Ä£¿é´ò°ü¹¤¾ß¡£
¡¡¡¡¡¤ °²È«£º¼ÓÃÜÇ¿¶È¸ßµÄËæ»úÖµ¡£
¡¡¡¡¡¤ Ìå»ýС£ºÁãÒÀÀµ£¬Õ¼ÓÿռäС¡£
¡¡¡¡¡¤ CLI£º°üÀ¨ uuid ÃüÁîÐÐʵÓóÌÐò¡£
¡¡¡¡£¨3£©Nano ID
¡¡¡¡nanoid ÊÇÒ»¸öСÇÉ¡¢°²È«¡¢URLÓѺá¢Î¨Ò»µÄ JavaScript ×Ö·û´®IDÉú³ÉÆ÷¡£Æä¾ßÓÐÒÔÏÂÌØÐÔ£º
¡¡¡¡¡¤ СÇÉ. 130 bytes (ÒÑѹËõºÍ gzipped)¡£Ã»ÓÐÒÀÀµ¡£Size Limit ¿ØÖÆ´óС¡£
¡¡¡¡¡¤ ¿ìËÙ. Ëü±È UUID ¿ì 60%¡£
¡¡¡¡¡¤ °²È«. ËüʹÓüÓÃܵÄÇ¿Ëæ»ú API¡£¿ÉÔÚ¼¯ÈºÖÐʹÓá£
¡¡¡¡¡¤ ½ô´Õ. ËüʹÓÃ±È UUID£¨A-Za-z0-9_-£©¸ü´óµÄ×Öĸ±í¡£Òò´Ë£¬ID ´óС´Ó36¸ö·ûºÅ¼õÉÙµ½21¸ö·ûºÅ¡£
¡¡¡¡¡¤ Ò×ÓÃ. Nano ID Òѱ»ÒÆÖ²µ½ 20ÖÖ±à³ÌÓïÑÔ¡£
¡¡¡¡import { nanoid } from 'nanoid'
¡¡¡¡model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
¡¡¡¡4¡¢Êý×Ö
¡¡¡¡£¨1£©Math.js
¡¡¡¡Math.js ÊÇÒ»¸öÇ¿´óµÄ JavaScript ºÍ Node.js Êýѧ¿â¡£Ëü¾ßÓÐÖ§³Ö·ûºÅ¼ÆËãµÄÁé»î±í´ïʽ½âÎöÆ÷£¬´øÓдóÁ¿ÄÚÖú¯ÊýºÍ³£Á¿£¬²¢ÌṩÁËÒ»¸ö¼¯³ÉµÄ½â¾ö·½°¸À´´¦Àí²»Í¬µÄÊý¾ÝÀàÐÍ£¬ÈçÊý×Ö¡¢´óÊý¡¢¸´Êý¡¢·ÖÊý¡¢µ¥Î»ºÍ¾ØÕó¡£¹¦ÄÜÇ¿´óÇÒÒ×ÓÚʹÓá£
¡¡¡¡£¨2£©Numeral.js
¡¡¡¡Numeral.js ÊÇÒ»¸öÓÃÀ´¶ÔÊýÖµ½øÐвÙ×÷ºÍ¸ñʽ»¯µÄ JS ¿â¡£¿É½«Êý×Ö¸ñʽ»¯Îª»õ±Ò¡¢°Ù·Ö±È¡¢Ê±¼ä£¬ÉõÖÁÊÇÐòÊý´ÊµÄËõд£¨±ÈÈç1st£¬100th£©¡£
¡¡¡¡£¨3£©Accounting.js
¡¡¡¡Accounting.js ÊÇÒ»¸öÓÃÓÚÊý×Ö¡¢»õ±ÒºÍ»õ±Ò½âÎö/¸ñʽ»¯µÄСÐÍ JavaScript ¿â¡£ËüÊÇÇáÁ¿¼¶µÄ£¬ÍêÈ«¿É±¾µØ»¯µÄ£¬Ã»ÓÐÒÀÀµ¹Øϵ£¬²¢ÇÒÔÚ¿Í»§¶Ë»ò·þÎñÆ÷¶Ë¶¼¿ÉÒԺܺõع¤×÷¡£Ê¹ÓöÀÁ¢»ò×÷Ϊ nodeJS/npm ºÍ AMD/requireJS Ä£¿é¡£
¡¡¡¡// Default usage:
¡¡¡¡accounting.formatMoney(12345678); // $12,345,678.00
¡¡¡¡// European formatting (custom symbol and separators), can also use options object as second parameter:
¡¡¡¡accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99
¡¡¡¡// Negative values can be formatted nicely:
¡¡¡¡accounting.formatMoney(-500000, "¡ê ", 0); // ¡ê -500,000
¡¡¡¡// Simple `format` string allows control of symbol position (%v = value, %s = symbol):
¡¡¡¡accounting.formatMoney(5318008, { symbol: "GBP", format: "%v %s" }); // 5,318,008.00 GBP
¡¡¡¡5¡¢×Ö·û´®
¡¡¡¡£¨1£©qs
¡¡¡¡qsÊÇÒ»¸öurl²ÎÊýת»¯£¨parseºÍstringify£©µÄJavaScript¿â¡£¿ÉÒ԰Ѹñʽ»¯µÄ×Ö·û´®×ª»»Îª¶ÔÏó¸ñʽ¡£
¡¡¡¡var qs = require('qs');
¡¡¡¡var assert = require('assert');
¡¡¡¡var obj = qs.parse('a=c');
¡¡¡¡assert.deepEqual(obj, { a: 'c' });
¡¡¡¡var str = qs.stringify(obj);
¡¡¡¡assert.equal(str, 'a=c');
¡¡¡¡£¨2£©Voca
¡¡¡¡Voca ÊÇÒ»¸öÓÃÓÚ²Ù×÷×Ö·û´®µÄ JavaScript ¿â¡£Voca ¿âÌṩÁËÓÐÓõĺ¯ÊýÀ´Ê¹×Ö·û´®²Ù×÷¸ü¼ÓÊæÊÊ£º¸ü¸Ä´óСд¡¢ÐÞ¼ô¡¢Ìî³ä¡¢slugify¡¢À¶¡»¯¡¢sprintfy¡¢½Ø¶Ï¡¢×ªÒåµÈ¡£Ä£¿é»¯Éè¼ÆÔÊÐí¼ÓÔØÕû¸ö¿â»òµ¥¸öº¯ÊýÒÔ×îС»¯Ó¦ÓóÌÐò¹¹½¨¡£¸Ã¿â¾¹ýÈ«Ãæ²âÊÔ¡¢Óоݿɲ鲢³¤ÆÚÊÜÖ§³Ö¡£
¡¡¡¡v.camelCase('bird flight'); // => 'birdFlight'
¡¡¡¡v.sprintf('%s costs $%.2f', 'Tea', 1.5); // => 'Tea costs $1.50'
¡¡¡¡v.slugify('What a wonderful world'); // => 'what-a-wonderful-world'
¡¡¡¡6¡¢Cookie
¡¡¡¡£¨1£©js-cookie.js
¡¡¡¡js-cookie.js ÊÇÒ»¸öÓÃÓÚ´¦Àíä¯ÀÀÆ÷ cookie µÄ¼òµ¥¡¢ÇáÁ¿¼¶ JavaScript API¡£Æä¾ßÓÐÒÔÏÂÌص㣺
¡¡¡¡¡¤ÊÊÓÃÓÚËùÓÐä¯ÀÀÆ÷
¡¡¡¡¡¤ ½ÓÊÜÈκÎ×Ö·û
¡¡¡¡¡¤ ¾¹ý´óÁ¿²âÊÔ
¡¡¡¡¡¤ ÎÞÒÀÀµ
¡¡¡¡¡¤ Ö§³ÖESÄ£¿é
¡¡¡¡¡¤ Ö§³Ö AMD/CommonJS
¡¡¡¡¡¤ ·ûºÏRFC 6265
¡¡¡¡¡¤ ÓÐÓõÄά»ù
¡¡¡¡¡¤ ÆôÓÃ×Ô¶¨Òå±àÂë/½âÂë
¡¡¡¡¡¤ < 800 ×Ö½ÚѹËõ£¡
¡¡¡¡£¨2£©Cookies
¡¡¡¡Cookies ÊÇÒ»¸öÓÃÓÚ»ñÈ¡ºÍÉèÖà HTTP(S) cookieµÄnode.jsÄ£¿é¡£ËüµÄÌصãÈçÏ£º
¡¡¡¡¡¤ ÔÊÐíʹÓÃKeygripÀ´Ç©Êðcookie£¬ÒÔ·ÀÖ¹´Û¸Ä¡£
¡¡¡¡¡¤ ÑÓ³ÙÑéÖ¤cookie£¬ÒÔ½µµÍ³É±¾¡£
¡¡¡¡¡¤ ²»ÔÊÐíͨ¹ý²»°²È«µÄÌ×½Ó×Ö·¢ËÍ°²È«cookies¡£
¡¡¡¡¡¤ ĬÈÏÇé¿öÏ£¬ËùÓÐcookie¶¼½öÊÊÓÃÓÚHTTP£¬²¢ÇÒͨ¹ýSSL·¢Ë͵ÄcookieÊÇ°²È«µÄ¡£
¡¡¡¡¡¤ ÔÊÐíÆäËû¿âÔÚ²»ÖªµÀÇ©Ãû»úÖƵÄÇé¿öÏ·ÃÎÊ cookie¡£
¡¡¡¡var http = require('http')
¡¡¡¡var Cookies = require('cookies')
¡¡¡¡// Optionally define keys to sign cookie values
¡¡¡¡// to prevent client tampering
¡¡¡¡var keys = ['keyboard cat']
¡¡¡¡var [url=]server[/url] = http.createServer(function (req, res) {
¡¡¡¡ // Create a cookies object
¡¡¡¡ var cookies = new Cookies(req, res, { keys: keys })
¡¡¡¡ // Get a cookie
¡¡¡¡ var lastVisit = cookies.get('LastVisit', { signed: true })
¡¡¡¡ // Set the cookie to a value
¡¡¡¡ cookies.set('LastVisit', new Date().toISOString(), { signed: true })
¡¡¡¡ if (!lastVisit) {
¡¡¡¡ res.setHeader('Content-Type', 'text/plain')
¡¡¡¡ res.end('Welcome, first time visitor!')
¡¡¡¡ } else {
¡¡¡¡ res.setHeader('Content-Type', 'text/plain')
¡¡¡¡ res.end('Welcome back! Nothing much changed since your last visit at ' + lastVisit + '.')
¡¡¡¡ }
¡¡¡¡})
¡¡¡¡server.listen(3000, function () {
¡¡¡¡ console.log('Visit us at http://127.0.0.1:3000/ !')
¡¡¡¡})
¡¡¡¡7¡¢°²È«
¡¡¡¡DOMPurify
¡¡¡¡DOMPurify ÊÇÒ»¸ö¿ªÔ´µÄ»ùÓÚDOMµÄ¿ìËÙXSS¾»»¯¹¤¾ß¡£ÊäÈëHTMLÔªËØ£¬È»ºóͨ¹ýDOM½âÎöµÝ¹éÔªËؽڵ㣬½øÐо»»¯£¬Êä³ö°²È«µÄHTML¡£
|
|