前端开发踩的一些坑及参考文章.md

• 阻止滚动事件及恢复滚动事件
• vue登录
• vue实现登录退出
• Vue 全家桶 + axios 前端实现登录拦截、登出、拦截器等功能
• 教你在微信中给Vue单页应用设置标题
• css2.1 clip:rect()
• 基于vue2+vuex2实现的购物车demo
• 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

改淘宝命令行 npm install -g cnpm --registry=https://registry.npm.taobao.org

retina视网膜屏幕CSS @media规则查询语句 [普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx）]

@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 2dppx){ 
    /* Retina下 */
    .retina { }
}

input[button]和button的区别：input在type不是'submit'的时候不会提交，而button在当表单没有submit按钮时会自动转化为submit按钮，但是当type指定为button时input和button都不会提交表单。

• 简单易懂的移动开发视口问题(个人觉得不错)

  • 一篇真正教会你开发移动端页面的文章(一)
  • 一篇真正教会你开发移动端页面的文章(二)

• 前端本地文件操作与上传

• css实现卡片效果

  • background-image:radial-gradient(ellipse at posX posY,color1 color-stop,color2 color-stop,....)
  • demo

html5.2dialog标签

文章 demo

jquery serializeArray读取不了disable表单的数据

时间戳转时间

function timestampToTime(timestamp) {
  var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());;
  return Y + M + D + h + m;
};

json数据转formdata数据格式

function json2Form(json) {
  var str = [];
  for (var p in json) {
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
  }
  return str.join("&");
};

取url中的query

function getQueryString(url, name) {
  var vars = url.split("?")[1];
  var match = RegExp('[?&]' + name + '=([^&]*)').exec(vars);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

拿cookie

GetCookieValue: function (c_name) {
    if (document.cookie.length > 0) {
        var c_start = document.cookie.indexOf(c_name + "=")
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1
            var c_end = document.cookie.indexOf(";", c_start)
            if (c_end == -1) c_end = document.cookie.length
            return unescape(document.cookie.substring(c_start, c_end))
        }
    }
    return ""
}

地址栏信息

GetQueryString: function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

检查手机格式

isPhone: function (val) {
    var PhoneReg = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
    return PhoneReg.test($.trim(val))
}

escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

unescape() 函数可对通过 escape() 编码的字符串进行解码。

可以用于query传url链接

js响应式原理

文章1 文章2

let data = { price: 5, quantity: 2 }
let target = null
class Dep {
  constructor () {
    this.subscribers = []
  }
  depend () {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target) 
    }
  }
  notify () {
    this.subscribers.forEach(sub => sub())
  }
}
Object.keys(data).forEach(key => {
  let internalValue = data[key]

  const dep = new Dep()

  Object.defineProperty(data, key, {
    get() {
      dep.depend()
      return internalValue
    },
    set(newVal) {
      internalValue = newVal
      dep.notify()
    }
  })
})
function watcher(myFun) {
  target = myFun
  target()
  target = null
}
watcher(() => {
  data.total = data.price * data.quantity
})

event.stopImmediatePropagation()

webpack雪碧图

文章