jtpl
v0.1.4
Published
前端框架
Downloads
4
Readme
类似vuejs 2.x单文件前端框架
框架慢慢完善中,欢迎交流。 支持浏览器版本:ie11,chrome,safari,firefox
安装使用
npm i -S jtpl
npm i -S jtpl-loader
npm i -S jtpl-css-loader
使用说明
- 必须通过webpack构建
- 需要配置两个loader
- jtpl-loader,
- jtpl-css-loader
- 跟vuejs 2.x单文件使用类似
- 只能存在一个跟元素
- 标签必须要闭合
- 在文件任何地方需要用到动态数据都使用 {{expression}} 表达式,指令除外
- 具体使用可以参考Jtpl-example-project
已经实现的功能
- 表达式求值
- 嵌套子组件,父子组件传值
- 组件css样式隔离,互不污染
- 双向数据绑定
- 数组操作的监听
- 指令,目前实现了j-model,j-show,j-for
- 增加数据computed,watch feature
- 增加组件slot feature,方便封装通用组件
后续计划实现的功能
- 表达式可以使用函数
- 数据逐级监听(目前传给子组件的数据当发生变化时候,子组件相应的视图不会更新,只能手动触发子组件的方法更新)
- 同级组件数据通信,类似vuex
- 路由
- mixin,plugin功能,更多指令
- 异步加载
- 虚拟dom
- 单元测试
- 改成ts实现
- 官网文档
难点心得
- 模版解析匹配标签的问题,嵌套解析
- 表达式求值的问题
- 组件间的css样式污染问题
- 双向数据绑定,当里面有嵌套对象和数组的时候,怎么匹配到对应的视图更新
- 数据视图的理解划分
- 渲染数组,j-for指令,要考虑嵌套for指令监听,求值,难度五颗星^_^
问题
- 文件模版里面的js怎么调试,如何把sourceMap映射到这个文件,现在要调试只能把js单独抽出一个文件引入到文件模版中