// 1.输出类型值,封装typeof方法
// 2.数组去重
// 3.字符串去重
// 4.字符串中只出现一次并且是第一次出现的字符
// 5.圣杯模式 继承模式
// 6.深拷贝
// 7.封装函数,返回元素e的第n层祖先元素
// 8.封装child功能,解决以前部分浏览器不兼容问题,返回元素节点 noteType==1
// 9.封装hasChildren()方法,不可以使用children属性
// 10.封装函数,返回元素e的第n个元素节点,n为正,返回后面的兄弟节点,
// 11.返回元素子节点,按照层级来(不是很好)
// 12.封装insertAfter
// 13.求屏幕滚动距离
// 14.封装函数,获取屏幕当前视口大小
// 15.封装 获取元素css属性值的方法
// 16.封装函数 事件绑定函数 解决兼容性问题 addEvent
// 17.封装取消冒泡事件
// 18.封装阻止默认事件
// 1.输出类型值,封装typeof方法
function type(target) {
// 1.分两类 原始值 引用值
// 2.区分引用值
// 3.null
var template = {
"[object Array]": "array",
"[object Object]": "object",
"[object Number]": "number - object",
"[object Boolean]": "boolean - object",
"[object String]": "string - object"
}
if (target === null) {
return "null";
} else if (typeof (target) == 'object') {
// 数组 对象 包装类 Object.prototype.toString
var str = Object.prototype.toString.call(target);
return template[str];
} else {
return typeof (target);
}
}
// 2.数组去重
// 要求在原型链上编程
// Array.prototype.unique = function () {}
// 利用对象属性名不能相同,哈希值
Array.prototype.unique = function () {
var obj = {},
arr = [],
len = this.length;
for (var i = 0; i < len; i++) {
if (!obj[this[i]]) {
obj[this[i]] = "a";
arr.push(this[i]);
}
}
return arr;
}
// 3.字符串去重
String.prototype.uniqueStr = function () {
var Str = '',
obj = {};
for (var prop in this) {
if (this.hasOwnProperty(prop)) {
if (!obj[this[prop]]) {
obj[this[prop]] = "a";
Str += this[prop];
}
}
}
return Str;
}
// 4.字符串中只出现一次并且是第一次出现的字符
String.prototype.theFirstWord = function () {
var obj = {};
for (var prop in this) {
if (this.hasOwnProperty(prop)) {
(!obj[this[prop]]) ? obj[this[prop]] = 1 : obj[this[prop]] += 1;
}
}
for (var prop in obj) {
if (obj[prop] == 1) {
return prop;
}
}
}
// 5.圣杯模式 继承模式
var inhert = (function () {
var F = {};
return function (target, origin) {
F.prototype = origin.prototype;
target.prototype = new F();
target.prototype.constructor = target;
target.prototype.uber = origin.prototype
}
}())
// 6.深拷贝
function deepClone(origin, target) {
var target = target || {}, //参数预处理
toStr = Object.prototype.toString, //判断是数组还是对象
arrStr = '[object Array]';
for (prop in origin) {
if (origin.hasOwnProperty(prop)) {
if (typeof (origin[prop]) == 'object') {
if (toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
} else {
target[prop] = {};
}
deepClone(origin[prop], target[prop]);
} else {
target[prop] = origin[prop];
}
}
}
}
// 7.封装函数,返回元素e的第n层祖先元素
function retParent(elem, n) {
while (elem && n) {
elem = elem.parentElement;
n--;
}
return elem;
}
// 8.封装child功能,解决以前部分浏览器不兼容问题,返回元素节点 noteType==1
Element.prototype.myChildren = function () {
var child = this.childNodes;
var len = child.length;
var arr = [];
for (var i = 0; i < len; i++) {
if (child[i].nodeType == 1) {
arr.push(child[i]);
}
}
return arr;
}
// 9.封装hasChildren()方法,不可以使用children属性
Element.prototype.myHasChildren = function () {
var child = this.childNodes;
var len = child.length;
for (var i = 0; i < len; i++) {
if (child[i].nodeType == 1) {
return true;
}
}
return false;
}
// 10.封装函数,返回元素e的第n个元素节点,n为正,返回后面的兄弟节点,
// n为负,返回前面的,n = 0返回自己
// 循环一般要考虑条件的合法性
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
e = e.nextElementSibling;
n--;
} else {
e = e.previousElementSibling;
n++;
}
}
return e;
}
// 做浏览器兼容问题
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
if (e.nextElementSibling) {
e = e.nextElementSibling;
} else {
for (e = e.nextSibling; e && e.noteType != 1; e = e.nextSibling);
}
n--;
} else {
if (e.nextElementSibling) {
e = e.nextElementSibling;
} else {
for (e = e.previousSibling; e && e.noteType != 1; e = e.previousSibling);
}
n++;
}
}
return e;
}
// 11.返回元素子节点,按照层级来(不是很好)
Element.prototype.myChild1 = function (obj) {
var Obj = obj || {};
var child = this.childNodes;
var len = child.length;
for (var i = 0; i < len; i++) {
var myNodeName = child[i].nodeName.toString();
if (child[i].nodeType == 1 && child[i].childNodes.length <= 1) {
Obj[i + "." + myNodeName] = child[i].nodeName;
} else if (child[i].nodeType == 1 && child[i].childNodes.length > 1) {
Obj[i + "." + myNodeName] = {};
child[i].myChild1(Obj[i + "." + myNodeName]);
}
}
return Obj;
}
// 12.封装insertAfter
Element.prototype.inserAfter = function (targetNode, afterNode) {
var beforNode = afterNode.nextElementSibling;
if (beforNode == null) {
this.appendChild(targetNode);
} else {
this.insertBefore(targetNode, beforNode);
}
}
// 13.求屏幕滚动距离
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
// 14.封装函数,获取屏幕当前视口大小
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode === "BackCompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
//15.封装 获取元素css属性值的方法
// elem:元素名 prop:css属性名
function getStyle(elem, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[prop];
} else {
return elem.currentStyle[prop];
}
}
// 16.封装函数 事件绑定函数 解决兼容性问题 addEvent
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
} else {
elem['on' + type] = handle;
}
}
// 17.封装取消冒泡事件
function stopBobble(event) {
if (event.stopPropagation) {
event.stopPropagation;
} else {
event.cancelBubble = true;
}
}
// 18.封装阻止默认事件
function cancelHandler(event) {
if (event.preventDefault) {
event.preventDefault;
} else {
event.returnValue = false;
}
}
js封装一些常用功能函数
最新推荐文章于 2021-09-15 18:43:25 发布