zoukankan      html  css  js  c++  java
  • 一些angular/js/ts的坑和吐槽

    ------20190318 -------------

    回头看,很多槽点已经随着升级改掉了
     

    绑定string字面值到子组件@Input 

    <app-overlay-static [name]="'marsh'"></app-overlay-static>

    双引号+单引号。表示string的字面值。

    不常用,因为通常是父组件遍历自己的属性,或者传自己的属性给子组件

    更常见的是:只有双引号:

    [子组件@input] = 父组件的属性

     

    #--------------------------------------------------------------

    周末想随便写点前端。以前确实没正经写过,但是好歹写过几笔。本来以为没啥难度,结果没想到细节充满蘑菇,哦,不对,魔鬼。

    几乎是寸步难行吧,体验极差,简直怀疑自己老了,撸不动代码了。

    让我感觉到了原始人突然进入现代世界后,感觉到的满满恶意。

    这充分说明,工程问题是个时间积累过程,会者不难,难者不会。

    一个陌生的技术领域,哪怕对老手来说再容易,但只要你本人没做过,就不得不去从最简单的“各种问题”一点点地笨拙地学习。

    当年难倒我起步学电脑的,都不是键盘指法,也不是记命令和关键词,而是不会开、关机、不会进GUI。(包括:找不到开始菜单,不会关win8; linux下不会退出vi)

    面对各种电器、遥控器,哪怕再简单,不认真看说明书,就是点不亮 ,玩不转。

    ——就好像不会念咒语,魔法就不会生效一样。

    angular 的接口变化太多,太快

    1年前,好像只是ng2,现在莫名其妙都6了,当时我感觉文档啊,接口啊还都可以(因为angularJS 没用过)。

    结果现在又变出各种花样。

    几个问题:

    1 不让console.log()

      解决:在tslint.json里 有个“no-console”字段,把里面的true改成false

    2 不让git push

       说是 stylelint  不知道如何处理scss。结果直接报错,无法和remote同步,这什么鬼!

      这个问题坑了我半天,各种尝试stylelint git 各种关键词搜索,都搞不定,最后自己发现:

      在package.json里 :“scripts” 有一行“prepush”:“npm run lit:ci” 删除掉就OK。

    老子没工夫为所谓的语法规范问题多费脑子,TM明明能运行也不报错,不让我提交git什么鬼。

    我写后端都没这么变态,都是提交了代码,然后ci去运行ut,没听说不让提交的,前端嚣张什么,删了。

    3 Http 还是 HttpClient?

       想写一个读mock json数据的service。官网Hero那个不是太明白

       网上很多文档 写的是

           import { HttpModule } from '@angular/http';

        

       但其实 现在是

        XX.module.ts里

         import { HttpClientModule } from '@angular/common/http';
        .....
         imports: [
         HttpClientModule,]

    然后YY>service.ts是

    import { HttpClient } from '@angular/common/http';
    ....
    export class ZZZService {
      this.list_data;
      constructor(private http: HttpClient) { 
        this.http.get('assets/mock-data/mock.json').subscribe(
          data => {
            this.list_data = data;
            // console.log(data);
          });
    
      }

    要注意,http.get 返回的是个observable对象,后面必须subscribe 里面写data=>{} 这种回调函数。

    吐槽:

    1 两个不同地方都要import类似的东西,但名字还不一样,一点都不SPOT。

    2 constructor里参数列表 要塞进这个类型的东西。以上种种,极大抵消了DI的所谓优势。也就是构造函数调用,传入http对象这步省了点。

    angular-cli.json ->angular.json

    这个没什么可说的,猜出来的。

    总的感觉ng2之后的接口还是不太稳定,直接导致网上的文档,提问回答不是太能满足需要。尤其是对我这种不一直关注前端的新手。

    真是觉得接口变化太快的玩意,学起来量力而行吧,贬值太快,真有点M$的风范。

    真不如python和lisp(只要不涉及macro和不同方言的语法糖)。

    唯一感觉到正面的变化是,创建component和service,现在是通过命令行cli替你生成那些一堆堆废话代码文件和命名:

    ng generate component heroes
    ng generate service hero

    感觉稍微好一点。

    但我还是不喜欢这种到处是各种配置文件,各种文件命名规范(动不动lint就报错),到处修修补补的写法。

    在ts中引用js模块

    主流的热门的,可以 npm install @types/XX

    然后才可以 import * as XX from ‘XX’

    非主流的js模块,得自己写.d.ts文件,声明各种到处类型。有个typings 但没用起来。遇到那种只有一个min.js的,没法弄,放弃吧。

    js的Date  月份从0开始

    明明 构造函数是 new Date(XX,XX,XX)这种样子,谁TM能想到 月份居然是 0-11。

    没想到还真是个话题,2018年2月,JS之父Brendan Eich就提过这件事,「去怪Java」这话也是Brendan自己说的。

    https://www.zhihu.com/question/263804983

    好吧。。。反正在python里,且不说pendulum arrow这些,就TM自带的datetime也不知高到哪里去了。

    ——还有些小坑,就懒得写了。

    总得感觉:

    1 前端技术发展快,同样的功能,实现方式多样,各种库太多。 但是质量低,稳定性差。很难说哪个是坑,哪个不是。

    2 即使有框架支持,但是写程序时感觉注意力十分破碎,十分不爽。要到处改各种配置文件(tsXXX.json好几个,其他.json好几个,XX.ts还有好几个,每个component也是一样,还要不时在module里加几句),然后各种坑,各种库,官方文档不够看,完全离不了Google StackOverflow 。

    感觉注意力不集中,比刷微博,刷朋友圈感觉还破碎。没有写其他代码时那种专心,安静,很容易进入“心流”的感觉,十分不舒服。

    修修补补,一句一句地堆代码。如果说同样是往屎山上抛屎,写后端的感觉是整坨整坨自己拉,写前端是要不断换各种开塞露和其他各种工具,然后东拉一点,西拉一点(.ts .js .json  .html .css)。

    3 各种固定搭配式的需要记忆的配置,和互相关联的改动点(简单import个东西都要改好几处),适合记忆力好,耐心好的女生。“互联网的性别是女性”,我服,特指前端。

    4 写出来的代码imperative式硬堆出来的更多些,而且确实,不就是个界面嘛,与其精心设计,还不如硬堆出来完事。

    5 异步啊,响应时间啊,css外观 这些非功能需求,我根本不在乎。没必要纠结这些。

    6 既然技术本身都不稳定,也不值得我多费心思了。

    前端有个ts,angular这样的框架在类型检查,封装隔离方面起点辅助作用,保证不出大错(没有全局变量,全局作用域,好多了)。

    这就够了,把后端写好,前端本着"拥抱变化,撸完即扔"的心态,凑合着撸撸就完了。

    写前端的唯一优点:

    1 治愈求完美的强迫症。

    2 所写即所见,各种花花绿绿的界面效果,可以满足打动作游戏一样的廉价成就感。

  • 相关阅读:
    permission 文档 翻译 运行时权限
    TabLayout ViewPager Fragment 简介 案例 MD
    Log 日志工具类 保存到文件 MD
    OkHttp 官方wiki 翻译 MD
    Okhttp 简介 示例 MD
    OkHttp 官方Wiki之【使用案例】
    DialogPlus
    倒计时 总结 Timer Handler CountDownTimer RxJava MD
    RecyclerView 判断滑到底部 顶部 预加载 更多 分页 MD
    CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/9464903.html
Copyright © 2011-2022 走看看