node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

freemamba

Freemamba


前言

业务中碰到有4000个左右下拉选项的需求,使用Regular会造成页面卡顿,大部分时间都花费在this._digest()方法上,起初想把regular的脏检查放在web worker中,但是修改源码并不是一个很好的解决方案,牵扯的东西太多。

于是,Freemamba诞生了,目前还是一个比较初级的框架,跟React很像,语法类似Regular。

实现的特性

  1. 渲染模式(除2.中方法外,可手动控制渲染):同步渲染 、Web Worker渲染
  2. 操作列表方法:插入、删除、修改、替换列表
  3. Regular模版语法:数据绑定、事件绑定、列表渲染
  4. 生命周期:config、init(类似Regular)
  5. WebWorker vDom: Worker中的虚拟DOM(可扩展类似React的diff最小化更新)
  6. MessageBus: 负责主线程和Worker的消息分发

计划拓展功能

  1. Worker中diff探查
  2. MessageBus连接池
  3. 自定义组件
  4. 多列表以及列表嵌套
  5. 条件渲染和computed属性

使用说明

/dist/Freemamba.js

Nej直接

Freemamba API说明

列表容器标识

在模板中的列表项容器元素的属性中添加list-container

<ul list-container></ul>

插入

在index前插入列表项

this.$insert(index, item);

修改

修改指定index的列表项

this.$modify(index, item);

删除

删除指定index的列表项

this.$delete(index);

替换

替换整个列表数组

this.$replace(newArray)

手动渲染

根据当前数据模型渲染,可选择是否worker渲染,默认同步渲染

this.$render()          //同步渲染 
this.$render(msgBug)      //worker渲染,传入MessageBus实例 

MessageBus API说明

如果Worker中渲染没必要,可以忽略这部分

你能用到它的地方:创建一个MessageBus实例,然后传给$render方法来进行worker端的渲染。

MessageBus实例

创建MessageBus实例

var myMsgBus = new MessageBus(myWorker);    //传入Worker实例 

msg.receive

MessageBus实例接收消息,返回实例

myMsgBus.receive({type: 'render', data: {}//MessageBus实例接收消息 

msg.then

为最近接收的消息绑定回调,执行一次即销毁,一般与receive联用

myMsgBus.receive(info).then()   //建议与receive联用 
myMsgBus.then()                 //会在buffer中取到最近一次的消息,且与其绑定 

msg.onSend

MessageBus向Worker发送消息的回调,回调中返回消息对象

myMsgBus.onSend(fn);        //注册MessageBus的消息发送事件 

todoList例子

模版字符串

<div id="container"></div>
<script id="text" type="text/html">
    <div class="wraper">
        <h2>{title}</h2>
        <h3>Hello,{user.name}</h3>
        <input type="text" 
            value={inputText} 
            on-input={this.onInput($event)}/> 
        <button on-click={this.addTask($event)}>添加</button>
        <button on-click={this.onReset($event)}>清空</button>
        <ul class="test test1" list-container>
            {#list array as option}
                <li>
                    {option.name}
                    <button on-click={this.deleteTask(option_index)}>删除</button>
                </li>
            {/list}
        </ul>
        <button on-click={this.render($event)}>渲染</button>
    </div>
</script> 

创建实例

var tpl = document.getElementById('text').innerHTML;
var myWorker = new Worker('./dist/Worker.js');
var myMsgBus = new MessageBus(myWorker);
 
var myList = new Freemamba({
    template: tpl,
    config: function(data){
        Object.assign(data, {
            title: 'Freemamba todoList',
            user: {
                name: 'jabbla'
            },
            array: [
                {name: 'test1'},
                {name: 'test2'},
                {name: 'test3'}
            ],
            inputText: ''
        });
    },
    onInput: function($event){
        var data = this.data;
        data.inputText = $event.target.value;
    },
    onReset: function(e){
        var data = this.data;
        data.inputText = '';
        this.$render();
    },
    deleteTask: function(index){
        this.$delete(index);
    },
    addTask: function(e){
        var data = this.data,
            inputText = data.inputText,
            array = data.array;
        this.$insert(array.length, {name: inputText});
    },
    render: function(){
        var data = this.data;
 
        this.$replace([{name: '朱潇然'}]);
        this.$render(myMsgBus);
    }
});
 
myList.$inject(document.getElementById('container'));