2014年7月12日,周六
项目:html5光影粒子引擎
上次的报告说该项目最主要的就是粒子和canvas,
但做web前端肯定离不开js库的调用,所以这次报告说下js库。
常见的js库有:JQuery,Prototype等等,但也应学会写自己的js库。
一.做js库要注意的问题:
1.不要使用版本(浏览器)检测
2.要使用能力检测
3.使用自己的命名空间(简单的说就是函数名要唯一)
4.js支持多次声明同名函数,但只使用最后声明的版本
5.做到唯一性,不共享。
6.js里区分大小写。
7.匿名函数 (function(){ //代码 })(); 外部无法访问
二.基本模版
(function(){
function $(){ //定义一个$函数,$约等于getElementsById()
//代码
}
window['king']={} //命名空间
window['king']['$']=$; //将明明空间和$注册到windows上
})();
三.应用举例
//king.js
(function(){
window['king']={} //命名空间
function $(){ //定义一个$函数
var elements = new Array();
for(var i=0;i<arguments.length;i++){
var element = arguments[i];
if(typeof element == 'string'){
element = document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}
window['king']['$']=$; //将明明空间和$注册到windows上
function getElementsByClassName(className,tag){
var allTags = document.getElementsByTagName(tag);
var matchingElements = new Array();
className = className.replace(/\-/g,'\\-');
var regex =new RegExp('('|\\s)'+ className + '(\\s|$)');
var element;
for(var i=0;i<allTags.length;i++){
element = allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}
return matchingElements;
}
window['king']['getElementsByClassName']=getElementsByClassName;
})();
//King.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script charset="gb2312" type="text/javascript" src="king.js"></script>
<script type="text/javascript">
function testClick(){
var testInput = king.$("testId","testId2");
//var testInput = king.getElementsByClassName("testme","input");
for(var i=0;i<testInput.length;i++){
alert(testInput[i].value);
}
}
</script>
</head>
<body>
<input type="text" value="test" class="testme" id="testId"/>
<input type="text" value="test2" class="testme" id="testId2"/>
<input type="button" value="clickme" οnclick="testClick()"/>
</body>
</html>