Angular 2中导入语句的顺序

乔纳森·奥茨

Angular Style Guide提到导入行距:

  • 考虑在第三方进口和应用进口之间留一条空白。
  • 考虑列出由模块按字母顺序排列的导入行。
  • 考虑按字母顺序列出变形的导入符号。
  • 为什么?空行将您的内容与他们的内容分开。
  • 为什么?字母顺序排列使读取和定位符号更加容易。

纵观包括Angular本身在内的许多Angular项目,惯例是先导入Angular(@angular)模块,然后再导入第三方模块(例如AngularFire2),然后再导入我们自己的模块(服务,组件等)./some-service.ts

再次看起来,导入服务,然后是模型,然后是组件是惯例。

但是接口和管道等呢?导入“无名”或通配符模块(例如Firebase SDK或RxJs运算符)的约定是什么?

例如:

导入RxJs运算符的示例服务

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import 'rxjs/add/operator/take';
...

要么

import { Injectable } from '@angular/core';

import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';
// `GridMetadata` is an Interface
import { GridMetadata } from './grid-metadata';
...
乔纳森·奥茨

实际上,查看Angular代码库并更好地理解指南,就可以找到答案。

“考虑在第三方进口和应用进口之间留一条空白。”

这仅需要一个示例来解释它:

// Core imports
import { TestBed, async, inject } from '@angular/core/testing';

// Third party imports
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

// Application imports
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';

“考虑列出由模块按字母顺序排列的导入行。”

将“模块”视为“来自”之后的部分。模块包含要导入的符号。

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';

符号是什么都没有关系。重要的是,导入行必须按模块的字母顺序排列。例如

  1. angularfire2 / auth
  2. Firebase /应用
  3. rxjs /接收
  4. rxjs /添加/可观察/的
  5. rxjs /添加/运算符/捕获

在Angular代码库中,很明显小写字母在大写字母或大写字母之后列出,因此:'rxjs / Rx''rxjs / add / observable / of'和'rxjs / add / operator / catch'之前列出

“考虑按字母顺序列出变形的导入符号。”

import { TestBed, async, inject } from '@angular/core/testing';

import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

将“解构的导入符号”视为从其父模块中提取的导出符号。在此示例中,AngularFireAuth,Observable,TestBed,async和inject都是已解构的导入符号。

同样,顺序按字母顺序排列;先大写,然后大写,再小写。这是Angular代码库中的一个很好的例子:

import {CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, Inject, Injectable, Injector, Input, NgModule, Optional, Pipe, SkipSelf, ɵstringify as stringify} from '@angular/core';

导入服务,管道,模型,指令或组件等似乎没有特定的顺序。查看Angular代码库

注意,父目录中的模块是在距离它们更近的模块导入之后才导入的。

import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { abc } from '.../abc';

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章