### 兼容blob
```
function createObjectURL (blob) {
return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};
```
### 是否字符串
> 方式一：
```
export const isString = (str) => {
// 如果是還得檢測是否有值 typeof str === 'string' && str
return typeof str === 'string'
}
```
> 方式二：
```
export const isString = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
```
### 是否數字
```
export const isNumber = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
```
### 是否boolean
```
export const isBoolean = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
```
### 是否函數
```
export const isFunction = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
```
### 是否為null
```
export const isNull = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
```
### 是否undefined
```
export const isUndefined = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
```
### 是否對象
```
export const isObj = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
```
### 是否數組
```
export const isArray = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
```
### 是否時間
```
export const isDate = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
```
### 是否正則
```
export const isRegExp = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
}
```
### 是否Symbol函數
```
export const isSymbol = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
}
```
### 是否Promise對象
```
export const isPromise = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
}
```
### 是否Set對象
```
export const isSet = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
}
export const ua = navigator.userAgent.toLowerCase();
```
### 是否是微信瀏覽器
```
export const isWeiXin = () => {
return ua.match(/microMessenger/i) == 'micromessenger'
}
```
### 是否是移動端
```
export const isDeviceMobile = () => {
return /android|webos|iphone|ipod|balckberry/i.test(ua)
}
```
### 是否是QQ瀏覽器
```
export const isQQBrowser = () => {
return !!ua.match(/mqqbrowser|qzone|qqbrowser|qbwebviewtype/i)
}
```
### 是否是爬蟲
```
export const isSpider = () => {
return /adsbot|googlebot|bingbot|msnbot|yandexbot|baidubot|robot|careerbot|seznambot|bot|baiduspider|jikespider|symantecspider|scannerlwebcrawler|crawler|360spider|sosospider|sogou web sprider|sogou orion spider/.test(ua)
}
```
### 是否ios
```
export const isIos = () => {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手機
return false
} else if (u.indexOf('iPhone') > -1) {//蘋果手機
return true
} else if (u.indexOf('iPad') > -1) {//iPad
return false
} else if (u.indexOf('Windows Phone') > -1) {//winphone手機
return false
} else {
return false
}
}
```
### 是否為PC端
```
export const isPC = () => {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
```
```
/**
* [getQueryStringArgs 用以解析查詢字符串]
* @return {[Object]} [一個包含所有參數的對象]
*/
function getQueryStringArgs(){
//取得查詢字符串并去掉開頭的“？”
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
// 保存數據對象
args = {},
// 取得每一項
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
// 循環中使用的變量
i = 0,
len = items.length;
//逐個將每一項添加到args對象中
for (i = 0; i<len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}
/**
* [convertToArray 將NodeList轉為數組]
* @param {[Object]} nodes [一個nodelist對象]
* @return {[Object]} [返回一個數組]
*/
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器
}catch(ex){
array = new Array();
for(var i = 0, len = nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
/**
* [outputAttributes 遍歷元素中的所有屬性]
* @param {[Object]} element [一個DOM元素對象]
* @return {[Object]} [返回一個包含屬性名=“屬性值”的數組]
*/
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for(i = 0, len = element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if(element.attributes[i].specified){//確保IE7及更早的版本中，也只會返回特定的屬性
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}
/**
* [loadScript 按需動態加載script文件]
* @param {[String]} url [JavaScript文件地址]
*/
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
/**
* [loadStyles 按需動態加載css文件]
* @param {[String]} url [CSS文件地址]
*/
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
/**
* [EventUtil 封裝跨瀏覽器的事件處理工具對象]
* @type {Object}
*/
var EventUtil = {
/**
* [addHandler 添加事件處理程序]
* @param {[Object]} ele [事件綁定dom元素]
* @param {[String]} type [事件類型]
* @param {[Function]} handler [事件處理函數]
*/
addHandler: function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false);
}else if(ele.atachEvent){
ele.atachEvent('on'+type,handler);
}else{
ele['on'+type] = handler;
}
},
/**
* [getEvent 獲取事件對象]
*/
getEvent: function(event){
return event ? event : window.event;
},
/**
* [getTarget 獲取事件目標]
*/
getTarget: function(event){
return event.target || event.srcElement;
},
/**
* [preventDefault 阻止默認事件]
*/
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
/**
* [removeHandler 移除事件處理程序]
* @param {[Object]} ele [事件綁定dom元素]
* @param {[String]} type [事件類型]
* @param {[Function]} handler [事件處理函數]
*/
removeHandler: function(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false);
}else if(ele.detachEvent){
ele.detachEvent('on'+type,handler);
}else{
ele['on'+type] = null;
}
},
/**
* [stopPropagation 阻止事件冒泡]
*/
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
/**
* [getRelatedTarget 當事件為mouseover和mouseout時才有值，其余事件為null]
*/
getRelatedTarget: function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
/**
* [getButton DOM版鼠標事件]
* @param {[Object]} event [事件對象]
*/
getButton: function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
/**
* [getWheelDelta 獲取鼠標滾輪增值（delta）的方法]
*/
getWheelDelta: function(event){
if(event.wheelDelta){
return (client.engine.oprea && client.engine.oprea < 9.5 ?
-event.wheelDelta : event.wheelDelta);
}else{
return -event.detail * 40;
}
},
/**
* [getCharCode 獲取字符編碼]
*/
getCharCode: function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
},
/**
* [getClipboardText 剪貼板事件，獲取剪切內容]
*/
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
/**
* [setClipboardText 剪貼板事件，設置剪切內容]
*/
setClipboardText: function(event, value){
if(event.clipboardData){
return event.clipboardData.setData("text/plain", value);
}else if(window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
}
/**
* [serialize 表單序列化]
* @param {[Object]} form [一個表單dom對象]
*/
function serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for(i = 0, len = form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j = 0,optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if(option.selected){
optvalue = "";
if(option.hasAttribute){
optValue = (option.hasAttribute("value") ?
option.value : option.text);
}else{//兼容IE
optValue = (option.attributes["value"].specified ?
option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文件輸入
case "submit": //提交按鈕
case "reset": //重置按鈕
case "button": //自定義按鈕
break;
case "radio": //單選按鈕
case "checkbox": //多選按鈕
if(!field.checked){
break;
}
default:
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
/**
* [trim 去掉字符串中的空格]
* @param {[String]} str [需要進行處理的字符串]
* @param {[Number]} type [處理的類型]
* @return {[String]} [返回去除空格之后的字符串]
* 1：所有空格
* 2：前后空格
* 3：前空格
* 4：后空格
*/
function trim(str, type){
switch(type){
case 1:
return str.replace(/\s+/g,"");
case 2:
return str.replace(/(^\s*)|(\s$)/g,"");
case 3:
return str.replace(/(^s*)/g,"");
case 4:
return str.replace(/(\s*$)/g,"");
default:
return str;
}
}
/**
* [removeRepeatArray 數組去重]
* new Set()是ES6的用法
*/
function removeRepeatArray(arr){
return Array.form(new Set(arr));
}
/**
* [upsetArray 數組順序打亂]
*/
function upsetArray(arr){
return arr.sort(function(){
return Math.random() - 0.5;
})
}
/**
* [MaxArray 數組最大值]
*/
function MaxArray(arr){
return Math.max.apply(null,arr);
}
/**
* [MinArray 數組最小值]
*/
function MinArray(arr){
return Math.min.apply(null,arr);
}
/**
* 這一塊的封裝，主要是針對數字類型的數組
* [sumArr 數組求和]
*/
function sumArray(arr){
var sum=0;
for(var i = 0, len = arr.length; i < len; i++){
sum += arr[i];
}
return sum;
}
/**
* [averageArr 求數組的平均值]
*/
function averageArray(arr){
var sum = sumArray(arr);
var average = sum/arr.length;
return average;
}
/**
* [randomOne 數組中隨機取一個元素]
*/
function randomOne(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
/**
* [getEleCount 返回數組（字符串）一個元素出現的次數]
* @param {[type]} obj [可以是一個字符串也可以是一個數組]
* @param {[type]} ele [某個元素]
* getEleCount('asd56+asdasdwqe','a')
* //3
* getEleCount([1,2,3,4,5,66,77,22,55,22],22)
* //2
*/
function getEleCount (obj, ele) {
var num = 0;
for (var i = 0, len = obj.length; i < len; i++) {
if (ele == obj[i]) {
num ++;
}
}
return num;
}
/**
* [getCount 返回數組（字符串）出現最多次數的元素和它出現次數]
* @param {[type]} arr [處理的數組]
* @param {[type]} rank，ranktype [rank->長度，默認為數組長度，ranktype，排序方式，默認降序]
*/
function getCount(arr, rank，ranktype){
var obj = {},
i,
len,
k,
arr1 = [];
//記錄每一元素出現的次數
for (i = 0, len = arr.length; i < len; i++) {
k = arr[i];
if (obj[k]) {
obj[k]++;
}
else {
obj[k] = 1;
}
}
//保存結果{el-'元素'，count-出現次數}
for (var o in obj) {
arr1.push({el: o, count: obj[o]});
}
//排序（降序）
arr1.sort(function (n1, n2) {
return n2.count - n1.count;
});
//如果ranktype為1，則為升序，反轉數組
if(ranktype === 1){
arr1 = arr1.reverse();
}
var rank1 = rank || arr1.length;
return arr1.slice(0,rank1);
}
/**
* [getArrayNum 得到n1-n2下標的數組]
* 不傳第二個參數,默認返回從n1到數組結束的元素
* @param {[Array]} arr [傳入的數組]
* @param {[Number]} n1 [開始的位置]
* @param {[Number]} n2 [結束的位置]
*/
function getArrayNum(arr,n1,n2){
var arr1 = [],
len = n2 || arr.length - 1;
for(var i = n1; i <= len; i++){
arr1.push(arr[i]);
}
return arr1;
}
/**
* [removeArrayForValue 篩選數組]
* //removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')
* //["aaa"] 帶有'test'的都刪除
* //removeArrayForValue(['test','test1','test2','test','aaa'],'test')
* //["test1", "test2", "aaa"] //數組元素的值全等于'test'才被刪除
* @param {[type]} arr [傳入的數組]
* @param {[type]} val [要刪除的值]
* @param {[type]} type [是不是全等于value]
*/
function removeArrayForValue(arr,val,type){
arr.filter(function(item){
return type === '%' ? item.indexOf(val) !== -1 : item !== val;
});
}
/**
* [checkPwd 檢測密碼強度]
* @param {[String]} str [要檢測的密碼字符串]
*/
function checkPwd(str) {
var nowLv = 0;
if (str.length < 6) {
return nowLv;
}
if (/[0-9]/.test(str)) {
nowLv++;
}
if (/[a-z]/.test(str)) {
nowLv++;
}
if (/[A-Z]/.test(str)) {
nowLv++;
}
if (/[\.|-|_]/.test(str)) {
nowLv++;
}
return nowLv;
}
/**
* [repeatStr 字符串循環復制]
* @param {[String]} str [傳入的字符串]
* @param {[Number]} count [需要循環復制的次數]
*/
function repeatStr(str, count) {
var text = '';
for (var i = 0; i < count; i++) {
text += str;
}
return text;
}
/**
* [changeCase 字母大小寫切換]
* 1：首字母大寫
* 2：首頁母小寫
* 3：大小寫轉換
* 4：全部大寫
* 5：全部小寫
* @param {[String]} str [傳入的字符串]
* @param {[Number]} type [切換的類型]
*/
function changeCase(str,type){
function ToggleCase(str) {
var itemText = ""
str.split("").forEach(
function (item) {
if (/^([a-z]+)/.test(item)) {
temText += item.toUpperCase();
}
else if (/^([A-Z]+)/.test(item)) {
itemText += item.toLowerCase();
}
else{
itemText += item;
}
});
return itemText;
}
switch (type) {
case 1:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
return v1.toUpperCase() + v2.toLowerCase();
});
case 2:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
return v1.toLowerCase() + v2.toUpperCase();
});
case 3:
return ToggleCase(str);
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
}
```
- 學習網站
- iframe
- 跨域
- 渲染數據，防止內存泄漏
- 工具類
- 一般使用方法
- 獲取url（路由）參數
- HTML標簽轉義
- 轉義html標簽
- 加入收藏夾
- 提取頁面代碼中所有網址
- 動態加載腳本文件
- 返回頂部的通用方法
- 實現base64解碼
- 確認是否是鍵盤有效輸入值
- 全角半角轉換
- 版本對比
- 壓縮CSS樣式代碼
- 字符串長度截取
- 時間日期格式轉換
- 返回腳本內容
- 格式化CSS樣式代碼
- 獲取cookie值
- 獲得URL中GET參數值
- 獲取移動設備初始化大小
- 獲取頁面高度
- 獲取頁面scrollLeft
- 獲取頁面scrollTop
- 獲取頁面可視高度
- 獲取頁面可視寬度
- 獲取頁面寬度
- 獲取移動設備屏幕寬度
- 判斷是否移動設備
- 判斷是否是移動設備訪問
- 加載樣式文件
- 清除腳本內容
- 時間個性化輸出功能
- 金額大寫轉換函數
- 清除空格
- 隨機數時間戳
- 實現utf8解碼
- 返回字符串構成種類(字母，數字，標點符號)的數量
- 清除所有中文字符(包括中文標點符號)
- 清除所有中文字符及空格
- 校驗是否包含空格
- 校驗是否包含中文字符(包括中文標點符號)
- 校驗是否為網址
- 接成URL帶參數
- 獲取瀏覽器名稱
- 郵箱
- 手機號碼
- 根據url地址下載
- el是否包含某個class
- el添加某個class
- el去除某個class
- 獲取滾動的坐標
- 滾動到頂部
- el是否在視口范圍內
- 洗牌算法隨機
- 劫持粘貼板
- 嚴格的身份證校驗
- 隨機數范圍
- 將阿拉伯數字翻譯成中文的大寫數字
- 將數字轉換為大寫金額
- 檢測密碼強度
- 字符轉換首字大小寫
- 去除空格
- 最大值與最小值和平均值
- 函數節流器
- 16進制顏色轉RGBRGBA字符串
- 追加url參數
- base64文件轉文件和文件轉base64
- base64轉換為blob和blob轉換為file
- 生成 uid 或者 uuid 4種方法
- 正則
- 按復制快捷鍵或者右鍵復制
- 表情
- 獲取dom某個屬性上的值
- 獲取dom某個屬性的值
- 獲取系統
- 去除emoji表情符號
- 本地文件轉換 Bool url 訪問地址
- 禁止ios 擊穿后底部還能滑動
- 將數字負數轉換為字符串類型
- 將字符串類型數字判斷正負
- 判斷是否有小數點
- 判斷是否有科學技術法
- 去除0123字符串類型的數字
- 瀏覽器共享屏幕
- 兼容navigator.getUserMedia與AudioContext
- 音頻軌跡
- vue
- vue 技巧
- vue 2.xx 腳手架快速搭建環境
- vue 優化模塊
- css
- input或textarea_placeholder
- 布局巧
- form/formData
- form
- formData
- Visual-Studio-code
- VS Code
- vscode-fileheader 生成注釋
- View In Browser（右鍵瀏覽器預覽）
- Chinese (Simplified) Language（中文語音包）
- 北京地攤位置
- 輸入框使用第三方語音輸入文本問題
- adb 文檔
- serve后臺
- docker
- 介紹
- 安裝
- 常用命令
- mysql
- 安裝
- 破解Navicat Premium 無限試用
- 源碼技巧
- 實例化
- 判斷是否傳實例化對象
- 實例化構造函數
- ui 框架