<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ccxCode的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ccxCode</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ccxCode]]></copyright><item><title><![CDATA[vue-router路由守卫的本质]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/121912059</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/121912059</guid><author>ccxCode</author><pubDate>Mon, 13 Dec 2021 19:03:29 +0800</pubDate><description><![CDATA[本质

将需要异步函数放到一个队列中按顺序的执行
待更新

关于本质的第一点，可以先看我写的这个demo
// 这个函数是vue-router实现路由守卫顺序调用的核心函数
function runQueue(queue, fn, cb) {
  const step = (index) =&gt; {
    if (index &gt; queue.length) {
      cb();
    } else {
      if (queue[index]) {
        fn(queue[]]></description><category></category></item><item><title><![CDATA[css之body背景]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/119901672</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/119901672</guid><author>ccxCode</author><pubDate>Wed, 25 Aug 2021 00:22:16 +0800</pubDate><description><![CDATA[body背景
画布 canvas
一块区域
特点：

最小宽度为视口宽度
最小高度为视口高度

HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图

背景图的宽度百分比，相对于视口
背景图的高度百分比，相对于网页高度
背景图的横向位置百分比、预设值，相对于视口
背景图的纵向位置百分比、预设值，相对于网页高度


...]]></description><category></category></item><item><title><![CDATA[css之堆叠上下文]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/119860443</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/119860443</guid><author>ccxCode</author><pubDate>Mon, 23 Aug 2021 00:01:47 +0800</pubDate><description><![CDATA[堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素

html元素（根元素）
设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列
从后到前的排列顺序：

创建堆叠上下文的元素的背景和边框
堆叠级别(z-index, stack level)为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒
任何 z-index 是 auto 的定位子元素]]></description><category></category></item><item><title><![CDATA[css之relative]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/119464919</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/119464919</guid><author>ccxCode</author><pubDate>Fri, 06 Aug 2021 23:41:39 +0800</pubDate><description><![CDATA[relative和absolute的关系
限制作用

限制left/top/right/bottom定位；（这一点大家开发肯定都很熟悉了）
限制z-index层级；
限制在overflow下的嚣张气焰；

对于第2点，上代码演示：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE]]></description><category></category></item><item><title><![CDATA[webpack之多页面应用打包]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118865851</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118865851</guid><author>ccxCode</author><pubDate>Sun, 18 Jul 2021 00:47:11 +0800</pubDate><description><![CDATA[多页面应用（MPA）概念
每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档，这种类型的⽹站就是多⻚⽹站，也叫做多⻚应⽤。
多页面打包思路

每个页面对应一个entry，一个html-webpack-plugin
需要解决避免每次新增或删除页面都要修改webpack配置
使用glob模块，用它可以查找符合特定规则的文件路径名

webpack中写入这段核心代码能够实现自动化添加或删除页面的功能，但是需要文件目录需要保持一定规律。如：
{
index: ‘d:/code/webpack/my-]]></description><category></category></item><item><title><![CDATA[静态资源内联]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118864624</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118864624</guid><author>ccxCode</author><pubDate>Sat, 17 Jul 2021 23:53:59 +0800</pubDate><description><![CDATA[HTML 和 JS内联
代码层面

页面框架的初始化脚本
css内联避免页面闪动

请求层面：减少HTTP网络请求数

⼩图⽚或者字体内联 (url-loader)

html-webpack-plugin使用的是ejs模板引擎
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=]]></description><category></category></item><item><title><![CDATA[webpack之css样式增强]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118858540</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118858540</guid><author>ccxCode</author><pubDate>Sat, 17 Jul 2021 16:33:30 +0800</pubDate><description><![CDATA[css 前缀补齐

安装插件postcss-loader、autoprefixer
webpack中添加配置

{
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader, 
    'css-loader', 
    'less-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: () =&gt; [
          requi]]></description><category></category></item><item><title><![CDATA[webpack的基本使用]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118837119</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118837119</guid><author>ccxCode</author><pubDate>Sat, 17 Jul 2021 00:59:32 +0800</pubDate><description><![CDATA[概念
webpack概念请移步阅读官网
loader解析不同文件类型
解析txt
module: {
  rules: [
    {
      test: /\.txt$/, 
      use: 'raw-loader'
    }
}

解析es6和react jsx
module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader'
    },
}

babel的配置⽂件是：.babelrc，需要安装的依赖如下

]]></description><category></category></item><item><title><![CDATA[nodejs实现登录认证功能--使用session方式]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118444345</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118444345</guid><author>ccxCode</author><pubDate>Sat, 03 Jul 2021 19:57:50 +0800</pubDate><description><![CDATA[具体详细的代码可以看我的个人github

校验登录信息
// 命中登录路由
function loginRouter(req, res) {
  const promsie = new Promise((resolve, reject) =&gt; {
    if(req.path === '/api/user/login') {
      // 拿到password, username
      const { password, username } = req.body
      // ..]]></description><category></category></item><item><title><![CDATA[nodejs实现日志功能]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/118197818</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/118197818</guid><author>ccxCode</author><pubDate>Thu, 24 Jun 2021 22:51:33 +0800</pubDate><description><![CDATA[目录结构

环境搭建
安装nodemon
npm i nodemon cross-env --save-dev
// package.json
"dev": "cross-env NODE_ENV=dev --inspect=9229 nodemon ./index.js"

创建http服务
const http = require('http')

const server = http.createServer((req, res) =&gt; {
  res.end('hello node')
})]]></description><category></category></item><item><title><![CDATA[Vue的相关基础知识的应用]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/107451361</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/107451361</guid><author>ccxCode</author><pubDate>Sun, 19 Jul 2020 21:18:41 +0800</pubDate><description><![CDATA[$ on 和 $ emit
可以为同一个事件绑定多个处理函数
// 结合分页组件来看
&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
&lt;body&gt;
    &lt;div id="root"&gt;
        &lt;button @click="boost"&gt;触发事件&lt;/button&gt;
    &lt;/div&gt;
&lt;/body&gt;
new V]]></description><category></category></item><item><title><![CDATA[Vue.extend源码分析]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105260034</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105260034</guid><author>ccxCode</author><pubDate>Thu, 02 Apr 2020 01:00:50 +0800</pubDate><description><![CDATA[整体思路比较简单，就直接写在代码里边了
Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this // 这里指向function Vue() {}
    const SuperId = Super.cid
    ...]]></description><category></category></item><item><title><![CDATA[Iterator和Symbol]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105188805</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105188805</guid><author>ccxCode</author><pubDate>Sun, 29 Mar 2020 22:54:07 +0800</pubDate><description><![CDATA[迭代模式：
提供一种方法可以顺序获得聚合对象中的各个元素，是一种最简单也是最常见的一种设计模式。它可以让用户透过特定的接口巡访集合中的每一个元素而不用了解底层的实现
迭代器简介：
依照与迭代模式的思想而实现，分为内部迭代器和外部迭代器
内部迭代器：
本身是函数，该函数内部定义好迭代规则，完全接手整个迭代过程，外部只需要一次初始化调用
Array.prototype.forEach
外部迭代器：
本...]]></description><category></category></item><item><title><![CDATA[async+await]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105186996</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105186996</guid><author>ccxCode</author><pubDate>Sun, 29 Mar 2020 21:36:48 +0800</pubDate><description><![CDATA[async简介
async函数，是Generator语法糖，通过babel编译后可以看出他就是Generator+co+Promise思想实现的。配合await使用
目的：优雅的解决异步问题
用法

async关键字定义的函数，返回的值是Promise实例。根据异步事件的调用结果，返回Promise对应的状态

const fs = require('fs')

function readFile...]]></description><category></category></item><item><title><![CDATA[Generator]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105181381</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105181381</guid><author>ccxCode</author><pubDate>Sun, 29 Mar 2020 16:59:52 +0800</pubDate><description><![CDATA[简介：
生成器，本身是函数，执行后返回迭代对象，函数内部要配合yield使用Generator函数分段执行，遇到Yields即暂停
特点：
function和函数名之间需要带*
函数体内部Yield表达式，产出不同的内部状态
function* test() {
    let value1 = yield 'a'
    console.log(value1)
    let value2 = ...]]></description><category></category></item><item><title><![CDATA[手动模拟实现Map]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105169378</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105169378</guid><author>ccxCode</author><pubDate>Sat, 28 Mar 2020 21:46:13 +0800</pubDate><description><![CDATA[基于hash算法  表 链表实现模拟
拿到对应的key值----&gt; 转化得到hash值----&gt;对应到相对的表的位置(这个其实使用一个数组实现) ----&gt; 在对应的位置对链表进行操作
function myMap() {
    this.bucketLength = 8
    this.bucket = []
    this.init()
}

myMap.prototy...]]></description><category></category></item><item><title><![CDATA[手撕Promise代码]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105084587</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105084587</guid><author>ccxCode</author><pubDate>Wed, 25 Mar 2020 01:40:20 +0800</pubDate><description><![CDATA[我的思路是根据这个Promise的使用方法，一步步用js还原其原理

// 这个回调函数传进来就开始执行了
let oP = new Promise((resolve, reject) =&gt; {
    resolve(1)
})

// 这个要根据你的状态进行选择 Fulfilled pending Rejected
oP.then((res) =&gt; {
    console.l...]]></description><category></category></item><item><title><![CDATA[css三大常规布局]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/105025099</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/105025099</guid><author>ccxCode</author><pubDate>Sun, 22 Mar 2020 11:39:37 +0800</pubDate><description><![CDATA[常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。...]]></description><category></category></item><item><title><![CDATA[javascript编译过程]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/104918059</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/104918059</guid><author>ccxCode</author><pubDate>Tue, 17 Mar 2020 11:38:38 +0800</pubDate><description><![CDATA[作用域和作用域链
[[scope]]: 每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，有些不可以，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]指的是我们所说的作用域，其中存储了运行期上下文集合。
作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接(叫做作用域链)
语法分析
通篇扫描看...]]></description><category></category></item><item><title><![CDATA[对象的基本问题和一些引用场景]]></title><link>https://blog.youkuaiyun.com/ccxCode/article/details/104508479</link><guid>https://blog.youkuaiyun.com/ccxCode/article/details/104508479</guid><author>ccxCode</author><pubDate>Tue, 25 Feb 2020 23:51:12 +0800</pubDate><description><![CDATA[创建方法：

var obj = {} 对象字面量/对象直接量
构造函数


系统自带的函数
自定义（要加上new操作符）大驼峰式命名规则

构造函数的内部原理：

在函数体最前面隐式的加上this = {};
执行this.xxx = xxx
隐式的返回this（返回的只能是对象)

包装类

原始值是肯定没有属性和方法的，隐式的创建包装类，然后delete。再次访问时返回undefined

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