来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

理解javascript封装_javascript技巧_脚本之家

具体内容请看注释,这里就不多BB了,

下面介绍的是一些纯javascript实现的语法高亮插件。 英文原文:

封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。

推荐一个自己用的封装好的javascript插件,封装javascript插件

具体内容请看注释,这里就不多BB了,

奉上代码:

/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
///检测表单中的不能为空(.notnull)的验证
/*
 时间:2012-6-6
 作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断
 用法:在form标签下 找到当前 表单的容器 给予class="form",当前表单的提交按钮给予 class="check"
 需要验证为空的元素给予class="notnull" nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="need"
 判断的类型给予 class="num"(只能是数字) 验证的提示 logicmsg="XX只能是数字"
 给予class="errorMessage"显示错误信息块
 给予class="warn"显示错误信息
 未使用js面向对象编程
 逻辑判断,不传入need标识,直接给出正则表达式属性(自定义)regex="/^d$/" 做出判断
 在外部实现
 Global.submitCallback button回调函数
 Global.confirmCallback confirm回调函数;
 需要改进的地方:
 暂无
 更新时间:2014年12月3日 16:23:22
 作者:Amber.Xu
 */
//$(document).ready(
//  function () {
//    $("form").find(".notnull").bind({
//      focus: function () {
//        if ($(this).attr("value") == this.defaultValue) {
//          $(this).attr("value", "");
//        }
//      },
//      blur: function () {
//        if ($(this).attr("value") == "") {
//          $(this).attr("value", this.defaultValue);
//        }
//      }
//    });
//  }
//);
///*封装一个万能检测表单的方法*/
///event.srcElement:引发事件的目标对象,常用于onclick事件。
///event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件。
///event.toElement:引发事件后,鼠标移动到的目标源,常用于onmouseout和onmouseover事件。
function Global() {
  var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
  //form body
  $("body").find(".form").each(function () {
    this.onclick = function (e) {
      var button = null;
      try {
        button = e.srcElement == null ? document.activeElement : e.srcElement;
      } catch (e) {
        console.log(e.message)
        button = document.activeElement;
      }
      if ($(button).is(".check")) {
        //alert("提交")
        var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
        if (sub) {
          // Call our callback, but using our own instance as the context
          Global.submitCallback.call(this, [e]);
        }
        return sub;
      } else if ($(button).is(".confirm")) {
        //alert("删除")
        var sub = confirm($(button).attr("title"));
        if (sub) {
          Global.confirmCallback.call(this, [e]);
        }
        return sub;
      } else {
        //          //alert("其它")
        return true;
      }
    }
  });
  /*检测表单中不能为空的元素*/
  function checkform(form) {
    var b = true;
    $(form).find(".notnull").each(function () {
      if ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
        //        if (this.value != null) {
        //          $(this).attr("value", "");
        //        }
        //alert($(this).attr("msg"))
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    if (b == true) {
      $(form).find(".warn").text("");
      $(form).find(".errorMessage").hide();
    }
    return b;
  }
  /*检测表单中必选的下拉列表*/
  function checkselect(form) {
    var b = true;
    $(form).find(".select").each(function (i) {
      var ck = $(this).find('option:selected').text();
      if (ck.indexOf("选择") > -1) {
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    return b;
  }
  /*检测表单中必选的复选框*/
  function checkChecked(form) {
    var b = true;
    $(form).find(".checkbox").each(function (i) {
      var ck = $(this)[0].checked;
      if (!ck) {
        $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
        $(this).parents(".form").find(".errorMessage").show();
        $(this).select();
        $(this).focus();
        return b = false;
      }
    });
    return b;
  }
  //检查是否匹配该正则表达式
  function GetFlase(value, reg, ele) {
    if (reg.test(value)) {
      return true;
    }
    $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
    $(ele).parents(".form").find(".errorMessage").show();
    $(ele).focus();
    $(ele).select();
    return false; //不能提交
  }
  function CheckInputRex(form) {
    var b = true;
    $(form).find("input[type='text']").each(function () {
      if (typeof ($(this).attr("regex")) == 'string') {
        if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
          //当前表单的值
          var value = $(this).attr("value") || $(this).val();
          var regx = eval($(this).attr("regex"));
          return b = GetFlase(value, regx, this);
        }
      }
    });
    return b;
  }
  ///检查用户输入的相应的字符是否合法
  ///此方法已废弃
  function CheckInput(form) {
    var b = true;
    $(form).find(".need").each(function () {
      if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
        //当前表单的值
        var value = $(this).attr("value");
        //id的值或者name的属性的值如:[name="contact"]
        var name = $(this).attr("class");
        //检查需要输入的内容是否合法如:联系方式
        var len = name.split(" ");
        for (var i = 0; i < len.length; i++) {
          switch ($.trim(len[i])) {
            ///联系方式                                                                      
            case "mobile":
              var reg = /^1d{10}$/;
              return b = GetFlase(value, reg, this);
              break;
            ///邮箱                                                                     
            case "email":
              var reg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
              return b = GetFlase(value, reg, this);
              break;
            ///两次密码是否一致                                                                
            case "password":
              break;
            case "password2":
              if ($("#password").attr("value") != $("#password2").attr("value")) {
                $(this).select(); //获取焦点
                $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                return b = false; //不能提交
              }
              break;
            case "worktel":
            case "hometel": //家庭电话
              var reg = /^d{8}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "post": //邮编
              var reg = /^d{6}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "bonus":
            case "allowance":
            case "FixedSalary":
              var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0|[1-9]d)$/;
              return b = GetFlase(value, reg, this);
              break;
            case "identity":
              var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
              return b = GetFlase(value, reg, this);
              break;
            case "height":
              var reg = /^[1-2][0-9][0-9]$/;
              return b = GetFlase(value, reg, this);
              break;
            case "qq":
              var reg = /^[1-9][0-9]{4,}$/;
              return b = GetFlase(value, reg, this);
              break;
            case "begintime":
            case "endtime":
              var reg = /^d{4}$/;
              if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
                return b;
              }
              $.ligerDialog.alert($(this).attr("msg"))
              $(this).select(); //获取焦点
              return b = false; //不能提交
              break;
            case "num":
              var reg = /^d+$/;
              return b = GetFlase(value, reg, this);
              break;
            ///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有:                              
            ///14/15+7位数,G+8位数;                              
            ///因公普通的是:P.+7位数;                              
            ///公务的是:S.+7位数 或者                              
            //S+8位数,以D开头的是外交护照                              
            case "postport": //护照号码
              var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd+|1[4,5]d{7})$/;
              return b = GetFlase(value, reg, this);
              break;
            case "bankaccount":
              var reg = /^[0-9]{19}$/;
              return b = GetFlase(value, reg, this);
              break;
          } //switch
        } //for
      }
    });
    return b;
  }
  ///此方法已经废弃
});
///单击改变背景颜色
$(document).ready(function () {
  var inputs = $("#top>.c>input");
  $(inputs).each(function () {
    this.onclick = function () {
      document.getElementById("main").style.backgroundColor = this.name;
      //$("#main").backgroundColor = this.name;
    }
  });
});

