前言

之前整理过 整理下最近做的产品里 比较典型的代码规范问题，里面有一个关于可选链运算符(?.)的规范，当时只是提了一下，今天详细说下想法，欢迎大佬参与讨论。

可选链运算符(?.)，大家都很熟悉了，直接看个例子：

const result = obj?.a?.b?.c?.d

很简单例子，上面代码?前面的属性如果是空值（null或undefined），则result值是undefined，反之如果都不是空值，则会返回最后一个d属性值。

本文不是讲解这种语法的用法，主要是想分析下日常开发中，这种语法 滥用、乱用 的问题。

滥用、乱用

最近在code review一个公司项目代码，发现代码里用到的可选链运算符，很多滥用，用的很无脑，经常遇到这种代码：

const userName = data?.items?.[0]?.user?.name

↑ 不管对象以及属性有没有可能是空值，无脑加上?.就完了。

// react class component

const name = this.state?.name



// react hooks

const [items, setItems] = useState([])

items?.map(...)

setItems?.([]) // 真有这么写的

↑ React框架下，this.state 值不可能是空值，初始化以及set的值都是数组，都无脑加上?.

const item1 = obj?.item1

console.log(item1.name)

↑ 第一行代码说明obj或item1可能是空值，但第二行也明显说明不可能是空值，否则依然会抛错，第一行的?.也就没意义了。

if (obj?.item1?.item2) {

    const item2 = obj?.item1?.item2

    const name = obj?.item1?.item2?.name

}

↑ if 里已经判断了非空了，内部就没必要判断非空了。

问题、缺点

如果不考虑 ?. 使用的必要性，无脑滥用其实也没问题，不会影响功能，优点也很多：

但是问题和缺点也很明显，而且也会很严重。分两点分析下：

1. 可读性、维护性

可读性和维护性其实是一回事，都是指不是源代码作者的开发维护人员，在捋这块代码逻辑、修改bug等情况时，处理问题的效率，代码写的好处理就快，写的烂就处理慢，很简单道理。

const onClick = () => {

    const user = props.data?.items?.[0]?.user

    if (user) {

        // use user to do something

    }

}

已这行代码为例，有个bug现象是点击按钮没反应，维护开发看到这块代码，就会想这一串链式属性里，是不是有可能有空值，所以导致了user是空值，没走进if里导致没反应。然后就继续分析上层组件props传输代码，看data值从哪儿传来的，看是不是哪块代码导致data或items空值了。。。

其实呢？从外部传过来的这一串属性里不会有空值的情况，导致bug问题根本不在这儿。

const user = props.data.items[0].user

那把?.都去掉呢？维护开发追踪问题看到这行代码，data items 这些属性肯定不能是空值，不然console就抛错了，但是bug现象里并没有抛错，所以只需要检查user能不能是空值就行了，很容易就排除了很多情况。

总结就是：给代码维护人员带来了很多分析代码的干扰，代码可读性和维护性都很差。

2. 隐式过滤了异常

api.get(...).then(result => {

    const id = result?.id

    // use id to do something

})

比如有个需求，从后台api获取数据时，需要把结果里id属性获取到，然后进行数据处理，从业务流程上看，这个api返回的result以及id必须有值，如果没值的话后续的流程就会走不通。

然后后台逻辑由于写的有问题，导致个别情况返回的 result=null，但是由于前端这里加了?.，导致页面没有任何反应，js不抛错，console也没有log，后续流程出错了，这时候如果想找原因就会很困难，对代码熟悉还行，如果不是自己写的就只能看代码捋逻辑，如果是生产环境压缩混淆了就更难排查了。

api.get(...).then(result => {

    const id = result.id

    // use id to do something

})

把?.去掉呢？如果api返回值有问题，这里会立即抛错，后面的流程也就不能进行下去了，无论开发还是生产环境都能在console里快速定位问题，即使是压缩混淆的也能从error看出一二，或者在一些前端监控程序里也能监听到。

其实这种现象跟 try catch 里不加 throw 类似，把隐式异常错误完全给过滤掉了，比如下面例子：

// 这个try本意是处理api请求异常

try {

    const data = getSaveData() // 这段js逻辑也在try里，所以如果这个方法内部抛错了，页面上就没任何反应，很难追踪问题

    const result = await api.post(url, data)

    // result 逻辑处理

} catch (e) {

    // 好点的给弹个框，打个log，甚至有的啥都不处理

}

总结就是：把异常给隐式过滤掉了，导致不能快速定位问题。

3. 编译后代码冗余

如果代码是ts，并且编译目标是ES2016，编译后代码会很长。可以看下 http://www.typescriptlang.org/play 效果。

Babel在个别stage下，编译效果一样。

但并不是说一点都不用，意思是尽量减少滥用，这样使用的频率会少很多，这种编译代码沉余也会少不少。

应该怎么用？

说了这么多，.? 应该怎么用呢？意思是不用吗？当然不是不能用，这个特性对于开发肯定好处很多的，但是得合理用，不能滥用。

其实说白了就是：什么时候需要判断一个变量或属性非空，什么时候不需要。首先在使用的时候得想下，问号前面的变量或属性值，有没有可能是空值：

const userName = data?.items?.[0]?.user?.name // 不要滥用，如果某个属性有可能是空值，则需要?.

const userName = data.items[0].user?.name // 比如data.items数组肯定不是空数组

const items2 = items1.filter(item => item.checked)

if (items2?.length) { } // 不需要?.

// react class component

const name = this.state?.name // 不需要?.



// react hooks

const [items, setItems] = useState([])

items?.map(...) // 如果setItems没有赋值空值情况，则不需要?.

setItems?.([]) // 不需要?.

const item1 = obj?.item1 // 不需要?.

console.log(item1.name)

const id = obj?.id // 下面代码已经说明不能是空值了，不需要?.

const name = obj.name

if (obj?.item1?.item2) {

    const item2 = obj?.item1?.item2 // 不需要?.

    const name = obj?.item1?.item2?.name // 不需要?.

}

const id = obj?.item?.id // 不需要?.

api.get(id).then(...) // 这个api如果id是空值，则api会抛错

当然，写代码时还得多想一下属性是否可能是空值，会一定程度的影响开发效率，也一定有开发会觉得很烦，不理解，无脑写?.多容易啊，但是我从另外两个角度分析下：

总结

本文以一个 code reviewer 角度，分析了 可选链运算符(?.) 特性的滥用情况，以及“正确使用方式”，只是代表我本人的看法，欢迎大佬参与讨论，无条件接受任何反驳。

滥用的缺点：

“正确用法”：

后记（09月25日更新）

从评论上看，对于可选链的看法，大多声音是能加就加，多加总比少加好，原因就是不想背锅，不想上线后JS动不动就崩了，无论根本原因是不是前端开发没加判断导致的，第一责任人就会找到你，有的甚至会被上级追责，问题就更严重了，而且很难解释清楚；另一方面就是为了赶工期，可选链的其中一个优点就是简单，提高开发效率。

我再从几个方面浅浅的扩展下我的看法，欢迎参与讨论

总之。。。对对对，你们说的都对！

扯皮

这段时间闲着没事就去翻翻红宝书，已经看到 Promise 篇了，今天又让我翻到两个陌生的知识点。

因为 Promise 业务场景太多了自我感觉掌握的也比较透彻，之前也跟着 Promise A+ 的规范手写过完整的 Promise，所以这部分内容基本上就大致过一遍，直到看见关于 Promise 的取消以及监听进度...🤔

只能说以后要是我当上面试官一定让候选人来谈谈这两个点，然后顺势安利我这篇文章🤣

不过好像目前为止也没见哪个面试官出过...

正文

取消功能

我们都知道 Promise 的状态是不可逆的，也就是说只能从 pending -> fulfilled 或 pending -> rejected，这一点是毋庸置疑的。

但现在可能会有这样的需求，在状态转换过程当中我们可能不再想让它进行下去了，也就是说让它永远停留至 pending 状态。

奇怪了，想要一直停留在 pending，那我不调用 resolve 和 reject 不就行了🤔

 const p = new Promise((resolve, reject) => {

    setTimeout(() => {

      // handler data, no resolve and reject

    }, 1000);

 });

 console.log(p); // Promise {<pending>} 💡

但注意我们的需求条件，是在状态转换过程中，也就是说必须有调用 resolve 和 reject，只不过中间可能由于某种条件，阻止了这两个调用。

其实这个场景和超时中断有点类似但还是不太一样，我们先利用 Promise.race 来看看：模拟一个发送请求，如果超时则提示超时错误：

const getData = () =>

  new Promise((resolve) => {

    setTimeout(() => {

      console.log("发送网络请求获取数据"); // ❗

      resolve("success get Data");

    }, 2500);

  });



const timer = () =>

  new Promise((_, reject) => {

    setTimeout(() => {

      reject("timeout");

    }, 2000);

  });



const p = Promise.race([getData(), timer()])

  .then((res) => {

    console.log("获取数据:", res);

  })

  .catch((err) => {

    console.log("超时: ", err);

  });

