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
函数
JavaScript 自执行函数和 jQuery扩展方法相关推荐
- JavaScript立即执行函数报错--立即执行函数原理分析
JavaScript立即执行函数报错 1.'()'在JavaScript环境中有提升运算符优先级和执行函数的作用如果直接在JavaScript环境中执行'()',环境会报出语法错误提示. 2.'()' ...
- JavaScript自执行函数,自执行函数是什么,存在的意义?
JavaScript自执行函数 1.自执行函数是什么 2.自执行函数存在的意义 2.1封装 3.自执行函数两种常见的的写法 3.1自执行函数的第一种写法 3.2自执行函数的第二种写法 4.自执行函数的 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- jquery扩展方法
jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法. jQuery的全局函数就是属于jquery命名空间的函数,另一种是对象级 ...
- JavaScript 自执行函数剖析
回想一下,我们平时写的一些具名函数(也就是区别于匿名函数的函数),如下面一个例子: 1 function sayHello(){ 2 console.log("hello,我是林丽君&quo ...
- javascript自执行函数
概述 自执行函数又被称为立即调用函数,顾名思义,就是可以函数声明后可以立即被执行,我们在读常用js库(如jquery)源码时,经常会发现自执行函数的身影,下面说下我的理解. 写法 自执行函数有两种写法 ...
- Javascript 自执行函数
前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫 ...
- Javascript 立即执行函数
http://weizhifeng.net/immediately-invoked-function-expression.html var f1 = function() {var res = [] ...
- JavaScript 立即执行函数的两种写法
(function(str){console.log(str+'欢迎你~');})('行步至春深');(function(str) {console.log(str+'欢迎你~');}('行路易知难' ...
最新文章
- asp.net程序性能优化的七个方面
- 16年寒假随笔(4)
- 第一行代码学习笔记第十章——探究服务
- 清华大学计算机系毕业季博论 | 预荐未来的自己
- ubuntu 命令卡住_解决出现无法使用sudo命令情况
- 为什么“三次握手,四次挥手”?
- excel查重_发票查重工具,不止查重这么简单,你还可以体验这些新玩法
- python数据挖掘分析案例python_Python 数据挖掘实例 决策树分析
- codeforces 679A Bear and Prime 100 交互
- FileTracker:error FTK1011编译错误的原因和解决办法
- Python面向对象编程案例:封装数据库增删改查操作
- Tokenisation word segmentation sentence segmentation
- eclipse远程调试liunx下的tomcat
- linux应用程序开发指南-开发工具介绍
- 秒杀系统设计的关键点思考
- matlab电磁场与微波技术相关仿真的代码,几乎覆盖电磁和微波领域
- 吉他入门教程之吉他音阶训练——运用方法
- 程序员如何告别肩颈疲劳
- JS中alert的三种使用方式
- 官宣,北京杜绝现场复试!清华等全国多地高校确定将网络远程复试
热门文章
- 2-6:C++快速入门之内联函数,auto关键字,C++11基于范围的for循环和nullptr
- close on exec标志位
- 浅析 Linux 初始化 init 系统,第 2 部分: UpStart
- 图像的通道(channels)问题
- QT 线程池 + TCP 小试(一)线程池的简单实现
- PCI总线的含义是什么?PCI总线的主要特点是什么?
- 基于Given变换的QR分解辨析
- http dns django
- 141.Linked List Cycle
- 三层架构 android访问MSSQL数据库 程序 (服务器端)