需求简介

轮播图是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。

我们来看一个需求

上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例，我们看看最终实现效果：

实现思路

要想实现一个无缝的轮播效果，其实非常简单，核心思想就是动态改变显示的列表而已。比如我们有这样一个数组

const list = ref([

    { name: 1, id: 1 }, 

    { name: 2, id: 2 },

    { name: 3, id: 3 }

])

如果我们想无缝切换的展示这个数据，最简单的代码就是动态的改变下面的代码的index

<template>

    <div>

       {{ list[index] }}

    </div>

</template>

<script setup>

    const index = ref(0)

    const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])

<scriptp>

那如何实现切换的样式呢？也非常简单，我们只要给元素添加一个出现样式和离开样式即可。现在，我们来具体实现这样一个需求。

技术方案

数据的动态切换

要想实现一个数据的动态循环切换效果，是非常容易的：

<template>

 <div v-for="(build, index) in list" :key="index">

    <div v-show="index === selectIndex">

       卡片自定义内容

    </div>

 </div>

</template>

<script setup>

const selectIndex = ref(0)

const list = ref(

    [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]

)



// #计时器实例

let timer: any = null



// >计时器逻辑

const timeFuc = () => {

    timer = setInterval(() => {

      // 更改选中的index

      if (selectIndex.value >= list.value.length - 1) {

        selectIndex.value = 0

      } else {

        selectIndex.value++

      }

    }, 5000)

}



timeFuc()

<scriptp>

上述代码中，我们设置了一个定时器，定时器每5s执行一次，每次执行都会动态更改当前要显示的数据索引值，当索引值达到最大实，在将其重置。通过上述的简单代码，我们就实现了一个可以自动切换的循环渲染的卡片。

动画添加

要想实现最终效果的动态效果也非常容易，我们只需要给每个元素出现时设置一些样式，离开时设置一些样式即可。借助vue的Transition组件，我们能很容易实现这样一个效果。

如果你不了解vue的Transition组件，请去官网补充下知识：cn.vuejs.org/guide/built…

<template>

<div class="main-content">

    <Transition v-for="(build, index) in list" :key="selectIndex">

        <div class="banner-scroll-wrap" v-show="index === selectIndex">

            卡片自定义内容

        </div>

    </Transition>

</div>

</template>

<script setup>

const selectIndex = ref(0)

const list = ref(

    [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]

)



// #计时器实例

let timer: any = null



// >计时器逻辑

const timeFuc = () => {

    timer = setInterval(() => {

      // 更改选中的index

      if (selectIndex.value >= list.value.length - 1) {

        selectIndex.value = 0

      } else {

        selectIndex.value++

      }

    }, 5000)

}



timeFuc()

<scriptp>

<style lang="less" scoped>

.main-content {

    position: relative;

    height: 100%;

    .banner-scroll-wrap {

        position: absolute;

        top: 0;

        bottom: 0;

        right: 0;

        left: 0;

    }

}



.v-enter-from {

    transform: translateX(100%);

    opacity: 0;

}



.v-enter-active,

.v-leave-active {

    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;

}



.v-enter-to {

    transform: translateX(0);

    opacity: 1;

}



.v-leave-from {

    transform: translateX(0);

    opacity: 1;

}



.v-leave-to {

    transform: translateX(-100%);

    opacity: 0;

}

<style/>

上述代码中，由于 selectIndex是动态的，元素不断地在显示与隐藏。因此，Transition标签的进入样式和离开样式会动态触发，从而形成切换效果。

v-enter是元素的进入样式，进入时，我们从最右边偏移100%的距离到正常位置，透明度从0到1，这个过程持续0.6s，实现了元素左移淡入的效果。

v-leave是元素的离开样式，离开时，我们从正常位置偏移到100%的左侧位置，透明度从1到0，这个过程持续0.6s，实现了元素左移淡出的效果。

在这些类的共同作用下，我们实现了元素的动态切换。

你可能注意到了我给元素设置了一个banner-scroll-wrap类名，并使用了position: absolute，这样设置的注意目的是保证切换离开元素的淡出效果和进入元素的淡入效果是连贯的。如果你不这样写，可能会出现样式问题。

此外，注意我给Transition设置了key="Transition"，这样些会保证每次数据在切换时，transition能够重新渲染，触发元素离开和进入的样式。

至此，我们就完成了基本功能样式

轮播的停止与恢复

很常见的一种情况就是我们需要鼠标放在卡片上时停止轮播，离开卡片的时候恢复轮播，这非常容易。

<template>

<div class="main-content"  @mouseenter="stop()" @mouseleave="start()">

    <Transition v-for="(build, index) in list" :key="selectIndex">

        <div class="banner-scroll-wrap" v-show="index === selectIndex">

            卡片自定义内容

        </div>

    </Transition>

</div>

</template>

<script setup>

const selectIndex = ref(0)

