less.js is using an internal xhr() function to load #imported .less files dynamically via ajax.
I want to know if there is anything I can do the hand a custom function over to the less parser to get the imported files loaded through this function and NOT through the default loading function.
As a wild example: I may have stored the .less file I want to import in my localStorage and want less.js to load it from there, instead via AJAX.
You could always create a fork and override or change loadStyleSheets and have it check in localStorage first.
Since the entire system is designed to run a closure it'll be hard (if not impossible -- I've never tried to modify a closure from outside the closure) to make any additions post-library load.
Related
I'm working with the webcomponents standard, but in reality, the same thing happens with any import of es6 modules.
When I update a web component and upload it to the server, since these are imported with es6 modules, users do not see the update until they force to refresh the browser's cache.
This is a problem when it is a hotfix or when the update requires a component that the user already has in cache, but this component has had some update in the code necessary for the operation of the new component.
I've been looking, but haven't found anything that really works for me to force the browser to request the javascript modules from the server. Not even by uncaching the .htaccess, the browser keeps caching a copy and serving it from the cache itself.
I used to use the trick of putting the version in the src attribute of the script tag.
<script src="https://example.com/src/js/myscriptfile.js?v=1.1.2"></script>
But when importing with an import statement inside the javascript file this is no longer an option.
Any ideas that work?
I used the following import statement for a file that is transpiled by Babel & minified by Webpack, and it is also served directly as a <script type="module"....
This technique causes Chrome v102 to download the file each time the "v" value changes (i.e., cache the imported file until I change tye hard-coded URL query parameter that I used in the import statement), which I change when I update the file so that the new file will be downloaded by the browser.
import { myFunction } from './myFile.js?v=2022-06-17T12.48';
NOTE: There is a chain reaction, so you'll need to do the same thing for any files that are imported from within myFile.js, assuming you want to control the caching of those files also.
Good day all.
I have a big Ext js application in which I have to insert a new section which will be loaded in iframes.
To maintain the routes of Ext js, each page of the new part will be a different view, with a different viewController in which will be only the iframe that will load the page of the new application.
Now I'd like to make some cleaning in the mess, for example, all the new application pages will use some shared libraries, which will be inserted in the app.json of Extjs so they will be available for each iframe page.
but most of the scripts of these new pages will be specific of that very page, so it will be a big waste of resources if all of those scripts have to be inserted in the app.json and so they are available for every part of the application.
The idea was, is there a clean way to specify some libraries used only by a single viewController (and its iframe) and when the user change the route, everything is destroyed and the memory is cleaned?
If you need to load a specific js only if a window or frame is called, the best way is to use an Ext.Loader method called loadScript
Ext.loader.loadScript(url)
Loads the specified script URL and calls the supplied callbacks. If this method is called before Ext#isReady, the script's load will delay the transition to ready. This can be used to load arbitrary scripts that may contain further Ext.require calls.
Also remember that your on html5! So you can use other methods to load a js script when you need it. An example:
System.import("yourScriptFile.js").then(function(){
// script loaded.
});
If you want to load multiple files you can also use it:
Promise.all(["url1", "url2"].map(System.import)).then(function(){
// loaded all here
});
If you need to destroy a window iframe you only need to use the method close, as you can se here the method close on the default case will delete the window from the dom and destroy the object from the memory.
So, in my opinion the best way is to use iframe windows, and use the close method to destroy them at the end of their life.
If you only need to use a container in which you're inserting your new html with your js scripts, you can instead call a simple .destroy() method.
Remember that there are other ways to split your project's app.js in different parts, have also a look here to have an idea.
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()
So two part question here. Basically, what is the proper practise for javascript function locations? I assumed it would be to have several MyScriptFile.js files, each with a few functions instead of one huge AllMyScripts.js file, as not every page needs every function.
However I'm not sure how to reference another function from outside of this file...
My situation: I'm using an AJAX request in many of my pages. Each request response is different (drawn from different files, etc) and is very hard to make dynamic (one-script-fits-all would be difficult). However, I do have my MakeAJAXRequest() function which creates the request object, which is standard to all DoSomethingWithRequest() functions.
How do I include MakeAJAXRequest() in the other files which contain the DoSomethingWithRequest() functions? It seems as though I should have been able to find this.. but I havn't come across it.
tl;dr I have MakeObject.js and UseObject.js. How does UseObject() reference MakeObject()?
EDIT: Found that if you include MakeObject BEFORE UseObject in your HTML <script> tags, UseObject will be able to reference MakeObject. Seems a little dirty still, as anybody who wants to use the UseObject script will have to be aware of the MakeObject dependency...
If you want to ensure your dependencies are loaded, you could use a function such as this: http://phpjs.org/functions/include:433 There is also include_once(), require(), and require_once()
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.