在HTML页面中使用javascript var函数

时间:2019-01-11 16:20:44

标签: javascript jquery

我正在尝试使用存储在主html文档中的.js文件中的变量函数。 示例:test.js

var test = { 
    add_filter : function(name, callback, priority) {
        if (priority === undefined)
            priority = 10;

        if (this.filters[priority] === undefined)
            this.filters[priority] = {};

        if (this.filters[priority][name] === undefined)
            this.filters[priority][name] = [];

        if (typeof callback == 'function')
            this.filters[priority][name].push(callback);

    },
 ...other functions
 };
 test.load();
export {test}; //also try to import in main html document(see below)

如果我想调用我已经尝试过的主要html文档中的add_filter函数

$(window).on('load',function() {
$("#button_filter").click(function(){
     import {test} from 'link'; //don't work
     var test {}; //don't work
     window.test.add_filter(name, callback, priority); //don't work
     window['add_filter'](); //don't work
});
});

我还检查了文件.js在此代码开始执行之前已加载(单击按钮以执行);

这是我的HTML文档

<?php
global $myclass;
require_once(PATH.OF.EXTENDED.CLASS);
if($myclass->is_app()){

?>              lang('Initializing'); ?> ..“>                              display('nav'); ?>                          

            <?php $myclass->display('left'); ?>
            <div id="test-top-tools" data-navigation="" data-view="standard">
                <?php $myclass->display('tool'); ?>
            </div>

            <div id="test-main">
                <div id="test-no-product">
                    <?php
                        if (!isset($_GET['product'])) {
                            echo '<p>'.$myclass->lang('Please select a product to start designing').'</p>';
                        }else if (isset($_GET['product']) && $myclass->cfg->product === null) {
                            echo '<p>'.$myclass->lang('Sorry, the product you selected is not available!').'</p>';
                        }
                    ?>
                    <button class="test-btn" id="test-select-product">
                        <i class="testx-android-apps"></i> <?php echo $myclass->lang('Select product'); ?>
                    </button>
                </div>
            </div>
            <div id="nav-bottom-left">
                <div data-nav="colors" id="test-count-colors" title="<?php echo $myclass->lang('Count colors'); ?>">
                    <i>0+</i>
                </div>
            </div>
            <div id="test-zoom-wrp">
                <i class="testx-android-remove" data-zoom="out"></i>
                <span><?php echo $myclass->lang('Scroll to zoom'); ?></span>
                <inp data-range="helper" data-value="100%">
                    <input type="range" id="test-zoom" data-value="100%" min="100" max="250" value="100" />
                </inp>
                <i class="testx-android-add" data-zoom="in"></i>
            </div>
            <div id="test-zoom-thumbn">
                <span></span>
            </div>
            <div id="test-stage-nav">
                <ul></ul>
            </div>
            <div id="test-notices"></div>
        </div>
    </div>
</div>
<script>
    function testDesign (test) {

        test.data = {
            version: "<?php echo test; ?>",
            theme_color: "<?php echo explode('@', explode(':', $myclass->cfg->settings['colors'])[0])[0]; ?>",
            stages : {},
            currency : "<?php echo $myclass->cfg->settings['currency']; ?>",
            switch_lang : <?php echo $myclass->cfg->settings['allow_select_lang']; ?>,
            thousand_separator : "<?php echo isset($myclass->cfg->settings['thousand_separator'])? $myclass->cfg->settings['thousand_separator'] : ','; ?>",
            decimal_separator : "<?php echo isset($myclass->cfg->settings['decimal_separator'])? $myclass->cfg->settings['decimal_separator'] : '.'; ?>",
            number_decimals : "<?php echo isset($myclass->cfg->settings['number_decimals'])? $myclass->cfg->settings['number_decimals'] : 2; ?>",
            currency_position : "<?php echo $myclass->cfg->settings['currency_position']; ?>",
            min_upload: <?php echo isset($myclass->cfg->settings['min_upload'])? (int)$myclass->cfg->settings['min_upload'] : 0; ?>,
            max_upload: <?php echo isset($myclass->cfg->settings['max_upload'])? (int)$myclass->cfg->settings['max_upload'] : 0; ?>,
            min_dimensions: <?php echo isset($myclass->cfg->settings['min_dimensions']) ? json_encode(explode('x', $myclass->cfg->settings['min_dimensions'])) : ''; ?>,
            max_dimensions: <?php echo isset($myclass->cfg->settings['max_dimensions']) ? json_encode(explode('x', $myclass->cfg->settings['max_dimensions'])) : ''; ?>,
            min_ppi: '<?php echo isset($myclass->cfg->settings['min_ppi']) ? $myclass->cfg->settings['min_ppi'] : ''; ?>',
            max_ppi: '<?php echo isset($myclass->cfg->settings['max_ppi']) ? $myclass->cfg->settings['max_ppi'] : ''; ?>',
            printings : [],
            url : "<?php echo $myclass->cfg->url; ?>",
            tool_url : "<?php echo $myclass->cfg->tool_url; ?>",
            upload_url : "<?php echo $myclass->cfg->upload_url; ?>",
            checkout_url : "<?php echo $myclass->cfg->checkout_url; ?>",
            ajax : "<?php echo $myclass->cfg->ajax_url; ?>",
            assets : "<?php echo $myclass->cfg->assets_url; ?>",
            jquery : "<?php echo $myclass->cfg->load_jquery; ?>",
            nonce : "<?php echo test_secure::create_nonce('test-SECURITY'); ?>",
            access_core : "<?php echo is_array($myclass->cfg->access_core) ? implode(',', $myclass->cfg->access_core) : $myclass->cfg->access_core; ?>",
            editing: localStorage.getItem('test-EDITING'),
            design : "<?php echo $myclass->esc('design_print'); ?>",
            product : "<?php echo $myclass->esc('product'); ?>",
            default_fonts: <?php echo !empty($myclass->cfg->default_fonts) ? stripslashes($myclass->cfg->default_fonts) : '{}'; ?>,
            fonts: <?php echo json_encode($myclass->get_fonts()); ?>,
            js_lang : <?php echo json_encode($myclass->cfg->js_lang); ?>,
            rtl : '<?php echo $myclass->cfg->settings['rtl']; ?>',
            prefix_file : '<?php echo urlencode($myclass->cfg->settings['prefix_file']); ?>',
            text_direction : '<?php echo $myclass->cfg->settings['text_direction']; ?>',
            conditions : '<?php echo (isset($myclass->cfg->settings['conditions']) && !empty($myclass->cfg->settings['conditions'])) ? $myclass->lib->enjson($myclass->cfg->settings['conditions']) : ''; ?>',
            size_default : <?php echo json_encode($myclass->cfg->size_default); ?>,
            print_types : <?php 
                echo json_encode($myclass->lib->get_print_types());
                echo $myclass->lib->product_cfg();
            ?>
        };

        try {
            test.attributes_cfg = <?php echo json_encode($myclass->cfg->product_attributes); ?>;
        } catch (ex) {
            test.attributes_cfg = {};
            alert("<?php echo $myclass->lang('Error: configure the attributes of product'); ?>\n\n"+ex.message);
        }

        var real_uri = window.location.href.split('?'),
            reg_uri = test.data.tool_url.split('?');

        if (real_uri[0] != reg_uri[0]) {
            if (real_uri[1] !== undefined)
                window.location = reg_uri[0]+'?'+real_uri[1];
            else window.location = reg_uri[0];
            return false;
        } else {
            <?php $myclass->do_action('js_init'); ?>
            return true;
        }

    };
</script>
<?php if ($myclass->cfg->load_jquery){ ?>
<script src="./assets/js/jquery.min.js"></script>
<?php } ?>
<script src="./assets/js/vendors.js"></script>
<!-- EHERE IS STORED MY JS TEST FUNCTION -->
<script src="./assets/js/app-test.js"></script>
<script>
    $(window).on('load',function() {
         window.test.add_filter(name, callback, priority);
    });
</script>

1 个答案:

答案 0 :(得分:-1)

更改

window.test.add_filter(name, callback, priority); //don't work


test.add_filter(name, callback, priority);

因为除非分配测试,否则它不是window的属性。