不久前，据路透社报道，丰田的 T-Connect 服务中的约 296,019 条客户信息可能遭到了泄露，引发了不少车主的恐慌。对此，丰田最新发公告证实了这一事件的真实性，并表示「对于给您带来的不便和担忧，我们深感歉意」，而泄露的来源或许与第三方外包公司有关。

1 源码被发布到了 GitHub

首先值得注意的是，丰田 T-Connect 是这家汽车制造商的官方连接应用程序，它的主要功能是可以让丰田汽车车主将自己的智能手机与车辆的信息娱乐系统连接，可以共享电话、音乐、导航、通知、驾驶数据、发送机状态和油耗等功能。

2022 年 9 月 15 日，丰田发现 T-Connect 用户站点的某些源代码在 GitHub 平台发布，这些源代码包含了对数据服务器的访问密钥，而这些密钥用于访问存储在数据服务器上的电子邮件地址和客户管理号码。

这使得未经授权的第三方可以在 2017 年 12 月至 2022 年 9 月 15 日期间访问 296,019 名的客户的详细信息。

不过，就在这一天，丰田紧急对 GitHub 存储库的访问设置限制，并在 9 月 17 日对数据服务器访问密钥进行了更改，清除了未经授权的第三方的所有潜在访问。

2 这一次外包不是“背锅侠”

在发现泄露事件的同时，丰田公司也即刻做出了排查，发现在 2017 年 12 月，T-Connect 网站开发外包公司违反处理规则，错误地将部分源代码上传到 GitHub 上，但是直到 2022 年 9 月 15 日才发现。

这也意味着，用户信息在这五年间都有外泄的风险。为此，丰田解释，客户姓名、信用卡数据和电话号码等信息未受到泄露，因为它们没有存储在公开的数据库中，不过“由于开发外包公司对源代码的处理不当，我们将与外包公司一起努力加强对客户个人信息处理的管理，并加强其安全功能。”

不过，虽然数据没有被盗用的迹象，丰田也提醒道，无法完全排除有人访问和窃取数据的可能性。

其说道，“安全专家的调查表明，尽管我们无法根据存储客户电子邮件地址和客户管理号码的数据服务器的访问历史记录来确认第三方的访问，但同时，我们不能完全否认它（会被第三方盗用的可能性）。”

因此，对于可能泄露了电子邮件地址和客户管理号码的客户，丰田公司称，分别向注册的电子邮件地址发送道歉信和通知。

3 人为因素是最大的变数

值得庆幸的是，存储在服务器上的客户管理号码对第三方来说用处并不大，但是也会有不法分子会通过邮件等形式以丰田公司的名义发送一些钓鱼网站。为此，丰田公司表示，提供了一个专用表单（ https://www.toyota.co.jp/cmpnform/pub/co/contact-tconnect）并建立了专门的呼叫中心，以回答客户的问题和疑虑。同时，其建议所有在 2017 年 7 月至 2022 年 9 月之间注册的 T-Connect 用户保持警惕，并避免打开来自声称是丰田的未知发件人的电子邮件及附件。

与此同时，据《每日经济新闻》报道，丰田中国相关负责人回应道，这个情况是在日本发生的，不涉及中国用户，主要是使用 T-connect 服务的客户的邮箱地址和内部管理的号码有被窃取的可能，别的信息都不受影响。

至此，虽然“暴露”在外长达五年的漏洞侥幸没有造成太大的影响，但这类屡见不鲜的事件也时刻警醒着处于信息化时代下的各家公司。

据外媒 BleepingComputer 报道，在今年 9 月，赛门铁克的安全分析师曾公布，近 2000 个 iOS 和 Android 应用程序在其代码中包含硬编码的 AWS 凭证。造成这种情况的，往往是开发者的疏忽大意，他会经常在代码中存储凭证，以便在测试多个应用迭代中快速且轻松地获取资产、访问服务和更新配置。

按理来说，当软件准备好进行实际部署时，这些凭证应该被删除的，但是很多开发者总是会忽略，从而造成数据泄露。

另一边，为了减少漏洞的出现，全球最大的代码托管平台 GitHub 也在近年间致力于改进这一方面。去年 6 月，GitHub 宣布其将自动扫描公开 PyPI 和 RubyGems 机密的存储库，如凭据和 API 令牌。简单来看，当 GitHub 发现密码、API 令牌、私有 SSH 密钥或公共存储库中公开的其他受支持的机密时，它会通知注册表维护者。在今年，GitHub 还推出了一项由机器学习驱动的新代码扫描分析功能，该代码扫描功能可以针对站点脚本 (XSS)、路径注入、NoSQL 注入和 SQL 注入四种常见漏洞模式显示警报。

不过，归根究底，开发者在自身开发的时候需要具备足够强的技术能力同时，也需要有强烈的网络、系统等安全意识。

参考链接：

https://global.toyota/jp/newsroom/corporate/38095972.html

https://www.bleepingcomputer.com/news/security/toyota-discloses-data-leak-after-access-key-exposed-on-github/

整理 | 苏宓
出品 | CSDN（ID：CSDNnews）

从ZH离开时，准备写点东西揭露下ZH对外包的一系列恶心措施，但是感觉蚍蜉撼树，什么也改变不了，自己倒霉就认了，最近流行向前看吗。

但是今天又听到有同事被离场，心中光有怒火，还是无可奈何。思来想去，决定写点东西，如果能给那些准备去ZH（合肥）做外包的提个醒，也不算坏事。

换句话说，ZH这个坑我只想竖个警示标志，跳不跳悉听尊便。

一、ZH的包工头有哪些：

• 文*辉

• 软*力

• 京*方

• 北*诚

• 联*通

• 宇*信

• 还有很多。。。。

他们或许在其他地方有项目，但是在合肥纯属ZH的包工头。如果还不确定是不是人头外包，直接问HR是项目外包还是人力外包，这几家HR还算比较诚实。

二、ZH对外包的管理：

外包各行各业都有，地主家的活干不完，农忙的时候会请临时工，富裕的地主还会长期养几个工人，简称长工。当然地主里面分善良和刻薄的，其他地主暂且不表，ZH可以说是银行里最刻薄和恶心的。

随便说几条

1、迟到晚一秒，半天工时（银行和包工头们之间的结算单位，一般按小时）没有，晚上下班忘打卡，不好意思，一天白干。

2、食堂吃饭，等地主家儿子们（行内人员）吃完长工，临时工才能去，提前去会被查刷卡记录，通报甚至离场（=开除）。现在不存在这个问题了，干活都不在地主院里了，被赶到租得场地（ODC）去了，吃饭自理。

3、不能带私人电脑，面向百度编程的码农们只有手机搜索，但是地主又规定，不能长时间看手机。

4、360无死角摄像头，监控工人们的一举一动，不是摆设，等地主准备赶你走的时候，没有人能禁的住调摄像头查。

5、近400个工人，四个厕所，加一起8个坑位，男女各四个坑位，如果你要拉肚子，那就祈祷你自己憋得住。

如果以上种种你都表示理解，恭喜你，有了做长工得觉悟。“拿工人得钱，好好干活不拉到了，别老想着翻身农奴把歌唱，养家糊口要紧”。好像这么想也有道理。

但是接着往下看：

