• Angular 服务对象的作用范围


    1.高阶话题:服务对象的作用范围

    声明服务提供者的方式:

    方式1:在根模块中提供服务对象-----在整个应用中服务是单例

           @Injectable({ providedIn:'root' })

           export class TimerService{    }

    方式2:在组件中提供服务对象----在每个组件实例中服务都是有一个实例的

           @Injectable()

           export class TimerService{    }

          ----------------------------------------

           @Component({

                .....

                providers:{ TimerService }

            })

           export class LoginComponent{       }

    注意:项目中只要服务对象中有属性,只能用方式2;否则推荐使用方式1

           

    2. 面试严重加分项:TypeScript

    Angular从V2.x开始使用TS编写;Vue.js从V3开始使用TS编写;

    中文网:http://www.tslang.cn

    TS是由微软编写的一门基于JS又高于JS的编程语言。

    浏览器不支持TS,其使用步骤:

    1.下载TS的编译器

        npm i -g typescript

    2.编写.ts文件,使用编译器转化为.js

        tsc  hello.ts

        //得到hello.js

    TS学习手册:

    https://www.tslang.cn/docs/handbook/basic-types.html

    TS的扩展特性:

    1.TS是强类型语言 ------JS是弱类型语言

       强类型语言的特点:变量、形参、函数都要声明类型

              uname:string

              f1( n1:number ):boolean{

                      return true

              }

    常用的数据类型关键字:string/number/boolean/any/number[]/Object/Date/void

    2.TS对属性和方法成员定义三种访问修饰符:

           private:私有的,私有成员只能在本类内部使用

           protected:被保护的,被保护的成员只能在本类内部及子类内部使用

           public:公共的,公共成员可以在本类内部以及外部使用

    提示:一般情况下,class内属性不应该让外界随便访问,通常设置为private;

    方法一般允许调用的,通常设置为public

    3.访问修饰符的特殊用法

    下述两种用法的作用相同

    1. class Emp{

        private    age:number

        constructor( age ){

               this.age =age

        }

    }

    2. class  Emp{

           constructor( private age:number ){

            }

     }

    4.面向对象编程-------class(类)和interface(接口)

    interface:接口,是一种特殊的类,规范“要求某个class必须具备XXX方法”,如管道里

    必须提供transform方法

    interface Runnable {

          start()            //接口中的方法没有主体!

          stop()  

    }

    ----------------------------------------------------

    class  Car   implements Runnable {

           start(){}        //接口的实现者必须提供指定的方法,要有主体

           stop(){}

            .......

    }

    5.装饰器

    见手册 https://www.tslang.cn/docs/handbook/decorators.html

    面试题:前端体系中有哪些发起异步请求的工具?各自的利弊?

    工具名                                               本质                                                                        优劣势

    原生XHR                            let xhr =new XHRHttpRequest()             浏览器支持的原生技术;基于回调方式处理响应

    JQuery.ajax()                     也是XHR,只是进一步的封装而已              比原生要简单;基于回调方式处理响应;

    Axios                                 也是XHR,只是进一步的封装而已              比原生要简单;基于Promise处理响应;可以                                                                                                               排队、并发、撤销;

    NG HttpClient                    也是XHR,只是进一步的封装而已             比原生要简单;基于“观察者模式”处理响                                                                                                                 应;可以排队、并发、撤销

    Fetch                                  不再是XHR,是W3C提出的新技术,         比XHR从根本上就更加先进;天然基于                                                       有望取代XHR                                           Promise;目前浏览器还有兼容性问题   

      

    "马走日象走田"             ------------------"双炮枪"组合连招

     JS类/接口/原型            ------------------设计模式(23+1中)    JavaScript设计模式(书)

    23中设计模式之一:观察者模式的原理:

    Observable:可被关注的对象,在未来某个不确定的时间点可能抛出特定的事件。

    Subscribe:订阅,建立与可被关注的对象的契约,一旦得到新消息立即会被通知到

    3.Angular官方提供的服务对象-------------httpclient

    HttpClient服务:是Angular提供的用于发起异步XHR请求对象

    使用步骤:

    1.在主模块中导入HttpClientModule模块

        //app.module.ts

        imports:[ BrowserModule,HttpClientModule]

    2.在组件中声明依赖于HttpClient服务对象,就会被自动注入进来

        constructor(private http:HttpClient){}

    3.调用HttpClient实例实现异步请求

        this.http.get( url ).subscribe( (res)=>{ })

    4.面试题:组件的生命周期钩子函数

    手册地址:https://angular.cn/guide/lifecycle-hooks

    Angular中的组件的生命周期钩子函数调用顺序:

    (0)constructor()                组件对象被创建了

    (1)ngOnChanges()            组件绑定的属性值发生改变

    (2)ngOnInit()                     组件初始化完毕-------等同于Vue.js的mounted

    (3)ngDoCheck()                 组件检查到了系统对自己的影响

    (4)ngAfterContentInit()     组件的内容初始化完成

    (5)ngAfterContentChecked()    组件的内容发生变化需要检查

          <myc01><p>{{uname}}</p></myc01>

    (6)ngAfterViewInit()             组件的视图初始化完成

    (7)ngAfterViewChecked()     组件的视图发生变化需要检查

          template:'<p>{{uname}}</p>'

    (8)ngOnDestroy()                 组件即将从DOM树上卸载,适合执行一些资源释放性语句

    ,例如:定时销毁....

           *ng="false"

          

  • 相关阅读:
    字符串----不可重叠的最长重复子串
    字符串----最长重复子串
    字符串----HDU-1358
    字符串----hiho字符串(尺取法)
    字符串匹配(二)----KMP算法
    字符串匹配(一)----Rabin-Karp算法
    字符串----最短摘要生成(尺取法)
    【Hibernate 检索策略】
    【Hibernate 多表查询】
    【Hibernate QBC】
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12169037.html
Copyright © 2020-2023  润新知