开源夏令营之项目汇报2

来源：互联网发布：淘宝免单群是什么意思编辑：程序博客网时间：2024/05/16 18:09

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" onclick="testClick()"/>
</body>
</html>

0 0