const list = ref(

    [{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]

)



// #计时器实例

let timer: any = null



// >计时器逻辑

const timeFuc = () => {

    timer = setInterval(() => {

      // 更改选中的index

      if (selectIndex.value >= list.value.length - 1) {

        selectIndex.value = 0

      } else {

        selectIndex.value++

      }

    }, 5000)

}



  // >开启轮播

  const start = () => {

    if (timer) return

    timeFuc()

  }



  // >关闭轮播

  const stop = () => {

    clearInterval(timer)

    timer = null

  }



timeFuc()

<scriptp>

<style lang="less" scoped>

<style/>

解决重影问题

在某些情况下，我们离开这个页面很久后（浏览器切换到其他选项卡），然后在切回来的时候，可能会出现短暂的画面重影问题，这个问题也很好解决，加上下面的代码即可

<script setup>



    //...



    // 解决切屏后重影的问题

  onMounted(() => {

    document.addEventListener('visibilitychange', () => {

      // 用户息屏、或者切到后台运行 （离开页面）

      if (document.visibilityState === 'hidden') {

        stop()

      }

      // 用户打开或回到页面

      if (document.visibilityState === 'visible') {

        start()

      }

    })

  })

    

  onBeforeUnmount(() => stop())



<scriptp>

visibilitychange 事件：当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。该事件不可取消。

总结

在本教程中，我们通过简单代码实现了无缝轮播效果，样式是左右切换，我们也可以通过样式控制实现上下切换的效果，比如将translateX设置为translateY即可。

 .v-enter-from {

    transform: translateY(100%);

    opacity: 0;

}

时间原因，本教程也没有对技术上做深究，也希望各位大佬能提供自己的思路与建议，感谢大家分享！

逐字渲染的挑战

最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：

每当聊天框中展示新消息时，需要将聊天框滚动到底部，展示最新消息。

如果在 web 什么也不做，聊天体验可能是这样的，需要用户手动滚动到最新消息：

试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时，都需要调用滚动方法滚动到消息底部。

element.scrollIntoView({ behavior: "smooth", block: "end");

对于普通的聊天工具来说，这样实现没有什么大问题，因为聊天框接收到每条消息的长度都是确定的。但是 AI 大模型一般都是逐字渲染的，AI 助手聊天框接受的消息体大小不是固定的，而是会随着 AI 大模型的输出不断变大。如果仍使用 scrollIntoView 来滚动到底部，就需要监听消息体的变化，每次消息更新时都要通过 JavaScript 调用一次滚动方法，会造成一些问题：

自然列表：灵感来源

聊天框接收到新消息时滚动到最新位置，总感觉这应该是一个很自然的行为，不需要这么多 Javascript 代码去实现滚动行为。

于是联想到了 Excel 表格，当我们在表格中第一行插入一行，这一行后边的内容会被很自然的挤下去。并不需要做什么滚动，这一行就会出现在最顶部的位置。

想到这里惊讶的发现，聊天框实际上不就是一个倒过来的列表吗？ 列表最上边新增的行会把后边的行往下挤，而聊天框最下边新增消息需要把上边的消息往上挤。那假如我们将聊天框旋转 180° 呢...?

聊天框的翻转实现

翻转聊天框

利用 CSS transform: rotate(180deg) 将整个聊天框倒转，并且把接收到最新的消息插入到消息列表的头部。发现我们的设想确实是行得通的，新增的消息很自然的把历史消息顶了上去，消息卡片内容增加也能很自然的撑开。并且在消息输出时，也可以随意滚动查看历史记录。

滚动条调整与滚动行为反转

最核心的问题已经解决了，但总觉得哪里看起来怪怪的。滚动条怎么跑到左边，并且滚动行为和鼠标滚轮的方向反了，滚轮向上滚，聊天框却向下滚。（让人想起了 MacOS 连鼠标滚轮的反人类体验）

查阅文档发现 CSS 有个 direction: rtl; 属性可以改变内容的排布的方向。这样我们就可以把滚动条放回右边了。然后在通过监听滚动事件，改变滚动方向就可以恢复鼠标滚轮的滚动行为。

element.addEventListener('wheel', event => {

      event.preventDefault(); // 阻止默认滚动行为

      const { deltaY } = event; // 获取滚动方向和速度

      chatContent.current.scrollTop -= deltaY; //  反转方向

    });

消息卡片翻转恢复

可以看到目前就只剩下聊天框中的消息卡片是反的，接下来把聊天框中的消息卡片转正就大功告成了。我们在聊天框中，给每个消息卡片都添加 transform: rotate(180deg);direction: ltr; 样式，把消息重新转正。

这样就把翻转的行为全部隔离在了聊天框组件中。消息卡片组件完全感知不到自己其实已经被旋转了 180° 后又旋转了 180° 了。聊天框的父组件也完全不知道自己的子节点被转了又转。

总结

最后总结一下，我们通过两行 CSS 代码 + 反转滚动行为，利用浏览器的默认行为完美的实现了 AI 聊天框中的滚动体验。

transform: rotate(180deg);

direction: rtl;

element.addEventListener('wheel', event => {

      event.preventDefault(); // 阻止默认滚动行为

      const { deltaY } = event; // 获取滚动方向和速度

      chatContent.current.scrollTop -= deltaY; //  反转方向

    });

DEMO 仓库：github.com/lrwlf/messa…

更新：

想到一个更简洁的办法可以达到相同的效果，只用把聊天框 CSS 设置为:

display: flex;

flex-direction: column-reverse;

让列表倒序渲染，并且像原来的方法一样，在消息列表的头部插入消息，就可以实现一样的效果。不需要对聊天框和消息体再进行旋转操作，也不需要反转滚动条的行为。

以上两种方法都存在一个相同的问题，当一开始聊天消息还很少时，聊天消息也会紧贴着底部，顶部会留出一片空白。

这时只需要在聊天列表的最开始设置一个空白的占位元素，把它的 CSS 设置为：

flex-grow: 1;

flex-shrink: 1;

就可以实现消息少的时候自动撑开，把消息撑到顶部。消息列表开始滚动时，占位元素又会被挤压消失，不影响列表滚动效果。

(为了演示，把占位元素设置为了黑色)

更新部分代码见： github.com/lrwlf/messa…

将 App.js 的 chat 组件，替换为 src/components/chat-flex

近期产品期望在后台发布帖子或视频时，需要添加 @用户 的功能，以便用户收到通知，例如“xxx在xxx提及了您！”。然而，现有的开源库未能满足我们的需求，例如 ant-design 的 Mentions 组件：

但是不难发现跟微信飞书对比下，有两个细节没有处理。

然后也是找了其他的库都没达到产品的期望效果，那么好，自己实现一个，先看看最终实现的效果：

封装之后使用：

<AtInput

    height={150}

    onRequest={async (searchStr) => {

        const { data } = await UserFindAll({ nickname: searchStr });

        return data?.list?.map((v) => ({

            id: v.uid,

            name: v.nickname,

            wechatAvatarUrl: v.wechatAvatarUrl,

        }));

    }}

    onChange={(content, selected) => {

        setAtUsers(selected);

    }}

/>

那么实现这么一个输入框大概有以下几个点：

大多数文本输入框我们会使用input,或者textarea,很明显以上1,2两点实现不了，antd也是使用的textarea，所以也是没有实现这两个效果。所以这块使用富文本编辑，设置contentEditable,将其变为可编辑去做。输入框以及选择器的dom就如下:

 <div style={{ height, position: 'relative' }}>

       {/* 编辑器 */}

       <div 

           id="atInput" 

           ref={atRef} 

           className={'editorDiv'} 

           contentEditable 

           onInput={editorChange} 

           onClick={editorClick} 

       />

       {/* 选择用户框 */}

       <SelectUser 

           options={options} 

           visible={visible} 

           cursorPosition={cursorPosition} 

           onSelect={onSelect} 

       />

 </div>

实现思路：

以上提到了监听@文本变化，通常绑定onChange事件就行，但是还有一种用户通过点击移动光标，这块需要绑定change,click两个时间，他们里边的逻辑基本一样，只需要额外处理点击选中输入框中用户时，整体选中g功能，那么代码如下：

    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (event) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };

每次点击或者文本改变时都会去调用onObserveInput，以上onObserveInput该方法中主要做了以下逻辑：

• 在此之前需要先了解 Selection的一些方法

 const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

};

