JavaScript的封装与链式调用

最新推荐文章于 2023-01-11 14:00:54 发布

张侦毅

最新推荐文章于 2023-01-11 14:00:54 发布

阅读量1.8k

点赞数

分类专栏： javascript 前端文章标签： javascript 链式调用

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/65125606

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

原生的JavaScript操作,不仅仅代码长,而且还不容易记忆和使用,采用对原生的JavaScript代码进行封装,采用编程中主流的面向对象的思维,即在方法中尽量采用属性式的操作(get/set操作),这样我们不仅仅可以简化代码操作量,更加容易记忆,同时也就更加的利于使用,同时我们还可以很轻松的使用我们封装的相关代码采用链式调用来处理各种繁杂的操作.

代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>第一个web项目</title>
  </head>
<style type="text/css">
  .hide{
    display: none;
  }
</style>
  <body>
  <div id="anchor" name="divName" value="divValue" class="" >这里是div中显示的内容zhangsan zhangsan lisi</div>
  </body>
  <script type="text/javascript">

    window.$=function(id){
        return new _$(id);
    }

    _$=function(id){
        this.element=document.getElementById(id);
    }
    _$.prototype={
        constructor:_$,
        setHtml:setHtml,
        getHtml:getHtml,
        setName:setName,
        getName:getName,
        setValue:setValue,
        getValue:getValue,
        addClass:addClass,
        removeClass:removeClass,
        getClass:getClass
    }

    /**
     * 设置html文本内容
     * @param obj
     * @returns {setHtml}
     */
    function setHtml(obj){
        this.element.innerHTML=obj;
        return this;
    }

    /**
     * 获取html文本内容
     * @returns {string}
     */
    function getHtml(){
      return this.element.innerHTML;
    }

    /**
     * 设置name属性
      * @param obj
     * @returns {setName}
     */
    function setName(obj){
      this.element.setAttribute('name',obj);
      return this;
    }

    /**
     * 获取name属性
     * @returns {string}
     */
    function getName(){
      return this.element.getAttribute('name');
    }

    /**
     * 设置value属性
     * @param obj
     * @returns {setValue}
     */
    function setValue(obj){
      this.element.setAttribute('value',obj);
      return this;
    }

    /**
     * 获取value属性
     * @returns {string}
     */
     function getValue(){
        return this.element.getAttribute('value');
     }

    /**
     * 添加class样式
     * @param obj
     * @returns {addClass}
     */
     function addClass(obj){
        var className=this.element.className;
        //如果不存在，则设置
         if(className==''||className==undefined||className==null){
             this.element.className+=obj;
             return this;
         }else if(className==' '){     //如果里面有空格，则将空格删掉,然后再添加
             this.element.className='';
             this.element.className+=obj;
             return this;
         }else{     //这里是进行字符串拼接
             this.element.className+=' '+obj;
             return this;
         }
     }

    /**
     * 移除class样式
     * @param obj
     * @returns {removeClass}
     */
     function removeClass(obj){
         //正则表达式字符串拼接
         eval('var aa=/\x20?'+obj+'\x20?/;');
         this.element.className=this.element.className.replace(aa,'');
         return this;
     }

    /**
     * 获取class样式
     * @returns {string}
     */
     function getClass(){
         return this.element.getAttribute('class');
     }

  </script>
</html>

获取html文本

$('anchor').getHtml();
"这里是div中显示的内容zhangsan zhangsan lisi"

设置html文本

$('anchor').setHtml('wangwu').getHtml();
"wangwu"

获取name属性

$('anchor').getName();
"divName"

设置name属性

$('anchor').setName('aa').getName();
"aa"

获取value属性

$('anchor').getValue();
"divValue"

设置value属性

$('anchor').setValue('aaValue').getValue();
"aaValue"

获取class属性

$('anchor').getClass();
""

添加class属性

$('anchor').addClass('hide').getClass();
"hide"

移除class属性

$('anchor').addClass('on').addClass('on2').removeClass('hide').getClass();
"on on2"

在此过程中,我们可以明显的看到页面中显示内容的变化,无论是div文本内容的替换还是class样式的添加与移除操作,在此我就不一一上图了.

通过上面的操作,我们发现我们所封装的代码像极了jQuery,其实jQuery的编程主要的就是采用这种方式,而其编程思想,我们就用jQuery的原话来说吧,那就是:"write less do more",翻译过来就是写得更少,做得更多.这也就是为什么jQuery反倒比JavaScript更加流行,用途更加广泛.

张侦毅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的封装与链式调用

原生的JavaScript操作,不仅仅代码长,而且还不容易记忆和使用,采用对原生的JavaScript代码进行封装,采用编程中主流的面向对象的思维,即在方法中尽量采用属性式的操作(get/set操作),这样我们不仅仅可以简化代码操作量,更加容易记忆,同时也就更加的利于使用,同时我们还可以很轻松的使用我们封装的相关代码采用链式调用来处理各种繁杂的操作.
复制链接

扫一扫

专栏目录