]]>
I was told something about js module framework two years ago. But without a deep dive into it, so that I have to ride out large bundles of js files in a mess on our projects for a long time. After kejun’s YUI presentation on D2 2009, I thought that it’s time to change.
Why use js module?
1, better js organization, readable + flexible + dependencies ordering
2, better performance, asynchronize loading JIT
How we did it before?
1, inline script in jsp : hard to unittest, make the file looks tedious and ugly
2, separated js script file: bad organization, too many ugly import tag <script>
What is the existed solution?
1, YUI module: http://developer.yahoo.com/yui/yuiloader/
2, Jawr: a tunable packaging solution for Javascript and CSS written in java
3, jQuery getSscript: http://ejohn.org/blog/degrading-script-tags/
4, jspkg: http://jspkg.sourceforge.net/docs/index.html
5, module.js http://ajaxian.com/archives/modulesjs-a-new-stand-alone-javascript-module-loader
]]>
2 var allfalse = [false, false, false];// false
3 var chaos = [true, false, true, false];// true
4 //1,logic operation;2,shorten-cycle;
5 function LogicXOR(){
6 var args = arguments;
7 if (args.length == 1) {
8 if (args[0].length) {
9 args = args[0];
10 }
11 else {
12 return args[0];
13 }
14 }
15
16 var count = args.length;
17 while (--count > 0) {
18 if (!args[count] !== !args[count - 1])
19 return true;
20 }
21 return false;
22 }
23
24 alert(LogicXOR(alltrue))
25 alert(LogicXOR(allfalse))
26 alert(LogicXOR(chaos))
27 alert(LogicXOR(true, true, true))
28 alert(LogicXOR(false, false, false))
29 alert(LogicXOR(true, false, true, false))
]]>
如果是IE 7，內存泄漏， 直到離開當前頁面為止
如果是IE 8， GC回收器回收他們的內存，無論當前是不是compatibility模式。
為什么有內存泄漏？
之前的IE js引擎里的GC回收器只能處理js對象，不能處理DOM對象。
refer to: http://msdn.microsoft.com/en-us/library/dd361842%28VS.85%29.aspx#compat
]]>
2, new Object vs new Object()
3, function foo(){} vs var foo=function foo(){}
4，var a=b=undefined; vs var a,b;
5,
1 function Foo(){
2 return true;
3 }
VS2 return true;
3 }
function Foo(){
return
true;
}
6, var a =[[1,2,3],[1,2,3],[1,2,3]]return
true;
}
a[1][2] VS a[1,2]
]]>
#1 avoid function calls
#2 embrace the language: []>array, {} > object
#3 loop: no loop > loop
#4 cache globals: function(){var w =window;}
#5 expression tuning: false move to before &&, true move to before ||
#6 what not to use: e.g. with , eval, try catch,
]]>
2 //a();//runtime error: a is not a function
3 //b();//runtime error: b is not defined
4 function c(){};//c will be defined and assigned value when pre-compile
5 var a = function b(){ //b will be delete, a will be defined when pre-compile, a assigned value when runtime
6 };
7 a();
]]>
2 var totalweight = eval(productWeight.join("+"))
3 var weighedProducts = new Array()
4 var currentProducts = 0
5 while (currentProducts < productList.length) {
6 for (i = 0; i < productWeight[currentProducts]; i++) {
7 weighedProducts.push(productList[currentProducts]);
8 }
9 currentProducts++
10 }
11 return function(){
12 var randomnumber = Math.floor(Math.random() * totalweight)
13 return (weighedProducts[randomnumber]);
14 };
15 };
16 var productList = ["AK-47", "Blade", "Food", "ByondGod"]
17 var productWeight = [200, 20, 4, 1];
18 var myFun = buildFunction(productList, productWeight);
19 for (var i = 0; i < 100; i++)
20 document.writeln((i+1)+":"+myFun())
]]>
var uuid = 0;
var NEW = 0, PENDING = 1, FINISH = 2;
var RemoteRule = window.RemoteRule = function(fn, options){
this.id = uuid++;
this.fn = fn;
this.para = options.requestPara;
this.showTips = function(){
options.showTips();
}
}
var RemoteValidator = window.RemoteValidator = function(){
this.rules = {};
this.status = {};
}
RemoteValidator.prototype = {
addRule: function(rule){
this.rules[rule.id] = rule;
this.status[rule.id] = NEW;
},
reset: function(){
this.rules = {};
this.status = {};
},
validate: function(callBack){
var self = this;
for (var id in self.rules) {
var rule = self.rules[id];
var updateFn = (function(){
return function(data){
if (data) {
delete self.status[rule.id];
}
else {
self.hasError = true;
}
if (self.hasError) {
rule.showTips();
}
var isEmpty = true;
for (var id in self.status) {
isEmpty = false;
break;
}
if (isEmpty) {
callBack();
}
}
})();
self.status[rule.id] = PENDING;
rule.fn(rule.para, updateFn);
}
}
}
})();
var dwrFnMock = function(para, callBack){
setTimeout(function(){
if (para.value > 0)
callBack(true);
else
callBack(false);
}, 1000);
};
var validator1 = new RemoteValidator();
validator1.addRule(new RemoteRule(dwrFnMock, {
requestPara: {
value: 1
},
showTips: function(){
alert("hasError!");
}
}));
validator1.validate(function(){
alert("submit");
});
var validator2 = new RemoteValidator();
validator2.addRule(new RemoteRule(dwrFnMock, {
requestPara: {
value: -1
},
showTips: function(){
alert("hasError!");
}
}));
validator2.validate(function(){
alert("submit");
})
]]>
2, Use data method instead of storing data inside the DOM.
$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');
3, If you are Manipulating the DOM a lot, use livequery.(1.3)
$('div.edit').livequery('click', function(){
//go into edit mode
});
4, Use classes as flags:With jQuery you can add a class with the addClass method and then check later if an element has the class with the hasClass method.
5, use same function name to handle different arguments
6, pass options for configuration data
7, test your code by screw.unit
8, make most jQuery code into resuable plugins
jQuery plugin pattern tips:
(from: http://www.learningjquery.com/2007/10/a-plugin-development-pattern)
1. Claim only a single name in the jQuery namespace
2. Accept an options argument to control plugin behavior
3. Provide public access to default plugin settings
4. Provide public access to secondary functions (as applicable)
5. Keep private functions private
6. Support the Metadata Plugin
已有 0 人發表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:http://sevenduan.javaeye.com/blog/507354
]]>
var hashCode = function(element){
return element.sort().toSource();
}
Array.prototype.dell = function(hashCode){
var deleList = [];
var obj = {};
do {
var ele = this.pop();
var key = hashCode(ele);
if (obj[key]) {
deleList.push(ele);
}
else {
obj[key] = ele;
}
}
while (this.length > 0);
for (var key in obj) {
this.push(obj[key]);
}
return deleList;
}
var list = [[3, 1], [1, 2], [1, 3]]
expect([[1, 3]]).to(equal, list.dell(hashCode));
expect([[1, 2], [1, 3]].sort()).to(equal, list.sort());
已有 0 人發表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:http://sevenduan.javaeye.com/blog/506830
]]>
e.g.
如果沒有必要，可以不用regular expression
String.indexOf, String.lastIndexOf > String.match, String.search, String.replace
2, 面對large loop就要斤斤計較
2.1 Create once, use repeatedly
for( var i = 0, oNode; oNode = oElement.childNodes[i]; i++ ) {
if( oNode.nodeValue.match(/^\s*extra.*free/g) ) {
//this creates the expression
//it will be cached and re-used next time through the loop
}
}
for( var i = 0, oNode; oNode = oElement.childNodes[i]; i++ ) {
if( oNode.nodeValue.match(new RegExp(“^\s*extra.*free”,”g”)) ) {
//this will always create a new copy of the expression,
//and is generally much slower than creating static expressions.
}
}
2.2 Referencing element once, use repeatedly
var _table =$("#tableId")
for (var index in json) {
otherFun(_table, json[index]);
};
3 eval is evil
Eval 或者 new Function() 執行時，瀏覽器先創建整個scripting環境（就像一個新頁面），導入scope chain中所有變量，執行script，gc, 最后導出所有變量到當前環境。（in a word, cost much）另外，js engine還不能對它們進行cache優化。
4 less is more
Less code, short naming
Only add event listener what you need
5 do less
Take a short circuit
e.g
var logger=window.console && window.console.dir
var logger=window.console || {}
less XHR calling
e.g. enable cache for the same request
6 Reduce reflow
每當添加element到document里，browser就會reflow整個頁面去計算如何重新定位和渲染。
7，cache
Enable cache for duplicated XHR calling
Enable cache for js script file, so move out jscript from jsp to js file.
Reference:
http://slowjavascript.com/JavaScript_Performance_Rocks_Checklist.pdf
已有 0 人發表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:http://sevenduan.javaeye.com/blog/505272
]]>
個人首選aptana IDE,因為用慣了eclipse快捷鍵。
根據個人喜好，可選intelJ,gvim
2，debugger
熟記debugger的快捷鍵是高效coding的關鍵之一。
FF當屬firebug，IE除了IE8的debugger沒有一個好鳥。
3，API doc
熟練翻閱各種API電子書，HTML 和 jscript的電子書是必備的，根據需要常備YUI，mootools,jquery等。要知道，許多api的function并不是可以那么容易google得到的。
e.g.string.replace(Regex, function)
function f2c(s) {
var test = /(\d+(\.\d*)?)F\b/g; //Initialize pattern.
return(s.replace
(test,
function($0,$1,$2) {
return((($1-32) * 5/9) + "C");
}
)
);
}
4，小眾工具
YSlow, Google page speed, httpwatch ==> performance tuning
Jslint ==> coding convention
YUI Compressor, Jawr => compress
5，茶余飯后的消遣
先看看yui,mootools,jquery,Prototype & script.aculo.us,ext的source code,
然后回來refactor自己項目里成團的FML的js
閑的蛋疼就去51js吹牛起哄
已有 0 人發表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:http://sevenduan.javaeye.com/blog/504691
]]>