选择器弹出后，那么下面就到了选择用户之后的流程了，

 /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };

选择用户的时候需要做的以下以下几点：

最后

在选择的用户或者内容发生改变时将数据抛给父组件

 const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);

完整组件代码

输入框主要逻辑代码：

let timer: NodeJS.Timeout | null = null;



const AtInput = (props: AtInputProps) => {

    const { height = 300, onRequest, onChange, value, onBlur } = props;

    // 输入框的内容=innerText

    const [content, setContent] = useState<string>('');

    // 选择用户弹框

    const [visible, setVisible] = useState<boolean>(false);

    // 用户数据

    const [options, setOptions] = useState<Options[]>([]);

    // @的索引

    const [currentAtIdx, setCurrentAtIdx] = useState<number>();

    // 输入@之前的字符串

    const [focusNode, setFocusNode] = useState<Node | string>();

    // @后关键字 @郑 = 郑

    const [searchStr, setSearchStr] = useState<string>('');

    // 弹框的x,y轴的坐标

    const [cursorPosition, setCursorPosition] = useState<Position>({

        x: 0,

        y: 0,

    });

    // 选择的用户

    const [selected, setSelected] = useState<Options[]>([]);

    const atRef = useRef<any>();



    /** 获取选择器弹框坐标 */

    const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

    };



    /**获取用户下拉列表 */

    const fetchOptions = (key?: string) => {

        if (timer) {

            clearTimeout(timer);

            timer = null;

        }

        timer = setTimeout(async () => {

            const _options = await onRequest(key);

            setOptions(_options);

        }, 500);

    };



    useEffect(() => {

        fetchOptions();

        // if (value) {

        //     /** 判断value中是否有at用户 */

        //     const atUsers: any = StringTools.filterUsers(value);

        //     setSelected(atUsers);

        //     atRef.current.innerHTML = value;

        //     setContent(value.replace(/<\/?.+?\/?>/g, '')); //全局匹配内html标签)

        // }

    }, []);



    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (e?: any) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event: any) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };



    /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };



    const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);



    return (

        <div style={{ height, position: 'relative' }}>

            {/* 编辑器 */}

            <div id="atInput" ref={atRef} className={'editorDiv'} contentEditable onInput={editorChange} onClick={editorClick} />

            {/* 选择用户框 */}

            <SelectUser options={options} visible={visible} cursorPosition={cursorPosition} onSelect={onSelect} />

        </div>

    );

};

选择器代码

const SelectUser = React.memo((props: SelectComProps) => {

  const { options, visible, cursorPosition, onSelect } = props;



  const { x, y } = cursorPosition;



  return (

    <div

      className={'selectWrap'}

      style={{

        display: `${visible ? 'block' : 'none'}`,

        position: 'absolute',

        left: x,

        top: y + 20,

      }}

    >

      <ul>

        {options.map((item) => {

          return (

            <li

              key={item.id}

              onClick={() => {

                onSelect(item);

              }}

            >

              <img src={item.wechatAvatarUrl} alt="" />

              <span>{item.name}</span>

            </li>

          );

        })}

      </ul>

    </div>

  );

});

export default SelectUser;

以上就是实现一个支持@用户的输入框功能，就目前而言，比较死板，不支持自定义颜色，自定义选择器等等，未来，可以进一步扩展功能，例如添加@用户的高亮样式定制、支持键盘快捷键操作等，从而提升用户体验和功能性。

前言

亲爱的小伙伴，你好！我是 嘟老板。我们使用 Vue 开发页面时，经常需要在 

1 背景

1.1 需求背景

前半年接了一个划线需求，一直没空总结下。微信公众号和微信读书等读书类应用都有此功能，但前者只对部分用户开放了，并且没有长期运营。

这次只谈下划线技术实现本身。

1.2 功能详叙

1.3 竞品

可以看到，微信公众号划线过程会弹出一个灰色面板，面板上有划线(这次需求改为了点赞)按钮：

2 关键逻辑

这个需求乍看可能会觉得没那么复杂，但细细分析后会发现有较长的交互流程和逻辑链：

其中有几个会影响整体逻辑的关键点需要关注：

3 详细设计

3.1获取划线

window 上提供了 Selection 对象，它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。调用 Selection.toString() 方法会返回被选中区域中的纯文本。

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

Selection 对象所对应的是用户所选择的 ranges（区域）

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

3.2 划线渲染方式

渲染划线有两种方式：

1 在划线range对象的首尾dom的位置，插入线段的dom标签；
优点：划线的点击不需要计算点击位置，直接在插入dom上绑定事件即可；
缺点：对原页面结构有入侵，改变了dom结构，可能引发其他问题；

2 绝对定位，相对于整篇文章；
优点：完全增量，对原页面没有入侵；
缺点：需要计算点击位置；

我选择的第二种，原因是为了不影响原有页面逻辑，这样项目风险也是最小的。那么具体怎么实现呢？

range对象提供了一个 getClientRects 方法，表示 range 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 Element.getClientRects() 方法所得的结果。用拿到的位置信息进行绝对定位即可。

rectList = range.getClientRects()