地主要求把地里麦子割了，一人两亩，当天完成。有人加班加点，半天割完了，有人慢条斯理磨磨蹭蹭，刚好下班干完。按道理工作提前完成，在下一批任务到来前，时间可以相对自由安排吧，不好意思，不行！！学习看书也不行，必须对着电脑！！！

你想提高自己技术，回家看去，你想学习，回家去学，拿工资得时候不能干与工作无关得任何事情！

三、想赶你走，你连呼吸都是错的

哪天地主家得地里活差不多忙完得时候，这么多长工怎么办呢，找理由开呗。

1、玩手机超过半小时，开~。

2、中午午睡到上班点还在打瞌睡，开~

3、桌子上有与工作无关得书，查查监控是不是看了，看了就开~

4、脖子上挂个耳机，再听歌？开~

5、什么把柄都抓不到？不可能，我听儿子们反应哪个工人难沟通，开~

6…

包工头们接到老板得命令，找你谈话，希望你自己提离职，不要闹得不愉快，补偿是没有得！

什么?你要仲裁，走法律途径？你看看合同上是不是规定自己原因被地主开除得后果自负？是不是规定工作地不知这块地，还有可能到外省干活，你要去不了就不能怪我们了啊…

四.上证据！！

这里得每一句话都可以成为开除你的理由！

四个人一齐被开除：两个玩手机，两个看书。

带耳机被开除：

HR:恶心略有耳闻。

结论：如果看到这，你依然准备跳到这个坑了，我先敬你是条汉子，最后让我猜测你是属于那种类型：

A:培训班或者自学成才，苦无单位接受，混个工作经验

B.职业规划不重要，先挣点钱再说

C.年龄太大，被其他公司优化了

D.大专毕业又想干码农混个经验

以上都不是得话，那你要想想为啥还在坑了呆着。

来源：news.sohu.com/a/591098103_121124367

背景

🎨(美术): 这是这次需求的切图 📁 ，你看看有没问题？

🧑‍💻(前端): 好的。

页面上线 ...

🧑‍💼(产品): 这图片怎么半天加载不出来 💢 ？

🧑‍💻(前端): 我看看 🤔 (卑微)。

... 📁(size: 15MB)

🧑‍💻(前端): 😅。

很多时候，我们从 PS 、蓝湖或摹客等工具导出来的图片，或者是美术直接给到切图，都是未经过压缩的，体积都比较大。这里，就有了可优化的空间。

TinyPng

TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。

