标签：
本节非常重要，优劣不同的写法会有明显的代码体积差异，而代码体积越小，会获得更快的加载速度。
js 封装要支持 Treeshaking
推荐级别：强烈
Treeshaking 是 js 打包的一个重要概念，在蓝河应用中同样支持 Treeshaking，他可以打包编译的时候移除未使用的代码。
要在封装 js 时牢记两点：
1、能用函数实现的优先函数实现，认知上要慎重使用 class 和 Object，只有需要频繁创建实例的情况才需要考虑到使用 class。
2、慎重使用 export default 导出
反例 1
const a = 1
const b = () => {}
// a和b被捆绑导出
export default { a, b }
反例 2
// 同样的，a 和 b 被绑定在对象上面了，这里如果有使用class习惯的同学一定要注意这点
export default class Utils {
a() {},
b() {}
}
反例 3
// 这里和class一样
export default function Utils() {
this.a = () => {}
this.b = () = {}
}
反例 4
// 这里和class一样
export default function Utils() {
return {
a() {},
b() {},
}
}
正例 1
const a = 1
const b = () => {}
export { a, b }
正例 2
export const a = 1
export const b = () => {}
按需引入
推荐级别：强烈
需要使用的方法/变量/组件，才去 import 导入，不要导入用不到的内容到当前页面内。
反例 1
用到一个导入两个
import { sayHi, sayBye } from './say.js'
sayHi('Vance')
反例 2
import * as say from './say.js'
say.sayHi('Vance')
正例
用到 sayHi 导入 sayHi
import { sayHi } from './say.js'
sayHi('Vance')
不要使用 CommonJS 规范
推荐级别：强烈
虽然蓝河应用支持使用 require 这样子的写法，但一定要避免这样子写。
反例
const userInfo = require('./userInfo.js')
正例
import userInfo from './userInfo.js'
// 注意这里的引入仅为示例，实际情况也要尽可能避 免userInfo 全量引入
使用常量
推荐级别：强烈
使用常量可以让代码更好的维护，同时也可以达到 Treeshaking 的效果。
反例
const a = {
a1: 'a1',
a2: 'a2',
a3: 'a3',
}
const b = ['a1', 'a2', 'a3']
正例
const a1 = 'a1'
const a2 = 'a2'
const a3 = 'a3'
const a = {
a1: a1,
a2: a2,
a3: a3,
}
const b = [a1, a2, a3]
慎重引入第三方包
推荐级别：强烈
引入外部 npm 包之前请特别留意包的体积大小，如果体积大要按需裁剪源码后再引入。非必要情况下尽量自己实现，不建议直接引入第三方 npm 包，因为那大多是适配 node、浏览器平台的，polyfill 代码较多，不适合嵌入式平台
反例
import _ from 'lodash'
export default {
onInit() {
const list = ['a', 'b', 'c']
_.join(list, '~')
},
}
正例
export default {
onInit() {
const list = ['a', 'b', 'c']
list.join('~')
},
}
慎重 @import 样式
推荐级别：强烈
样式是没有做 Treeshaking 的，引入一个 css 样式文件，可能会打包进入无用的 css 代码。
反例
<template>
<div class="yellow">黄色</div>
<div class="black">黑色</div>
<div class="green">黄色</div>
</template>
<style>
@import './color.css';
</style>
正例
<template>
<div>
<div class="yellow">黄色</div>
<div class="black">黑色</div>
<div class="green">黄色</div>
</div>
</template>
<style>
.yellow {
background-color: yellow;
}
.black {
background-color: black;
}
.green {
background-color: green;
}
</style>
页面 template 一定要小
推荐级别：鼓励
设计应用的时候，尽可能拆成多个页面去实现。不要使用 if 的方式，将页面的多个状态全写进一个页面文件里通过参数传递控制。
反例
<div>
<div if="{{status === 1}}">
<div>A功能的展示区域</div>
...
</div>
<div if="{{status === 2}}">
<div>B功能的展示区域</div>
...
</div>
<div if="{{status === 3}}">
<div>C功能的展示区域</div>
...
</div>
</div>
正例
//创建A页面 pageA.ux
<template>
<div>A功能的展示区域</div>
</template>
//创建B页面 pageB.ux
<template>
<div>B功能的展示区域</div>
</template>
//创建C页面 pageC.ux
<template>
<div>C功能的展示区域</div>
</template>
避免 manifest 配置冗余
推荐级别：建议
文件也要遵循按需引入的原则，如 manifest 中的配置中，没用到的 feature、权限可以不写进来
避免 i18n 配置冗余
推荐级别：建议
国际化 i18n 配置用不到的 key 要移除，另外如果只有一种语言请不要使用国际化配置。
尽量使用箭头函数
推荐级别：建议
使用箭头函数代替 function，可以达到最大程度地减少代码体积。
反例
function getUserInfo() {}
正例
const getUserInfo = () => {}
对象的属性或方法名称要简短
推荐级别：建议
对象上面的属性/方法名称，尽量的简短，这里是由于属性是无法 tree-shaking，过长的属性/方法名会占用代码体积。
反例
const user = {
userName: 'Vance',
}
正例
const user = {
name: 'Vance',
}
区分生产环境和测试环境
推荐级别：建议
避免将调试阶段的数据、代码带到生产环境上，应该用编译时参数而非运行时参数来区分 编译环境变量
合并公共样式
推荐级别：鼓励
应用中的重复样式应尽量抽成公共样式使用，避免在多个 class 里重复写相同样式。
反例
<template>
<div>
<div class="box1"></div>
<div class="box2"></div>
<text class="box3"></text>
</div>
</template>
<style>
.box1 {
width: 48px;
height: 48px;
}
.box2 {
background-color: #000000;
width: 48px;
height: 48px;
}
.box3 {
font-size: 60px;
width: 48px;
height: 48px;
}
</style>
正例
<template>
<div>
<div class="box-size"></div>
<div class="box-size bg-color"></div>
<text class="box-size font-size"></text>
</div>
</template>
<style>
.box-size {
width: 48px;
height: 48px;
}
.bg-color {
background-color: #0000ff;
}
.font-size {
font-size: 60px;
}
</style>标签： 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。