我们把用户所有划线range对象和其产生的位置信息都存入到一个list中。

pageRangeList.push({

    range,

    rectInfo

})

3.3 交互过程

我们分析下整个交互过程：
有两个主要的交互事件，一是点击划线，二是滑动选区。

3.3.1 点击事件

处理点击事件，我们拿到点击事件的位置，和存放的 pageRangeList 进行位置比较，得出用户点击的是哪个range对象。

// 点击事件

const {pageX, pageY} = event;

const lineHeight = 23;



const {range} = rectInfo.some(rect => {

    const {left, right, realY} = rect;

    return pageX < left && pageX > left && pageY > realY

})



this.selection.removeAllRanges();

this.selection.addRange();

3.3.2 选区事件

选区事件我选择的是 selectionchange，需要加防抖和节流处理。

如果你选的是 touchend 安卓系统会点问题。

3.3.3 比较位置关系

如第2点核心逻辑中所说，在滑词过程中，需要比较位置关系，我们直接使用Range.compareBoundaryPoints方法即可。返回值 0 、-1 、1 分别代表不同的位置关系。

const compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);

3.4 序列化与反序列化

序列化是整个需求的重点，序列化是指将交互产生的划线转化成某种数据结构能存储在服务器上，反序列化是指如何将server下发的序列化数据转化成非序列化的划线。

两者是两个相反的过程，当我们确定了序列化方案，其实也就知道了反序列化了。

3.4.1 序列化

方案一，识别段落

刚开始我观察文章都会拆分段落,如按P标签或某一个class类名来划分段落，于是计划用段落信息，告诉 server 划线在第几段的第几个字。

interface data {

    startParagraph: 1,

    startIndex: 22,

    endParagraph: 2,

    endIndex: 15

}

但后来发现有一些抓取的文章根本内容很混乱，且没有特定的段落，强行识别复杂度极高。（如下图）所以此方案不可行。

方案二，全文第几个字

前面的方案不可能的原因是，识别段落信息复杂度不可控，那么我们可以绕过段落信息，去识别全文第几个字。

interface data {

    startCharacters: 122,

    endCharacters: 166

}

具体方式是用Range，圈选文章开头到当前dom，形成一个新Range，再调用range.toString查看字数即可。

const range = new Range();

range.setStart(pageContainer, 0);

range.setEnd(curEndContainer, endOffset);

const str = range.toString();

3.4.2 反序列化

这里注意，由于 Javascript 在大多宿主环境下没有递归的尾调用优化，所以我采用了手动创建栈来进行 dfs：

    dfs({

        node = this.content,

    }) {

        const stack = [];

        if (!node) {

            return;

        }



        stack.push(node);



        while (stack.length) {

            const item = stack.pop();



            const children = item.childNodes;

            for (let i = children.length - 1; i >= 0; i--) {

                stack.push( [i]);

            }

        }

    }

前言

我记得2021年的时候做过聊天功能，那时业务也只限微信小程序

那时候的心路历程是：

卧槽，让我写一个聊天功能这么高大上？？

嗯？这么简单，不就画画页面来个轮询吗，加个websocket也还行吧

然后，卧槽？这查看历史聊天记录什么鬼，页面闪一下不太好啊，真的能做到微信的那种效果吗

然后一堆调研加测试，总算在小程序中查看历史记录没那么鬼畜了，但是总是感觉不是最佳解决方案。

那时打出的子弹，一直等到现在击中了我

最近又回想到了这个痛点，于是网上想看看有没有大佬发解决方案，结果还真被我找到了。

正文开始

1，效果展示

上才艺~~~

2，聊天页面

2.1，查看历史聊天记录的坑

常规写法加载历史记录拼接到聊天主体的顶部后，滚动条会回到顶部、不在原聊天页面

直接上图

而我们以往的解决方案也只是各种利用缓存、scroll的滚动定位把回到顶部的滚动条重新拉回加载历史记录前的位置，好让我们可以继续在原聊天页面。

但即使我们做了很多优化，也会有安卓和苹果部分机型适配问题，还是不自然，可能会出现页面闪动。

其实吧，解决方案只有两行css代码~~~

2.2，解决方案：flex神功

想优雅顺滑的在聊天框里查看历史记录，这两行css代码就是flex的这个翻转属性

dispaly:flex;

flex-direction: column-reverse

灵感来源~~~

小伙伴可以看到，在加载更多数据时

滚动条位置没变、加载数据后还是原聊天页面的位置

这不就是我们之前的痛点吗~~~

所以，我们只需要翻转位置，用这个就可以优雅流畅的实现微信的加载历史记录啦

flex-direction: column-reverse

官方的意思：指定Flex容器中子元素的排列方向为列（从上到下），并且将其顺序反转（从底部到顶部）

如果感觉还是抽象，不好理解的话，那就直接上图，不加column-reverse的样子

加了column-reverse的样子

至此，我们用column-reverse再搭配data数据的位置处理就完美解决加载历史记录的历史性问题啦

代码放最后啦~~~

2.3，其他问题

2.3.1，数据过少时第一屏展示

因为用了翻转，数据少的时候会出现上图的问题

只需要.mainArea加上height:100%

然后额外写个适配盒子就行

flex-grow: 1; 

flex-shrink: 1;

2.3.2，用了scroll-view导致的问题

这一part是因为我用了uniapp里 scroll-view组件导致的坑以及解决方案，小伙伴们没用这个组件的可忽略~~~

如下图，.mainArea使用了height:100%后，继承了父级高度后scroll-view滚动条消失了。

.mainArea去掉height:100%后scroll-view滚动条出现，但是第一屏数据过多时不会滚动到底部展示最新信息

解决方案：第一屏手动进行滚动条置顶

scrollBottom() {

        if (this.firstLoad) return;

        // 第一屏后不触发

        this.$nextTick(() => {

          const query = uni.createSelectorQuery().in(this);

          query

            .select("#mainArea")

            .boundingClientRect((data) => {

              console.log(data);

              if (data.height > +this.chatHeight) {

                this.scrollTop = data.height; // 填写个较大的数

                this.firstLoad = true;

              }

            })

            .exec();

        });

      },

