自己实现一个jQuery(0.0.1)

What is jQuery?

核心就是一句话 The Write Less,Do More(写更少,做更多) , ok , let's go!

  • addClass( )功能 (最渣版)
  • 选项1
  • 选项2
  • 选项3
  • 选项4
  • 选项5

如何给id="item3" 添加样式

function addClass(node,classArr){
    var len = classArr.length;
    for(let i = 0 ;i < len ; i++){
        node.classList.add(classArr[i]);
    }
}
// item3 通过id名可以直接获取元素
addClass(item3,['red']); 
// 你也可以这样
addClass(document.getElementById('item4'),['red'])

注意:通过id获取元素不是100%没问题的,你要是非 id="parent" 这样就不好使
这就好比你去银行存钱一样,别人都知道要存真钱,你偏偏搞几张假的存
对对对!任性 随意随意 我只是说说。


这样只是初步封装了方法,但是方法是还在全局作用域,你叫addClass 到时候别人也叫addClass 你可能就被覆盖了 我们是有版权的 来来来 来个帅气签名!

addClass( ) (签名版)

命名空间:给全局对象挂载一个对象 window.myDom = { }
然后在你挂载的myDom 对象上挂载你的属性 、方法

  • 这比之前好在哪里?

好在有“从属”关系而不是“零散“的变量
(至少在阿里没落前)我是阿里的前端 相比 我是一个前端 那个更有份量呢?

window.myDom = {};
myDom.addClass = function (node,classArr){
    var len = classArr.length;
    for(let i = 0 ;i < len ; i++){
        node.classList.add(classArr[i]);
    }
}
myDom.addClass(item3,['red']);
  • 你肯定会不爽因为还不如之前用着爽了 每次还得加命名前缀
    myDom.fn(param)
    myDom.fn2(param)
    直接 item3.addClass(['red']) 才爽 有需求就会有改进

反正都是Node的api 我直接改原型不就好了 于是乎!你又挖了个坑

Node.prototype.addClass =  function (node,classArr){
    var len = classArr.length;
    for(let i = 0 ;i < len ; i++){
        this.classList.add(classArr[i]);
    }
}
 item3.addClass(['red']);  //你遂了心意了 
  • 这样的后果是别人也这样改原型,而且也添加个addClass
    是不是心好累! 为啥?此乃优良传统
    山寨一下 改改加点“我想出"的功能 我就敢说我的比你好! (王者荣耀 与 dota )
    why?你用上了爱迪生的电灯泡 我就问你,你是自己发明一个还是在借鉴他?
    看得远是因为我站在巨人的肩膀上!

我们是讲版权的我的就是我的

我自创一个Node2行不行 以后可能还有Node3

window.Node2 = function(node){
            return {
                addClass:function(classArr){
                    var len = classArr.length;
                    for(let i = 0 ;i < len ; i++){
                        node.classList.add(classArr[i]);
                    }
                }
            }
        }
var node2 = Node2(item4);
node2.addClass(['red']);  //完美
// Node2(item5).addClass(['red'])   是不是有种似曾相识的感觉

说好的jQuery呢? 你把Node2替换成jQuery 在试试

是不是有点感觉了 这是最简单版 以后会慢慢高大上的

jQuery最强大的莫过于选择器 Selector

你肯定听说过一句话 "选择大于能力" (啊!没听过? 现在听过了!)

window.jQyery = function(nodeOrSelector){
            let node ; 
            if(typeof nodeOrSelector ==='string'){
                node = document.querySelector(nodeOrSelector);
            }else{
                node = nodeOrSelector;
            }
            return {
                addClass:function(classArr){
                    var len = classArr.length;
                    for(let i = 0 ;i < len ; i++){
                        node.classList.add(classArr[i]);
                    }
                }
            }
        }
var jqyery = jQyery(item4);
jqyery.addClass(['red']); 

如果用过的人肯定知道jQuery选择器返回的是个伪数组才对

我们使用querySelectorAll()它返回的是一个节点数组(伪数组)
然后给我们内部声明的 nodes 复制获取的每个节点
如果是节点数组就挨个拷贝 如果是一个 我也把你搞成伪数组哪怕就一个甚至没有

window.jQyery = function(nodeOrSelector){
            let nodes = {}; 
            if(typeof nodeOrSelector ==='string'){
                let temp = document.querySelectorAll(nodeOrSelector);
                for(let i=0;i

你肯定会疑惑 为啥每次都 return nodes ==> 答案就是链式操作

$('ul li').addClass(['red']).Text('hi'); //Text 我们还没有实现  ok 马上开始

在内部继续挂载方法 Text( ) 你传递参数就代表设置text你不传递就代表get

nodes.Text = function (text){
    if(text === undefined){
        var texts = [];
        for(let i=0;i

欢迎批评指正!

END

你可能感兴趣的:(自己实现一个jQuery(0.0.1))