daily-skill--梳理(2)

const backdrop = prefixStyle('backdrop-filter')

this.$refs.filter.style[backdrop] = `blur(${blur}px)`

var xhr = new XMLHttpRequest()
xhr.open("get",  "www.get.com")
xhr.onreadysatateChange = function(){
    if (xhr.readystate===400){
        if(xhr.status == 200){
            //
        }
    }
}
xhr.send()

AJAX demo

//

function ajax(url,type,param,async,header) {

                return new Promise(function(resolve, reject) {
                    var req = new XMLHttpRequest();
                    req.onload = function() { 
                        if(req.status == 200 || req.status == 304) {
                            resolve(JSON.parse(req.response));
                        } else {
                            reject(Error(req.statusText));
                        }
                    };
                    req.onerror = function() {
                        reject(Error("Network Error"));
                    };
                    type == null || type.toUpperCase() == 'GET'?type='get':type='post';
                    param = formatParams(param);
                    param == null || param == ''?url:url=url+'?'+param;
                    async == null || async == true?async=true:async=false;

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    req.open(type,url,async);
//类型，地址，同步

                    req.send();
                });
                function formatParams(data) {
                    var _fpArr = [];
                    for (var _fpName in data){
                  	  _fpArr.push(_fpName + "=" + data[_fpName]);
                    }
                    return _fpArr.join("&");
                };
            };
//
调用
ajax('http://wthrcdn.etouch.cn/weather_mini','get',{citykey:101010100},true)
	  .then(function(response) {
                console.log('请求成功~');
                console.log(c);
            }, function(error) {
                console.error("Failed!", error);
            });

BOM

Screen.width;
Location.href; 
protocol   host   search  pathname
History.back();
History.forward();

事件代理

Function bindEvent(elem,type,selector,fn){
    if(fn== null){
        fn= selector;
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target;
        if(selector === null){
            fn(e);
        }else{
            target = e.target;
            if(target.match(selector)){
                fn.call(target,fn(e));
            }
        }
    });
}
bindEvent(div,click,a,function(){
    console.log(a.innerHTML);
})

本地缓存      cache

good-storage

尽量用localstorage，sessionstorage

window.localStorage.setItem(name, JSON.stringify(obj))

区分slice split  splice

slice淡出的截取功能  

//当传入两个参数一正一负时，length也会先于负数相加后，再截取
var a=[1,2,3,4,5,6];    // var b=a.slice(0,3);    //[1,2,3]
var b=a.slice(2,-3);    //[3]      从2-3位开始，截取2+-3个

split

字符串打开成数组

一个少用的例子
var a="0123456";
var b=a.split("",3);    //b=["0","1","2"]

splice

略麻烦

splice（start，delete，item...）

//举一个简单的例子
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']

// 不换行
no-wrap()
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

// 扩展点击区域
extend-click()
  position: relative
  &:before
    content: ''
    position: absolute
    top: -10px
    left: -10px
    right: -10px
    bottom: -10px

Jsonp

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

axios

/**
 *
 * http配置
 * 请求响应拦截
 * 配置超时开始
 */
// 引入axios以及element ui中的loading组件
import axios from 'axios'
import store from '../store'
import { getToken } from "./auth";
import { Loading,Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 13000;

//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;

//错误提示信息
let msg='服务器被外星人拉走了';
let loadinginstace;
//http请求拦截
axios.interceptors.request.use(config=>{
  //服务器请求中动画
  loadinginstace=Loading.service({
    fullscreen: true
  });
  //配置token后期会改
  //config.headers['X-token'] = getToken();
  return config
},err=> {
  //打印错误
  loadinginstace.close();
  Message.error({
    message: '加载超时'
  });
  return Promise.reject(err);
});
//http 响应拦截
axios.interceptors.response.use(data=>{
  loadinginstace.close();
  return data
},err=>{
  loadinginstace.close();
  Message.error({
    message:msg
  });
  return Promise.reject(err);
});

export default axios

单例模式

let SomeClass = (function(){
    let instance=null;
    if(instance === null){
        instance = this
    }    
    return this
})()
var eg1 = new SomeClass();
var eg2 = new SomeClass();

带参 pro升级版

let SomeClass = (function(args){
    let instance = null;
    function init(args){
        for(let key in args){
            this[key] = args[key]
        }
    }
    return function (args){
        if(instance === null){
            instance = this
        }
        init.call(instance,args)
        rerturn this
    }
})(args)
var eg1 = new SomeClass({arg1:1})
var eg2 = new SomeClass({arg2:2})