<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Depressione的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Depressione</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Depressione]]></copyright><item><title><![CDATA[前端工程化--webpack配置和脚手架的简单应用]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/109646715</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/109646715</guid><author>Depressione</author><pubDate>Thu, 12 Nov 2020 16:27:25 +0800</pubDate><description><![CDATA[前端工程化
也可以叫做前端模块化。首先先了解对比一下传统开发的主要问题：

命名冲突问题：多个js文件之间如果有重名的变量，则会发生覆盖问题
文件依赖问题：js文件之间无法实现相互的引用

为了解决传统开发的问题，所有出现了模块化的方案：

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

webpack
webpack是一个流行的前端项目构建工具（打包工具）]]></description><category></category></item><item><title><![CDATA[Vue基础]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/109482903</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/109482903</guid><author>Depressione</author><pubDate>Wed, 04 Nov 2020 08:08:26 +0800</pubDate><description><![CDATA[Vue基础
Vue：渐进式JavaScript框架
声明式渲染-&gt;组件系统-&gt;客户端路由-&gt;集中式状态管理-&gt;项目构建
Vue的基本使用
​    vue的基本使用步骤：
1.需要提供标签用于填充数据
2.引入vue.js库文件
3.可以使用vue的语法完成功能
4.把vue提供的数据填充到标签里面
效果如下：
&lt;body&gt;
    &lt;div id="msg"&gt;&lt;/div&gt;
    &lt;div id="msg2"&gt;&lt;/div&gt;]]></description><category></category></item><item><title><![CDATA[ES6课程笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/109325739</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/109325739</guid><author>Depressione</author><pubDate>Wed, 28 Oct 2020 09:14:00 +0800</pubDate><description><![CDATA[ECMA6是什么
它可以理解为是JavaScript的一个标准,实际上JavaScript是ECMA标准的实现和扩展。
ES6即代表ES5.1后的6.0版本，也是泛指5.1之后下一代标准，涵盖了ES2015，ES2016，ES2017等等，而ES2015则是正式名称。

开发语言的整体流程


块级作用域
在ES5版本中只存在全局作用域和函数作用域
例如：
var A = 100;//在全局作用域中
function fn(){
    //在函数作用域中
    var B = 10;
    conso]]></description><category></category></item><item><title><![CDATA[nodejs博客系列课之第二章nodejs介绍]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108870357</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108870357</guid><author>Depressione</author><pubDate>Tue, 29 Sep 2020 16:06:31 +0800</pubDate><description><![CDATA[nodejs和js的区别

ECMAScript
JavaScript
nodejs

ECMAScript

不能操作DOM，不能监听click事件，不能发送Ajax请求等等
即，只有ECMAScript，几乎操作不了任何实际的项目

它可以理解为是JavaScript的一个标准,但实际上后者是ECMA-262标准的实现和扩展

定义了语法，写JavaScript和nodejs都必须遵守

JavaScript

使用了ECMAScript语法规范，外加Web API，缺一不可
例如，DOM操作，BOM操]]></description><category></category></item><item><title><![CDATA[jQuery操作CSS类名之添加和删除(2)]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108743477</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108743477</guid><author>Depressione</author><pubDate>Tue, 22 Sep 2020 23:12:47 +0800</pubDate><description><![CDATA[删除
上次说的删除元素是.remove([selector ])，还有另外一个函数和它很像的函数，不过这个函数只能删除函数的样式

removeClass([class|fn])

参数：

class：将要被删除的元素名的样式名
回调函数fn(index,class)

index：表示在所有匹配元素的集合中当前元素的索引
class：表示原有的样式名



当参数什么都不写时：效果如下，此时只是删除类的类名
&lt;body&gt;
    &lt;p class="PP"&gt;我是P1&lt;/p&]]></description><category></category></item><item><title><![CDATA[jQuery操作CSS类名之添加和删除(1)]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108720859</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108720859</guid><author>Depressione</author><pubDate>Mon, 21 Sep 2020 22:34:52 +0800</pubDate><description><![CDATA[jQuery操作CSS类名
添加
.addClass( className ，func（index，currentClass）)
谁调用就为谁添加一个类型，就是相当于标签里的class名

className：为元素将要条件的类型（这个可以选择不写）
回调函数（这个可以选择不写，想要给多个元素添加的话才用）

index：多个元素中每个元素的索引
currentClass：为这个对象原先的class属性值



效果如下：
&lt;body&gt;
    &lt;p&gt;我是1&lt;/p&gt;
  ]]></description><category></category></item><item><title><![CDATA[jQuery的each之间的区别]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108697407</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108697407</guid><author>Depressione</author><pubDate>Sun, 20 Sep 2020 19:47:31 +0800</pubDate><description><![CDATA[jQuery的each之间的区别

$().each(callback)
$.each(object,[callback])

$().each(callback)
遍历方法，不过被遍历的需要是被jQuery封装过之后jQuery对象，为每个遍历过的元素执行回调函数
其中callback的参数为callback(index,domEle)

index：为每个遍历的元素的索引值
domEle：为每个遍历的dom对象

&lt;body&gt;
    &lt;p&gt;我是1&lt;/p&gt;
    &]]></description><category></category></item><item><title><![CDATA[canvas]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108651869</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108651869</guid><author>Depressione</author><pubDate>Thu, 17 Sep 2020 20:07:48 +0800</pubDate><description><![CDATA[canvas
canvas标签用于在JavaScript中绘制图像，这个标签本身没有绘画能力，只能作为一个容器，真正执行画图操作的还是JavaScript
&lt;canvas id="myCan" width="500" height="800"&gt;&lt;/canvas&gt;

canvas标签只有两个属性，长和宽，canvas初始化时会默认宽300px，长150px
注：该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。]]></description><category></category></item><item><title><![CDATA[fetch简单示例笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108485820</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108485820</guid><author>Depressione</author><pubDate>Wed, 09 Sep 2020 11:24:54 +0800</pubDate><description><![CDATA[Fetch基本语句
fetch是原生js的一个api，是一种http数据请求的方式，是XMLHTTPRequest的一中替代方法，跟Ajax没关系。fetch是增的api，所以兼容性不是很好
&lt;script&gt;
    //使用fetch发送请求
    fetch('https://v1.hitokoto.cn/', {
        method: "GET"
    }).then(result =&gt; {
        console.log(result)
    }).catc]]></description><category></category></item><item><title><![CDATA[粗略学习axios笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108485689</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108485689</guid><author>Depressione</author><pubDate>Wed, 09 Sep 2020 11:20:20 +0800</pubDate><description><![CDATA[什么是axios
是一个类库，基于promise管理的Ajax库

提供了对应的请求方法，例如：get、post、head、delete、put。options等等

axios简单请求示例
支持的参数配置：
axios.get(url,options)


url：请求的地址
options：配置项目

get请求中会把params键值对拼接成urlencoded格式的字符串，然后以问好传递参数的方式传递给服务器，类似于jQuery的Ajax中的data，或者自己在url后面拼接也行
axios.post]]></description><category></category></item><item><title><![CDATA[跨域相关问题]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108433505</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108433505</guid><author>Depressione</author><pubDate>Sun, 06 Sep 2020 16:54:19 +0800</pubDate><description><![CDATA[同源策略
同源策略的目的是为了保护用户的隐私数据，防止恶意网站窃取数据。所谓同源策略必须协议相同，域名相同，端口号相同。如果非同源，共会受到行为限制：

Cookie、LocalStorage和ndexDB无法读取
DOM无法获得
AJAX请求不能发送

跨域是什么
当一个资源从与该资源本身所在 的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。出于安全原因，浏览器限制从脚本内发起的跨院HTTP请求。例如XMLHTTPRequest和FetchAPI遵循同源策略。这意味着使用这些API的]]></description><category></category></item><item><title><![CDATA[JQuery中的Ajax]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108418561</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108418561</guid><author>Depressione</author><pubDate>Sat, 05 Sep 2020 13:38:16 +0800</pubDate><description><![CDATA[JQuery中的Ajax
JQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装。JQuery提供了6个Ajax操作的方法：

load()方法
$.get()方法
$.post()方法
$.ajax()方法
$.getScript()方法
$.getJSON(方法

还提供了以下几种事件：

ajaxStart()事件
ajaxStop()事件
ajaxComplete()事件
ajaxSend()事件
ajaxError()事件
ajaxSuccess()事件

load(]]></description><category></category></item><item><title><![CDATA[Ajax之JSON数据格式]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108392463</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108392463</guid><author>Depressione</author><pubDate>Thu, 03 Sep 2020 20:23:00 +0800</pubDate><description><![CDATA[JSON是什么
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性]]></description><category></category></item><item><title><![CDATA[Ajax第一部分笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108364611</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108364611</guid><author>Depressione</author><pubDate>Wed, 02 Sep 2020 16:22:06 +0800</pubDate><description><![CDATA[同步交互与异步交互
同步交互是什么
所谓同步交互，就是指客户端向服务器发送请求，必须等待返回结果，才能发送下一个请求。同步交互相当于排队，轮到下一个轻快会因为前一个有所不同。

异步交互是什么
所谓异步交互，就是指客户端发送一个请求，不需要等待返回结果，随时可以发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。

异步交互的优势

用户操作无须像同步交互必须等待结果
异步交互只需要与服务端交换必要的数据内容，而不是将所有的数据全部更新
异步交互对带宽造成的压力比同步交互]]></description><category></category></item><item><title><![CDATA[HTTP第二阶段笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108229580</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108229580</guid><author>Depressione</author><pubDate>Tue, 25 Aug 2020 21:48:09 +0800</pubDate><description><![CDATA[HTTP经典五层模型

低三层

物理层：主要作用是定义物理设备如何传输数据
数据链路层：在通信的实体间建立数据链路连接
网络层：为数据在结点之间传输创建逻辑链路

传输层

向用户提供可靠的端到端(End-to-End)服务
传输层向高层屏蔽了下层数据通信的细节

应用层

为应用软件提供了很多服务
构建于TCP协议之上
屏蔽网络传输相关细节

HTTP三次握手
TCP提供一种面向连接的、可靠的字节流服务。面向连接意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据包之前必须先建立一个T]]></description><category></category></item><item><title><![CDATA[HTTP第一阶段笔记]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/108136772</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/108136772</guid><author>Depressione</author><pubDate>Thu, 20 Aug 2020 22:36:17 +0800</pubDate><description><![CDATA[HTTP是什么
HTTP(超文本传输协议)，是互联网上应用嘴广泛的一中网络协议。
HTTP协议是在Web上进行数据交换的基础，是一种“客户端–服务器端”的协议。也就是说，请求通常是由像浏览器这样的接收方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本，布局描述，图片，视频，脚本等等。
设计HTTP最初的目的是为了提供一种发布和接受HTML页面的方法。
HTTP请求与响应消息
客户端和服务端通过交换各自的消息（与数据流正好相反）进行交互。

由像浏览器这样的客户端发出的消息叫请求（requ]]></description><category></category></item><item><title><![CDATA[nodejs入门学习第三天]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/107116763</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/107116763</guid><author>Depressione</author><pubDate>Fri, 03 Jul 2020 22:37:06 +0800</pubDate><description><![CDATA[1-了解端口

一台电脑可以部署多个服务器，例如：

Apache软件部署的服务器
我们自己用http模块搭建的服务器
mysql数据库服务器


之后我们就能通过ip地址来找到这个电脑（localhost或者127.0.0.1）
通过端口来找到不同的服务器

注意：

默认的http端口号是80端口，所有Apache配置这个web服务器同的就是80端口
默认的80端口可以不写
服务器端口不能乱写，很多端口已经被其他的服务器给占用了

2-web服务器读取网页返回给用户
//1.导入模块
const fs ]]></description><category></category></item><item><title><![CDATA[nodejs入门学习第二天]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/107094257</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/107094257</guid><author>Depressione</author><pubDate>Thu, 02 Jul 2020 22:06:20 +0800</pubDate><description><![CDATA[NodeJS模块化
1-内置模块fs的基本使用
//导包
const fs = require("fs")
//调用unlink的删除方法
//第一个参数：要删除的文件路径
//第二个参数：回调函数
fs.unlink("hello.txt", (err) =&gt; {
    if (err) throw err;
    console.log("已成功删除")
})
2-内置模块fs的读文件
//导包
const fs = require("fs")
//调用方法
//第一个参数：文件的路径
//第]]></description><category></category></item><item><title><![CDATA[nodejs入门学习第一天]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/107071070</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/107071070</guid><author>Depressione</author><pubDate>Wed, 01 Jul 2020 20:09:31 +0800</pubDate><description><![CDATA[nodejs入门
1.1-什么是nodejs

Node是一个构建于Chrome V8引擎上的一个JavaScript运行环境

Node是一个运行环境，作用是让js拥有开发服务端的功能


Node使用事件驱动，非阻塞IO模型（异步读写）使得它非常轻量级和高效

Node中绝大多数API都是异步（类似于Ajax），目的是提高性能


Node中的NPM是世界上最大的开源库生态系统（类似于gitHub）

1.2-Node.js环境安装
1.2.1-如何判断自己当前电脑是否已经安装了Node环境


打开终]]></description><category></category></item><item><title><![CDATA[jQuery学习笔记第三天]]></title><link>https://blog.youkuaiyun.com/Depressione/article/details/106819937</link><guid>https://blog.youkuaiyun.com/Depressione/article/details/106819937</guid><author>Depressione</author><pubDate>Wed, 17 Jun 2020 22:35:09 +0800</pubDate><description><![CDATA[jQuery属性操作
jQuery的attr方法和removeAttr方法
attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。
$(selector).attr(attribute)
$(selector).attr(attribute,value)

可以传一个值，代表获取被选元素的属性值
也可以传两个值，代表设置被选元素的属性和值

注：

如果传一个值，无论找到多少个元素，只返回找到的第一个元素
如果传两个值，就是设置值，那么找到多少个就设置多少个

remov]]></description><category></category></item></channel></rss>