-
Notifications
You must be signed in to change notification settings - Fork 57
Define and Create
TANG edited this page Dec 14, 2016
·
11 revisions
定义一个视图组件只要基于 sugar.Component 继承出来就可以了:
var sugar = require('dist/sugar'); var MyComponent = sugar.Component.extend({ init: function (config) { this.Super('init', config, { class: 'my-comp', target: document.body, view: '<h1>This is a component</h1>' }); }, afterRender: function () { // 组件渲染完毕 } });
MyComponent 只是一个通用组件的定义,要实例化(添加到页面中)则需要用 sugar.core.create 方法将 MyComponent 实例化:
var component = sugar.core.create('my-component', MyComponent);
生成实例后的视图组件:
... <body> <div class="my-comp"> <h1>This is a component</h1> </div> </body> ...
sugar.Component 是最基础的组件模块,定义了一个空的 DOM 元素(div)和丰富的可拓展的属性和方法,实际上直接用 sugar.Component 即可创建一个空的视图组件:
sugar.core.create('empty-component', sugar.Component, { target: document.body });
... <body> <div></div> </body> ...
实例化后只有一个空的 div(组件默认的包裹元素标签),这样其实没有任何用处,所以应该通过 sugar.Component.extend 来定义视图组件需要实现的业务逻辑。
init 是组件定义必须的一个方法,该方法通过配置参数实现组件形态和初始数据的定义,预定义的参数有:
{ /********* 组件位置定义 *********/ target: null, // 组件目标容器 <DOM|CssStringSelector> replace: false, // 组件是否替换目标容器 <Boolean> /********* 组件属性定义 *********/ tag: 'div', // dom 元素的标签 css: null, // 元素的 css <Object> attr: null, // 元素的 attr <Object> class: '', // 元素的 class <String> /********* 组件布局定义 *********/ view: '', // 视图布局内容 <HTMLString> template: '', // 静态模板 uri <UrlString> tplParam: null, // 模板拉取请求参数 <Object> /********* 组件 MVVM 定义 *********/ model: null, // mvvm 数据模型对象 <Object> methods: null, // 事件声明函数对象 <Object> watches: null, // 批量 watch 数据对象 <Object> watchAll: null, // 数据变更统一回调处理函数 <Function> computed: null, // mvvm 计算属性对象 <Object> customs: null, // 自定义指令刷新函数对象 <Object> hooks: null, // v-if/v-for 指令 DOM 插删钩子函数定义对象 <Object> lazy: false, // 是否将 MVVM 编译时机交给开发者 /********* 声明式嵌套子组件定义 *********/ childs: null, // <Object> // 视图渲染完成后的回调函数 cbRender: 'afterRender' }
可以在定义组件时通过改变这些预定义参数的值来定义组件的不同形态,也可以新增自定义参数实现更多的自定义扩展。afterRender 方法将会在组件视图全部渲染完成后调用。
上一篇:介绍
下一篇:组件的布局