浅谈凡泰小程序核心技术

小程序技术相信大家都不陌生,分离视图层与逻辑层是小程序的核心之一。本文就凡泰小程序展开相关分享。

视图层和逻辑层分离有很多好处：

• 方便多个小程序页面之间的数据共享和交互。

• 在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验。

• Service 和 View 的分离和并行实现可以防止 JS

• 执行影响或减慢页面渲染，这有助于提高渲染性能。

• 因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序是不能操作 DOM 结构的，这也就使得小程序的性能比传统的 H5 更好。

模拟实现

1、视图层调用JSBridge.publish把事件传递给原生;参数: {eventName: ‘’, data: {}}

//点击按钮，通知JS执行业务逻辑
function onTest() {
  FinChatJSBridge.subscribe('PAGE_EVENT', function (params) {
                            document.getElementById('testId').innerHTML = params.data.title                                })
  FinChatJSBridge.publish('PAGE_EVENT', {
    eventName: 'onTest',data: {}
  })

}

2、原生 view 层收到 page 的事件，把事件传递转发给 service 层处理

if ([message.name isEqualToString:@"publishHandler"]) {
        NSString *e = message.body[@"event"];
        [self.service callSubscribeHandlerWithEvent:e param:message.body[@"paramsString"]];
    }

3、原生 service 层收到原生 view 层的事件，通过 jsbridge 把事件及参数传递给视图 ervice 层执行 js 逻辑

NSString *js = [NSString stringWithFormat:@"ServiceJSBridge.subscribeHandler('%@',%@)",eventName,jsonParam];
[self evaluateJavaScript:js completionHandler:nil];

4、视图 service，收到事件后，执行 JS 业务代码

var Page = {
  setData: function(data) {
    //向原生视图层发送更新数据信息
    ServiceJSBridge.publish('PAGE_EVENT', {
      eventName: 'onPageDataChange',
      data: data
    })
  },
  methods: {
    onTest: function() {
      // 执行JS方法，模拟小程序的setData，把数据更新到视图层
      Page.setData({
        title: '我来自JS代码更新'
      })
      console.log('my on Test')
    }
  }
}
var onWebviewEvent = function(fn) {
  ServiceJSBridge.subscribe('PAGE_EVENT', function(params) {
    console.log('FinChatJSBridge.subscribe')
    var data = params.data,
      eventName = params.eventName
    fn({
      data: data,
      eventName: eventName
    })
  })
}
var doWebviewEvent = function(pEvent, params) {
  // do dom ready

  if (Page.methods.hasOwnProperty(pEvent)) {
    // 收到视图层的事件，执行JS对应的方法
    Page.methods[pEvent].call(params)
  }
}

5、执行业务 JS 代码后，把数据更新传递给视图层去更新 UI 界面展示数据

ServiceJSBridge.publish('PAGE_EVENT',{   
eventName:'onPageDataChange', 
data: data 
})

6、原生 service 层收到视图 service 层的事件，把事件传递给原生视图层

if ([message.name isEqualToString:@"publishHandler"]) {
    NSString *e = message.body[@"event"];
    [self.controller callSubscribeHandlerWithEvent:e param:message.body[@"paramsString"]];    }

7、原生视图层把收到的事件，传递给视图 view 层

NSString *js = [NSString stringWithFormat:@"FinChatJSBridge.subscribeHandler('%@',%@)",eventName,jsonParam];
[self evaluateJavaScript:js completionHandler:nil];

8、视图 view 层，收到事件后，更新界面

FinChatJSBridge.subscribe('PAGE_EVENT',function(params){ 
document.getElementById('testId').innerHTML = params.data.title 
})

视图层与逻辑层分享告辞段落。不知大家是否有收获呢。

本文示例代码: github.com/finogeeks/f…