qijiebing/dailynote

重学前端 日常笔记

dailynote's Issues

channelComponents 分渠道获取脚本

let channelComponents,
	env,
	path = ''
// console.log(global)
/*
 * 注：evs如果使用diff的话
 * diff渠道为差异渠道，非diff渠道为通用渠道
 * 非diff的通用渠道不需要加渠道后缀
 * 如果只有单一渠道的话，非diff渠道同样需要存在导出
 * 此方式固定
 */

function getComponent(name, evs) {
	return function(ev) {
		ev = ev || evs
		// console.log('components:' + name)
		if (!!ev && ev.indexOf('diff') > -1) {
			let evArr = ev.split(':')
			if (window.env === evArr[1]) {
				path = `_${evArr[1]}`
			}
		} else {
			env = !ev ? window.env : ev
			path = `_${env}`
		}
		// console.log(`filePath:./${name}/${name}${path}.js`)
		return import(`./${name}/${name}${path}.js`).then(Compt => {
			return Compt.default
		})
	}
}

channelComponents = {
	// login: getComponent('login'),
	pay: getComponent('pay'),
	/**
	 * getMeberid(fn(obj,boo),Boolean)
	 * fn接收两个参数 object-会员信息 boo-是否已经登录
	 * Boolean-未登录时，是否自动跳转登录
	 */
	revenuepay: getComponent('revenuepay'),
	getMemberid: getComponent('getmemberid'),
	getLocation: getComponent('getLocation'),
	wxImpower: getComponent('wximpower', 'diff:wx')
}

export default channelComponents

util.js

// 是否是字符串
const isString = str => Object.prototype.toString.call(str) === '[object String]'

// 是否是空对象
const isEmpty = obj => {
    if (obj === null) {
        return true
    }

    if (Array.isArray(obj) || isString(obj)) {
        return obj.length === 0
    }

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            return false
        }
    }

    return true
}

// 是否是function
const isFun = fn => typeof fn === 'function'

// 日期新格式 - =》 / 防止ios报错
const newDate = val => isString(val) ? new Date(val.replace(/-/g, '/')) : new Date(val)

/**
 * 格式化日期
 * date 日期
 * format 格式化方式
 * isDiff 是否区分今明后
 */
function formatDate(date = new Date(), format = 'yyyy-MM-dd', isDiff = false) {
    if (isString(date)) {
        try {
            date = newDate(date)
        } catch (e) {
            date = new Date()
        }
    }

    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
    }

    let w = [
        ['日', '一', '二', '三', '四', '五', '六'],
        ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    ]

    let text = ''

    if (isDiff) {
        let now = new Date()
        let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
        let start = new Date(date.getFullYear(), date.getMonth(), date.getDate())
        let diff = (start - today) / 86400000

        switch (diff) {
            case 0:
                text = '今天'
                break
            case 1:
                text = '明天'
                break
            case 2:
                text = '后天'
                break
        }
    }

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }

    if (/(w+)/.test(format)) {
        if (text) {
            format = format.replace(RegExp.$1, text)
        } else {
            format = format.replace(RegExp.$1, w[RegExp.$1.length - 1][date.getDay()])
        }
    }

    for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        }
    }

    return format
}

export {
    isString,
    isEmpty,
    isFun,
    formatDate
}

fetch组建封装 增加Axios.interceptors.request/response.use() 拦截器

/**
 * @description: 封装好的axios请求
 * @author: mazp.
 * @date: 17/11/19.
 * @see:  www.mazhanpeng.com
 */
import axios from 'axios'
import qs from 'qs'
import iview from 'iview'
import router from '../router/index'
import store from '../vuex/store'

