浏览器端

在浏览器端，billund会更像一个状态管理组件，去统筹全局与组件之间的状态变更以及同步。

同时，因为billund同时支持React与Vue，所以在由不同的渲染框架构成的页面，billund会提供不同的api。

基本api

基本api是无论任何渲染框架，billund都会提供的方法。

Billund.getState

获取整个页面级的state。state的来源多种多样，可能是来自于storeData，或者是通过与widget的交互得到的数据。

Billund.registerOnStartListener

注册widget的启动回调，当widget同构成功(React -> componentDidMount,Vue -> mounted)时，会回调这个方法。如果组件已经同构过，那么会直接调用这个方法。

参数选项

• name

  String，widget的name。

• cb

  Function,同构成功时的回调，接收一个参数props，代表组件的当前数据。

Billund.registerOnFailListener

注册widget的失败回调。当调用方法后一段时间内，widget还没有同构成功，就会调用对应的回调。对于已经同构成功的widget，什么也不会发生。

参数选项

• name

  String，widget的name。

• cb

  Function,同构失败时的回调方法。

• options

  Object，可选参数。里面支持timeout字段，即设定从registerOnFailListener开始到认定widget同构失败的时间长度。默认是2000ms。

Billund.registerOnChangeListener

注册widget的数据变更回调，当widget对应的state发生变更，就会调用这个回调。

参数选项

• name

  String，widget的name。

• cb

  Function,widget的state发生变更时调用的回调。接收三个参数，分别是nextProps(变更后的state)，prevProps(变更前的state),'initialProps'(组件启动时的state)。

Billund.setSharedParams

当某些组件因为不满足requireParams(降级组件)的校验条件没有启动时，称之为降级组件。调用Billund.setSharedParams方法可以以key:value的方式设值，从而让组件触发再次校验，如果满足条件，就会开始执行组件的渲染逻辑。

参数选项

• params

  Object，是一个key -> 'value'型的对象，其中key是对应参数的key，'value'就是我们要设置的对应值。

  example:

  control层

    'use strict';
  
    function* action() {
        this.legoConfig = {
            widgets: [{
                name: 'simple-vue-widget',
                params: {
                    title: 'simple-vue-widget',
                    desc: 'test',
                    now: ''
                },
                requireParams: ['now!null!""'],
                weight: 100
            }],
            options: {
                staticResources: [{
                    entry: 'billund-example/common.js'
                }, {
                    entry: 'billund-example/require-params.js',
                    styles: 'billund-example/require-params.css'
                }]
            }
        };
    }
  
    module.exports = {
        url: '/require-params.html',
        action
    };
  

  browser-js(require-params.js):

    'use strict';
  
    const Billund = require('billund');
    Billund.setSharedParams({
        now: `time from browser:  ${new Date().valueOf()}`
    });
  

Billund.getWidgetBridgeOwnState

获取组件级别的state。

参数选项

• widgetId

  组件在页面上的唯一标识。 如果是一个React组件，那么可以在组件内部，通过this.context.legoWidgetId获取； 如果是一个Vue组件，那么可以在组件内部，通过this.$root.legoWidgetId获取。

Billund.hideWidgets

批量隐藏widget。

参数选项

• names

  需要隐藏的widget的name数组。

Billund.showWidgets

批量展示widget，需要在先调用Billund.hideWidgets后使用。

参数选项

• names

  需要展示的widget的name数组。

React Api

如果你的页面是由React渲染而成，那么我们会使用Redux来进行widget和页面之间的状态管理，建议先对Redux有所了解。

Billund.decorateReducer

向全局store注册reducer。这个api是由billund提供的，与Redux提供的replaceReducer不同，注册新的reducer并不会覆盖之前的reducer，而是形成一条reducer调用链，顺序是从 New Reducer -> Old Reducer以此进行处理。

参数选项

• reducer

  Redux原生的Reducer

Billund.dispatch

等同于Redux的dispatch，发出一个action来唤起Reducer处理的流程

Vue Api

如果你的页面是由Vue渲染而成，那么我们会使用Vuex来进行widget和页面之间的状态管理，建议先对Vuex有所了解。

Billund.hotUpdate

向全局store注册Vuex的相关配置，例如actions、mutations、getters，从而可以响应各类数据变更行为。参考vuex中的hotUpdate，但是最好不要直接更新state。

参数选项

• config

  Object,可以支持actinos、'mutations'、'getters'字段。