前言

亲爱的小伙伴，你好！我是 嘟老板。我们使用 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"

    }

}

根目录下，也多了个文件夹patches，打开以后，你就能找到添加的代码：

打开node_modules/is-even/index.js，可以看到已经多了我们添加的代码：

删除node_modules，重新pnpm i安装依赖，仍然与现在一样，这就代表成功了。

整个流程下来，我们看得出来相比于patch-package，要稍微复杂点儿，但也是可以接受的。

注意：patches目录是一定得提交到git的。

换日方案

上面说过，如果要修改的代码较多，或者不具备修改条件，这时就需要修改源码。
到GitHub上找到npm包的源码，Fork该项目，修改代码后，再修改包名，重新发布，比如你要修改的包是lodash，可以修改为awesome-lodash，在应用代码中更换引用。

本来这个方案没什么好说的，但有一种情况，如果你修改的是个底层包，也就是说并不是你的应用代码中直接引用的，而是你引用的npm包A所依赖的，甚至可能同时被包B依赖的，这时就比较尴尬了，你不可能再去修改A和B的源码，那就太不值当了。

pnpm提供了一种别名（Aliases）的能力。

假设你发布了一个名为awesome-lodash的新包，并使用lodash作为别名来安装它：

$ pnpm add lodash@npm:awesome-lodash

不需要更改代码，所有的lodash引用都被解析到了awesome-lodash。
就这么简单，上面说的问题就解决了。

再说点儿题外话，有时你会想要在项目中使用一个包的两个不同版本，很简单：

$ pnpm add lodash1@npm:lodash@1

$ pnpm add lodash2@npm:lodash@2

现在，您可以通过 require('lodash1') 引入第一个版本的 lodash 并通过 require('lodash2') 引入第二个。

与pnpm的钩子结合使用功能会更加强大，比如你想将node_modules里所有的lodash引用也替换为awesome-lodash，你可以用下面的.pnpmfile.cjs 轻松实现：

function readPackage(pkg) {

  if (pkg.dependencies && pkg.dependencies.lodash) {

    pkg.dependencies.lodash = 'npm:awesome-lodash@^1.0.0'

  }

  return pkg

}



module.exports = {

  hooks: {

    readPackage

  }

}

pnpm功能非常强大，后面我会再详细写篇文章介绍下。

总结

在开发过程中发现npm包的Bug，首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况，项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。

补丁方案中，如果是npm或yarn v1，可以使用patch-package工具包处理；如果是yarn v2或pnpm，可以使用各自的patch命令。

换日方案，则是修改源码，发布新的npm包后，利用pnpm的别名功能，将所有依赖原npm包的地方，全部替换为新的包。

这种场景在日常开发中还是比较常见的，这里为大家提供一种思路。当然，如果真是个Bug，别忘了提issue或PR，为开源贡献自己的一份力量，在与作者的沟通交流中，相信你也能受益匪浅。

起因

最近参与了个微信小程序的项目，有个长列表模块 我在自测的时候（测试人员居然没发现，可能懒得加载那么多数据去验证），发现当列表加载加载500条以上的时候，会有一个 Dom limit exceeded, please check if there's any mistake you've made.（超过了Dom限制，请检查你是否犯了任何错误） 渲染报错，页面会白屏，所以猜测小程序的Dom节点应该是有最高限制的。

分析问题原因

网上查了很多资料，查到了Dom节点确实有渲染限制，有位大神还晒出了源码 如下图，限制最高16000个节点

之前只知道 包大小 限制、域名需要配置不然限制、各种授权api限制，没想到 dom节点数量还要限制 居然还有这种骚操作

不过想想也算合理，因为小程序 小程序，小才行，哈哈，资源也不可能无限大，为的就是让你在有限的资源内完成强大的功能。

实验是检验真理的唯一标准

上文图中 代码 左上角显示版本是2019年的，那现在都2023年了，会不会有所改进呢，为了搞清楚现在到底限制多少节点，实验一波。

测试结果如上面两张图 Dom限制数量没变还是 16000个节点，但实际可新增的 渲染节点为 15999个 ，你要是问为啥，那我告诉你，因为小程序默认根标签 page 也占用一个，一个字 牛！！

解决方案

既然找了原因，就要想办法解决，经过一番深思熟虑（面向百度思考），总结了以下几个解决方案。

方案一 人在屋檐下不得不低头

毕竟平台是人家的，规则都是人家定的，那么就得按照规则去开发，下图是官方推荐说明（也是评分标准），单页面节点尽量不超过1000个节点，嵌套不超过30层，子节点不超过60个

动动你灵活嘴皮子，看看能不能说服 产品 说服老板，就这标准 爱做不做，爱谁谁

方案二 就是不服 就是干

长列表 数据过多、dom节点过多 确实有性能问题，但谁让需求是刚需呢，看了下网上的方案 五花八门，有利用swiper 始终只展示固定数量的 swiper-item的 根据当前的 index 显示第几页数据。还有有自己写算法动态显示的。也有很多现成的组件

核心原理 我总结了下就是，只渲染显示在屏幕的数据(为了减少白页面和滑动更丝滑，要再当前屏幕的前后再分别多渲染一屏幕)，实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 view 空白占位元素。

具体实现方案就不在这里展开了，留下几个已经实现的链接地址

可以扫码体验下腾讯官方新闻小程序的 渲染效率 感觉很哇塞

小程序长列表组件

文章1

文章2

懒人方案 官方 [Skyline 渲染引擎] list-view

注意点： 列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或组件直接子节点

解释下，就是要注意2点

1 scroll-view要设置自定义模式 type="custom"

2 list-view要作为 scroll-view 直接子节点（不然会失去效果）

示例代码如下

    <scroll-view type="custom">

         <list-view>

         ...

         循环列表逻辑

         ...

         </list-view>

    </scroll-view>

故事的起因是这样的， 一个前端开发人员(也算是挺有名的，ariakit.org的作者， wrodPress的前维护者)在社交媒体上发了这么一条帖子。

短短几天就有了51.8万次的view。 简单的文案：又是使用 TypeScript 的一天.。表达了对Typescript的又爱又恨😂。在目前的前端市场上，Typescript已经成为标配，ts强大的类型检查机制给我们带来了非常多的好处(代码质量，强大的可维护性，代码即注释)，但是其槽点也很多， 很多奇奇怪怪的问题(相信不仅是我一个人这么觉得)，繁多的配置项组合，稍不注意就会引起页面爆红，代码量增多和代码组织也会引起一定的负担。但在这些并不能撼动Typescript 在目前前端社区中的地位，在开发项目中一般还是会选择typescript。

反应

话说回到这个帖子上，这个帖子发出来之后迅速引起发酵，被很多大佬转发和引用，下面的评论很多都是wait, what, why happen?类似的语气😂，有很多给出建议，比如换种写法， 重启下Typescript server试试，也有很多开发爱好者希望作者能提供一个例子来复现，他们也想看看是什么问题，看能不能尝试解决这个有趣的例子。

（ps: 在ts中有很多奇怪的东西，特别是在和编辑器配合的时候，有些时候不能判断出来是否是个bug？还是我们代码写的有问题？还是设计如此？还是编辑器的问题？还是版本兼容问题？仅代表个人看法）

复现例子

后来有大佬根据作者提供的信息复现出来了样板例子 ：

declare function hasOwnPropertyextends AnyObject>(

  object: T,

  prop: keyof any,

): prop is keyof T;



type EffectCallback = () => void;



declare const useSafeLayoutEffect: (effect: EffectCallback) => void;



type AnyObject = Record<string, any>;

export type State = AnyObject;



type AnyFunction = (...args: any) => any;

type BivariantCallbackextends AnyFunction> = {

  bivarianceHack(...args: Parameters): ReturnType;

}["bivarianceHack"];

type SetStateAction = T | BivariantCallback<(prevState: T) => T>;



interface StoreState> {

  getState(): S;

  setStateextends keyof S>(key: K, value: SetStateAction): void;

}



export function useStoreProps<

  S extends State,

  P extends Partial,

  K extends keyof S,

>(store: Store, props: P, key: K) {

  const value = hasOwnProperty(props, key) ? props[key] : undefined;



  useSafeLayoutEffect(() => {

    if (value === undefined) return;

    value;

    // ^?

    if (value === undefined) return; // toggle this to see the magic

    value;

    // ^?

    store.setState(key, value);

  });

}

const value: P[K] & ({} | null)

const value: P[K] & {}

function f1extends Record<string, any>, K extends keyof T>(x: T[K] | undefined) {

    if (x === undefined) return;

    x;  // T[K] & ({} | null)

    if (x === undefined) return;

    x;  // T[K] & {}

}

在如今的互联网时代，网页源码的保护显得尤为重要，特别是前端代码，几乎就是明文展示，很容易造成源码泄露，黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的Web开发者工具面板，今天推荐一个不错的npm库，可以帮助开发者更好地保护自己的网站源码，本文将介绍该库的功能和使用方法。

功能介绍

npm库名称：disable-devtool，github地址：github.com/theajack/disable-devtool。从f12按钮，右键单击和浏览器菜单都可以禁用Web开发工具。

🚀 一行代码搞定禁用web开发者工具

该库有以下特性:

• 支持可配置是否禁用右键菜单


• 禁用 f12 和 ctrl+shift+i 等快捷键


• 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面


• 开发者可以绕过禁用 (url参数使用tk配合md5加密)


• 多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）


• 高度可配置、使用极简、体积小巧


• 支持npm引用和script标签引用(属性配置)


• 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能


• 支持识别开发者工具关闭事件


• 支持可配置是否禁用选择、复制、剪切、粘贴功能


• 支持识别 eruda 和 vconsole 调试工具


• 支持挂起和恢复探测器工作


• 支持配置ignore属性，用以自定义控制是否启用探测器


• 支持配置iframe中所有父页面的开发者工具禁用

使用方法

使用该库非常简单，只需按照以下步骤进行操作：

1.1 npm 引用

推荐使用这种方式安装使用，使用script脚本可以被代理单独拦截掉从而无法执行。

npm i disable-devtool

import DisableDevtool from 'disable-devtool';



DisableDevtool(options);

1.2 script方式使用

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'>script>

或者通过版本引用:

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x'>script>



<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'>script>