前端开发中的重要一环：使用原生JavaScript封装jQuery库

2019独角兽企业重金招聘Python工程师标准>>>

用原生js封装jquery的实现

base.js

/*** 上官清偌*/ // 前台调用 var $ &＃61; function (_this) {return new Base(_this); } //基础库 function Base(_this) {//创建一数组保存节点和数组的节点,保存为私有成员this.elements &＃61; [];//把this传进来&＃xff1a;//_this是一个对象&＃xff0c;undefined也是一个对象if (_this !&＃61; undefined) {this.elements[0] &＃61; _this;} }Base.prototype &＃61; {//获取idgetId: function (id) {this.elements.push(document.getElementById(id));return this;},//获取所有的class节点的数组getClass: function (className, idName) {var node &＃61; null;if (arguments.length &＃61;&＃61; 2) {node &＃61; document.getElementById(idName);} else {node &＃61; document;}var all &＃61; document.getElementsByTagName(&＃39;*&＃39;);for (var i &＃61; 0; i //获取元素节点getTagName: function (tagName) {//先获取到每所有的节点&＃xff0c;然后在进行添加var tags &＃61; document.getElementsByTagName(tagName);for (var i &＃61; 0; i // 触发点击事件clickclick: function (fn) {for (var i &＃61; 0; i getInner().width - element.offsetWidth) {element.style.left &＃61; getInner().width - element.offsetWidth &＃43; &＃39;px&＃39;;}if (element.offsetTop > getInner().height - element.offsetHeight) {element.style.top &＃61; getInner().height - element.offsetHeight &＃43; &＃39;px&＃39;;}};}return this;}}//插件的入口部分 Base.prototype.extend&＃61;function (name,fn) {Base.prototype[name]&＃61;fn; }/*封装常见的涵数**********************************************************/ //跨浏览器添加事件绑定//跨浏览器添加事件绑定 function addEvent(obj, type, fn) {if (typeof obj.addEventListener !&＃61; &＃39;undefined&＃39;) {obj.addEventListener(type, fn, false);} else {//创建一个存放事件的哈希表(散列表)if (!obj.events) obj.events &＃61; {};//第一次执行时执行if (!obj.events[type]) {//创建一个存放事件处理函数的数组obj.events[type] &＃61; [];//把第一次的事件处理函数先储存到第一个位置上if (obj[&＃39;on&＃39; &＃43; type]) obj.events[type][0] &＃61; fn;} else {//同一个注册函数进行屏蔽&＃xff0c;不添加到计数器中if (addEvent.equal(obj.events[type], fn)) return false;}//从第二次开始我们用事件计数器来存储obj.events[type][addEvent.ID&＃43;&＃43;] &＃61; fn;//执行事件处理函数obj[&＃39;on&＃39; &＃43; type] &＃61; addEvent.exec;} }//为每个事件分配一个计数器 addEvent.ID &＃61; 1;//执行事件处理函数 addEvent.exec &＃61; function (event) {var e &＃61; event || addEvent.fixEvent(window.event);var es &＃61; this.events[e.type];for (var i in es) {es[i].call(this, e);} };//同一个注册函数进行屏蔽 addEvent.equal &＃61; function (es, fn) {for (var i in es) {if (es[i] &＃61;&＃61; fn) return true;}return false; }//把IE常用的Event对象配对到W3C中去 addEvent.fixEvent &＃61; function (event) {event.preventDefault &＃61; addEvent.fixEvent.preventDefault;event.stopPropagation &＃61; addEvent.fixEvent.stopPropagation;return event; };//IE阻止默认行为 addEvent.fixEvent.preventDefault &＃61; function () {this.returnValue &＃61; false; };//IE取消冒泡 addEvent.fixEvent.stopPropagation &＃61; function () {this.cancelBubble &＃61; true; };//跨浏览器删除事件 function removeEvent(obj, type, fn) {if (typeof obj.removeEventListener !&＃61; &＃39;undefined&＃39;) {obj.removeEventListener(type, fn, false);} else {for (var i in obj.events[type]) {if (obj.events[type][i] &＃61;&＃61; fn) {delete obj.events[type][i];}}} }// //获取Event对象 // function getEvent(event) { // return event || window.event; // } //跨浏览器获取视口大小 function getInner() {if (typeof window.innerWidth !&＃61; &＃39;undefined&＃39;) {return {//ff浏览器width: window.innerWidth,height: window.innerHeight}} else {return {//ie,choremwidth: document.documentElement.clientWidth,height: document.documentElement.clientHeight}} }//删除左后空格 function trim(str) {return str.replace(/(^\s*)|(\s*$)/g, &＃39;&＃39;); }//滚动条清零 function scrollTop() {document.documentElement.scrollTop &＃61; 0;document.body.scrollTop &＃61; 0; }// /*阻止默认行为*/ // function preDef(event) { // var e &＃61; getEvent(event); // if (typeof e.preventDefault !&＃61; &＃39;undefined&＃39;) {//W3C // e.preventDefault(); // } else {//IE // e.returnValue &＃61; false; // } // }