动态表单构建器——建造者模式
在编写一个弹出框时,它可以包含确定按钮,取消按钮,标题栏,关闭按钮,最小化按钮,内容,最大化按钮等内容,但这些内容在不同的需求下又不是必须存在的,不同的需求需要对这些组件自由组合,显然每次组合都要重复编码。将这些不同的,容易变动的组件分离开来,通过一个Builder类一步一步的构造复杂的对象,这就是建造者模式。
下面的例子是通过设计一个表单构造器来演示建造者模式。现在流行的Hybrid App的开发网络请求基本都是通过Ajax实现,设想一下如果应用要求根据不同的用户角色来提交不同的表单,那么我们就需要一个动态生成表单。我们可以将不同的表单控件封装成控件类,然后通过Builder类将不同的空间按照要求进行组合,形成需要的表单。
类实现代码:
var FormControl = Class.extend({ctor:function(_label,_name,_id,_type){this.label = _label;this.name = _name;this.id = _id;this.type = _type;},toString:function(){return this.label + "<input type = '" + this.type + "' id = '" + this.id + "' name = '" + this.name + "'/>";} });var Button = FormControl.extend({ctor:function(_label,_name,_id,_callback){this._super(_label,_name,_id,"button");this.callback = _callback;},toString:function(){return "<input value = '" + this.label + "' type = '" + this.type + "' id = '" + this.id + "' name = '" + this.name + "' onclick = '" + this.callback + "()'/>"} });var Input = FormControl.extend({ });var TextArea = FormControl.extend({toString:function(){return this.label + "<textarea name = '" + this.name +"' id = '" + this.id + "' />";} });var Select = FormControl.extend({ctor:function(_label,_name,_id,_type,_options){this._super(_label,_name,_id,_type);this.options = _options;},toString:function(){var txt = "";for(var i = 0;i < this.options.length;i++){txt += "<option value = '" + this.options[i].value + "'>" + this.options[i].text + "</option>";}return this.label + "<select name = '" + this.name + "' id = '" + this.id + "'>" + txt + "</select>";} });var FormBuilder = Class.extend({controls:[],ctor:function(_id,_controls = []){this.id = _id;this.controls = _controls;},addControl:function(_control){this.controls.push(_control);return this;},build:function(){var form = document.getElementById(this.id);var form_txt = "";for(var i = 0;i < this.controls.length;i++){form_txt += this.controls[i].toString();}form.innerHTML = form_txt;} });
应用代码
<html><head><meta charset = "gbk"></meta><script src = "Class.js"></script><script src = "Form.js"></script></head><body><form id = "form1" action = "#" method = "post"></form></body><script>(function(){var name = new Input("姓名","username","username","text");var password = new Input("密码","password","password","password");var submit = new Button("提交","sub","sub",function(){alert("提交");});var form = new Form("form1",[]);form.addControl(name).addControl(password).addControl(submit).build();})();</script>
</html>
效果:
其他说明:
可以将建造者模式和工厂模式组合,将组件的生产委托给工厂模式,建造由建造者模式完成。
建造者模式的优点:组件之间相对独立(上述例子由于样式布局可能实现偏差,在移动Web中表单往往是列表的呈现形式,所以也可以相对独立),易于扩展。
建造者模式的缺点:组件必须具有相似之处,复杂的应用可能需要过多的建造者。
转载于:https://blog.51cto.com/janwool/1881979
动态表单构建器——建造者模式相关推荐
- form-create-designer插件搭建表单构建器 功能扩展
利用 codemirror 插件和 @form-create/designer 的API实现表单配置的导入导出功能 一.下载插件 // codemirrorcnpm install vue-codem ...
- bootstrap3 表单构建器_FastReport.NET报表设计器连接到OracleDB关系数据库
首先,您可以使用ODBC连接器.但是它充满了很多设置. FastReport.NET报表设计器连接到OracleDB关系数据库 如您所见,您需要创建数据源及其连接字符串.动作比较多. 此方法的替代方法 ...
- bootstrap3 表单构建器_Knex - 灵活轻便的 Node.js SQL 查询构建器
不管你承认与否,Node.js 都是一个后端语言平台.那么,操作数据库,这个后端最为常用的代码逻辑之一,Node.js 自然也需要拥有.我们当然也可以使用数据库驱动直接执行 SQL 语句,但我们往往需 ...
- bootstrap3 表单构建器_实例演示:如何构建高可用的微服务架构
R 5月8日晚20:30,Kubernetes Master Class在线培训第五期<Kubernetes中的日志.监控与告警> 当你设计和构建大规模应用时,你将面临两个重大挑战:可伸缩 ...
- 简单记录一下金蝶动态表单插件
动态表单模型是通过插件代理实现业务逻辑,对外部的接口主要是插件,这些接口可以提供给二次开发使用. 命名空间Kingdee.BOS.Core.DynamicForm.PlugIn 主要类及说明: [tr ...
- 8个有用的表单构建工具,你一定要使用并收藏好
英文 | https://javascript.plainenglish.io/8-interesting-form-builders-to-add-to-your-tech-stack-in-202 ...
- 工作流模式每个工作流引擎都会支持多种方式的表单。目前大家讨论到的大概有三种。 动态表单 外置表单 普通表单
工作流模式 抢占 会签 委托代办 催办 自由流 回退 取回 指派 前加签 后加签 改派 驳回 终止 挂起 激活 基本控制流模式 顺序流(Sequence) 并行分叉(Parallel Split) 同 ...
- angular4更改表单中显示的值_Angular 4 动态表单教程 Reactive Forms教程
动态表单(React Forms)是一种动态构建表单的技术,用于解决有时候手动编写和维护表单所需工作量和时间会过大的问题.特别是在需要编写大量表单时.表单都很相似,而且随着业务和监管需求的迅速变化,表 ...
- jQuery对象,jQuery查找标签,层级选择器,属性选择器,表单筛选器,操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
最新文章
- 基于SSM的e律通管理系统
- java web每天定时执行任务(四步轻松搞定)
- python转换维度
- 专访阿里云萧少聪、曹龙:一家云厂商对入局数据库做了哪些思考?
- hmac sha256安全吗_全面普及HTTPS有意义吗?
- Maven报错Please ensure you are using JDK 1.4 or above and not a JRE解决方法!
- PivotGridControl与ChartControl控件结合使用(一)
- cvtColor +内存泄漏
- 拼多多无货源商家一键上传同行店铺宝贝软件?
- SpringBoot2 学习5集成Thymeleaf
- 一个迷茫的应届生程序员
- 加密邮箱的数字签名和加密原理
- python sympy包符号运算进行定积分计算
- IO与文件读写---使用Apache commons io包提高读写效率
- 系统架构师(十)设计模式
- 送给1987年左右的朋友,看完是不是有些泪水
- 利用Java语言编写一个猜数字游戏(有次数限制)
- HTTP Status 400 – 错误的请求,由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚拟的请求路由),服务器无法或不会处理当前请求。
- Python设计一个学生类
- 面试资料整理(整理中~)