专栏首页狮乐园高级 Angular 组件模式 (1)

高级 Angular 组件模式 (1)

写在前头

Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的angularjs,在实际工作中实施了公司几个比较重要项目中前端的重构工作,这个过程逐步意识到,对于MVVM框架本身,在使用层面讲,掌握一些通用的模式是很有必要的,尤其现在已经很流行的组件化开发。这样我们在实际工作中就可以无缝(或者花很少的时间成本)转化到任何的MVVM框架,并把节省下来的时间去学习新的知识。

最近一直在关注Angular In Depth的博客,偶尔看到这个系列的文章,觉的质量还挺高,所以抽空余时间翻译并分享给大家,并在每个文章后面加了一点自己的拙见,希望可以达到抛砖引玉的效果,如果观点有误,还望各位看官轻喷。

01 Build a Toggle Component

原文: Build a Toggle Component

Kent C. Dodds Advanced React Component Patterns那样,我们将使用一个相对简单的<toggle>组件来说明这些模式。<toggole>组件的职责是仅仅是管理一个简单的布尔值状态属性: on。使用如此简单的组件进行说明的目的,是因为我们可以将更多的注意力投入到相对组件本身而言较复杂的模式中。

经过这一系列文章,我将提供包含完整功能的、可运行的演示代码链接。你仅仅需要将注意力集中到app文件夹和toggle文件夹。toggle文件夹包含一些可复用的库(一系列组件),当然这个库会随着文章的深入而改变。app文件夹并且特别是app.component.html,将针对库在不同的情形下的使用做出相应的改变。

我们将从最原始的toggle组件版本开始。它仅仅有一个使用了@Input()装饰器的on属性,这个属性所控制的状态代表组件本身的开关状态,同时它还有一个是使用了@Output()装饰器的toggle事件发射器,这个事件发射器会在组件开关状态改变的情况下,通知父组件。

在我们开始下一个话题02 Write Compound Components之前,可以在在线代码仓库看看这个组件的实现以及演示。

译者注

toggle组件的实现是一个很典型的利用单向数据流作为数据源的简单组件:

  • on是单向数据源,同时代表组件内部的开关状态
  • toggle`是事件发射器`,以回调的方式将on状态的变化传递给父组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • liferay-portlet-container

    portlet是portal中最常用的组件了,所以也来山寨一个70版本的portlet container的UI吧。

    littlelyon
  • 高级 Angular 组件模式 (2)

    我们需要实现的需求是能够使使用者通过<toggle>组件动态的改变包含在它内部的内容。

    littlelyon
  • 高级 Vue 组件模式 (1)

    去年,曾经阅读过一系列关于高级 react 组件模式的文章,今年上半年,又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章,碰巧最近接手了一个...

    littlelyon
  • 知乎 Android 客户端组件化实践

    知乎 Android 客户端最早使用的是最常见的单工程 MVC 架构,所有业务逻辑都放在了主工程 Module 里,网络层和一些公共代码分别被抽成了一个 Mod...

    用户1269200
  • 系统架构师论文-基于构件的软件开发

    2007年上半年,我参加了某市信息办技术服务平台的项目开发,担任系统平台的设计和开发工作,该项目主要为了支持某市党政机关专网的二期建设所开发设计的,它是一个在线...

    cwl_java
  • VUE-组件化

    在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。

    cwl_java
  • 前端面试宝典(五)—— Vue

    MVVM是Model-View-ViewModel的简写,Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI...

    萌兔IT
  • 浅入深出Vue:组件

    这三部分会在接下来的章节中一一实践,在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。

    若羽
  • React数据流和组件间的通信总结

    首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

    前朝楚水
  • 【美团技术团队博客】前端组件化开发实践

    前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

    美团技术团队

扫码关注云+社区

领取腾讯云代金券