如何访问javascript文件中的函数？
Posted
技术标签:
【中文标题】如何访问javascript文件中的函数？【英文标题】：how to access a function inside the javascript file? 【发布时间】：2011-01-28 10:13:01 【问题描述】：我正在尝试访问js 文件中的一个函数，如果单击了一个按钮，如何访问它？
这是我的html 以及js 文件的代码。
HTML：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Picker</title>
<link rel="stylesheet" href="resources\css\sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="scripts\ext-touch.js"></script>
<script type="text/javascript" src="scripts\Stocking.js"></script>
<script type="text/javascript" src="scripts\Stockslot.js"></script>
<script type="text/javascript" src="scripts\Datafile.js"></script>
<script type="text/javascript" src="scripts\index.js"></script>
</head>
<body style="margin:0px; padding:0px;">
<script>
function xyz()
alert("1");
Stocking.onShakeTap();
alert("2");
</script>
<button onClick="xyz();">
<table bgcolor="#000000" cellpadding="0px" cellspacing="0px">
<tr>
<td>
</td>
</tr>
</table>
</button>
</body>
</html>
Stocking.js：
var addres,
yem,
bro,
pro = 0;
Ext.Stocker = Ext.extend(Ext.Sheet,
cmpCls: 'x-picker',
centered: false,
floating: true,
modal: false,
hideOnMaskTap: false,
draggable: false,
monitorOrientation: true,
hidden: true,
arrive: 'center',
depart: 'bottom',
arrivalEffect: 'pop',
departEffect: 'slide',
height: window.innerHeight / 2,
width: window.innerWidth,
stretchX: true,
stretchY: false,
hideOnMaskTap: false,
showDoneButton: false,
useTitles: false,
defaultType: 'stockslot',
initComponent: function()
this.layout =
type: 'hbox',
align: 'stretch',
pack: 'start'
;
if (this.slots)
this.items = this.items ? (Ext.isArray(this.items) ? this.items : [this.items]) : [];
this.items = this.items.concat(this.slots);
if (this.useTitles)
this.defaults = Ext.applyIf(this.defaults || ,
title: ''
);
this.on('slotpick', this.onSlotPick, this);
this.addEvents('pick', 'change');
Ext.Stocker.superclass.initComponent.call(this);
,
onSlotPick: function(slot, value, node)
this.fireEvent('pick', this, this.getValue(), slot);
return false;
,
onShakeTap: function()
alert();
var rand = 0;
addres = 0;
rand = Math.round(Math.random(4) * 5);
this.fireEvent('pick', this, this.getValue(rand));
,
setValue: function(values, animated)
var key, slot,
items = this.items.items,
ln = items.length;
if (!values)
for (i = 0; i < ln; i++)
items[i].setValue(0);
return this;
for (key in values)
slot = this.child('[name=' + key + ']');
if (slot)
slot.setValue(values[key], animated);
return this;
,
orient: function(orientation, w, h)
if (!this.container || this.centered || !this.floating)
return this;
var me = this,
cfg = me.initialConfig || ,
size =
width: cfg.width,
height: cfg.height
,
pos =
x: cfg.x,
y: cfg.y
,
box = me.el.getPageBox(),
pageBox, scrollTop = 0;
if (me.container.dom == document.body)
pageBox =
width: window.innerWidth,
height: window.innerHeight
;
scrollTop = document.body.scrollTop;
else
pageBox = me.container.getPageBox();
pageBox.centerY = pageBox.height / 2;
pageBox.centerX = pageBox.width / 2;
if (pos.x != undefined || pos.y != undefined)
pos.x = pos.x || 0;
pos.y = pos.y || 0;
else
if (/^(bottom|top)/i.test(me.arrive))
size.width = me.stretchX ? pageBox.width : Math.min(200, Math.max(size.width || box.width || pageBox.width, pageBox.width));
size.height = Math.min(size.height || 0, pageBox.height) || undefined;
size = me.setSize(size).getSize();
pos.x = pageBox.centerX - size.width / 2;
pos.y = me.arrive == 'top' ? 0 : pageBox.height - size.height + scrollTop;
else if (/^(left|right)/i.test(me.arrive))
size.height = me.stretchY ? pageBox.height : Math.min(200, Math.max(size.height || box.height || pageBox.height, pageBox.height));
size.width = Math.min(size.width || 0, pageBox.width) || undefined;
size = me.setSize(size).getSize();
pos.y = 0;
pos.x = me.arrive == 'left' ? 0 : pageBox.width - size.width;
else
size.height = pageBox.height / 2;
size.width = pageBox.width;
size = me.setSize(size).getSize();
me.setPosition(pos);
return this;
,
getValue: function(loc)
var value = ,
items = this.items.items,
ln = items.length,
itemtest, i;
for (i = 0; i < ln; i++)
itemtest = items[i];
value[itemtest.name] = itemtest.getValue(loc);
return value;
);
Ext.regModel('x-textvalue',
fields: ['text', 'value']
);
我想从索引页面访问stocking.js 文件中的onShakeTap() 函数。
这是一些额外的数据：
我实际上将 Ext.stocker 扩展到 Ext.stockpicker，代码如下：
Ext.StockPicker = Ext.extend(Ext.Stocker,
slotOrder: ['valuess', 'pointss', 'stockss'],
initComponent: function()
this.slots = [];
Ext.each(this.slotOrder, function(item)
this.slots.push(this.createSlot(item, values, stocks, points));
, this);
Ext.StockPicker.superclass.initComponent.call(this);
,
stretchX: true,
createSlot: function(name, values, stocks, points)
switch (name)
case 'pointss':
return
name: 'Points',
align: 'left',
layout: 'fit',
data: points,
title: '<span style="font-weight: bold;font-size:20px;">Events</b>',
flex: 2
;
case 'stockss':
return
name: 'Stocks Available',
align: 'left',
data: stocks,
layout: 'fit',
title: '<span style="font-weight: bold;font-size:20px;">Price</b>',
flex: 1
;
case 'valuess':
return
name: 'Value',
align: 'left',
data: values,
layout: 'fit',
title: '<span style="font-weight: bold;font-size:20px;">Trading style</b>',
flex: 2
;
);
我在这里创建了一个实例
var stockpicker = new Ext.StockPicker();
当我使用 stockpicker.onShakeTap(); 时，我可以根据需要操作数据，但是我在我的 html 页面中使用相同的 stockpicker.onShakeTap(); 时它不起作用。
请帮忙。
【问题讨论】：
【参考方案1】：我会尝试类似的东西
var myStock = new Ext.Stocker();
myStock.onShakeTap();
onShakeTap() 被定义为 Ext.Stocker 类的方法。我假设它应该是一个成员方法，而不是静态的，所以你首先需要创建一个 Ext.Stocker 的实例。
【讨论】：
谢谢..它现在可以访问该功能，但它没有返回预期的结果.....可能是由于您刚刚给出的原因...我如何创建它的实例......请原谅我的无知，我只是一个初学者...... 没问题，在 JS 中使用 Ext 中的类就像在玩肥皂 imo。 stocking.js 中以“Ext.Stocker = Ext.extend(Ext.Sheet, ”开头的大块定义了名为“Ext.Stocker”的类。在您的页面中，行“var myStock = new Ext.Stocker() ;" 创建名为“Ext.Stocker”的类的实例，名为“myStock” 问题是在做 var myStock = new Ext.Stocker();它正在创建一个新实例并访问该函数，所以我没有得到想要的结果。我想要的是访问当前实例，以便我可以将功能应用于我拥有的当前数据...... 您是否尝试过将当前位于 .js 文件中的实例声明和操作移到 HTML 中？【参考方案2】：借鉴马特的回答/cmets：
当页面第一次加载时，简单地声明一个类是什么并不会创建它的实例。一开始，没有实例；这只是一套规则，没有什么可遵循的。使用 mystock = new Ext.Stocker(); 创建对象 Ext.Stocker 后，将创建实例并且您有一个对象来遵循 Ext.Stocker 中定义的规则。
函数 xyz() 警报（1）； var myStock = new Ext.Stocker(); myStock.onShakeTap(); 警报（2）；
【讨论】：
以上是关于如何访问javascript文件中的函数？的主要内容，如果未能解决你的问题，请参考以下文章
如何访问 symfony2 中另一个 html.twig 文件中的 javascript 函数？