从基础开始建立一个JS代码库第1/2页

时间:2021-05-25

由于后台程序会过滤掉单引号,所以有些地方如果出现莫民奇妙的空格,就表示单引号,特此说明。
/**
* @author Super Sha
* QQ:770104121
* Email:supersha@foxmail.com
* All Rights Reserved!
*/
(function(){ //原创
function $(s){
if (!s)
return false;
return s.constructor == String ? document.getElementById(s) : s;
}
window.$ = $;
})();

(function(){ //匿名封装函数并自执行,在这个函数内定义的函数或者变量可以通用,函数外不可以访问,除非你声明在命名空间下
if (!window.Susa)
window[ Susa ] = {}; //声明Susa命名空间
/*
* 得到元素的引用
*/
function $(){
var elems = new Array();
for (var i = 0; i < arguments.length; i++) {
var elem = arguments[i];
if (typeof arguments[i] == "string") { //进行类型检查
elem = document.getElementById(arguments[i]);
}
//这里具有双关的含义:如果传入的是字符串并且只有一个参数,或者传入的是DOM引用,都返回DOM节点引用
if (arguments.length == 1) {
return elem;
}
else {
elems.push(elem);
}
}
return elems;
}
window[ Susa ][ $ ] = $;

/*
* 返回特定元素内的子元素,或者是document
*/
function tag(type, elem){
elem = elem || document;
type = type || "*"; //如果没有参数,则返回文档的全部元素的引用
return elem.getElementsByTagName(type);
}
window[ Susa ][ tag ] = tag;

/*
* 返回输入框的值
*/
function value(id){
var elem = $(id); //调用匿名函数内定义的方法
if (elem != null && (elem.nodeName == INPUT || elem.nodeName == TEXTAREA )) {
return elem.value;
}
}
window[ Susa ][ value ] = value;

/*
* 可以快速连接字符串的StringBuilder对象 //(原创)
*/
var StringBuilder = {
_arr: new Array,
append: function(str){
if (typeof str == "string") {
this._arr.push(str);
}
return this;
},
toString: function(){
if (this._arr.length != 0) {
var strs = this._arr.join( , );
this._arr = []; //解决返回重复添加的技巧
return strs;
}
else {
return null;
}
}
}
//function appendString(){
// for(var i=0;i<3;i++){
// StringBuilder.append("test");
// }
// return StringBuilder.toString();
//}
//window[ Susa ][ str ]=appendString;

/*
* addEvent和romoveEvent方法
*/
function addEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false;

if (elem.addEventListener) { //W3C的方法
elem.addEventListener(type, fn, false);
return true;
}
else
if (elem.attachEvent) {// IE的方法
//node[ e +type+fn]=fn;
///node[type+fn]=function(){
// node[ e +type+fn](window.event); //不知道为什么要这样
//}
//node.attachEvent( on +type,node[type+fn]);
//return this;
elem.attachEvent( on + type, function(){
fn.call(elem)
});
//注意:在这里用一个匿名函数来防止IE中this对象的指向错误的情况
return this;
}
else {
elem["on" + type] = function(){
fn.call(elem)
};
}
}
function removeEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false;

if (elem.removeEventListener) {//W3C的方法
elem.removeEventListener(type, fn, false);
return true;
}
else
if (elem.detachEvent) // IE的方法
{
//node.detachEvent( on +type,node[type+fn]);
elem.detachEvent( on + type, fn);
return this;
}
}
window[ Susa ][ addEvent ] = addEvent;
window[ Susa ][ removeEvent ] = removeEvent;

/*
* getElementsByClassName方法返回符合某个特定类的全部的元素的引用,tag和elem参数都是可选的
*/
function getElementsByClassName(classname, tag, elem){
elem = elem || document;
if (elem != $(elem) || elem == null)
return false;
//注意这个函数的parent.all的用法,它是用于确认parent是否是document的,并且区分了IE和Mozilia
if (!tag)
tag = "*";
var allTags = (tag == * && elem.all) ? elem.all : elem.getElementsByTagName(tag);

//创建一个正则,来检测是否包含指定的类名
classname = classname.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s*)" + classname + "(\\s*|$)");

var matchElements = new Array();
var elem;
for (var i = 0; i < allTags.length; i++) {
elem = allTags[i];
if (regex.test(elem.className)) { //根据正则来检测类名
matchElements.push(elem);
}
}

return matchElements;
}
window[ Susa ][ getElementsByClassName ] = getElementsByClassName;

/*
* toggleDisplay方法,切换HTML标签的可见性
*/
function toggleDisplay(id, value){
var elem = $(id);
if (elem != $(elem) || elem == null || elem.nodeType != 1)
return false;
if (elem.style.display != "none") {
elem.style.display = "none";
}
else {
elem.style.display = value || ;
}
return true;
}
window[ Susa ]["toggleDisplay"] = toggleDisplay;

