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 replace方法去空格
May 08 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jquery实现广告上下滚动效果
Mar 04 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
php生成excel列序号代码实例
2013/12/24 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php导入模块文件分享
2015/03/17 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
现金会计岗位职责
2013/12/05 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年财政局工作总结
2015/05/21 职场文书
捐书仪式主持词
2015/07/04 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
2019同学聚会主持词
2019/05/06 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers