简体   繁体   English

Jade:加载外部javascript和调用函数

[英]Jade: load external javascript and call function

I was learning Express/Node/Jade and now in the Jade file I want to include a javascript file from the public folder just for the page. 我正在学习Express / Node / Jade,现在在Jade文件中我想要包含公共文件夹中的javascript文件,仅用于页面。 For example, in jade file I type this: 例如,在jade文件中我输入:

script(src='/javascripts/test.js')

and inside test.js I have a function 和test.js里面我有一个功能

function check_test(){
    return "It's working!"
}

then I try to call the function in Jade by 然后我尝试在Jade中调用函数

- var test_response = check_test()

than I got the error saying that "undefined is not a function" and test.js isn't load at all. 比我得到的错误说“undefined不是一个函数”而test.js根本没有加载。 Apparently Jade doesn't load the file, they only transform into HTML code. 显然Jade没有加载文件,它们只转换成HTML代码。

I look someone else's question and this is the closest one I can found but it doesn't provide a clear answer of what to do. 我看了别人的问题,这是我能找到的最接近的问题,但它没有提供明确的答案。 In Jade, how can you call a function in an external Javascript 在Jade中,如何在外部Javascript中调用函数

So my question is: In this case what should I do to make it work? 所以我的问题是:在这种情况下,我应该怎么做才能使它工作?

I don't want to load the file in layout.js since I only want test.js only be use by this page. 我不想在layout.js中加载文件,因为我只希望test.js只能被这个页面使用。

Well... In the first instance, it is different what happens in the browser of what happens on the server. 嗯......首先,浏览器中发生的事情与服务器上发生的情况不同。 So Jade is a rendering of HTML, therefore if you are in the browser. 所以Jade是HTML的渲染,因此如果你在浏览器中。 It's what ExpressJS shipping, ie rendering Jade. 这就是ExpressJS的运输方式,即渲染Jade。 If you want to call, your HTML Javascript (Rendering of Jade), should show you where the Javascript. 如果你想打电话,你的HTML Javascript(Rending of Jade),应该会告诉你Javascript的位置。 For exmaple 例如

in Server.js 在Server.js中

// Get the Javascript in the browser
app.use("/javascripts", express.static("./outJavascripts"));
// Get the URL
app.all("/", function(req, res){
  // Render the Jade and Send for the client (Browser)
  req.render("myTemplate.jade");
});

In myTemplate.jade 在myTemplate.jade中

script(src='/javascripts/test.js')

In "./outJavascripts/test.js" 在“./outJavascripts/test.js”中

function check_test(){
    console.log("It's working! :D");
    return "It's working!";
}

If you do this, you will realize that it is run, the file "./outJavascripts/test.js" in the browser. 如果你这样做,你会发现它在浏览器中运行,文件“./outJavascripts/test.js”。 And the function "check_test" never run in the server. 并且函数“check_test”永远不会在服务器中运行。

Or put all folders in a common folder, for example public 或者将所有文件夹放在一个公共文件夹中,例如public

public -javascripts -stylesheets -images

and then expose that public folder 然后公开该公用文件夹

app.use(express.static(path.join(__dirname, 'public')));

which means you can 这意味着你可以

script(src='/javascripts/script.js') link(rel='stylesheet', href='/stylesheets/style.css')

Save your JS file and link it in your Jade file as: 保存您的JS文件并将其链接到您的Jade文件中:

script(src="filepath/yourJSfile.js")

Then call the function, I'm using a button here for example: 然后调用函数,我在这里使用一个按钮,例如:

button(class="btn", onclick='functionName()')

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM