Okay so I have a meteor app and I am trying to make templates that have THREEjs animations in them so I can load a specific animation by loading a specific template. I wanted to de-clutter my HTML file by taking out the script tags and moving them to a separate JavaScript file but that wasn't working. I ended up just putting the JavaScript into my HTML and it worked. I was going to just keep doing that and live with the cluttered code but now I have run into a problem.
For some odd reason even if a for loop is inside the script tags, the computer will see the < sign and expect a html tag. At first I thought I had forgotten a closing tag or something but I checked and I haven't. If I delete the for loop (only create one particle) everything works perfectly again. I could fix this by just using escape character for the < sign (<) but I think I should find a solution to the overarching problem so I don't run into similar problems in the future.
I want to put the least amount of JavaScript in my HTML file as possible. (Meteor doesn't like it and neiter do I.)
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
I would prefer not to use another framework like require.js mainly because I'm not sure how but I will as a last resort if that's the only way to do it
All the examples for THREEjs put the code directly in the HTML file but how can I put it into a separate javascript file and make sure the javascript file finds min.three.js?
This is an overview of what the template looks like. I used jQuery to find actualAnimation2 and appended the container to that. You can also find all the code here
<template name = "animation2">
<div id = "animation2" class = "centered">
<div class = "line"></div>
<h1>Animation 2</h1>
<div class = "line"></div>
{{> animationButtons}}
<!--Put in a threejs animation here -->
<div id = "actualAnimation2" class = "animation">
<script src="client/three.min.js"></script>
<script>
//THREEjs stuff here
//This is what I want to move
</script>
</div>
</div>
</template>
tl;dr: How can I make THREEjs play nice with Meteor?
Any suggestions are welcome and let me know if I can clarify anything. Thank you for your help!
Quoting http://docs.meteor.com/ :
Some JavaScript libraries only work when placed in the
client/compatibility subdirectory. Files in this directory are
executed without being wrapped in a new variable scope. This means
that each top-level var defines a global variable. In addition, these
files are executed before other client-side JavaScript files.
This is exactly what needs to be done with three.min.js because the beggining of the file looks like :
// threejs.org/license
'use strict';var THREE={REVISION:"68"};
So you need to put three.min.js inside cient/compatibility/.
But you are probably better off using a package, choose carefully the one who is more likely to upgrade to revision 69 quickly in a few weeks or so.
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
It sounds like you're running into an issue where your JS files are loaded before min.three.js. You might be able to fix that by taking advantage of Meteor's JS load order - files in directories called lib are loaded first, so if you put your min.three.js file inside /client/lib it will load before source files outside that directory.
Another option would be to use a package - for example, meteor add aralun:three.
Related
I ran next build followed by next start. It's still rendering with many JS files at once instead of a singular entrypoint.
Is there something I'm missing here? The docs make it seem as though this is all that's needed
The files you see are NextJS code splitting into functional and framework code , you can read more about it here
https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy
I see a comment about a <script file in your head, Next will leave this alone because its just a tag being printed - if you need your own outside JS file to be served by Next, place it in the public directory.
I'm looking for some advice on the best way to hold my JavaScript (jQuery) functions.
I am developing in MVC/razor and therefore have a layout page. I include my jQuery library and an external JavaScript file in here so it's available in every single page.
This is working well, but I am now becoming very aware of the fact that I am adding almost 300 lines of JS to EVERY page, where maybe half of that is used in any one of these pages.
One function is not in the external file and instead sits inside the HTML because I need to use variables set in my razor code.
I have a couple of questions around this arrangement:
Is placing JS inside the HTML generally acceptable when variables set using razor are used? There does not appear to be a clean way of passing a variable into an external js file
Should I split my functions down in to individual JS files and just include what is needed for each page in the site?
If I were to split them into multiple files, how would that work with jQuery's (document).ready ? Do I need to use that if all the JavaScript I am including is to be used?
I'm sure this will more a matter of opinion than a black and white answer, but I want to consider all my options before moving on. Even though it works fine as is, I can't help but feel there is a better/cleaner way.
Remember once a user lands on your homepage and loads the javascript file it will be cached in their browser so subsequent pages will not download the Javascript again.
I would definitely keep the js separate, you could have a snippet on each page that initialise the JS that that particurlar view needs. Put something like the below in the views that need to run JS
$(document).ready(function() {
mysite.mypage();
});
Then the function mysite.mypage() can be defined in the external JS file.
300 lines isnt the end of the world, I would say its probably too early to be worryign about optimisation.
You could always look at minifying that JS file to decrease the size. A quick and easy way to do this is here:
http://www.minifyjavascript.com/
Have you ever heard of require.js? http://requirejs.org/ I find it really useful.
It's a module loader so you are able to split all of your JS code into individual files and load only the ones you need on each page.
I don't know about passing a variable to an external JS file, I don't think its possible / the 'right' way.
You can make each external JS file into a function that accepts and returns parameters. Then in the page you need to use it:
- include the file dependancy
- call the function
Thats what I do, seems like your 2nd suggestion.
for the $(document.ready) question its really up to you. You don't have to use it but its useful for some things , check out this overview:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
Is there a way to add an inline script link reference using Cassette?
What I want is to be able to add something like the following to my page:
#Bundles.AddInlineScriptReference("/MyScripts/TheScript.js")
(note: Bundles.AddInlineScriptReference doesn't exists, just an example)
and have Cassette write out the script link including handling the minification, etc.
<script src="/cassette.axd/asset/MyScripts/TheScript.js?voB4kL0uy2HIpjkJnSuycghlp-8=" type="text/javascript"></script>
I see a way to add inline scripts and bundles but not script link references. I could setup bundles that include individual files. However that seems like it's unnecessarily tedious for a single script that's used throughout an entire section of a site.
Reading the Cassette Bundle helper documentation I thought something like this would work.
#Bundles.Reference("/MyScripts/TheScript.js")
However it throws the following error:
Cannot find an asset bundle containing the path
I'd appreciate any advice. I feel like this is such a simple question that I must be missing something obvious.
bundles.Add<ScriptBundle>("MyBundle", new[]{ "path/to/script/script.js"});
I'm trying to insert reference to the Javascript file in the header by using drupal_add_js(). I placed this line inside the template preprocess function in template.php. The result that the code is not working at all: There is no script link in output as it should be. Can anyone tell me what am I doing wrong?
function phptemplate_preprocess_page(&$vars) {
$url = drupal_get_path("theme","mysite");
drupal_add_js($url."/jquery.js");
drupal_add_js($url."/drupal.js");
.....
Even easier, Javascript that needs to be loaded on all pages can be added in the theme's .info file. See http://drupal.org/node/171205#scripts.
drupal_add_js(path_to_theme().'/js/jquery.cycle.all.js');
$vars['scripts'] = drupal_get_js();
If you place the javascript file in the theme directory, you can just add the following to the themes .info file
scripts[] = myJavaScriptFile.js
After you add this file you need to deactivate your theme and then reactive it.
As pointed by other, simply using drupal_add_js() from a hook_preprocess_page() implementation doesn't work. The references to JavaScript files collected through the multiple calls to drupal_add_js() are used to generate the corresponding markup into the $scripts variables from template_preprocess_page(). But a theme's implementation of hook_preprocess_page() is always called after template_preprocess_page(). So in order to have the files added through drupal_add_js() in your .tpl.php file(s), you need to override the already set $scripts variables:
function THEME_preprocess_page(&$variables)
drupal_add_js(...);
$variables['scripts'] = drupal_get_js();
}
But, you shouldn't have to add jquery.js and drupal.js yourself, it should already be done automatically by Drupal core. If you need to do it yourself, then something is broken on your site. You can (re-)add the files as a quick fix, but you better find the root cause of the issue as it is most likely creating other issues you haven't yet identified (or worked around without realizing it).
drupal_add_js() works, but you are putting it deep into the page rendering process. I suggest you put it in the template.php like you are doing, but in the beginning, outside any function. This is what we did on a few of our projects.
What is the general developer opinion on including javascript code on the file instead of including it on the script tag.
So we all agree that jquery needs to be included with a script file, like below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
My question is, in order to get functions on a page that is not on all pages of a site. Do we include the functions like below in the same page or in a global include file like above called mysite.js.
$(document).ready(function(){
$(".clickme").click(function(event){
alert("Thanks for visiting!");
});
});
ok. So the question is: if the code above is going to be called in every class="clickme" on a specific pages, and you have the ability to call it either from an include separate file called mysite.js or in the content of the page. Which way will you go?
Arguments are:
If you include it on the page you will only call it from those specific pages that the js functionality is needed.
Or you include it as a file, which the browser cached, but then jquery will have to spend x ms to know that that function is not trigger on a page without "clickme" class in it.
EDIT 1:
Ok. One point that I want to make sure people address is what is the effect of having the document.ready function called things that does not exist in the page, will that trigger any type of delay on the browser? Is that a significant impact?
First of all - $("#clickme") will find the id="clickme" not class="clickme". You'd want $(".clickme") if you were looking for classes.
I (try to) never put any actual JavaScript code inside my XHTML documents, unless I'm working on testing something on a page quickly. I always link to an external JS file to load the functionality I want. Browsers without JS (like web crawlers) will not load these files, and it makes your code look much cleaner to the "view source".
If I need a bit of functionality only on one page - it sometimes gets its own include file. It all depends on how much functionality / slow selectors it uses. Just because you put your JS in an external JS file doesn't mean you need to include it on every page.
The main reason I use this practice - if I need to change some JavaScript code, it will all be in the same place, and change site wide.
As far as the question about performance goes- Some selectors take a lot of time, but most of them (especially those that deal with ID) are very quick. Searching for a selector that doesn't exist is a waste of time, but when you put that up against the wasted time of a second script HTTP request (which blocks the DOM from being ready btw), searching for an empty selector will generally win as being the lesser of the two evils. jQuery 1.3 Performace Notes and SlickSpeed will hopefully help you decide on how many MS you really are losing to searching for a class.
I tend to use an external file so if a change is needed it is done in one place for all pages, rather than x changes on x pages.
Also if you leave the project and someone else has to take over, it can be a massive pain to dig around the project trying to find some inline js.
My personal preference is
completely global functions, plugins and utilities - in a separate JavaScript file and referenced in each page (much like the jQuery file)
specific page functionality - in a separate JavaScript file and only referenced in the page it is needed for
Remember that you can also minify and gzip the files too.
I'm a firm believer of Unobtrusive JavaScript and therefore try to avoid having any JavaScript code in with the markup, even if the JavaScript is in it's own script block.
I agreed to never have code in your HTML page. In ASP.net I programmatically have added a check for each page to see if it has a same name javascript file.
Eg. MyPage.aspx will look for a MyPage.aspx.js
For my MVC master page I have this code to add a javascript link:
// Add Each page's javascript file
if (Page.ViewContext.View is WebFormView)
{
WebFormView view = Page.ViewContext.View as WebFormView;
string shortUrl = view.ViewPath + ".js";
if (File.Exists(Server.MapPath(shortUrl)))
{
_clientScriptIncludes["PageJavascript"] = Page.ResolveUrl(shortUrl);
}
}
This works well because:
It is automagically included in my files
The .js file lives alongside the page itself
Sorry if this doesn't apply to your language/coding style.