关于组件化开发

最新推荐文章于 2024-09-17 13:42:29 发布

weixin_34242509

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量69

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/wanjubang/blog/655422

版权

2019独角兽企业重金招聘Python工程师标准>>>

一什么是组件化

前端做过一段时间的小伙伴都知道，目前组件化规范程度其实是相当低的，同一个组件做出来的API都不尽相同，这就给组件使用带来了很大的麻烦。那么公司会花费大量时间将Jq插件重写为React插件就不必感到奇怪了，根本原因就是没有统一的规范。比如Modal 组件（一个模态框，背景置灰），你看下BootStrap，jq，react-componets等不同的实现，虽然功能大同小异，但是通用就变得很困难。几乎完全相同的功能在接口层面完全不兼容，导致使用者从某个实现切换到另一个实现时需要非常高的成本，这就是目前Web组件化方面无序和缺乏标准的一个写照。组件框架目前无序、缺乏标准以及低效复用方面的问题需要通过组件标准化来解决，而Web Components则是标准化的一个很好的选择。

我们不是在设计页面，我们是在设计组件系统。

二组件化规范

1.国际规范

在讲述国际规范之前，我们来想象一下，怎么样的组件化才是我们所希望的呢？很简单，我们希望我们编写的组件可以独立于框架，可以不经过或经过很少的修改便可以用于不同项目。比如有一个组织L，L规定了Modal 必须有如下几个方法: open() close()必须有title，content属性，必须有open和close的事件梳理函数接口。 ok！我们开始开发组件，组件对外的接口是一致的，这时候A公司出了一个很牛的Modal组件实现，我们只要拿过来将我们的事件处理函数对应移植过去，一切ok。nice，我们就想要这样。其实这里面是有几个点的：1. 组件要独立于框架 2. js css 不能污染我的应用。这里先留着不谈。

回顾浏览器的发展历史，也曾经历混乱和无序，随着W3C标准化组织的出现这一局面有了翻天覆地的变化，而对于Web组件而言，Web Components 的出现才仅仅是这一变化的开始，随着更为复杂的多端环境的出现，组件标准化还有着更大的想象空间。

2.公司规范？

在web components普遍之前，公司应该先要建立一套组件规范，帮助公司内部完善组件重用机制。前面谈到了要想实现组件化，必须要考虑两点：1。组件要独立于框架，什么是独立于框架呢，必然是封装Dom api（不考虑svg），将dom api 封装起来，曝露出更加抽象的接口。2. js css 不能污染我的应用。 js变量污染从很久之前就有很多解决方法，而且都做的很好，包括现在es6的模块，证明js模块化已经很成熟了，不需要过多考虑。然后是css，css众所周知是全局的，那么css必然会造成变量污染啊！针对于此，主要有两种解决方法，一个是使用prefix来’试图‘创建一个唯一的名字。二是hash话，这样就不会污染了，但是css重用会存在问题，关于css可以搜索 css module 获取更多信息。