如何访问JavaScript文件内的函数?

3

当点击按钮时,我想要访问js文件中的一个函数,如何访问?

这里是我的htmljs文件的代码。

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 height="1000px" width="2000px" 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();时,它无法工作。

请帮忙解决。

2个回答

0
我会尝试类似这样的东西
var myStock = new Ext.Stocker();
myStock.onShakeTap();

onShakeTap()被定义为Ext.Stocker类的一个方法。我假设它应该是一个成员方法,而不是静态方法,因此您首先需要创建一个Ext.Stocker实例。


谢谢,现在它能够访问该函数了,但是它没有返回期望的结果......可能是你刚才提到的原因......我该如何创建它的实例.....请原谅我的无知,我只是一个初学者.... - Prateek Raj
没问题,使用Ext中的JS类就像我个人认为的是肥皂游戏。在stocking.js中的大块代码以 "Ext.Stocker = Ext.extend(Ext.Sheet, {" 开始,定义了名为 'Ext.Stocker' 的类。在您的页面上,"var myStock = new Ext.Stocker();" 这一行创建了一个名为 'myStock' 的实例,它属于已知的 'Ext.Stocker' 类。 - Matt
问题在于执行 var myStock = new Ext.Stocker(); 时,它会创建一个新的实例并访问函数,因此我无法获得所需的结果。我想要的是访问当前实例,以便我可以将功能应用于我拥有的当前数据... - Prateek Raj
你尝试过将当前在.js文件中的实例声明和操作移动到HTML中吗? - mVChr

0

借鉴Matt的回答/评论:

当页面首次加载时,仅声明类并不会创建它的实例。在最开始时,没有实例;它只是一组规则,没有任何东西遵循。一旦你使用mystock = new Ext.Stocker();创建了对象Ext.Stocker,实例就被创建了,你就有了一个对象来遵循Ext.Stocker中定义的规则。

function xyz(){
alert(1);
var myStock = new Ext.Stocker();
myStock.onShakeTap();
alert(2);
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接