问题是现在确实能够确认超时了，但 race 的本质是内部会遍历传入的 promise 数组对它们的结果进行判断，那好像并没有实现网络请求的中断哎🤔，即使超时网络请求还会发出：

而我们想要实现的取消功能是希望不借助 race 等其他方法并且不发送请求。

比如让用户进行控制，一个按钮用来表示发送请求，一个按钮表示取消，来中断 promise 的流程：

当然这里我们不讨论关于请求的取消操作，重点在 Promise 上

其实按照我们的理解只用 Promise 是不可能实现这样的效果的，因为从一开始接触 Promise 就知道一旦调用了 resolve/reject 就代表着要进行状态转换。不过 取消 这两个字相信一定不会陌生，clearTimeout、clearInterval 嘛。

OK，如果你想到了这一点这个功能就出来了，我们直接先来看红宝书上给出的答案：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

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

    <title>Document</title>

  </head>

  <body>

    <button id="send">Send</button>

    <button id="cancel">Cancel</button>

    

    <script>

      class CancelToken {

        constructor(cancelFn) {

          this.promise = new Promise((resolve, reject) => {

            cancelFn(() => {

              console.log("delay cancelled");

              resolve();

            });

          });

        }

      }

      const sendButton = document.querySelector("#send");

      const cancelButton = document.querySelector("#cancel");



      function cancellableDelayedResolve(delay) {

        console.log("prepare send request");

        return new Promise((resolve, reject) => {

          const id = setTimeout(() => {

            console.log("ajax get data");

            resolve();

          }, delay);



          const cancelToken = new CancelToken((cancelCallback) =>

            cancelButton.addEventListener("click", cancelCallback)

          );

          cancelToken.promise.then(() => clearTimeout(id));

        });

      }

      sendButton.addEventListener("click", () => cancellableDelayedResolve(1000));

    </script>

  </body>

</html>

这段代码说实话是有一点绕的，而且个人觉得是有多余的地方，我们一点一点来看：

首先针对于 sendButton 的事件处理函数，这里传入了一个 delay，可以把它理解为取消功能期限，超过期限就要真的发送请求了。我们看该处理函数内部返回了一个 Promise，而 Promise 的 executor 中首先开启了定时器，并且实例化了一个 CancelToken，而在 CancelToken 中才给 cancelButton 添加点击事件。

这里的 CancelToken 就是我觉得最奇怪的地方，可能没有体会到这个封装的技巧，路过的大佬如果有理解的希望能帮忙解释一下。它的内部创建了一个 Promise，绕了一圈后相当于 cancelButton 的点击处理函数是调用这个 Promise 的 resolve，最终是在其 pending -> fuilfilled，即 then 方法里才去取消定时器，那为什么不直接在事件处理函数中取消呢？难道是为了不影响主执行栈的执行所以才将其推到微任务处理🤔？

介于自己没理解，我就按照自己的思路封装个不一样的🤣：

const sendButton = document.querySelector("#send");

const cancelButton = document.querySelector("#cancel");



class CancelPromise {



 // delay: 取消功能期限  request：获取数据请求(必须返回 promise)

  constructor(delay, request) {

    this.req = request;

    this.delay = delay;

    this.timer = null;

  }



  delayResolve() {

    return new Promise((resolve, reject) => {

      console.log("prepare request");

      this.timer = setTimeout(() => {

        console.log("send request");

        this.timer = null;

        this.req().then(

          (res) => resolve(res),

          (err) => reject(err)

        );

      }, this.delay);

    });

  }



  cancelResolve() {

    console.log("cancel promise");

    this.timer && clearTimeout(this.timer);

  }

}



// 模拟网络请求

function getData() {

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve("this is data");

    }, 2000);

  });

}



const cp = new CancelPromise(1000, getData);



sendButton.addEventListener("click", () =>

  cp.delayResolve().then((res) => {

    console.log("拿到数据：", res);

  })

);

cancelButton.addEventListener("click", () => cp.cancelResolve());

正常发送请求获取数据：

中断 promise：

没啥大毛病捏~

进度通知功能

进度通知？那不就是类似发布订阅嘛？还真是，我们来看红宝书针对这块的描述：

执行中的 Promise 可能会有不少离散的“阶段”，在最终解决之前必须依次经过。某些情况下，监控 Promise 的执行进度会很有用

这个需求就比较明确了，我们直接来看红宝书的实现吧，核心思想就是扩展之前的 Promise，为其添加 notify 方法作为监听，并且在 executor 中增加额外的参数来让用户进行通知操作：

class TrackablePromise extends Promise {

  constructor(executor) {

    const notifyHandlers = [];

    super((resolve, reject) => {

      return executor(resolve, reject, (status) => {

        notifyHandlers.map((handler) => handler(status));

      });

    });

    this.notifyHandlers = notifyHandlers;

  }

  notify(notifyHandler) {

    this.notifyHandlers.push(notifyHandler);

    return this;

  }

}

let p = new TrackablePromise((resolve, reject, notify) => {

  function countdown(x) {

    if (x > 0) {

      notify(`${20 * x}% remaining`);

      setTimeout(() => countdown(x - 1), 1000);

    } else {

      resolve();

    }

  }

  countdown(5);

});



p.notify((x) => setTimeout(console.log, 0, "progress:", x));

p.then(() => setTimeout(console.log, 0, "completed"));

emm 就是这个例子总感觉不太好，为了演示这种效果还用了递归，大伙们觉得呢？

不好就自己再写一个🤣！不过这次的实现就没有多大问题了，基本功能都具备也没有什么阅读障碍，我们再添加一个稍微带点实际场景的例子吧：

// 模拟数据请求

function getData(timer, value) {

    return new Promise((resolve) => {

      setTimeout(() => {

        resolve(value);

      }, timer);

    });

}



let p = new TrackablePromise(async (resolve, reject, notify) => {

  try {

    const res1 = await getData1();

    notify("已获取到一阶段数据");

    const res2 = await getData2();

    notify("已获取到二阶段数据");

    const res3 = await getData3();

    notify("已获取到三阶段数据");

    resolve([res1, res2, res3]);

  } catch (error) {

    notify("出错！");

    reject(error);

  }

});



p.notify((x) => console.log(x));

p.then((res) => console.log("Get All Data:", res));

对味儿了~😀

End

关于取消功能在红宝书上 TC39 委员会也曾准备增加这个特性，但相关提案最终被撤回了。结果 ES6 Promise 被认为是“激进的”：只要 Promise 的逻辑开始执行，就没有办法阻止它执行到完成。

实际上我们学了这么久的 Promise 也默认了这一点，因此这个取消功能反而就不太符合常理，而且十分鸡肋。比如说我们有使用 then 回调接收数据，但因为你点击了取消按钮造成 then 回调不执行，我们知道 Promise 支持链式调用，那如果还有后续操作都将会被中断，这种中断行为 debug 时也十分痛苦，更何况最麻烦的一点是你还需要传入一个 delay 来表示取消的期限，而这个期限到底要设置多少才合适呢...

至于说进度通知功能，仁者见仁智者见智吧...

但不管怎么样两个功能实现的思路都是比较有趣的，而且不太常见，不考虑实用性确实能够成为一道考题，只能说很符合面试官的口味😏

前言

在业务开发中，弹窗是我们常常能够遇到的开发需求，通常我们使用组件都是通过show变量来控制弹窗的开启或者隐藏。这样面对简单的业务需求的确可以满足了，但是面对深层嵌套，不同地方打开同一个弹窗便会让我们头疼。于是我想通过函数的方式来打开弹窗，通过函数参数的方式来向弹窗内更新props和处理弹窗的emit事件。

<template>

  <n-button @click="open">open</n-button>

</template>



<script setup lang="ts">

import { injectTestModal } from "./test-modal/use-test-modal"

const model = injectTestModal()

function open() {

  model?.open({

    testValue: "传给弹窗组件的值",

    onConfirm({ formData }, close, endLoading) {

      console.log({ ...formData })

      endLoading()

      close()

    },

  })

}

</script>

传统vue编写弹窗

通过变量来直接控制弹窗的开启和关闭。

<template>

  <n-button @click="showModal = true">

    来吧

  </n-button>

  <n-modal v-model:show="showModal" preset="dialog" title="Dialog">

    <template #header>

      <div>标题</div>

    </template>

    <div>内容</div>

    <template #action>

      <div>操作</div>

    </template>

  </n-modal>

</template>



<script lang="ts">

import { defineComponent, ref } from 'vue'



export default defineComponent({

  setup () {

    return {

      showModal: ref(false)

    }

  }

})

</script>

痛点

• 深层次的传props让人有很大的心理负担，污染组件props


• 要关注弹窗show变量的true，false

函数式弹窗

在主页面用Provider包裹一下

// RootPage.vue

<ModalProvider>

  <ChildPage></ChildPage>

</ModalProvider>



<script setup lang="ts">

import ModalProvider from "./ModalProvider.vue"

import ChildPage from "./ChildPage.vue"

</script>

在页面内的某个子组件中，直接通过oepn方法打开弹窗

