Well with Pug, formerly known as “Jade” (a registered trademark, and as a result a rename was needed) it’s a high performance and feature-rich templating engine that’s easy to achieve. There may be some other ways of doing this too, so if you use some other approach, feel free to share it in the comments.Clean and organize HTML, that’s what we as Front-end Developers always aim for. The method style of the third approach works best especially if you need to be able to reuse the code, but it’s the most complex of them. The second is something in between, but it limits reusability. The first is most useful when you just need to get something done quickly, but it isn’t very clean. With these three approaches you can do quite a lot. This way the code is easy to reuse and maintain, as you can use the code anywhere at all because it doesn’t depend on parameters being in the URL, in a global variable or any other such hinderance.

The main idea of this approach is that you can put your actual JS code into a separate file, and then in your page where you need the code, you include the file with a script tag and add another script tag, which sets up the object with the configuration you need. Here’s a simple approach to extracting get parameters from the URL:įunction getQueryParameters ( ) Since JavaScript can see the current page’s complete URL, you can create a script to manually parse the variables you want from the URL. Also, it doesn’t have any built in methods for easily accessing GET data either, but it’s possible. However, due to limitations of JavaScript, you won’t be able to read POST data using it. This is an approach you are probably familiar with from server-side languages: Using GET or POST variables to pass values to scripts. Also, with very complex scripts (which are usually also the reusable kind), this does not really work so well. Because your script is written straight into the template, to reuse it elsewhere you need copypasting. However, this approach does not lend itself for reusable code. The pro’s of this approach is of course the simplicity – as long as the script itself is not very complex, this approach is very easy to use and won’t require any special JavaScript coding tricks either. The example shows a very simple function which just alerts a message with a variable’s value. You'll get an alert with a value from PHP when this page loads

Passing function into pug template