1、eslintrc.js中添加符合编辑器的规则,参照这里
2、在build/webpack.base.conf.js中找到resolve设置别名,方便在引用路径的时候使用
3、安装依赖:babel-runtime(转移es6语法),fastclick(消除移动端300ms点击延迟),babel-polyfill(可以用es6的api)
4、npm install jsonp再封装成promise形式,其中用到了URI编码函数decodeURIComponent
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) : ''
}
encodeURIComponent和encodeURI的区别
var uri="http://www.jxbh.cn/illegal value.htm#start";
alert(encodeURI (uri)):
//”http: //www.jxbh.cn/illegal%20value .htm#s tart”
alert( encodaURIComponent (uri));
//”http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start”
一个Promise的例子
var getDate = function (a, b) {
return new Promise(function (resolve, reject) {
var sum = a + b
if (true) {
resolve(sum)
} else {
reject(sum)
}
})
}
getDate(1, 1)
.then(function (data) {
console.log(data);
return getDate(3, 3)
})
.then(function (data) {
console.log(data);
return getDate(5, 5)
})
.then(function (data) {
console.log(data);
})
5、将公用的配置写进配置文件,再以模块的形式导出来用
6、使用了Object.assign()合并操作,使用new Set和Array.form实现去重
Object.assign也可以实现复制
let obj = {name: '二月', age: {c: 12}}
let o2 = Object.assign({}, obj, {sex:'男'})
console.log(o2)
//{ name: '二月', age: { c: 12 }, sex: '男' }
var arr = [1,2,2,3,4] // 需要去重的数组
var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成array
console.log(newArr) // [1,2,3,4]
7、保证dom成功渲染,一般加个延时
mounted(){
this.$nextTick(function () {
//
})
setTimeout(function () {
//
},20)
}
设置为20ms为经验值,一般浏览器的刷新频率是17ms
8、ref的使用
//html
<div ref="box" class="div1 div2">
//js
mounted(){
console.log(this.$refs.box.className);
},
//div1 div2
9、Slider组件开发
基于better-scroll开发一个slider组件
动态添加dom
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}
export function addClass(el, className) {
if (hasClass(el, className)) {
return
}
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
}
export function getData(el, name, val) {
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}
let elementStyle = document.createElement('div').style
let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
10、开发scroll组件
也是基于better-scroll开发的,用于滚动列表,后面用cube-ui库替换
11、使用vue-lazyload来进行图片懒加载
12、fastclick和better-scroll的click冲突,使用fastclick和class="needsclick"属性解决
13、封装获取数据函数的技巧(get,set)
如果只传两个参数就是get数值,如果传三个参数,就是set数值。
export function getData(el, name, val) {
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}
14、position:relation使用
设置height:100%时是相对父元素的高度来计算的,并不脱离标准文档流
position:absolution脱离标准文档流
15、巧妙运用Math.min(a,b)
a是一个固定值假如设置为10,b是从0开始变大的变化值,意思是上限就是10,超过10就取10,没超过10就取b的值
16、在进度条中的一个技巧:不能小于0,不能大于进度条长度
const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))
17、歌词插件lyric-parser
18、sessionStorage和localStorage库good-storage
回顾笔记
1、recommend.vue知识点
img标签可以使用@load来监听图片是否加在完。
布局采用的是百分比布局+flex,头部引用header组件,内容部分则采用position:fixed,top:60px,width如果不写则默认100%。
2、scroll组件中,利用better-scroll封装成基础组件,其中probeType设置为3会在滑动过程中监听scroll变化,是否设置为3看业务需求
3、@click.native当给自定义组件添加点击事件时,必须加上.native
4、vue中@touchstart.stop.prevent 中target属性,返回DOM树最顶层元素。也就是点击的哪个返回哪个