第一周：

对前后端交互，cookie，AJAX，跨域请求，promise 回调函数进行了学习和理解。
重点掌握前后端交互的AJAX请求。
AJAX核心代码：

// 1. 创建 ajax 对象
let xhr = new XMLHttpRequest()

// 2. 配置请求信息
xhr.open(‘GET’, ‘./test.php’, true)

// 3. 发送请求
xhr.send()

// 4. 接受响应
xhr.onload = function () {
  console.log(xhr.responseText)
}

ajax 全名 async javascript and XML
是前后台交互的能力
也就是我们客户端给服务端发送消息的工具，以及接受响应的工具
是一个 默认异步 执行机制的功能

ajax 状态码

ajax 状态码 - xhr.readyState
是用来表示一个 ajax 请求的全部过程中的某一个状态
- readyState === 0：表示未初始化完成，也就是 open 方法还没有执行
- readyState === 1：表示配置信息已经完成，也就是执行完 open 之后
- readyState === 2：表示 send 方法已经执行完成
- readyState === 3：表示正在解析响应内容
- readyState === 4：表示响应内容已经解析完毕，可以在客户端使用了
这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据
所以，配合 http 状态码为 200 ~ 299
- 一个 ajax 对象中有一个成员叫做 xhr.status
- 这个成员就是记录本次请求的 http 状态码的
两个条件都满足的时候，才是本次请求正常完成

readyStateChange

在 ajax 对象中有一个事件，叫做 readyStateChange 事件
这个事件是专门用来监听 ajax 对象的 readyState 值改变的的行为
也就是说只要 readyState 的值发生变化了，那么就会触发该事件

所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')

xhr.send()

xhr.onreadyStateChange = function () {
  // 每次 readyState 改变的时候都会触发该事件
  // 我们就在这里判断 readyState 的值是不是到 4
  // 并且 http 的状态码是不是 200 ~ 299
  if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
    // 这里表示验证通过
    // 我们就可以获取服务端给我们响应的内容了
  }
}

responseText

ajax 对象中的 responseText 成员
就是用来记录服务端给我们的响应体内容的

所以我们就用这个成员来获取响应体内容就可以

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')

xhr.send()

xhr.onreadyStateChange = function () {
  if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
    // 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容
    console.log(xhr.responseText)
  }
}

发送一个带有参数的 get 请求

get 请求的参数就直接在 url 后面进行拼接就可以

const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?，然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')

xhr.send()

这样服务端就能接受到两个参数
一个是 a，值是 100
一个是 b，值是 200

发送一个带有参数的 post 请求

post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')

// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
// 告诉一下服务端我给你的是一个什么样子的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

// 请求体直接再 send 的时候写在 () 里面就行
// 不需要问号，直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')

application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value

第二周

对闭包继承，设计模式以及jQuery进行了学习和理解。

闭包

闭包就是利用了这个函数执行空间不销毁的逻辑
有几个条件组成闭包

闭包的特点

为什么要叫做特点，就是因为他的每一个点都是优点同时也是缺点
1. 作用域空间不销毁
  - 优点：因为不销毁，变量页不会销毁，增加了变量的生命周期
  - 缺点：因为不销毁，会一直占用内存，多了以后就会导致内存溢出
2. 可以利用闭包访问再一个函数外部访问函数内部的变量
  - 优点：可以再函数外部访问内部数据
  - 缺点：必须要时刻保持引用，导致函数执行栈不被销毁
3. 保护私有变量
  - 优点：可以把一些变量放在函数里面，不会污染全局
  - 缺点：要利用闭包函数才能访问，不是很方便

闭包概念

有一个 A 函数，再 A 函数内部返回一个 B 函数
再 A 函数外部有变量引用这个 B 函数
B 函数内部访问着 A 函数内部的私有变量
以上三个条件缺一不可

继承

继承是和构造函数相关的一个应用
是指，让一个构造函数去继承另一个构造函数的属性和方法
所以继承一定出现在 两个构造函数之间

常见的继承方式

我们有一些常见的继承方式来实现和达到继承的效果

