前端模块化、组件化开发

使用过ReactJS进行Web UI的组件化开发，和使用过AngularJS的双向数据绑定和模块化后，感觉到了组件化、模块化、双向数据绑定对Web前端开发的重要性。
1、组件化可以极大提高前端代码的可维护性，前端的组件化简单的可以理解为一块HTML元素和一段JS代码组成，该段JS代码只负责维护该块HTML元素的样式，组件封装自己的属性和行为，并对外提供接口供其他组件访问自己的状态。

2、双向数据绑定是AngularJS的核心”以数据为中心”的一个样例，这里面也牵扯到了AngularJS的controller，一个controller开辟一个函数作用域，每个controller + UI就构成了一个组件，controller负责维护自己所管辖的UI元素的数据。整个页面就是有多个这样的组件构成。组件可以嵌套。

在JSRM中做过很多页面开发后，刚开始时用jquery写代码觉得很容易，代码一直是在末尾不断增加，虽然有时候简单的画了个分界线标识来做function()分类，比如这一块的函数是负责哪一块页面的，另外一块的函数又是负责哪一块页面的。这样做很简单，直观，但是当代码多时，尤其是函数之间相互调用时，这样写代码的弊端就凸显了：1、函数之间调来调去，多调几次都不知道跑哪里去了，前面做的分界标识感觉不合理了，不应该那么分界了 2、设置全局变量来解决函数，不同的函数都对同一个全局变量进行修改，最后要使用的时候不知道该全局变量到底处于什么值状态 3、等需求变更时，或者发现bug时去修改代码，发现代码之间耦合性太高，相互依赖，结果改起来牵一发而动全身，非得把全部代码读懂才敢去该，这违背了软件设计中的可拓展性和可维护性。

组件化是解决以上问题的办法：
1、不应该以函数作为代码分块，而应该以组件作为代码组织的方法。
2、组件就类似于Java中的对象，每一个组件有单独的作用域来封装自己的属性和行为，对于公共的属性和方法则提供接口供外部访问，因此就不需要设置全局变量了。
3、模块化和组件化就是帮助实现分离职责和解耦合的，因此在代码中要尽可能的封装组件，划分模块，这样后面回来改代码时一目了然，能快速找到要修改的组件，并能尽可能少的改动前面的代码。

前端模块化、组件化开发相关推荐

组件化开发与资源管理
前端,是一种GUI软件现如今前端可谓包罗万象,产品形态五花八门,涉猎极广,什么高大上的基础库/框架,拽炫酷的宣传页面,还有屌炸天的小游戏--不过这些一两个文件的小项目并非是前端技术的主要应用场景,更 ...
对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
前端组件化开发和模块化开发的区别
前端组件化开发和模块化开发的区别首先,组件化和模块化的意义都在于实现了分治,目前我们开发的项目复杂度不断的上升,早已不是我们一个人能完成的工作,团队合作的话又会产生配合困难等各方面问题,组件化和模块 ...
【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
VUE 前端中如何进行组件化开发？
1.前端里面常说的视图层是什么? 我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层. Vue 的核心库只关注视图层图1: dom对象树结构图2:DOM和CSS ...
Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
mysql组件化_组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...

前端模块化、组件化开发

前端模块化、组件化开发相关推荐

最新文章

热门文章