/*
* insertAfter方法
*/
function insertAfter(node, referenceNode){
if (node != $(node) || node == null)
return false;
if (referenceNode != $(referenceNode) || referenceNode == null)
return false;

return referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling); //注意使用insertBefore方法,如果第二个参数
} //为null,则插入到parentNode的最末尾
window[ Susa ][ insertAfter ] = insertAfter;

/*
* removeChildren方法,删除当前节点下的所有的子元素
*/
function removeChildren(parent){
if (parent != $(node) || parent == null)
return false;
while (parent.firstChild) { //循环删除节点
parent.firstChild.parentNode.removeChild(node.firstChild);
}
return parent;
}
window[ Susa ][ removeChildren ] = removeChildren;

/*
* prependChild方法,把选择的节点插入到当前节点的最前面
*/
function prependChild(parent, newNode){
if (parent != $(parent) || parent == null)
return false;
if (newNode != $(newNode) || newNode == null)
return false;

if (parent.firstChild) { //判断时候有子函数
parent.insertBefore(newNode, parent.firstChild);
}
else {
parent.appendChild(newNode);
}
return parent;
}
window[ Susa ][ prependChild ] = prependChild;

/*
* bindFunction()方法,用于调整this的执行环境
*/
function adjustFunc(obj, func){ //把func的执行环境调整到obj上来
return function(){ //返回匿名函数的引用
func.apply(obj, arguments);
};
}
window[ Susa ][ adjustFunc ] = adjustFunc;

/*
* 获取显示窗口的width和height,返回一个包含width和height属性的的对象,不公开,只在本匿名函数内供其他方法调用
*/
function getBrowserWindowSize(){
var de = document.documentElement; //获取根节点
var obj = {
width : (window.innerWidth || (de.clientWidth) || document.body.clientWidth),
height : (window.innerHeight || (de.clientHeight) || document.body.clientHeight)
}

return obj;
}

/*
* 调试日志对象
*/
function log(id){
id = id || SusaLogWindow ;
var logWindow = null; //私有属性,用于在各个
var createWindow = function(){ //私有方法,用于动态生成一个列表节点
if (!document.body) {
alert( document.body hasn\ t finished loading. );
return;
}
var browerWindowSize = getBrowserWindowSize();
var top = ((browerWindowSize.height - 200) / 2) || 0; //取得新窗口在浏览器中局中放置是的左上角的位置
var left = ((browerWindowSize.width - 200) / 2) || 0;

logWindow = document.createElement( ul ); //动态生成一个UL元素
logWindow.setAttribute( id , id);

logWindow.style.position = absolute ; //修饰UL元素
logWindow.style.top = top + px ;
logWindow.style.left = left + px ;

logWindow.style.width = 250px ;
logWindow.style.height = 200px ;
logWindow.style.overflow = scroll ;

logWindow.style.padding = 0 ;
logWindow.style.margin = 0 ;
logWindow.style.border = 1px solid black ;
logWindow.style.backgroundColor = white ;
logWindow.style.listStyle = none ;
logWindow.style.font = 10px/10px Verdana,Tahoma,Sans ;

document.body.appendChild(logWindow); //将动态生成的节点添加到body中
}

this.writeRaw = function(message){ //特权方法,用于向createWindow方法生成的UL节点中添加LI内容,需要声明实例才能调用
if (!logWindow)
createWindow(); //如果初始的窗口不存在,则创建它
var li = document.createElement("li"); //动态生成一个LI元素
li.style.padding = 2px ;
li.style.border = 0 ;
li.style.borderBottom = 1px dotted black ;
li.style.margin = 0 2px ;
li.style.color = #000 ;
li.style.font = 9px/9px Verdana,Tahoma,Sans ;

if (typeof message == undefined ) {
li.appendChild(document.createTextNode( Message was undefined! ));
}
else
if (typeof li.innerHTML != undefined ) {
li.innerHTML = message;
}
else {
li.appendChild(document.createTextNode(message));
}

logWindow.appendChild(li); //将生成的LI节点添加到logWindow中
return true;
}
}

