pandyle 1.2.0 发布，简单的前端 mvvm 库

内容简介：pandyle 是一个基于 jquery 的 MVVM 库。它为 jquery 提供了基本的模板和组件功能。pandyle 秉承 jquery -- write less, do more 的设计理念，主要关注点即在于简单，易学易用，努力减少你书写的代码量，并且更贴...

pandyle 是一个基于 jquery 的 MVVM 库。它为 jquery 提供了基本的模板和组件功能。pandyle 秉承 jquery -- write less, do more 的设计理念，主要关注点即在于简单，易学易用，努力减少你书写的代码量，并且更贴合传统的jquery的书写方式。

特点

• 简单：非常简单易上手，无需学习 webpack、es6 等前端知识，基本看一遍文档即可进行开发

• 兼容性良好：pandyle 的兼容性取决于 jquery 版本，因此使用 1.X 版本的 jquery 即可兼容至 ie8 浏览器

• 输入与视图模型分离：pandyle 使用 inputs 类来独立的处理用户输入，根据表单元素的 name 属性自动生成数据模型，无需事先定义

• 同步操作：pandyle 的所有操作都是同步的，代码逻辑清晰的同时保证了同其他 jQuery 插件的良好兼容

• 资源化的组件：pandyle 将组件视为一种资源，这意味着你可以像加载图片一样任意加载你想要的任意组件，只需在 p-com 指令中写上组件的路径即可，无需事先编译或引入特定的组件代码。此外，在 pandyle中，你可以很轻松的使用 p-bind 来动态的绑定组件，使页面能够完全根据数据来动态生成，如以下示例：

    <div class="main">
        <div p-for="components" p-as="item">
            <div p-bind="p-com:{{@item.type}}" p-context="@item.data">
        </div>
    </div>
  
    <script>
        Pandyle.config({
            comPath: {
                Default: './otherComponents/{name}.html',
                Menu: './otherComponents/menu/{name}.html',
                MyCom: './components/{name}.html'
            }
        })
  
        var book1 = {
            title: 'book1',
            author: 'rrr',
            price: 20,
            num: 10,
            tags: ['tag1', 'tag2', 'tag3']
        };
  
        var list = [
            {
                value: 1,
                name: '选项1'
            },
            {
                value: 2,
                name: '选项2'
            }
        ]
        var vm = $('.main').vm({
            components: [
                {
                    type: 'test'
                },
                {
                    type: 'MyCom.book',
                    data: book1
                },
                {
                    type: 'list',
                    data: {
                        title: '列表1',
                        name: 'checkList',
                        list: list
                    }
                }
            ]
        })
    </script>

适用场景

• 老项目重构：这可能是 pandyle 最能发挥作用的场景。很多老项目中使用了大量的 jquery 代码及 jquery 插件，使用其他框架进行重构的话可能会引起大量的修改，使用 pandyle 能以最小的代价对老项目完成 mvvm 的改造
• 兼容性要求较高的项目：一些特定领域的项目可能仍然要求兼容 ie8 甚至 ie8 以下的浏览器，不适合使用三大框架，这种情况下可以尝试使用 pandyle 作为替代
• 后端人员开发：pandyle 对后端开发者是友好的，无需掌握现代前端的一系列 工具 和语法，后端开发者可以轻松上手
• 小项目：对小项目来说，pandyle 的开发效率可能更高，有兴趣的可以尝试一下

文档

在wiki中查看文档

更新内容：

• 代码大量重构

• 修复表达式运算中对 null 等特殊字符的处理

• 修复对 ! 运算符的处理

• 修复 vm.get 获取对象时报错的 bug ；在组件的 onLoad 方法中添加对当前组件根元素的引用

• 当 checkbox 单独使用时，inputs 中对应的字段类型修改为布尔值

• 添加组件私有数据

• 修复 p-context 指令子孙节点的 context 不变的 bug

以上所述就是小编给大家介绍的《pandyle 1.2.0 发布，简单的前端 mvvm 库》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 前端架构详谈（1）纯前端发布
• 前端每周清单：大前端技术生命周期模型；WWDC 发布 Safari 11；面向生产环境的前端性能优化
• 前端框架 Bootstrap 4.5.0 发布
• 前端框架 Bootstrap 4.4.0 发布
• 前端框架 Bootstrap 5.0 alpha 发布
• 仿今日头条 Gfast CMS 前端发布

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。