关于前端组件化开发的一点思考

前端开发与其他程序开发的共性在于,同样要求“高内聚,低耦合,易读写,可复用”。

“高内聚”是指将在逻辑上可以归类为一个单元的代码封装在一起,尽量保障一块代码集合主要解决一个需求,在前端开发中,最常见的便是将一个逻辑单元的代码使用IIFE函数进行封装。

可以说,保障代码高内聚即在一定程度上满足了代码“低耦合”的要求,因为低耦合即是要求一个逻辑单元的代码块在改动时,不会造成其他逻辑单元代码块的变动,在前端开发中,即是要求各代码块不要过多共享某变量或对象,在不得以的情况下,一定要清晰注释。

“易读写”是指保持代码的可读,可修改性,即在一定时期后,后来的开发者依然可以凭借阅读代码的方式,了解你的编程思路,并根据新的需求,修改你留下的代码。这里牵扯到良好的代码缩进,命名规范,注释等。

“可复用”是指处于节省程序员生命的目的,遵从DRY原则,在一个项目中,抽象出功能类似的业务需求,通过组件化的方式编写代码,实现只写一次,到处使用的令人愉快的目的。

--------------------------------------------------------

组件的构成:

  1. 代码层面: HTML(结构)+ JS(逻辑) + CSS(样式)

  2. 使用层面: 需求配置参数 + 实例化相应组件对象

下面贴一张我自己总结的关于组件化开发的脑图:

时间: 2025-01-07 21:50:00

关于前端组件化开发的一点思考的相关文章

AppBoxFuture(六): 前端组件化开发

??前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端工程(IDE及Web应用)的开发. ??当初框架的设计目标是:前端.后端.存储端统统一锅端,为什么这么设计,一方面是想减少开发人员对于开发环境及各类工具的安装配置时间,另一方面是想消除各端之间的集成调试问题,使开发人员更多的关注数据结构.业务逻辑.用户界面的设计与开发.为了达成这一目标,作者在框架的

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

前端组件化开发的好处

最近工作中深深感觉到,一个新时代前端工程师需要有前辈毕昇的思维. 刚开始人们也是一笔一一划的来完成自己的作品,完成一件成品需要消耗大量的时间. 慢慢的人们发现,写来写去就是那些字,于是就出现了活字印刷..... 前端工程师思想的更迭出现了组件化开发..... 组件化开发有那些好处呢? (一),标记鲜明,容易维护 组件化后,我们只需要对对应的组件进行维护,不会影响到其它文件.而且文件结构清楚,方便后台人员的使用. (二),块状化结构,减少css 的书写,并且方便扩展 块状化结构,一个模块一个标识,

组件化开发的一些思考

看了limboy和Casa的文章,关于组件化开发,整理了一下思路. 1.为什么要进行组件化开发? 一个产品,在最开始的时候,由于业务简单,一般是直接在一个工程里开发.这种方式,在产品起步阶段,是没有问题的,也能够有效的保证开发效率.但随着业务的不断发展,代码量不断增多,开发团队不断壮大,最后的模块间关系会发展成如下图所示: 从上图中可以看到,这种单一工程开发模式存在一些弊端: 模块间耦合严重(模块是指较大粒度的业务功能.比如说微信,我们根据首页Tab,可以分为四大模块:会话.通讯录.发现.我).

【组件化开发】前端进阶篇之如何编写可维护可升级的代码

前言 我还在携程的做业务的时候,每个看似简单的移动页面背后往往会隐藏5个以上的数据请求,其中最过复杂的当属机票与酒店的订单填写业务代码 这里先看看比较“简单”的机票代码: 然后看看稍微复杂的酒店业务逻辑: 机票一个页面的代码量达到了5000行代码,而酒店的代码竟然超过了8000行,这里还不包括模板(html)文件!!! 然后初略看了机票的代码,就该页面可能发生的接口请求有19个之多!!!而酒店的的交互DOM事件基本多到了令人发指的地步: 当然,机票团队的交互DOM事件已经多到了我笔记本不能截图了

前端框架Vue自学之Vue组件化开发(三)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue组件化开发) 内容:通过官网说明,掌握Vue组件化开发. 正文: Vue组件化开发 一.认识组件化 原文地址:https://www.cnblogs.com/xinkuiwu/p/12037281.html

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

2015前端组件化框架之路(转)

https://github.com/xufei/blog/issues/19 1. 为什么组件化这么难做 Web应用的组件化是一个很复杂的话题. 在大型软件中,组件化是一种共识,它一方面提高了开发效率,另一方面降低了维护成本.但是在Web前端这个领域,并没有很通用的组件模式,因为缺少一个大家都能认同的实现方式,所以很多框架/库都实现了自己的组件化方式. 前端圈最热衷于造轮子了,没有哪个别的领域能出现这么混乱而欣欣向荣的景象.这一方面说明前端领域的创造力很旺盛,另一方面却说明了基础设施是不完善的

2015前端组件化框架之路

特别声明:本文转自@民工精髓的<2015前端组件化框架之路>.谢谢@民工精髓的分享!著作权归作者所有. 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: http://www.w3cplus.com/components-in-webapp.html ? w