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

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

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

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.       
  12.       util.createShortcut()
  13.     }
  14.   }
  15. </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.    
  7.     //调用$.http.post,请求服务器发放奖励
  8.     $.http.post(...)
  9.   },
  10. }
复制代码
可以看到,由于通过向global注入,http中的方法可以被访问到了,同样util中的方法也能被全局访问。
注意:向global注入时,请确保变量名是全局唯一的

以上,就是整个import的改造思路了。代码量并不多,非常简洁,但实现的效果却是非常惊人的,包体大小会下降的非常明显,希望对大家有所帮助。

作者末破桑,一个碰巧写了快应用的服务端,关注快应用及快游戏,个人微信:parith。



快应用开发技巧之lock篇
https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=1981





回复

使用道具 举报

23

主题

33

帖子

280

积分

6 天前 显示全部楼层
如何测试或者打开文件看import了10次,也复制了10次呢
回复

使用道具 举报

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