构造大表单运用中javascript代码的一种要领

2019年8月26日 122次阅读 来源: mcfog

构造大表单运用中javascript代码的一种要领

题目，效果，目标

凌驾一屏，属性庞杂到肯定水平的录入界面/体系中，缺少优越架构的javascript代码每每轻易失控。尤其是当范围从小型表单最先逐步变大时，javascript代码很轻易演变成已DOM为中心的、缺少构造、满是hack且难以保护的状况。

我以为优越可保护的JS代码应该具有以下的特征

  • 单个文件应该控制在一千行之内
  • 依靠治理和兼并，开辟应该单看一个JS文件就晓得它依靠别的哪些代码，而不是在HTML中直接枚举一切依靠，或许更糟，把一切凌驾2个页面要用的JS全写一同。
  • 优越的代码复用，清楚的模块分别
  • 转变字段的表现情势或逻辑时，不应该须要修正/斟酌/晓得其他字段的逻辑和展现情势。转变DOM树构造、替换表单控件等转变展现体式格局的需求不应该对JS发生毁灭性袭击。

前三个题目基础能够归结为，凌驾一千行的或是须要复用的JS代码运用RequireJS / SeaJS 等计划举行剖析和治理。因为这是庞杂JS工程的共性，这里不多做展开讨论。本文重要关注末了一点，也就是怎样消除字段逻辑和展现之间的耦合，怎样消除字段和其他字段的耦合。

解耦，协定，模板化

消除耦合的做法不外乎将笼统出最小化的接口（协定）。字段能够有光怪陆离的种种逻辑，但笼统后发明实在针对单个字段来讲，须要的最小接口异常小——几乎太合适解耦、正交化了

  • val 要领，传值则写入，不传则读取（jQuery作风）
  • setReadonly 要领 设置只读
  • setWritable 要领 设为可写（固然设想成setReadonly(false)也不坏）
  • change 事宜 值被转变时触发
  • error 事宜 须要提醒用户这个字段有题目时触发

订好接口今后，每一个字段只须要自身都完成接口，除了每一个字段自身的完成代码以外，外部一概经由过程接口来和字段交互。如许代码就团体可控可保护，扩大性和可读性都能令人满意。

有了如许的接口，我们的逻辑完成就能够异常语义化，比方折扣锁定为=现价/原价

good.discount.setReadonly();
var discountUpdate = function() {
    good.discount.val(good.price.val() / good.originalPrice.val());
};
good.price.addListener('change', discountUpdate); //注重：这不是DOM事宜
good.originalPrice.addListener('change', discountUpdate);

如许一段代码完整不触及dom交互，所以不管价钱怎样输入展现，折扣怎样展现都没有题目。而完成dom交互的代码也完整没必要体贴这个字段的逻辑怎样，只须要完成前述接口，将输入输出、只读、提醒信息这些行动和DOM绑定即可。

最经常使用也是最多的绑定就是一个字段对应一个DOM控件，这类绑定只须要简朴地将DOM事宜转发成自定义事宜，将读写转换成DOM控件读写即可；轻微庞杂一些的交互触及富文本编辑、日历控件等输入情势，因为我们的接口异常小，所以平常也无需太多的代码。

题目每每泉源于更庞杂的一些字段，他们在耐久化时每每体现成JSON/XML花样字符串，或许是分外的扩大表。这些字段每每没法轻易地用一个规范DOM控件来表现，也每每是杂沓的泉源。

DOM操纵难以保护的重要原因是插进去、删除元素的同时还要保护事宜，在同一个页面重复举行种种操纵的时刻，逻辑轻易有题目，所以我的做法是

  • 事宜用托付仅在初始化的时刻绑在容器上一次
  • 不零丁插进去、删除dom元素，而是以模板和数据衬着出一切元素
  • 在内存里保护一个变量存储当前的数据，dom内里的数据并不具权威性

《构造大表单运用中javascript代码的一种要领》

  • render衬着例程：
    • 触发点：由change事宜触发
    • 行动：从内存读取数据后（用模板）衬着出一切的DOM元素的HTML代码，一次性吐在容器中
  • normalize规范化例程：
    • 触发点：dom事宜/val赋值 写入数据时
    • 行动：将输入数据举行规范化，然后写入内存并触发change事宜

校验，提交

因为庞杂表单每每触及一样庞杂的考证逻辑，发起尽可能将逻辑鸠合在背景CGI，JS少做逻辑（不然同时保护两套差别言语的等价的逻辑本钱较大）

不管毛病是从CGI拿到，照样JS自身验出来，显现毛病提醒都一样经由过程字段上的error事宜来通报，校验代码担任触发事宜，字段自身的完成代码监听事宜来在界面上显现响应的提醒。

提交数据时，只须要遍历一切字段的鸠合，将他们的字段名和val()效果拼装

DSL

总而言之，处理杂沓代码的思绪之一是将“需求/划定规矩”和“表现/操纵”星散，将前者笼统成某种形状的DSL，使之只管切近产物的需求，然后将后者作为这类DSL的诠释器来写。代码写到像天然言语就赢了。假如做不到，无妨针对一个范畴写诠释器来诠释为何这些天然言语能事情。这是相符计算机科学发展大规律的，道法天然。

–EOF–

原文链接 http://mcfog.github.io/2013/06/dsl-style-javascript/

    原文作者：mcfog
    原文地址: https://segmentfault.com/a/1190000000487478
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