我们先准备一个父类（也就是要让别的构造函数使用我这个构造函数的属性和方法）

function Person() {
    this.name = 'Jack'
}

Person.prototype.sayHi = function () {
    cosnole.log('hello')
}

这个 Person 构造函数为父类
让其他的构造函数来继承他
当别的构造函数能够使用他的属性和方法的时候，就达到了继承的效果

原型继承

原型继承，就是在本身的原型链上加一层结构

function Student() {}
Student.prototype = new Person()

借用构造函数继承

把父类构造函数体借用过来使用一下而已
```
function Student() {
  Person.call(this)
}
```

组合继承

就是把 原型继承 和 借用构造函数继承 两个方式组合在一起

function Student() {
  Person.call(this)
}
Student.prototype = new Person

ES6 的继承

es6 的继承很容易，而且是固定语法

// 下面表示创造一个 Student 类，继承自 Person 类
class Student extends Person {
    constructor () {
        // 必须在 constructor 里面执行一下 super() 完成继承 
        super()
    }
}

设计模式

设计模式是我们在 解决问题的时候针对特定问题给出的简洁而优化的处理方案
我们有很多的设计模式
- 单例模式
- 组合模式
- 观察者模式
- …

单例模式

什么是单例模式呢？
我们都知道，构造函数可以创造一个对象
我们 new 很多次构造函数就能得到很多的对象
单例模式：就是使用构造函数实例化的时候，不管实例化多少回，都是同一个对象
- 也就是一个构造函数一生只能 new 出一个对象
也就是说，当我们使用构造函数，每一次 new 出来的对象属性/功能/方法 完全一样 的时候，我们把他设计成单例模式

核心代码

单例模式的核心代码很简单
其实就是判断一下，他曾经有没有 new 出来过对象

如果有，就还继续使用之前的那个对象，如果没有，那么就给你 new 一个

// 准备一个构造函数
// 将来要 new 的
function Person() {}

// 准备一个单例模式函数
// 这个单例模式函数要把 Person 做成一个单例模式
// 将来再想要 new Person 的时候只要执行这个 singleton 函数就可以了
function singleton () {
  let instance
  
  if (!instance) { // 如果 instance 没有内容
    // 来到这里，证明 instance 没有内容
    // 给他赋值为 new Person
      instance = new Person()
  }
  
  // 返回的永远都是第一次 new Person 的实例
  // 也就是永远都是一个实例
  return instance
}

const p1 = singleton()
const p2 = singleton()
console.log(p1 === p2) // true

组合模式

组合模式，就是把几个构造函数的器动方式组合再一起
然后用一个 ”遥控器“ 进行统一调用

 class GetHome {
 
     init () {
         console.log('到家了')
     }
 }
 
 class OpenComputer {
 
     init () {
         console.log('打开电脑')
     }
 }
 
 class PlayGame {
 
     init () {
         console.log('玩游戏')
     }
 }

上面几个构造函数的创造的实例化对象的 启动方式 都一致
那么我们就可以把这几个函数以组合模式的情况书写
然后统一启动

准备一个 组合模式 的构造函数

class Compose {
    constructor () {
        this.compose = []
    }
    	
    // 添加任务的方法
    add (task) {
        this.compose.push(task)
    }
    
    // 一个执行任务的方法
    execute () {
        this.compose.forEach(item => {
            item.init()
        })
    }
}

我们就用我们的组合模式构造函数来吧前面的几个功能组合起来

const c = new Compose()
// 把所有要完成的任务都放在队列里面
c.add(new GetHome())
c.add(new OpenComputer)
c.add(new PlayGame)

// 直接器动任务队列
c.execute()
// 就会按照顺序执行三个对象中的 init 函数

观察者模式

观察者模式，通常也被叫做 发布-订阅模式 或者 消息模式
英文名称叫做 Observer
官方解释：当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题

书写代码

