章节3.封装js库过渡到jQuery

理解 JavaScript 库

什么是 JavaScript 库？就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Swiper、 Prototype、Dojo、Extjs、Zepto 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。本章节，我们尝试自己封装一个js库，主要目的是提升我们的编程能力和面向对象的思维。

# 1. 对象字面量形式执行对象里面的方法达到简化获取对象节点的操作

新建一个/static/js/myBase.js文件，在里面编写最常用的代码，然后不断的扩展封装。

// let menu = document.getElementById('banner');
// console.log(menu.innerHTML);

var myBase = { //整个库可以是一个对象
    getId: function (id) { //方法尽可能简短而富有含义
        return document.getElementById(id);
    },
    getName: function (name) {
        return document.getElementsByName(name);
    },
    getTagName: function (tag) {
        return document.getElementsByTagName(tag);
    }
}

let menu = myBase.getId('banner');
menu.setAttribute('data',456);
menu.onclick = function(){
    console.log('我是广告栏');
}

//那么现在有新的需求了
menu.setAttribute('data',456).onclick = function(){
    console.log('我是广告栏');
}
//发现报错了
//console.log(menu.setAttribute('data',456));//undefined
//那么如何进行连缀操作呢？连缀操作: 一个或者多个节点同时进行两个或以上的操作

# 2. 改写库对象：通过构造函数和原型改写库对象

我们上节课提到要实现连缀功能，我们来分析一下：

myBase是一个基础库的核心对象，menu.setAttribute('data',456)返回的是什么？

返回的是一个undefined，没有onclick事件可以执行，那思考什么可以返回执行？；

有的同学会想到，就是我们上节课刚讲的面向对象，将menu.setAttribute('data',456)返回的结果改成myBase对象；

myBase对象在添加一个click事件不就可以了吗？

即在myBase对象中添加html方法，click方法，setAttribute方法，css方法等等，就可以一直进行连缀操作了。即menu.setAttribute('data',456)应该返回myBase对象，不应该是undefined，menu.setAttribute('data',456).onclick 返回的也应该是myBase对象对象，这样就可以一直连缀下去。
menu.setAttribute('data',456).click(function(){
    console.log('我是广告栏');
}).css('backgroundColor','red');

那么很明显，我们上面的库返回的是节点对象，没有机会了，因此我们要改写我们的基础库。我们需要返回一个对象，然后可以调用里面的方法，而创建一个对象，我们很容易想到我们上一个章节的面向对象与原型还有继承，创建对象我们可以用构造函数、原型还有类来创建，由于我们本季主要是教大家面向对象的编程思维和策略，因此我们不用类创建，关于类创建对象，我们后面有大型项目，在使用类，类里面的知识很多，我们上一章节只是讲了类的基础知识。回到我们的问题，我们先尝试通过构造函数来创建对象。

<div id="box">我是用来测试的</div>
function Mybase(){
    this.getId = function(id){ 
        return  document.getElementById(id);
    }
}

let mybase = new Mybase();
console.log(mybase.getId('box'));//还是节点对象
//我们需要mybase.getId('box')返回的是mybase对象，才能继续调用，那该如何写？

//我们先用正常程序写一下这些功能
mybase.getId('box').style.color = 'red';
mybase.getId('box').style.backgroundColor = 'green';
mybase.getId('box').innerHTML = '我是box';
mybase.getId('box').setAttribute('data',123);
mybase.getId('box').onclick = function(){
    console.log('我被点了');
};
//我们现在希望通过连缀来完成：
// mybase.getId('box').css('color','red').css('backgroundColor','green')
// .html('我是box').attr('data',123).click(function(){
//     console.log('我被点了');
// })
//因此，我们上面的程序，不应该返回document.getElementById(id)；而应该返回this,this不就是我们的Mybase构造函数对象吗？

因此，我们需要创建一个数组，来保存获取的节点（id获取的是节点）和节点数组（其他方式获取的是节点数组）

# ① 获取id节点，返回实例对象mybase，给构造函数原型添加css方法

function Mybase(){
    //创建一个数组,来保存获取的节点和节点数组
    this.elements = [];
    //获取id节点
    this.getId = function(id){ 
        //return  document.getElementById(id);
        this.elements.push(document.getElementById(id));
        return this;
    };
    // this.css = function(){} 这是操作，写这里不好管理，可以写在外面，写外面可以用原型方法
}
Mybase.prototype.css = function(attribute,value){
    //mybase.getId('box').style.color = 'red';
    //mybase.getId('box').style.backgroundColor = 'green';
    this.elements[0].style[attribute] = value;
    return this;
}