// ChidPage.vue

<template>

	<n-button @click="open">open</n-button>

</template>



<script setup lang="ts">

import { injectTestModal } from "./test-modal/use-test-modal"

const model = injectTestModal()

function open() {

	model?.open({

		testValue: "传给弹窗组件的值",

		onConfirm({ formData }, close, endLoading) {

			console.log({ ...formData })

			endLoading()

			close()

		},

	})

}

</script>

优势

• 对于使用者来说简单，没有控制show的心理负担


• 弹窗内容和其他业务代码分离，不会污染其他组件props和结构


• 能够充分复用同一个弹窗，通过函数参数的方式来更新弹窗内容，在不同地方打开同一个弹窗

劣势

• 对于一些简单需求的弹窗，用这种函数式的弹窗会有些臃肿


• 在使用函数式弹窗前需要做一些操作（Provider和Inject），会在后面提到以及解决方案。

如何使用这种函数式的弹窗

原理

通过在根页面将我们的Modal组件挂载上去，然后通过使用hook去管理这个modal组件的状态值（props,ref）,然后通过provide将props和event和我们的modal组件联系起来，再在我们需要使用弹窗的地方使用inject更新props来启动弹窗。

步骤1(❌):编写Modal

这里我使用的是Naive Ui的Modal组件，按喜好选择就行。按照你的需求编写弹窗的内容。定义好props和emits，写好他们的类型申明。

// TestModal.vue

<template>

  <n-modal

    v-model:show="isShowModal"

    preset="dialog"

    @after-leave="handleClose"

  >

    ...你的弹窗内容

  </n-modal>

</template>



<script setup lang="ts">

import { ref, reactive, computed, watch } from "vue"

import { useVModel } from "@vueuse/core"

import { FormRules } from "naive-ui"

interface ModalProps {

  show: boolean

  testValue: string

}



// 中间区域不要修改

const props = defineProps<ModalProps>()

const formRef = ref()

const loading = ref(false)

const isShowModal = useVModel(props, "show")

// 中间区域不要修改



const rules: FormRules = []



const formData = reactive({

  testValue: props.testValue,

})



const callBackData = computed(() => {

  return {

    formData,

  }

})



watch(

  () => props.show,

  () => {

    if (props.show) {

      formData.testValue = props.testValue

    } else {

      formData.testValue = ""

    }

  }

)



const emits = defineEmits<{

  (e: "update:show", value: boolean): void

  (e: "close", param: typeof callBackData.value): void

  (

    e: "confirm",

    param: typeof callBackData.value,

    close: () => void,

    endLoading: () => void

  ): void

  (e: "cancel", param: typeof callBackData.value): void

}>()

function handleCancel() {

  // 中间区域不要修改

  emits("cancel", callBackData.value)

  isShowModal.value = false

  // 中间区域不要修改

}



function handleClose() {

  // 中间区域不要修改

  emits("close", callBackData.value)

  isShowModal.value = false

  // 中间区域不要修改

}



function handleConfirm() {

  // 中间区域不要修改

  loading.value = true

  emits(

    "confirm",

    callBackData.value,

    () => {

      loading.value = false

      isShowModal.value = false

    },

    () => {

      loading.value = false

    }

  )

  // 中间区域不要修改

}

</script>

步骤2(❌):编写hook来管理弹窗的状态

在这个文件里面，使用hook管理 TestModal 弹窗需要的props和event事件，然后我们通过ts类型体操来获取TestModal的props类型和event类型，我们向外inject一个 open 函数，这个函数可以更新 TestModal 的props和event，同时打开弹窗，他的参数有完整的类型提示，可以让使用者更加明确的使用我们的弹窗。

// use-test-modal.ts

import {

  ref,

  provide,

  InjectionKey,

  inject,

  VNodeProps,

  AllowedComponentProps,

  reactive,

} from "vue";

import Modal from "./TestModal.vue";



/**

 * 通过引入弹窗组件来获取组件的除show，update：show以外的props和emits来作为open函数的

 */

type ModalInstance = InstanceType<

  typeof Modal extends abstract new (...args: any) => any ? typeof Modal : any

>["$props"];

type OpenParam = Omit<

  {

    readonly [K in keyof Omit<

      ModalInstance,

      keyof VNodeProps | keyof AllowedComponentProps

    >]: ModalInstance[K];

  },

  "show" | "onUpdate:show"

>;



interface AnyFileChangeModal {

  open: (param?: OpenParam) => Promise<void>;

}



/**

 * 通过弹窗实例来获取弹窗组件内需要哪些props

 */

type AllProps = Omit<

  OpenParam,

  "onClose" | "onCancel" | "onConfirm" | "onUpdate:show"

> & { show: boolean };

const anyModalKey: InjectionKey<AnyFileChangeModal> = Symbol("ModalKey");

export function provideTestModal() {

  const allProps: AllProps = reactive({

    show: false,

  } as AllProps);

  const closeCallback = ref();

  const cancelCallback = ref();

  const confirmCallback = ref();

  const handleUpdateShow = (value: boolean) => {

    allProps.show = value;

  };



  /**

   * @param param 通过函数来更新props

   */

  function updateAllProps(param: OpenParam) {

    const excludeKey = ["show", "onClose", "onConfirm", "onCancel"];

    for (const [key, value] of Object.entries(param)) {

      if (!excludeKey.includes(key)) {

        allProps[key] = value;

      }

    }

  }

  function clearAllProps() {

    for (const [key] of Object.entries(allProps)) {

      allProps[key] = undefined;

    }

  }



  async function open(param: OpenParam) {

    clearAllProps();

    updateAllProps(param);

    allProps.show = true;

    param.onClose && (closeCallback.value = param.onClose);

    param.onConfirm && (confirmCallback.value = param.onConfirm);

    param.onCancel && (cancelCallback.value = param.onCancel);

  }

  provide(anyModalKey, { open });

  return {

    allProps,

    closeCallback,

    confirmCallback,

    cancelCallback,

    handleUpdateShow,

  };

}



export function injectTestModal() {

  return inject(anyModalKey)

}

Ï

步骤3(❌):提供Provider

在这个文件里，我将TestModal放在了根页面，然后将hook返回的props和event绑定给TestModal

// ModalProvider.vue

<template>

  <slot />



  <TestModal

    v-bind="allTestModalProps"

    @update:show="handleTestModalUpdateShow"

    @close="closeTestModalCallback"

    @confirm="confirmTestModalCallback"

    @cancel="cancelTestModalCallback"

  />

  <!-- 新增Modal -->

</template>



<script setup lang="ts">

import TestModal from "./test-modal/TestModal.vue";

import { provideTestModal } from "./test-modal/use-test-modal";

/** 新增import */



const {

  allProps: allTestModalProps,

  handleUpdateShow: handleTestModalUpdateShow,

  closeCallback: closeTestModalCallback,

  confirmCallback: confirmTestModalCallback,

  cancelCallback: cancelTestModalCallback,

} = provideTestModal();

/** 新增provide */

</script>

步骤4(❌):通过函数打开弹窗

<template>

  <n-button @click="open">open</n-button>

</template>



<script setup lang="ts">

import { injectTestModal } from "./test-modal/use-test-modal"

const model = injectTestModal()

function open() {

  model?.open({

    testValue: "传给弹窗组件的值",

    onConfirm({ formData }, close, endLoading) {

      console.log({ ...formData })

      endLoading()

      close()

    },

  })

}

</script>

到这里也就结束了。如果这样写一个弹窗，确实可以达到函数式的打开弹窗，但是他实在是太繁琐了，要写这么一堆东西，不如直接修改弹窗的show来的快。如果看过上面的use-test-modal.ts的话，会发现里面有AllProps，这是为了减少方便使用脚本工具来写通用化的代码，可以大大减少人工的重复代码编写，接下来我们使用一个工具来减少这些繁琐的操作。

步骤1(✅):初始化Provider

通过使用工具生成根页面ModalProvder组件。
具体步骤：在你想放置当前业务版本的弹窗文件夹路径下使用终端执行脚本，选择initProvider

步骤2(✅):生成弹窗模板

通过继续使用脚本工具，生成弹窗组件以及hook文件。
具体步骤：在你想放该弹窗的文件夹路径下使用终端，使用脚本工具，选择genModal,然后跟着指令操作就行。比如例子中，我们生产名为test的弹窗，然后告诉脚本我们的ModalProvider组件的绝对路径，脚本帮我生产test-modal的文件夹，里面放着testModal.vue和use-test-modal.ts，这里的use-test-modal.ts文件已经是成品了，不需要你去修改，ModalProvider.vue也不需要你去修改，里面的路径关系也帮你处理好了。

步骤3(✅):修改弹窗内容

上一步操作中，脚本帮我写好了TestModal.vue组件，我们可以在他的基础上完善我们的业务需求。

步骤4(✅):调用弹窗

我们找到生成的use-test-modal.ts，里面有一个injectXXXModal的方法，我们在哪个地方用到弹窗就引用执行他，返回的对象中有open方法，通过open方法去开启弹窗并且更新弹窗props。

Demo

预览
Demo地址
里面有完整的demo代码

脚本工具

仓库地址
这个是我写的脚本工具，用来减少一些重复代码的工作。用法可看readme

总结

本文先通过比较函数式的弹窗和直接传统编写弹窗的优劣，然后引出本文的主旨（如何编写函数式弹窗），再考虑我这一版函数式弹窗的问题，最后通过脚本工具来解决这一版函数式弹窗的劣势，完整的配合脚本工具，可以极大的加快我们的工作效率。
大家不要看这么写要好几个文件夹，实际使用的时候其实就是脚本生成代码后，我们只需要去修改弹窗主题的内容。有什么疑惑或者建议评论区聊。

大家好，我卡颂。

最近尤大的一个推文引起了不小热议，大概经过是：

尤大在推上的发言一直比较耿直，这次又涉及到React这个老对手，关注度自然不低。

再加上国内前端自媒体的一波引导发酵，比如知乎下这个话题相关的问题中的措辞是怒喷，懂得都懂。

在这样氛围与二手信源的影响下，会给人一种大佬都亲手下场撕了的感觉，自然会引来React、Vue各自拥趸的一番激烈讨论。

年年都是一样的套路，毫无新意......

面对这样的争吵，我们应该做什么呢？

首先，回到源头本身，尤大diss的有道理么？有。

React的心智负担重么？确实重。比如useEffec这个API，你能想象文档中一个章节居然有6篇文章是教你如何正确使用useEffec的么？

造成这一现象的原因有很多，比如：

当我们继续往前回溯，Hooks必须显式声明依赖是React更新机制决定的，而React更新机制又是React实现原理的核心。

本质来说，还是React既往的成功、庞大的社区生态让他积重难返，无法从底层重写。

这是历史必然的进程，如果Vue所有新特性都在Vue2基础上迭代（而不是完全重写的Vue3），我相信也是同样的局面。

所以，当前React的迭代方向是 —— 支持上层框架（比如Next.js、Remix），寄希望于靠这些框架的封装能力弥补React自身心智负担重的缺点。这个策略显然也是成功的。

回到这次争吵本身，尤大不知道React文档为什么要花大篇幅帮开发者避坑（以及背后反映的积重难返）么？他显然是知道的。

他如此回复是因为他所处的位置是框架作者，React是他的竞争对手。设想一下，如果你的竞争对手在一些方面确实不如你，但他的用户对此的反应不是“太难用了，我要换个好用的”，而是“一定是我用的姿势不对，你快出个文档好好教教我”

面对这样的用户，换谁都得有一肚子牢骚吧～

让我们再把视角转到React的用户（也就是我们这些普通开发者）上。我们为什么选择React呢？

可能有些人是处于喜好。但大部分开发者之所以用React，完全是因为公司要求用React。

用React的公司多，招React的岗位多，自然选择React的开发者就多了。

那么为什么用React的公司多呢？这显然是多年前React在先发优势、社区生态两场战役取胜后得到的结果。

总结

所以，我们需要尊重两个事实：

两者并不矛盾，他们都是历史进程的产物。

Vue、React之间的讨论，即使是从技术层面出发，最后也容易陷入“React心智负担这么重，你们还甘之如饴，你们React党是不是傻”这样的争吵中。

这显然就是忽略了历史的进程。

正确的应对方式是多关心关心自己未来的发展：

• 如果我的重心在海外，那应该给Next.js更多关注。海外远程团队不是Next就是Nest


• 如果我的重心在国内，国内流量都被小程序分割了。一个长远的增长点应该是鸿蒙

背景

前几天在需求评审的时候，产品问我能不能把输入框也做成富文本那样，在输入一些敏感词、禁用词的时候，给它标红。我听完心里一颤，心想：好家伙，又来给我整活。本着能砍就砍的求生法则，我和产品说：输入框输入的文字都会被转成字符串，这没办法去标红呀！产品很硬气的回到：没办法，这是老板提的需求，你下去研究研究吧。行吧，老板发话说啥也没用，开干吧！

实现思路

实现标红就需要给文字加上html标签和样式，但是输入框会将html都转为字符串，既然输入框无法实现，那么我们换一种思路，通过div代替输入框来显示输入的文本，那我们是不是就可以实现文本标红了？话不多说，直接上代码（文章结尾会附上demo）：

<div class="main">

    <div id="shadowInput" class="highlight-shadow-input"></div>

    <textarea

        id="textarea"

        cols="30"

        rows="10"

        class="highlight-input"

    ></textarea>

</div>

.main {

    position: relative;

  }

.highlight-shadow-input {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    padding: 8px;

    border: 1px;

    box-sizing: border-box;

    font-size: 12px;

    font-family: monospace;

    overflow-y: auto;

    word-break: break-all;

    white-space: pre-wrap;

}

.highlight-input {

    position: relative;

    width: 100%;

    padding: 8px;

    box-sizing: border-box;

    font-size: 12px;

    background: rgba(0, 0, 0, 0);

    -webkit-text-fill-color: transparent;

    z-index: 999;

    word-break: break-all;

}

实现这个功能的精髓就在于将输入框的背景和输入的文字设置为透明，然后将其层级设置在div之上，这样用户既可以在输入框中输入，而输入的文字又不会展示出来，然后将输入的文本处理后渲染到div上。

const textarea = document.getElementById("textarea");

const shadowInput = document.getElementById("shadowInput");

const sensitive = ["敏感词", "禁用词"];

textarea.oninput = (e) => {

let value = e.target.value;

    sensitive.forEach((word) => {

      value = value.replaceAll(

        word,

        `<span style="color:#e52e2e">${word}</span>`

      ).replaceAll("\n", "<br>");;

    });

    shadowInput.innerHTML = value;

};

监听输入框oninput事件，用replaceAll匹配到敏感词并转为html后渲染到shadowInput上。此外，我们还需要对输入框的滚动进行监听，因为shadowInput是固定高度的，如果用户输入的文本出现滚动条，则需要让shadowInput也滚动到对应的位置

<div><div id="shadowInput" class="highlight-shadow-input"></div></div>

textarea.onscroll = (e) => {

    shadowInput.scrollTop = e.target.scrollTop;

};

// 此处输入时也需要同步是因为输入触底换行时，div的高度不会自动滚动

textarea.onkeydown = (e) => {

    shadowInput.scrollTop = e.target.scrollTop;

};

最终实现效果：

至此一个简单的文本输入框实现文字高亮的功能就完成了，上述代码只是简单示例，在实际业务场景中还需要考虑xss注入、特殊字符处理、特殊字符高亮等等复杂问题。

总结

这篇文章主要给遇到有类似业务需求的同学一个参考，以及激发大家的灵感，用这种方法是不是还可以实现一些简单的富文本功能呢？例如文字加删除线、文字斜体加粗等等。有想法或有问题的小伙伴可以在评论区留言一起探讨哦！

demo

前言

 记录分享每一个日常开发项目中的实用小知识，不整那些虚头巴脑的框架理论与原理，之前分享过抽奖功能、签字功能等，有兴趣的可以看看本人以前的分享。
 今天要分享的实用小知识是最近项目中遇到的标签相关的功能，我不知道叫啥，姑且称之为【多行标签展开隐藏】功能吧，类似于多行文本展开折叠功能，如果超过最大行数则显示展开隐藏按钮，如果不超过则不显示按钮。多行文本展开与折叠功能在网上有相当多的文章了，也有许多开源的封装组件，而多行标签展开隐藏的文章却比较少，刚好最近我也遇到了这个功能，所以就单独拿出来与大家分享如何实现。

出处

 【多行标签展开与隐藏】该功能我们平时可能没注意一般在哪里会有，其实最常见的就是各种APP的搜索页面的历史记录这里，下面是我从拼多多（左）和腾讯学堂小程序（右）截下来的功能样式：

其它APP一般搜索的历史记录这里都有这个小功能，比如京东、支付宝、淘宝、抖音、快手等，可能稍有点儿不一样，有的是按钮样式，有的是只有展开没有收起功能，可能我们用过了很多年平时都没有注意到这个小功能，有想了解的可以去看一看哈。如果有一天你们需要开发一个搜索页面的话产品就很有可能出这样的一个功能，接下来我们就来看看这种功能我们该如何实现。

功能实现

我们先看实现的效果图，然后再分析如何实现，效果图如下：

【样式一】：标签容器和展开隐藏按钮分开（效果图样式一）

 标签容器和按钮分开的这种样式功能实现起来的话我个人觉得难度稍微简单一些，下面我们看看如何实现这种分开的功能。

第一种方法：通过与第一个标签左偏移值对比实现

原理：遍历每个标签然后通过与第一个标签左偏移值对比，如果有几个相同偏移值则说明有几个换行

具体实现上代码：

<div class="list-con list-con-1">

  <div class="label">人工智能div>

  <div class="label">人工智能与应用div>

  <div class="label">行业分析与市场数据div>

  <div class="label">标签标签标签标签标签标签标签标签div>

  <div class="label">标签div>

  <div class="label">啊啊啊div>

  <div class="label">宝宝贝贝div>

  <div class="label">微信div>

  <div class="label">吧啊啊div>

  <div class="label">哦哦哦哦哦哦哦哦div>

div>

<div class="expand expand-1">展开 ∨div>

解析：HTML布局就不用多说了，是个前端都知道该怎么搞，如果不知道趁早送外卖去吧，多说无益，把机会留给其他人。其次CSS应该也是比较简单的，注意的是有个前提需要先规定容器的最大高度，然后使用overflow超出隐藏，这样展开就直接去掉该属性，让标签自己撑开即可。JavaScript部分我这里没有使用啥框架，因为这块实现就是个简单的Demo所以就用纯原生写比较方便，这里我们先获取容器，然后获取容器的孩子节点（这里我们也可以直接通过className查询出所有标签元素），返回的是一个可遍历的变签对象，然后我们记录第一个标签的offsetLeft左偏移值，接下来遍历所有的标签元素，如果有与第一个标签相同的值则累加，最终line表示有几行，如果超过我们最大行数（demo超出2行隐藏）则显示展开隐藏按钮。

第二种方法：通过计算容器高度对比

原理：通过容器底部与标签top比较，如果有top值大于容器底部bottom则表示超出容器隐藏。

具体上代码：

解析：HTML和CSS同方法一同，不同点在于这里是通过getBoundingClientRect()方法来判断，还是遍历所有标签，不同的是如果有标签的top值大于等于了容器的bottom值，则说明了标签已超出容器，则要显示展开隐藏按钮，展开隐藏还是通过容器overflow属性来实现比较简单。

【样式二】：展开隐藏按钮和标签同级（效果图样式二）

 这种样式也是绝大部分APP产品使用的风格，不信你可以打开抖音商城或汽车之家的搜索历史，十个产品九个是这样设计的，不是这样的我倒立洗头。
 这种放在同级的就相对稍微难一点，因为要把展开隐藏按钮塞到标签的最后，如果是隐藏的话就要切割标签展示数量，那下面我就带大家看看我是是如何实现的。

方法一：通过遍历高度判断

原理：同样式一的高度判断一样，通过容器底部bottom与标签top比较，如果有top值大于容器顶部bottom则表示超出容器隐藏，不同的是如何计算标签展示的长度。有个前提是按钮和标签的的宽度要做限制，最好是一行能放一个标签和按钮。

具体实现上代码：

<div id="app3">

  <div class="list-con list-con-3" :class="{'list-expand': isExpand}">

    <div class="label" v-for="item in labelArr.slice(0, labelLength)">{{ item }}div>

    <div class="label expand-btn" v-if="showExpandBtn" @click="changeExpand">{{ !isExpand ? '展开 ▼' : '隐藏 ▲' }}div>

  div>

div>

<script>

  const { createApp, nextTick } = Vue

  createApp({

    props: {

      maxLine: {

        type: Number,

        default: 2

      }

    },

    data () {

      return {

        labelArr: [],

        isExpand: false,

        showExpandBtn: false,

        labelLength: 0,

        hideLength: 0

      }

    },

    mounted () {

      const labels = ['人工智能', '人工智能与应用', '行业分析与市场数据', '标签标签标签标签标签标签标签', '标签A', '啊啊啊', '宝宝贝贝', '微信', '吧啊啊', '哦哦哦哦哦哦哦哦', '人工智能', '人工智能与应用']

      

      this.labelArr = labels

      this.labelLength = labels.length

      nextTick(() => {

        this.init()

      })

    },

    methods: {

      init () {

        const listCon = document.querySelector('.list-con-3')

        const labels = listCon.querySelectorAll('.label:not(.expand-btn)')

        const expandBtn = listCon.querySelector('.expand-btn')



        let labelIndex = 0 // 渲染到第几个

        const listConBottom = listCon.getBoundingClientRect().bottom // 容器底部距视口顶部距离

        for(let i = 0; i < labels.length; i++) {

          const _top = labels[i].getBoundingClientRect().top

          if (_top >= listConBottom ) { // 如果有标签顶部距离超过容器底部则表示超出容器隐藏

            this.showExpandBtn = true

            console.log('第几个索引标签停止', i)

            labelIndex = i

            break

          } else {

            this.showExpandBtn = false

          }

        }

        if (!this.showExpandBtn) {

          return

        }

        nextTick(() => {

          const listConRect = listCon.getBoundingClientRect()

          const expandBtn = listCon.querySelector('.expand-btn')

          const expandBtnWidth = expandBtn.getBoundingClientRect().width

          const labelMaringRight = parseInt(window.getComputedStyle(labels[0]).marginRight)

          for (let i = labelIndex -1; i >= 0; i--) {

            const labelRight = labels[i].getBoundingClientRect().right - listConRect.left

            if (labelRight + labelMaringRight + expandBtnWidth <= listConRect.width) {

              this.hideLength = i + 1

              this.labelLength = this.hideLength

              break

            }

          }    

        })

      },

      changeExpand () {

        this.isExpand = !this.isExpand

        console.log(this.labelLength)

        if (this.isExpand) {

          this.labelLength = this.labelArr.length

        } else {

          this.labelLength = this.hideLength

        }

      }

    }

  }).mount('#app3')

script>

解析：同级样式Demo我们使用vue来实现，HTML布局和CSS样式没有啥可说的，还是那就话，不行真就送外卖去比较合适，这里我们主要分析一下Javascript部分，还是先通过getBoundingClientRect()方法来获取容器的bottom和标签的top，通过遍历每个标签来对比是否超出容器，然后我们拿到第一个超出容器的标签序号，就是我们要截断的长度，这里是通过数组的slice()方法来截取标签长度，接下来最关建的如何把按钮拼接上去，因为标签的宽度是不定的，我们要把按钮显示在最后，我们并不确定按钮拼接到最后是不是会导致宽度不够超出，所以我们倒叙遍历标签，如果（最后一个标签的右边到容器的距离right值+标签的margin值+按钮的width）和小于容器宽度，则说明展示隐藏按钮可以直接拼接在后面，否则标签数组长度就要再减一位来判断是否满足。然后展开隐藏功能就通过切换原标签长度和截取的标签长度来完成即可。

方法二：通过与第一个标签左偏移值对比实现

原理：同样式一的方法原理，遍历每个标签然后通过与第一个标签左偏移值对比判断是否超出行数，然后长度截取同方法一一致。

直接上代码：

这里也无需多做解释了，直接看代码即可。

结尾

上面就是【多行标签展开隐藏】功能的基本实现原理，网上相关实现比较少，我也是只用了Javascript来实现，如果可以纯靠CSS实现，有更简单或更好的方法实现可以留言相互交流学。代码没有封装成组件，但是具有一些参考意义，用于生产可以自己去封装成组件使用，完整的代码在我的GitHub仓库。

在这篇博客中，我们将分享 10+ 个实用的一行 JavaScript 代码，这些代码可以帮助你提高编码效率和代码简洁度。这些代码片段将涵盖各种用途，从操作数组和字符串，到更高级的概念，如异步编程和面向对象编程。

获取数组中的随机元素

使用 Math.random() 函数和数组长度可以轻松获取数组中的随机元素：

const arr = [1, 2, 3, 4, 5];

const randomElement = arr[Math.floor(Math.random() * arr.length)];

console.log(randomElement);

数组扁平化

使用 reduce() 函数和 concat() 函数可以轻松实现数组扁平化：

const arr = [[1, 2], [3, 4], [5, 6]];

const flattenedArr = arr.reduce((acc, cur) => acc.concat(cur), []);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

对象数组根据某个属性值进行排序

const sortedArray = array.sort((a, b) => (a.property > b.property ? 1 : -1));

从数组中删除特定元素

const removedArray = array.filter((item) => item !== elementToRemove);

检查数组中是否存在重复项

const hasDuplicates = (array) => new Set(array).size !== array.length;

判断数组是否包含某个值

const hasValue = arr.includes(value);

首字母大写

const capitalized = str.charAt(0).toUpperCase() + str.slice(1);

获取随机整数

const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;

获取随机字符串

const randomStr = Math.random().toString(36).substring(2, length);

使用解构和 rest 运算符交换变量的值：

let a = 1, b = 2

[b, a] = [a, b]

console.log(a, b) // 2, 1

将字符串转换为小驼峰式命名：

const str = 'hello world'

const camelCase = str.replace(/\s(.)/g, ($1) => $1.toUpperCase()).replace(/\s/g, '').replace(/^(.)/, ($1) => $1.toLowerCase())

console.log(camelCase) // "helloWorld"

计算两个日期之间的间隔

const diffInDays = (dateA, dateB) => Math.floor((dateB - dateA) / (1000 * 60 * 60 * 24));

查找日期位于一年中的第几天

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

复制内容到剪切板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);



copyToClipboard("Hello World");

获取变量的类型

const getType = (variable) => Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();



getType('');     // string

getType(0);      // number

getType();       // undefined

getType(null);   // null

getType({});     // object

getType([]);     // array

getType(0);      // number

getType(() => {});  // function

