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 所写即所见,各种花花绿绿的界面效果,可以满足打动作游戏一样的廉价成就感。

  • 相关阅读:
    ubuntu 防止软件包自动更新
    记录一个开头带有&#x的特征数据的解码
    从一次失败的微信小程序抓包、反编译经历中学习反思
    Python爬虫处理奇葩的请求参数payload
    python爬虫
    python爬虫处理在线预览的pdf文档
    python高级—— 从趟过的坑中聊聊爬虫、反爬、反反爬,附送一套高级爬虫试题
    djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记
    django 问题综合
    vue(9)—— 组件化开发
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/9464903.html
Copyright © 2011-2022 走看看