javascript--单例模式

本文深入分析了JavaScript中实现单例模式的多种方法,并对比了它们的安全性和适用场景。重点讨论了使用闭包创建单例对象的优势与潜在风险,旨在帮助开发者在实际应用中做出更明智的选择。

1. 有静态变量的语言,写单例模式对象还是比较简单,搞个类静态属性即可;

2.javascript呢,木有: 那就采集几种方法。。。持续收集中


//第一种
var Earth = (function () {
    if (typeof Earth.instance === 'object') {
        return Earth.instance;
    }
    this.name = "地球";
    this.age = 46 * 1000 * 1000 * 10000;
    Earth.instance = this;
    return Earth.instance;
});

//第二种
var Earth = (function () {  
    var instance;
    return function () {    
        if (typeof instance === 'object') {
            return instance;
        }
        this.name = "地球";
        this.age = 46 * 1000 * 1000 * 10000;
        instance = this;
        return instance;
    }
}());

1. 外部变量,不安全;

2. 闭包变量。

### 实现 Element UI `el-table` 单元格单例编辑 为了实现在 `el-table` 中点击单元格触发单例编辑的效果,可以采用如下方案: #### 1. 组件设计 创建一个自定义组件用于处理表格内的可编辑字段。该组件应具备判断当前是否处于编辑状态的能力,并能响应用户的交互。 ```html <template> <el-table :data="tableData"> <!-- 假设这是其中一列 --> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <editable-cell v-if="editRow === scope.$index" :value.sync="scope.row.name" @close-edit="handleCloseEdit"/> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <!-- 更多列... --> </el-table> </template> ``` 这里使用了一个名为 `<editable-cell>` 的子组件来表示正在被编辑的状态;当不是指定行时,则显示原始文本[^2]。 #### 2. 编辑逻辑控制 通过监听整个表格区域的点击事件,关闭任何已打开的编辑器实例。这可以通过捕获全局点击事件并检查点击位置是否位于目标单元格外完成。 ```javascript mounted() { document.addEventListener('click', this.handleClickOutside); }, methods: { handleClickOutside(event) { const tableEl = this.$refs.tableWrapper; if (this.editRow !== null && !tableEl.contains(event.target)) { this.handleCloseEdit(); } }, handleCellClick(row, column, cell, event){ // 阻止冒泡以防止立即触发外部点击处理器 event.stopPropagation(); // 如果已经有其他行在编辑则先结束其编辑过程 if(this.editRow != row.index){ this.handleCloseEdit(() => { this.startEditing(row.index); }); } else{ this.startEditing(row.index); } }, startEditing(index){ this.editRow = index; }, handleCloseEdit(callback=(()=>{})){ this.editRow = null; nextTick().then(callback); } } ``` 上述代码片段展示了如何管理编辑模式切换以及确保只有一个单元格能够同时进入编辑状态[^3]。 #### 3. 自定义编辑器组件 (`EditableCell`) 这个简单的输入框允许用户修改内容直到按下回车键确认更改或失去焦点取消编辑。 ```vue <script setup lang="ts"> import { ref, watchEffect } from 'vue'; const props = defineProps<{ value?: string | number, }>(); let localValue = ref(props.value); watchEffect(() => { localValue.value = props.value; }); defineEmits(['update:value', 'close-edit']); function confirmChange(){ emit('update:value', localValue.value); } // 处理失焦或其他方式退出编辑的情况 function onBlurOrEnter(e:Event){ e.preventDefault(); emit('close-edit'); } </script> <template> <input type="text" class="inline-editor-input" v-model.trim="localValue" @blur="onBlurOrEnter" @keyup.enter="confirmChange()"> </template> <style scoped> .inline-editor-input { border:none; outline:none; width:80%; } </style> ``` 此部分实现了具体的编辑功能,包括双向绑定数据、提交更新后的值给父级组件以及提供一种机制让父级知道何时应该停止编辑[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值