zoukankan      html  css  js  c++  java
  • JavaScript自执行函数和jquery扩展方法

      我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件。但是,有时候引入后会碰到变量名或函数名与其它JS代码通途的问题。那么如何解决这个问题呢?作用域隔离。在JS中,作用域是通过函数来划分的,将JS代码封装到函数中进行调用可以笔记面变量名/函数名冲突的问题,但是这也并不是万无一失,因为封装函数本身有可能和其他函数重名,解决方案:自执行函数

      自执行函数是用一堆圆括号将匿名函数包起来,加括号(传参)会立即执行。因为函数无名字,实现了作用域的绝对隔离和函数名的冲突问题。基本形式如下:

    (function () {
        console.log(111);
    })();

      比如我们在nb-list.js文件中写了一些JS逻辑,并封装到函数init中。我们用自执行函数将自己定义的函数init包起来,就像下面这样。

    (function () {
    
        function init() {
            console.log('execute init...');
        }
    
        init();
    })();

      当我们在html中引入nb-list.js,自执行函数会立即执行,进而执行内部定义的init函数。

      但是由于自执行函数的特性,使其很难调用,所以我们需要jQuery扩展来给外部一个接口来调用这个自执行函数,把主动权掌握在自己手中。

      jQuery扩展方法的基本形式:

    jQuery.extend({
        'myMethod': function () {
            console.log(111);
        }
    });

      这样,通过$.myMethod()或者jQuery.myMethod()就可以调用上面定义的方法。

      定义jQuery扩展方法还有另一种方式:.fn

    jQuery.fn.extend({
        'myMethod': function () {
            console.log(111);
        }
    });

      通过.fn定义的扩展方法,需要通过jQuery选择器调用,比如通过标签选择器$("button").myMethod(args)

      下面我们把二者结合起来来调用自执行函数。

    (function (jq) {
    
        function init() {
            console.log(111);
        }
    
        jq.extend({
            'myMethod': function () {
                init();
            }
        })
    })(jQuery);

      说明,这个自执行函数接收jQuery对象作为参数,然后在内部为jQuery定义一个扩展方法myMethod,该方法执行真正的逻辑代码init函数

      使用:

    <script src="jquery-3.2.1.js"></script>
    <script src="nb-list.js"></script>
    <script>
    
      $(function () {
          $.myMethod();
      });
    
    </script>

      说明:

      1.jQuery文件引入后,jQuery对象全局可用。

      2.之后引入自定义的nb-list.js文件,其中的自执行函数接收jQuery对象为参数,立即执行,在内部为jQuery定以一个扩展方法myMethod

      3.最后我们就可以在页面加载完成之后调用myMethod函数来执行内部的自执行函数。

  • 相关阅读:
    MARK--2020年第一次事故
    MySQL MHA--基于Python实现GTID模式的主从切换
    MySQL Replication--复制延迟排查
    MySQL InnoDB Engine--多版本一致性视图(MVCC)
    MySQL InnoDB Engine--数据页存储和UPDATE操作 2
    MySQL InnoDB Engine--数据页存储和UPDATE操作
    Semantic UI基础使用教程
    sqlserver 批量修改数据库表主键名称为PK_表名
    navicate premium连接sqlserver时报08001错误的解决方法
    checklistbox的使用
  • 原文地址:https://www.cnblogs.com/78pikaqiu/p/7709869.html
Copyright © 2011-2022 走看看