任务三十二：表单（四）实现表单自动生成工厂

面向人群：: 初学者
难度：: 中等，但较为繁琐

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

加强对JavaScript的掌握
熟悉常用表单处理逻辑
学习如何模块如何设计，不同模块间如何尽量解耦

任务描述

实现以JavaScript对象的方式定义表单及验证规则

表单配置参考示例如下：（不需要一致，仅为参考）


    {
        label: '名称',                    // 表单标签
        type: 'input',                   // 表单类型
        validator: function () {...},    // 表单验证规
        rules: '必填，长度为4-16个字符',    // 填写规则提示
        success: '格式正确',              // 验证通过提示
        fail: '名称不能为空'               // 验证失败提示
    }

基于该配置项，实现一套逻辑，可以自动生成表单的展现、交互、验证
使用你制作的表单工厂，在一个页面上创建两套样式不同的表单

任务注意事项

实现中，尽可能考虑代码的可读性和可复用性
尽量时表单配置、生成、样式、验证几个逻辑之间的耦合度足够低
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

任务协作建议

团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
各自完成任务实践
交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

posted @ 2016-03-24 21:24 huansky 阅读(663) 评论(0) 收藏举报

刷新页面返回顶部

huansky