Jet.js:一款轻量级、渐进式的MVVM框架

介绍

笔者今天介绍一款轻量级、渐进式的MVVM框架 Jet.js，详细使用和安装教程请点击这里 Jet不依赖任何第三方库，采用数据双向绑定，以数据驱动视图。

Jet可以在非服务器环境中开发，但是在非服务其环境中无法使用路由功能和jload属性以及无法使用完整的js模块规范。 Jet可以通过引入script标签的方式局部使用，从而可以与您已有的项目完美结合，实现渐进式的Web开发。

您也可以通过 jet-js-cli 建立项目 或是 手动下载 Jet模板 来在服务器环境中开发， 服务器环境基于lite-server。

当然若您需要使用es6进行您的项目开发，您可以在安装jet-js-cli后通过jet build命令将es6转换为es5在生产环境中使用。

图解

在使用和学习Jet之前，先通过一张图了解一下Jet是如何工作，以及Jet能做些什么。

以下是一个标准的Jet应用的所有主要部分和工作流程。

Jet将 DOM树映射成Jet组件树，Jet组件由new Jet()声明， 每一个Jet组件由源数据、响应数据、函数、Jet元素树、生命周期和非响应数据构成。 其中Jet元素树对应的是由Jet容器中的DOM树映射而成。

Jet元素分为两大类：绑定元素和工具元素。这些元素都继承自Jet.Base，Jet元素是Jet MVVM模式的核心。 每个Jet元素由源数据、响应域数据、DOM元素、响应域函数队列、$regist、$refresh还有其他一些方法组成， 其中View对应的就是DOM元素，Modal对应的是源数据，其他部分构成ViewModel，负责源数据与DOM之间的双向绑定。

除此之外，Jet还包含一些外围设施供开发者开箱即用，帮助更高效的构建Web应用。

Jet组件包含的特性和Jet元素包含的修饰属性，为Jet应用赋予更强大的功能。

每一个Jet组件都有它的生命周期，包含以下9个， 大致流程请参考下图:

一个基本的Jet实例

以下是一个简单的Jet组件 点击这里 可以在线使用这个例子

<div j='message'></div><br>
<div j='user'>
    <div j=name>'姓名:'+$</div>
    <div>年龄:<input j='age' type='text' class='j-input' jon='input:console.log(this.user.age)'/></div>
    <div j='age'>($<18)?'未成年':'成年人'</div>
</div>
<script>
    new Jet({
        data:{
            message:'Hello Jet',
            user:{
                name:'theajack',
                age:24
            }
        },
        func:{
        }
    })
</script>

点击这里 可以在线使用这个例子