3，服务端

使用koa自己搭一个websocket服务端

3.1 服务端项目目录

package.json

{

  "name": "websocketapi",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "koa": "^2.14.2",

    "koa-router": "^12.0.1",

    "koa-websocket": "^7.0.0"

  }

}

koa-tcp.js

const koa = require('koa')

const Router = require('koa-router')

const ws = require('koa-websocket')



const app = ws(new koa())

const router = new Router()



/**

 * 服务端给客户端的聊天信息格式

 * {

    id: lastid,

    showTime: 是否展示时间,

    time: nowDate,

    type: type,

    userinfo: {

      uid: this.myuid,

      username: this.username,

      face: this.avatar,

    },

    content: {

      url:'',

      text:'',

      w:'',

      h:''

    },

  }

  消息数据队列的队头为最新消息，以次往下为老消息

  客户端展示需要reverse(): 客户端聊天窗口最下面需要为最新消息，所以队列尾部为最新消息，以此往上为老消息

 */





router.all('/websocket/:id', async (ctx) => {

  // const query = ctx.query

  console.log(JSON.stringify(ctx.params))

  ctx.websocket.send('我是小服，告诉你连接成功啦')

  ctx.websocket.on('message', (res) => {

    console.log(`服务端收到消息, ${res}`)

    let data = JSON.parse(res)

    if (data.type === 'chat') {

      ctx.websocket.send(`我也会说${data.text}`)

    }

  })

  ctx.websocket.on('close', () => {

    console.log('服务端关闭')

  })

})



// 将路由中间件添加到Koa应用中  

app.ws.use(router.routes()).use(router.allowedMethods())



app.listen(9001, () => {

  console.log('socket is connect')

})

切到server目录下yarn

然后执行nodemon koa-tcp.js

没有nodemon的小伙伴要装一下

代码区

完整项目Github传送门

聊天页面的核心代码如下（包含data数据的位置处理和与服务端联动）

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

到这里，想给小伙伴分享两句话

现在搞不清楚的事，不妨可以先慢下来，不要让自己钻到牛角尖了

一些你现在觉得解决不了的事，可能需要换个角度

欢迎转载，但请注明来源。


最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。

基于装饰器——我劝你不要在业务代码上装逼！！！

装饰器模式的定义

• 在传统的面向对象语言中，给对象添加功能常使用继承的方式，但继承的方式并不灵活，会带来一些许多问题，如：超类和子类存在强耦合性，也就是说当改变超类时，子类也需要改变。


• 而装饰器模式的出现改变的这种方式，装饰器模式可在不改变现有对象解构的基础上，动态地为对象添加功能。

传统的 JavaScript 装饰器

var plane = {

    fire: function () {

        console.log("普通子弹");

    },

};



var missleDecorator = function () {

    console.log("发射导弹");

};



var atomDecorator = function () {

    console.log("发射原子弹");

};



var fire1 = plane.fire;

plane.fire = function () {

    fire1();

    missleDecorator();

};



var fire2 = plane.fire;

plane.fire = function () {

    fire2();

    atomDecorator();

};



plane.fire();

/**

普通子弹

发射导弹

发射原子弹

 */

装饰函数

• 在 JavaScript 中，几乎一切都是对象，其中函数也被成为对象，在平时的开发中，我们都在和函数打交道。在给对象扩展属性和方法时，很难在不改动原功能函数的情况下，给函数添加一些额外的功能，最直接的粗暴方式就是直接改写函数，但这是最差的方式，这违反了开放——封闭原则。


• 如下：

function a(){

    console.log(1);

}



// 改写：

function a(){

    console.log(1);



    // 新功能

    console.log(2);

}

• 很多时候，我们都不想去触碰之前的一些代码，但需要添加功能，所以如果需要在不改变原功能函数的情况下，给函数添加功能。可使用以下方式：


• 要想完美的给函数添加功能，可使用 AOP 来装饰函数。
  
  
  
  • AOP：一种编程规范，通过将关注点从主业务逻辑中剥离出来并单独处理，以此来提高代码的可读性和重用性。
  
  
  
  


• 如下：

Function.prototype.before = function (beforeFn) {

    var _self = this;

    return function () {

        beforeFn.apply(this, arguments);

        return _self.apply(this, arguments);

    };

};



Function.prototype.after = function (afterFn) {

    var _self = this;

    return function () {

        var ret = _self.apply(this, arguments);

        afterFn.apply(this, arguments);

        return ret;

    }

}



// before 和 after 函数都接收一个函数作为参数，这个函数也就是新添加的函数(里面也就是要添加的新功能逻辑)。

// 而before 和 after 函数区别在于在是原函数之前执行还是之后执行。

• AOP 函数的使用

Function.prototype.before = function (beforeFn) {

    var _self = this;

    return function () {

        beforeFn.apply(this, arguments);

        return _self.apply(this, arguments);

    };

};



Function.prototype.after = function (afterFn) {

    var _self = this;

    return function () {

        var ret = _self.apply(this, arguments);

        afterFn.apply(this, arguments);

        return ret;

    }

}



var o1 = function(){

    console.log('1');

}

var o2 = function(){

    console.log('2');

}

var o3 = function(){

    console.log('3');

}



var desctor = o1.after(o2);

desctor = desctor.after(o3);

desctor(); // 1 2 3

/**

var desctor = o1.after(o2);

desctor = desctor.after(o3);

desctor();

1

2

3



var desctor = o1.before(o2);

desctor = desctor.before(o3);

desctor();

3

2

1



var desctor = o1.after(o2);

desctor = desctor.before(o3);

desctor();

3

1

2





var desctor = o1.before(o2);

desctor = desctor.after(o3);

desctor();

2

1

3

 */

AOP的应用

1.数据上报

• 在程序开发中，当业务代码开发完后，在结尾时需要加很多的日志上报的代码，普遍我们会去改已经之前封装好的功能函数。其实这并不是一个好的方式，那如何在不直接修改之前函数的基础上添加日志上报功能呢？


