文档章节

关于组件化开发

lucifer210
 lucifer210
发布于 2016/04/08 21:15
字数 1049
阅读 197
收藏 5

一 什么是组件化

   前端做过一段时间的小伙伴都知道,目前组件化规范程度其实是相当低的,同一个组件做出来的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 获取更多信息。

三 谈谈比较流行的React组件化

  最近一段时间,写了一个组件项目。目的就是将你的组件开发从具体项目中独立出来。 这样做主要有两个好处:1. 让更多人看到你的项目,不一定是项目中的人,大家互相分享,甚至贡献代码  2. 组件写好直接就是一个可发布单元。

  先写到这,改天继续写,贴代码和图

© 著作权归作者所有

上一篇: npm publish failed
下一篇: 缓存那些事
lucifer210

lucifer210

粉丝 21
博文 155
码字总数 92388
作品 0
杭州
前端工程师
私信 提问
面向对象开发和组件开发你倾向于那个?

前不久写了关于 SimpleFramework 框架初学者入门 提到了业务组件化,说明了基于应用或模块级可复用的组件化封装。 组件是指用于重用、发布和部署的二进制代码单元,simple 组件也是这样的,比...

simplesns
2010/12/16
370
0
Android组件化开发实践(九):自定义Gradle插件

本文紧接着前一章Android组件化开发实践(八):组件生命周期如何实现自动注册管理,主要讲解怎么通过自定义插件来实现组件生命周期的自动注册管理。 1. 采用groovy创建插件 新建一个Java Li...

云之崖
2018/10/29
0
0
Android组件化开发实践(八):组件生命周期如何实现自动注册管理

1. 前言 前面有一章讲过组件生命周期管理,参见Android组件化开发实践(五):组件生命周期管理。之前只是为了讲解组件生命周期的概念,以及这样做的原因,但是这样实施过程中,会发现在壳工...

云之崖
2018/10/25
0
0
Android组件化开发实践(七):开发常见问题及解决方案

我们在单一工程里开发时代码运行良好,但是在进行组件化开发时,经常会出现一些莫名其妙的问题。 1. ButterKnife无法使用 组件化之后,在library中使用ButterKnife,会发现引用R.id的地方都会...

云之崖
2018/10/09
0
0
小程序组件化开发框架 - wepy

wepy 是一个小程序组件化开发框架。 组件 小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap="myclic...

gcaufy
2017/03/02
20.9K
14

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
12
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.3K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部