检测对象是否为空

const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;

系列文章

• 10个超级实用的reduce使用技巧


• 10个超级实用的Set、Map使用技巧


• 10个超级好用的Javascript技巧

我的更多前端资讯

欢迎大家技术交流 资料分享 摸鱼 求助皆可 —链接

iframe被用于将一个网页嵌套在另一个网页中，有的时候这会带来一些安全问题，这时我们就需要一些防嵌套操作了。

本文分为俩部分，一部分讲解如何检测或者禁止嵌套操作，另一部分讲解如何从嵌套中跳出。

末尾放了正在使用的完整代码，想直接用的可以拉到最后。

效果

当存在嵌套时会出现一个蒙版和窗口，提示用户点击。

点击后会在新窗口打开网站页面。

嵌套检测

设置响应头

响应头中有一个名为X-Frame-Options的键，可以针对嵌套操作做限制。

它有3个可选值：

DENY：拒绝所有

SAMEORIGIN：只允许同源

ALLOW-FROM origin：指定可用的嵌套域名，新浏览器已弃用

后端检测（以PHP为例）

通过获取$_SERVER中的HTTP_REFERER和HTTP_SEC_FETCH_DEST值，可以判断是否正在被iframe嵌套

// 如果不是iframe，就为空的字符串

$REFERER_URL = $_SERVER['HTTP_REFERER'];



// 资源类型，如果是iframe引用的，会是iframe

$SEC_FETCH_DEST = $_SERVER['HTTP_SEC_FETCH_DEST'];



// 默认没有被嵌套

$isInIframe = false;



if (isset($_SERVER['HTTP_REFERER'])) {

  $refererUrl = parse_url($_SERVER['HTTP_REFERER']);

  $refererHost = isset($refererUrl['host']) ? $refererUrl['host'] : '';



  if (!empty($refererHost) && $refererHost !== $_SERVER['HTTP_HOST']) {

    $isInIframe = true;

  }

}



// 这里通过判断$isInIframe是否为真，来处理嵌套和未嵌套执行的动作。

if($isInIframe){

  ....

}

前端检测（使用JavaScript）

通过比较window.self（当前窗口对象）和window.top（顶层窗口对象）可以判断是否正在被iframe嵌套

if (window.self !== window.top) {

  // 检测到嵌套时该干的事

}

从嵌套中跳出

跳出只能是前端处理，如果使用了PHP等后端检测，可以直接返回前端JavaScript代码，或者HTML的A标签设置转跳。

JavaScript直接转跳（不推荐）

不推荐是因为现在大多浏览器为了防止滥用，会阻止自动弹出新窗口。

window.open(window.location.href, '_blank');

A标签点击转跳（较为推荐）

当发生了用户交互事件，浏览器就不会阻止转跳了，所以这是个不错的方法。

href="https://www.9kr.cc" target="_blank">点击进入博客

JavaScript+A标签（最佳方法）

原理是先使用JavaScript检测是否存在嵌套，

如果存在嵌套，再使用JavaScript加载蒙版和A标签，引导用户点击。

这个方法直接查看最后一节。

正在使用的方法

也就是上一节说的JavaScript+A标签。

先给待会要显示的蒙版和A标签窗口设置样式

/* 蒙版样式 */

.overlay1 {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0,0,0,0.5); /* 半透明背景颜色 */

        z-index: 9999; /* 确保蒙版位于其他元素之上 */

        display: flex;

        align-items: center;

        justify-content: center;

    }

        

    /* 窗口样式 */

    .modal1 {

        background-color: #fff;

        padding: 20px;

        border-radius: 5px;

    }

然后是检测和加载蒙版+A标签的JavaScript代码

if (window.self !== window.top) {

	// 创建蒙版元素

	var overlay = document.createElement('div');

	overlay.className = 'overlay1';



	// 创建窗口元素

	var modal = document.createElement('div');

	modal.className = 'modal1';



	// 创建A标签元素

	var link = document.createElement('a');

	link.href = 'https://www.9kr.cc';

	link.target = '_blank'; // 在新窗口中打开链接

	link.innerText = '点击进入博客';

	//link.addEventListener('click', function(event) {

	//    event.preventDefault(); // 阻止默认链接行为

	//    alert('Test');

	//});



	// 将A标签添加到窗口元素中

	modal.appendChild(link);



	// 将窗口元素添加到蒙版元素中

	overlay.appendChild(modal);



	// 将蒙版元素添加到body中

	document.body.appendChild(overlay);

}

博客的话，只需要在主题上设置自定义CSS和自定义JavaScript即可

前言

没有理论，只有实操，用最直接的方式来了解和使用小程序分包。

文章偏向使用taro来模拟小程序分包配置，在原生小程序中也是几乎差不多的配置方式。

为什么要有小程序分包？

因为上传小程序打包以后的代码包不可以超过2M。但我们在开发小程序的时候需要加载某些依赖或者一下静态图片，代码包难免超过2M。所以需要小程序分包功能将小程序中所有的代码分别打到不同的代码包里去，避免小程序只能上传2M的限制。

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M（开通虚拟支付后的小游戏不超过30M）


• 单个分包/主包大小不能超过 2M

如何对小程序进行分包？

本质上就是，配置一下app.json（小程序）或app.config.ts(Taro)中的subpackages字段。注意，分包的这个root路径和原本的pages是同级的。

如下图

这样配置好了，最基本的分包就完成了。

如何配置多个子包？

subpackages是个数组，在下面加上一样的结构就好了。

如何判断分包是否已经生效？

打开微信开发者工具，点击右上角详情 => 基本信息 => 本地代码，展开它。出现 主包，/xxxx/就是分包生效了。

如下图

所有页面都可以打到分包里面吗？

也不是，小程序规定，Tabbar页面不可以，一定需要在主包里。否则他直接报错。

分包中的依赖资源如何分配？

我们先来了解一下小程序分包资源

 引用原则

  `packageA` 无法 require `packageB` JS 文件，但可以 require 主包、`packageA` 内的 JS 文件；使用 [分包异步化](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html) 时不受此条限制

  `packageA` 无法 import `packageB` 的 template，但可以 require 主包、`packageA` 内的 template

  `packageA` 无法使用 `packageB` 的资源，但可以使用主包、`packageA` 内的资源

原因: 分包是依赖主包运行的，所以主包是必然会被加载的，所以当分包引用主包的时候，主包的相关数据已经存在了，所以可以被引用。而分包不能引用其他分包的数据，也是因为加载顺序的问题。如果分包A引用分包B的数据，但分包B尚未被加载，则会出现引用不到数据的问题。

如果主包和分包同时使用了一个依赖，那么这个依赖会被打到哪里去？

会被打到主包

因为主包不能引用分包的资源，但是子包可以引用主包的资源，所以为了两个包都能引用到资源，只能打到主包中

比如以下情况

分包和主包同时使用了dayjs，那么这个依赖会被打入到主包中。

如果某一个依赖只在分包中使用呢？

如果某一个资源只在某一个分包中使用，那就会被打入到当前分包。

如果两个子包同时使用同一个资源呢？那资源会被打进哪里。

主包，因为两个子包的资源不能互相引用，所以与其给每一个子包都打入一个独立资源。小程序则会直接把资源打到主包中，这样，两个子包就都可以使用了。

分包需要担心低版本的兼容问题吗

不用

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。 新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

独立分包

什么是独立分包

顾名思义，独立分包就是可以独立运行的分包。

举个例子，如果你的小程序启动页面是分包（普通分包）中的一个页面，那么小程序需要优先下载主包，然后再加载普通分包，因为普通分包依赖主包运行。但是如果小程序从独立分包进入进入小程序，则不需要下载主包，独立分包自己就可以运行。

普通分包所有的限制对独立分包都有效。

为什么要有独立分包，普通分包不够吗

因为独立分包不需要依赖主包，如果有作为打开小程序的的入口的必要，加载速度会比普通分包快，给客户的体验感更好。毕竟谁也不想打开一个页面等半天。

举个例子，如果小程序启动的时候是打开一个普通分包页面。则加载顺序是：加载主包 => 再加载当前分包

但如果小程序启动的时候是打开一个独立分包页面，则加载顺序是：直接加载独立分包，无需加载主包。

独立分包相对于普通分包，就是省去了加载主包的时间和消耗。

独立分包如何配置

配置和普通分包一样，加一个independent属性设为true即可。

独立分包的缺点

既然独立分包可以不依赖主包，那我把每个分包都打成独立分包可以吗。

最好别那么干

理由有四点

1.独立分包因为不依赖主包，所以他不一定能获取到小程序层面的全局状态，比如getApp().也不是完全获取不到，主包被加载的时候还是可以获取到的。概率性出问题，最好别用。

2.独立分包不支持使用插件

3.小程序的公共文件不适用独立分包。比如Taro的app.less或小程序的app.wxss

上述三个，我觉的都挺麻烦的。所以不是作为入口包这种必要的情况下，确实没有使用独立分包的需求。

PS:一个小程序里可以有多个独立分包

独立分包有版本兼容问题吗

