qijiebing / dailynote Goto Github PK
View Code? Open in Web Editor NEW重学前端 日常笔记
重学前端 日常笔记
`// 冒泡排序 和右边的对比 大的话 互换位置
// 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
//`
`/**
* 补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
}
// 是否是字符串
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
}
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
/**
* @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 })
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.