從基礎開始建立一個JS代碼庫第1/2頁

2019-11-21 01:15:22

字體：大中小

來源：轉載

供稿：網友

由于后臺程序會過濾掉單引號，所以有些地方如果出現莫民奇妙的空格，就表示單引號，特此說明。
/**
* @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, "http://-");
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, "<").replace(/>/g, ">"); //過濾<>左右尖括號
return this.writeRaw(message);
},
header: function(message){ //向日志窗口中寫入一個標題
message = --> + message + <-- ;
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("DOM" + Level[j] + " " + DOM[i] + " Supported.");
}
else {
Susa.log.writeRaw("DOM" + Level[j] + " " + DOM[i] + " Not Supported!")
}
}
}
}
else {
Susa.log.write("No DOMImplementation Supported!");
}
}
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://www.w3.org/1999/xhtml , label) : document.createElement(label); //返回新建元素的引用
}
window[ Susa ][ create ] = create;

/*
* 創建TextNode節點函數
*/
//function createText(elem){ //直接供DOM元素調用
// $(elem)==elem ? this.appendChild(elem):this.appendChild(document.createTextNode(elem));
// return this;
//}
function createText(parent, elem){ //(參考+原創)
return $(elem) == elem ? parent.appendChild(elem) : parent.appendChild(document.createTextNode(elem));
}
window["Susa"][ createText ] = createText;

/*
* 在另一個DOM元素之前插入元素 //(參考+原創)
*/
function before(newNode, referenceNode){

if (!newNode && $(referenceNode) != referenceNode)
return false;
var elems = checkElem(newNode); //得到想要添加節點引用的數組
for (var i = elems.length - 1; i >= 0; i--) {
referenceNode.parentNode.insertBefore(elems[i], referenceNode);
}
}
window[ Susa ][ before ] = before;

/*
* 在另一個元素追加一個子元素,elem可以是一個帶HTML標簽的字符串，也可以使DOM元素節點引用 //(參考+原創)
*/
function append(parent, elem){
if (!elem && $(parent) != parent)
return false;
var elems = checkElem(elem); //得到想要添加節點引用的數組
for (var i = elems.length - 1; i >= 0; i--) {
parent.appendChild(elems[i]);
}
}
window[ Susa ][ append ] = append;

function checkElem(elem){ //before和append函數的輔助函數 //(參考+原創)
var r = [];
if (elem && elem.constructor == String) { //如果參數是字符串
var div = create("div");
div.innerHTML = elem;
for (var i = div.childNodes.length - 1; i >= 0; i--) {
r[r.length] = div.childNodes[i]; //動態生成數組的方法
}
}
else
if (elem && elem.constructor == Array) { //如果參數是數組
var div = create("div");
div.innerHTML = elem.join( );
for (var i = div.childNodes.length - 1; i >= 0; i--) {
r[r.length] = div.childNodes[i]; //動態生成數組的方法
}
}
else
if (elem && $(elem) == elem) { //如果是DOM節點
r[r.length] = elem;
}
return r;
}

/*
* 刪除DOM元素內的全部內容,參數可以使DOM節點引用，也可以是HTML ID標簽
*/
function empty(elem){
elem = transformLabelID(elem);
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}
window["Susa"][ empty ] = empty;

/*
* html函數，可以對DOM元素進行getting和setting,elem可以是字符串也可以是DOM元素的引用 //(原創)
*/
function html(parent, elem){
parent = transformLabelID(parent);
if (elem && $(elem) == elem) {
parent.innerHTML = elem.innerHTML;
return parent;
}
else {
return elem && elem.constructor == String ? parent.innerHTML = elem : parent.innerHTML;
}
}
window["Susa"]["html"] = html;

/*
* 獲取元素文本內容的通用函數,getting和setting都可以
*/
function text(e){
e = transformLabelID(e);
if (arguments[1]) {
e.innerHTML = arguments[1];
}
else {
var t = "";
e = e.childNodes || e; //如果傳入的是元素，則繼續遍歷其子元素，否則假定它是一個數組
for (var j = 0; j < e.length; j++) {
t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j]); //遞歸調用text函數
}
return t;
}
}
window[ Susa ][ text ] = text;

