I am getting a variable X in my .pug file and I want to pass it to a separate JS file, how can I do this?
html
head
//Importing Javascript file
script(type='text/javascript')
include ../api/public/javascript/dashboard.js
//-=-=-=-=-=-=-=-=-=-=-=-
body
script.
var i = "#{variableX}"
I want to share this variable coming from the server with my JS file located in another folder, how can I do that?
This is not pug relevant now.
You could add the variable to the global window object, which all JS files would then have access to. Just note the sequence of initialization and loading of the JS files.
To be sure, you should only access them when everything is fully loaded.
pug file:
body
script.
window.myVaraibelX = "#{variableX}"
other js file:
console.log(window.myVaraibelX || 'not initialized yet');
other js file with window.onload:
window.onload = function () {
console.log(window.myVaraibelX);
}
Related
I want to send a = 5 to another js file and add them,the other file should have a type = "module" in it.
<script>
let a = 5;
// file 1
</script>
<script type="module">
console.log(a+5)
// file 2
// I need (type = "module") in file 2
</script>
Because modules run and load asynchronously, the non-module script will run first, which will make things a bit difficult. I'd put the non-module script in a separate file - this will allow you to use the defer attribute on its script tag (defer has no effect on inline scripts). Since deferred scripts run in the order in which they appear in the DOM, you can then have the module expose something globally, first, and then have the deferred non-module call that global function.
<script src="file-2.js" type="module"></script>
<script defer src="file-1.js"></script>
// file-2.js
window.doSomethingWithA = (a) => {
console.log(a);
}
// file-1.js
window.doSomethingWithA(5);
But a better approach would be to put all your scripts into modules - it'll make things a lot easier to manage when the code becomes of any reasonable size. It's also counter-productive for a module to make something global - one of the big selling points of modules is that they can be made to be completely self-contained.
Another approach, without relying on script order, would be to have the non-module script listen for a load event on the module script, then call the global function.
For this answer assume both the files are in the same folder:
Folder
|- firstFile.js
|- secondFile.js
add export in firstFile.js
//firstFile.js
export let a = 5;
and import in secondFile.js
//secondFile.js
import {a} from './firstFile.js'
console.log(a)
result:
5
I have these functions
function showNotification(response) {
notification.innerHTML = `${response.data}`
notification.style.display = 'block'
notification.classList.add('created-notification-animation')
}
function resetNotification() {
notification.style.display = 'none';
notification.classList.remove('created-notification-animation')
}
function clearInputValues() {
movieTitle.value = ''
movieRuntime.value = ''
movieIsAvailableOnVhs.value = ''
movieReleaseDate.value = ''
}
I want to use these functions for DRY coding, I have 2 scripts I want to use these functions in.
I have 2 different HTML files that are being used, one for each script.
One script is main.js that holds these functions and more code, in index.html.
The other script is movieList.js that holds a list of movies, but I want to use these functions in that script as well, this script is in movieList.html.
How can I access these functions in each script without having to copy and paste the functions to the other script?
Is there a way to import/export?
I'm using node on the backend, but this code is all client side JS, so typical export default/export doesn't work.
Thank you!
If you include the file containing these functions to the HTML files, you can use these functions in other included JS files in the HTML.
Suppose we created a JS file named utils.js and we write all general purposes javascript codes like your notification functions, all we have to do is include this utils.js file in our HTML file.
Example:
<script src="/my_path/utils.js"></script> // This file containing my noticiation functions
<script src="/my_path/main.js"></script> // main javascript file
<script src="/my_path/myMovie.js"></script> // this files containing related my movies.
This is just an example. You can write your functions in any javascript file and you can use these functions in other javascript file or in your HTML. Just include the file containing the functions you want to use.
have you tried to import that javascript file that contains those functions in the HTML file where you want to use it?
Let's say I have a function in test.js file that I want to use in index.js file
If I import them in an HTML file like this it will work.
Note: Import the file with those functions before importing files that will use them
<script src="./test.js"></script>
<script src="./index.js"></script>
You have to import another file to your index file
<script src="./firstfile.js"></script>
<script src="./secondfile.js"></script>
How to include an entire file into my bundle main.js?
ES6 can import/export functions and classes. But what if i want to include the whole content from another file into my bundle main.js? how to do it?
I came across the query on Stackoverflow: Managing jQuery plugin dependency in webpack.
I'm not sure about this question though. Those options given there seem to target injecting implicit globals, configuring this, disabling AMD, to include large dists. I don't think this is what i want.
Let's say i have two files in src directory
1- rough.js
const rgh = "qwerty"
2- index.js
import './rough.js' //something like this
console.log (rgh)
Now what i expect in bundle.js is
const rgh = "query";
console.log(rgh)
I just want all the content inside one of my file to get all transported to index.js for webpack to bundle them
Those options given there seem to target injecting implicit globals,
configuring this, disabling AMD, to include large dists. I don't think
this is what i want.
To understand this you need to understand what webpack is doing for you. Web pack takes a series of Javascript files (and more importantly their contents) and parses these into one file. That's what it does from a file point of view, but if you ignore the file and think about what it does from a code point of view, it takes each one of the imported objects and makes them available to other objects depending upon the rules you define in your code (using import and export). You can think of this from a closure point of view something like this:
if you have some code like:
import a from 'a.js';
export default b(){
console.log(a.test());
}
This will be turned into something like, in one js file:
var a = (function() {
var testStr = "test";
function test(){
return testStr;
}
return {test:test};
})();
var b = (function(a) {
console.log(a.test());
})(a);
So you can see that the file isn't really important. What's important is the scope. b can use a because it is injected into it's scope (In this instance as a IIFE).
In the above example a and b are in the global scope but testStr isn't.
So when your talking about "importing my file", you need to forget about that and think about what objects in that file you want to import how. Any variables "in that file" declared directly var a = ....; are in the global scope. So it sounds like what you want to do is import the objects in that file into the global scope.
you just need to import that file in main.js
like this way
Currently working on MVC and I want to create a .js file in the Scripts folder and include this in some of the views. I store all the functions inside a javascript object and I want to call on these outside of the .js file in the View and i understand this is somewhat problematic. I read that I could use:
#Scripts.Render("~/Scripts/test.js")
My problem then is that my script bundles which includes Jquery runs after the test.js so my jquery code inside test.js does not work. If there is a way to make #Scripts.Render render after the bundles everything would work.
Example of what I am trying to do:
content of test.js inside /Scripts/ folder:
$(document).ready(function () {
const example =
{
test: function () {
console.log('It works');
}
}
});
Code in the view:
#Scripts.Render("~/Scripts/test.js")
#section Scripts
{
<script>
$(document).ready(function () {
example.test();
});
</script>
}
Is this doable in any way or should i just create a separate .js file for each View? My thought here was that i want a single .js file for multiple Views under the same folder but I do not want to run all the javascript in all those views just call on the functions that i need for that particular View.
I´ve added to my template.tpl.php file inside my drupal theme this line to elimiante the calling to a specific css file:
remove-stylesheets[all][] = modules/system/system.css
If I want to do that with a specific js file, could I just do this?:
remove-scripts[] = whatever.js
I´ve tried it, but it doesn´t seems to work...
Thanks for your help!
Try this code in your template file.
function phptemplate_preprocess_page(&$vars) {
$js = drupal_add_js();
unset($js['module']['sites/all/modules/yourmodule/yourjs.js']);
$vars['scripts'] = $js;
}
This function will be called before the template is processed and rendered to the browser. If you are not sure about the path to your js file, print the drupal_add_js() array and find the path to the required js.