• 如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>AOP日志上报</title>

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

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

        <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>

    </head>

    <body>

        <div id="app">

            <button class="btn" @click="handler">Button</button>

            <p id="tt">{{message}}</p>

        </div>

    </body>

</html>

<script type="text/javascript">

    // log report

    const { reactive, ref, createApp } = Vue;

    const app = createApp({

        setup() {

            const message = ref("未点击");

            const count = ref(0);



            Function.prototype.before = function (beforeFn) {

                var _self = this;

                return function () {

                    beforeFn.apply(this, arguments);

                    return _self.apply(this, arguments);

                };

            };



            Function.prototype.after = function (afterFn) {

                var _self = this;

                return function () {

                    var ret = _self.apply(this, arguments);

                    afterFn.apply(this, arguments);

                    return ret;

                };

            };



            function handler() {

                message.value = `已点击${++count.value}`;

            }



            handler = handler.after(log);



            function log() {

                message.value = message.value + "-----> log reported";

                console.log("log report");

            }



            return {

                message,

                handler,

            };

        },

    });

    app.mount("#app");

</script>

2.动态参数

• 在日常开发中，我们需要向后台接口发送请求来获取信息，例如传参如下。业务在后续时需要添加新参数，每个接口需要把 token 值也一并传过去, 普遍我们会去改封装的请求方法，把 token 参数添加进去。但我们直接修改封装好的请求方法不是好的行为，那我们可使用上面说过的 AOP 方式来改进。

{

    name: 'xxxx',

    password: 'xxxx',

}

• 如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>AOP动态参数</title>

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

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

        <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>

    </head>

    <body>

        <div id="app">{{message}}</div>

    </body>

</html>



<script type="text/javascript">

    const { reactive, ref, createApp } = Vue;

    const app = createApp({

        setup() {

            const message = ref("empty params");

            Function.prototype.before = function (beforeFn) {

                var _self = this;

                return function () {

                    beforeFn.apply(this, arguments);

                    return _self.apply(this, arguments);

                };

            };



            Function.prototype.after = function (afterFn) {

                var _self = this;

                return function () {

                    var ret = _self.apply(this, arguments);

                    afterFn.apply(this, arguments);

                    return ret;

                };

            };



            function ajax(type, url, params){

                message.value = `${type} ----> ${url} -----> ${JSON.stringify(params)}`;

            }



            function getToken(){

                // do something

                return 'token';

            }



            ajax = ajax.before(function(type, url, params){

                params.token = getToken();

            })



            ajax('get', 'https://www.baidu.com/userinfo', {name: 'se', password: 'xsdsd'});

            return {

                message,

            };

        },

    });

    app.mount("#app");

</script>

3.表单校验

• 在日常开发中，我们经常要去做校验表单数据，通常的方式是在功能函数中进行判断处理或将判断逻辑提取为一个函数的方式。但这种方式其实是与功能性函数相混合，且校验逻辑与功能性函数有耦合关系。那我们可使用 AOP 方式来改进。


• 如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>AOP表单验证</title>

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

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

        <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>

    </head>

    <body>

        <div id="app">

            <label>

                姓名：

                <input

                    type="text"

                    v-model="data.name"

                    placeholder="请输入姓名"

                />

            </label>

            <label>

                密码：

                <input

                    type="text"

                    v-model="data.pass"

                    placeholder="请输入密码"

                />

            </label>

            <p v-if="data.name || data.pass">{{data.name + '/' + data.pass}} ----after-----> {{data.message}}</p>

            <hr>

            <button @click="submitBtn">submit</button>

        </div>

    </body>

</html>



<script type="text/javascript">

    const { reactive, ref, createApp, watchEffect } = Vue;

    const app = createApp({

        setup() {

            const data = reactive({

                name: "",

                pass: "",

                message: "",

            });



            Function.prototype.before = function (beforeFn) {

                var _self = this;

                return function () {

                    if (beforeFn.apply(this, arguments) === false) return;

                    return _self.apply(this, arguments);

                };

            };



            function valid() {

                if (!data.name || !data.pass) {

                    alert("用户名或密码不能为空");

                    return false;

                }

            }



            function formSubmit() {

                console.log("data ------>", data);

                data.message = `${data.name} ------- ${data.pass}`;

            }



            formSubmit = formSubmit.before(valid);



            function submitBtn() {

                formSubmit();

            }

            return {

                data,

                submitBtn,

            };

        },

    });

    app.mount("#app");

</script>

装饰器模式的优缺点

• 优点：
  
  
  
  1. 扩展性强：装饰器模式允许在不修改现有代码的情况下，动态地添加新功能或修改现有功能。通过使用装饰器，可以在运行时按需组合和堆叠装饰器对象，实现各种组合方式，从而实现更多的功能扩展。
  
  
  2. 遵循开闭原则：装饰器模式通过添加装饰器类来扩展功能，而不是修改现有的代码。这样可以保持原有代码的稳定性，符合开闭原则，即对扩展开放，对修改关闭。
  
  
  3. 分离关注点：装饰器模式将功能的扩展和核心功能分离开来，每个装饰器类只关注单一的额外功能。这样可以使代码更加清晰、可读性更高，并且容易维护和测试。
  
  
  
  


• 缺点：
  
  
  
  1. 增加复杂性：使用装饰器模式会增加额外的类和对象，引入了更多的复杂性和层次结构。这可能使代码变得更加复杂，理解和调试起来可能更加困难。
  
  
  2. 潜在的性能影响：由于装饰器模式涉及多个对象的组合和堆叠，可能会引入额外的运行时开销，对性能产生一定的影响。尤其是当装饰器链较长时，可能会导致性能下降。
  
  
  
  

装饰器模式的适用场景

Tip: 文章部分内容参考于曾探大佬的《JavaScript 设计模式与开发实践》。文章仅做个人学习总结和知识汇总

之前写过一篇文章 我理想中的低代码开发工具的形态，已经吐槽了各种封装 xxxForm，xxxTable 的行为，这里就不啰嗦了。今天再来看看我的工具达到了什么程度。

多图预警。。。

以管理后台一个列表页为例

选择对应的模板

截图查询区域，使用 OCR 初始化查询表单的配置

