前端为什么要使用组件化的思想,通过一个实例来分析
在平时项目中,为什么我们都会采用组件化的思想去编写代码?
其实的原因很简单!!! 我们在写代码的时候,写完以后发现这个代码会出现在其他地方,想要复用,或者同事感兴趣,想使用这个代码。这个时候我们就需要通过组件化来实现代码的复用了,否则工作量真的是…
接下来通过一个例子大概分析一下:
这个是一个点赞的功能~ 如果给我写,那 简单 啊
HTML
<body><div class='wrapper'><button class='like-btn'><span class='like-text'>点赞</span><span>(假装有一张手的小图标)</span></button></div></body>
JavaScript
const button = document.querySelector('.like-btn')const buttonText = button.querySelector('.like-text')let isLiked = falsebutton.addEventListener('click', () => {isLiked = !isLikedif (isLiked) {buttonText.innerHTML = '取消'} else {buttonText.innerHTML = '点赞'}}, false)
代码写完以后,这时候你的同事跑过来了,说他很喜欢你的按钮,他也想用你写的这个点赞功能。这时候问题就来了,你就会发现这种实现方式很致命:你的同事要把整个 button 和里面的结构复制过去,还有整段 JavaScript 代码也要复制过去。这样的实现方式没有任何可复用性。
实现简单的组件化
这里有一个将字符串,变成DOM的函数
// ::String => ::Document
const createDOMFromString = (domString) => {const div = document.createElement('div')div.innerHTML = domStringreturn div
}
按组件处理以后
class LikeButton {constructor () {this.state = { isLiked: false }}changeLikeText () {const likeText = this.el.querySelector('.like-text')this.state.isLiked = !this.state.isLikedlikeText.innerHTML = this.state.isLiked ? '取消' : '点赞'}render () {this.el = createDOMFromString(`<button class='like-button'><span class='like-text'>点赞</span><span>(假装有一张手的小图标)</span></button>`)this.el.addEventListener('click', this.changeLikeText.bind(this), false)return this.el}}
在别的地方使用组件
现在这个组件的可复用性已经很不错了,你的同事们只要实例化一下然后插入到 DOM 里面去就好了。
const wrapper = document.querySelector('.wrapper')const likeButton1 = new LikeButton()wrapper.appendChild(likeButton1.render())const likeButton2 = new LikeButton()wrapper.appendChild(likeButton2.render())
一个组件的显示多个状态
一个组件的显示形态由多个状态决定的情况非常常见。代码中混杂着对 DOM 的操作其实是一种不好的实践,手动管理数据和 DOM 之间的关系会导致代码可维护性变差、容易出错。
这里要提出的一种解决方案:
一旦状态发生改变,就重新调用 render 方法,构建一个新的 DOM 元素。 这样做的好处是什么呢?好处就是你可以在 render 方法里面使用最新的 this.state 来构造不同 HTML 结构的字符串,并且通过这个字符串构造不同的 DOM 元素。页面就更新了!听起来有点绕,看看代码怎么写,修改原来的代码为:
class LikeButton {constructor () {this.state = { isLiked: false }}setState (state) {const oldEl = this.elthis.state = statethis.el = this.render()if (this.onStateChange) this.onStateChange(oldEl, this.el)}changeLikeText () {this.setState({isLiked: !this.state.isLiked})}render () {this.el = createDOMFromString(`<button class='like-btn'><span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span><span>(假装有一张手的小图标)</span></button>`)this.el.addEventListener('click', this.changeLikeText.bind(this), false)return this.el}}
其实只是改了几个小地方:
render 函数里面的 HTML 字符串会根据 this.state 不同而不同(这里是用了 ES6
的模版字符串,做这种事情很方便)。新增一个 setState 函数,这个函数接受一个对象作为参数;它会设置实例的
当用户点击按钮的时候, changeLikeText 会构建新的 state
对象,这个新的 state ,传入 setState 函数当中。
这样的结果就是,用户每次点击,changeLikeText 都会调用改变组件状态然后调用 setState ;setState 会调用 render ,render 方法会根据 state 的不同重新构建不同的 DOM 元素。
也就是说,你只要调用 setState,组件就会重新渲染。我们顺利地消除了手动的 DOM 操作。
在别的地方使用组件
const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => {wrapper.insertBefore(newEl, oldEl) // 插入新的元素wrapper.removeChild(oldEl) // 删除旧的元素
}
前端为什么要使用组件化的思想,通过一个实例来分析相关推荐
- VUE 前端中如何进行组件化开发?
1.前端里面常说的视图层是什么? 我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层. Vue 的核心库只关注视图层 图1: dom对象树结构 图2:DOM和CSS ...
- 组件化开发思想||全局组件注册语法||组件注册注意事项
组件化开发思想 编程中的组件化思想体现 组件化规范: Web Components 全局组件注册语法 <!DOCTYPE html> <html lang="en" ...
- Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现 组件化即是对某些可以进行复用的功能进行封装的标准化工作 标准:要想组件能够成功组合在一起,每个组件必须要有标准 分治:将不同的功能封装到不同的组件 ...
- 前端开发流程与组件化
1组件化开发 组件分开发是非常重要的工程优手段.也是react开发必备技能.前端光有JS/CSS的模块化还是不够的.对于UI组件同样迫切的需求 前端组件化开发理念: 如上图所示这就是前端组件开发理念, ...
- 【厚积薄发系列】C++项目总结19—组件化架构思想
在一个大型的项目中,随着业务不断拓展,开发人员和代码量的不断增加,传统的单体架构会经常遇到以下问题: 1.业务模块划分不够清晰,模块之间高度耦合,修改和新增需求的时候可能会导致牵一发而动全身的雪崩. ...
- 前端学习(1233):组件化开发思想
- 前端知识-vue-3、组件化开发
什么是组件? 1.组件注册和使用 1.注册全局组件 方式一:使用全局的Vue直接注册:Vue.component <!DOCTYPE html> <html><head ...
- java 组件化_(原创)搭建一个组件化的监控平台
最近看到一位同事正在开发一个监控软件,要求就是通过针对服务器现有的一些接口,通过这些接口返回的数据进行分析,如果监控的值到达预先设定的范围则通过短信的方式发送给管理员. 从整个开发的功能上来看是一个比 ...
- 组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...
最新文章
- keil lib 只调用自己的函数_C语言学习篇(28)——函数库
- Angular Component代码和编译后生成的JavaScript代码
- arcgis 分区 属性值_ArcGIS制图之Maplex自动点抽稀
- ArcEngine和GDAL读写栅格数据机制对比(一)
- 智能优化算法应用:基于GWO优化的指数熵图像多阈值分割 - 附代码
- 微信开发者工具历史版本下载
- Wireshark-ICMP数据报分析
- mysql 纯真ip 导出dat_纯真IP数据库(qqwry.dat)转换成最新的IP数据库格式(ipwry.dat)
- 【Protobuf】pb跨语言传输文件签名验证
- PLM系统应包括什么
- 淘宝评论API接口,item_review-获得淘宝商品评论API接口接入说明
- linux内核ddr初始化,嵌入式Linux裸机开发(五)——SDRAM初始化
- 被中国家长摧残的十种优秀儿童品质(转)
- CPU性能衡量参数 主频、MIPS、CPI
- ReactNative常用插件使用
- 网络空间安全---计算机网络安全概述
- BeautifulSoup使用
- (java编程)输出1000以内的所有质数
- PyQt5基本控件之菜单栏QMenuBar
- 分支过程灭绝概率matlab,分支过程