快应用开发技巧之import篇

不知不觉开发快应用已经大半年了，个人整理了一些开发方面的小技巧，供大家参考下吧。

第一篇，我们先从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()

export default {
  createShortcut
}

http.js，里面有一个方法post()

export default {
  post
}

现在我们正式开始！

一、使用this.$app.$def：

第一步，所有的js文件，只在app.ux中引入（其他地方不再引入），如：

import http from './http.js'
import util from './util.js'

export default {
  util: util,
  http: http
}

第二步，在页面ViewModel中，便可以直接通过this.$app.$def调用，代码如下：

<template>
    <div>
        <input type="button" value="创建快捷方式1" onclick="$app.$def.util.createShortcut()"/>
        <input type="button" value="创建快捷方式2" onclick="createShortcut2()"/>
    div>
template>

<script>
export default {
    createShortcut2() {
      let util = this.$app.$def.util
      
      util.createShortcut()
    }
  } 
script>

上面的例子中，演示了一个简单的this.$app.$def的调用过程。
对于那些在页面中引入的js，都可以采用这种方式改造，编译后的包体大小会显著下降。

但在实际的项目里，我们可能还会遇到一些更复杂的情况。

比如，在用户【创建快捷方式】以后，需要请求服务器给用户发放一些奖励，
也就是util.createShortcut()里需要调用http.post()方法。

在上面的例子中，$app.$def是无法在util.js和http.js中被访问到的。
虽然可以学习ViewModel的做法，将$app对象注入到util.js和http.js中，但我们还有另一种更好的选择：

注入到global

二、使用global

global是Node.js体系中的一个特殊对象，它及其所有属性可以在任何地方被访问到，即全局对象。

具体的改造代码如下：

1、http.js：

const $ = Object.getPrototypeOf(global) || global;

export default $.http = {
  post
}

2、util.js：

const $ = Object.getPrototypeOf(global) || global;

export default $.util = {
  createShortcut() {
    ...
    ...
   
    //调用$.http.post，请求服务器发放奖励
    $.http.post(...)
  },
}

可以看到，由于通过向global注入，http中的方法可以被访问到了，同样util中的方法也能被全局访问。

注意：向global注入时，请确保变量名是全局唯一的

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

我是一个碰巧写了快应用的服务端，关注快应用及快游戏，个人微信：parith。