let mybase = new Mybase();
console.log(mybase.getId('box'));//返回mybase实例对象
//通过输出结果，我们可以看到可以在里面继续添加方法，如css方法，attr方法，html方法，click方法等
//接下来完成这步：mybase.getId('box').css('color','red')
//mybase.getId('box').css('color','red');
mybase.getId('box').css('color','red').css('backgroundColor','green');
//同学们听完应该豁然开朗了，但是，我们的写法不够完美，因为数组用的下标，如果多个元素就不好办了

# ② 改写构造函数原型css方法，处理多个节点存放问题，html方法按照css方法进行扩展测试，扩展click方法

//获取元素节点
   this.getTagName = function (tag) {
      //this.elements.push(document.getElementsByTagName(tag));
      let tags = document.getElementsByTagName(tag);
      for(let i=0;i<tags.length;i++){
        this.elements.push(tags[i]);
      }
      return this;
   }
//执行元素节点
console.log(mybase.getTagName('p'));

mybase.getTagName('p').css('color','blue');//发现只改了一个p
//改写css方法
Mybase.prototype.css = function(attribute,value){
   // mybase.getId('box').style.color = 'red';
   // mybase.getId('box').style.backgroundColor = 'green';
   //this.elements[0].style[attribute] = value;
   for(let i=0;i<this.elements.length;i++){
     this.elements[i].style[attribute] = value;
   }
   return this;
}

//接着写html方法
Mybase.prototype.html = function(str){
    // mybase.getId('box').innerHTML = '我是box';
    for(let i=0;i<this.elements.length;i++){
        this.elements[i].innerHTML = str;
    }
    return this;
}

mybase.getTagName('p').css('color','blue').html('我是段落p');

//接着扩展click方法
mybase.getTagName('p').css('color','blue').html('我是段落p').click(function(){
    console.log('我被点了')
}).css('backgroundColor','black');

Mybase.prototype.click = function(fn){
    for(let i=0;i<this.elements.length;i++){
        this.elements[i].onclick = fn;
    }
    return this;
}

//同时执行 mybase.getId('box').css('color','red').css('backgroundColor','green');有问题了
//发现我们执行的代码被后面的代码替代了，我们可以查看一下中控台 console.log(mybase);
// this.elements[i]包含了id='box' 还有p的元素，因此设置p元素样式时候，会覆盖id='box'的元素
// 那么该怎么解决呢？此时我们应该想到，我们实例化的时候，就不该只实例化一个对象，因为我们操作的元素不同
// 我们应该实例化两个对象，分别来处理我们的div#box,p元素
//实例化多个对象
// let mybase1 = new Mybase();
// let mybase2 = new Mybase();
let $ = function(){
    return new Mybase();
}
$().getId('box').css('color','red').css('backgroundColor','green');
$().getTagName('p').css('color','blue').html('我是段落p').click(function(){
    console.log('我被点了')
}).css('backgroundColor','black');

# ③ 改造html方法，可以设置或者获取内容

在上一节课我们通过 html()方法和 css()方法可以设置内容和 CSS 样式，但我们如何通过这两个方法来获取内容或样式呢？比如：

console.log($().getId('box').html()); //获取内容
console.log($().getId('box').css('fontSize')); //获取 CSS 样式

要实现获取内容，只要判断传递过来的参数即可

//设置或者获取内容
Mybase.prototype.html = function (str) {
    // mybase.getId('box').innerHTML = '我是box';
    for (let i = 0; i < this.elements.length; i++) {
        //判断传参 arguments.length
        if (arguments.length == 0) { //没有传参
            return this.elements[i].innerHTML;//返回内容
        } else {
            this.elements[i].innerHTML = str;
        }
    }
    return this;
}
// console.log($().getId('box').html());//获取内容
// console.log($().getId('box').html('我是p标签'));//设置内容

关联知识：第二学期_第1季——章节5_3、函数的arguments 对象

# ④ 改造css方法，可以设置获取css样式

<div id="box" style="font-size: 20px;">我是测试的</div>
// $().getId('box').css('fontSize','100px');
// console.log($().getId('box').css('fontSize')); //获取 CSS 样式
Mybase.prototype.css = function (attribute, value) {
    for (let i = 0; i < this.elements.length; i++) {
        if(arguments.length == 1){
           //return  this.elements[i].style[attribute];
           return window.getComputedStyle(this.elements[i], null)[attribute];
        }
        this.elements[i].style[attribute] = value;
    }
    return this;
}
//但无法获取计算后的样式
console.log($().getId('box').css('height'));//计算后的样式