有滴，但你不用这个兼容问题直接让你报错，
在低于 6.7.2 版本的微信中运行时，独立分包视为普通分包处理，不具备独立运行的特性。

所以，即使在低版本的微信中，也只是会编译成普通分包而已。

注意！！！ 这里有一个可能会遇到的坑，就是如果你在独立分包中使用了app.wxss或者app.less这些小程序层面的公共css文件，那么在低版本（<6.7.2）进行兼容的时候，你就会发现，独立分包的页面会被这些全局的CSS影响。因为那时候独立分包被编译成了普通分包。而普通分包是适用全局公共文件的。

分包预下载

首先我们需要了解，分包是基本功能是，在下程序打包的时候不去加载分包，然后在进入当前分包页面的时候才开始下载分包。一方面目的是为了加快小程序的响应速度。另一方面的原因是避开微信小程序本身只能上传2M的限制。

这里有一个问题，就是我在首次跳转某个分包的某个页面的时候，出现短暂的白屏怎么办？（下载分包的时间+运行接口的时间+渲染视图的时间）。

后两者没法彻底避免，只能优化代码，第一个下载分包的时间可以使用分包预下载功能解决。

我们可以通过分包预下载在进入分包页面之前就开始下载分包，来减少进入分包页面的时间。

如何配置分包预下载

当前的分包预下载只能在app.config(Taro)或者app.json（原生小程序）通过preloadRule字段去配置。

preloadRule字段是一个对象，key是页面的路径，value是进行预加载的分包name或者key，__APP__代表主包

上案例

通过preloadRule字段去配置

”packageB/pages/user/index“是key

packages:["packageA"]是value

案例上的意思是当进入packageA分包的时候，开始下载分包packageB

如果要某一个分包在加载主包的就开始下载,那么就设置packages:["APP"]即可。

总结

分包官方文档

分包官方分包demo-小程序版

如果您认为对您有用的话，留个赞或收藏一下吧~

<p> CSS Relative Color p>

p {

    color: rgb(255, 0, 0);

}

p {

    --color: rgb(255, 0, 0);

    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */

}

第二个关键点，from 后面通常会接一个颜色值，这个颜色值可以是任意颜色表示法，或者是一个 CSS 变量，下面的写法都是合法的：