export const Axios = axios.create({
    baseURL: '/', // 因为我本地做了反向代理
    // timeout: 10000,
    responseType: 'json',
    withCredentials: true, // 是否允许带cookie这些
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

let toLogin = true

// POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
    config => {
    // iview.Spin.show();
        iview.LoadingBar.start()

        if (config.method === 'get' && !!config.data) { // get 方法的时候，拼接字符串
            config.url = config.url + '?' + qs.stringify(config.data)
        }
        return config
    },
    error => {
        return Promise.reject(error.data.error.message)
    }
)

// 返回状态判断(添加相应拦截器)
Axios.interceptors.response.use(
    res => {
        // iview.Spin.hide();
        iview.LoadingBar.finish()
        // 401 402 的时候，跳转到登录页面
        // 没有权限
        if (res.data.code === '403') {
            iview.Message.error('没有权限，请联系系统管理员')
            return Promise.reject({ needPop: true, msg: '没有权限，请联系系统管理员' })
        }

        if (res.data.code === '401') {
            if (toLogin) {
                toLogin = false
                store.commit('getUserInfo', {})
                router.push({ name: 'login' })
                sessionStorage.setItem('loginFlag', 'N')
                return Promise.reject({ needPop: true, msg: '登录时效已过期，请重新登录' })
            } else {
                return Promise.reject({ needPop: false, msg: '登录时效已过期，请重新登录' })
            }
        }

        if (res.config.type !== 'weixinApi' && res.data && !(res.data.code === '200' || res.data.code === '201' || res.data.code === '204')) { // 判断后端传的状态码， 200 操作成功， 201 新增成功 ， 204 删除成功
            if (res.data.msg) {
                iview.Message.error(res.data.msg)
            } else {
                iview.Message.error('请求异常，请稍后重试')
            }
            return Promise.reject({ needPop: true, msg: res.data.msg, message: res.data.msg })
        }

        toLogin = true
        res.needPop = true
        return res
    },
    error => {
        console.warn(error)
        iview.Message.error('网络异常')
        return Promise.reject({ needPop: true, msg: '网络异常' })
    }
)

// 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
    install: function (Vue, Option) {
        Object.defineProperty(Vue.prototype, '$http', { value: Axios })
    }
}

bigNumber 浮点数计算

`/**
 * 补0
 * @param {*} num 0个数
 */
function padding0(num) {
    let str = ''
    while (num--) str += '0'
    return str
}

/**
 * 将科学记数法转为普通字符串
 * @param {Number} number
 */
function noExponent(number) {
    const data = String(number).split(/[eE]/)
    if (data.length === 1) return data[0]

    let z = ''
    const sign = number < 0 ? '-' : ''
    const str = data[0].replace('.', '')
    let mag = Number(data[1]) + 1

    if (mag < 0) {
        z = sign + '0.'
        while (mag++) z += '0'
        return z + str.replace(/^-/, '')
    }
    mag -= str.length
    while (mag--) z += '0'
    return str + z
}

function split(number) {
    let str
    if (number < 1e-6) {
        str = noExponent(number)
    } else {
        str = number + ''
    }
    const index = str.lastIndexOf('.')
    if (index < 0) {
        return [str, 0]
    } else {
        return [str.replace('.', ''), str.length - index - 1]
    }
}

/**
 * 计算
 * @param {*} l 操作数1
 * @param {*} r 操作数2
 * @param {*} sign 操作符
 * @param {*} f 精度
 */
function operate(l, r, sign, f) {
    switch (sign) {
        case '+': return (l + r) / f
        case '-': return (l - r) / f
        case '*': return (l * r) / (f * f)
        case '/': return (l / r)
    }
}

/**
 * 解决小数精度问题
 * @param {*} l 操作数1
 * @param {*} r 操作数2
 * @param {*} sign 操作符
 * fixedFloat(0.3, 0.2, '-')
 */
function fixedFloat(l, r, sign) {
    const arrL = split(l)
    const arrR = split(r)
    let fLen = Math.max(arrL[1], arrR[1])

    if (fLen === 0) {
        return operate(l, r, sign, 1)
    }
    const f = Math.pow(10, fLen)
    if (arrL[1] !== arrR[1]) {
        if (arrL[1] > arrR[1]) {
            arrR[0] += padding0(arrL[1] - arrR[1])
        } else {
            arrL[0] += padding0(arrR[1] - arrL[1])
        }
    }
    return operate(+arrL[0], +arrR[0], sign, f)
}

/**
 * 加
 */
function add(l, r) {
    return fixedFloat(l, r, '+')
}

/**
 * 减
 */
function sub(l, r) {
    return fixedFloat(l, r, '-')
}

/**
 * 乘
 */
function mul(l, r) {
    return fixedFloat(l, r, '*')
}

/**
 * 除
 */
function div(l, r) {
    return fixedFloat(l, r, '/')
}

/**
 * 四舍五入
 * @param {*} number
 * @param {*} fraction
 */
function round(number, fraction) {
    return Math.round(number * Math.pow(10, fraction)) / Math.pow(10, fraction)
}

module.exports = {
    add, sub, mul, div, round
}

算法题目

`// 冒泡排序 和右边的对比 大的话 互换位置
// function bublesort(arr){
// const len = arr.length
// for(let i = 0; i<len-1; i++ ) {
// for(let j=0; i<len-j-1; j++) {
// if (arr[j] > arr[j+1]) {
// [arr[j], arr[j+1]] = [arr[j+1], arr[j]]
// }
// }
// }
// return arr
// }
// console.log(bublesort([1,3,2,5,7,4,3,9,10]))

