# Bind

**Repository Path**: mapinxue/bind

## Basic Information

- **Project Name**: Bind
- **Description**: 双向的可编辑文档的前端框架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://pinxue.xyz
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-09
- **Last Updated**: 2021-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Frontend

## README

# todo

+ use document fragment to render html
+ virtual DOM
+ Event
+ props
+ template

<!-- # 多线程的简单前端框架

## 支持的接口

+ 浏览器多线程接口
  + threads( .js )

  ```js
  var thread = new threads({
    url:['worker1.js','worker2.js','worker3.js'],
    threadsNumber:5,
    messagePost:{
        0:"this is true",
        1:"this is one",
    }})
    console.log(thread[0].returnMessage);
  ```

+ page
  + title
  + url
  + ...props

     ```js
    var mypage = new Page({
        title:'mypage',
        //...
    })
    ```

+ 条件渲染
  + bind-if
  + bind-else
  + bind-show
  
    ```html
    <div id="testif">
        <div bind-if="if">
            if
        </div>
        <div bind-else>
            else
        </div>
        <div bind-show="if">
            show
        </div>
    </div>
    ```

    ```js
    //js里这么写
    var testif = new mpx({
     id:'testif',//dom 的 id
     data:{
        if:false//实例testif绑定的if      
        },
    } 
    });
    testif.if();
    ```

+ 列表渲染
  + bind-for

    ```html
    <div id="testfor" bind-for="todos"></div>
    ```

    ```js
    var testfor = new mpx({
     id:'testfor',
     data:{
         todos:[1,2,3,4]
        }
    })
    testfor.forinterrater(); 
    ```

+ 事件添加
  + bind-click
  + bind-...events等其他事件

  ```html
    <div id="test" bind-click="settwo">
        你点击了<span bind-model="msg"></span>次
    </div>
  ```

  ```js
  var test = new mpx({
    id: 'test',
    data:{
        msg: 1
    },
    methods:{
        settwo:function(){ 
            test.data.msg ++;
            test.model();
        }
    }})
    test.model();
    test.events();
  ```

+ 数据绑定
  + bind-model

    ```html
    <div id="testinput">
        <input type="color" bind-modal="testin">
        <div bind-modal="testin"></div>
    </div>
    ```

    ```js
    var testinput = new mpx({
    id:'testinput',
    data:{
        testin:45453
    }})
    testinput.iterator();
    ```

+ 模版DOM
  + template ( .js )  正在实现

#

## 关于多线程的注释

+ 逻辑
  + url是工人线程的地址( 相对地址不需反斜杠 )
  + threadNumber是要开启的线程数( 有最大线程保护，详情可查看代码)
  + messagePost是发送给子线程的信息 -->