p {

    color: rgba(from #ff0000) r g b);

    color: rgb(from rgb(255, 0, 0) r g b);

    color: rgb(from hsl(0deg, 100%, 50%) r g b);

    color: rgb(from var(--hotpink) r g b);

}

3. 对转换后的变量使用 calc() 或其他 CSS 函数

另外一个非常重要的基础概念就是，我们可以对 (from color r g b) 后的转换变量 r g b 使用 calc() 或其他 CSS 函数。

就是我们上面的例子：

p {

    --color: rgb(255, 0, 0);

    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */

}

4. 相对颜色语法支持，各种颜色表示函数：

相对颜色的基础的使用规则就是这样，它不仅支持 rgb 颜色表示法，它支持所有的颜色表示法：

• sRGB 颜色空间：hsl()、hwb()、rgb()；
• CIELAB 颜色空间：lab()、lch()；
• Oklab 颜色空间：oklab()、oklch()；

使用 CSS 相对颜色，实现统一按钮点击背景切换

通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。

像是这样：

最常见的写法，就是我们需要在 Normal 状态、Hover 状态、Active 状态下写 3 种颜色：

p {

    color: #ffcc00;

    transition: .3s all;

}

/* Hover 伪类下为 B 颜色 */

p:hover {

    color: #ffd21f;

}

/** Active 伪类下为 C 颜色 **/

p:active {

    color: #ab8a05;

}

在之前，我们介绍过一种利用滤镜 filter: contrast() 或者 filter: brightness() 的统一解决方案，无需写多个颜色值，可以根据 Normal 状态下的色值，通过滤镜统一实现更亮、或者更暗的伪类颜色。

在今天，我们也可以利用 CSS 相对颜色来做这个事情：

div {

    --bg: #fc0;

    background: var(--bg);

    transition: .3s all;

}



div:hover {

    background: hsl(from var(--bg) h s calc(l * 1.2));

}

div:active {

    background: hsl(from var(--bg) h s calc(l * 0.8));

}

我们通过 hsl 色相、饱和度、亮度颜色表示法表示颜色。实现：

在实际业务中，这是一个非常有用的用法。

完整的 DEMO，你可以戳这里：CodePen Demo -- https://codepen.io/Chokcoco/pen/KKEdOeb

使用 CSS 相对颜色，实现文字颜色自适应背景

相对颜色，还有一个非常有意思的场景 -- 让文字颜色能够自适应背景颜色进行展示。

有这么一种场景，有的时候，无法确定文案的背景颜色的最终表现值（因为背景颜色的值可能是后台配置，通过接口传给前端），但是，我们又需要能够让文字在任何背景颜色下都正常展现（譬如当底色为黑色时文字应该是白色，当背景为白色时，文字应该为黑色）。

像是这样：

在不确定背景颜色的情况下，无论什么情况，文字颜色都能够适配背景的颜色。

在之前，纯 CSS 没有特别好的方案，可以利用 mix-blend-mode: difference 进行一定程度的适配：

div {

    // 不确定的背景色

}

p {

    color: #fff;

    mix-blend-mode: difference;

}

实操过这个方案的同学都会知道，在一定情况下，前景文字颜色还是会有一点瑕疵。并且，混合模式这个方案最大的问题是会影响清晰度。

有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。

利用 CSS 相对颜色，反转颜色

我们可以利用相对颜色的能力，基于背景色颜色进行反转，赋值给 color。

一种方法是将颜色转换为 RGB，然后从 1 中减去每个通道的值。

代码非常简单：

p {

    /** 任意背景色 **/

    --bg: #ffcc00;

    background: var(--bg);



    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反转颜色 **/

}

用 1 去减，而不是用 255 去，是因为此刻，会将 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配个动图，我们利用背景色的反色当 Color 颜色，适配所有背景情况：

完整的 DEMO 和代码，你可以戳这里：CodePen Demo -- CSS Relatvie Color Adapt BG

当然，这个方案还有两个问题：

为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范 -- color-contrast()。

利用 color-contrast()，选择高对比度颜色

color-contrast() 函数标记接收一个 color 值，并将其与其他的 color 值比较，从列表中选择最高对比度的颜色。

利用这个 CSS 颜色函数，可以完美的解决上述的问题。

我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。

改造一下，上面的代码，它就变成了：

p {

    /** 任意背景色 **/

    --bg: #ffcc00;

    background: var(--bg);



    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自动选择对比度更高的颜色 **/

}

这样，上面的 DEMO 最终效果就变成了：

完整的 DEMO 和代码，你可以戳这里：CodePen Demo -- CSS Relatvie Color Adapt BG

此方案的优势在于：

当然，唯一限制这个方案的最大问题在于，当前，color-contrast 还只是一个实验室功能，未大规模被兼容。

总结一下

到今天，我们可以利用 CSS 提供的各类颜色函数，对颜色有了更为强大的掌控力。

很多交互效果，不借助 JavaScript 的运算，也能计算出我们想要的最终颜色值。本文简单的借助：

两个案例，介绍了 CSS 相对颜色的功能。但它其实还有更为广阔的应用场景，完整的教程，你可以看这里 -- Chrome for Developers- CSS 相对颜色语法。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

写在前面

用百度网盘举例，可以通过页面打开本机的百度网盘软件，很多软件的网站页面都有这个功能。这个事情一直令我比较好奇，这次终于有空抽时间来研究研究了，本篇讲的是Windows的，mac的原理与之类似。

自定义协议

本身单凭浏览器是没有唤醒本地应用这个能力的，不然随便一个网页都能打开你的所有应用那不就乱套了吗。但是电脑系统本身又可以支持这个能力，就是通过配置自定义协议。

举个例子，当你用浏览器打开一个本地的PDF的时候，你会发现上面是file://path/xxx.pdf，这就是系统内置的一个协议，浏览器可以调用这个协议进行文件读取。

那么与之类似的，windows本身也支持用户自定义协议来进行一些操作的，而这个协议就在注册表中进行配置。

配置自定义协议

这里我用VS Code来举例子，最终我要实现通过浏览器打开我电脑上的VS Code。

我们先编写一个注册表文件

Windows Registry Editor Version 5.00



[HKEY_CLASSES_ROOT\vscode]

@="URL:VSCode Protocol"

"URL Protocol"=""



[HKEY_CLASSES_ROOT\vscode\shell]



[HKEY_CLASSES_ROOT\vscode\shell\open]



[HKEY_CLASSES_ROOT\vscode\shell\open\command]

@=""D:\VScode\Microsoft VS Code\Code.exe" "%1""

这里我逐行解释

写好了注册表文件后，我们将其保存为 vscode.reg，并双击执行，对话框选择是，相应的注册表信息就被创建出来了。

可以通过注册表中查看。

浏览器打开VS Code

这时，我们打开浏览器，输入 vscode://open

可以看到，就像百度网盘一样，浏览器弹出了询问对话框，然后就可以打开VS Code了。

如果想要在网页上进行打开，也简单

<script>

  function openVSCode() {

    window.location.href = 'vscode://open/';

  }

</script>

<button onclick="openVSCode()">打开 VSCode</button>

写一个简单的JS代码即可。

写在最后

至此，终于是了解了这方面的知识。这就是说，在网盘安装的过程中，就写好了这个注册表文件，自定义了网盘的唤醒协议，才可以被识别。

而我也找到了这个注册表

原来叫baiduyunguanjia协议（不区分大小写），使用 baiduyunguanjia://open 可以打开。

问题

最近公司项目上遇到了扫码枪因搜狗/微软/百度/QQ等输入法在中文状态下，使用扫码枪扫码会丢失字符的问题

思考

这种情况是由于扫码枪的硬件设备，在输入的时候，是模拟用户键盘的按键来实现的字符输入的，所以会触发输入法的中文模式，并且也会触发输入法的自动联想。那我们可以针对这个来想解决方案。

方案一

首先想到的第一种方案是，监听keydown的键盘事件，创建一个字符串数组，将每一个输入的字符进行比对，然后拼接字符串，并回填到输入框中，下面是代码：

function onKeydownEvent(e) {

  this.code = this.code || ''

  const shiftKey = e.shiftKey

  const keyCode = e.code

  const key = e.key

  const arr = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-']

  this.nextTime = new Date().getTime()

  const timeSpace = this.nextTime - this.lastTime

  if (key === 'Process') { // 中文手动输入

    if (this.lastTime !== 0 && timeSpace <= 30) {

      for (const a of arr) {

        if (keyCode === 'Key' + a) {

          if (shiftKey) {

            this.code += a

          } else {

            this.code += a.toLowerCase()

          }

          this.lastTime = this.nextTime

        } else if (keyCode === 'Digit' + a) {

          this.code += String(a)

          this.lastTime = this.nextTime

        }

      }

      if (keyCode === 'Enter' && timeSpace <= 30) {

        if (String(this.code)) {

          // TODO

          dosomething....

        }

        this.code = ''

        this.nextTime = 0

        this.lastTime = 0

      }

    }

  } else {

    if (arr.includes(key.toUpperCase())) {

      if (this.lastTime === 0 && timeSpace === this.nextTime) {

        this.code = key

      } else if (this.lastTime !== 0 && timeSpace <= 30) {

        // 30ms以内来区分是扫码枪输入，正常手动输入时少于30ms的

        this.code += key

      }

      this.lastTime = this.nextTime

    } else if (arr.includes(key)) {

      if (this.lastTime === 0 && timeSpace === this.nextTime) {

        this.code = key

      } else if (this.lastTime !== 0 && timeSpace <= 30) {

        this.code += String(key)

      }

      this.lastTime = this.nextTime

    } else if (keyCode === 'Enter' && timeSpace <= 30) {

      if (String(this.code)) {

        // TODO

        dosomething()

      }

      this.code = ''

      this.nextTime = 0

      this.lastTime = 0

    } else {

      this.lastTime = this.nextTime

    }

  }

}

这种方案能解决部分问题，但是在不同的扫码枪设备，以及不同输入法的情况下，还是会出现丢失问题

方案二

使用input[type=password]来兼容不同输入的中文模式，让其只能输入英文，从而解决丢失问题

这种方案网上也有不少的参考

# 解决中文状态下扫描枪扫描错误

# input type=password 取消密码提示框

使用password密码框确实能解决不同输入法的问题，并且Focus到输入框，输入法会被强制切换为英文模式

添加autocomplete="off" 或 autocomplete="new-password"属性

官方文档：
# 如何关闭表单自动填充

但是在Chromium内核的浏览器，不支持autocomplete="off"，并且还是会出现这种自动补全提示：

上面的属性并没有解决浏览器会出现密码补全框，并且在输入字符后，浏览器还会在右上角弹窗提示是否保存：

先解决密码补全框，这里我想到了一个属性readonly，input原生属性。input[type=password]在readonly
时，是不会有密码补全的提示，并且也不会弹窗提示密码保存。

那好，我们就可以在输入前以及输入完成后，将input[type=password]立即设置成readonly

但是需要考虑下面几种情况：

• 获取焦点/失去焦点时


• 当前输入框已focus时，再次鼠标点击输入框


• 扫码枪输出完成最后，输入Enter键时，如果清空输入框，这时候也会显示自动补全


• 清空输入框时


• 切换离开页面时

这几种情况都需要处理，将输入框变成readonly

我用vue+element-ui实现了一份，贴上代码：

<template>

  <div class="scanner-input">

    <input class="input-password" :name="$attrs.name || 'one-time-code'" type="password" autocomplete="off" aria-autocomplete="inline" :value="$attrs.value" readonly @input="onPasswordInput">

    <!-- <el-input ref="scannerInput" v-bind="$attrs" v-on="$listeners" @input="onInput"> -->

    <el-input ref="scannerInput" :class="{ 'input-text': true, 'input-text-focus': isFocus }" v-bind="$attrs" v-on="$listeners">

      <template v-for="(_, name) in $slots" v-slot:[name]>

        <slot :name="name"></slot>

      </template>

      <!-- <slot slot="suffix" name="suffix"></slot> -->

    </el-input>

  </div>

</template>



<script>

export default {

  name: 'WispathScannerInput',

  data() {

    return {

      isFocus: false

    }

  },

  beforeDestroy() {

    this.$el.firstElementChild.setAttribute('readonly', true)

    this.$el.firstElementChild.removeEventListener('focus', this.onPasswordFocus)

    this.$el.firstElementChild.removeEventListener('blur', this.onPasswordBlur)

    this.$el.firstElementChild.removeEventListener('click', this.onPasswordClick)

    this.$el.firstElementChild.removeEventListener('mousedown', this.onPasswordMouseDown)

    this.$el.firstElementChild.removeEventListener('keydown', this.oPasswordKeyDown)

  },

  mounted() {

    this.$el.firstElementChild.addEventListener('focus', this.onPasswordFocus)

    this.$el.firstElementChild.addEventListener('blur', this.onPasswordBlur)

    this.$el.firstElementChild.addEventListener('click', this.onPasswordClick)

    this.$el.firstElementChild.addEventListener('mousedown', this.onPasswordMouseDown)

    this.$el.firstElementChild.addEventListener('keydown', this.oPasswordKeyDown)



    const entries = Object.entries(this.$refs.scannerInput)

    // 解决ref问题

    for (const [key, value] of entries) {

      if (typeof value === 'function') {

        this[key] = value

      }

    }

    this['focus'] = this.$el.firstElementChild.focus.bind(this.$el.firstElementChild)

  },

  methods: {

    onPasswordInput(ev) {

      this.$emit('input', ev.target.value)

      if (ev.target.value === '') {

        this.$el.firstElementChild.setAttribute('readonly', true)

        setTimeout(() => {

          this.$el.firstElementChild.removeAttribute('readonly')

        })

      }

    },

    onPasswordFocus(ev) {

      this.isFocus = true

      setTimeout(() => {

        this.$el.firstElementChild.removeAttribute('readonly')

      })

    },

    onPasswordBlur() {

      this.isFocus = false

      this.$el.firstElementChild.setAttribute('readonly', true)

    },

    // 鼠标点击输入框一瞬间，禁用输入框

    onPasswordMouseDown() {

      this.$el.firstElementChild.setAttribute('readonly', true)

    },

    oPasswordKeyDown(ev) {

      // 判断enter键

      if (ev.key === 'Enter') {

        this.$el.firstElementChild.setAttribute('readonly', true)

        setTimeout(() => {

          this.$el.firstElementChild.removeAttribute('readonly')

        })

      }

    },

    // 点击之后，延迟200ms后放开readonly，让输入框可以输入

    onPasswordClick() {

      if (this.isFocus) {

        this.$el.firstElementChild.setAttribute('readonly', true)

        setTimeout(() => {

          this.$el.firstElementChild.removeAttribute('readonly')

        }, 200)

      }

    },

    onInput(_value) {

      this.$emit('input', _value)

    },

    getList(value) {

      this.$emit('input', value)

    }

    // onChange(_value) {

    //   this.$emit('change', _value)

    // }

  }

}

</script>



<style lang="scss" scoped>

.scanner-input {

  position: relative;

  height: 36px;

  width: 100%;

  display: inline-block;

  .input-password {

    width: 100%;

    height: 100%;

    border: none;

    outline: none;

    padding: 0 16px;

    font-size: 14px;

    letter-spacing: 3px;

    background: transparent;

    color: transparent;

    // caret-color: #484848;

  }

  .input-text {

    font-size: 14px;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    pointer-events: none;

    background-color: transparent;

    ::v-deep .el-input__inner {

      // background-color: transparent;

      padding: 0 16px;

      width: 100%;

      height: 100%;

    }

  }



  .input-text-focus {

    ::v-deep .el-input__inner {

      outline: none;

      border-color: #1c7af4;

    }

  }

}

</style>