JavaScript及AngularJS 1.x版本学习笔记

Posted 2020-10-10

本人学习JS和AngularJS时做的笔记。

JavaScript：

基础知识：

定义变量：var（全局或函数作用域）；let、const（块作用域、不提升变量）；

Tips：直接使用x=1会将x转换为全局变量，严格模式（“use strict”）报错；

数据类型：Boolean、Number、String、Object、Null、Undefined；

布尔值：false、null、undefined、0、NaN、””（空字符串）等价false，其余为true；

比较：===（类型相同，值相同），==（会进行类型转换），对象比较引用地址；

对象：由键值对组成，键会转化为字符串存储，使用”.”或”[]”访问成员；

函数：函数也是对象，函数对象由Function()构造出来；

Tips：Function由自身构造，即Function.__proto__===Function.prototype为true;

声明提升：函数提升（表达式不提升）、变量提升（只提升，不赋值）；

 

作用域：

全局作用域：变量与函数在当前浏览器页面中可见，容易造成命名冲突。

函数作用域：在函数中定义的变量与函数只在当前函数可见。

块作用域：使用let、const定义在块中的变量具有块作用域。

 

构造函数：

与普通函数具有相同特征，使用new关键字创建对象时使用，约定首字母大写。

使用new创建对象时，会将this替换为对象自身，如果作为普通函数被调用，this可能指向全局对象（严格模式报错）。

Tips：this由运行时动态绑定，同Java。

函数对象可以拥有私有成员（局部变量、方法），在函数外部无法访问。

函数对象也可以拥有公共成员（静态成员），只能通过函数对象本身去访问。

 

原型继承：

构造函数拥有prototype属性，prototype为一个对象，定义了此构造函数的实例继承的成员，即实例拥有prototype上所定义的属性和方法（非复制，原型链查找获得）。

实例对象拥有__proto__属性（非标准），实例对象.__proto__===构造函数.prototype。

构造函数的prototype属性对象也拥有__proto__属性，指向其它构造函数的prototype属性，最终指向Object.prototype，而Object.prototype.__proto__===null，此种关系构成一条原型链（单继承），实例对象拥有原型链上的所有属性和方法。

实例对象自身拥有的属性会覆盖原型链上的同名属性（原型链在查找属性时起作用，在修改原型链上非对象属性时会在实例自身创建与修改）。

函数也是对象，由Function()创建，即：函数对象.__proto__===Function.prototype。

原型对象的属性可以在运行时动态更改。

 

Tips：

Object instanceof Function; //true，Object函数对象由Functio()创建

Function instanceof Object; //true，Function对象原型链包含Object.prototype

Object instanceof Object; //true

Object.prototype instanceof Object; //false

 

闭包：

函数内嵌套函数时，内部函数可以访问外部函数私有属性，即使外部函数已经执行完成，如果外部函数返回内部函数本身，就形成了闭包。

每个函数执行时，都会产生新的执行环境（执行上下文），并生成相应的作用域链。

闭包允许内部函数与其执行环境关联起来，即外部函数退出时的作用域仍可以被内部函数使用。

每次调用外部函数都会生成新的闭包。

闭包可以用来模拟私有方法、管理命名空间等。

Promise（ES6标准）：

Promise对象（构造函数）表示一个异步操作的最终完成（成功或失败）情况。

Promise对象的状态不受外界影响，共有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。

Promise对象的状态改变，只有两种可能：从Pending变为Resolved或从Pending变为Rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

Promise.prototype.then(onFulfilled, onRejected)：onFulfilled函数在Fulfilled状态执行，onRejected函数在Rejected状态或异常抛出时执行。

Promise.prototype.catch(onRejected)：用于捕获并处理异常，无论是程序抛出的异常，还是主动reject掉Promise自身，都会被catch捕获到。

then和catch即使未显式指定返回值，它们也总是默认返回一个新的Fulfilled状态的Promise对象。

Promise内部抛出的错误，不会反应到外部，即Promise异常只能被自身catch，不能被外部嵌套的Promise的catch捕获。同时，由于Promise是异步的，try-catch语句也无法捕获其错误（try-catch不能捕获异步异常）。

AngularJS：

Module：

代码封装，保持全局命名空间的清洁；

代码复用。

 

$Scope：

保存数据模型，将模型与视图（ng-model等）绑定；

继承$rootScope等上层Scope；

隔离作用域（指令中创建）

Tips：不要直接在$Scope上绑定值类型对象（子Scope继承时不同步修改值类型）。

Controller：

视图和$Scope之间链接；

嵌套（$Scope继承）。

Tips：不适合操作DOM，尽量维持简单的逻辑、精简。

Directive：

操作DOM；

隔离作用域：

只能在指令内部访问；

Scope只能通过绑定获取外部属性值（@、=、&）；

指令内部只能访问当前隔离作用域中数据。

 

Directive定义：

restrict：指令使用方式，A、E、C、M中一个或多个组合；

priority：优先级，数值越大，指令越先被调用，相同时按顺序执行；

template：模板字符串必须包含在一个根元素中；

templateUrl：外部html文件路径（默认异步加载）；

replace：为true时模板会替换掉指令修饰的HTML元素，否则包含在其中；

scope：

false：使用外层scope；

true：创建继承自外层scope的新scope；

对象：隔离作用域。

transclude：指令修饰的HTML元素内部DOM是否保留（注意ng-transclude作用域）；

controller：可以复用已经定义好的控制器或直接使用函数创建；

controllerAs：控制器别名。

Directive生命周期：

网页加载完成后，AngularJS启动并遍历网页处理AngularJS指令。

AngularJS会将原始DOM（Template）传入到指令的complie函数的参数中。

指令编译执行流程：

