Question

我正在尝试将RequireJS和SVG.JS一起使用（我碰巧也在使用Flask，但这对于这个bug应该没关系）。我收到了这个错误：

Uncaught SyntaxError: Unexpected identifier

错误指向看起来像这样的代码（这似乎是由Require或SVG以某种方式生成的）。在VM4803:2我相信是由Chrome的JS引擎生成的。

(function() {
   [object SVGSVGElement]
})

显然这不是有效的代码。我在几个文件中写的代码如下。

的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
    <title>MCB</title>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
var staticJSURL = "{{ url_for('static',filename='js') }}";
</script>
<script data-main="{{ url_for('static',filename='js/app') }}" src="{{ url_for('static', filename='js/lib/require.js') }}"></script>
</body>
</html>

app.js

requirejs.config({
    baseUrl: staticJSURL + '/lib/',
    paths: {
        app: staticJSURL + "/app/",
        svg: staticJSURL + "/lib/svg",
        "svg-grid" : staticJSURL + "/app/helpers/grid"  
    },
    shim: {
        svg: {
            exports: 'SVG'
        },
            'svg-grid': {
                deps: ['svg']
        }
    }
});


requirejs(['app/main']);

main.js

define(['svg','svg-grid'],function (require,grid) {

    var canvasSize = {
        width: window.innerWidth - 16,
        height: window.innerHeight - 16
    }
    var draw = SVG('canvas').size(canvasSize.width,canvasSize.height);
    draw.rect(canvasSize.width,canvasSize.height)
    .stroke({
        width: 1,
        color: "#000"
    })
    .fill({
        color: "#FFF"
    });

    SVG.Grid('100%').start();

});

grid.js

SVG.Grid = function(width, height, cellSize){
    console.log("grid init",width,height,cellSize);
    this.constructor.call(this, SVG.create('svg'));
    this.viewbox(0, 0, 100, 100);
    this.update(0);
}

SVG.Grid.prototype = new SVG.Container;

SVG.extend(SVG.Grid, {
    draw: function() {
        console.log("Draw")
    }

});

SVG.extend(SVG.Container, {
    Grid: function(width, height, cellSize){
        return this.put(new SVG.Grid(size));
    }
});

我的目标是让这些文件一起工作而不会出错。基本上我试图用svg js设置requirejs结构。我知道这不是一个有效的网格，并没有显示太多，但我不明白如何摆脱该错误。我尝试了在配置中删除不同内容的各种变体。我确信找到了所有文件，因为Chrome中的网络标签显示了所有文件的200状态。

为了完整起见，这是我的app.py，烧瓶正在运行以显示index.html文件。

from flask import Flask, render_template
app = Flask(__name__)
app.debug = True

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

未捕获的SyntaxError：意外的标识符RequireJS和SVGJS

0 个答案: