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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vuex与组件联合使用的方法
May 10 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
canvas的神奇用法
2017/02/03 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
自主招生自荐信
2013/12/08 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
期中考试反思800字
2014/05/01 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015入党自传书范文
2015/06/26 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
各国货币符号大全
2022/02/17 杂记