首先我们分析功能
- 我们要有一个观察者（这里抽象为一个对象 {}）
- 需要有一个属性，存放消息的盒子（把你绑定的所有事件放在里面）
- 需要一个 on 方法，用于添加事件
- 需要一个 emit 方法，用于发布事件（触发）
- 需要一个 off 方法，把已经添加的方法取消
```
const observer = {
    message: {},
    on: function () {},
    emit: function () {},
    off: function () {}
}
```
- 我们把它写成一个构造函数的形式
```
class Observer {
    constructor () {
        this.message = {}
    }
    
    on () {}
    
    emit () {}
    
    off () {}
}
```

jQuery

jQuery 是一个前端库，也是一个方法库
他里面封装着一些列的方法供我们使用
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
1. 优质的选择器和筛选器
2. 好用的隐式迭代
3. 强大的链式编程
因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”

选择器

jQuery 有着相当强大的选择器

// 按照 id 获取页面中的元素
const ele = jQuery('#box') 
const ele = $('#box')

上面两个都可以按照 id 来获取元素

// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')

上面就是按照类名来选择元素，可以获取到一组元素

const lis = jQuery('li')
const lis = $('li')

上面就是按照标签名来获取元素，可以获取到一组元素

const eles = jQuery('ul > li')
const eles = $('ul > li')

上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

直接找到第一个

$('li:first') // 找到所有 li 中的第一个

直接找到最后一个

$('li:last') // 找到所有 li 中的最后一个

直接找到第几个

$('li:eq(3)') // 找到所有 li 中索引为 3 的那个

找到所有奇数个

$('li:odd') // 找到所有 li 中索引为 奇数 的

找到所有偶数

$('li:even') // 找到所有 li 中索引为 偶数 的

筛选器

jQuery 的筛选器就是在选择器选择到一组元素以后
对元素进行筛选，也可以对准确的某一个元素进行判断和获取
1. 找到所有元素中的第一个
```
$('li').first()
```
2. 找到所有元素中的最后一个
```
$('li').last()
```
3. 找到某一个元素的下一个兄弟元素
```
$('li:eq(3)').next()
```
4. 找到某一个元素的上一个兄弟元素
```
$('li:eq(3)').prev()
```
5. 找到某一个元素的后面的所有兄弟元素
```
$('li:eq(3)').nextAll()
```
6. 找到某一个元素的前面的所有兄弟元素
```
$('li:eq(3)').prevAll()
```
7. 找到某一个元素的父元素
```
$('li:eq(3)').parent()
```
8. 找到某一个元素的所有结构父级，一直到 html
```
$('li:eq(3)').parents()
```
9. 找到一组元素中的某一个
```
// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')

// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')
```

属性操作

给一个元素添加某个属性
```
// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
```
- prop 这个方法只能添加元素自己本身就有的属性
- 如果是添加的自定义属性，不会显示在标签上，但是可以使用

给一个元素添加某个自定义属性

// 给 div 添加一个 index 属性，值是 1
$('div').attr('index', 1)
// 获取 div 的 index 属性
console.log($('div').attr('index'))

移除元素的某一个属性

// 移除元素自己本身的属性
$('div').removeProp('id')
// 移除元素的自定义属性
$('div').removeAttr('index')

操作元素的类名

// 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名

// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名

// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名

// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加

操作元素的内容

// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()

// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()

// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()

操作样式

jQuery 操作元素的样式就是一个方法 css

// 给元素设置一个 css 样式
$('div').css('width', '100px')

// 获取元素的某一个样式
$('div').css('width')

// 给元素设置一组样式
$('div').css({
    width: '100px',
    height: '200px'
})

元素操作

创建一个元素
```
var div = $('<div></div>')
```

内部插入元素

// 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最后
$('<p>hello</p>').appendTo($('div'))

// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))

外部插入元素

// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))

// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))

// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('<p></p>'))

// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('<p></p>'))

替换元素

// 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))

// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))

删除元素

// 删除元素下的所有子节点
$('div').empty()

// 把自己从页面中移除
$('div').remove()

克隆元素

// 克隆一个 li 元素
// 接受两个参数
//   参数1： 自己身上的事件要不要复制，默认是 false
//   参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()

