jetee-less
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Jetee - 轻量级的渐进式 Web MVVM框架

    Jetee是一个前端的轻量级的渐进式 MVVM框架,不依赖任何第三方库。采用数据双向绑定,以数据驱动视图,倡导组件化开发。



    文档 | jetee-cli

    0. 快速入门

    0.1 cdn 使用

    <!DOCTYPE html>
    <html lang="en">
        <head><meta charset="UTF-8"></head>
        <body>
            <div id="app"></div>
            <script src="https://cdn.jsdelivr.net/npm/jetee/jetee.min.js"></script> 
            <script>
                new Jet({
                    ele: '#app',
                    style: '.jetee{color: #b344c9;font-size: 40px;text-align: center;margin-top: 100px;}',
                    template: '<div class="jetee" j="message">$ + "!"</div>',
                    data: {
                        message: 'Hello Jetee!'
                    }
                });
            </script> 
        </body>
    </html>

    0.2 npm 使用

    安装

    npm i jetee
    
    0.2.1 new Jet 创建一个Jetee应用
    import Jet from 'jetee';
     
    new Jet({
        ele: '#app',
        // 如果使用 vscode 开发推荐使用 es6-string-css 和 es6-string-html 插件
        style: /*css*/`.jetee{color: #b344c9;font-size: 40px;text-align: center;margin-top: 100px;}`,
        template: /*html*/`<div class="jetee" j="message">$ + "!"</div>`,
        data: {
            message: 'Hello Jetee!'
        }
    });
    0.2.2 Jet.create + html-loader 创建一个Jetee应用

    该种方式需要安装 html-loader 并配合 webpack使用

    html 文件: app.html

    <style>
        .jetee{color: #b344c9;font-size: 40px;text-align: center;margin-top: 100px;}
    </style> 
    <div class="jetee" j="message">$ + "!"</div>
    <script>
        new Jet({
            data: {
                message: 'Hello Jetee!'
            }
        });
    </script> 
    import Jet from 'jetee';
    import app from './app.html';
     
    Jet.create(app);
    // 或者指定一个容器 Jet.create("#app", app);
    0.2.3 Jet.create + json 创建一个Jet应用
    import Jet from 'jetee';
     
    Jet.create({
        // 如果使用 vscode 开发推荐使用 es6-string-css 和 es6-string-html 插件
        style: /*css*/`.jetee{color: #b344c9;font-size: 40px;text-align: center;margin-top: 100px;}`,
        template: /*html*/`<div class="jetee" j="message">$ + "!"</div>`,
        data: {
            message: 'Hello Jetee!'
        }
    });
    // 或者指定一个容器 Jet.create("#app", {});

    1. 介绍

    Jetee 是一款轻量级、渐进式的MVVM框架 Jetee,详细使用和安装教程请点击这里 Jetee不依赖任何第三方库,采用数据双向绑定,以数据驱动视图。

    Jetee可以在非服务器环境中开发。 Jetee可以通过引入script标签的方式局部使用,从而可以与您已有的项目完美结合,实现渐进式的Web开发。

    您也可以通过 jetee-cli 建立项目 或是 手动下载 Jetee模板 来在服务器环境中开发。

    2. 图解

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

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

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

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

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

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

    Jetee 图解

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

    Jetee 生命周期

    3. 一个简单的Jetee实例

    以下是一个简单的Jetee组件

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

    <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 Jetee',
                user:{
                    name:'theajack',
                    age:24
                }
            },
            func:{
            }
        })
    </script> 

    4. 插件

    Jetee 目前支持以下几个插件:

    1. jetee-router : 路由插件
    2. jetee-valid : 表单验证插件
    3. jetee-lang : 国际化语言插件
    4. jetee-jui : 契合Jetee的ui库
    5. jetee-less : 运行时less编译插件
    6. jetee-stat : 开发打印性能插件

    Install

    npm i jetee-less

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    387 kB

    Total Files

    5

    Last publish

    Collaborators

    • theajack