JS实现数据与逻辑分离的方法-创新互联-成都快上网建站

JS实现数据与逻辑分离的方法-创新互联

这篇文章主要讲解了JS实现数据与逻辑分离的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

成都创新互联公司是一家集网站建设,武山企业网站建设,武山品牌网站建设,网站定制,武山网站建设报价,网络营销,网络优化,武山网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题——可扩展性和灵活性差。

认真分析表单验证的过程,可以分为两步:怎么验证和如何验证。怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题。

点击:这里 查看源码

策略模式将对象和规则区分

如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立于使用它的客户而变化?这里引入策略模式。

什么是策略模式

定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换。本模式使得算法可独立于使用它的客户而变化。

即:策略模式把对象本身和运算规则区分开来,其功能非常强大,因为这个设计模式本身的核心思想就是面向对象编程的多形性的思想。

关于策略模式的更多定义,参见

下面我们就开始运用策略模式来解决代码分层问题。

理想中的插件调用

在开始代码之前,我们希望用更简单的方式调用插件。

  // 获取表单form元素
  var form = document.getElementById('myForm');

  // 创建表单校验实例
  var validation = new FormValidator();
  // 编写校验配置
  validation.add(form.username, 'isEmpty', '用户名不能为空s');
  validation.add(form.password, 'minLength: 6', '密码长度不能小于6个字符');
  validation.add(form.password2, 'isEqualTo: password', '密码不一致');
  validation.add(form.mobile, 'isMobile', '请填写正确的手机号');

  // 开始校验,并接收错误信息
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    // 如果有错误信息输出,说明校验未通过
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:JS实现数据与逻辑分离的方法-创新互联
网站路径:http://kswjz.com/article/dcgepj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流