元素尺寸

操作元素的宽和高

// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)

// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)

获取元素的内置宽和高

// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()

// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()

获取元素的外置宽和高

// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true)

// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true)

元素位置

元素相对页面的位置

// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }

// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置

元素相对于父元素的偏移量

// 获取 div 相对于父元素的偏移量（定位的值）
$('div').position()

获取页面卷去的高度和宽度

window.onscroll = function () {
    // 获取浏览器卷去的高度
    console.log($(window).scrollTop())
}

window.onscroll = function () {
    // 获取浏览器卷去的宽度
    console.log($(window).scrollLeft())
}

元素事件

绑定事件的方法

// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
    console.log('我被点击了')
})

// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
    console.log(e) // 所有的内容都再事件对象里面
    console.log(e.data) // { name: 'Jack' }
})

// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
    console.log(this) // button 按钮
})

// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
    console.log(this) // button 按钮
    console.log(e.data)
})

移除事件

// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)

// 移除事件使用 off
$('button').off('click', handler)

只能执行一次的事件

// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)

直接触发事件

// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')

可以直接使用的常见事件

可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法

click

// 直接给 div 绑定一个点击事件
$('div').click(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个点击事件并传递参数
$('div').click({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

dblclick

// 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

scroll

// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

hover

// 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
    console.log('我会再移入的时候触发')
}, function () {
    console.log('我会在移出的时候触发')
})

动画

show

// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').show(1000, 'linear', function () {
    console.log('我显示完毕')
})

hide

// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').hide(1000, 'linear', function () {
    console.log('我隐藏完毕')
})

toggle

// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').toggle(1000, 'linear', function () {
    console.log('动画执行完毕')
})

animate

// 定义一个自定义动画
$('.show').click(function () {
    $('div').animate({
        width: 500,
        height: 300
    }, 1000, 'linear', function () {
        console.log('动画运动完毕')
    })
})

stop

// 立刻定制动画
$('div').stop() // 就停止再当前状态

finish

// 立刻结束动画
$('div').finish() // 停止在动画结束状态

发送 ajax 请求

发送 get 请求

// 直接使用 $.get 方法来发送一个请求
/*
	参数一： 请求地址
	参数二： 请求时携带的参数
	参数三： 请求成功的回调
	参数四： 返回的数据类型
*/
$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

发送 post 请求

// 直接使用 $.post 方法来发送一个请求
/*
	参数一： 请求地址
	参数二： 请求时携带的参数
	参数三： 请求成功的回调
	参数四： 返回的数据类型
*/
$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

综合发送 ajax 请求

// 使用 $.ajax 方法
// 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
$.ajax({
    url: './ajax',   // 必填，请求的地址
    type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
    data: {},   // 选填，发送请求是携带的参数
    dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
    async: true,   // 选填，是否异步，默认是 true
    success () {},   // 选填，成功的回调函数
    error () {},   // 选填，失败的回调函数
    cache: true,   // 选填，是否缓存，默认是 true
    context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
    status: {},   // 选填，根据对应的状态码进行函数执行
    timeout: 1000,   // 选填，超时事件
})

发送一个 jsonp 请求

// 使用 $.ajax 方法也可以发送 jsonp 请求
// 只不过 dataType 要写成 jsonp
$.ajax({
    url: './jsonp.php',
    dataType: 'jsonp',
    data: { name: 'Jack', age: 18 },
    success (res) {
        console.log(res)
    },
    jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
    jsonpCallback: 'fn'   // jsonp 请求的时候回调函数的名称
})

全局 ajax 函数

全局的 ajax 函数我们也叫做 ajax 的钩子函数
也就是在一个 ajax 的整个过程中的某一个阶段执行的函数
而且每一个 ajax 请求都会触发

ajaxStart

任意一个请求在开始的时候就会触发这个函数

$(window).ajaxStart(function () {
    console.log('有一个请求开始了')
})

ajaxSend

任意一个请求在 准备 send 之前 会触发这个函数

$(window).ajaxSend(function () {
    console.log('有一个要发送出去了')
})