截图表头，使用 OCR 初始化 table 的配置

使用 ChatGPT 翻译中文字段

生成代码

效果

目前我们没有写一行代码，就已经达到了如下的效果

下面是一部分生成的代码

import { reactive, ref } from 'vue'



import { IFetchTableListResult } from './api'



interface ITableListItem {

  /**

   * 决算单状态

   */

  settlementStatus: string

  /**

   * 主合同编号

   */

  mainContractNumber: string

  /**

   * 客户名称

   */

  customerName: string

  /**

   * 客户手机号

   */

  customerPhone: string

  /**

   * 房屋地址

   */

  houseAddress: string

  /**

   * 工程管理

   */

  projectManagement: string

  /**

   * 接口返回的数据，新增字段不需要改 ITableListItem 直接从这里取

   */

  apiResult: IFetchTableListResult['result']['records'][0]

}



interface IFormData {

  /**

   * 决算单状态

   */

  settlementStatus?: string

  /**

   * 主合同编号

   */

  mainContractNumber?: string

  /**

   * 客户名称

   */

  customerName?: string

  /**

   * 客户手机号

   */

  customerPhone?: string

  /**

   * 工程管理

   */

  projectManagement?: string

}



interface IOptionItem {

  label: string

  value: string

}



interface IOptions {

  settlementStatus: IOptionItem[]

}



const defaultOptions: IOptions = {

  settlementStatus: [],

}



export const defaultFormData: IFormData = {

  settlementStatus: undefined,

  mainContractNumber: undefined,

  customerName: undefined,

  customerPhone: undefined,

  projectManagement: undefined,

}



export const useModel = () => {

  const filterForm = reactive<IFormData>({ ...defaultFormData })



  const options = reactive<IOptions>({ ...defaultOptions })



  const tableList = ref<(ITableListItem & { _?: unknown })[]>([])



  const pagination = reactive<{

    page: number

    pageSize: number

    total: number

  }>({

    page: 1,

    pageSize: 10,

    total: 0,

  })



  const loading = reactive<{ list: boolean }>({

    list: false,

  })



  return {

    filterForm,

    options,

    tableList,

    pagination,

    loading,

  }

}



export type Model = ReturnType<typeof useModel>

这就是用模板生成的好处，有规范，随时可以改，而封装 xxxForm，xxxTable 就是一个黑盒。

原理

下面大致说一下原理

首先是写好一个个模版，vscode 插件读取指定目录下模版显示到界面上

每个模版下可能包含如下内容：

选择模版后，进入动态表单配置界面

动态表单是读取 config/schema.json 里的内容进行动态渲染的，目前支持 amis、form-render、formily

配置表单是为了生成 JSON 数据，然后根据 JSON 数据生成代码。所以最终还是无法避免的使用私有的 DSL ，但是生成后的代码是没有私有 DSL 的痕迹的。生成代码本质是 JSON + EJS 模版引擎编译 src 目录下的 ejs 文件。

为了加快表单的配置，可以自定义脚本进行操作

这部分内容是读取 config/preview.json 内容进行显示的

选择对应的脚本方法后，插件会动态加载 script/index.js 脚本，并执行里面对应的方法

以 initColumnsFromImage 方法为例，这个方法是读取剪贴板里的图片，然后使用百度 OCR 解析出文本，再使用文本初始化表单

initColumnsFromImage: async (lowcodeContext) => {

    context.lowcodeContext = lowcodeContext;

    const res = await main.handleInitColumnsFromImage();

    return res;

  },

export async function handleInitColumnsFromImage() {

  const { lowcodeContext } = context;

  if (!lowcodeContext?.clipboardImage) {

    window.showInformationMessage('剪贴板里没有截图');

    return lowcodeContext?.model;

  }

  const ocrRes = await generalBasic({ image: lowcodeContext!.clipboardImage! });

  env.clipboard.writeText(ocrRes.words_result.map((s) => s.words).join('\r\n'));

  window.showInformationMessage('内容已经复制到剪贴板');

  const columns = ocrRes.words_result.map((s) => ({

    slot: false,

    title: s.words,

    dataIndex: s.words,

    key: s.words,

  }));

  return { ...lowcodeContext.model, columns };

}

反正就是可以根据自己的需求定义各种各样的脚本。比如使用 ChatGPT 翻译 JSON 里的指定字段，可以看我的上一篇文章 TypeChat、JSONSchemaChat实战 - 让ChatGPT更听你的话

再比如要实现把中文翻译成英文，然后英文使用驼峰语法，这样就可以将中文转成英文代码变量，下面是实现的效果

选择对应的命令菜单后 vscode 插件会加载对应模版里的脚本，然后执行里面的 onSelect 方法。

main.ts 代码如下

import { env, window, Range } from 'vscode';

import { context } from './context';



export async function bootstrap() {

  const clipboardText = await env.clipboard.readText();

  const { selection, document } = window.activeTextEditor!;

  const selectText = document.getText(selection).trim();

  let content = await context.lowcodeContext!.createChatCompletion({

    messages: [

      {

        role: 'system',

        content: `你是一个翻译家，你的目标是把中文翻译成英文单词，请翻译时使用驼峰格式，小写字母开头，不要带翻译腔，而是要翻译得自然、流畅和地道，使用优美和高雅的表达方式。请翻译下面用户输入的内容`,

      },

      {

        role: 'user',

        content: selectText || clipboardText,

      },

    ],

  });

  content = content.charAt(0).toLowerCase() + content.slice(1);

  window.activeTextEditor?.edit((editBuilder) => {

    if (window.activeTextEditor?.selection.isEmpty) {

      editBuilder.insert(window.activeTextEditor.selection.start, content);

    } else {

      editBuilder.replace(

        new Range(

          window.activeTextEditor!.selection.start,

          window.activeTextEditor!.selection.end,

        ),

        content,

      );

    }

  });

}

使用了 ChatGPT。

再来看看，之前生成管理后台 CURD 页面的时候，连 mock 也一起生成了，主要逻辑放在了 complete 方法里，这是插件的一个生命周期函数。