使用过TinyPng的都知道，它的压缩效果非常好，体积大幅度降低且显示效果几乎没有区别( 👀 看不出区别）。因此，选择其作为压缩工具，是一个不错的选择。

TinyPng提供两种压缩方法：

1. 通过在官网上进行手动压缩；

2. 通过官方提供的tinify进行压缩；

身为一个程序员 🧑‍💻 ，是不能接受手动一张张上传压缩这种方法的。因此，选择第二种方法，通过封装一个工具，对项目内的图片自动压缩，彻底释放双手 🤲 。

工具类型

第一步，思考这个工具的「目的」是什么？没错，「压缩图片」。

第二步，思考在哪个「环节」进行压缩？没错，「发布前」。

这样看来，开发一个webpack plugin是一个不错选择，在打包「生产环境」代码的时候，启用该plugin对图片进行处理，完美 🥳 ！

但是，这样会面临两个问题 🤔 ：

1. 页面迭代，新增了几张图片，重新打包上线时，会导致旧图片被多次压缩；

2. 无法选择哪些图片要被压缩，哪些图片不被压缩；

虽然可以通过「配置」的方式解决上述问题，但每次打包都要特殊配置，略显麻烦，这样看来plugin好像不是最好的选择。

以上两个问题，使用「命令行工具」就能完美解决。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。

效果演示

话不多说，先上才艺 💃 ！

1. 安装

$ npm i yx-tiny -D

1. 使用

$ npx tiny 

1. 根据命令行提示输入

流程：输入「文件夹名称-tinyImg」，接着工具会找到当前项目下所有的tinyImg，接着选择一或多个tinyImg，紧接着，工具会找出tinyImg下所有的png、jpe?g和svga，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片。

从最后的输出结果可以看到，压缩前的资源体积为2.64MB，压缩后体积为1.02MB，足足压缩了1.62MB 👍 ！

实现思路

总体分为五个过程：

1. 查找：找出所有的图片资源；

2. 分配：均分任务到每个进程；

3. 上传：把原图上传到TinyPng；

4. 下载：从TinyPng中下载压缩好的图片；

5. 写入：用下载的图片覆盖本地图片；

项目地址：yx-tiny

查找

找出所有的图片资源。

packages/tiny/src/index.ts

/**
 * 递归找出所有图片
 * @param { string } path
 * @returns { Array<imageType> }
 */
interface IdeepFindImg {
  (path: string): Array<imageType>
}
let deepFindImg: IdeepFindImg
deepFindImg = (path: string) => {
  // 读取文件夹的内容
  const content = fs.readdirSync(path)
  // 用于保存发现的图片
  let images: Array<imageType> = []
  // 遍历该文件夹内容
  content.forEach(folder => {
    const filePath = resolve(path, folder)
    // 获取当前内容的语法信息
    const info = fs.statSync(filePath)
    // 当前内容为“文件夹”
    if (info.isDirectory()) {
      // 对该文件夹进行递归操作
      images = [...images, ...deepFindImg(filePath)]
    } else {
      const fileNameReg = /\.(jpe?g|png|svga)$/
      const shouldFormat = fileNameReg.test(filePath)
      // 判断当前内容的路径是否包含图片格式
      if (shouldFormat) {
        // 读取图片内容保存到images
        const imgData = fs.readFileSync(filePath)
        images.push({
          path: filePath,
          file: imgData
        })
      }
    }
  })
  return images
}

通过命令行交互后，拿到目标文件夹的路径path，然后获取该path下的所有内容，接着遍历所有内容。首先判断该内容的文件信息：若为“文件夹”，则把该文件夹路径作为path，递归调用deepFindImg；若不为“文件夹”，判断该内容为图片，则读取图片数据，push到images中。最后，返回所有找到的图片。

分配

均分任务到每个进程。

packages/tiny/src/index.ts

// ...
cluster.setupPrimary({
    exec: resolve(__dirname, 'features/process.js')
})

// 若资源数小于则创建一个进程，否则创建多个进程
const works: Array<{
    work: Worker;
    tasks: Array<imageType>
}> =[]
if (list.length <= cpuNums) {
    works.push({
        work: cluster.fork(),
        tasks: list
    })
} else {
    for (let i = 0; i < cpuNums; ++i) {
        const work = cluster.fork()
        works.push({
            work,
            tasks: []
        })
    }
}

// 平均分配任务
let workNum = 0 
list.forEach(task = >{
    if (works.length === 1) {
        return
    } else if (workNum >= works.length) {
        works[0].tasks.push(task)
        workNum = 1
    } else {
        works[workNum].tasks.push(task)
        workNum += 1
    }
})

// 用于记录进程完成数
let pageNum = works.length

// 初始化进度条
// ...

works.forEach(({
    work,
    tasks
}) = >{
    // 发送任务到每个进程
    work.send(tasks)
    // 接收任务完成
    work.on('message', (details: Idetail[]) = >{
        // 更新进度条
        // ...
        pageNum--
        // 所有任务执行完毕
        if (pageNum === 0) {
            // 关闭进程
            cluster.disconnect()
        }
    })
})

使用cluster，根据「cpu核心数」创建等量的进程，works用于保存已创建的进程，list中保存的是要处理的压缩任务，通过遍历list，把任务依次分给每一个进程。接着遍历works，通过send方法发送进程任务。通过监听message事件，利用pageNum记录进程任务的完成情况，当所有进程任务执行完毕后，则关闭进程。

上传

官方提供的tinify工具有「500张/月」的限额，超过限额后，需要付费。

由于家境贫寒，且出于学习的目的，就没有使用tinify，而是通过构造随机IP来直接请求「压缩接口」来达到「破解限额」的目的。大家在真正使用的时候，还是要使用tinyfy来压缩，不要做这种投机取巧的事。

好了，回到正文。

把原图上传到TinyPng。

packages/tiny/src/features/index.ts

/**
 * 上传函数
 * @param { Buffer } file 文件buffer数据
 * @returns { Promise<DataUploadType> }
 */
interface Iupload {
  (file: Buffer): Promise<DataUploadType>
}
export let upload: Iupload
upload = (file: Buffer) => {
  // 生成随机请求头
  const header = randomHeader()
  return new Promise((resolve, reject) => {
    const req = Https.request(header, res => {
      res.on('data', data => {
        try {
          const resp = JSON.parse(data.toString()) as DataUploadType
          if (resp.error) {
            reject(resp)
          } else {
            resolve(resp)
          }
        } catch (err) {
          reject(err)
        }
      })
    })
    // 上传图片buffer
    req.write(file)
    req.on('error', err => reject(err))
    req.end()
  })
}

使用node自带的Https模块，构造请求头，把deepFindImg中返回的图片进行上传。上传成功后，会返回已经压缩好的图片的url链接。

下载

从TinyPng中下载压缩好的图片。

packages/tiny/src/features/index.ts

/**
 * 下载函数
 * @param { string } path
 * @returns { Promise<string> }
 */
interface Idownload {
  (path: string): Promise<string>
}
export let download: Idownload
download = (path: string) => {
  const header = new Url.URL(path)
  return new Promise((resolve, reject) => {
    const req = Https.request(header, res => {
      let content = ''
      res.setEncoding('binary')
      res.on('data', data => (content += data))
      res.on('end', () => resolve(content))
    })
    req.on('error', err => reject(err))
    req.end()
  })
}

使用node自带的Https模块把upload中返回的图片链接进行下载。下载成功后，返回图片的buffer数据。

写入

把下载好的图片覆盖本地图片。

packages/tiny/src/features/process.ts

/**
 * 接收进程任务
 */
process.on('message', (tasks: imageType[]) => {
  ;(async () => {
    // 优化 png/jpg
    const data = tasks
      .filter(({ path }: { path: string }) => /\.(jpe?g|png)$/.test(path))
      .map(ele => {
        return compressImg({ ...ele, file: Buffer.from(ele.file) })
      })

    // 优化 svga
    const svgaData = tasks
      .filter(({ path }: { path: string }) => /\.(svga)$/.test(path))
      .map(ele => {
        return compressSvga(ele.path, Buffer.from(ele.file))
      })

    const details = await Promise.all([
      ...data.map(fn => fn()),
      ...svgaData.map(fn => fn())
    ])

    // 写入
    await Promise.all(
      details.map(
        ({ path, file }) =>
          new Promise((resolve, reject) => {
            fs.writeFile(path, file, err => {
              if (err) reject(err)
              resolve(true)
            })
          })
      )
    )

    // 发送结果
    if (process.send) {
      process.send(details)
    }
  })()
})

process.on监听每个进程发送的任务，当接收到任务类型为「图片」，使用compressImg方法来处理图片。当任务类型为「svga」，使用compressSvga方法来处理svga。最后把处理好的资源写入到本地覆盖旧资源。

compressImg

packages/tiny/src/features/process.ts

/**
 * 压缩图片
 * @param { imageType } 图片资源
 * @returns { promise<Idetail> }
 */
interface IcompressImg {
  (payload: imageType): () => Promise<Idetail>
}
let compressImg: IcompressImg
compressImg = ({ path, file }: imageType) => {
  return async () => {
    const result = {
      input: 0,
      output: 0,
      ratio: 0,
      path,
      file,
      msg: ''
    }
    try {
      // 上传
      const dataUpload = await upload(file)

      // 下载
      const dataDownload = await download(dataUpload.output.url)

      result.input = dataUpload.input.size
      result.output = dataUpload.output.size
      result.ratio = 1 - dataUpload.output.ratio
      result.file = Buffer.alloc(dataDownload.length, dataDownload, 'binary')
    } catch (err) {
      result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`
    }
    return result
  }
}

compressImg返回一个async函数，该函数先调用upload进行图片上传，接着调用download进行下载，最终返回该图片的buffer数据。

compressSvga

packages/tiny/src/features/process.ts

/**

 * 压缩svga

 * @param { string } path 路径

 * @param { buffer } source svga buffer

 * @returns { promise<Idetail> }

 */

interface IcompressSvga {

  (path: string, source: Buffer): () => Promise<Idetail>

}

let compressSvga: IcompressSvga

compressSvga = (path, source) => {

  return async () => {

    const result = {

      input: 0,

      output: 0,

      ratio: 0,

      path,

      file: source,

      msg: ''

    }

    try {

      // 解析svga

      const data = ProtoMovieEntity.decode(

        pako.inflate(toArrayBuffer(source))

      ) as unknown as IsvgaData

      const { images } = data

      const list = Object.keys(images).map(path => {

        return compressImg({ path, file: toBuffer(images[path]) })

      })



      // 对svga图片进行压缩

      const detail = await Promise.all(list.map(fn => fn()))

      detail.forEach(({ path, file }) => {

        data.images[path] = file

      })



      // 压缩buffer

      const file = pako.deflate(

        toArrayBuffer(ProtoMovieEntity.encode(data).finish() as Buffer)

      )

      result.input = source.length

      result.output = file.length

      result.ratio = 1 - file.length / source.length

      result.file = file

    } catch (err) {

      result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`

    }

    return result

  }

}

compressSvga的「输入」、「输出」和compressImg保持一致，目的是为了可以使用promise.all同时调用。在compressSvga内部，对svga进行解析成data，获取到svga的图片列表images，接着调用compressImg对images进行压缩，使用压缩后的图片覆盖data.images，最后再把data编码后，写入到本地覆盖原本的svga。

最后

再说一遍，大家真正使用的时候，要使用官方的tinify进行压缩。

参考文章：

• protobuf.js

• SVGAPlayer-Web-Lite

• tinify

祝大家生活愉快，工作顺利！

作者：JustCarryOn
链接：juejin.cn/post/7153086294409609229

大家好！我们是美特兄弟三人组！前阵参加了【声网&环信 RTE2022 创新编程挑战赛】，整个大赛历时47天，除了对声网和环信的 SDK 有了很多的体验，还做了很多奇思妙想的结合。在此次大赛中我们团队基于声网&环信 SDK 构建了一个元宇宙应用 MetaTown，获得了环信专项奖，开心之余把这个项目介绍给大家，抛砖引玉，感兴趣的兄弟可以加入进来一起在元宇宙中闯荡江湖～

一、关于MetaTown

金钱是被铸造出来的自由——陀思妥耶夫斯基

在三次元的现实世界，你是否为了搞钱而终日奔波？忍受996甚至007的非人待遇？是否正经历着创业人的凛冬？疫情等因素带来的本轮经济下行落实在每个人身上都是真真切切的，对于经历了40年经济暴增的国人来讲更是史无前例的。

在荷包日瘪萎靡不振的日子里，精神慰藉尤为重要，元宇宙正是当下最时髦的，何不创造一个可以躺着赚钱的元宇宙小镇？不为别的，在有虚拟工作的前提下每天我的虚拟角色的金币都会涨，想一想岂不是有一点小欢愉？还能在这个小镇结交一些志同道合沉迷于搞钱的友友们！

---------------------------------------

MetaTown 是基于声网 RTC 和环信 IM 打造的模拟城市生活的元宇宙社交类 App。

初来乍到的玩家首次进入 MetaTown 先选择不同的职业，在这座城市首先要考虑的是如何赚钱，或做一名程序员上下班打卡，或自己创业开个酒吧/书店或去银行投资理财。除此以外，还要注意身体健康，可能哪天会随机生病需要去医院，支付挂号费咨询不同科室的医生。注意，没有核酸证明有可能看不了病嗷～不打工没钱也看不了病嗷～

1、环信即时通讯

MetaTown 在6大交互场景中运用了环信的即时通讯 IM（Instant Messaging），给 IM 赋予了新的场景活力，支持陌生人私聊，群聊及超大型聊天室。

2-1）会话列表 项目中 IM 会话列表如下图：

会话列表关键代码：

publicvoidshow(BaseActivity activity){
    NiceDialog.init().setLayoutId(R.layout.dialog_message)
            .setConvertListener(new ViewConvertListener() {
@Override
protectedvoidconvertView(ViewHolder holder, BaseNiceDialog dialog){
                    RecyclerView rv = holder.getView(R.id.rv);
                    List easeConversationInfos = initData();
                    rv.setLayoutManager(new LinearLayoutManager(dialog.getContext()));
                    DialogMsgAdapter dialogMsgAdapter = new DialogMsgAdapter(easeConversationInfos);
                    rv.setAdapter(dialogMsgAdapter);
                    dialogMsgAdapter.setOnItemClickListener(new DialogMsgAdapter.OnItemClickListener() {
@Override
publicvoidonItemClick(int pos,String name){
                            SoundUtil.getInstance().playBtnSound();
                            dialog.dismissAllowingStateLoss();
                            EMConversation item = (EMConversation) easeConversationInfos.get(pos).getInfo();
                            ChatDialog.getInstance().show(activity,item.conversationId(), name);
                        }
                    });
                }
            })
            .setAnimStyle(R.style.EndAnimation)
            .setOutCancel(true)
            .setShowEnd(true)
            .show(activity.getSupportFragmentManager());
}

2-2）IM 聊天

项目中 IM 聊天如下图：

发送消息关键代码：

@Override
public void sendMessage(EMMessage message) {
if(message == null) {
if(isActive()) {
runOnUI(() -> mView.sendMessageFail("message is null!"));
        }
return;
    }
addMessageAttributes(message);
if (chatType == EaseConstant.CHATTYPE_GROUP){
message.setChatType(EMMessage.ChatType.GroupChat);
    }else if(chatType == EaseConstant.CHATTYPE_CHATROOM){
message.setChatType(EMMessage.ChatType.ChatRoom);
    }
    ...
EMClient.getInstance().chatManager().sendMessage(message);
if(isActive()) {
runOnUI(()-> mView.sendMessageFinish(message));
    }
}

接受消息关键代码：

public void onMessageReceived(List messages) {
super.onMessageReceived(messages);
LiveDataBus.get().with(Constants.RECEIVE_MSG, LiveEvent.class).postValue(new LiveEvent());
for (EMMessage message : messages) {
// in background, do not refresh UI, notify it in notification bar
            if(!MetaTownApp.getInstance().getLifecycleCallbacks().isFront()){
                getNotifier().notify(message);
            }
            //notify new message
            getNotifier().vibrateAndPlayTone(message);
        }
    }

2、声网音视频

MetaTown 运用了声网的实时音视频功能。

1）集成声网 SDK

1-1）添加声网音视频依赖在 app module 的 build.gradle 文件的 dependencies 代码块中添加如下代码：

implementation 'io.agora.rtc:full-rtc-basic:3.6.2'

然后在app module的build.gradle文件的android->defaultConfig代码块中添加如下代码

ndk {
    abiFilters  "arm64-v8a"
}
// 设置支持的SO库架构（开发者可以根据需要，选择一个或多个平台的so）

1-2）添加必要权限 为了保证 SDK 能正常运行，我们需要在 AndroidManisfest.xml 文件中声明以下权限：

1-3）APP 在签名打包时防止出现混淆的问题需要在 proguard-rules.pro 文件里添加以下代码：

-keep classio.agora.**{*;}

2）创建并初始化 RtcEngine

创建并初始化 RtcEngine
private void initializeEngine() {
try {
        EaseCallKitConfig config =  EaseCallKit.getInstance().getCallKitConfig();
if(config != null){
            agoraAppId = config.getAgoraAppId();
        }
        mRtcEngine = RtcEngine.create(getBaseContext(), agoraAppId, mRtcEventHandler);


//因为有小程序 设置为直播模式 角色设置为主播
        mRtcEngine.setChannelProfile(CHANNEL_PROFILE_LIVE_BROADCASTING);
        mRtcEngine.setClientRole(CLIENT_ROLE_BROADCASTER);


        EaseCallFloatWindow.getInstance().setRtcEngine(getApplicationContext(), mRtcEngine);
//设置小窗口悬浮类型
        EaseCallFloatWindow.getInstance().setCallType(EaseCallType.CONFERENCE_CALL);
    } catch (Exception e) {
        EMLog.e(TAG, Log.getStackTraceString(e));
throw new RuntimeException("NEED TO check rtc sdk init fatal error\n" + Log.getStackTraceString(e));
    }

3）设置视频模式

privatevoidsetupVideoConfig(){
    mRtcEngine.enableVideo();
    mRtcEngine.muteLocalVideoStream(true);
    mRtcEngine.setVideoEncoderConfiguration(new VideoEncoderConfiguration(
                VideoEncoderConfiguration.VD_1280x720,
                VideoEncoderConfiguration.FRAME_RATE.FRAME_RATE_FPS_15,
                VideoEncoderConfiguration.STANDARD_BITRATE,
                VideoEncoderConfiguration.ORIENTATION_MODE.ORIENTATION_MODE_FIXED_PORTRAIT));

//启动谁在说话检测
    int res = mRtcEngine.enableAudioVolumeIndication(500,3,false);
}

4）设置本地视频显示属性
4-1）setupLocalVideo( VideoCanvas local ) 方法用于设置本地视频显示信息。应用程序通过调用此接口绑定本地视频流的显示视窗(view)，并设置视频显示模式。在应用程序开发中，通常在初始化后调用该方法进行本地视频设置，然后再加入频道。

privatevoidsetupLocalVideo(){
if(isFloatWindowShowing()) {
return;
    }
    localMemberView = createCallMemberView();
    UserInfo info = new UserInfo();
    info.userAccount = EMClient.getInstance().getCurrentUser();
    info.uid = 0;
    localMemberView.setUserInfo(info);
    localMemberView.setVideoOff(true);
    localMemberView.setCameraDirectionFront(isCameraFront);
    callConferenceViewGroup.addView(localMemberView);
    setUserJoinChannelInfo(EMClient.getInstance().getCurrentUser(),0);
    mUidsList.put(0, localMemberView);
    mRtcEngine.setupLocalVideo(new VideoCanvas(localMemberView.getSurfaceView(), VideoCanvas.RENDER_MODE_HIDDEN, 0));
}

4-2）joinChannel(String token,String channelName,String optionalInfo,int optionalUid ) 方法让用户加入通话频道，在同一个频道内的用户可以互相通话，多个用户加入同一个频道，可以群聊。使用不同 App ID 的应用程序是不能互通的。如果已在通话中，用户必须调用 leaveChannel() 退出当前通话，才能进入下一个频道。

privatevoidjoinChannel(){
    EaseCallKitConfig callKitConfig = EaseCallKit.getInstance().getCallKitConfig();
if(listener != null && callKitConfig != null && callKitConfig.isEnableRTCToken()){
        listener.onGenerateToken(EMClient.getInstance().getCurrentUser(),channelName,  EMClient.getInstance().getOptions().getAppKey(), new EaseCallKitTokenCallback(){
@Override
publicvoidonSetToken(String token,int uId){
                EMLog.d(TAG,"onSetToken token:" + token + " uid: " +uId);
//获取到Token uid加入频道
                mRtcEngine.joinChannel(token, channelName,null,uId);
                //自己信息加入uIdMap
                uIdMap.put(uId,new EaseUserAccount(uId,EMClient.getInstance().getCurrentUser()));
            }

            @Override
            public void onGetTokenError(int error, String errorMsg) {
                EMLog.e(TAG,"onGenerateToken error :" + error + " errorMsg:" + errorMsg);
                //获取Token失败,退出呼叫
                exitChannel();
            }
        });
    }
}

完成以上配置后就可以发起呼叫了，其它一些摄像头控制，声音控制可以参考声网官网的API，这里不再赘述。

3、场景原画

1）人物行走可分为踏步、水平移动两种动作，分别通过踏步动画和控制人物及背景 scrollview 移动实现。

2）关键点在于人物向左走过半屏继续向左行走，或向右走过半屏继续向右走的情况，以向右走为例，如果人物未超过屏幕中线，则控制人物向右移动；如果超出屏幕中线继续向右移动，则将人物固定在中线位置，背景向左滑动；如果背景向左已滑动至尽头，则保持背景不动，人物继续向右移动；如果人物移动至右边缘，则只控制人物原地踏步，背景和人物均不水平移动。

动画关键代码：

if (isToRight) {
ivPerson.setRotationY(180f);
}
isToRight = false;

RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) ivPerson.getLayoutParams();

if (sv != null) {
if (layoutParams.leftMargin > DisplayUtil.getHeight(MetaTownApp.getApplication()) || !sv.canScrollHorizontally(-1)) {
layoutParams.leftMargin -= STEP;
layoutParams.leftMargin = Math.max(layoutParams.leftMargin, 50);
ivPerson.setLayoutParams(layoutParams);
} else {
sv.smoothScrollBy(-STEP, 0);
}
} else {
layoutParams.leftMargin -= STEP;
layoutParams.leftMargin = Math.max(layoutParams.leftMargin, 50);
ivPerson.setLayoutParams(layoutParams);
}

mAnimationDrawable.start();

if (!isToRight) {
ivPerson.setRotationY(0f);
}
isToRight = true;
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) ivPerson.getLayoutParams();
if (sv != null) {
if (layoutParams.leftMargin < DisplayUtil.getHeight(MetaTownApp.getApplication()) || !sv.canScrollHorizontally(1)) {
layoutParams.leftMargin += STEP;
layoutParams.leftMargin = Math.min(layoutParams.leftMargin, DisplayUtil.getWidth(MetaTownApp.getApplication()) - 100);
ivPerson.setLayoutParams(layoutParams);
} else {
sv.smoothScrollBy(STEP, 0);
}
} else {
layoutParams.leftMargin += STEP;
layoutParams.leftMargin = Math.min(layoutParams.leftMargin, DisplayUtil.getWidth(MetaTownApp.getApplication()) - 100);
ivPerson.setLayoutParams(layoutParams);
}

