前端开发的模块化和组件化的定义，以及两者的关系

作者：Jasin Yip
链接：http://www.zhihu.com/question...
来源：知乎

模块化中的模块一般指的是 Javascript 模块，比如一个用来格式化时间的模块。

组件则包含了 template、style 和 script，而它的 Script 可以由各种模块组成。比如一个显示时间的组件会调用上面的那个格式化时间的模块。

画的一张图完美地解释了它们之间的关系：

组件化就是做一个知乎，把导航栏拆成一个组件，一个一个回答区域拆成一个组件，编辑区是一个组件，页脚是一个组件，等等。。你可以尽情拆分。一个组件包含了html、css、js代码，可以简单理解为页面的一块。

模块化就是做一个知乎的编辑区组件，假设要有时间格式化、图片格式处理、视频格式处理、代码格式处理，这样很多个js功能。那么你当然可以在HTML里面引入多个JS script，现在更流行更好的方式，是采用引入的方式。

比如在一个编辑区组件里面，引入别人写好的时间格式化和图片格式处理的js代码：
<style>
...
</style>

var format = require('../lib/format') // local import
var img = require('lib-img') // npm import

/**

es6
import format from '../lib/format'
import img from 'lib-img'
*/

/**

your code here
*/

format(new Date())
img.getnewurl('http://xxxx.jpg')
</script>

前端开发的模块化和组件化的定义，以及两者的关系相关推荐

对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
前端工程化、模块化、组件化
工程化前端工程化是一种高层次思想而不是某种技术,所谓前端工程化就是将前端项目当成一项系统工程进行分析.组织和构建从而达到项目结构清晰.分工明确.团队配合默契.开发效率提高的目的.而模块化和组 ...
Android 开发:由模块化到组件化(一)
在Android SDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发以下高能,请做好心理准备,看不懂请发私信来交流 ...
浅谈前端工程化、模块化、组件化
1.前端工程化,是一种思维而不是技术.前端工程化就是用做工程的思维来开发自己的项目,而不是一个页面接着一个页面来开发. 2.前端模块化,前端工程化是一个高层次的思维,而模块化和组件化是在工程化思维下相 ...
模块化和组件化的定义以及两者的区别
模块化中的模块一般指的是 Javascript 模块组件则包含了 template.style 和 script,而它的 Script 可以由各种模块组成. 组件化就是做一个知乎,把导航栏拆成一个组 ...
前端模块与组件、模块化与组件化编程
文章目录前言 1.前端模块化 2.前端组件化一.模块与组件的理解,存在的意义以及作用 1.模块 2.组件---实现应用中局部功能代码和资源的集合 2.1 单文件组件与非单文件组件二.模块化与组件 ...
前端模块化、组件化的理解
前端模块化.组件化的理解到底什么是前端工程化.模块化.组件化前端组件化思想浅谈前端架构的工程化.模块化.组件化.规范化
前端模块化、组件化开发
使用过ReactJS进行Web UI的组件化开发,和使用过AngularJS的双向数据绑定和模块化后,感觉到了组件化.模块化.双向数据绑定对Web前端开发的重要性. 1.组件化可以极大提高前端代码的可 ...
前端的工程化、模块化和组件化
目录前端的工程化.模块化和组件化一.工程化 1.为什么要以工程化的思想来看待前端项目? 2. 那我们又该怎样去做到前端的工程化呢? 二.模块化 1.模块 2.为什么要模块化? 3.作用三.组件化 ...

前端开发的模块化和组件化的定义，以及两者的关系

前端开发的模块化和组件化的定义，以及两者的关系相关推荐

最新文章

热门文章