我们通常将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扩展方法的基本形式:

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

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

示例:

(function () {

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

调用:

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

在页面加载完成后,通过调用$.meMethod()jQuery.myMethod()来执行init函数

js自执行函数&扩展方法的更多相关文章

  1. js 立即执行函数定义方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  3. JS 自执行函数

    由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧. js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: fu ...

  4. js立即执行函数

    一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号   (function(){alert(1);})(); ...

  5. 模板语言变量,js变量,js自执行函数之前嵌套调用

    1.模板语言变量 前端html页面中展示 {{ nodeIp }} 2.js变量引用模板语言变量 把模板语言变量传递给js,js去执行页面操作(变量的转换,只适用于字符串) var IP = &quo ...

  6. js立即执行函数用法

    js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行 ...

  7. js自执行函数的常见写法

    js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...

  8. js立即执行函数应用--事件绑定

    js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...

  9. Ajax:js自执行函数、jsonp、cros

    一.js自执行函数 #(function(){alert(1);})(); (function(){ alert(1); } )(); 二.javascript同源策略 1. 什么是同源策略 理解跨域 ...

随机推荐

  1. 一个简单的flask应用

    一个简单的flask应用,文件名hello.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_wor ...

  2. json字符串和json对象的转换

    http://www.json.org/提供了一个json2.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法: parse用于从一个 ...

  3. Android 界面滑动卡顿分析与解决方案(入门)

    Android 界面滑动卡顿分析与解决方案(入门) 导致Android界面滑动卡顿主要有两个原因: 1.UI线程(main)有耗时操作 2.视图渲染时间过长,导致卡顿 目前只讲第1点,第二点相对比较复 ...

  4. python中pip工具的安装与使用

    1.在网址https://pip.pypa.io/en/latest/installing 下载get-pip.py文件,放在python更目录,如python3.6目录下 2.在dos命令行中进入g ...

  5. 巨蟒python全栈开发-第12天 生成器函数 各种推导式 yield from

    一.今日主要内容总览(重点) 1.生成器(目的:帮助我们创建对象) (1)生成器的本质就是迭代器 (2)一个一个的创建对象 (3)创建生成器的方式: 1.生成器函数 2.通过生成器表达式来获取生成器 ...

  6. CentOS安装Apache-2.4.25+安全配置

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 在安装Nginx之前,请确保已经使用yum安装了各基础组件,并且配置了www用户和用户组,具体见<CentOS ...

  7. 模块 - json/pickle/shelve/xml/configparser

    序列化: 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes. 为什么要序列化: 有种办法可以直接把内存数据(eg:10个列表,3 ...

  8. 如何编译部署 UIKit 离线文档?

    如何编译部署 UIKit 离线文档? Whis is UIKit? Note:部署在 Windows 系统会出现路径错误情况,这里采用在 Debian 系统上进行编译和部署. 1. 安装一些前置工具 ...

  9. 解决:IDEA unable to import maven project see logs for details问题+java http请求报java.net.SocketException: Permission denied:connect 问题

    背景:用IDEA写了一个java发送http请求的maven项目. 运行时,项目报java.net.SocketException: Permission denied:connect问题: 修改po ...

  10. c#与lua交互里,错误处理

    如果是c#代码出错了 [MonoPInvokeCallbackAttribute(typeof(LuaCSFunction))] static int _g_get_down(RealStatePtr ...