2018年前端总结

 

总结者，先回顾，然后再梳理这一年的所做所得和所欠缺。

 

 

所涉及的技术体系：

一：.原本是react体系的，然后进入了一家是angular2体系的公司，基本这一年侧重于写ng的项目

 

纯干货地址：https://www.bilibili.com/video/av16953560 

2.typeScript语法的接入，嗯，也不难，注意声明类型，而后在使用

3.说两个开发中常用的技巧，

 a.界面*ngFor 在对应的标签上，需要设置一下key值，另外，循环的是一个数组，如果后端返回是object会报错

b. 界面取值尽量做非空处理{{item.name ? item.name : '暂无会员'}}，不过这样写有人觉得不友好，我也没论证过，希望以后可以得到答案

c.关于如果动态创建一个选项，这个效果可以参考一下我的一篇博客，记住一个理念：用数据来做驱动，有这个思想那么基本就有好的思路了：https://www.jianshu.com/p/6b13e70d79c0

d。关于获取自定义属性的值的问题，也是参考一篇博客：https://www.cnblogs.com/zxyun/p/9487797.html

e. 所谓一人计短，二人计长，多和自己的同事朋友交流技术，遇到问题多向优秀的人请教，有热心的朋友帮忙解答了，记得说声谢谢！即使没能帮到，也记得说一下谢谢！这个社会已经够冷漠了，希望技术领域还是多一点暖心的东西吧！

 

二：.其中还迭代了三个小程序项目，有兴趣的可以搜来玩玩

铲屎官助手：二维码

1.一切的起源来源于界面，这里需要推荐一下flex弹性布局，这也是今年需要去学习掌握的一个技能，毕竟有时候写界面一个水平垂直剧中要写很多样式，或者一个左右布局用float，又或者要写适配多屏等

2.有空可以看看小程序社区，里面有很多很有意思的问题，包括一些你会遇到的坑，里面也有大神在解答，

3.说几个会用到的东西：https://www.jianshu.com/nb/26332766  自己找吧，基本都是项目常用的

4.说两个需要注意的细节问题：wx:if="{{}}' 这里大括号要带上，由于写了ng的*ngIf=‘’  有时会弄混，小程序里面没有大括号无法进行界面取值操作，另外一个是写for循环的时候，item项，不要用{{p}}来作参数，本人猜测这个是个关键字，界面会无法获取到值

5.可以多多跟进一下官方api，里面有些新特性自己写写，比如我用到一个小程序自动生成二维码的插件，也挺有意思的。

6.最后就是一些开发细节了，比如界面一般会按照正常流程走（接口返回有值），也需要自己去处理，界面没有值的情况，用我一个老师的写法叫做空守卫（估计是打篮球打多了，）。

 

卖点小程序（参与维护）：二维码

 

西婵美容：二维码

 

三：.接触了一下ionic3

1.嗯，目前这块的资料真的很少，特别是一个完整可以跑的项目简直叫做没得，项目由于被其他项目耽搁了，目前只有一个大概的项目架子，里面有很多三方插件没有具体的使用过。

2.希望有用过的朋友多写点博客，或者分享一下项目经验吧

 

四：，用apiCLoud开发了两款App，这里吐槽一下，联调比较麻烦，有些控件由于微信升级了，控件不支持多图片分享，总体来说，接入到开发到上线还是比较快速的，如果能更好的支持浏览器调试就更好了，由于里面封装了原生组件，出了问题调试很麻烦。

 1.这个技术适合快速迭代，最理想的做法是全部用api的模式来写东西，用内嵌html的模式做兼容适配比较麻烦，就是单独去学那块的东西需要花时间与精力

 

五：.写写H5的界面，基本界面都是h5了，不过一些新出的标签特性还是很强大的

 1.video标签，使用的时候不要在dom上绑定，这样绑定的无法直接播放，建议获取数据后，从js里面渲染到界面，这样就可以直接播放了

2.进度条标签，很好用 ，样式的话自己找一下，也很好弄，颜色哪些都是可以控制的

progress 

<progress max="100" value="0" id="pg"></progress>


var pg=document.getElementById('pg');
 setInterval(function(e){
      if(pg.value!=100) pg.value++;
      else pg.value=0;
},100);

 

 

六：.还是要多看看优秀的人写的项目和代码，有时间多看看技术博客。

 

七：个人在开发中关于git的一点心得：

https://www.jianshu.com/nb/31867840