1、首先需要新建HTML文件。
2、然后创建按钮。
3、之后需要用js定义函数。
4、接下来设置需要进行设置的函数内容。
5、按钮添加点击事件调用函数并设置函数的参数。
6、最后的预览效果如图，顺利调用外部的JS。
代码如下:
function a(callback){
alert('a');
callbackcall(this);//或者是 callback（）, callbackapply(this),看个人喜好
}
function b(){
alert('b');
}
//调用
a(b);
这样的结果是先d出 'a'，再d出‘b'。这样估计会有人问了“写这样的代码有什么意思呢？好像没太大的作用呢！”
是的，其实我也觉得这样写没啥意思，“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子，做初步的理解。真正写代码的过程中很少用这样无参数的，因为在大部分场景中，我们要传递参数。来个带参数的：
复制代码 代码如下:
function c(callback){
alert('c');
callbackcall(this,'d');
}
//调用
c(function(e){
alert(e);
});
这个调用看起来是不是似曾相识，这里e参数被赋值为'd'，我们只是简单的赋值为字符窜，其实也可以赋值为对象。Jquery里面是不是也有个e参数，下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。
Jquery框架我想大家不陌生了，出来了好久，开发的时候都在用，比较简单，api网上搜起来很方便，上手快。在Jquery框架下，我们有时候要获取事件中的一些参数，比如我要获取当前点击的坐标，点击的元素对象。这个需求在Jquery里面好办 ：
复制代码 代码如下:
$("#id")bind('click',function(e){
//epageX ,epageY ,etarget各种数据
});
用起来倒是挺方便，其实这个e参数的赋值也是通过回调函数来实现的，这个参数是用回调参数给它赋予了一个对象值，仔细研究过JJquery源码的朋友应该发现了这一点。
还有Ajax里面 $get('',{},function(data){}) data这个参数也是同样的原理。
我们来看看Jquery事件对象里面是怎么应用回调函数的。
为了方便，我简单的写了一下$相关的一些实现，之前写过“小谈Jquery”里面有比较接近框架实现的方法，我下面只是写一个简易的选择器。
复制代码 代码如下:
<div id="container" style="width:200px;height:200px;background-Color:green;">
< /div>
< script>
var _$=function (id)
{
thiselement= documentgetElementById(id);
}
_$prototype={
bind:function(evt,callback)
{
var that=this;
if(documentaddEventListener)
{
thiselementaddEventListener(evt, function(e){
callbackcall(this,thatstandadize(e));
} ,false);
}
else if(documentattachEvent)
{
thiselementattachEvent('on'+evt,function(e){
callbackcall(this,thatstandadize(e));
});
}
else
thiselement['on'+evt]=function(e){
callbackcall(this,thatstandadize(e));
};
},
standadize:function(e){
var evt=e||windowevent;
var pageX,pageY,layerX,layerY;
//pageX 横坐标 pageY纵坐标 layerX点击处位于元素的横坐标 layerY点击处位于元素的纵坐标
if(evtpageX)
{
pageX=evtpageX;
pageY=evtpageY;
}
else
{
pageX=documentbodyscrollLeft+evtclientX-documentbodyclientLeft;
pageY=documentbodyscrollTop+evtclientY-documentbodyclientLTop;
}
if(evtlayerX)
{
layerX=evtlayerX;
layerY=evtlayerY;
}
else
{
layerX=evtoffsetX;
layerXY=evtoffsetY;
}
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
}
}
window$=function(id)
{
return new _$(id);
}
$('container')bind('click',function(e){
alert(epageX);
});
$('container1')bind('click',function(e){
alert(epageX);
});
< /script>
这段代码我们主要看standadize函数的实现，兼容性的代码，就不多说了，返回的是一个对象
复制代码 代码如下:
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函数里面的代码 callbackcall(this,thatstandadize(e))，这段代码其实就是给e参数赋值了，是用callback回调实现的。
callback 函数被调用的时候传入的是匿名函数
复制代码 代码如下:
function(e){
}
而callbackcall(this,thatstandadize(e))相当于是执行了这么一段代码
复制代码 代码如下:
(function(e){
})(standadize(e))
这也是Jquery用回调函数比较经典的地方，e参数就是这么被赋值的，说了这些你们也大概有个了解了，以及怎么使用了。
回调在各种框架中应用的比较多，有时候自己写一些东西的时候也可以根据实际情况用用看。
Immediately-Invoked Function Expression(IIFE立即执行函数表达式)
可以让函数在创建后立即执行 必须是一个表达式
1、函数的定义方式一: 函数声明
2、函数的定义方式二: 函数表达式(匿名函数表达式、命名函数表达式)
1、错误写法 直接报错 js引擎看到function关键字会认定后面跟的是函数定义语句，此时后面如果直接加上()会被当做分组 *** 作符，而分组 *** 作符必须有表达式,所以此时报错
2、立即执行函数的正确写法,让js引擎认为这是一个表达式
1、立即执行函数不能再外面再被调用，执行完之后已经被立即销毁了。所以立即执行函数的函数名称可以省略， 统一使用匿名函数表达式
2、由于立即执行函数，执行完后就立即被销毁了 所以它可以创建一个独立的作用域，而且该作用域里面的变量，外面访问不到。因此就可以避免变量污染
正确输出写法：用立即执行函数将i作为参数传入，立即函数每次执行时，会把参数i的值复制一份。然后再创建函数作用域来执行函数
1、立即执行函数和闭包只是有一个共同有点就是都能减少全局变量的使用
2、立即执行函数只是函数的一种调用方式，声明完后立即调用，一般只能调用一次，调用完后会立即被销毁，不会占用内存，有自己的独立作用域，外部不能调用
3、闭包则主要是让外部函数可以访问内部函数的作用域，也减少了全局变量的使用，保证了内部变量的安全，但是被引用的内部变量不会被销毁，增大了内存消耗，使用不当会容易造成内存泄露
可参考： >
在JS的 function函数中定义一个变量 比如name,
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('您好！')" value="调用函数">
</form>
<p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。</p>
</body>
</html>
js对于函数的定义是非常松，即使你在函数定义时未写任何参数，或者你定义的参数有多个，但是你调用时，一个参数也不填，也不会出错的。
因为js函数内默认有个变量，保存你的入参叫：arguments，
他是一个数组，下标从0开始，
所以获取event可以写成
function eventTest(){
var event = windowevent||arguments[0];
//target 就是这个对象
target = eventsrcElement||eventtarget,
//这个对象的值
targetValue = targetvalue;
}
1
2
3
4
5
6
7
1
2
3
4
5
6
7
当然，有的时候需要给函数传入几个参数，这时如果要用想用到event的话可以这么写
function eventTest(a,b){
var event = windowevent || argumentscalleecallerarguments[0]
//target 就是这个对象
target = eventsrcElement||eventtarget,
//这个对象的值
targetValue = targetvalue;
}
1
2
3
4
5
6
7
1
2
3
4
5
6
7
如果传入了参数却如第一种写法的话，则arguments中将会传入传入的参数，这时获取的arguments[0]就会是第一个传入的参数了。
鉴于此，故还是都用第二中方法获取更为稳妥。
以上就是关于Js怎么调用外部Js全部的内容，包括:Js怎么调用外部Js、js怎样获取调用回调函数的参数值、JS函数之---立即执行函数（IIFE）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）