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


Posted in jQuery onOctober 27, 2017

我们通常将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函数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
You might like
跟我学Laravel之请求与输入
2014/10/15 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
javascript新手语法小结
2008/06/15 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python如何查看微信消息撤回
2018/11/27 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
销售实习自我鉴定
2013/12/07 职场文书
历史系自荐信范文
2013/12/24 职场文书
商场总经理岗位职责
2014/02/03 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
学生不参加考试检讨书
2015/02/19 职场文书