Fusion 基于custom element的前端组件框架

Fusion 基于custom element的前端组件框架

Fusion

基于custom element的前端组件框架

接入

fusion.js支持script引入和require引入，可以根据业务需要选择合适的引入方式

使用

// 以非amd方式为例var MyFusion = registerFusion('my-fusion', options);var myfusion = new MyFusion();document.body.appendChild(myfusion.element);

通过registerFusion注册一个新的组件类，赋值给MyFusion，通过new MyFusion()实例化得到myfusion对象，该对象上的element属性是一个dom对象。也可以直接在html里使用来实例化MyFusion。

registerFusion(name, options)

该函数用来注册基于custom element的自定义组件，其中name为组件名，建议name的命名中包含-，例如my-fusion。

options可以用来定制自定义组件的各种信息。

options.props

options.props是一个对象，用来定义组件支持的属性，用法如下：

props: { a: { type: Number, value: 123, onChange: function (old, now) { console.log(old, now); } }}

type: 表示该属性的值的类型value: 该属性的默认值onChange: 该属性在变化之后的回调，参数old和new分别表示变化前后的值

options.render

render是一个函数，用于编写组件的渲染逻辑

// 参数data为组件元素上的属性的值render: function () { // render logic here}

options.created

一个组件的生命周期过程为：created -> attached -> detached，created就是最早的一个步骤，在创建组件实例时调用

示例:

created: function () { console.log('it is created!');}

options.init

组件第一次插入到dom时调用

init: function () { console.log('it is inited!');}

options.attached

组件插入到dom之后调用

attached: function () { console.log('it is attached to dom!');}

注意：想象这样的场景，组件插入dom之后，在某些情况下需要移出dom，之后又要插入dom，这样attach会被调用多次，如果希望只在组件第一次插入dom时执行某些操作，请在init中编写这些逻辑，只有在确认需要组件每次插入dom时都要调用的逻辑才应该写在attach中

options.detached

组件从dom中移除后调用

detached: function () { console.log('it is detached from dom!');}

注册组件

调用registerFusion来注册组件，在options中可以重写现有的属性来实现组件所需的逻辑

var MyFusion = regiterFusion('my-fusion', { props: { name: { type: String, val: 'sfe', onChantge: function (old, now) { console.log('name is changed from ' + old + ' to ' + now); } } }, created: function () { console.log('it is created'); }, init: function () { console.log('it is inited'); }, attached: function () { console.log('it is attached'); }, detached: function () { console.log('it is detached'); }, render: function () { var css = 'my-fusion p {color: red;}'; var styleTag = document.createElement('style'); styleTag.innerText = css; document.head.appendChild(styleTag); var data = this.getProp(); var tpl = '

My name is ' + data.name + '

可以再html中直接使用标签:

也可以在js中实例化:

var myfusion = new MyFusion();myfusion.setAttribute('name', 'foo');document.body.appendChild(myfusion);

在注册组件时，options内的所有函数中，this变量指向当前组件（fusion）对象，可以通过this获取到组件对象上的所有属性

补充说明2个属性：

获取组件实例

有2种方式获取组件实例

获取dom对象的fusion属性通过new实例化

// 方式一var myfusion = document.querySelector('my-fusion').fusion;// 方式二var myfusion = new MyFusion();

事件

组件对象上可以绑定事件、触发事件、解除事件绑定

on(evt, fn)

事件绑定，可以绑定浏览器原生事件，也可以绑定自定义事件，用法如下：

myfusion.on('click', function (e) { alert('it is clicked!');});

trigger(evt[, data, canBuble])

触发事件，可以通过data传递数据，data可以是任意类型数据，事件默认会冒泡，可以设置canBuble为false来阻止事件冒泡

myfusion.trigger('click');

off(evt[, fn])

解除事件绑定, fn可选，如果没有传fn，则将解除该对象上的evt事件的所有绑定

myfusion.off('click', fn);

进阶

最佳实践从零开始搭建一个Fusion组件项目

反馈

如有任何问题，欢迎提ISSUE

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。