这篇文章纯属个人想法，如果有错误还望各位大佬多多指教！

从事前端工作3年左右，一直致力于如何把页面做的更好看，不注重代码的性能，2020年末在关注的几个前端公众号文章里发现，前端不只是页面的美观，还有给予用户的性能体检，在文章里体会到了将自己写的20行代码，去掉了废话只用4，5行就完成同样的功能的新奇。

所以励志在21年里我将会在代码的优化和复用性，进行深入的学习。

有一篇文章是说我们常用的if-else，这篇文章将初级前端程序员的现状说很明确，只知道if–else，却不知道 if return

【举例】：判断是否是带有刘海屏幕的设备

if (app.globalData.isIphoneX) {
  that.setData({
    isiphoneX: 'page_title_X'
  })
}else{
  that.setData({
    isiphoneX: ''
  })
}  

这就是一开始我写出来的代码，功能非常简单却用了9行代码。阅读文章之后，改过的代码

if(app.globalData.isIphoneX) this.setData({ isiphoneX:'page_title_X' })

为什么else里面代码是无用的呢，我仔细想了一下判断机型一次就够了，不可能出现这个页面第二次onload之后这个手机型号改变了，所以else就是一段废话，去掉这个废话就用了一行代码，我自己写完之后也是痛骂之前的自己，就是一个蠢*，虽然这点并不会项目整体带来太多的改善，但是思维的改变可以让你更好的去改善及优化代码

下面这个是我阅读的文章链接，看完之后给我的触动很大，希望也对个别的前端人有帮助，（也是真的觉得提升写代码的水平会涨工资）

https://mp.weixin.qq.com/s/A9OOawQakNmgvzF_CJY8bw

上面说的也就是代码优化路上的冰山一角，优化代码的方式很多很多，接下来就说说封装吧

封装：个人理解，将一些复用性高的代码进行封装，可以有效的减少代码冗余，方便维护升级。

我们在开发小程序时候，用到最多的wx.request，随着项目越来越大，请求也就越来越多，接口升级，请求地址发生了改变，这个接口在很多页面都用到了，那么这个代码的修改维护工作量很大，很浪费时间，毫无意义的重复工作。

所以我的做法将小程序会用到的所有请求地址，做了一个全局变量api，统一到一个js文件里去维护，请求时候通过引入js，api.请求地址去引用这个变量

//api.js
var url = 'https://requestUrl?param'(地址非真实地址)
api={
     index:{
         banner:url+'getBannerList'
    }
}
module.exports = api;

//index.js
const api = require("api.js");
wx.request({
  url: api.index.banner
  ...
})

如果再有请求地址的改变，我们只需要改动api.js里的地址就可以了，后期项目有了一定的规模，在有类似的改用，你就会发现这样的代码维护起来简直爽上天。

这是对请求地址的封装。

当小程序正式上线，为了能准确地捕获请求错误的原因，我们需要在请求时候将fail的原因反馈给我们管理员，上传到小程序的实时指日上，并且给用户一个友好的提醒，所以wx.request如下

wx.request({
  url: api.index.banner,
  success: function (resd) {
    if (resd.data.status != 1) {
     //请求出错，将原因反馈给开发人员
         。。。
        //给用户提示
     wx.showToast({
        title: '系统出现点小问题',
        mask:true,
        duration:3000,
        icon:'none'
       })
         return false;
    }
     //请求成功
  },
  fail:function(e){
       //请求出错，将原因反馈给开发人员
       。。。
       //给用户提示
       wx.showToast({
         title: '请求失败，请检查网络',
         mask: true,
         duration: 3000,
         icon: 'none'
       })
     }
  })      

上面代码确实可以实现给用户友好提示和给管理员提醒两个功能，但是缺点是以后每个接口都要去写一次相同的提示代码，这个重复工作也是毫无意义的，而且冗余的代码会增加小程序代码的体积。所以也是用封装的思路将wx.request()封装成一个公共函数

//api.js
/**
 * 封装wx.request()
 * [@param](/user/param) {请求页面主要用来提示管理员那个页面出现了问题} page 
 * [@param](/user/param) {请求地址} url 
 * [@param](/user/param) {请求参数} data 
 * [@param](/user/param) {请求头} header 
 */
function request(page, url, data, header) {
   //用Promise封装
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      method:"POST",
      data: data != '' ? JSON.stringify(data) : data,//是否需要参数
      header: header != '' ? JSON.stringify(header) : header,//是否需要header
      success: (res) => {
        if (res.data.status == 1) {
          //将获取的数据回传
          resolve(res.data.data);
        } else {
          //系统自定义一场掉用log提醒，记录
          log.datafun(page, url, res.data.errMsg, 'unionid:' + unionid!=null ? unionid : '').then(function () {
            wx.showToast({
              title: '系统出现点小问题',
              mask: true,
              duration: 3000,
              icon: 'none'
            })
          })
          reject(res)
        }
      },
      fail: (e) => {
        log.datafun(page, url, e.errMsg, 'unionid:' + unionid != null ? unionid : '').then(function () {
          wx.showToast({
            title: '请检查您的网络链接',
            mask: true,
            duration: 3000,
            icon: 'none'
          })
        })
        reject(e)
      }
    })
  })
};
module.exports = request;

log.datafun是我将管理员提示和小程序实时日志进行了封装处理，上面就是我将wx.request进行了封装，很简单，满足我们公司现在所有业务接口，同时也满足了减少代码量的要求，更加便于维护

调用方法

const api = require("api.js");
api.request('请求页面'，api.index.banner).then(function(res){
//请求成功后页面逻辑
}).catch(function(e){
//请求失败后页面逻辑
})

上方就是我对封装的一个理解，可能理解的有些浅薄，如果有大佬看到后能做出指点或者意见。

此文章只代表我个人的理解，也是为了记录一下我成长过程，如果有幸能帮助到您，希望您给点个赞，欢迎大家留言来批

下篇文章会记录一下我对组件的理解，感谢阅读