Angular2开发——组件规划篇


Posted in Javascript onMarch 28, 2017

本文集中讲讲笔者目前使用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超级无敌前端架构图:

Angular2开发——组件规划篇

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

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

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

Angular2开发——组件规划篇

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

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JQuery 常用操作代码
Mar 14 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
vue 如何使用递归组件
Oct 23 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 #Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 #Javascript
JavaScript实现分页效果
Mar 28 #Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 #Javascript
TypeScript入门-基本数据类型
Mar 28 #Javascript
You might like
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python绘制立方体的方法
2018/07/02 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python读取与处理netcdf数据方式
2020/02/14 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
车贷收入证明范本
2014/01/09 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
音乐学专业求职信
2014/07/22 职场文书
市场部岗位职责范本
2015/04/15 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