compile → controller → pre → post；

compile总在controller前执行，post与pre执行顺序相反；

在compile后生成作用域。

link函数相当于compile中的postLink函数，如果link和compile同时存在，则compile会覆盖link，link函数被忽略。

编译函数负责对模板DOM进行转换。

链接函数负责将作用域和DOM进行链接。

 

路由：

相较于传统的AJAX单页应用（SPA），路由允许为不同的页面内容设置不同的URL，以及提供更好的搜索引擎优化（SEO）。

URL改变并与当前路由相匹配时，会移除原来的视图与作用域，并创建新的作用域与当前视图、控制器相关联。

 

依赖注入：

$injector相当于各种资源的容器，会自动为需要的地方查找并注入相应资源。

如果没有明确的声明，AngularJS会假定参数名称就是依赖的名称，此方法只适用于未经过压缩和混淆的代码。

 

服务：

服务以单例模式存在，在每个应用中只会被实例化一次（被$injector实例化），并且是延迟加载的（需要时才会被创建）。

创建服务：

factory：通过函数创建服务，可以返回简单类型、函数、对象等任意类型数据；

service：通过构造函数来创建服务（创建构造函数对应的实例对象）；

provider：provider可以且只能在配置（config）阶段作为依赖注入，从而实现对使用provider创建的服务进行额外的配置；

constant：可以在配置阶段使用；

value：不能在配置阶段使用。

$q：

$q可以当作Promise构造函数使用。

$q.defer()可以构建一个新的deffered实例。

deffered对象用来将Promise（deferred.promise，与ES6标准有所不同）实例与标记任务状态（执行成功还是失败）的API相关联。

 

$http：

简单的封装了XMLHttpRequest对象，返回Promise。

返回的Promise可以使用then方法处理（回调函数参数为一个对象）或success、error来处理（语法糖，回调函数参数与then不同）。

响应状态码在200和299之间，会认为是成功（调用success），如果响应为重定向，会跟踪重定向的响应结果。其余为失败（调用error）。

$http提供了一些请求的快捷方法（$http.get、$http.post…）。

$httpProvider（或$http）.defaults.headers用来全局地改变Http请求头配置。在$http参数对象中传入相关headers属性会覆盖全局配置，但不会改变全局配置。

 

$resource：

相对于$http，$resource提供更高阶的抽象与服务器交互，隐藏了低层的实现细节。

$resource创建一个资源对象，资源对象包含与服务器通信的方法，可以方便地同支持RESTful的服务器端进行交互。

$resource(url, [paramDefaults], [actions], options)：

url：参数化的url路径；默认条件下，url路径中结尾的“/”会被去掉；端口号中“：”要转义。

paramDefaults：绑定到url的默认参数，如果有多出url路径中的参数，将多出的参数通过?key=value的方式添加到url中。

actions：为资源对象添加新的action（或覆盖默认的action）。

资源对象包含两个HTTP GET类型的方法（get、query）和三个非GET类型的方法（save、remove、delete），以及自定义的方法（actions）。

调用资源对象的方法会创建资源实例，并且立即返回一个空对象（或数组），数据返回时自动填充到资源实例中。

资源实例有$save、$remove、$delete（非GET类型）方法以及$promise、$resolved、$cancelRequest等属性（注意：资源实例调用自身$save等方法返回的对象有所不同）。

 

UI-Router：

UI-Router以状态（state）为核心，每个状态有相应的url、模板、controller等，通过在状态间切换，从而实现对应用特征的改变。

激活状态：有三种方式来激活特定的状态。使用$state.go()方法；点击使用ui-sref绑定的连接；导航到与状态关联的url。

状态继承：子状态可以从父状态继承通过解决器（resolve）解决的依赖注入项及自定义的data属性。当一个状态是活动状态时，其所有的父状态都将被隐性激活。

$stateProvider.state(name, stateConfig)：以指定的名字注册一个状态。通过“.”创建子状态。此方法返回$stateProvider本身，可链式调用。

stateConfig参数对象：

template：模板字符串或返回模板字符串的函数，比templateUrl优先级高。

templateUrl：模板文件路径。

controller：与模板相绑定的控制器，字符串形式可以使用ControllerAs别名；如果模板没有定义，控制器不会被实例化。

controllerAs：控制器别名。

resolve：map对象，包含注入控制器中的依赖，在状态切换完成前执行。

url：与当前状态相匹配的参数化url路径，前面加上“^”表示绝对路径。

views：可以指定多视图，此项设置后templateUrl、template、templateProvider会被忽略。使用@可以定义绝对命名的视图名称，@的前面是视图的名称，为空表示未命名的ui-view；@后面是状态的名称，为空表示相对于根模板，通常是 index.html。

data：为当前状态定义的数据，可以被子状态继承（原型继承）。

abstract：抽象状态不能被直接激活，提供继承使用。

$stateParams：对象，属性为参数化url中相应的参数。

只有当状态被激活且状态的所有依赖项都被注入时，$stateParams对象才存在。在resolve函数中不能使用$stateParams，可以用$state.current.params来代替。

在状态的控制器中，$stateParams对象只包含那些在本状态中定义的参数，不能访问在其他状态或者祖先状态中定义的参数。

$urlRouterProvider：负责编译state中的url、匹配url变换等。

otherwise(rule)：设置url不匹配时重定向的url路径，参数为字符串或返回url路径的函数。

rule(rule)：可以使用此方法对url做一些转换等操作。

when(what, handler)：为给定的路径注册一个处理行为。如果handler是字符串（url），则重定向到该路径。例如，如果希望空的路由重定向到“/inbox”路由中，代码为$urlRouterProvider.when(‘‘, ‘/inbox‘)。