Lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。有多年編程開發經驗的工程師往往都會有自己的一套工具庫,習慣性的我們可能給會稱utils,或者我本人喜歡用helpers,這些都是自己平時代碼的一些積累或者說技術總結!Lodash恰恰是這樣一種工具庫,提供了一套函數式編程的實用功能。Github上star數接近40k,日npm安裝量達百萬級,不得不說它很受歡迎!
Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。其中部分是目前ECMAScript尚未制定的規范,但是被業界認可!
Lodash 的模塊化方法 非常適用于:
https://github.com/lodash/lodash
以下是一些常用的模塊(本文只是簡單地介紹,因為其其方法太多,無法一一詳述):
lodash一共包含了幾十種適用于數組的方法,其中包括查找、填充、分片、拼接、過濾等非常實用的方法,雖然es6的一些新特性也能夠實現一些方便的操作,但是還并不能夠替代它,截圖只是部分展示!
Collection方法也不少,適用于對象、數組還包括部分字符串的功能
Date中包含的方法就一個,返回當前時間的時間戳,獲得 Unix 紀元 (1 January 1970 00:00:00 UTC) 直到現在的毫秒數。
Function顧名思義包括了針對函數的方法,主要有節流、延遲、緩存、設置鉤子等比較高級的用法
lang的方法中,主要是用于各種類型之間的轉換,它適用于各種類型
從名字就知道這是一個數學方法的集合,被用來做數學運算用
主要用在隨機數生成、數值區間比較,一共三個方法
在es6中對對象進行了大量的擴展,特別是一些解構、析構的操作用起來真實愛不釋手,lodash中方法更豐富,常用于對象的創建、擴展、類型轉換、檢索、集合等操作。
優雅的鏈式用法,提高執行性能(惰性計算)
很明顯這是字符串的方法.
還有一些可玩性比較高的方法,具體的可以到官方文檔中查看,不會讓你失望,而且提供了最新的中文文檔
https://www.lodashjs.com/docs/latest#
<script src="lodash.js"></script>
npm i -g npm npm i lodash import _ from 'lodash';
// Load the full build. var _=require('lodash'); // Load the core build. var _=require('lodash/core'); // Load the FP build for immutable auto-curried iteratee-first data-last methods. var fp=require('lodash/fp'); // Load method categories. var array=require('lodash/array'); var object=require('lodash/fp/object'); // Cherry-pick methods for smaller browserify/rollup/webpack bundles. var at=require('lodash/at'); var curryN=require('lodash/fp/curryN');
其實相信很多人都用過lodash,有人就用好用到爆來形容它,可見其實用性,以及被認可度,而且其代碼的健壯性也是值得我們學習的,雖然es6的出現讓很多特性得到了替代,但是還是有很多es6+也無法滿足的,如果還沒用過的小伙伴,強烈推薦使用!
作為工具網站大佬MikuTools ,想想很多資深操作黨都使用過。光這一個網站就匯聚了50多個操作,分為媒體類、圖片處理類、文字處理類、編程類等,其中媒體類是主打功能。
玩Instagram的朋友都知道,這里的圖片是無法直接下載的,這個時候你就需要一些工具來輔助下載。MikuTools 就是這些工具的合集網站。一鍵幫你完成Instagram圖片下載、YouTube/TikTok/微博/抖音等視頻下載、嗶哩嗶哩封面獲取,甚至可以做到無水印獲取哦。操作起來特別簡單,電腦小白也會用。選擇你需要的工具,然后輸入對應鏈接,就能得到想要的結果。
腳本之家更偏向開發者提供一些工具服務,懂網站開發、編程的人基本一看就懂。這里主要提供HTTP狀態碼/HTML/XML轉義字符、UI尺寸規范對照表、格式化工具(C語言、php代碼在線格式化、JSON格式化美化工具等)。同時還有一些站長工具、生活工具,多達300個操作工具。
蛙蛙也是一個實用故居合集網站,開發編程類也有涉及,可以說是前面2個網站的熱門共功能合集版。常見的生活工具比如二維碼轉化、號碼歸屬地查詢、繁體字轉換器,其他的網絡技術類,比如域名查詢、CSS格式化、MD5加密等,在這里統統能找到。
以上三個網站,一鍵就能即可免費使用,比下載N個軟件工具要方便得多。400多個操作合集,總有你想要的功能。再不趕緊收藏一份就要錯過了!
在的網頁設計千篇一律,越來越多的設計師想嘗試更加大膽的色彩搭配,所以我們搜集整理了超齊全的一份包含了58個色彩工具的網站,app還有插件,幫助您做成更好的設計。當然這些色彩搭配不是憑空捏造出來的,而是從各個地方獲取來的靈感,結合色彩心理學,這些搭配不僅好看,還符合您更高層次的情感需求。
1.Muzli colors
網址:https://colors.muz.li/
使用此工具可以快速創建編輯調色板,最大的特點是可以根據您創建的色彩搭配直接在app設計模板上預覽,并且還能下載。
2. Colorable
網址:https://colorable.jxnblk.com/
這個工具主要查看字體顏色和背景顏色的對比效果。
3. Color Leap — History’s Palettes
網址:https://colorleap.app/home
這個工具可以搜素過去四千年以來使用的180個調色板。
4. Picular
網址:https://picular.co/
這是一個顏色搜索工具,只要輸入搜索的關鍵詞,就能像google一樣展示相關的顏色,可以復制色號和查看使用該顏色的圖片。
5. Colourcode
網址:https://colourco.de/
colourco.de是一款在線設計工具,可以讓你非常直觀的組合各種顏色。
6. Palettte App
網址:https://palettte.app/
palettte和之前見到的網站不太一樣,它是一款色彩編輯和重映射工具,能夠幫助你從一個顏色中構建出另外一種顏色,還支持單個顏色的微調
7. Colorinspire
網址:https://www.colorinspire.io/
精選各種色彩靈感,可以馬上用在您的設計項目中。
8. ColorSpace
網址:https://mycolor.space/
調色板生成器,以及漸變色工具。只要輸入您的顏色,網站馬上會生成與之相搭配的漸變色和調色板。
9. Pigment
網址:https://pigment.shapefactory.co/
一種根據光線和顏料生成的清新鮮艷的獨特調色板。
10. Adobe Color
網址:https://color.adobe.com/create
這個adobe出品的調色板應該是比較熟悉了,每種顏色方案由五個顏色組成。您可以自己生成,也可以看流行的搭配方案。
11. Colors & Fonts
網址:https://www.colorsandfonts.com/
這是一個為開發者和設計師準備的調色板,漸變色,字體的靈感庫。
12. HueSnap
網址:https://www.huesnap.com/
這是一個可以自己創建色彩搭配并與人共享的網站。獲取顏色的方式可以讀取圖片或者自己選擇。
13. Culrs
網址:https://culrs.com/
culrs為您提供了一個簡單明了的方法來選擇調色板。
14. Eva Design System
網址:https://colors.eva.design/
使用深度學習算法生成的調色板。比較贊的是深色模式,可以看顏色在深色背景下的效果。
15. Scale
網址:https://hihayk.github.io/scale/
一種全新的生成顏色的方式。調整兩邊色顏色,生成中間的混合色。
16. Site Palette
網址:http://palette.site/
一個瀏覽器插件,可以查看正在訪問網頁的配色。設計師和前端工程師必備工具。
17. BrandColors
網址:https://brandcolors.net/
集合了500多個不同品牌的官方用色,包含了facebook,Twitter,instagram等。
18. Colorwise
網址:https://colorwise.io/
這個網站在product hunt中的投票最高,應該深受設計師喜歡。
19. HTML Color Codes
網址:https://htmlcolorcodes.com/
使用這個網站可以很容易的為您的網站查找各種顏色的十六進制顏色代碼,RGB色值,HSL色值。
20. ColorBox
網址:https://www.colorbox.io/
這是一個生成漸變色色值的工具。
21. Generate — Coolors.co
網址:https://coolors.co/
快速生成各種調色板的網站,您可以保存分享這些配色方案。
22. Color — Cloudflare Design
網址:https://cloudflare.design/color/
用于ui界面設計的調色板工具,可以實時查看背景文字圖標選擇框的顏色效果。
23. Instant Duotone Effect Generator
網址:https://duotones.co/
上傳圖片,就能查看圖片生成漂亮的雙色調效果。網站預設十幾種常用的雙色調配色工具。
24. Color Tool — Material Design
網址:https://material.io/resources/color/#!/?view.left=0&view.right=0
安卓app界面設計的好幫手,可以為安卓界面創建調色板,并測試顏色搭配的可訪問性。
25. Blendy
網址:https://blendy.ml/
這是一個快速預覽圖片通過css代碼實現特效后的效果。您可以復制css代碼用在您的設計中。
26. LOL Colors
網址:https://www.webdesignrankings.com/resources/lolcolors/
精選挑選的色彩搭配靈感。
27. Color Hunt
網址:https://colorhunt.co/
Color Hunt是一個免費開放的色彩靈感平臺,擁有數千種時尚的手工挑選的色彩搭配調色板。
28. ColorMe
網址:https://colorme.io/
可視化的css顏色調試網站。
29. Polarite
網址:https://www.polarite.app/
Polarite是一款機器學習的顏色生成app,用于生成和諧的配色方案。
30. Gradient Hunt
網址:https://gradienthunt.com/
精選了數千種時尚漸變色的網站,每天更新。
31. Palettable
網址:https://www.palettable.io/4EDED7
自動生成一個一個的顏色,讓你選擇喜歡或者不喜歡。所有向您展示的顏色都是從數百萬設計師挑選中生成的。
32. ColorSpark
網址:https://colorspark.app/
一個非常簡單的單色和漸變色隨機生成器。
33. SVG Colorizer
網址:https://www.iconshock.com/svg-color/
自動為svg圖標和插畫配色,這些svg文件可以是網站提供的,也能自己上傳。
34. Sip
網址:https://sipapp.io/
適用于Mac的拾色軟件,可以收集整理分享各種配色方案。
35. CoolHue 2.0
網址:https://webkul.github.io/coolhue/sketch-plugin/
sketch上使用的漸變色調色板插件。
36. Color Koala
網址:https://colorkoala.xyz/
一個快速生成調色板的工具,可以定義深色,淺色,色系。
37. SchemeColor
網址:https://www.schemecolor.com/
這是一個包含了數千個美麗色彩組合的網站,網站不僅可以查看并下載色彩搭配,還有展示色彩搭配的靈感來源圖片。
38. Free Mesh Gradient Collection
網址:https://www.ls.graphics/meshgradients
這是一個生成融合在一起的多種漸變色工具的網站,可以下載sketch,ai,eps,jpg等格式。
39. WebGradients
網址:https://webgradients.com/
由頂級設計師策劃的180個漸變色,可以下載sketch格式、psd格式文件,保存png文件,獲取css3代碼。
40. Gradient Buttons
網址:https://gradientbuttons.colorion.co/
漸變色設計的按鈕,并且帶懸停效果,可以復制css代碼用在您的設計中。
41. ColorKit
網址:https://colorkit.io/
色彩混合工具,混合兩種顏色生成多個顏色。
42. Eggradients
網址:https://www.eggradients.com/
金蛋形狀展示漸變色,可以復制十六進制色值和css代碼。
43. Cool Backgrounds
網址:https://coolbackgrounds.io/
帶紋理效果的漸變色背景生成器,可以用于博客,網站,桌面,壁紙背景。
44. Google Art & Culture Experiment — Art Palette
網址:https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa
結合藝術與文化的體驗探索,通過選擇色彩搭配搜索藝術作品。
45. GradPad
網址:http://ourownthing.co.uk/gradpad.html
漸變色生成器,隨意挪動兩個按鈕,在網頁中創建可愛的漸變色。
46. Khroma
網址:http://khroma.co/
Khroma是生成,發現,搜索和保存您想要使用的顏色組合和調色板的好工具。
47. Color palettes
網址:https://www.canva.com/colors/color-palettes/
瀏覽Canva的數千種顏色組合!非設計師專用。
48. Color Safe
網址:http://colorsafe.co/
測試網站的顏色使用的可訪問性,讓您的網站給美觀易用。
49. Paletton
網址:http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
使用色輪創建調色板。
50. Colordot
網址:https://color.hailpixel.com/
非常簡單的顏色選擇器。
51. Colors
網址:https://klart.io/colors/
100%由數據驅動的配色方案集合。
52. Contrast Ratio
網址:https://contrast-ratio.com/
一款輕松計算顏色對比度的配色工具。
53. Color Lisa
網址:http://www.colorlisa.com/
世界上最偉大的藝術家的色彩杰作。
54. Color Designer
網址:https://colordesigner.io/
只需選擇一種顏色,Color Designer就會幫助我們構建一個系統的配色方案,并基于我們所選的顏色生成多種色調和陰影等。
55. Color.review
網址:https://color.review/
用于探索和查找可訪問顏色的現代工具。確保每個人都能看到您的作品。
56. Blend
網址:http://www.colinkeany.com/blend/
創建和自定義漂亮的CSS3漸變色。
57. Contrast
網址:https://usecontrast.com/
用于快速訪問WCAG色彩對比度的macOS軟件。
58. Grabient
網址:https://www.grabient.com/
一個非常漂亮且實用的漸變網站,支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。
這么多的色彩工具就先到這里啦~
如果小伙伴們還發現哪些超贊的配色網站可以留言告訴我們~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。