mAnimationDrawable.start();

写字楼打工

这天在实验室和学长一起写学校的项目，学长突然问我一句：“你用过 Symbol 吗？” 然而我的大脑却遍历不出这个关键性名词，啊，又要补漏了

let a = Symbol()
typeof a

let a = new Symbol()
typeof a // Symbol is not a constructor

let a = Symbol()
let b = Object(a)
typeof b // object

let a = Symbol()
let b = Symbol()

let a = Symbol("a")
let b = Symbol("b")

let a = Symbol()
let obj = {}
obj[a] = "hello world"

if (name === "猪痞恶霸") {
    console.log(1)
}

switch (name) {
        case "猪痞恶霸"
        console.log(1)
        case "Ned"
        console.log(2)
}

const judge = {
    name_1:"猪痞恶霸"
    name_2:"Ned"
}
switch (name) {
        case judge.name_1
        console.log(1)
        case judge.name_2
        console.log(2)
}

const judge = {
    rectangle:Symbol("rectangle"),
    triangle:Symbol("triangle")
}
function getArea(model, size) {
    switch (model) {
        case judge.rectangle:
            return size.width * size.height
        case judge.triangle:
            return size.width * size.height / 2
    }
}
let area = getArea(judge.rectangle ,{width:100, height:200})
console.log(area)

let a = Symbol.for("a")
let b = Symbol.for("a")
a === b // true

let a = Symbol("a")
let b = Symbol.for("a")
a === b // false

let a = Symbol("a")
let b = Symbol.for("a")
Symbol.keyFor(a) // undefined
Symbol.keyFor(b) // 'a'

class demo {
    static [Symbol.hasInstance](item) {
        return item === "猪痞恶霸"
    }
}
"猪痞恶霸" instanceof demo // true

埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记，希望看完在项目中有所思考和帮助。

正文开始...

最近遇到一个问题，先看一段代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>埋点</title>
    <script>
      window.formateJson = (data) => JSON.stringify(data, null, 2);
    </script>
    <script async defer>
      (function (win, head, attr, script) {
        console.log("---111---");
        win[attr] = win[attr] || [];
        const scriptDom = document.createElement(script);
        scriptDom.async = true;
        scriptDom.defer = true;
        scriptDom.src = "./js/tj.js";
        scriptDom.onload = function () {
          win[attr].push({
            id: "maic",
          });
          win[attr].push({
            id: "Tom",
          });
          console.log("---2222---");
          console.log(formateJson(win[attr]));
        };
        setTimeout(() => {
          console.log("setTimeout---444---");
          head.parentNode.insertBefore(scriptDom, head);
        }, 1000);
      })(window, document.getElementsByTagName("head")[0], "actd", "script");
    </script>
    <script async defer src="./js/app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

我们会发现,打印的顺序结果是下面这样的：

---111---
app.js:2 ---333--- start load app.js
app.js:4 [
  {
    "id": "pink"
  }
]
(index):30 setTimeout---444---
(index):26 ---2222---
(index):27 [
  {
    "id": "pink"
  },
  {
    "id": "maic"
  },
  {
    "id": "Tom"
  }
]

冥思苦想,我们发现最后actd的结果是

 [
  {
    "id": "pink"
  },
  {
    "id": "maic"
  },
  {
    "id": "Tom"
  }
]

其实我想要的结果是先添加maic,Tom,最后添加pink,需求就是，必须先在这个ts.js执行后，预先添加基础数据，然后在其他业务app.js添加其他数据，所以此时，无论如何都是满足不了我的需求。

试下想，为什么没有按照我的预期的要求走，问题就是出现在这个onload方法上

onload事件

于是查询资料寻得，onload事件是会等引入的外部资源 加载完毕后才会触发

外部资源加载完毕是什么意思？

举个栗子,我在引入的index2.html引入index2.js,然后在引入脚本上写一个onload事件测试loadIndex2方法是否在我延时加载后进行调用的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function loadIndex2() {
        console.log("script loader...");
      }
    </script>
    <script src="./js/index2.js" onload="loadIndex2()"></script>
  </body>
</html>

index2.js中写入一段代码

var startTime = Date.now()
const count = 1000;
let wait = 10000;
/// 设置延时
const time = wait * count;
for (let i = 0; i < time; i++) { }

var endTime = Date.now()
console.log(startTime, endTime)
console.log(`延迟了：${Math.ceil((endTime - startTime) / 1000)}s后执行的`)

最后看下打印结果

所以可以证实，onload是会等资源下载完了后，才会立即触发

所以我们回头来看

在浏览器的事件循环中，同步任务主线程肯定优先会先顺序执行

从打开印---111---,

然后到onload此时不会立即执行

遇到定时器，定时器设置了1s后会执行，是个宏任务，会放入队列中，此时不会立即执行

然后接着会执行<script async defer src="./js/app.js"></script>脚本

所以此时，执行该脚本后，我们可以看到会先执行push方法。

所以我们看到pink就最先被推入数组中，当该脚本执行完毕后，此时会去执行定时器

定时器里我们看到我们插入方式insertBefore,当插入时成功时，此时会调用onload方法，所以此时就会添加maic与Tom

很明显，我们此时的需求不满足我们的要求，而且一个onload方法已经成了拦路虎

那么我去掉onload试试，因为onload方法只会在脚本加载完毕后去执行，他只会等执行定时器后，成功插入脚本后才会真正执行，而此时其他脚本已经优先它的执行了。

那该怎么解决这个问题呢？

我把onload去掉试试,于是我改成了下面这样

<script async defer>
(function (win, head, attr, script) {
        console.log("---111---");
        win[attr] = win[attr] || [];
        const scriptDom = document.createElement(script);
        scriptDom.async = true;
        scriptDom.defer = true;
        scriptDom.src = "./js/tj.js";
        win[attr].push({
          id: "maic",
        });
        win[attr].push({
          id: "Tom",
        });
        console.log("---2222---");
        console.log(formateJson(win[attr]));
        setTimeout(() => {
          console.log("setTimeout---444---");
          head.parentNode.insertBefore(scriptDom, head);
        }, 1000);
      })
  (window, document.getElementsByTagName("head")
  [0], "actd", "script");
</script>

去掉onload后，我确实达到了我想要的结果

最后的结果是

[
  {
    "id": "maic"
  },
  {
    "id": "Tom"
  },
  {
    "id": "pink"
  }
]

但是你会发现

我先保证了window.actd添加了我预定提前添加的基础信息，但是此时，这个脚本并没有真正添加到dom中，我们执行完同步任务后，就会执行app.js，当1s后，我才真正执行了这个插入的脚本，而且我统计脚本你会发现此时是在先执行了app.js再加载tj.js的

当执行setTimeout时，我们会发现先执行了内部脚本，然后才执行打印

 <script async defer>
      (function (win, head, attr, script) {
        console.log("---111---");
        win[attr] = win[attr] || [];
        const scriptDom = document.createElement(script);
        scriptDom.async = true;
        scriptDom.defer = true;
        scriptDom.src = "./js/tj.js";
        win[attr].push({
          id: "maic",
        });
        win[attr].push({
          id: "Tom",
        });
        console.log("---2222---");
        console.log(formateJson(win[attr]));
        setTimeout(() => {
          console.log("setTimeout---444444---");
          window.actd.push({
            id: "setTimeout",
          });
          head.parentNode.insertBefore(scriptDom, head);
          console.log(formateJson(window.actd));
        }, 1000);
      })(window, document.getElementsByTagName("head")[0], "actd", "script");
    </script>

最后的结果，可以看到是这样的

[

  {

    "id": "maic"

  },

  {

    "id": "Tom"

  },

  {

    "id": "pink"

  },

  {

    "id": "setTimeout"

  }

]

看到这里不知道你心里有没有一个疑问，为什么在动态插入脚本时，我要用一个定时器1s钟？为什么我需要用insertBefore这种方式插入脚本？，我同步方式引入不行吗？不要定时器又会有什么样的结果？

我们通常在接入第三方统计时，貌似都是一个这样一个insertBefore插入的jsdk方式(但是一般我们都是同步方式引入jsdk)

没有使用定时器(3237ms)

 <script async defer>

      (function (win, head, attr, script) {

        ...

        console.log("setTimeout---444444---");

        window.actd.push({

          id: "setTimeout",

        });

        head.parentNode.insertBefore(scriptDom, head);

        console.log(formateJson(window.actd));

      })(window, document.getElementsByTagName("head")[0], "actd", "script");

    </script>

结果:

[

  {

    "id": "maic"

  },

  {

    "id": "Tom"

  },

  {

    "id": "setTimeout"

  },

  {

    "id": "pink"

  },

]

使用用定时器的(1622ms)

<script async defer>

      (function (win, head, attr, script) {

        ...

        setTimeout(() => {

          console.log("setTimeout---444444---");

          window.actd.push({

            id: "setTimeout",

          });

          head.parentNode.insertBefore(scriptDom, head);

          console.log(formateJson(window.actd));

        }, 1000);

      })(window, document.getElementsByTagName("head")[0], "actd", "script");

    </script>

当我们用浏览器的Performance去比较两组数据时，我们会发现总长时间，使用定时器的性能大概比没有使用定时器的性能时间上大概要少50%,在summary中所有数据均有显著的提升。

不经感叹，就一个定时器这一点点的改动，对整个应用提升有这么大的提升，我领导说，快应用在线加载时，之前因为这个统计js的加载明显阻塞了业务页面打开速度，做了这个优化后，打开应用显著提升不少。

我们再继续上一个问题，为什么不同步加载？

