1. 程式人生 > >javascript vue專案開發中的常用公共方法

javascript vue專案開發中的常用公共方法

本篇文章純屬乾貨,包含了筆者在實際專案開發中經常用到的一些公共通用方法,希望可以幫助大家。

部分方法適用ReactNative

import {
    PixelRatio,
    Dimensions,
    Platform,
    findNodeHandle,
    UIManager
} from 'react-native';

/**
 * 日期格式化函式
 * @param {} date 
 */

function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

export function formatDate(date, type) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()

    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()

    if (type = 'YYYY-MM-DD') {
        return [year, month, day].map(formatNumber).join('-')
    }
    else {
        return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
}



//獲取裝置螢幕的實際寬度

export const deviceW = Dimensions.get('window').width;
export const deviceH = Dimensions.get('window').height;


// 設定自適應字型,以iphone6為例
const basePx = 375

export function px2dp(px) {
    return px * deviceW / basePx
}

/**
 * 判斷是否為iphoneX
 * @returns {boolean}
 */

const X_WIDTH = 375;
const X_HEIGHT = 812;

export function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((deviceH === X_HEIGHT && deviceW === X_WIDTH) ||
            (deviceH === X_WIDTH && deviceW === X_HEIGHT))
    )
}


/**
 * 根據是否是iPhoneX返回不同的樣式
 * @param iphoneXStyle
 * @param iosStyle
 * @param androidStyle
 * @returns {*}
 */

export function ifIphoneX(iphoneXStyle, iosStyle, androidStyle) {
    if (isIphoneX()) {
        return iphoneXStyle;
    } else if (Platform.OS === 'ios') {
        return iosStyle
    } else {
        if (androidStyle) return androidStyle;
        return iosStyle
    }
}


//判斷裝置是否是ios平臺
export const isIphone = Platform.OS == 'ios' ? true : false

/** 
 * 返回精確的n位小數數值
 * @param num:number
 * @param dig:number
*/

export function digitToFixed(num, digit = 2) {
    // NaN,undefined,空值
    if (typeof (num) == 'undefined') {
        return '0.00'
    }
    else {
        return parseFloat(num).toFixed(digit)
    }
}

/** 
 * 返回賬戶金額,每隔三位數字新增一個逗號
 * @param str:string

*/

export function threeNumberAPointer(str) {
    return parseFloat(str).toFixed(2).replace(/\d(?=(?:\d{3})+\b)/g, `$&,`)
}

/**
 * 將銀行卡末尾n位數字截取出來
 *  @param cardCode:string 銀行卡號
 *  @param digit:num  擷取長度
*/

export function bankCardLastNum(cardCode, digit = 4) {
    return cardCode.substring(cardCode.length - digit, cardCode.length)
}

/**
*獲取react-native-element元素的寬度和高度等資訊
* @param ref:ref 元件ref
*/

export function getRnElementInfo(ref) {
    const handle = findNodeHandle(ref);
    return new Promise((resolve) => {
        UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
            resolve({
                x,
                y,
                width,
                height,
                pageX,
                pageY
            });
        });
    });
}

/** 
 * 返回銀行卡號,每隔四個數字新增一個空格
 * @param str:string

*/
export function formatBankCard(str) {
    let newStr = str.replace(/\d(?=(?:\d{4})+\b)/g, `$& `);
    // let subStr = String(newStr).subStr(0,len-4)
    return String(newStr)
}

//判斷引數的型別

const Types = {

  isPrototype( data ) {
    return Object.prototype.toString.call(data).toLowerCase()
  },

  isArray( data ) {
    return this.isPrototype( data ) === '[object array]'
  },

  isJSON( data ) {
    return this.isPrototype( data ) === '[object object]'
  },

  isFunction( data ) {
    return this.isPrototype( data ) === '[object function]'
  },

  isString( data ) {
    return this.isPrototype( data ) === '[object string]'
  },

  isNumber( data ) {
    return this.isPrototype( data ) === '[object number]'
  },

  isUndefined( data ) {
    return this.isPrototype( data ) === '[object undefined]'
  },

  isNull( data ) {
    return this.isPrototype( data ) === '[object null]'
  }

}