摘要:注模塊名右邊有小程序圖標即表明可以在小程序中使用。轉義字符串為合法的字符串字面量。轉義特殊字符用于構造函數。使構造函數繼承另一個構造函數原型鏈上的方法。
導語
Licia 是一套在開發中實踐積累起來的實用 JavaScript 工具庫。該庫目前擁有超過 300 個模塊,同時支持瀏覽器、node 及小程序運行環境,提供了包括日期格式化、md5、顏色轉換等實用模塊,可以極大地提高開發效率。
前言因為小程序運行的是 JavaScript 代碼,傳統前端所使用的 JS 庫理應也能夠被用在小程序中才對。然而,經過實際測試,你會發現有相當一部分 npm 包是無法直接在小程序中跑起來的。比如前端工程師十分常用的 lodash,在小程序中引入會報錯。
為什么會這樣?
主要原因就是絕大部分庫的開發者在設計時只會考慮兩種運行環境,瀏覽器和 node,而小程序并不會在其考慮范圍內。因此,只要開發者的 JS 代碼使用了只有瀏覽器與 node 中才有的接口,如 DOM 操作、文件讀寫等,該庫就不能正常地運行在小程序環境中。除此之外,假如他們使用了小程序禁用的功能,例如全局變量與動態代碼執行,這時候代碼跑在小程序環境也會出錯。
使用 使用 npm 安裝1、 安裝 npm 包
npm i miniprogram-licia --save
2、點擊開發者工具中的菜單欄:工具 --> 構建 npm
3、直接在代碼中引入使用
const licia = require("miniprogram-licia"); licia.md5("licia"); // -> "e59f337d85e9a467f1783fab282a41d0" licia.safeGet({a: {b: 1}}, "a.b"); // -> 1生成定制化 util.js
使用 npm 包的方式會將所有功能引入到代碼包中,大概會增加 100 kb 的大小。如果你只想引入所需腳本,可以使用在線工具生成定制化 util 庫。
1、訪問 https://licia.liriliri.io/builder.html
2、輸入需要的模塊名,點擊生成下載 util.js。
3、將生成的工具庫拷貝到小程序項目任意目錄下然后直接引入使用。
const util = require("../lib/util"); util.wx.getStorage({ key: "test" }).then(res => console.log(res.data));優點
1、目前擁有 270 多個模塊可在小程序中正常運行,而 underscore 只有 120 個函數左右。
2、與 lodash 相比增加了不少更加實用的函數,比如 md5、atob、btoa、Emitter、dateFormat 等。
3、可以直接在小程序中引入運行,不像 lodash 需要進行一定的修改才能正常跑在小程序中。
4、定制化生成可以使用更小體積的工具庫,這在限制了代碼包大小的小程序中十分有用。
附錄這里只簡單列出函數及其功能介紹,詳細的用法請訪問官網查看。
注:模塊名右邊有小程序圖標即表明可以在小程序中使用。
Class: 創建 JavaScript 類。
Color: 顏色轉換。
Dispatcher: Flux 調度器。
Emitter: 提供觀察者模式的 Event emitter 類。
Enum: Enum 類實現。
JsonTransformer: JSON 轉換器。
LinkedList: 雙向鏈表實現。
Logger: 帶日志級別的簡單日志庫。
Lru: 簡單 LRU 緩存。
Promise: 輕量 Promise 實現。
PseudoMap: 類似 es6 的 Map,不支持遍歷器。
Queue: 隊列數據結構。
QuickLru: 不使用鏈表的 LRU 實現。
ReduceStore: 簡單類 redux 狀態管理。
Stack: 棧數據結構。
State: 簡單狀態機。
Store: 內存存儲。
Tween: JavaScript 補間動畫庫。
Url: 簡單 url 操作庫。
Validator: 對象屬性值校驗。
abbrev: 計算字符串集的縮寫集合。
after: 創建一個函數,只有在調用 n 次后才會調用一次。
allKeys: 獲取對象的所有鍵名,包括自身的及繼承的。
arrToMap: 將字符串列表轉換為映射。
atob: window.atob,運行在 node 環境時使用 Buffer 進行模擬。
average: 獲取數字的平均值。
base64: base64 編解碼。
before: 創建一個函數,只能調用少于 n 次。
binarySearch: 二分查找實現。
bind: 創建一個綁定到指定對象的函數。
btoa: window.btoa,運行在 node 環境時使用 Buffer 進行模擬。
bubbleSort: 冒泡排序實現。
bytesToStr: 將字節數組轉換為字符串。
callbackify: 將返回 Promise 的函數轉換為使用回調的函數。
camelCase: 將字符串轉換為駝峰式。
capitalize: 將字符串的第一個字符轉換為大寫,其余字符轉換為小寫。
castPath: 將值轉換為屬性路徑數組。
centerAlign: 字符串居中。
char: 根據指定的整數返回 unicode 編碼為該整數的字符。
chunk: 將數組拆分為指定長度的子數組。
clamp: 將數字限定于指定區間。
className: 合并 class。
clone: 對指定對象進行淺復制。
cloneDeep: 深復制。
cmpVersion: 比較版本號。
combine: 創建一個數組,用一個數組的值作為其鍵名,另一個數組的值作為其值。
compact: 返回數組的拷貝并移除其中的虛值。
compose: 將多個函數組合成一個函數。
concat: 將多個數組合并成一個數組。
contain: 檢查數組中是否有指定值。
convertBase: 對數字進行進制轉換。
createAssigner: 用于創建 extend,extendOwn 和 defaults 等模塊。
curry: 函數柯里化。
dateFormat: 簡單日期格式化。
debounce: 返回函數的防反跳版本。
decodeUriComponent: 類似 decodeURIComponent 函數,只是輸入不合法時不拋出錯誤并盡可能地對其進行解碼。
defaults: 填充對象的默認值。
define: 定義一個模塊,需要跟 use 模塊配合使用。
defineProp: Object.defineProperty(defineProperties) 的快捷方式。
delay: 在指定時長后執行函數。
detectBrowser: 使用 ua 檢測瀏覽器信息。
detectMocha: 檢測是否有 mocha 測試框架在運行。
detectOs: 使用 ua 檢測操作系統。
difference: 創建一個數組,該數組的元素不存在于給定的其它數組中。
dotCase: 將字符串轉換為點式。
each: 遍歷集合中的所有元素,用每個元素當做參數調用迭代器。
easing: 緩動函數,參考 http://jqueryui.com/ 。
endWith: 檢查字符串是否以指定字符串結尾。
escape: 轉義 HTML 字符串,替換 &,<,>,",`,和 " 字符。
escapeJsStr: 轉義字符串為合法的 JavaScript 字符串字面量。
escapeRegExp: 轉義特殊字符用于 RegExp 構造函數。
every: 檢查是否集合中的所有元素都能通過真值檢測。
extend: 復制多個對象中的所有屬性到目標對象上。
extendDeep: 類似 extend,但會遞歸進行擴展。
extendOwn: 類似 extend,但只復制自己的屬性,不包括原型鏈上的屬性。
extractBlockCmts: 從源碼中提取塊注釋。
extractUrls: 從文本中提取 url。
fibonacci: 計算斐波那契數列中某位數字。
fileSize: 將字節數轉換為易于閱讀的形式。
fill: 在數組指定位置填充指定值。
filter: 遍歷集合中的每個元素,返回所有通過真值檢測的元素組成的數組。
find: 找到集合中第一個通過真值檢測的元素。
findIdx: 返回第一個通過真值檢測元素在數組中的位置。
findKey: 返回對象中第一個通過真值檢測的屬性鍵名。
findLastIdx: 同 findIdx,只是查找順序改為從后往前。
flatten: 遞歸拍平數組。
fnParams: 獲取函數的參數名列表。
format: 使用類似于 printf 的方式來格式化字符串。
fraction: 轉換數字為分數形式。
freeze: Object.freeze 的快捷方式。
freezeDeep: 遞歸進行 Object.freeze。
gcd: 使用歐幾里德算法求最大公約數。
getUrlParam: 獲取 url 參數值。
has: 檢查屬性是否是對象自身的屬性(原型鏈上的不算)。
hslToRgb: 將 hsl 格式的顏色值轉換為 rgb 格式。
identity: 返回傳入的第一個參數。
idxOf: 返回指定值第一次在數組中出現的位置。
indent: 對文本的每一行進行縮進處理。
inherits: 使構造函數繼承另一個構造函數原型鏈上的方法。
insertionSort: 插入排序實現。
intersect: 計算所有數組的交集。
intersectRange: 計算兩個區間的交集。
invert: 生成一個新對象,該對象的鍵名和鍵值進行調換。
isAbsoluteUrl: 檢查 url 是否是絕對地址。
isArgs: 檢查值是否是參數類型。
isArr: 檢查值是否是數組類型。
isArrBuffer: 檢查值是否是 ArrayBuffer 類型。
isArrLike: 檢查值是否是類數組對象。
isBool: 檢查值是否是布爾類型。
isBrowser: 檢測是否運行于瀏覽器環境。
isClose: 檢查兩個數字是否近似相等。
isDataUrl: 檢查字符串是否是有效的 Data Url。
isDate: 檢查值是否是 Date 類型。
isEmail: 簡單檢查值是否是合法的郵件地址。
isEmpty: 檢查值是否是空對象或空數組。
isEqual: 對兩個對象進行深度比較,如果相等,返回真。
isErr: 檢查值是否是 Error 類型。
isEven: 檢查數字是否是偶數。
isFinite: 檢查值是否是有限數字。
isFn: 檢查值是否是函數。
isGeneratorFn: 檢查值是否是 Generator 函數。
isInt: 檢查值是否是整數。
isJson: 檢查值是否是有效的 JSON。
isLeapYear: 檢查年份是否是閏年。
isMap: 檢查值是否是 Map 對象。
isMatch: 檢查對象所有鍵名和鍵值是否在指定的對象中。
isMiniProgram: 檢測是否運行于微信小程序環境中。
isMobile: 使用 ua 檢測是否運行于移動端瀏覽器。
isNaN: 檢測值是否是 NaN。
isNative: 檢查值是否是原生函數。
isNil: 檢查值是否是 null 或 undefined,等價于 value == null。
isNode: 檢測是否運行于 node 環境中。
isNull: 檢查值是否是 Null 類型。
isNum: 檢測值是否是數字類型。
isNumeric: 檢查值是否是數字,包括數字字符串。
isObj: 檢查值是否是對象。
isOdd: 檢查數字是否是奇數。
isPlainObj: 檢查值是否是用 Object 構造函數創建的對象。
isPrime: 檢查整數是否是質數。
isPrimitive: 檢測值是否是字符串,數字,布爾值或 null。
isPromise: 檢查值是否是類 promise 對象。
isRegExp: 檢查值是否是正則類型。
isRelative: 檢查路徑是否是相對路徑。
isSet: 檢查值是否是 Set 類型。
isSorted: 檢查數組是否有序。
isStr: 檢查值是否是字符串。
isTypedArr: 檢查值是否 TypedArray 類型。
isUndef: 檢查值是否是 undefined。
isUrl: 簡單檢查值是否是有效的 url 地址。
isWeakMap: 檢查值是否是 WeakMap 類型。
isWeakSet: 檢查值是否是 WeakSet 類型。
kebabCase: 將字符串轉換為短橫線式。
keyCode: 鍵碼鍵名轉換。
keys: 返回包含對象自身可遍歷所有鍵名的數組。
last: 獲取數組的最后一個元素。
linkify: 將文本中的 url 地址轉換為超鏈接。
longest: 獲取數組中最長的一項。
lowerCase: 轉換字符串為小寫。
lpad: 對字符串進行左填充。
ltrim: 刪除字符串頭部指定字符或空格。
map: 對集合的每個元素調用轉換函數生成與之對應的數組。
mapObj: 類似 map,但針對對象,生成一個新對象。
matcher: 傳入對象返回函數,如果傳入參數中包含該對象則返回真。
max: 獲取數字中的最大值。
md5: MD5 算法實現。
memStorage: Web Storage 接口的純內存實現。
memoize: 緩存函數計算結果。
mergeSort: 歸并排序實現。
methods: 獲取對象中所有方法名。
min: 獲取數字中的最小值。
moment: 簡單的類 moment.js 實現。
ms: 時長字符串與毫秒轉換庫。
negate: 創建一個將原函數結果取反的函數。
nextTick: 能夠同時運行在 node 和瀏覽器端的 next tick 實現。
noop: 一個什么也不做的空函數。
normalizeHeader: 標準化 HTTP 頭部名。
normalizePath: 標準化文件路徑中的斜杠。
now: 獲取當前時間戳。
objToStr: Object.prototype.toString 的別名。
omit: 類似 pick,但結果相反。
once: 創建只能調用一次的函數。
optimizeCb: 用于高效的函數上下文綁定。
pad: 對字符串進行左右填充。
pairs: 將對象轉換為包含【鍵名,鍵值】對的數組。
parallel: 同時執行多個函數。
parseArgs: 命令行參數簡單解析。
partial: 返回局部填充參數的函數,與 bind 模塊相似。
pascalCase: 將字符串轉換為帕斯卡式。
perfNow: 高精度時間戳。
pick: 過濾對象。
pluck: 提取數組對象中指定屬性值,返回一個數組。
precision: 獲取數字的精度。
promisify: 轉換使用回調的異步函數,使其返回 Promise。
property: 返回一個函數,該函數返回任何傳入對象的指定屬性。
query: 解析序列化 url 的 query 部分。
quickSort: 快排實現。
raf: requestAnimationFrame 快捷方式。
random: 在給定區間內生成隨機數。
randomItem: 隨機獲取數組中的某項。
range: 創建整數數組。
rc4: RC4 對稱加密算法實現。
reduce: 合并多個值成一個值。
reduceRight: 類似于 reduce,只是從后往前合并。
reject: 類似 filter,但結果相反。
remove: 移除集合中所有通過真值檢測的元素,返回包含所有刪除元素的數組。
repeat: 重復字符串指定次數。
restArgs: 將給定序號后的參數合并成一個數組。
rgbToHsl: 將 rgb 格式的顏色值轉換為 hsl 格式。
root: 根對象引用,對于 nodeJs,取 global 對象,對于瀏覽器,取 window 對象。
rpad: 對字符串進行右填充。
rtrim: 刪除字符串尾部指定字符或空格。
safeCb: 創建回調函數,內部模塊使用。
safeDel: 刪除對象屬性。
safeGet: 獲取對象屬性值,路徑不存在時不報錯。
safeSet: 設置對象屬性值。
sample: 從集合中隨機抽取部分樣本。
selectionSort: 選擇排序實現。
shuffle: 將數組中元素的順序打亂。
size: 獲取對象的大小或類數組元素的長度。
sleep: 使用 Promise 模擬暫停方法。
slice: 截取數組的一部分生成新數組。
snakeCase: 轉換字符串為下劃線式。
some: 檢查集合中是否有元素通過真值檢測。
sortBy: 遍歷集合中的元素,將其作為參數調用函數,并以得到的結果為依據對數組進行排序。
spaceCase: 將字符串轉換為空格式。
splitCase: 將不同命名式的字符串拆分成數組。
splitPath: 將路徑拆分為文件夾路徑,文件名和擴展名。
startWith: 檢查字符串是否以指定字符串開頭。
strHash: 使用 djb2 算法進行字符串哈希。
strToBytes: 將字符串轉換為字節數組。
stringify: JSON 序列化,支持循環引用和函數。
stripAnsi: 清除字符串中的 ansi 控制碼。
stripCmt: 清除源碼中的注釋。
stripColor: 清除字符串中的 ansi 顏色控制碼。
stripHtmlTag: 清除字符串中的 html 標簽。
sum: 計算數字和。
swap: 交換數組中的兩項。
template: 將模板字符串編譯成函數用于渲染。
throttle: 返回函數的節流閥版本。
timeAgo: 將時間格式化成多久之前的形式。
timeTaken: 獲取函數的執行時間。
times: 調用目標函數 n 次。
toArr: 將任意值轉換為數組。
toBool: 將任意值轉換為布爾值。
toDate: 將任意值轉換為日期類型。
toInt: 將任意值轉換為整數。
toNum: 將任意值轉換為數字。
toSrc: 將函數轉換為源碼。
toStr: 將任意值轉換為字符串。
topoSort: 拓撲排序實現。
trim: 刪除字符串兩邊指定字符或空格。
tryIt: 在 try catch 塊中運行函數。
type: 獲取 JavaScript 對象的內部類型。
types: 僅用于生成 ts 定義文件。
ucs2: UCS-2 編解碼。
unescape: 和 escape 相反,轉義 HTML 實體回去。
union: 返回傳入所有數組的并集。
uniqId: 生成全局唯一 id。
unique: 返回數組去重后的副本。
unzip: 與 zip 相反。
upperCase: 轉換字符串為大寫。
upperFirst: 將字符串的第一個字符轉換為大寫。
use: 使用 define 創建的模塊。
utf8: UTF-8 編解碼。
values: 返回對象所有的屬性值。
vlq: vlq 編解碼。
waitUntil: 等待直到條件函數返回真值。
waterfall: 按順序執行函數序列。
wrap: 將函數封裝到包裹函數里面, 并把它作為第一個參數傳給包裹函數。
wx: 小程序 wx 對象的 promise 版本。
zip: 將每個數組中相應位置的值合并在一起。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104123.html
摘要:為了避免不同項目之間進行復制粘貼,可以將這些常用的函數封裝到一起并發布包。目前所包含模塊已達三百個,基本可以滿足前端的日常工發需求。二使用打包工具該項目自帶打包工具,可以通過配置文件或命令行掃描源碼自動生成項目專用的工具庫。 前言 在業務開發過程中,我們經常會重復使用日期格式化、cookie 操作、模板、瀏覽器判斷、類型判斷等功能。為了避免不同項目之間進行復制粘貼,可以將這些常用的函數...
摘要:擴展微信小程序框架功能是狀態容器,提供可預測化的狀態管理。擴展微信小程序框架功能日期時間是一個的日期時間處理工具類,其對于的日期時間處理功能非常強悍和全面。 通過第三方 JavaScript 庫,擴展微信小程序框架功能。 擴展微信小程序框架功能(1)——Promise ES6 對 Promise 有了原生的支持,但微信開發者工具更新版本(0.11.112200)后, 移除了開發者工具...
閱讀 1008·2021-09-30 09:58
閱讀 2836·2021-09-09 11:55
閱讀 2004·2021-09-01 11:41
閱讀 995·2019-08-30 15:55
閱讀 3355·2019-08-30 12:50
閱讀 3499·2019-08-29 18:37
閱讀 3297·2019-08-29 16:37
閱讀 2017·2019-08-29 13:00