log.prototype = {
write: function(message){
if (arguments.length == 0) { //警告message参数为空
return this.writeRaw("Lack of params!");
}

if (typeof message != "string") { //如果传入的参数不是字符串,则尝试调用toString方法,如果不存在该访问则记录对象类型
if (message.toString)
return this.writeRaw(message.toString()); //注意这种判断方法:message.toString.判断某个对象是否包含某个属性
else
return this.writeRaw(typeof message);
}
message = message.replace(/</g, "&lt;").replace(/>/g, "&gt;"); //过滤<>左右尖括号
return this.writeRaw(message);
},
header: function(message){ //向日志窗口中写入一个标题
message = --> <span style="color:red; background:#eee; font-weight:bold;"> + message + </span> <-- ;
return this.writeRaw(message);
}
}
window[ Susa ][ log ] = new log(); //注意要显示声明对象,因为构造函数中使用了特权方法this的引用
/*
* 自创的调试函数(原创),把要测试的函数名作为debug的参数即可,支持多个参数 //(原创)
*/
function debug(){
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] != function ) {
alert("Params sould be Function type!");
return;
}
}
var args = arguments;

(function(){ //封装执行函数过程
try {
for (var i = 0; i < args.length; i++) {
args[i](); //执行函数
}
}
catch (ex) {
Susa.log.writeRaw( Error: + ex.message + " Line:" + ex.lineNumber);
}
})();
}
window[ Susa ][ debug ] = debug;

/*
* 声明与判断节点类型的常量 //原创
*/
window[ Susa ][ node ] = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSION_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
};

/*
* 检测浏览器支持DOM Level的程度的函数(原创)
*/
function CheckDOMLevel(){
if (document.implementation) { //判断是否支持document.implementation属性
var DOM = ["Core", "XML", "HTML", "Views", "SytleSheets", "CSS", "CSS2", "Events", "UIEvents", "MouseEvents", "MutationEvent", "HTMLEvents", "Range", "Traversal", "LS", "LS-Async", "Validation"];
var Level = ["1.0", "2.0", "3.0"];

for (var i = 0; i < DOM.length; i++) {
for (var j = 0; j < Level.length; j++) {
if (document.implementation.hasFeature(DOM[i], Level[j])) { //document.implementation.hasFeature接受两个参数
Susa.log.writeRaw("<span style= color:#0c0; >DOM" + Level[j] + " " + DOM[i] + " Supported.</span>");
}
else {
Susa.log.writeRaw("<span style= color:#c00; >DOM" + Level[j] + " " + DOM[i] + " Not Supported!</span>")
}
}
}
}
else {
Susa.log.write("<span style= color:#c00; ><b>No DOMImplementation Supported!</b></span>");
}
}
window[ Susa ][ CheckDOMLevel ] = CheckDOMLevel;

/*
* 获取和设置元素特性的值,可以获取getter和设置setter的方式调用
*/
function attr(elem, name, value){
if (!name || name.constructor != String)
return ;

//检查name是否出于怪异命名的情形中
name = {
for : htmlFor ,
class : className
}[name] ||
name;

if (typeof value != undefined ) {
elem[name] = value; //首先使用快捷方式
if (elem.setAttribute) { //可以的话,使用setAttribute
elem.setAttribute(name, value);
}
}
return elem[name] || elem.getAttribute(name) || ; //返回特性的值
}
window[ Susa ][ attr ] = attr;

/*
* 创建新DOM元素的通用函数
*/
function create(label){
return document.createAttributeNS ? document.createElementNS( http://putedStyle(elem, null).getPropertyValue(name);

}
else {
return null;
}
}
window["Susa"][ getStyle ] = getStyle;

/*
*把word-word转换成wordWord格式的函数
*/
function camelize(s){
return s.replace(/-(\w)/g, function(strMatch, p){
return p.toUpperCase();
});
}

/*
* 设置元素的css样式,参数为一个对象 (原创)
*/
function setStyle(elem, obj){
elem = transformLabelID(elem);
for (var o in obj) { //遍历obj参数的属性
elem.style[o] = obj[o]; //设置css的style样式
}
}
window[ Susa ][ setStyle ] = setStyle;

/*
* css函数,可是getter和setter,返回特定元素的css样式 //(原创)
*/
function css(elem, obj){
elem = transformLabelID(elem);
if (elem && (typeof obj == "string")) {
return getStyle(elem, obj); //调用了getStyle函数,得到特定的css样式的值
}
else
if (typeof obj == "object") {
for (var o in obj) {
elem.style[o] = obj[o];
}
}
}
window[ Susa ][ css ] = css;

/*
* 合并两个对象,并把合并结果整合到第一个对象 //原创
*/
function mergeObj(obj1, obj2){
if ((typeof obj1 == "Object") && (typeof obj2 == "Object"))
return false;
for (var o in obj2) {
obj1[o] = obj2[o];
}
return obj1;
}
window["Susa"]["mergeObj"] = mergeObj;

/*
* 传入几个函数引用,取最近的那个没有错误的函数并执行 (原创)
*/
function $try(){
for (var i = 0; i < arguments.length; i++) {
try {
return arguments[i](); //执行参数函数
}
catch (ex) {
continue;
}
}
}
window["Susa"]["$try"] = $try;
12下一页阅读全文

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章