阅读 2664

最近写代码的感悟,如何摆脱搬砖

曾经看过一个词,叫"前端赋能",这个词可能有点装逼,但是在我理解,就是造轮子,造一些对自己有帮助的轮子。我觉得这是一个摆脱板砖的方法。

打点模块的解耦

我最近常做webApp的是一个基于混合开发的h5页面,它是一个一对多的产品,里面有很多地方需要手动打点。例如我们常用的adjust.adjust打点时需要token和event key,token相当于这个app的id,key就是对应事件的id.在最之前,我都是将app token和event key,保存到一个文件中,然后在需要的地方引用。 例如这样:

'My App Name':{
	appToken:'xxxxx',
	event1:'yyyy'
}
复制代码

这样使用的时候,只需要按照我自己的app的名字去取就行了,如果不存在就不记录事件。

但是这样有一个问题,每次当我需要新增一个app的时候,就需要重新打包上传,这样很麻烦,我产生了解耦的想法。

但是这个token和key虽不算什么敏感信息,但是也不能随便暴露,如果有人拿到这两个数据就可以记录事件,可能会导致事件记录不准备。因此,自然而然的想到了加密。

const keys = require('./adjustKeys.config')
const AES = require("crypto-js/aes")
const utf8 = require('crypto-js/enc-utf8')
const path = require('path')
const fs = require('fs')
const encryptKey = 'test' //加密key,可以随便设置

function encryptString(){
let str = ''
  for(const k in keys){
    const obj = keys[k]
    str+=`${k}|`+
    `${obj.appToken}|`+
    `${obj.event1}|`
}
 const willEncrypt  = utf8.parse(str)
 let encrypted = AES.encrypt(willEncrypt,encryptKey) 
 encrypted = encrypted.toString()
}
复制代码

加密完成后,难道还需要自己复制一遍吗,那还叫程序员?于是,加上一个写入文件

function writeFile(str){
  const filePath = path.join(__dirname,'./dist','./js','./events.js')
  try {
    fs.writeFileSync(filePath,`window.keyOfAdjust='${str}'`)
    console.log('写入文件成功')
  } catch (error) {
    console.log('写入文件出错')
    console.log(error)
  }
  if(process.env.NODE_ENV==='development'){
    process.exit(0)
  }
}
复制代码

这样每次修改配置文件的时候,只需要重新加密写入一次即可。为了方便,在package.json里添加一个npm 命令,每次更新完成后,只需要运行一次命令就可以自动加密并写入了。

"scripts":{
"adjust": "cross-env NODE_ENV=development node encryptAdjustKey.js"
}
复制代码

由于这个文件是自动写入dist文件夹中的,每次更新也只需要更新这一个js即可,而不需要重新打包,瞬间感觉方便了许多。当然在index.html中也需要提前引入。

<head>
	<script src="/js/events.js"></script>
</head>
复制代码

在项目里只需要解密一下

import AES from "crypto-js/aes"
import utf8 from 'crypto-js/enc-utf8'

export function getAdjustKeys(){
  const a = 'default||,'
  const str = window.keyOfAdjust || a
  const keys = AES.decrypt(str,config.productId).toString(utf8)
  // console.log('getAdjustKeys keys: ', keys);
  return keys
}
复制代码

还需要更懒一点

每次更新都输命令还是略显麻烦,我在想能否打包完自动去加密去更新,这时候我翻了一下webpack的文档,找到了一个done的钩子。 基本方法如下。

module.exports = class done {
	apply(compiler) {
		compiler.hooks.done.tap('done', () => {})
	}
}
复制代码

于是我就这样写了一个webpack插件,名字叫webpack-after-done.

使用的时候只需要把这个插件new一下即可

const AfterDone = require('webpack-after-done')

config.plugins.push(new AfterDone({
        funcList:doneCallbacks,
        zipify:true,
        zipFileName:'dist.zip'
      }))
复制代码

同样的,对于每次部署都需要压缩成zip,我也写了一个自动压缩的插件webpack-auto-zip.

感悟

怎么摆脱搬砖?其实是个伪命题,你把自己当成搬砖的,你当前干的就是搬砖,如果你把你当成工程师,那么你就是在设计和创造。对于一个程序员,我们应该干一些自己有兴趣的,同时又能应用的工作中来,岂不美哉?

文章分类
前端
文章标签