命令模式
2020/11/19 8:25:24
本文主要是介绍命令模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
命令模式
将执行的命令封装为一个对象,解决命令的发起者与命令的执行者之间的解耦,就叫做命令模式。
命令模式的一大特征就是,命令的发起者可以参数化配置自己的请求。
使用场景
比如有一个网站,很多页面都在使用列表展示的功能,那么这个创建列表的方法就比较适合封装起来,用以简化操作流程。
首先,我们创建一个命令模式的基本模型:
const Command = (() => { // 视图模板(因为需求里涉及到创建 html) const templates = { listTemplate: ``, }; // 将要执行的命令集合 const actions = { createList() {}, }; // 调用命令的对外接口 const excute = () => {}; return { excute, }; })();
接下来,就是填充 Command 方法里面的内容:
例子:
<style> ul { height: 120px; list-style: none; box-shadow: 0 0 10px #ccc; padding: 0; padding-left: 15px; display: flex; flex-direction: column; justify-content: space-evenly; } </style> <ul id="list"></ul> <script> const Command = (() => { // 视图模板(因为需求里涉及到创建 html) const templates = { // 添加字符串模板 listTemplate: `<li>{{text}}</li>`, }; // 用数据替换视图模板中的'{{}}' // 因为通用,所以可以单独提取出来 const formateString = (str, data) => { // key 表示 '{{}}' 中的占位符(text) return str.replace(/\{{(\w+)}\}/g, (macth, key) => { return data[key]; }); }; // 将要执行的命令集合 const actions = { // 待执行"创建列表"的方法 createList({ element = 'body', data = [], name = '' } = {}) { const ele = document.querySelector(element); let html = ''; if (data.length > 0) { data.forEach((v) => { html += formateString(templates[name], v); }); ele.innerHTML = html; } }, }; // 调用命令的对外接口 const excute = ({ type = '', params = {} } = {}) => { actions[type](params); }; return { excute, }; })(); // 测试命令模式函数 const contrys = [ { text: '阿根廷共和国' }, { text: '阿拉伯联合酋长国' }, { text: '阿富汗伊斯兰国' }, ]; Command.excute({ type: 'createList', params: { element: '#list', data: contrys, name: 'listTemplate', }, }); </script>
在明确了指令的格式之后,只要写一条指令,配置些许参数,就能够轻松创建一个列表,可以有效提高团队的开发效率。
如有错误,欢迎指正,本人不胜感激。
这篇关于命令模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求