计算后的样式：第二学期_第1季——章节15_6.操作css样式_③计算后的样式

# 3. 封装js库总结

//实例化多个对象
// let mybase = new Mybase();
// let mybase1 = new Mybase();
let $ = function () {
    return new Mybase();
}
//基础库
function Mybase() {
    //创建一个数组,来保存获取的节点和节点数组
    this.elements = [];
}
//获取id节点
Mybase.prototype.getId = function (id) {
    this.elements.push(document.getElementById(id));
    return this;
}
//执行元素节点
Mybase.prototype.getTagName = function (tag) {
    let tags = document.getElementsByTagName(tag);
    for (let i = 0; i < tags.length; i++) {
        this.elements.push(tags[i]);
    }
    return this;
}
//设置或获取css
Mybase.prototype.css = function (attribute, value) {
    for (let i = 0; i < this.elements.length; i++) {
        if(arguments.length == 1){
           //return  this.elements[i].style[attribute];
           return window.getComputedStyle(this.elements[i], null)[attribute];
        }
        this.elements[i].style[attribute] = value;
    }
    return this;
}
//设置或者获取内容
Mybase.prototype.html = function (str) {
    // mybase.getId('box').innerHTML = '我是box';
    for (let i = 0; i < this.elements.length; i++) {
        //判断传参 arguments.length
        if (arguments.length == 0) { //没有传参
            return this.elements[i].innerHTML;//返回内容
        } else {
            this.elements[i].innerHTML = str;
        }
    }
    return this;
}
//触发点击事件
Mybase.prototype.click = function (fn) {
    for (let i = 0; i < this.elements.length; i++) {
        this.elements[i].onclick = fn;
    }
    return this;
}


/*
$().getId('box').css('color','red').css('backgroundColor','green');
$().getTagName('p').css('color','blue').html('我是段落p').click(function(){
    console.log('我被点了');
}).css('backgroundColor','black');

console.log($().getId('box').html());//获取内容

console.log($().getId('box').css('fontSize')); //获取 CSS 样式
$().getId('box').css('fontSize','100px');
console.log($().getId('box').css('height'));//计算后的样式
*/

以上，是我们通过简单封装js库，让大家进一步理解面向对象、原型在开发中的思维和重要性，主要目的是拓宽大家的面向对象思维能力。然后，顺便通过封装我们DOM章节的知识点，让大家回忆一下我们第二学期第1季DOM章节操作我们节点的一些方法，做到一个前后呼应。

当然：

回到我们目前封装的js库本身，还有很多的方法没有封装，比如：获取class类名、设置class类名、添加class类名、移除class类名等等很多功能，而且我们的库还需要进一步的改进。

那么：

在我们实际开发中，有没有我们IT界的前辈或者大佬，帮我们写好了操作我们js的库呢，功能和我们上面自己封装的功能一样呢，而且功能更加完善呢？

答案是：有的。回到我们本章的开头，现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Swiper、 Prototype、Dojo、Extjs、Zepto 等等。而这里面最为优秀，被封神的 JavaScript 库就是我们的：jQuery库，那么我们下一章节将学习如何使用jQuery库。

# ② css()方法传递多个样式属性的数组，得到样式属性值对象数组，$.each(box,function(attr,value){})遍历原生态对象数组，jQuery对象数组采用$(selector).each(function(index,element){})方法遍历

# 其它学期课程

# 第一学期（学习顺序：01）

第一学期课程专为零基础的学员定制录制的，纯html+css做企业网站的网页，主讲html和css的相关基础知识，flex布局相关知识，封装css基础样式库，引入字体图标及网页开发基础布局思维，完成企业网站网页的开发过程。

[第一学期学习视频]

# 第二学期【第1季】（学习顺序：02）

主讲JavaScript的基础，建议所有学员观看。
[第1季学习文档] [第1季学习视频]

# 第二学期【第2季】（学习顺序：03）

JavaScript中的面向对象，类，ajax，封装js库过渡到jQuery， vue.js基础配置网站页面，建议所有学员观看。
[第2季学习文档] [第2季学习视频]

# 第二学期【第3季】（学习顺序：04）

egg.js基础，响应式网页布局，Bootstrap框架，响应式后台系统管理，完整企业网站前后台开发，建议所有学员观看。
[第3季学习文档] [第3季学习视频]

# 第二学期【第4季】（学习顺序：05）

主要对第三季，同学们开发的企业网站，进行一个完整的上线运维流程的一个讲解，同学们将网站开发完成之后，如何进行上线运维，将项目交付给客户。
[第4季学习文档] [第4季学习视频]