本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验。

先简单讲讲从ng1到ng2框架下组件的职责与地位:

ng1中的一大特色——指令,分为属性型、标签型、css类型和注释型。其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一。在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画。而属性型指令则用于完善组件的功能,比如接收用户输入、响应用户点击等事件。其实ng2中内嵌的许多功能都是属性型指令——ngFor、ngIf等等,而对于组件来说比较依赖具体的项目,所以跟适合基于项目来使用组件写出一个个用户看得见的界面来。同时组件还需要与路由打交道,前端路由可以看成是动态更改DOM,在ng2路由中制定好规则后,其实就是在动态渲染或销毁不同的组件,以此实现前端页面的切换。

然后讲讲笔者前面的项目时如何使用ng2组件搭起一个网站的:

1. 照着官方的做法,每个应用得有一个根组件。

2. 区分前端路由,每个路由条目指向一个组件,每个组件各自渲染一个页面。

3. 项目扩大,单模块不能满足业务分类,所以先由根路由引导懒加载各个子模块,然后由子模块的子路由各自指向具体的子组件,并渲染各自的页面。

4. 着眼单个子组件渲染的单个页面,其实可以将一些可重用的标签块封装到一个新的组件里(比如需要ngFor遍历的复杂数据项)。

5. 发现其实有一些组件(比如侧边按钮或消息模态框)其实整个项目都可能使用到,得把这些封装成全局共享的组件。

到现在自己都觉得有一点乱,究其原因,应该是组件这个名称的问题,因为在ng2框架下,大到路由页面小到数据条目全都用的组件,声明方式全都一个模样,难免会乱。

没办法只能自己来给组件继续细分类别了,笔者于是把ng2的组件分成了四类:

  • 页面组件

    • 与路由打交道,只关心匹配路由规则渲染界面,此类组件在声明时不需要 selector 参数(只由路由定位不需要具体标签)
    • 接收路由参数或resolve数据,尽量不做其他业务交互的请求,且不设Input、Output变量
  • 布局组件
    • 用于细分页面的模块若页面较简单可以省去直接使用单位组件,必须有具体的selector参数因为要在页面组件中使用
    • 不负责获取路由或resolve数据,且尽量不请求数据而通过Input传入数据或Output响应事件,所有业务交互请求尽量在布局组件中完成(不至于像放在页面组件中那么乱,且各布局组件可以做到互不影响)
  • 单位组件
    • 必须有自己的selector,一般在自己模块中可重用,通过各种属性型指令修饰自身
    • 用于简化单位级别的重复标签,比如获取的列表数据中的每个数据项的界面展示就可以封装成一个单位组件
    • 只负责通过Input传入数据并显示,以及通过Output响应事件到外层的布局组件或页面组件中处理
  • 共享组件
    • 必须有selector,整个项目都共享的组件,实现比较自由,重在减少整个项目的重复代码并方便维护
    • 比较合适的比如消息弹框,加载进度条等
    • 大部分的属性型指令,其实功能一般都比较通用,可以与共享组件等同对待,只不过共享组件拥有具体视图而共享指令只用于实现通用功能

如果纯文字不够形象,笔者再给出自己画的简易版ng2超级无敌前端架构图:

讲来讲去其实这里面完全没有技术难点,只是在暗示着一件事——项目目录安排很重要。

ng2可不认识笔者给它细分的这么多类型的组件,这些分类是给自己看的,具体的体现就是以这个分类体系得出的一个项目目录结构。

以笔者自己在写的一个项目为例:

笔者给文件夹命名前面有的加上了加号有的加上了减号,也算是自己的一种看似奇怪的目录结构安排了。

解释一下就是:最外层这个+term代表整个懒加载模块的目录,里面带加号的目录下的组件代表是页面组件,什么符号都没有的代表是布局组件,带减号的目录下的组件代表是单位组件,单位组件可能在整个懒加载模块中都使用到,所以直接在懒加载目录的最外层,而布局组件都在具体的页面组件同级目录下。

总结就是抛开ES6与TypeScript的外表后ng2组件的使用在技术上难点不算多,本文纯粹是一点拙劣的经验之谈,当然笔者目前的经验还远远不足,希望在日后的开发以致研究透彻ng2源码后能有更深的见解。

Angular2开发拙见的更多相关文章

  1. Angular2开发拙见——组件规划篇

    本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...

  2. angular2开发01

    // */ // ]]> angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准 ...

  3. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  4. windows 搭建 angular2 开发环境--白纸新手可以参考一下

    初次接触angular,感觉接触一项新的东西真的是很艰难,自从听我朋友说起angular,就对这个东西产生了一些兴趣,就开始研究,经过艰辛的各种查资料各种头痛,终于是把这环境给搭上了·最起码是可以运行 ...

  5. Angular2开发笔记

    Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...

  6. [Angular2]eclipse中angular2开发环境的搭建

    本文作者:苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan 环境准备 1.eclipse neon 2.网络连接 插件地址 eclipse的插件市场地址: htt ...

  7. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  8. SpringBoot+Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675

  9. Linux系统下安装Angular2开发环境(Ubuntu16.0和deepin)

    说明下,以下过程都是在ubuntu16.0系统下,win系统环境下的安装过程更简单,基本上可以仿效此环境来,除了不用配置系统命令(win下自动可以),node安装是exe程序,一键安装.另外,这里面像 ...

随机推荐

  1. find the Nth highest salary(寻找第N高薪水)

    Suppose that you are given the following simple database table called Employee that has 2 columns na ...

  2. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  3. jsp 使用Common-FileUpload组件文件上传及限制上传类型

    1.将commons-fileupload-1.3.3.jar复制到Web应用的lib文件夹下,在WebRoot目录下创建limit.jsp页面,在该页面中添加一个文件域的表单,设置类型为    mu ...

  4. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. fileZilla 设置 记录一笔 以防忘记

  6. h5 测试关注点

    原文链接:http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool&utm_med ...

  7. 【详细资料】ICN6211:MIPI DSI转RGB芯片简介

    ICN6211功能MIPI DSI转RGB,分辨率1920*1200,封装QFN48

  8. 多路复用(select、epoll)实现tcp服务

    -------------------------------多路复用的服务器(select)------------------------------- 网络通信被Unix系统抽象为文件的读写,通 ...

  9. java内存区域分析及java对象的创建

    java虚拟机在执行java程序的过程中会将它管理的内存区域加分为若干个的不同的数据区域. 主要包括以下几个运行时数据区域,这里就只介绍经常会用到的 1:java虚拟机栈:我们常说的堆栈,栈就是指的j ...

  10. python 魔法方法(学习过程的笔记)

    有小伙伴会问,什么是python的魔法方法,python的魔法方法有什么用呢, 它们在面向对象的Python的处处皆是.它们是一些可以让你对类添加"魔法"的特殊方法. 它们经常是两 ...