们经常在选择哪个前端框架进行开发而苦恼,下面对Framework7(以下写作F7)和vue的主要区别进行粗略比较,
让我们一同建立一个更有效的支持,我有时间会不停增加
(有问题欢迎提出问题和改进建议,更欢迎指正错误,此贴会根据问题总结情况进行完善)。
相同和相似处
- 都支持单文件方式加载和创建component
- 组件的主要属性非常相似
- 都有强大的路由
不同之处
- F7提供了ui的美化和很多动画和过渡,不过同时也会带来一些黑盒子的情况
- vue在ui的美化、动画和过渡基本要靠开发者自行定制,当然可以利用一下第三方插件
- F7同时提供了DOM7作为DOM操作的支持,书写方式非常象jquery
具体编程过程中的困扰
1、首先要改变编程习惯,从vue过渡还好说,从jquery过渡要注意尽量别再直接$(document)对DOM元素进行操作,那样造成的浏览器资源消耗很严重。
2、强烈推荐用component的方式加载页面,为此F7[v3.2]后引入了virtualnode的方式,很象mvvm,可以通过$setState()属性调用随时遍历所在页面的数据变动。
3、采用F7的首先是注意严格按照layout层级结构的要求进行html文件编写index页面和模板代码
容易出现的错误:因为层级结构不对造成页面显示不了或者init过程失败
4、关于js文件加载顺序,当F7和Cordova配合的时候应该是先cordova.js,后framework7.js
容易出现的错误:v3以前的版本没有对Cordova的加载和deviceready进行监控,容易出现cordova和F7实际加载顺序不对出现故障。
5、关于this,由于组件加载方式是先插入DOM,然后绑定事件和加载方法,所以在组件内部的代码编写一定要用var self = this; self.$… 防止自己挖坑,追踪麻烦。
6、关于@event,尽量不要再使用onClick这样的绑定方式,通过@符号来进行事件绑定方法是比较安全的方式,不过没有vue的@keyup.Ener这样的参数判断支持
7、F7还支持很多在element上的class=“somekey”完成自动化
- <div class=“view init-view” 方式完成view的初始化,但这个属性必须在app.init之前存在
- <a="/somepage/" class=“back” 如果“back”实在app.init前存在,会立即执行返回上一页的操作,无法打断,无法通过删除history阻止。
8、关于on,$el.on(‘event’,func…是现在就绑定到$el上,只能支持已存在的,如果$el刷新就无效了!$el.on(‘event’,selectString,func…支持委托绑定,DOM发生变化会重新绑定,刷新后依然有效。
9、关于view/router,这个基本上可以说是F7的核心了,基本所有你想要的结果都是可以通过componenturl的方式实现,而且用它给的方式可以避免出现变量、函数泄露。至于那些提供的login screen、popup等等都是针对具体场景提供的简化版的它。
10、敲黑板,敲黑板,敲黑板, 组件加载,这里必须要说一下结合上面9提出的问题,请大家一定要记得,所有我们要实现的类似于一个页面的东东都是可以通过组件的方式加载的 这一点和vue的一部分非常象,当我们不知道该怎么做了就参考一下这个代码
http://framework7.io/docs/router-component.html#component-context
这里有很详细的页面组件加载的方式和调用
11、关于@的补充,这个是给组件加载的方式专门用的,别自己按照自己的理解当成传统的绑定方法用,因为这里隐含着绑定的函数的作用域,就像我们原来说的上下文context。他是组件方式加载过程中F7进行“页内”的函数的绑定,不是全局函数!
12、关于js文件加载顺序,一般来说比较正常的加载顺序是 --cordova.js --framework7.js --app.js。因为我们要根据自己的开发需要调用相关支持,所以并不是全部按照这样的方式才正确,如果调用设备不是主要需要,那也可以优先加载F7,但是要记住所有关于设备交互代码不能优先编译
13、关于动画的取舍,我们知道F7的强项就是漂亮的过场和完美的响应式动画,但并非所有这些都是可以带来很好的用户体验的,数据加载过程使用动画过渡是很好的,但是数据变动刷新的过程就要谨慎选择了。只有一个setstate来遍历状态并不能像vue的实时变动跟踪。要注意开销太大带来的卡顿。
to be continue