Package DE_EPAGES::Presentation::API::JSSyntaxCheck
API functions for checking JavaScript syntax
Functions
- CheckAttributeModifiers
- CheckCallPrivateFunctions
- CheckCommentedEvils
- CheckConsoleDebugLog
- CheckForLoops
- CheckImpliedGlobals
- CheckInnerHtmlEmpty
- CheckJQueryEvents
- CheckJSLint
- CheckObjectCTORCalls
- CheckStrictCompareUndef
- CheckTranslationList
- CheckWithAlert
- CheckYUICompressor
CheckAttributeModifiers
jQuery supplies methods for modifying DOM node attributes, therefore do
not use the native JavaScript methods to do this. Instead of:
var domNode = document.getElementById('mynode');
domNode.setAttribute('name', 'myname');
use:
$('#mynode').attr('name', 'myname');
The same applies to getAttribute. For removeAttribute use $().removeAttr.
Syntax |
CheckAttributeModifiers($Line);
|
Example |
if(!$CheckAttributeModifiers($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckCallPrivateFunctions
Do not call private methods of other objects.
Syntax |
CheckCallPrivateFunctions($Line);
|
Example |
if(!$CheckCallPrivateFunctions($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckCommentedEvils
The usage of the JavaScript methods "setInterval", "setTimeout" and "eval"
are prone to errors, can degrade performance and may complicate debugging.
Either do not use this methods or add a comment in the source code at the
line above the function call to explain what the function does and why it
has to be used there. Hence the source code should then look like:
// this interval is needed because ...
this._interval = window.setInterval(function(){ ... },10);
Syntax |
CheckCommentedEvils($Line, $Linebefore);
|
Example |
if(!$CheckObjectCTORCalls($Line, $Linebefore)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
- $ContentLineBefore (string)
- source code line before $Content
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckConsoleDebugLog
The statements "console.debug" and "console.log" should not appear in
productive source code.
Syntax |
CheckConsoleDebugLog($Line);
|
Example |
if(!$CheckConsoleDebugLog($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckForLoops
Then looping through collections, save the limit/size of the collection
in a variable instead of accessing the collection's ".length" attribute
on every iteration. Given an array of DOM nodes in a variable "nodes",
instead of:
for(var i=0; i
Syntax |
CheckForLoops($Line);
|
Example |
if(!$CheckForLoops($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckImpliedGlobals
Looks for implied and possible hidden creation of global variables. For
example when doing:
var a = b = 0;
the variable b becomes global. So always declare variables one by one or
separated by coma:
var a = 0,
b = 0;
See the book "JavaScript Patterns" by Stoyan Stefanov, page 10+.
Syntax |
CheckImpliedGlobals($Sourcecode);
|
Example |
if(!$CheckImpliedGlobals($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code string
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckInnerHtmlEmpty
Don't use ".innerHTML" to check for empty nodes.
Instead of:
if(element.innerHTML == '') ...
use:
if(element.childNodes.length == 0) ...
Syntax |
CheckInnerHtmlEmpty($Line);
|
Example |
if(!$CheckInnerHtmlEmpty($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckJQueryEvents
Applies to use of the jQuery API. In jQuery the call of a ".click" handler
on a node is just a wrapper for the ".bind" method. Therefore we want to
save the extra function call and work with ".bind" directly. The following
event methods should not be called directly, they should be wrapped in
".bind()" or ".trigger()":
blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave, change, select, submit, keydown, keypress, keyup, error
For example:
$('#target').click(function() { ... });
should be:
$('#target').bind('click', function() { ... });
Syntax |
CheckJQueryEvents($Line);
|
Example |
if(!$CheckJQueryEvents($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckJSLint
Call external application "jsl" to check JavaScript syntax.
Syntax |
CheckJSLint($File, $LogWarning);
|
Example |
my ($JSLintOK, $Output) = CheckJSLint($JSFile, $LogWarnings);
|
Input |
- $JSFile (string)
- javascript full file path
- $LogWarnings (boolean (optional))
- show only errors or warnings as well?
- $JSLintConfig (string (optional))
- Use this jsl configuration file
|
Return |
- (0 (ref.array)
- 1, $Output) | Array with two values: 1 or 0 whether jsl found any
errors/warnings and the jsl error output string
|
CheckObjectCTORCalls
Looks for creation of object instances via class constructor calls like:
var x = new Object();
Do not use that pattern, instead use:
var x = {};
See book "JavaScript Patterns" by Stoyan Stefanov, page 39+.
Syntax |
CheckObjectCTORCalls($Sourcecode);
|
Example |
if(!$CheckObjectCTORCalls($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code string
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckStrictCompareUndef
Comparisons to "undefined" should always be done with the strict
operators !== or === .
Syntax |
CheckStrictCompareUndef($Line);
|
Example |
if(!$CheckStrictCompareUndef($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckTranslationList
Applies to the ePages JavaScript API, based on jQuery. If a JS module
uses a function call to our dictionary like:
this.dict.translate(...)
the module MUST contain a declaration of the used language tags like:
/*
* @dictionary ep.dict
*
* @translation
* {Today}
* {Done}
*/
Syntax |
CheckTranslationList($rContent);
|
Example |
if(!$CheckTranslationList($rFileContent)) { print "error ..."; }
|
Input |
- $rContent (ref.string)
- javascript source code file content
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckWithAlert
Alert boxes should not remain in productive source code. The with
statement can severely slow down the code runtime and should never be used.
Syntax |
CheckWithAlert($Line);
|
Example |
if(!$CheckWithAlert($Line)) { print "error in $LineNum ..."; }
|
Input |
- $Content (string)
- javascript source code line
|
Return |
- 0 or 1 (boolean)
- 1 if no problem could be found, otherwise 0
|
CheckYUICompressor
Call external YUI compressor application to check JavaScript syntax.
Syntax |
CheckYUICompressor($File);
|
Example |
my ($JSLintOK, $Output) = CheckYUICompressor($JSFile);
|
Input |
- $JSFile (string)
- javascript full file path
|
Return |
- (0 (ref.array)
- 1, $Output) | Array with two values: 1 or 0 whether YUI found any
errors/warnings and the YUI error output string
|