ajaxSuccess

任意一个请求在成功的时候就会触发这个函数

$(window).ajaxSuccess(function () {
    console.log('有一个请求成功了')
})

ajaxError

任意一个请求在失败的时候就会触发这个函数

$(window).ajaxError(function () {
    console.log('有一个请求失败了')
})

ajaxComplete

任意一个请求在完成的时候就会触发这个函数

$(window).ajaxComplete(function () {
    console.log('有一个请求完成了')
})

ajaxStop

任意一个请求在结束的时候就会触发这个函数

$(window).ajaxStop(function () {
    console.log('有一个请求结束了')
})

第三周

对NodeJs，gulp，sass，git 学习使用方法。

NODE

node官网
node中文网
什么是 node
- Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
这个是 node 官网的解释
- 其实 node 就是用 javascript 语言写后端
- 也就是说，我们的 javascript 有了 node 以后，不光是一个前端语言，也是一个后端语言

模块化

在 node 的开发过程中
我们是把每一个功能独立做成一个模块
然后在使用导入导出的方式把他们关联在一起
- 利于维护
- 准确定位
我们一般把模块分为三种
1. 内置模块（node 天生就带有的模块）
2. 自定义模块（我们自己写的文件）
3. 第三方模块（从网上下载的别人写好的模块）

NPM

在我们安装 node 的环境的时候，会自动帮我们一起安装一个 npm 环境
就好像我们安装一些软件的时候，会自动在帮我们安装一些什么 xxx软件管家/xxx游戏 之类的东西
但是 npm 不是垃圾软件，而是一个我们超级实用的工具

检测是否安装

和检测 node 一样
在命令行输入指令
```
$ npm -v
```
能够得到一个版本号就可以了

了解 npm

什么是 npm 呢
我们可以把他想象成一个大超市，一个装着所有我们需要用到的 插件/库/框架 的超市
我们要下载一个 jQuery-validation 插件
- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
我们要下载一个 bootstrap
- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
也就是说，npm 包含着我们所有的第三方的东西
我们需要的时候，只要打开终端，就可以使用指令来帮我们下载
- 再也不需要去官网找了
而且，npm 不光可以在后端使用，也可以在前端使用
npm 只不过是一个依赖于 node 环境的大型的包管理器

使用 npm

我们想使用 npm 只要打开命令行就可以了
作为一个 包管理器
可以帮我们下载一些插件库框架之类的东西供我们使用

下载包

打开命令行

输入下载的指令

# 表示使用 npm 这个工具下载一个 jquery
$ npm install jquery

下载完毕以后，就会在当前目录下多出一个文件夹
- 叫做 node_modules
- 在这个目录下就会有一个文件夹叫做 jquery
- 就是我们需要的东西了
npm 的下载默认是下载最新版本的包

我们也可以在下载的时候指定一下我要下载哪一个版本

# 表示使用 npm 这个工具下载一个 3.3.7 版本的 jquery
$ npm install [email protected]

删除包

在删除包的时候，我们可以直接去 node_modules 文件夹中找到对应的包的文件夹删除掉
但是这样做并不好，我们还是应该使用命令行的指令来删除包
```
# 表示我要删除 jquery 这个包
$ npm uninstall jquery
```
这样，这个包就会被卸载了

管理项目

我们的每一个项目都有可能需要依赖很多的包（有插件/库/框架）
npm 会帮助我们记录，我们当前这个项目所使用的包
但是前提是，你要告诉 npm 说： “你来帮我管理整个文件夹”

我们依旧是使用指令在命令行来告诉 npm

# 表示告诉 npm 你来帮我们管理整个文件夹（也就是我的整个项目）
$ npm init

npm 清除缓存

有的时候，有些包下载到一半，因为各种原因失败了（比如突然没有网了）
那么这个下载了一半的包 有可能 会被缓存下来
那么以后你再次下载的时候，就都是失败的状态
那么我们就要清除掉缓存以后，在重新下载
```
# 表示清除 npm 的缓存
$ npm cache clear -f
```

NRM

