Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Thursday, June 20, 2013

JavaScript Pass by Value or Pass by Reference

In languages like C#, Java
Pass by Value: Any modification on the parameter will not be seen by the caller.
Pass by Ref: All modifications including assigning a new object is seen by the caller.
function changeStuff(num, obj1, obj2, obj3)
{
    num = num * 10;
    obj1.item = "changed";
    obj2 = {item: "changed"};
    obj3.item = "changed";
    obj3 = {item: "something"};
    obj3.item = "something new";
}

Console:
var num = 10;
var obj1 = new Object();
obj1.item = "unchanged";
var obj2 = new Object();
obj2.item = "unchanged";
var obj3 = new Object();
obj3.item = "unchanged";
changeStuff(num, obj1, obj2, obj3);
console.log(num);
console.log(obj1.item);    
console.log(obj2.item);
console.log(obj3.item);

Output:
10
changed
unchanged
changed
Note: The above code snippet was taken from stackoverflow

In JavaScript, You can think of everything as objects even the primitive types like the parameter num above. Since, Javascript is a dynamic language you are allowed to add properties on the fly. The way you see the memory management in Javascript is a little different from their C#, Java counterparts.

All parameters are actually doing Pass by Reference. I know this is debatable. But, what needs to be clearly understood is that when you assign a new object to the function parameter then the function parameter will move pointing to the new object, leaving the caller parameter to see all the changes done by the function parameter until the point of the switch.

Please pay closer attention to the output of obj3. Is this pass by value or pass by reference? It was pass by reference until a new object was assigned. Which means the caller sees all the changes until it was assigned with a new object. All changes done post the new object assignment has been scoped only upto the function call.

obj1 case is similar to obj3, just that there was no changes made to obj1 and the first operation was to set it to a new object. Hence, it acts like a Pass by Value.

If you understood then I would be glad. Please take a bow!

If you are not or if I added to the confusion, I would refer you to continue your google search.

Sunday, December 25, 2011

Minification of JS & CSS files using YuiCompressor

The process of minification includes not only to reduce the size of each of the JS or CSS files to it's bare minimum, hence by reducing the download size. But, also to stitch together multiple JS or CSS files into one JS and one CSS file. Hence reducing the number of HTTP requests made to the server for the appropriate files.


We happened to maintain several files for JS and CSS files and ensured that we used a number of files with some nomenclature like debug.01.file1.js / debug.01.file1.css
Reason, being we needed multiple files for modularization and also as we were using several third party plug-ins.
Another reason, was that ordering of processing the files does matter in some cases ex: jquerymobile js files needs to be preceded by jquery script files.


The final consolidated file will have a name of projectname.js / projectname.css


We used YuiCompressor for minification of js and css files.


Steps to setup:

Extract the zip folder to c:\   i.e. c:\yuicompressor-2.4.7


Setting Environment Variables to Java and Yuicompressor binaries.
Start > My Computer > Properties > Advanced System Settings > Environment Variable >

Append the below string to the PATH variable.
;C:\Program Files (x86)\Java\jre6\bin

type "$(ProjectDir)scripts\debug.*.js" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type js -o "$(ProjectDir)scripts\okig.mobile.js"
type "$(ProjectDir)styles\debug.*.css" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type css -o "$(ProjectDir)styles\okig.mobile.css"

Set the Post build event to run the following script. This will ensure that minification is done only in case of release mode. Version is done for both debug & release mode.
if $(ConfigurationName) == Release ( 
echo 'Minifying the JS and CSS'
type "$(ProjectDir)scripts\debug.*.js" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type js -o "$(ProjectDir)scripts\okig.mobile.js"
type "$(ProjectDir)styles\debug.*.css" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type css -o "$(ProjectDir)styles\okig.mobile.css"
)


Code analysis using SharpLinter


SharpLinter is a command line tool to automate error-checking Javascript files. It produces output that is formatted for Visual Studio's output window, so clicking on a line will locate the file and line in the IDE.


This helps you correcting from common mistakes, assumptions we make about JavaScripts.


One example, is there are some implicit conversions of types ex: null can be 0 or "" or false, undefined is some cases. Hence, when you are doing a comparison you may encounter wrong conditions.
JSLint recommends using === / !== instead of == / !=


Error console shows output as below.
 (lint) Use '===' to compare with 'null'. at character 14
 (lint) Missing radix parameter. at character 14
 (lint) Use '!==' to compare with 'null'. at character 42
 (lint) Use '!==' to compare with 'null'. at character 14


I used the following options.
$(ProjectDir)\Assemblies\SharpLinter\SharpLinter.exe
-v -y  -rf "$(ProjectDir)scripts\*.js"


jslint.global.conf
/*jslint 
browser: true, 
sloppy: true, 
nomen: true, 
plusplus: true,  
forin: true, 
type: true, 
windows: true, 
laxbreak:true
jslint*/


You can find more information in https://github.com/jamietr

Monday, August 2, 2010

Overriding SharePoint My Profile: Ask me About (Expertise) links

My Profile home page comes with a Ask Me About web part. Which is nothing but a list of Expertise each user would have updated the User Profile to let the others know about the expertise.
Any users who browser through the profile and clicks on the Expertise link then it will open up in the Noteboard web part. This posts the question to the person who has updated the expertise.
If the Noteboard web part is disabled then it opens the question in the Mail client available in the machine.

There was some bug in this that it opens up a mail client and also a blank browser window. On closer observation found that clicking on the Expertise link was calling a Java Script function NavigateToNoteboard().
This javascript was coming from the WebPart whose page, I was not able to find or did not want to change as it was a standard web part being used every where.

This is where I figured out that you could override javascript and the behavior is that the last javascript in a page overrides the others. So a simple hack of overriding this javascript immediately after the Web Part control registration solved the problem.

Here is the link that I used in my overriden Javascript for opening the question in  a mail client.

http://www.webmasterworld.com/javascript/3290040.htm


document.location.href = "mailto:" + toAddress + "?subject=" + subject;

Hope this was useful.. In the above, I was able to showcase
  1. The bug that opens a blank web page when Noteboard web part is removed.
  2. Overriding the Javascript
  3. Opening a mail client through JavaScript