JavaScript自执行函数和jQuery扩展方法详解

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

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

(function () {
  console.log('do something');
})();

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

(function () {

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

  init();
})();

当我们在html中引入custome.js：<script src="custome.js"></script>，自执行函数会立即执行，进而执行内部定义的init函数：

不过，自执行函数立即执行的特性，使其很难调用。通过定义jQuery扩展方法，可以解决这一问题，拿到自执行函数调用和执行的主动权。

首先我们看一下定义jQuery扩展方法的基本形式：

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

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

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

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

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

了解了JS自执行函数和jQuery扩展方法后，我们将二者结合起来。

下面我们利用自执行函数立即执行的特点，来定义jQuery扩展方法：

(function (jq) {

  function init() {
    console.log('do something');
  }

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

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

调用：

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

说明：

jQuery文件引入后，jQuery对象全局可用；
紧接着引入自定义JS文件custome.js，其中的自执行函数接收jQuery对象为参数，立即执行，在内部为jQuery定义一个扩展方法myMethod
然后我们就可以在页面加载完成后，通过调用$.meMethod()或jQuery.myMethod()来执行init函数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 编写js扩展方法判断一个数组中是否包含某个元素

    在C#语法中判断集合是否包含某个元素可以使用Contains方法,但是类似的问题在javascript中要怎么处理呢,js中没有Contains方法. 我们可以利用js的原型扩展来封装一个我们自己的Contains方法. js代码: 复制代码 代码如下: <script type="text/javascript"> $(function () { Array.prototype.contains = function (element) { //利用Array的原型pro

  • 浅析Javascript匿名函数与自执行函数

    函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 函数的定义,大致可分为三种方式: 第一种:这也是最常规的一种 function double(x){ return 2 * x; } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. var double = new Function('x', 'return 2 * x;'); 第三种: var double = function(

  • javascript自执行函数

    function (window, $, undefined) { play=function(){ $("#demo").val("This is a demo."); } window.wbLogin = play; })(window, jQuery); 像上边这样的代码为什么要把window, jQuery对象传进去? 为什么要传入 jQuery? 通过定义一个匿名函数,创建了一个"私有"的命名空间,该命名空间的变量和方法,不会破坏全局的

  • javascript String 的扩展方法集合

    //获取字符数组 String.prototype.ToCharArray=function() {          return this.split(""); } //获取N个相同的字符串 String.prototype.Repeat=function(num) {     var tmpArr=[];     for(var i=0;i<num;i++)    tmpArr.push(this);     return tmpArr.join("")

  • javascript中运用闭包和自执行函数解决大量的全局变量问题

    但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量同名.多个函数共用一个全局变量后的值的变换--等等.所以,有时候,对于一些简单的全局变量,我们可以通过另一种方式来处理--用自执行函数+闭包的方法来解: 比如:我们要在网页加载时给出一个提示,在网页关闭时给出另一个提示 下面的代码,实现了以上功能 复制代码 代码如下: var msg1 = "欢迎光临!"; // 定义一个全局变量 var msg2 = "再见!" //定了另一个全局变量 window

  • Javascript 日期对象Date扩展方法

    今天在网上摘抄了些js中操作日期的相关方法,现在与大家分享一下. 复制代码 代码如下: <script type="text/javascript"> Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth() + 1, //月份 "d+" : this.getDate(), //日 "h+" :

  • javascript自执行函数之伪命名空间封装法

    自执行函数:自动执行的函数.它在被解释时就已经在运行了.一般函数都是在被调用时才会执行的. 自执行函数的一般格式:(function() { 函数体 })(); 而且,自执行函数中一般都会有一个function() {}形式的匿名函数. 下面的代码在window对象中创建一个命名空间 mySpace,并把自执行函数中的方法封装在mySpace命名空间之下,以便于我们调用这个自执行函数中的一些功能. 复制代码 代码如下: (function() { //根据id获取对象 function $(id

  • js自执行函数的几种不同写法的比较

    经常需要一个函数自执行,可惜这一种写法是错的: 复制代码 代码如下: function(){alert(1);}(); 原因是前半段"function(){alert(1);}"被当成了函数声明,而不是一个函数表达式,从而让后面的"();"变得孤立,产生语法错. 按上面的分析,这一段代码虽说没有语法错,但也是不符合我们的预期的,因为这个函数并没有自执行. 复制代码 代码如下: function(){alert(1);}(1); 综上,症结在于,如何明确代码描述的是一

  • Js-$.extend扩展方法使方法参数更灵活

    Js-$.extend扩展方法使方法参数更灵活

    在做JS开发时,我们将第三方复杂的插件进行封装,然后对外公开一个很简单的方法接口,这是开发时常用的方法,在JS里,我们的方法参数通常使用JQ的$.extend 扩展方法来实现 复制代码 代码如下: function extend(arr) { arr = $.extend({ name: 'zzl', sex: 'male', age: 31 }, arr || {}); alert("[Name:]" + arr.name + "[Sex:]" + arr.sex

  • 扩展方法ToJSON() and ParseJSON()

    扩展方法ToJSON() and ParseJSON()

    使用例子:  复制代码 代码如下: protected void Page_Load(object sender, EventArgs e)       {           Person p = new Person           {               Name = "wuchang",               Email = "wuchangx@qq.com",               LastActive = DateTime.Now

随机推荐