基本上常用的功能都封装在内了,希望小伙伴们能够喜欢。

具体内容请看注释,这里就不多BB了, 奉上代码: /// reference path="vendor/jquery-1...

/// ///检测表单中的不能为空的验证/* 时间:2012-6-6 作用:一对form标签下有多个表单需要提交时,使用js准确的判断当前按钮对那些元素做判断 用法:在form标签下 找到当前 表单的容器 给予,当前表单的提交按钮给予 需要验证为空的元素给予 nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予 判断的类型给予  验证的提示 logicmsg="XX只能是数字" 给予显示错误信息块 给予显示错误信息 未使用js面向对象编程 逻辑判断,不传入need标识,直接给出正则表达式属性regex="/^d$/" 做出判断 在外部实现 Global.submitCallback button回调函数 Global.confirmCallback confirm回调函数; 需要改进的地方: 暂无 更新时间:2014年12月3日 16:23:22 作者:Amber.Xu *///$.ready {// $.find.bind({// focus: function .attr == this.defaultValue) {// $.attr;// }// },// blur: function .attr {// $.attr("value", this.defaultValue);// }// }// });// }//);///*封装一个万能检测表单的方法*////event.srcElement:引发事件的目标对象,常用于onclick事件。///event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件。///event.toElement:引发事件后,鼠标移动到的目标源,常用于onmouseout和onmouseover事件。function Global() { var _self = this;}Global.submitCallback = null;Global.confirmCallback = null;$.ready { //form body $.each { this.onclick = function  { var button = null; try { button = e.srcElement == null ? document.activeElement : e.srcElement; } catch  { console.log button = document.activeElement; } if .is { //alert var sub =  && CheckInputRex && checkselect && checkChecked { // Call our callback, but using our own instance as the context Global.submitCallback.call; } return sub; } else if .is { //alert var sub = confirm.attr { Global.confirmCallback.call; } return sub; } else { // //alert return true; } } }); /*检测表单中不能为空的元素*/ function checkform { var b = true; $.find.each { if .length <= 0) {//|| $ == this.defaultValue // if  { // $.attr; // } //alert $.parents.find.attr.parents.find.show; $; return b = false; } }); if .find; $.find.hide(); } return b; } /*检测表单中必选的下拉列表*/ function checkselect { var b = true; $.each { var ck = $.find.text(); if  > -1) { $.parents.find.attr.parents.find.show; $; return b = false; } }); return b; } /*检测表单中必选的复选框*/ function checkChecked { var b = true; $.find.each { var ck = $[0].checked; if .parents.find.attr.parents.find.show; $; return b = false; } }); return b; } //检查是否匹配该正则表达式 function GetFlase { if  { return true; } $.find.attr.parents.find.show; $; return false; //不能提交 } function CheckInputRex { var b = true; $.find.each { if .attr == 'string') { if .length > 0 && $ != this.defaultValue) { //当前表单的值 var value = $ || $; var regx = eval); return b = GetFlase; } } }); return b; } ///检查用户输入的相应的字符是否合法 ///此方法已废弃 function CheckInput { var b = true; $.each { if .length > 0 && $ != this.defaultValue) { //当前表单的值 var value = $; //id的值或者name的属性的值如:[name="contact"] var name = $; //检查需要输入的内容是否合法如:联系方式 var len = name.split; for (var i = 0; i < len.length; i++) { switch  { ///联系方式 case "mobile": var reg = /^1d{10}$/; return b = GetFlase; break; ///邮箱 case "email": var reg = /^[w-]+*@[w-]++$/; return b = GetFlase; break; ///两次密码是否一致 case "password": break; case "password2": if .attr != $.attr.select.parents.find.attr.parents.find.show(); return b = false; //不能提交 } break; case "worktel": case "hometel": //家庭电话 var reg = /^d{8}$/; return b = GetFlase; break; case "post": //邮编 var reg = /^d{6}$/; return b = GetFlase; break; case "bonus": case "allowance": case "FixedSalary": var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0|[1-9]d)$/; return b = GetFlase; break; case "identity": var reg = /|/; return b = GetFlase; break; case "height": var reg = /^[1-2][0-9][0-9]$/; return b = GetFlase; break; case "qq": var reg = /^[1-9][0-9]{4,}$/; return b = GetFlase; break; case "begintime": case "endtime": var reg = /^d{4}$/; if  && (parseInt > parseInt))) { return b; } $.ligerDialog.alert $; //获取焦点 return b = false; //不能提交 break; case "num": var reg = /^d+$/; return b = GetFlase; break; ///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有: ///14/15+7位数,G+8位数; ///因公普通的是:P.+7位数; ///公务的是:S.+7位数 或者 //S+8位数,以D开头的是外交护照 case "postport": //护照号码 var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd+|1[4,5]d{7})$/; return b = GetFlase; break; case "bankaccount": var reg = /^[0-9]{19}$/; return b = GetFlase; break; } //switch } //for } }); return b; } ///此方法已经废弃});///单击改变背景颜色$.ready { var inputs = $; $.each { this.onclick = function () { document.getElementById.style.backgroundColor = this.name; //$.backgroundColor = this.name; } });});

