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

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 等特殊字符的处理
修复对 ! 运算符的处理

扫描二维码关注公众号，回复： 6561483 查看本文章
修复 vm.get 获取对象时报错的 bug ；在组件的 onLoad 方法中添加对当前组件根元素的引用
当 checkbox 单独使用时，inputs 中对应的字段类型修改为布尔值
添加组件私有数据
修复 p-context 指令子孙节点的 context 不变的 bug

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

特点

适用场景

文档

更新内容：

猜你喜欢