看几天的javascript面向对象和基础等之类相关javascript的知识，因为自己是写php的，也写过java，所以想在写javascript代码的时候也能用上面向对象的思想，

折腾了一整天的js继承和封装等，搞得我是吃午饭都想着问题，怎么javascript代码能够如此松散呢？眼看就要下班了，加班到如今不知怎么滴就弄了这样一个js代码模板，想以后每一个模块都这样写。大了就各个功能对象提炼出来，如验证的、语言包的。

好了，废话不多说，菜鸟一个，代码没凝视也不完整，高手留情指点：

reg.html文件：

  1. <html>
  2.     <head><include file="layout/head"/><title>{$Think.lang.REG}</title></head>
  3. <body>
  4. <include file="layout/nav"/>
  5. <div id="content">
  6.     <div class="panel panel-warning">
  7.         <div class="panel-heading">
  8.             <h3 class="panel-title">{$Think.lang.REG}</h3>
  9.         </div>
  10.         <div class="panel-body">
  11.             <form id="regForm" action="{:U('home/user/reg')}" method="post">
  12.                 <div class="form-group">
  13.                     <label for="account">{$Think.lang.ACCOUNT}</label>
  14.                     <input type="text" id="account" methods="keyup,blur" name="account" class="form-control" style="width: 30%;"
  15.                            placeholder="{$Think.lang.REG_ACCOUNT_TIP}" title="{$Think.lang.REG_ACCOUNT_TIP}"/>
  16.                     <div class="alert alert-danger js-account_alert" style="width: 30%; display: none;">
  17.                         <strong>:(</strong>
  18.                         <span></span>
  19.                     </div>
  20.                 </div>
  21.                 <div class="form-group">
  22.                     <label for="password">{$Think.lang.PWD}</label>
  23.                     <input type="password" methods="keyup,blur" name="password" class="form-control" style="width: 30%;" id="password"
  24.                            placeholder="{$Think.lang.REG_PWD_TIP}" title="{$Think.lang.REG_PWD_TIP}"/>
  25.                     <div class="alert alert-danger js-pwd_alert" style="width: 30%; display: none;">
  26.                         <strong>:(</strong>
  27.                         <span></span>
  28.                     </div>
  29.                 </div>
  30.                 <div class="form-group">
  31.                     <label for="password">{$Think.lang.VERIFY}</label>
  32.                     <div class="input-group" style="width: 30%;">
  33.                         <input type="text" methods="blur" id="verify" name="verify" class="form-control"/>
  34.                         <span class="input-group-addon" style="padding: 0px;">
  35.                             <img src="{:U('home/user/verify','','')}" methods="click" id="changeVerify" title="点击更换"/>
  36.                         </span>
  37.                     </div>
  38.                     <div class="alert alert-danger js-verify_alert" style="width: 30%; display: none;">
  39.                         <strong>:(</strong>
  40.                         <span></span>
  41.                     </div>
  42.                 </div>
  43.                 <input type="hidden" name="submit_code" value="{$submitCode}"/>
  44.                 <button type="button" id="regSubmitBtn" methods="click" class="btn btn-primary">{$Think.lang.REG}</button>
  45.                 <button type="reset" class="btn btn-default">{$Think.lang.RESET}</button>
  46.             </form>
  47.         </div>
  48.     </div>
  49. </div>
  50. <include file="layout/foot"/>
  51. <script src="reg.js"></script>
  52. </body>
  53. </html>
  1.  

reg.js文件： 

  1.    $( function( ) {
  2.         var Reg = {
  3.             regEx: {
  4.                 ACCOUNT: /^\w{5,8}$/,
  5.                 PWD: /^\d{5,15}$/,
  6.                 VERIFY: /^\d{4}$/
  7.             },
  8.             node: {
  9.                 account: $( '#account' ),
  10.                 pwd: $( '#password' ),
  11.                 verify: $( '#verify' ),
  12.                 regForm: $( '#regForm' )
  13.             },
  14.             lang: {
  15.                 ACCOUNT: '{$Think.lang.REG_ACCOUNT_TIP}',
  16.                 PWD: '{$Think.lang.REG_PWD_TIP}',
  17.                 VERIFY: '{$Think.lang.REG_VERIFY_TIP}',
  18.                 CHECK_VERIFY_URL: "{:U('home/user/checkVerify')}",
  19.                 VERIFY_URL: "{:U('home/user/verify','','')}"
  20.             },
  21.             server: {
  22.                 checkVerify: function( val, callback ) {
  23.                     $.post( Reg.lang.CHECK_VERIFY_URL, { verify: val }, callback, 'json' );
  24.                 }
  25.             },
  26.             validator: {
  27.                 account: function( val, tip ) {
  28.                     var result = false;
  29.                     if ( !Reg.regEx.ACCOUNT.test( val ) ) {
  30.                         Reg.ui.showTip( tip, Reg.lang.ACCOUNT );
  31.                     } else {
  32.                         result = true;
  33.                         Reg.ui.hideTip( tip );
  34.                     }
  35.                     return result;
  36.                 },
  37.                 pwd: function( val, tip ) {
  38.                     var result = false;
  39.                     if ( !Reg.regEx.PWD.test( val ) ) {
  40.                         Reg.ui.showTip( tip, Reg.lang.PWD );
  41.                     } else {
  42.                         result = true;
  43.                         Reg.ui.hideTip( tip );
  44.                     }
  45.                     return result;
  46.                 },
  47.                 verify: function( val, tip, callback ) {
  48.                     var result = false;
  49.                     if ( !Reg.regEx.VERIFY.test( val ) ) {
  50.                         Reg.ui.showTip( tip, Reg.lang.VERIFY );
  51.                     } else {
  52.                         Reg.server.checkVerify( val, function( data ) {
  53.                             if ( data.status ) {
  54.                                 if ( typeof callback === 'function' ) {
  55.                                     callback();
  56.                                 }
  57.                                 Reg.ui.hideTip( tip );
  58.                             } else {
  59.                                 Reg.ui.showTip( tip, Reg.lang.VERIFY );
  60.                             }
  61.                         } );
  62.                     }
  63.                     return result;
  64.                 }
  65.             },
  66.             ui: {
  67.                 showTip: function( obj, msg ) {
  68.                     $( obj ).slideDown( 'slow' ).find( 'span' ).html( msg );
  69.                 },
  70.                 hideTip: function( obj ) {
  71.                     $( obj ).slideUp( ).find( 'span' ).html( '' );
  72.                 }
  73.             },
  74.             event: {
  75.                 accountKeyup: function( e ) {
  76.                     var self = $( this );
  77.                     setTimeout( function( ) {
  78.                         Reg.validator.account( self.val( ), '.js-account_alert' );
  79.                     }, 1000 );
  80.                 },
  81.                 accountBlur: function( e ) {
  82.                     var self = $( this );
  83.                     Reg.validator.account( self.val( ), '.js-account_alert' );
  84.                 },
  85.                 passwordKeyup: function( e ) {
  86.                     var that = $( this );
  87.                     setTimeout( function( ) {
  88.                         Reg.validator.pwd( that.val( ), '.js-pwd_alert' );
  89.                     }, 1000 );
  90.                 },
  91.                 passwordBlur: function( e ) {
  92.                     var self = $( this );
  93.                     Reg.validator.pwd( self.val( ), '.js-pwd_alert' );
  94.                 },
  95.                 verifyBlur: function( e ) {
  96.                     Reg.validator.verify( $( this ).val( ), '.js-verify_alert' );
  97.                 },
  98.                 changeVerifyClick: function( ) {
  99.                     var src = Reg.lang.VERIFY_URL + '/' + new Date( ).getTime( );
  100.                     $( this ).attr( 'src', src );
  101.                 },
  102.                 regSubmitBtnClick: function() {
  103.                     Reg.validator.account( Reg.node.account.val( ), '.js-account_alert' ) &&
  104.                             Reg.validator.pwd( Reg.node.pwd.val( ), '.js-pwd_alert' ) &&
  105.                             Reg.validator.verify( Reg.node.verify.val( ), '.js-verify_alert', function() {
  106.                                 Reg.node.regForm.submit();
  107.                             } );
  108.                 }
  109.             },
  110.             util: {
  111.                 upFirstLetter: function( word ) {
  112.                     var reg = /\b(\w)|\s(\w)/g;
  113.                     word = word.toLowerCase();
  114.                     return word.replace( reg, function( m ) {
  115.                         return m.toUpperCase();
  116.                     } );
  117.                 }
  118.             },
  119.             initializer: function( ) {
  120.                 var node = $( '[methods]' );
  121.                 node.each( function( ) {
  122.                     var self = $( this ), methods = self.attr( 'methods' );
  123.                     if ( methods ) {
  124.                         var _methods = methods.split( ',' );
  125.                         for ( var i = 0, len = _methods.length; i < len; i++ ) {
  126.                             var method = _methods[i];
  127.                             if ( method ) {
  128.                                 var func = self.attr( 'id' ) + Reg.util.upFirstLetter( method );
  129.                                 console.log( func );
  130.                                 self.on( method, Reg.event[func] );
  131.                             }
  132.                         }
  133.                     }
  134.                 } );
  135.             }
  136.         };
  137.         Reg.initializer( );
  138.     } );

后端程序员写的前端js代码模板的更多相关文章

  1. 程序员面试京东前端，现场JavaScript代码写出魔方特效

    程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...

  2. 写给后端程序员的HTTP缓存原理介绍

    There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Ka ...

  3. 程序员写 2000 行 if else？领导：这个锅我不背

    前言 知乎上有小伙伴提了这么一个问题,如何看待陕西省普通话水平测试成绩查询系统?查询系统前端代码就直接给出了身份账号,姓名,证书编号,如果信息是真的,就泄露了这么多考生的信息,白给那种.为什么会发生这 ...

  4. 科普，想成为厉害的 Java 后端程序员，你需要懂这 13 个知识点

    老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 站 ...

  5. 科普，想成为厉害的 Java 后端程序员，你需要懂这些

    站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...

  6. 后端程序员实现一个IP归属地的小程序

    在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...

  7. 后端程序员必备的 Linux 基础知识

    1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...

  8. Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  9. 出错的方法有可能是JDK，也可能是程序员写的程序，无论谁写的，抛出一定用throw

    应对未检查异常就是养成良好的检查习惯. 已检查异常是不可避免的,对于已检查异常必须实现定义好应对的方法. 已检查异常肯定跨越出了虚拟机的范围.(比如“未找到文件”) 如何处理已检查异常(对于所有的已检 ...

随机推荐

  1. Linux中如何配置IP相关文件

    Linux中如何配置IP 与网络相关的文件:1) /etc/sysconfig/network   设置主机名称及能否启动Network2) /etc/sysconfig/network-script ...

  2. WireShark出现The NPF driver isn't running的问题

    昨天开始尝试装上了wireshark网络监视软件,可是今天打开去总是出现“The NPF driver isn't running.You may have trouble capturing or ...

  3. 深度学习方法（八）：自然语言处理中的Encoder-Decoder模型，基本Sequence to Sequence模型

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld.技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. Encoder-Decoder(编码- ...

  4. 秀尔算法：破解RSA加密的“不灭神话” --zz

    http://netsecurity.51cto.com/art/201508/488766.htm RSA加密曾被视为最可靠的加密算法,直到秀尔算法出现,打破了RSA的不灭神话. RSA加密 VS ...

  5. Hadoop案例（九）流量汇总案例

    流量汇总程序案例 1.自定义输出 统计手机号耗费的总上行流量.下行流量.总流量(序列化) 1)需求: 统计每一个手机号耗费的总上行流量.下行流量.总流量 2)数据准备 phone_date.txt - ...

  6. Hadoop案例（六）小文件处理（自定义InputFormat）

    小文件处理(自定义InputFormat) 1.需求分析 无论hdfs还是mapreduce,对于小文件都有损效率,实践中,又难免面临处理大量小文件的场景,此时,就需要有相应解决方案.将多个小文件合并 ...

  7. react + redux 实现幻灯片

    写在前面: 这一篇是我 使用scss + react + webpack + es6实现幻灯片 的进阶篇,效果请点我,将会使用上redux的基础用法,因为一开始没有理解好redux的用法,单纯看文档, ...

  8. bzoj 1115 转换+阶梯博弈

    思路:我打了半天的表找规律....  我们将每两个数的差值看成一堆堆石子,那么题目实际上就变为了 从当前堆可以拿出一些石子放到下一堆里去,就变成了一个阶梯博弈... #include<bits/ ...

  9. VMware虚拟机VMware Authorization Service不能启动问题

    出现VMware Authorization Service不能启动问题,注意要在安装VMware Player时使用管理员权限

  10. OOD沉思录 --- 面向动作与面向对象 --- 避免全能类

    面向过程的软件开发通过非常集中化的控制机制来分解功能,在程序设计中表现就是大量的条件判断,深层次的循环嵌套等. 这种模式下,我们可以通过分析方法的参数,局部变量及其访问的全局变量来得到方法对数据的依赖 ...