Is there a way to have a main script that act like a "global" script for all pages of a site while still have specific page script when using requiere.js.
This would be called on all pages
<script data-main="resources/js/main" src="resources/js/libs/require.js"></script>
and on other page i would like to add other dependencies without having to create a different main.js script.
Is there any way to do so ?
EDIT: Just found a way that seems to be working pretty well so far:
<script> require.config({ deps : ['register'] }) </script>
Any other ideas?
You can implement a global main and a page main scripts, something like this (the data-start is not part of the requirejs, is hand-made as described on the link below):
<script data-main="globalmain.js" data-start="page/main" src="require.js"/>
More details here: How to use RequireJS build profile + r.js in a multi-page project
Related
I'm new to Electron. I'm writting an application that uses several client-side UI library, such as jQuery, mask-plugin and d3.js.
Considering perfomance, I would like to know if there is any difference between requireing a JS library in the Renderer process instead of directly refering in a script src tag. Precisely, are require calls more costly than simple scripts src tag in the Render process?
For instance (a very minimal and simple example), which one is faster?
<script>
"use strict"
window.$ = window.jQuery = require('jquery');
window.Tether = require('tether');
window.Bootstrap = require('bootstrap');
require("jquery-validation");
</script>
or refer to the min script directly in the src tag:
<script src="js/core/jquery.min.js"></script>
<script src="js/core/popper.min.js"></script>
<script src="js/core/bootstrap.min.js"></script>
<script src="js/plugins/jquery.validate.min.js"></script>
This is a matter of taste and style than performance I believe. For me personally, I prefer to call libraries from code with require (or import in newer JS) than to add additional scripts to the page.
This allows me to have better visibility of what is being called when working on the code, rather than jumping from source to view.
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
Update:
I also posted this question to the Jade GitHub repository. I'm dropping it here too, for future (circular) reference:
https://github.com/jadejs/jade/issues/1943
Original post:
In a default node + express + jade application, I'm trying to build some common reusable components (menu, footer...) that I can include in some pages. I got stuck while trying to add references to .css or .js files from a block or an included file.
I want to do this because I don't want to include all the styles and scripts if I don't need them.
The folder structure is something like this:
Root
public
javascripts
main.js
menu.js
stylesheets
main.css
menu.css
views
shared
layout.jade
menu.jade
footer.jade
index.jade
The layout.jade file:
doctype html
html
head
title= title
link(rel="stylesheet", href="stylesheets/main.css")
script(src="javascripts/main.js")
body
block content
The index.jade file:
extends shared/layout
block content
h1= title
p Welcome to #{title}
In menu.jade there is some code that needs the menu.css and menu.js files.
Now I need a way to add those files to the <head> of the page only when I use the menu.jade file.
I started using Jade a few hours ago so it's very possible that I missed something in the documentation.
Thank you!
You could do this with jQuery in your menu.js like so:
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");
I would caution you about this practice however. One alternative would be to have a build step that concatenates all of your CSS files together and serves all of your style in a single css file. LESS and cssmin are good options here, and they have nice modules to automate this for you in grunt or gulp, whichever you're using.
You did mention that you didn't want to include all styles if you don't need them, but I would suggest that having a web browser download many small css files is going to be slower than having it download one big one, especially if you serve those files via a webserver like nginx that employs gzip, or if you serve your static files through a CDN like CloudFront.
Goal:
I am trying to build an effortless workflow for client side templating development.
Doc Root:
/views/uncompiled/
/static/js/compiled/
We start in /views/uncompiled/
This is where I can build stuff out, like /views/uncompiled/index.html for example.
Im building dust.js templates, so I am using dusterjs too listen for changes in my /views/uncompiled/ directory, and automatically render compiled *.js counterparts in my /static/js/compiled/ directory.
So /views/uncompiled/index.html renders out /static/js/compiled/index.js anytime a change is saved.
Problem:
My layout.html is growing bigger. I need to include a new *.js script everytime I add another template:
<head>
<script src='/static/js/compiled/index.js'></script>
<script src='/static/js/compiled/header.js'></script>
<script src='/static/js/compiled/footer.js'></script>
<script src='/static/js/compiled/baconstrips.js'></script>
...
</head>
Solution:
Use another watch on the /static/js/compiled/ folder too automatically concat *.js into a single app.js that will always be included in my <head> anytime the contents of that folder changes:
<head>
<script src='/static/js/app.js'></script>
</head>
Question:
I would like to use a concatonation tool like Uglify.js that also does compression.
Are there any node packages that automate the solution above?
Is there a native function of Uglify.js that already does this?
Use grunt.js. It has the ability to watch/concentate/minify your files through various contributed modules. Takes a little getting used to (I still am myself) but you will end up with a custom build process that works the way that you want it to work, which is priceless.
Putting this code in
$('#hello').click ->
alert 'hello'
in posts.js.coffee in vanilla Rails 3.1 app does not work. The javascript is compiled and loaded before the page so the function isn't bound to its element. There are easy solutions, like manually loading the js on the page rather than using the asset pipeline, or using JQuery .live functions, but it seems like this code should work out of the box. Am I missing something??
I might be pointing out the obvious here, but have you (in jQuery) tried this:
$(function(){
//your code
$('#hello').click(function(){
alert("hello");
});
});
or
$(document).ready(function(){ [...] });
These (atleast under normal circumstances) should prevent any javascript inside from doing anything until the DOM has been loaded.
Hope this helps