我把代码改造一下,去除了一些无关紧要的代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>js执行的顺序问题</title>

    <script>

      window.formateJson = (data) => JSON.stringify(data, null, 2);

    </script>

    <script async defer src="./js/tj.js"></script>

    <script async defer>

      (function (win, head, attr, script) {

        win[attr] = win[attr] || [];

        win[attr].push({

          id: "maic",

        });

        win[attr].push({

          id: "Tom",

        });

        console.log("---2222---");

        console.log(formateJson(win[attr]));

      })(window, document.getElementsByTagName("head")[0], "actd", "script");

    </script>

    <script async defer src="./js/app.js"></script>

  </head>

  <body>

    <div id="app"></div>

  </body>

</html>

结果

[

  {

    "id": "maic"

  },

  {

    "id": "Tom"

  },

  {

    "id": "pink"

  }

]

嘿，需求是达到了，因为我的业务app.js加的数据是最后一条，说明业务功能上是ok的，但是我们看下分析数据

首先肯定是加载顺序会发生变化，会先加载tj.js然后再加载业务app.js,你会发现同步加载这种方式有个弊端，假设tj.js很大，那么是会阻塞影响页面首屏打开速度的，所以在之前采用异步，定时器方式，首屏加载会有显著提升。

同步加载(1846ms)

我们发现tj.js与app.js相隔的时间很少，且我们从火焰图中分析看到，Summary的数据是1846ms

综上比较，虽然同步加载依然比不上使用定时器的加载方式，使用定时器相比较同步加载，依然是领先11%左右

异步标识async/defer

在上面的代码中，我们多次看到async和defer标识，在之前文章中笔者有写过一篇你真的了解esModule吗,阐述一些关于script标签中type="moudle", defer,async的几个标识，今天再次回顾下

其实从脚本优先级来看，同步的永远优先最高，当一个script标签没有指定任何标识时，此时根据js引擎执行来说，谁放前面，谁就会优先执行，前面没执行完，后面同步的script就不会执行

注意到没有，我在脚本上有加async与defer

在上面栗子中，我们使用insertBefore方式，这就将该插入的js脚本的优先级降低了。

我们从上面火焰图中可以分析得处结论，排名先后顺序依次如下

1、setTimeout+insertBefore

执行顺序:app.js->tj.js

2、同步脚本加载

执行顺序:tj.js->app.js

3、不使用定时器+insertBefore

执行顺序:app.js->tj.js

当我们知道在1中，app.js优先于tj.js

因为insertBefore就是一种异步动态加载方式

举个例子

<script async defer>
  // 执行
  console.log(1)
  // 2 insertBefore 这里再动态添加js
</script>
<script async defer>
  // 执行
  console.log(3)
</script>

执行关系就是1,3,2

关于async与defer谁先执行时，defer的优先级比较低，会等异步标识的async下载完后立马执行，然后再执行defer的脚本，具体可以参考以前写的一篇文章你真的了解esModule吗

总结

• 统计脚本，我们可以使用定时器+insertBefore方式可以大大提高首屏的加载速度，这也给我们了一些启发，首屏加载，非业务代码，比如埋点统计可以使用该方案做一点小优化加快首屏加载速度

• 如果使用insertBefore方式，非常不建议同步方式+insertBefore,这种方式还不如同步加载统计脚本

• 在特殊场景下，我们需要加载统计脚本，有基础信息的依赖后，我们也需要在业务代码使用统计，我们不要在动态加载脚本的同时使用onload,在onload中尝试添加基础信息，实际上这种方式并不能满足你的需求

• 一些关于async与defer的特性，记住，执行顺序，同步任务会优先执行，async是异步，脚本下载完就执行，defer优先级比较低。

• 本文示例code example

作者：Maic
来源：juejin.cn/post/7153216620406505480

酸奶喝对，事半功倍！对于一些晦涩难懂，近乎神话的专业名词，切莫抓耳挠腮，我们直接上代码，加上通俗易懂地语言去渲染，且看今天我们如何拿捏javascript中的小山丘--作用域&作用域链，不止精解。

前言

我们需要先知道的是引擎，引擎的工作简单粗暴，就是负责javascript从头到尾代码的执行。引擎的一个好朋友是编译器，主要负责代码的分析和编译等；引擎的另一个好朋友就是今天的主角--作用域。那么作用域用来干什么呢？作用域链跟作用域又有什么关系呢？

一、作用域(scope)

作用域的定义：作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。

1、作用域的分类

(1)全局作用域

var name="global";
function foo(){
    console.log(name);
}
foo();//global

这里函数foo()内部并没有声明name变量，但是依然打印了name的值，说明函数内部可以访问到全局作用域，读取name变量。再来一个例子：

hobby='music';
function foo(){
    hobby='book';
    console.log(hobby);
}
foo();//book

这里全局作用域和函数foo()内部都没有声明hobby这个变量，为什么不会报错呢？这是因为hobby='music';写在了全局作用域，就算没有var,let,const的声明，也会被挂在window对象上，所以函数foo()不仅可以读取，还可以修改值。也就是说hobby='music';等价于window.hobby='music';。

(2)函数体作用域 函数体的作用域是通过隐藏内部实现的。换句话说，就是我们常说的，内层作用域可以访问外层作用域，但是外层作用域不能访问内层。原因，说到作用域链的时候就迎刃而解了。

function foo(){
    var age=19;
    console.log(age);
}
console.log(age);//ReferenceError:age is not defined

很明显，全局作用域下并没有age变量，但是函数foo()内部有，但是外部访问不到，自然而然就会报错了，而函数foo()没有调用，也就不会执行。

(3)块级作用域 块级作用域更是见怪不怪，像我们接触的let作用域，代码块{}，for循环用let时的作用域，if,while,switch等等。然而，更深刻理解块级作用域的前提是，我们需要先认识认识这几个名词：

--标识符：能在作用域生效的变量。函数的参数，变量，函数名。需要格外注意的是：函数体内部的标识符外部访问不到。

--函数声明：function 函数名(){}

--函数表达式： var 函数名=function(){}

--自执行函数： (function 函数名(){})()；自执行函数前面的语句必须有分号，通常用于隐藏作用域。

接下来我们就用一个例子，一口气展示完吧

function foo(sex){
    console.log(sex);
}
var f=function(){
    console.log('hello');
}
var height=180;
(
    function fn(){
        console.log(height);
    }
)();
foo('female');
//依次打印：
//180
//female

分析一下：标识符:foo,sex,height,fn;函数声明：function foo(sex){};函数表达式：var f=function(){};自执行函数：(function fn(){})();需要注意，自执行函数fn()前面的var height=180;语句，分号不能抛弃。否则，你可以试一下。

二、预编译

说好只是作用域和作用域链的，但是考虑到理解作用域链的必要性，这里还是先聊聊预编译吧。先讨论预编译在不同环境发生的情况下，是如何进行预编译的。

1. 发生在代码执行之前

（1）声明提升

console.log(b);
var b=123;//undefined

这里打印undefined,这不是报错，与Refference:b is not defined不同。这是代码执行之前，预编译的结果，等同于以下代码：

var b;//声明提升
console.log(b);//undefined
b=123;

（2）函数声明整体提升

test();//hello123  调用函数前并没有声明，但是任然打印，是因为函数声明整体提升了
function test(){
    var a=123;
    console.log('hello'+a);
}

2.发生在函数执行之前

理解这个只需要掌握四部曲：

