|
Anyone worked on RequireJs, please I wanted to have some discussions for its optimization, required for my project.
Thanks
|
|
|
|
|
Yes, you can state your issue
|
|
|
|
|
Thanks ujjwal,
The Issue is that In my project the load time is too slow. And when I tested on Yslow it says 67 scripts are yet to be bundled, I mean they are still individuals and as per I read about Requirejs its analogous to MVC bundling and minification. So any way I can optimize or do bundling?
|
|
|
|
|
RequireJs is modular script loader, supporting Asynchronous Module Definition (AMD) API. Using this you can declare the dependency of a particular module, and only those scripts are loaded, and not all the dependencies of the project.
Well I have no much experience about MVC minification and bundling, but from what I read, its not the same-
1) Minification- You can achieve minification in javascript by using http://www.minifyjs.com/javascript-compressor/[^] or http://marijnhaverbeke.nl/uglifyjs[^]
2) bundling- Its bundling various js files to one file that is reducing the number of call http://www.sitepoint.com/asp-net-4-5-bundling-and-minification-support/[^] and http://www.monkeyphysics.com/articles/read/16/bundling_javascript.html[^]
3) Requirejs is just about loading script asynchronously, as and when that script is required
You start you application with data-main attribute in the cript loading tag as follows
<script src="/js/vendor/require.js" data-main="/js/main.js"></script>
Then in the main.js you write the require the files needed to start the application.
In this file you can use require.config to declare the configurations for the require, like the paths and shim(for the libraries that do not support AMD like underscore, handlebars etc.
require.config({
baseUrl:'/js/vendor',
paths : {
'models' : '/js/app/models',
'collections' : '/js/app/collections',
'views' :'/js/app/views',
'templates' : '/js/app/pages'
},
shim :{
underscore: {
exports: '_'
},
handlebars : {
exports : 'Handlebars'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
Then you can start the application by using a require block. require block cause the required dependencies to be loaded before execution. require is normally written once at the start of the application, giving the application a initial kick start.
require(
[
],
function(App, HandlebarsUtil) {
// Register Handlebars helpers
HandlebarsUtil.registerHelpers();
// Kick off the application by requiring in the app and starting it
App.start();
}
);
in the app.js, and henceforth all other files have define block, where dependencies are listed and the variable name that they would be referred to in that script. the code is written as a function, which returns the object of functions for use in other function, like module pattern.
define(
[
'app/framework/AppConfig',
'app/framework/AppRouter',
'backbone'
],
function(AppConfig, Router, Backbone) {
'use strict';
return {
start: function start() {
}
};
}
);
|
|
|
|
|
Heyy man great, thanks a lot for your response would surely be handy for me..
|
|
|
|
|
Yeah you can go for requireJs apart from that do this tips also.Always load scripts from CDN, if it fails you can load from your folder.
To confirm that cdn script loaded you can check for existence any variable/function this script defines, if it is undefined - then cdn failed and you need to load local script copy.
On this principle are based solutions like that:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">
So that it will be cached.
(if there is no window.jQuery property defined cdn script didn't loaded).
You may build your own solutions using this method. For instance, jquery tooltip plugin creates $.tooltip() function so we can check it with code like this:
if (typeof $.tooltip === 'undefined') {
document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
}
Read http://stackoverflow.com/questions/5257923/how-to-load-local-script-files-as-fallback-in-cases-where-cdn-are-blocked-unavai[^]
See advantages here http://www.sitepoint.com/7-reasons-to-use-a-cdn/[^]
|
|
|
|
|
Nice & Helpful.
Thanks a lot for this
|
|
|
|
|
Glad it helped you. Please UpVote if it helped you
|
|
|
|
|
|
Checked but I am new to it, so if anyone has worked on it previously could guide. But still will go through that site again.
|
|
|
|
|
Hi ,
I workin on Gridview fixed header and footer while scrolling by using java script
<script language="javascript">
$(document).ready(function() {
try {
$(".divgrid").each(function() {
var grid = $(this).find("table")[0];
var ScrollHeight = $(this).height();
var gridWidth = $(this).width()-10;
var headerCellWidths = new Array();
// for (var i = 0; i < grid.getElementsByTagName('TH').length; i++) {
// headerCellWidths[i] = grid.getElementsByTagName('TH')[i].offsetWidth;
// }
grid.parentNode.appendChild(document.createElement('div'));
var parentDiv = grid.parentNode; var table = document.createElement('table');
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != 'id') {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.appendChild(document.createElement('tbody'));
table.getElementsByTagName('tbody')[0].appendChild(grid.getElementsByTagName('TR')[0]);
gridRow.getElementsByTagName('TD')[i].offsetWidth) {
}
var gridHeight = grid.offsetHeight;
if (gridHeight < ScrollHeight)
ScrollHeight = gridHeight;
parentDiv.removeChild(grid);
var dummyHeader = document.createElement('div');
dummyHeader.appendChild(table); parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement('div');
if (parseInt(gridHeight) > ScrollHeight) {
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = 'overflow:auto;height:' + ScrollHeight + 'px;width:' + gridWidth + 'px';
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
});
}
catch (err) { }
}
);
</script>
<div class="divgrid">
<asp:GridView ID="gvEmployees" runat="server" ShowFooter="true">
<FooterStyle BackColor="Green" />
</asp:GridView>
</div>
now problem is alignment header columns width and data columns width are different size.
Thanks & Regards
Harsha
-- modified 14-Apr-14 10:22am.
|
|
|
|
|
In this kind of approach, you have to fix the width of header and columns manually.
Define and set width of each column in pixel and same width to corresponding data columns.
|
|
|
|
|
put css
.FixedHeader {
position: absolute;
font-weight: bold;
}
In gridview call this css to
HeaderStyle-CssClass="FixedHeader"
Sankarsan Parida
|
|
|
|
|
i am doing site if user select the indian map karanata or goa it will be display what is javascript of select image
if write this java script in html page i am passing parameter distcode and tal code
function getData(context, distCode, talCode)
{
window.location= "displayDistTal.aspx?context="+context+"&distCode="+distCode+"&talCode="+talCode;
}
|
|
|
|
|
I have no idea what you're talking about.With these simple javascript you cannot navigate to a particular location
This is simply a querystring
You need API to select location in a map
First You have to integrate Map API using Google/Bing and then implement GEOCODING process in order to convert address into a geographic coordinates .
By the geographic coordinates you can point appropriate location
Correct me if I'm wrong and explain bit more
You have to learn to think like a computer or teach him to think like a human.
-Kornfeld Eliyahu Peter
|
|
|
|
|
What is your question?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Dear friends,
I'm trying to transfer data between input type elements (from textbox to dropdownlist)follow the steps below ...
1. from the first row, key data "aaa" then click "+" button.
2. from the second row, key data "bbb" then click "+" button.
3. click "refresh key drivers" button.
4. problem : the display in dropdownlist is "aaa" and "aaa" (I want it to be "aaa" and "bbb"). How should I solve from source code ?
Here is captured screen and source code :
http://www.sendspace.com/file/14vp73
Thank you very much ^^
|
|
|
|
|
Please do not post the same question in more than one forum.
|
|
|
|
|
Where are you stuck? You'll need to show what code you have so far.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Hi,
Can someone show me an example of how one could use drap and drop to link 2 items from seperate tables into a third table.
Table1:
ID
Name
Table2:
ID
Name2
Table3:
Table1.ID
Table2.ID
|
|
|
|
|
There are many jQuery plugins to allow you to do drag and drop. I would suggest googling for jquery drag and drop and you should have many samples to choose from.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Hi all, I have an iframe in a web page and let's call this page, PageA. How do I get the id of what ever object I want in the page being displayed inside the IFRAME, by clicking on it? Of course the web page being displayed inside the iframe must be in the same domain as PageA. I have searched online for the answer but all I was able to gather is that one must use jQuery's .contents() method. I have tried the following inside of document.ready based on my finding but it doesn't work.
var myObjId = $("#myiframe").contents().find($(this)).click(function(){$(this).attr("id")});
Please point out why it does not work, thanks in advance.
modified 9-Apr-14 0:58am.
|
|
|
|
|
It may not work because document.ready may be firing before the iframe is even loaded so it won't find it.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
I have the following to play a video dynamically by specify the media name and its path. There are multiple links on the same page. A user can click on each link to play a video.
<p><a onclick="getTitle(1)" href="/sites/Management_Development/Pages/leadership_videos.aspx?MediaFileName=../extraDegree.mp4">video 1</a></p>
I'd also like to add a label somewhere on the screen so the user knows which video he is playing.
I tried the following, by calling getTitle with a number to output the title of the video. The problem is it replace the whole screen instead of placing it somewhere on the screen. So how can I achieve what i need?
Thanks for your help,
function getTitle(tTitle)
{
myTitle = ""
if (tTitle == 1) {
myTitle = "video 1"
} else if (tTitle == 2) {
myTitle = "video 2"
} else if (tTitle == 3) {
myTitle = "Video 3"
} else if (tTitle == 4) {
myTitle = "Video 4"
}
document.write("<br>");
document.write("Now Playing: " + myTitle);
}
|
|
|
|
|
I ran your script through a Javascript Lint validator and adjusted it.
writeIn will add a linefeed to the end.
The value is not an number NAN, and is a string unless your parseInt(tTitle);
But I would of just made a span tag with an ID, and wrote the the span tag for the label, and not document write.
function getTitle(tTitle)
{
myTitle = "";
if (tTitle === '1') {
myTitle = "video 1"
} else if (tTitle === '2') {
myTitle = "video 2"
} else if (tTitle === '3') {
myTitle = "Video 3"
} else if (tTitle === '4') {
myTitle = "Video 4"
}
document.writeIn('');
document.write('Now Playing: ' + myTitle);
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
