面试的时候遇到有人问这个问题,如果让你去用JS设计类似于JQuery 的$("#id")、$("#id").size()功能的时候,你如何去做? 这里我研究了一下,最终把它写了下来,让有需要的朋友看一下,欢迎大家讨论。
首先一个页面上有这些元素
<div id="iddv" class="myclass"> my name is allen zhang</div>
<div id="dv" class="dvcs">i was from guizhou province</div>
我们的目的是用原生态的JS实现类似于JQuery 的$("#id")、$("#id").size()功能
1. 实现 $("#id") / $("#class") / $("div")
$ = function (str) {
return new JQuery(str);
}
JQuery = function (str) {
if (str.indexOf("#") == 0)
this.dom = document.getElementById(str.substring(1));
else if (str.indexOf(".") == 0)
this.dom = getElementsByClassName(str);
else
this.dom = document.getElementsByTagName(str);
return this.dom;
}
function getElementsByClassName(str) {
var elements = document.getElementsByTagName('*');
if (!elements) {
for (var i = 0; i <= elements.length; i++) {
if (elements[i].className == str.substring(1)) {
return elements[i];
}
}
}
return "undefined";
}
$("#iddv"); //output: <div id="iddv" class="myclass">
$(".myclass"); //output: <div id="iddv" class="myclass">
$("div"); //[div#iddv.myclass, div#dv.dvcs]
2. 为了实现 $("#id").size() ,在上面的基础上改了一下,同过继承的方式来实现的,如果你对js的继承方式不大了解,可以在网上搜一下,并于更好的理解以下方式。
$ = window.JQuery = function (str) {
return new JQuery.prototype.init(str);
}
JQuery.prototype = {
name: "JQuery",
version: "1.71",
init: function (str) {
if (str.indexOf("#") == 0) {
this.dom = document.getElementById(str.substring(1));
this.length = 1;
}
else if (str.indexOf(".") == 0) {
this.dom = getElementsByClassName(str.substring(1));
this.length = this.dom.length;
}
else {
this.dom = document.getElementsByTagName(str);
this.length = this.dom.length;
}
},
size: function () {
if (this.dom)
return this.length;
}
}
function getElementsByClassName(str) {
var elements = document.getElementsByTagName('*');
if (!elements) {
for (var i = 0; i <= elements.length; i++) {
if (elements[i].className == str.substring(1)) {
return elements[i];
}
}
}
return "undefined";
}
JQuery.prototype.init.prototype = JQuery.prototype; // 这个地方很重要,通过原型链的方式,让$拥有size的方法,否则访问不到这个函数。
$("#iddv").size(); //output: 1
$(".myclass").size(); // output: 1
$("div").size(); // output:2
以上只是一种思想,可能你有更好的方式来实现,欢迎share出来,我们共同探讨一下。