我们的 npm 虽然好用
但是有一个缺点
- 就是，他虽然在帮我们下载东西
- 但是他的下载地址是在国外
- 也就是说，每次使用 npm 下载的时候，都是去国外的服务器上进行下载
- 那么就会有很多不稳定的因素
- 而且相对时间比较长
nrm 就是一个用来切换 npm 下载地址的工具（切换镜像源工具）

安装 NRM

nrm 如果想使用，那么需要我们自己安装一下
因为是我们的工具，所以使用 npm 就可以安装
依旧是使用指令的方式来进行安装
只不过这里要把这个 nrm 安装成一个全局的依赖，而不再是项目内部的依赖了
- 全局依赖，一个电脑安装一次，就一直可以使用

我们使用指令安装一个全局 nrm

# 表示安装一个全局 nrm
$ npm install --global nrm

检测安装

安装完毕之后，我们检测一下是否安装成功
和检测 node npm 的时候一样
在命令行使用指令查看一下版本号
```
$ nrm --version
```
能出现版本号，表示安装成功

使用 nrm

nrm 里面存着好几个镜像源地址
我们要挑一个比较快的使用

检测镜像源地址

我们直接在命令行使用指令来查看所有镜像源地址的网速
```
# 表示查看 nrm 镜像源地址网速
$ nrm test
```

切换镜像源

我们检测完毕以后，就直到哪个比较快了

我们就使用指令切换一下镜像源地址就好了

# 表示切换到 taobao 镜像源地址
$ nrm use taobao

GULP

gulp 是一个项目开发的 自动化打包构建工具
基于 node 环境来运行的

安装 GULP 环境
gulp 是一个运行环境
只不过这个环境是要依赖于 node 环境的
所以我们在安装 gulp 环境之前确保 node 环境已经安装
- $ node --version
- $ npm --version
之所以也要检测以下 npm 环境，是因为我们要使用 npm 来安装 gulp 环境

我们就直接安装一个 gulp 全局包就可以了

# 打开命令行（MAC 打开终端）
# 直接使用 npm 安装就好

# windows 指令
$ npm install --global gulp
# MAC 指令
$ sudo npm install --global gulp

等待安装就好，会默认安装最新的稳定版本
要是想确认以下 gulp 安装成功
可以直接在命令行（终端）使用指令查看以下版本号就可以
- $ gulp --version
- 会出现一个 CLI version: x.x.x
- 就表示安装成功了
安装好 gulp 环境以后，我们就可以使用了

SASS

SASS官网
世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
sass 是一个 css 的预编译工具
也就是能够 更优雅 的书写 css
sass 写出来的东西 浏览器不认识
依旧是要转换成 css 在浏览器中运行
这个时候就需要一个工具来帮我们做

 # 安装全局 sass 环境
 $ npm install sass -g

GIT

git 官方名称： 分布式版本管理器
私人解释：就是一个管理我们文件夹的工具
- 只不过可以保留所有的版本信息
就是我们安装一个软件
- 然后用这个软件来管理我们的一个文件夹
- 这个文件夹被 git 管理以后，我们可以对他进行各种操作
- 保证我们写过的内容不会丢失

第四周

主要完成了电商小项目
项目地址
项目由6个页面组成

1.登录页面:不用多说用来进行登录（测试账号 admin 密码123456）
2.注册页面:可以进行邮箱注册和手机号注册并添加了验证功能
3.主页:商城的主页点击右上角的搜索按钮可以跳转到商品列表页
4.商品列表页:展示商品列表内容进行了排序和分页共呢（主要使用请求得到的JSON数据来渲染页面）
5.商品详情页:展示商品的详情渲染的内容由商品列表点击商品后存储到localStorage中
6.购物车页面:里面是你点击过加入购物车的商品可以选择上品数量和删除商品（该页面主要页是通过存储在localSotrage中的购物车列表内容进行页面渲染）

注册登录功能后端php 在 src下的 server文件夹中

张运成

发布了9 篇原创文章 · 获赞 0 · 访问量 98

私信关注

2-3月总结