javascript基础： 封装-Base库

base.js

一、

//为了避免在前台 new 一个对象,我们可以在库里面直接 new。var $ = function  (){//在前台直接调用$()方法即可返回一个base对象，利用这个base对象就可以调用Base库里封装的方法//alert();return new Base();};/*************************************** ---构造函数--- ***************************************///利用构造函数的方式来创建一个对象就可以给原型对象添加属性function Base (){//把返回的节点对象保存到一个Base对象的属性数组里//当需要使用这个返回的节点对象时就去数组里获取this.elements = [];//以下是获取节点和节点集合的的三个方法//并将节点对象放到数组里this.getId = function(id){this.elements.push(document.getElementById(id)) ;return this;//返回this对象（this这里是Base）目的是实现连缀的调用};this.getName = function(name){var names = document.getElementsByName(name);for(var i = 0;i<names.length;i++){this.elements.push(names[i]);}return this;};this.getTagName = function(tagName){var tags = document.getElementsByTagName(tagName);for(var i = 0;i<tags.length; i++){this.elements.push(tags[i]);}return this;};}/*************************************** ---Prototype--- ***************************************///通过原型增加额外的方法//这些方法最后都返回this对象，目的是实现连缀；//1.给得到的每个节点对象添加点击事件Base.prototype.click = function(fn){//给获得的每个节点对象都添加点击事件for(var i = 0;i<this.elements.length;i++){var obj = this.elements[i];obj.addEventListener('click',fn);//现代点击事件，后期可做兼容的优化}return this;};//2.获取节点的innerHTML内容 || 设置节点的innerHTML属性Base.prototype.html = function(str){for(var i = 0;i<this.elements.length;i++){var obj = this.elements[i];//根据str的长度来决定是获取||设置if(str.length == 0) {//长度为0就是获取return obj.innerHTML;//获取只能放在最后不能实现连缀}else{//长度不为0就是设置obj.innerHTML = str;}}return this;};//3.设置节点的css属性Base.prototype.css = function(attr,value){for(var i = 0;i<this.elements.length;i++){var obj = this.elements[i];//根据参数的个数来判断是获取||设置if(arguments.length == 1){//传入一个参数就是获取//考虑到行内、style、link 所以要获取计算样式//W3Cif(typeof window.getComputedStyle !='undefine'){return window.getComputedStyle(obj, null)[attr];}//IEif(typeof obj.currentStyle != 'undefine'){return obj.currentStyle[attr];}}else if(arguments.length == 2){//传入两个参数就是设置obj.style[attr] = value;}}return this;};//4.获取className节点 || 某个节点下的ClassName节点。Base.prototype.getClassName = function(className,idName){//var all = document.getElementsByTagName('*');//得到所有的节点//if(arguments.length == 1){//for(var i = 0;i<all.length;i++){//在所有节点中筛选//var obj = all[i];//if(obj.className == className){//this.elements.push(obj);//}//}//}    ////if(arguments.length == 2){//var node = document.getElementById(idName);//var nodesById = node.getElementsByTagNameNS('*');//for(var j = 0;j<nodesById.length;j++){//在所有节点中筛选//var objId = nodesById[i];//if(objId.className == className){//this.elements.push(objId);//}//}//}var node = null;if(arguments.length == 1){node = document;}else if(arguments.length == 2){node = document.getElementById(idName);}var all = node.getElementsByTagName('*');for(var i = 0; i<all.length; i++){var obj = all[i];if(obj.className = className){this.elements.push(obj);}}return this;};//5.获取节点数组的某一个Base.prototype.getElement = function (num) {var element = this.elements[num];this.elements = []; //清空数组this.elements[0] = element;return this;};

二、

//6.给节点添加classBase.prototype.addClass = function(className){var objs = this.elements;var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');//创建一个正则表达式对象for(var i = 0;i<objs.length;i++){var obj = objs[i];//查看className是否存在var bl = obj.className.match(reg);//匹配正则表达式if(!bl){obj.className += ' ' + className;}}return this;};//7.给节点移除classBase.prototype.removeClass = function(className){var objs = this.elements;var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');//创建一个正则表达式对象for(var i = 0;i<objs.length;i++){var obj = objs[i];if (obj.className.match(reg)) {obj.className = obj.className.replace(reg , ' ');//替换正则表达式}}return this;};//8.添加link或style的css规则Base.prototype.addRule = function(num,selectorText,cssText,position){var sheets = document.styleSheets;//得到sheet集合var sheet = sheets[num];//得到具体的sheet对象//W3Cif(sheet.insertRule instanceof Function){sheet.insertRule(selectorText +'{' + cssText + '}',position);}//IEif(sheet.addRule instanceof Function){sheet.addRule(selectorText,cssText.position);}//PS:return this;};//9.移除link或style的css规则Base.prototype.removeRule = function(num,position){var sheets = document.styleSheets;var sheet = sheets[num];//W3Cif(sheet.deleteRule instanceof Function){sheet.deleteRule(position);}//IEif(sheet.removeRule instanceof  Function){sheet.removeRule(position);}return this;};//PS:在 Web 应用中,很少用到添加 CSS 规则和移除 CSS 规则,一般只用行内和 Class; //因为添加和删除原本的规则会破坏整个 CSS 的结构,所以使用需要非常小心。