// 快排 O(n*logn)
// 找个标志位
// 小于标志位的放左边 大于的 放右边
// 左右的数组继续递归
// function quickSort(arr) {
// // 终止条件 当len不能继续 二分
// if (arr.length<=1) {
// return arr
// }
// let flag = arr.shift() // 弹出 不参与递归
// let left = []
// let right = []
// for(let i = 0; i < arr.length; i++) {
// if (arr[i] < flag) {
// left.push(arr[i])
// }
// if (arr[i] > flag) {
// right.push(arr[i])
// }
// }
// // 递归左右数组
// return quickSort(left).concat(flag,quickSort(right))
// }
// let res = quickSort([1,6,4,7,9,10,2,5,8])
// console.log(res)

// 上面的快排要占用left right空间 浪费缓存 可以考虑不占用新缓存的左右指针游标算法
// 选flag = arr[beigin] 起点 然后flag和 begin end对比
// left ======================== right
// 超出俩边 则替换 最终 flag到达中间，
// 然后flag俩侧的递归left ===== right
function quickSort2(arr, begin=0, end=arr.length-1){
// 到中间了
if (begin >= end) {
return
}
// 新建flag标志位 左右游标
let flag = arr[begin]
let left = begin
let right = end
while (left < right) {
if (left < right && flag <= arr[right]) {
// 大于的flag到下一位 不大于的要 直接替换到left 0 左边去了
right--
}
// 倒数第二到 0 位
arr[left] = arr[right]
if (left < right && flag >= arr[left]) {
left++
}
// 正数第二 到 倒数第二位置
arr[right] = arr[left]
}
arr[left] = flag
quickSort2(arr, begin, left - 1)
quickSort2(arr, left + 1, end)
// console.log(arr)
return arr
}
console.log(quickSort2([8,6,4,7,9,10,2,5,1]))

// 斐波那契
function fib(n) {
if (n == 1 || n == 2) return 1
return fib(n - 1) + fib(n - 2)
}
fib(30)
function fibi(n) {
if (n<=2) {
return 1
}
return fibi(n-1) + fibi(n-2)
}

/// 缓存
// http 缓存
1 获取文件
2 文件返回expire 或者cache-control 设置过期时间， 并且带上etag 或 lastModified
cache-control public 所有网络结点 private 根服务器 no
3 在请求之前 浏览器先查询expire cache control 是否过期 没过期 强缓存生效 不发出网络请求，直接用缓存
4 如果缓存失效了 我们会带上etag lastModifed数据 使用if none match if modified since 咨询后端
5 如果没过期 返回304 过期200 返回新资源

// 前端工程化
// 发布订阅
class Event{
constructor() {
this.callback = {}
}
$off(name) {
this.callback[name] = null
}
$emit(name, args) {
let cbs = this.callback[name]
if (cbs) {
cbs.forEach(c=> {
c.apply(this, args)
})
}
}
$on(name, fn) {
// if(!this.callback[name]) {
// this.callback[name] = []
// }
// this.callback[name].push(fn)
// 简写
(this.callback[name] || (this.callback[name] = [])).push(fn)
}
}

let event = new Event()
event.$on('event', art => {
console.log('event1'+ art)
})
event.$emit('event','666')

// 减少耦合
A
on
B
on
C
emit

// 单例模式
// 保证一个类 仅有一个实例 并提供一个访问他的全局访问点 实现方法先判断实例是否存在 存在则返回 不存在创建再返回
// 适用于弹框 值弹出一次实例
// redux Store
function danli() {
let result = null
return function (params) {
if (result) {
return result
} else {
result = {
test: params
}
return result
}
// return result || result=fn.apply(this,params)
}
}

// 策略模式
// if 改成 switch 或者对象 {s:XPathExpression,a:xx}

// 代理模式
// 函数节流防抖 也是包裹代理模式

// 中介模式

// 工厂模式 return instance
//`