这几天用ng5做了一个俄罗斯方块
为什么要做这个东西呢?
嗯 为了证明自己会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
这几天用ng5做了一个俄罗斯方块的更多相关文章
- 做了一个sublime text插件
做了一个sublime text插件,可以方便地查看C++/python的调用图.插件的演示视频在这里: http://list.youku.com/albumlist/show?id=2820226 ...
- 做为一个前端工程师,是往node方面转,还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- PHP MVC简单介绍,对PHP当前主流的MVC做了一个总结
东抄西抄,对PHP当前主流的MVC做了一个总结PPT. 希望对初学者有点帮助! PHP MVC初步.ppt
- 用MVVM做了一个保存网页的工具-上篇
前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...
- php大力力 [042节] 今天做了一个删除功能
php大力力 [042节] 今天做了一个删除功能 if(isset($_GET['action'])){ if($_GET['action']=="del"){ $sql = &q ...
- 做了一个简易的git 代码自动部署脚本
做了一个简易的git 代码自动部署脚本 http://my.oschina.net/caomenglong/blog/472665 发表于2个月前(2015-06-30 21:08) 阅读(200 ...
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- 利用SCI做的一个足球答题系统
SCI,异步串行通信接口,内置独立的波特率产生电路和SCI收发器,可以选择发送8或9个数据位(其中一位可以指定为奇或偶校验位). SCI是全双工异步串行通信接口,主要用于MCU与其他计算机或设备之间的 ...
- 高仿“点触验证码”做的一个静态Html例子
先上源码: <html> <head> <title>TouClick - Designed By MrChu</title> <meta htt ...
随机推荐
- MyBatisPlus中updateById与updateAllColumnById方法区别
实现 updateById方法在插入时,会根据实体类的每个属性进行非空判断,只有非空的属性所对应的字段才会出现在SQL语句中. updateAllColumnById方法在插入时,不管属性是否为空,属 ...
- Mybatis-plus 简单使用
Mybatis-plus 特点介绍: 1.无侵入:只做增强不做改变,引入它不会对现有工程产生影响 2.强大的CRUD操作:内置通用Mapper.Service,仅仅通过少量配置即可实现单表大部分CRU ...
- Qt音视频开发20-vlc内核动态保存录像文件(不需要重新编译源码)
一.前言 在vlc默认提供的保存文件方式中,通过打开的时候传入指定的参数来保存文件,直到关闭播放生成文件,这种方式简单暴力,但是不适用大部分的场景,大部分时候需要的是提供开始录制和停止录制的功能,也就 ...
- 鸿蒙OS创新实践:动态声控话筒开发指南
前言 在鸿蒙OS的生态中,开发者们不断探索和创新,以期为用户带来更丰富的交互体验.最近,我萌生了一个想法:制作一个能够随着声音动态变化的话筒组件.尽管网络上缺乏现成的参考案例,但我决定亲自动手,将这一 ...
- [转]基于图像的三维模型重建4——增量SFM
内容 几种BA的形式 同时优化相机和三维点 优化相机 只优化三维点 单目相机 增量运动恢复结构(Incremental SFM) 运动恢复结构的几个问题 几种BA的形式 数学模型 n个三维点和m个相机 ...
- [转]fatal: remote error: The unauthenticated git protocol on port 9418 is no longer support问题解决
背景 因为居家办公,把代码从远程clone下来之后,发现使用npm install一直失败. 提示的错误:fatal: remote error: The unauthenticated git pr ...
- 一篇文章弄懂 JavaScript 中通过import导入模块的原理
原文链接: 1.import 2.彻底理解JavaScript ES6中的import和export 3.JavaScript ES6中export.import与export default的用法和 ...
- [转]java中带图片按钮的大小设置
在java部分需要用到图形界面编程的项目中,经常会使用图片设置对按钮进行美化,但是使用时会出现一个很麻烦的问题,那就是按钮的大小默认按照图片的大小来显示,这大大降低了界面的美观程度: 按照方法: JB ...
- new idea
如何我希望将url链接作为大语言模型的输入,同时通过大模型的能力来学习与认识url网页链接中的文本.图片.语音等元素,应该怎么做? 要将URL链接作为输入来学习与识别URL中的文本.图片.语音等元素, ...
- 分库分表(1) --- ShardingSphere(理论)
ShardingSphere---理论 ShardingSphere在中小企业需要分库分表的时候用的会比较多,因为它维护成本低,不需要额外增派人手;而且目前社区也还一直在开发和维护,还算是比较活跃. ...