请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用开发技巧之import篇

1
回复
1725
查看
[复制链接]

5

主题

5

帖子

50

积分

 楼主| 2019-9-16 11:21:00 显示全部楼层 |阅读模式
本帖最后由 管理员 于 2019-9-16 18:41 编辑 不知不觉开发快应用已经大半年了,个人整理了一些开发方面的小技巧,供大家参考下吧。 第一篇,我们先从import开始说起吧。import可能在大家看来是一个非常基础的东西, 但在快应用中,import是否合理使用,是会影响包体大小和代码优雅性的!所以我再讲一讲,大家再听一听。 随着功能的增多,逻辑之间的关系也越来越复杂,日常开发中,我们会写许多工具类js,供页面ViewModel(.ux文件)调用。 比如:util.js,http.js等等。 最早,我的做法是在页面ViewModel需要用到js时,去单独引入。 比如util.js有10个页面用到,就去import 10次。 后来我在排查中发现,这种做法是错误的。 为什么呢?因为快应用并没有使用懒加载的方式,而是在打包时,直接将js打包在了页面文件中。 也就是util.js的代码,被分别复制了10份,放在了每个引入它的页面中。 当import的文件越来越多的时候,只会导致了一个结果,编译出的包很大,而快应用市场对包体大小是有限制的。
小提示:发布APP类快应用时,包体大小不能超过1M
排查出问题后,解决这个问题就变得简单很多,因此我也订了一个开发基本原则:
所有的js只import一次
那具体如何做呢?这里需要2种方案的结合:1、通过this.$app.$def,2:通过global。 为了更好的说明,先定义两个js:util.js和http.js: util.js,里面有一个方法createShortcut()
  1. export default {
  2. createShortcut
  3. }
复制代码
http.js,里面有一个方法post()
  1. export default {
  2. post
  3. }
复制代码
现在我们正式开始! 一、使用this.$app.$def:第一步,所有的js文件,只在app.ux中引入(其他地方不再引入),如:
  1. import http from './http.js'
  2. import util from './util.js'
  3. export default {
  4. util: util,
  5. http: http
  6. }
复制代码
第二步,在页面ViewModel中,便可以直接通过this.$app.$def调用,代码如下:
  1. <template>
  2. <div>
  3. <input type="button" value="创建快捷方式1" onclick="$app.$def.util.createShortcut()"/>
  4. <input type="button" value="创建快捷方式2" onclick="createShortcut2()"/>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. createShortcut2() {
  10. let util = this.$app.$def.util
  11. util.createShortcut()
  12. }
  13. }
  14. </script>
复制代码
上面的例子中,演示了一个简单的this.$app.$def的调用过程。对于那些在页面中引入的js,都可以采用这种方式改造,编译后的包体大小会显著下降。 但在实际的项目里,我们可能还会遇到一些更复杂的情况。 比如,在用户【创建快捷方式】以后,需要请求服务器给用户发放一些奖励, 也就是util.createShortcut()里需要调用http.post()方法。 而在上面的例子中,$app.$def是无法在util.js和http.js中被访问到的。 虽然可以学习ViewModel的做法,将$app对象注入到util.js和http.js中,但我们还有另一种更好的选择:
注入到global
二、使用globalglobal是Node.js体系中的一个特殊对象,它及其所有属性可以在任何地方被访问到,即全局对象。 具体的改造代码如下: 1、http.js:
  1. const $ = Object.getPrototypeOf(global) || global;
  2. export default $.http = {
  3. post
  4. }
复制代码
2、util.js:
  1. const $ = Object.getPrototypeOf(global) || global;
  2. export default $.util = {
  3. createShortcut() {
  4. ...
  5. ...
  6. //调用$.http.post,请求服务器发放奖励
  7. $.http.post(...)
  8. },
  9. }
复制代码
可以看到,由于通过向global注入,http中的方法可以被访问到了,同样util中的方法也能被全局访问。
注意:向global注入时,请确保变量名是全局唯一的
以上,就是整个import的改造思路了。代码量并不多,非常简洁,但实现的效果却是非常惊人的,包体大小会下降的非常明显,希望对大家有所帮助。 作者末破桑,一个碰巧写了快应用的服务端,关注快应用及快游戏,个人微信:parith。
快应用开发技巧之lock篇 https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=1981
回复

使用道具 举报

23

主题

33

帖子

280

积分

2019-11-12 20:37:11 显示全部楼层
如何测试或者打开文件看import了10次,也复制了10次呢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册