发表于: 2017-06-03 22:08:28
2 1156
今天完成的事:
- 任务二解决,修复少部分 bug ,对任务三整理思路;
- 尝试了 Angular Cli 的安装,生成第一个 Angular 模版,不过生产环境搭建失败了,决定放弃研究;
- 试用了一个 JavaScript 工具库——lodash,发现挺不错的,期待继续深入;
- 使用了 Vuex 做了少许的状态共享;
- 反复翻看 Vue 的官方文档,发现坑多难填;
明天计划的事情:
- 争取完成任务三;
- 阅读 lodash 的官方文档;
- 继续学习 Vue ,对 vuex 进行更深入的了解;
- 可能会开始对 element ui 的使用;
- 可能会开始学习 scss;
- 深入学习 RegExp 类型即正则表达式的属性和方法;
遇到的问题:
- Input 所获取到的 value 值是字符串,需要转换为 Number 类型才可操作;
- 学习 Vue 中遇到了很多问题,如状态共享,父子组件的参数传递,组件的过渡动画以及组件的自定义事件;
收获:
- 最大的收获当属 lodash 的发现,这是一个很好用的工具库,十分轻量级但又非常强大,比如:
- 循环:
// 这是平常的使用 for 循环方法
for(var i = 0; i < 5; i++) {
// ...
}
//这是用 Array.apply 的循环
Array.apply(null, Array(5)).forEach(function(){
// ...
});
//而 lodash 只要用 _.times 即可
_.times(5, function(){
// ...
});
//配合 ES6 的箭头函数,就可以更加简单明了
_.times(5, ()=>{
//
});
- 生成随机数:
//平时都要用如下方法生成随机整数
function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
getRandomNumber(15, 20);
// 而 Lodash 只要这样就可以
_.random(15, 20);
//生成随机浮点数,只要传入一个 true 就可以了
_.random(15, 20, true);
- 随机元素:
//平常方法
var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];
function pickRandomPerson(luckyDraw){
var index = Math.floor(Math.random() * (luckyDraw.length -1));
return luckyDraw[index];
}
pickRandomPerson(luckyDraw); // John
// Lodash 方法
_.sample(luckyDraw); // Colin
// Lodash 获取多个随机元素,比如 2 个
_.sample(luckyDraw, 2); // ['John','Lily']
还有很多方便的用法,在 Lodash 官方文档里有写明:Lodash 的官方文档
参考资料:http://www.jianshu.com/p/7436e40ac5d1#
- 还有一个收获便是 ES6 的函数扩展:
- ES6 中允许函数对参数设置默认值:
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
- 用 rest 参数代替函数的 arguments:
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
- 用『箭头』即 " => " 来定义函数:
//用 function 来定义函数
var f = function(v) {
return v;
};
// 箭头函数的写法
var f = v => v;
//如果没有传递参数,这可以用圆括号代替参数部分
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
参考资料:http://es6.ruanyifeng.com/
评论