博客列表 >这几天用ng5做了一个俄罗斯方块

这几天用ng5做了一个俄罗斯方块

子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong
子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong原创
2018年03月29日 20:42:11845浏览

为什么要做这个东西呢?

嗯 为了证明自己会ng吧,最主要的是这几天的工作全是静态页,实在无聊枯燥的很。当然了,肯定还有其他妙不可言的原因,这里不想说出来。

我也忘记我是什么时候有想到用ng做俄罗斯方块的了,但能想到的原因有两个,其一: 目前前端界流行的三大框架中,唯一具备完善的模块系统的,只有ng,只有ng,只有ng!怎么说呢,关于这三个框架的区别,有个人讲得特别好:

React:服务员牵来一头牛,给了顾客主厨刀、削皮刀、剔骨刀、片刀、砍刀、美工刀……堆满在桌上,笑道,请享用!顾客一脸懵逼,但看到邻桌的老大爷用挥舞双截棍的姿势使用美工刀切出一块完美的牛排,于是也模仿起来。后来他住院了。 
Angular:服务员端上牛排和餐具,笑道,请享用!顾客吃得正开心,服务员又端来一块牛排,笑道,我们有新版本的牛排,请您务必重新开始吃,但食用前请将你您刚吃下的牛排吐干净。 
Vue:这间餐馆的装修和上面两家有很多地方都一模一样,但是到处都贴着大大小小的横幅:我们这家比上面两家都好! 
---大漠穷秋


嗯就是2017年撕逼的那个男人,上面他说的这些ng除了 1 -> 2 的时候变化特别大之外,ng就真的找不到其他缺点了。react:很好的UI,一旦跨组件通信,自身就根本不完善,只能借助redux。vue不做评价。

其二是因为,前几天研究vscode插件开发的时候阴差阳错的打开了vscode的开发者工具,我看到在编辑完成这一行的时候,当光标移开之后,这一行似乎就消失了,于是我联想到 能不能在开发俄罗斯方块的时候可以使运动中的形状实际显示的形状分开成为两个组件。

当我开始写这个项目的时候大体上整个流程我脑子里边已经过了一遍,后续的开发只是百无聊赖的各种判断和处理实际开发中遇到的bug。

截至目前(2018-3-30 17点)一共完成了三个形状的组建的开发,一共用了差不多两天的时间。如果用原生js完成的话估计代码量至少会翻一倍,时间成本估计也差不多,ng为我处理了一些极其细微又容易重复的操作,诸如,这个项目中对元素的显示隐藏操作看点很频繁,而这一点我却一点都不必费神,还有容器组建的渲染如果使用原生js开发,一定会很麻烦。或许这就是我要使用ng的另一个重要原因把。

我不知道应不应该把项目开发中遇到的坑记录下来,因为前端技术更迭的太快,以后有没有ng都说不准,不过还是多少记一下把,毕竟有些坑 还是真的坑啊。

  • 首先是指令,组件都需要在根模块里边声明,我相信绝大多数人会声明组件,而忘记声明指令,另外动态组建,需要在跟模块里声明为  entryComponents  

  • 再说说动态组建,动态组建使用的时候要有载体,载体可以使用viewchild配合指令获得,有了载体之后需要使用  componentFactoryResolver的resolveComponentFactory方法装载,最后使用载体的createComponent方法装载组建。说起来实在很繁琐不如直接看我github

  • 动态组建装载之后可以拿到他的实例对象然后就可以进行一系列操作了。

  • 另外就是keydown和keypress事件的坑了,这当然不算ng的坑,最后解决的方案是给document和绑定事件,并通过bind方法改变this。

基本的坑就是这些啦,以后能想到再说吧!



想说的有很多,无奈五年的老伙计是在卡的不行,只能先到这儿了,以后有机会再补充。

2018-03-29 20-42

我感觉想说的已经说完了

2018-03-30 17-43

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议