小程序学习五(实现一个简单的基础库)-CSDN博客

本文链接：https://blog.csdn.net/D_I_D/article/details/136305647

因为有个公司又是搞小程序容器的，而且老是问我相关问题，不得已只能再次复习一下。
os: 其实只要理解了vdom，然后再了解一点编译相关的知识之后好像也没啥需要特别了解的。。。

html页面

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <div id="container"></div>
    <script>
      const myWorker = new Worker("minapp/service.js");
      window.myWorker = myWorker;
      myWorker.addEventListener('message', function (e) {
        if (e.data.type === 'view') {
          __render(JSON.parse(e.data.data))
        }
      })
      // 小程序的js文件,正常应该是直接执行到service中的，不需要使用这种方式
      myWorker.postMessage({
        type: 'js',
        pageName: 'page/index',
        data: `Page({
  data: {
    cc1: '点击修改'
  },

  click: function () {
    console.log('click')
    this.setData({
        cc1: 'asd'
    })
  },

  click1: function () {
      wx.showModal()
  }
})` });
    </script>

    <script src="minapp/view.js"></script>
  </body>

</html>

上图中Worker表示独立的线程，主要运行servic.js和小程序的js文件。

view.js

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
  datasetModule
} from "snabbdom";

const patch = init([
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  datasetModule
]);

let nowVnode = document.getElementById("container");

function postMessage(type, name, pageName) {
  myWorker.postMessage({
    type: type,
    name: name,
    pageName: pageName
  })
}

window.__render = function (newVnode) {
  newVnode.data.on = {
    click: function (e) {
      const dataset = e.target.dataset
      if (dataset && dataset.pageName && dataset.bindtap) {
        postMessage('event', dataset.bindtap, dataset.pageName)
      }
      e.stopPropagation();
    }
  }
  patch(nowVnode, newVnode);
  nowVnode = newVnode
}

视图层的功能其实非常简单。
1、接收服务端的vnode然后渲染
2、将用户操作产生的事件发送到service中(因为用户的js代码是在service中执行的，开发者需要知道click方法是否执行了)

service.js

import {
    h
} from "snabbdom";

global.__PAGES = {}

self.__WXSCODE = {
    'page/index': {
        'm1': function () {
            const module = { exports: {} };
            var msg = "hello wxs";
            module.exports.message = msg;
            return module.exports
        }
    }
}

// 编译器将wxml转换为下面的形式然后注入到html中
self.__APPCODE__ = {
    'page/index': ["div", {}, [
        ['h1', { _data: { _text: 'cc1' }, bindtap: 'click' }, ''],
        ['h1', {}, [['span', { bindtap: 'click1' }, '点击调用wx.showModal']]],
        ['h1', { _data: { 
            _wxscode: () => {
                return self.__WXSCODE['page/index']['m1'].bind(null)().message 
            } } }, '']
    ]]
}

let __NOWPAGE = ''

global.Page = function (params) {
    global.__PAGES[__NOWPAGE] = {
        ...params,
        setData: (data) => {
            // 这里可以加个diff
            render(self.__APPCODE__[__NOWPAGE], {
                ...params.data,
                ...data
            }, __NOWPAGE)
        }
    }
    render(self.__APPCODE__[__NOWPAGE], params.data, __NOWPAGE)
}
global.wx = {
    showModal: function () {
        console.log('showModal')
    }
}

addEventListener("message", (event) => {
    if (event.data.type === 'js') {
        __NOWPAGE = event.data.pageName
        eval(event.data.data)
    } else if (event.data.type === 'event') {
        // 事件处理
        const pageArg = global.__PAGES[event.data.pageName]
        if (pageArg && typeof pageArg[event.data.name] === 'function') {
            pageArg[event.data.name].bind(pageArg)()
        }
    }
});


function renderChild(element, pageData, pageName) {
    let arr = []
    if (element[1].bindtap) {
        element[1].dataset = { bindtap: element[1].bindtap, pageName: pageName }
    }
    if (typeof element[2] === 'string') {
        let text = element[2]
        if (element[1]._data) {
            if (typeof element[1]._data._text === 'string') {
                if (pageData[element[1]._data._text]) {
                    text = pageData[element[1]._data._text]
                }
            } else if(typeof element[1]._data._wxscode === 'function') {
                text = element[1]._data._wxscode()
            }
        }

        arr.push(h(element[0], element[1], text))
    } else if (Array.isArray(element[2])){
        let newArr = []
        for (let index = 0; index < element[2].length; index++) {
            const ele = element[2][index];
            newArr.push(renderChild(ele, pageData, pageName)[0])
        }
        arr.push(h(element[0], element[1], newArr))
    }
    return arr
}

function render(element, pageData, key) {
    const vnode = h('div', { props: { className: key }}, renderChild(element, pageData, key)[0])
    postMessage({
        type: 'view',
        data: JSON.stringify(vnode)
    })
}