前端开发的模块化和组件化的定义,以及两者的关系?
模块化中的模块一般指的是 Javascript 模块,比如一个用来格式化时间的模块。
组件则包含了 template、style 和 script,而它的 Script 可以由各种模块组成。比如一个显示时间的组件会调用上面的那个格式化时间的模块。
画的一张图完美地解释了它们之间的关系:
组件化就是做一个知乎,把导航栏拆成一个组件,一个一个回答区域拆成一个组件,编辑区是一个组件,页脚是一个组件,等等。。你可以尽情拆分。一个组件包含了html、css、js代码,可以简单理解为页面的一块。
模块化就是做一个知乎的编辑区组件,假设要有时间格式化、图片格式处理、视频格式处理、代码格式处理,这样很多个js功能。那么你当然可以在HTML里面引入多个JS script,现在更流行更好的方式,是采用引入的方式。
比如在一个编辑区组件里面,引入别人写好的时间格式化和图片格式处理的js代码:
<style>
...
</style><template>
...
</template><script>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>
作者:Jasin Yip
链接:http://www.zhihu.com/question...
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
前端开发的模块化和组件化的定义,以及两者的关系?相关推荐
- 前端开发的模块化和组件化的定义,以及两者的关系
作者:Jasin Yip 链接:http://www.zhihu.com/question... 来源:知乎 模块化中的模块一般指的是 Javascript 模块,比如一个用来格式化时间的模块. 组件 ...
- 对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,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.作用 三.组件化 ...
最新文章
- CUDA Samples: approximate prior vbox layer
- 网站显示mysql数据库_如何显示从MySQL数据库的网站iframe?
- 多个ip对应的是同一个mac_Python3+Scapy安装使用 + 查询本机对应网卡,IP,MAC代码...
- 深入理解JavaScript的事件循环
- byte数组转为string_String类
- python 持续集成部署_Jenkins部署git+python项目实现持续集成
- leetcode53 python3 96ms 最大子序列和 python解法
- BigInt:JavaScript 中的任意精度整数
- 莫烦python学习笔记之numpy.array,dtype,empty,zeros,ones,arrange,linspace
- Tomcat8.0之后GET请求不需要再设置中文乱码问题
- bootstrap在php中怎弄,bootstrap插件怎么用
- Shiro安全框架的原理及实现步骤
- PIXI.JS一镜到底动画
- 周志华 机器学习初步 线性模型
- 贝尔曼-福特算法(Bellman-Ford)
- 【数据结构】悬空指针和野指针
- 计算机网络应用基础教学计划,高一计算机网络应用基础教学计划.doc
- Linux:压缩与解压命令大全(tar、gz、bz2、Z、zip、rar、lha、rpm、deb)
- 质量管理知识点大盘点(之二)
- 老旧计算机桌面,怎么让老旧电脑上快速度启动U盘Winpe及桌面没东西解决