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 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
Mar 01 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
js函数调用的方式
May 06 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
angular多语言配置详解
May 16 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
详解JavaScript 作用域
Jul 14 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php文件上传简单实现方法
2015/01/24 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python getpass实现密文实例详解
2019/09/24 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
会计专业自荐信
2013/12/02 职场文书
数学国培研修感言
2014/02/13 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
爱之链教学反思
2014/04/30 职场文书
保护环境倡议书300字
2014/05/19 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers