您的位置：首页 > Web前端 > JQuery

js 模拟 jQuery 以及扩展功能 extends

2020-03-30 08:25 991 查看

直接上代码：（理解请看注释，下方还有html实例测试）

//****************************************匿名函数自执行
(function () {
/*定义类（构造函数）——$$*/
class $$ {
/*实例的各种方法的构造器*/
constructor(selector) {//此处的参数为new实例时传入的
/*解析参数,得到节点*/
let dom;
typeof selector !== 'string' ? dom = selector : dom = document.querySelectorAll(selector);
/*实例的方法*/
/*获取或设置dom属性*/
this.dom = dom;
this.attr = function (keys, values) {
if (values === undefined) {
return dom.getAttribute(keys)
} else {
dom.setAttribute(keys, values)
}
};
this.test = function () {
return '这是$()的方法：test'
};
}
}

/*定义window的全局方法——$*/
window.$ = function (selector) {
return new $$(selector);
};

/*定义$本身的方法*/
$.sum = function (arr) {
let sum = 0;
for (let i of arr) {
sum = sum + parseFloat(i);
}
return sum
};
$.test = function () {
return '这是$本身的方法：test'
};

/*将原型对象赋予给$的fn属性*/
$.fn = $$.prototype;
/*函数本身的扩展方法*/
$.extends = function (obj) {
let keyName = Object.keys(obj)[0];
let keyValue = obj[Object.keys(obj)[0]];
return $[keyName] = keyValue;
};
/*实例化的扩展方法*/
$.fn.extends = function (obj) {
let keyName = Object.keys(obj)[0];
let keyValue = obj[Object.keys(obj)[0]];
return $.fn[keyName] = keyValue;
};

})();

//************************************代码测试区域

/*基础功能测试*/
console.log($.test());// 这是$本身的方法：test
console.log($.sum([1, 2, 3, 4]));// 10

console.log($().test());// 这是$()的方法：test

/*扩展测试*/
$.extends({
open() {
return 123
}
});
console.log($.open()); //123

$.fn.extends({
open() {
return 789
}
});
console.log($().open()); //789

附上html的测试代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myFn</title>
</head>
<body>
<div id="my_div"></div>
<div class="my_div"></div>
<div onclick="beClick(this)" class="btn pp">123</div>

<script src="js/myFn.js"></script>
<script>
//测试传this
function beClick(obj) {
//调用实例的方法
$(obj).attr('data_id', 456);
console.log($(obj).attr('data_id'));//456
}

//测试传选择器
console.log($('#my_div').dom[0]);//返回这个节点

</script>
</body>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
学习！想啥名字 发布了6 篇原创文章 · 获赞 0 · 访问量 135 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航