bus mod get 文件 方法 comm scrip web
转自:https://segmentfault.com/a/1190000005831159
第一次接触到前端组件的概念是在学习 Extjs 的时候,有一个名叫 Ext.Component 的对象,所有的组件都是继承自这个对象。Extjs 有很多自带的组件,种类齐全,可以应对大部分后台页面的需求,而且实现了页面全部由组件组成的宏伟目标。组件的编写几乎都是靠 JS,而弱化了 html 和 CSS。虽然现在已经不用 Extjs 了但有机会一定要好好研究下它对组件概念的理解。
花了近一天的时间,用我认为比较主流的前端框架分别实现了同一个简单的功能,看图就能明白这个功能,这里也只比较简单的单层组件的实现。
当然几种框架的实现都使用了组件化的方式,并实例化三次,所以你看到图上有三行且每行的初始文字不同。接下来我将分别展示 Angular2、vue、React 和 Molecule 的组件实现。注:Molecule 不是流行组件化框架,但是用与众不同的方式实现组件。
- import {
- Component,
- Input
- }
- from[email protected] / core';@Component({
- selector: 'amazing - angular2',
- template: `"text" > <button(click) = "changeToUpperCase()" > Upper Case < /button>`,
- styles: [``]
- })
- export class ItemComponent {
- @Input()
- text = 'Hello Wolrd';
- changeToUpperCase() {
- this.text = this.text.toUpperCase();
- }
- };/
Angular2 用 ES7 的装饰器特性将一个类标记为组件。
- <amazing-angular2 [text]="'Hello Angular2!'">Loading...</amazing-angular2>
- var Vue =require('vue');
- Vue.component('amazing-vue', {
- props: ['text'],
- template:'Upper Case',
- data:function() {return { };
- },
- methods: {
- changeToUpperCase:function() {this.text =this.text.toUpperCase();
- }
- }
- });
这里用了 Vue 的语法糖把组件定义和注册合成了一步。
- <amazing-vue text="Hello Vue!"></amazing-vue>
- var AmazingReact = React.createClass({
- getInitialState:function() {return {
- text:this.props.text
- };
- },
- changeToUpperCase:function() {this.setState({
- text:this.state.text.toUpperCase()
- });
- },
- render:function() {return (<div><inputtype="text"value={this.state.text} /><buttononClick={this.changeToUpperCase}>Upper Case</button></div>
- );
- }
- });
creatClass 创建组件,由于采用了单向数据流,所以与 Angular 和 Vue 的实现有一些差别。
- <AmazingReact text="Hello React!"/>
- <div molecule-def="AmazingMolecule">
- <input value="Hello World">
- <button id="bnUpperCase">
- Upper Case
- </button>
- <script>
- // MOLECULE_DEF
- function AmazingMolecule() {
- this.$el.find('input').val(this.$el.data('text'));
- this.$el.find('#bnUpperCase').click(function() {
- var $tx = $(this).parent().find('input');
- $tx.val($tx.val().toUpperCase());
- })
- }
- // MOLECULE_DEF_END
- Molecule.create(AmazingMolecule);
- </script>
- </div>
Molecule 采用了基于 HTML 定义组件的方式。
- <div molecule="AmazingMolecule" data-text="Hello Molecule!"></div>
可以看出虽然各个框架实现组件的方式各不相同,但总体思想是一致的,内部都包含组件
和组件
- 结构
的定义,外部则都提供了
- 行为
实现参数传递。至于有些框架没有实现内部的 CSS,我猜应该是考虑了
- 接口
的多样性。而
- 表现
的方式则都采用了 HTML 标签的方式,利用 HTML 的树形结构,让多个组件的组织更加方便和一目了然。
- 实例化
一些前端框架组件化实现的比较(转)
来源: http://www.bubuko.com/infodetail-2028982.html