1. SyntaxHighlighter我相信这个插件是我们使用多的,它支持超多的语言,如果遇到不支持的语法还支持自定义。2. SHJSSHJS 是js语法高亮插件的代表,它支持很多编程语言,兼容Firefox 2&3, IE 6& 7, Opera 9.6, Safari 3.2 &Chrome 1.0。3. beautyOfCodebeautyOfCode 是一个基于jQuery的语法高亮插件,使用了Alex Gorbatchev的语法高亮脚本使它更贴近 XHTML标准。4. ChiliChili is也是基于jQuery的语法高亮插件,支持很多语言并且带很多可配置项。5. Lighter.jsLighter.js是基于MooTools的免费语法高亮插件, 简单易用。6. Highlight.jshighlight.js 同样是简单易用,支持多数语言,它有很多可以跟CMS、论坛和博客整合的插件。7. DlHighlightDlHighlight是一款比较简单的高亮插件,仅支持JavaScript, CSS, XML, HTML。8. Google Code PrettifyGoogle Code Prettify是谷歌出品的语法高亮插件,可以高亮html页面中的部分代码片段。9. JUSHJUSH是另外一个 jQuery语法高亮插件 ,支持HTML, CSS, PHP, PY和 SQL。

在JavaScript中,并没有显示的声明私有成员的关键字等。所以要想实现封装/信息隐藏就需要从另外的思路出发。我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性,来达到封装的要求。

基本上常用的功能都封装在内了,希望小伙伴们能够喜欢。

基本方式澳门威尼斯人平台,一般来说,我们学用的有三种方法来达到封装的目的。

使用this.XXX来声明一个变量,然后再声明getXXX、setXXX等取值、赋值的方法。使用this._XXX来声明一个变量,然后再声明getXXX、setXXX等取值、赋值的方法。利用“函数作用域”这一个概念来做。1. 门户大开型

var Book = function{ this.setIsbn; this.setTitle; this.setAuthor;};Book.prototype = { setIsbn: function{ this.isbn = isbn; }, getIsbn: function(){ return this.isbn; }, setTitle: function{ this.title = title; }, getTitle: function(){ return this.title; }, setAuthor: function{ this.author = author; }, getAuthor: function(){ return this.author; }};

使用这种方法实现的封装,虽然实现了取值器与赋值器以保护私有属性。但是在实际使用中,私有属性依然可以从外部访问,所以从根本上讲,没有实现封装。

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:理解javascript封装_javascript技巧_脚本之家

关键词: