Overview
I think Javascript is difficult for operation.If you use jslint which is code quality check tool,
you can decrease operation cost(a little bit) of Javascript I think. Here I’ll use this.
Environment
- OS
- Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
- nvm
- v0.10.26
Install
- Install nvm
- npm install jslint
How to use
I’ll try to use jslint to the code which get information fromHatena Bookmark Entry API.
1.hatena.html
hatena.html 12345678910111213<!DOCTYPE html>
<html>
<head>
<title>jslint test</title>
</head>
<body>
<button id="button1" type="button">Push</button>
<div id="msg"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="hatena.js"></script>
</body>
</html>
2. hatena.js
hatena.js 123456789101112131415161718192021222324252627282930/*
* hatena.js
*/
/*jslint browser : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : false,
white : true
*/
/*global $ :true */
$(
"#button1"
).click(
function
(){
$.ajax({
type:
"GET"
,
dataType:
"jsonp"
,
jsonp:
"callback"
,
timeout: 1000,
cache:
false
,
success:
function
(data){
$(
"#msg"
).html(
""
);
$(
"#msg"
).append(data.title +
"<br/>"
);
$(
"#msg"
).append(data.entry_url);
},
error:
function
(){
$(
"#msg"
).html(
"ERROR"
);
}
});
});
/jslint … */ and /global … */ is jslint setting.
Of course, you can do setting jslint with command line option and setting file.
(Please check here)
But, this setting is often different from other js file.
So I wrote setting for js file.
3. Execute
result 123$ .
/node_modules/
.bin
/jslint
hatena.js
hatena.js is OK.
Good! Next is error case.
hatena.js2 1234567891011121314151617181920212223242526272829/*
* hatena.js
*/
/*jslint browser : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : false,
white : true
*/
$(
"#button1"
).click(
function
(){
$.ajax({
type:
"GET"
,
dataType:
"jsonp"
,
jsonp:
'callback'
,
timeout: 1000,
cache:
false
,
success:
function
(data, status){
$(
"#msg"
).html(
""
);
$(
"#msg"
).append(data.title +
"<br/>"
);
$(
"#msg"
).append(data.entry_url);
},
error:
function
(){
$(
"#msg"
).html(
"ERROR"
);
}
});
});
I deleted declaration of global variable and add unused argument “status” at success part.
result2 1234567891011121314151617hidetomo@www4322gi:~
/work/jslint
$ .
/node_modules/
.bin
/jslint
hatena.js
hatena.js
#1 '$' was used before it was defined.
$(
"#button1"
).click(
function
(){
//
Line 12, Pos 1
#2 '$' was used before it was defined.
$.ajax({
//
Line 13, Pos 3
#3 '$' was used before it was defined.
$(
"#msg"
).html(
""
);
//
Line 21, Pos 7
#4 '$' was used before it was defined.
$(
"#msg"
).append(data.title +
"<br/>"
);
//
Line 22, Pos 7
#5 '$' was used before it was defined.
$(
"#msg"
).append(data.entry_url);
//
Line 23, Pos 7
#6 Unused 'status'.
success:
function
(data, status){
//
Line 20, Pos 29
#7 '$' was used before it was defined.
$(
"#msg"
).html(
"ERROR"
);
//
Line 26, Pos 7
Error output is like this.
Conclusion and other information
You can decrease operation cost of Javascript a little bit with jslint.Of course, you can use jslint with grunt using this.
(you can find other code quality check tool here)