手写工具-对象池

手写工具-对象池

1.什么时候需要对象池?

在回频繁创建与销毁对象的程序里,如果使用了对象池复用对象可以明显提升效率,原因很容易理解这样做剩下对象创建的开销,这即一种常见的优化思想-**池化技术,**常见场景举例:

  1. web 框架比如 gin 里利用池化对象提升性能
  2. 游戏开发里 N 多子弹的出现消失,复用子弹对象
  3. golang 提供的 sync.pool

2.用 JS 手写一个对象池

对象池名字很贴切,即我们需要一个对象的时候从池子里取出来即可以使用,当我们不需要的时候再将对象放回池子,就这样对象池里存储着一堆对象。当取对象时如果池子里的都用完了,我们就可以内部走新建对象传递出来,所以对象池比较重要的点就是按照需要设计合适的池子大小,预防占用太多内存。

/**
 * 对象池
 * 
 * @description
 * 避免频繁gc
 * 
 * 
 * @example
 * 
 * ```
 * //初始化池子
 * let pool = new ObjectPool({
 *     create: () => new Float32Array(4),
 *     reInit: (item: Float32Array) => {
 *         for (let i = 0; i < item.length; i++) {
 *             item[i] = 0;
 *         }
 *     }
 * });
 * 
 * //创建
 * let ins = pool.create();
 * 
 * //回收
 * pool.recycle(ins);
 * 
 * //清空池子
 * pool.clear();
 * ```
 */
export class ObjectPool<T> {
    private _create: () => T;
    private _reInit: (obj: T) => void;
    private _pool: T[] = [];

    get size() { return this._pool.length }
    constructor(
        options: {
            create: () => T,//创建对象操作
            reInit?: (obj: T) => void,//取对象时,可以进行初始化值操作
            initSize?: number,//初始池子大小
        }) {
        this._create = options.create;
        this._reInit = options?.reInit;
        if (options.initSize != null) {
            this._pool = [...new Array(options.initSize)].map(item => this._create())
        }
    }
    /**
     * 创建对象
     */
    instantiate(reInit = true) {
        if (this._pool.length == 0) {
            return this._create();
        } else {
            let item = this._pool.shift();
            if (reInit) this._reInit?.(item);
            return item;
        }
    }
    /**
     * 回收对象
     * @param obj 
     */
    recycle(obj: T) {
        this._pool.push(obj);
    }

    /**
     * 清空池子
     */
    clear() {
        this._pool = [];
    }
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的代码,手写 el-collapse 的过程如下所示: 1. 首先,需要创建一个 Collapse 组件的 Vue 单文件组件。 2. 在 template 中,使用 `<div>` 标签来包裹需要折叠的内容。可以使用 `v-for` 来遍历 `collapseData` 数组,并使用 `CollapseItem` 组件来展示每个折叠项的标题和内容。 3. 在 script 标签中,导出一个对象,其中包含了组件的相关属性和方法。 4. 在 data 中定义一个 `collapseData` 数组,用于存储每个折叠项的标题和内容。 5. 在 style 标签中,使用 scoped 属性来限定样式的作用域,可以定义 `.collapse` 类来设置组件的宽度。 下面是手写 el-collapse 的代码示例: ```vue <template> <div class="el-collapse"> <div v-for="(item, index) in collapseData" :key="index" class="el-collapse-item"> <div class="el-collapse-header" @click="toggleCollapse(index)"> {{ item.title }} </div> <div class="el-collapse-content" v-show="item.show"> <p>{{ item.content }}</p> </div> </div> </div> </template> <script> export default { data() { return { collapseData: [ { title: '标题1', content: '与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;', show: false }, { title: '标题2', content: '控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;', show: false }, { title: '标题3', content: '清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;', show: false }, { title: '标题4', content: '用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;', show: false }, ], }; }, methods: { toggleCollapse(index) { this.collapseData[index].show = !this.collapseData[index].show; }, }, }; </script> <style scoped> .el-collapse { width: 600px; } .el-collapse-item { margin-bottom: 10px; } .el-collapse-header { cursor: pointer; background-color: #f0f0f0; padding: 10px; } .el-collapse-content { padding: 10px; background-color: #fff; border: 1px solid #ccc; } </style> ``` 这样,你就可以使用 `<el-collapse>` 标签来引用这个组件,并实现手风琴效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [手写Vue个人组件库——Collapse / CollapseItem](https://blog.csdn.net/m0_46995864/article/details/118893487)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值