Javascript这个语言好是好,但是很多时候写起来太丑了,每次看大牛的代码的时候,妈妈都问我为什么跪着读代码?
随着 ES 2015的普及我们可以写出很多可读性强且漂亮的代码,那么接下来就带着大家一起学习一下可以把Javascript写漂亮的 变态 语法。
在组织面向对象代码的时候我们通常使用的语法是 :
function Swiper(){
}
原型编程时我们往往会因为语言的无奈写成这样的 :
Swiper.prototype.init = function (){}
Swiper.prototype.render = function(){}
…
这样写丑陋且麻烦,那么如何让我们的代码变得更漂亮,更好用那?
对于JS有一定了解的童鞋可能会这么写,兼容性良好且可以节省大量的代码:
Swiper.prototype = {
constructor : Swiper,
init : function(){
},
render:function(){
}
….
}
这样组织看起来工整一点,但是还会存在不少莫名其妙的属性,constructor是个啥,好像没啥用啊,那么如果我们在项目中加入了类似jQuery 这样的类库,我们的代码就可以变得更加简练,类似于这样:
$.extend(Swiper.prototype,{
init : function(){
},
render:function(){
}
})
但是受限于语法,没法让方法看起来很很清爽,而且要引入一个庞大的类库,那么我们在项目构建时使用babel这样的编译工具,我们可以写成:
Object.assign(Swiper.prototype,{
Init(){
},
render(){
}
})
现在你的代码可以无需任何类库,变得漂亮,优雅。甚至无需使用class关键字就可以让我们的代码变得清晰、耐看,有逼格。
说完了面向对象这个大事再跟大家普及两个极其方便的ES6新特性。
一行式数组去重:
var arr = [1,1,2,3,2,3,4,5,6,7]
arr = Array.from(new Set(arr));
ok数组去重完毕,不再用一大堆逻辑代码处理数组中的重复,不可谓不变态!
让我们的HTMLCollection 可以使用forEach , map ,filer… 等遍历属性 :
当我们选择一组元素想要遍历的时候我们在es5中往往需要非常恶心的for循环语法:
例如 :
var domlist = document.querySelector(.list);
我们需要使用非常恶心的for 循环
for( var i = 0 ; i < domlist.lenght ; i++){
domlist[i]…..
}
恶心的让人欲仙欲死,那么如何让这段代码变得优雅那 ?
domlist = Array.from(domlist)
domlist.forEach( dom =>{
dom….
})
怎么样,是不是代码上了一个台阶的赶脚。
好了,今天的变态语法就暂时说到这里,各位小伙伴,我们下期见。
编辑:千锋web前端
声明:本文部分素材转载自互联网,如有侵权立即删除 。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
暂无评论内容