因为 mock 服务在另一个项目里，所以需要跨目录去生成代码，这里我在 mock 服务里加了个接口返回 mock 项目所在的目录

.get(`/mockProjectPath`, async (ctx, next) => {

    ctx.body = {

      status: 200,

      msg: '',

      result: __dirname,

    };

  })

生成代码的时候请求这个接口，就知道往哪个目录生成代码了

const mockProjectPathRes = await axios

      .get('http://localhost:3001/mockProjectPath', { timeout: 1000 })

      .catch(() => {

        window.showInformationMessage(

          '获取 mock 项目路径失败，跳过更新 mock 服务',

        );

      });

    if (mockProjectPathRes?.data.result) {

      const projectName = workspace.rootPath

        ?.replace(/\\/g, '/')

        .split('/')

        .pop();

      const mockRouteFile = path.join(

        mockProjectPathRes.data.result,

        `${projectName}.js`,

      );

      let mockFileContent = `

			import KoaRouter from 'koa-router';

			import proxy from '../middleware/Proxy';

			import { delay } from '../lib/util';



			const Mock = require('mockjs');



			const { Random } = Mock;



			const router = new KoaRouter();

			router{{mockScript}}

			module.exports = router;

			`;



      if (fs.existsSync(mockRouteFile)) {

        mockFileContent = fs.readFileSync(mockRouteFile).toString().toString();

        const index = mockFileContent.lastIndexOf(')') + 1;

        mockFileContent = `${mockFileContent.substring(

          0,

          index,

        )}{{mockScript}}\n${mockFileContent.substring(index)}`;

      }

      mockFileContent = mockFileContent.replace(/{{mockScript}}/g, mockScript);

      fs.writeFileSync(mockRouteFile, mockFileContent);

      try {

        execa.sync('node', [

          path.join(

            mockProjectPathRes.data.result

              .replace(/\\/g, '/')

              .replace('/src/routes', ''),

            '/node_modules/eslint/bin/eslint.js',

          ),

          mockRouteFile,

          '--resolve-plugins-relative-to',

          mockProjectPathRes.data.result

            .replace(/\\/g, '/')

            .replace('/src/routes', ''),

          '--fix',

        ]);

      } catch (err) {

        console.log(err);

      }

mock 项目也可以通过 vscode 插件快速创建和使用

上面展示的模版都放在了 github.com/lowcode-sca… 仓库里，照着 README 步骤做就可以使用了。

如何修改第三方npm包？

有这样一种场景：如果你在开发过程中，发现某个npm包有Bug，应该怎么办？

第一选择当然是向原作者提issue，或者Fork该仓库代码，修改以后，提交合并请求。

但这种情况有个严重的问题，就是耗时，如果遇到严格的作者，或者不活跃的作者，时间线可能会拉得很长。你的项目未必能等这么长时间。

还有一种可能是，你修改的代码并不具备普适性，只有你的业务场景能用到，合并被拒的概率会大大增加。

总而言之，如果能修改npm包的源包，再好不过，如果不行，则需要有个临时方案，或者替代方案。

这时，又有下面两种情况：

下面，详细介绍下这两种不同方案。

补丁方案

patch-package

patch-package是一个用于修复第三方依赖包的工具，使用方式非常简单。

它支持npm和yarn v1，如果是yarn v2+或者pnpm，则使用自带的patch方案（下文会介绍pnpm方案）。

安装：

$ npm i patch-package

$ yarn add patch-package postinstall-postinstall

如果只是前端使用，可以添加--dev或-D参数。如果是后端使用，为保障生产模式（会去除devDendencies依赖）也能正常使用，就不要加了。

在node_modules中找到你要修改的npm包，修改内容后，就可以运行patch-package创建patch文件了。

$ npx patch-package package-name   # 使用npm

$ yarn patch-package package-name  # 使用yarn

运行后会在项目根目录下创建一个patches文件夹，并生成一个名为package-name+version.patch的文件。将该patch文件提交至版本控制中，即可在之后应用该补丁了。

以我修改的verdaccio为例，会生成一个verdaccio+4.4.0.patch的文件，内容大致如下：

diff --git a/node_modules/verdaccio/build/index.js b/node_modules/verdaccio/build/index.js

index 3a79eaa..d00974b 100644

--- a/node_modules/verdaccio/build/index.js

+++ b/node_modules/verdaccio/build/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {

 });

 exports.default = void 0;

 

+console.log('---------------')

+

 var _bootstrap = require("./lib/bootstrap");

完成上述操作后，最后在package.json的scripts中加入"postinstall": "patch-package"。

"scripts": {

  "postinstall": "patch-package"

}

这样当其他同事拉下代码，运行npm install或是yarn install命令时，便会自动为依赖包打上我们的补丁了。

简单来说，这个方案的原理就是记录补丁的代码与位置，利用npm的hook（postinstall会在npm install后触发），在安装完依赖以后，触发相应的脚本，将补丁覆盖到node_modules对应的包里。

当然，补丁是对应具体版本的，需要锁定版本号。这样的缺点是如果要升级的话，还得重新来一遍，不过不是有Bug或性能问题，通常不必追求新的版本。

pnpm patch

pnpm的patch自称灵感来自yarn的类似命令。由于yarn v2可能走了邪路，我们就不介绍了。

首先，执行pnpm patch @。该命令会将指定的软件包提取到一个可以随意编辑的临时目录中。

完成修改后, 运行pnpm patch-commit ( 是之前提取的临时目录，这个临时目录会长到你根本记不住，不过不用担心，命令行里会有完备的提示) 以生成一个补丁文件，并提供patchedDependencies 字段注册到你的项目中。

比如，我想修改一个is-even的包：

pnpm patch is-even  

You can now edit the following folder: /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738



Once you're done with your changes, run "pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738"

按照提示，打开这个文件夹，加一行代码：

执行上面控制台的提示：

pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/e103de90617a18eee7942d1df35a2c48

Packages: -1

-

Progress: resolved 5, reused 6, downloaded 0, added 1, done

这时你会发现package.json中多了一段内容：

"pnpm": {

    "patchedDependencies": {

      "is-even@1.0.0": "patches/is-even@1.0.0.patch"

    }

}