/*
* 與innerHTML和innerText類似的outerHTML和outerText方法 //原創
*/
function outerText(elem, t){
elem = transformLabelID(elem);
//查看是否是DOM節點還是文本字符串
if (t) {
var el = t.constructor == String ? document.createTextNode(t) : t;
elem.parentNode.insertBefore(el, elem); //在當前元素前插入節點
elem.parentNode.removeChild(elem); //之后再刪除當前節點
}
else {
return text(elem); //如果第二個參數為空，則返回當前于是的Text
}

}
function outerHTML(elem, h){
elem = transformLabelID(elem);
if (h) {
var elems = checkElem(h); //返回h字符串或則節點的數組
for (var i = elems.length - 1; i >= 0; i--) {
elem.parentNode.insertBefore(elems[i], elem);
}
elem.parentNode.removeChild(elem);
}
else {
var div = create("div");
div.appendChild(elem);
return div.innerHTML;
}
}
window["Susa"]["outerText"] = outerText;
window[ Susa ]["outerHTML"] = outerHTML;

/*
* wrag以另外一個元素外包當前元素 //原創
*/
function wrag(elem, wragLabel, attrProp){
elem = transformLabelID(elem);
var next = elem.nextSibling || document.body; //獲取elem元素的下一個相鄰的的元素，如果不存在的話就設置為body
var w = create(wragLabel); // 生成一個新元素，用來包含當前元素
for (var o in attrProp) { //設置新建元素的屬性
w.setAttribute(o, attrProp[o]);
}
w.appendChild(elem);
next == document.body ? document.body.appendChild(w) : next.parentNode.insertBefore(w, next); //插入包含元素到文檔中
}
window["Susa"]["wrag"] = wrag;

/*
* 轉化參數為HTML ID標簽為DOM節點引用 //原創
*/
function transformLabelID(str){
return !str ? false : $(str);
}

/*
* 刪除單一的DOM節點，參數可以是節點引用，也可以是HTML ID標簽值 //(原創)
*/
function remove(elem){
transformLabelID(elem).parentNode.removeChild(transformLabelID(elem));
}
window[ Susa ][ remove ] = remove;

/*
* clone函數，返回DOM元素的副本,參數可以是節點引用，也可以是HTML ID標簽值 //(原創)
*/
function clone(elem){
return transformLabelID(elem).cloneNode(true);
}
window[ Susa ][ clone ] = clone;

/*
* 阻止時間冒泡的通用函數
*/
function stopBubble(e){
if (e && e.stopPropagation) { //如果傳入了參數，那么就是w3c的方法
e.stopPropagation();
}
else {
window.event.cancelBubble = true; //IE的方法
}
}
window[ Susa ][ stopBubble ] = stopBubble;

/*
* 防止發生默認瀏覽器行為的通用函數
*/
function stopDefault(e){
if (e && e.preventDefault) { //W3C方法
e.preventDefault();
}
else {
window.event.returnValue = false; //IE方法
}
return false;
}
window["Susa"]["stopDefault"] = stopDefault;

/*
* 獲取元素真實、最終的css樣式屬性值的函數
*/
function getStyle(elem, name){
elem = transformLabelID(elem); //參數elem可以是DOM引用，也可以是
if (elem.style[name]) { //如果屬性存在與style[]中，那么它已被設置了（并且是當前的）
return elem.style[name];
}
else
if (elem.currentStyle) { //否則，嘗試使用IE的方法
return elem.currentStyle[name];
}
else
if (document.defaultView && document.defaultView.getComputedStyle) { //或者W3C的方法，如果存在的話
//它使用的是通用的‘text-align'樣式規則而不是textAlign
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
return document.defaultView.getComputedStyle(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 下一頁閱讀全文

上一篇：javascript Base類包含基本的方法

下一篇：javascript FAQ函數(提問+回復)