（1）创建一个AO（Activation Object）

（2）找形参和变量声明，然后将形参和变量声明作为AO的属性名，属性值为undefined

（3）将实参和形参统一

（4）在函数体内找函数声明，将函数名作为AO对象的属性名，属性值予函数体 那么接下来就放大招了：

var global='window';
function foo(name,sex){
    console.log(name);
    function name(){};
    console.log(name);
    var nums=123;
    function nums(){};
    console.log(nums);
    var fn=function(){};
    console.log(fn);
}
foo('html');

这里的结果是什么呢？分析如下：

//从上到下
//1、创建一个AO（Activation Object）
AO:{
    //2、找形参和变量声明，然后将形参和变量声明作为AO的属性名，属性值为undefined
    name:undefined,
    sex:undefined,
    nums=undefined,
    fn:undefined,
    //3、将实参和形参统一
    name:html,
    sex:undefined,
    nums=123,
    fn:function(){},
    //4、在函数体内找函数声明，将函数名作为AO对象的属性名，属性值予函数体
    name:function(){},
    sex:undefined,
    fn:function(){},
    nums:123//这里不仅存在nums变量声明，也存在nums函数声明，但是取前者的值
    
    以上步骤得到的值，会按照后面步骤得到的值覆盖前面步骤得到的值
}
//依次打印
//[Function: name]
//[Function: name]
//123
//[Function: fn]

3.发生在全局（内层作用域可以访问外层作用域）

同发生在函数执行前一样，发生在全局的预编译也有自己的三部曲:

(1)创建GO（Global Object）对象

(2)找全局变量声明，将变量声明作为GO的属性名，属性值为undefined

(3)在全局找函数声明，将函数名作为GO对象的属性名，属性值赋予函数体 举个栗子：

var global='window';
function foo(a){
    console.log(a);
    console.log(global);
    var b;
}
var fn=function(){};
console.log(fn);
foo(123);
console.log(b);

这个例子比较简单，一样的步骤和思路，就不在赘述分析了，相信你已经会了。打印结果依次是：

[Function: fn]
123
window
ReferenceError: b is not defined

好啦，进入正轨，我们接着说作用域链。

三、作用域链

作用域链就可以帮我们找到，为什么内层可以访问到外层，而外层访问不到内层？但是同样的，在认识作用域链之前，我们需要见识见识一些更加晦涩抽象的名词。

1. 执行期上下文：当函数执行的时候，会创建一个称为执行期上下文的对象（AO对象），一个执行期上下文定义了一个函数执行时的环境。 函数每次执行时，对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的执行期上下文会被销毁。

2. 查找变量：从作用域链的顶端依次往下查找。 3.[[scope]]：作用域属性，也称为隐式属性,仅支持引擎自己访问。函数作用域，是不可访问的，其中存储了运行期上下文的结合。

我们先看一眼函数的自带属性：

function test(){//函数被创建的那一刻，就携带name,prototype属性
      console.log(123);
}
console.log(test.name);//test
console.log(test.prototype);//{} 原型
// console.log(test[[scope]]);访问不到,作用域属性，也称为隐式属性

// test() --->AO:{}执行完毕会回收
// test() --->AO:{}执行完毕会回收

接下来看看作用域链怎么实现的：

var global='window';
function foo(){
    function fn(){
        var fn=222;
    }
    var foo=111;
    console.log(foo);
}
foo();

分析：

GO:{
    foo:function(){}
}
fooAO:{
    foo:111,
    fn:function(){}
}
fnAO:{
    fn:222
}
// foo定义时 foo.[[scope]]---->0:GO{}
// foo执行时 foo.[[scope]]---->0:AO{}  1:GO{}  后访问的在前面
//fn定义时 fn.[[scope]]---->0:fnAO{} 1:fooAO{}  2:GO{}
fnAO:fn的AO对象；fooAO:foo的AO对象

综上而言：作用域链就是[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。

作者：来碗盐焗星球
来源：juejin.cn/post/7116516393100853284

前端这一块，得益于日益更新的前端框架降低了入门门槛，得益于目前全自动、半自动化的开发、测试、上线流程，也得益于目前越来越标准的产品设计流程和规范，等等这些都会让你的开发效率和工作量评估更加透明化。

可能让某些类别的前端工作逐步从一个脑力工作者变为劳动密集型的体力工作者。

前端是一个很广很大的领域，有一定的广度和深度；但是不可否认，也许80%的工作都是简单与单调的，随着技术的升级、技术门槛的降低，经过一些简单快速的培训，越来越多的人可以从事这80%的工作 => 整体看，前端的从业人员越来越多，好像越来越卷了。

但是剩余20%的具有一定复杂性、创造性、创新性、架构设计性、挑战性的工作，却不会受到太多影响，大部分情况，也正是这大约20%的工作，决定了一个产品、一个公司、一个团队的关键部分，所以如何具有足够的能力、经验和理论来承担、组织更具有价值和挑战性的这20%的工作，伴随解决挑战性问题的实战积累更多的经验和解决问题的能力，进入一个正向循环是在开发过程中不断成长和晋升的关键。

所以，前端的入门门槛低了，原本对你来说已经掌握技术的和不容易实现的内容，现在大家也许跳一跳就能伸手够到了。那么自然会要求你也不能安于现状，要学习和掌握更多东西，知识的更新周期也要缩短，才能时刻保持前端技术的领先性。

难点一：快

"前"端，顾名思义，是冲在"前"面的，好比直接服务于群众的派出所和整体把控的市局、省厅，跑在前面的派出所在响应突发事件和执行任务上的反应速度和周期都有更高的要求。

前端的"快"，体现在用户需求变化快，技术更新迭代快，和开发响应需要快等方面，都要求你不得不"快"起来。

1.1 用户需求变化快

用户使用的大部分产品的都是具有前端页面的产品，自然相关需求大部分是面向前端的。

后端可能开发一个接口，输入输出保持足够的通用性，只要没有大的变动，几周或者几个月不用变化，更多关注性能和扩展性。

从 需求 => 原型 => 设计 => 实现 的几个环节，前端也是研发岗位中更多和需求打交道的岗位。

所以需要有足够的经验和技术积累，能够对产品经理/客户提供足够灵活和可行（技术可行，时间可行，成本可行）的技术方案，来响应快速变化的需求。

1.2 技术更新迭代快

硬件升级速度快 => 客户需求变化快，相对于后端，大数据，运维，前端的技术更新迭代快是必然的。

一个接一个的框架，一个接一个的版本，今年还在用的16.7，明年发现已经过时了，17.0的生产力和便利度提升一大截。

所以要时刻保持技术的新鲜度，才能保持自身的领先性。

否则很可能一个新框架，新技术的产生，生产力直接翻倍，你学的稍微慢一点，差上半年一年，可能就让新人弯道超车了。

1.3 开发响应需要快

同样，需求要求快，技术迭代快，生产力提升快，自然开发、上线、测试、发布的周期也更加快，而前端是最受这个影响的。

因为看得到，摸得着，你的工作量是透明的，所以你的工期是可预估的。

也许下面的场景会经常出现：

• 上午出设计，预估开发6小时，测试0.5小时，那么今晚上线

• 11点测试出bug，预计修复半小时，12:00 之前要修复上线