[proposal] support define methods for kind of native components

[Jinjiang]

For example: the methods in webview module could be used directly at a <web> element. Usage:

function vmMethod() {
  var el = this.$el('web')
  el.goBack()
  el.refresh()
  el.goForward()
}

Once the method called. JS Framework will run callNative(instanceId, [{ module: 'web' /* component name */, method: 'goBack' /* method name */, args: []}]). The module name may need discussed more.

That need JS Framework to return a "real" DOM element when this.$el(id) called. At the same time native should register methods for each native components when registerComponents(...). Usage:

registerComponents([
  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
])

[fkysly]

After discussion, the solution is as follows:

Usage:

function vmMethod() {
  var el = this.$el('web')
  el.goBack()
  el.refresh()
  el.goForward()
}

jsfm -> native

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    ref: 'xx' (optional) ,
    method: 'goBack' ,
    args: []
}])

native register methods:

registerComponents([
  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
])

[fkysly]

Be careful: native use registerComponents methods , the method name must be Camel-Case

[MrRaindrop]

@fkysly during other calling for native APIs, the element ref is always the first arguments in the task.args, not a separate parameter (task.ref) for a task object. Why is this changed on this situation ? I think this is better for historical reason and consistency:

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    method: 'goBack' ,
    args: [ref, ..., cid]
}])

[Jinjiang]

Here is another implementation which create extended element constructors which has methods in its own prototype. https://github.com/jinjiang/weex/tree/jsfm-feature-component-methods

[Hanks10100]

#1604 did this.

[Jinjiang]

reopen for #1604

[Hanks10100]

Both #1604 and #1665 are merged to achieve this.