ccxCode-优快云博客

原创 vue-router路由守卫的本质

本质将需要异步函数放到一个队列中按顺序的执行待更新关于本质的第一点，可以先看我写的这个demo // 这个函数是vue-router实现路由守卫顺序调用的核心函数 function runQueue(queue, fn, cb) { const step = (index) => { if (index > queue.length) { cb(); } else { if (queue[index]) { fn(queue[

2021-12-13 19:03:29 905

原创 css之body背景

body背景画布 canvas 一块区域特点：最小宽度为视口宽度最小高度为视口高度 HTML元素的背景覆盖画布 BODY元素的背景如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）如果HTML元素没有背景，BODY元素的背景覆盖画布关于画布背景图背景图的宽度百分比，相对于视口背景图的高度百分比，相对于网页高度背景图的横向位置百分比、预设值，相对于视口背景图的纵向位置百分比、预设值，相对于网页高度 ...

2021-08-25 00:22:16 400

原创 css之堆叠上下文

堆叠上下文堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。创建堆叠上下文的元素 html元素（根元素）设置了z-index（非auto）数值的定位元素同一个堆叠上下文中元素在Z轴上的排列从后到前的排列顺序：创建堆叠上下文的元素的背景和边框堆叠级别(z-index, stack level)为负值的堆叠上下文常规流非定位的块盒非定位的浮动盒子常规流非定位行盒任何 z-index 是 auto 的定位子元素

2021-08-23 00:01:47 294

原创 css之relative

relative和absolute的关系限制作用限制left/top/right/bottom定位；（这一点大家开发肯定都很熟悉了）限制z-index层级；限制在overflow下的嚣张气焰；对于第2点，上代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE

2021-08-06 23:41:39 308

原创 webpack之多页面应用打包

多页面应用（MPA）概念每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档，这种类型的⽹站就是多⻚⽹站，也叫做多⻚应⽤。多页面打包思路每个页面对应一个entry，一个html-webpack-plugin 需要解决避免每次新增或删除页面都要修改webpack配置使用glob模块，用它可以查找符合特定规则的文件路径名 webpack中写入这段核心代码能够实现自动化添加或删除页面的功能，但是需要文件目录需要保持一定规律。如： { index: ‘d:/code/webpack/my-

2021-07-18 00:47:11 700

原创静态资源内联

HTML 和 JS内联代码层面页面框架的初始化脚本 css内联避免页面闪动请求层面：减少HTTP网络请求数⼩图⽚或者字体内联 (url-loader) html-webpack-plugin使用的是ejs模板引擎 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

2021-07-17 23:53:59 239 1

原创 webpack之css样式增强

css 前缀补齐安装插件postcss-loader、autoprefixer webpack中添加配置 { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', { loader: 'postcss-loader', options: { plugins: () => [ requi

2021-07-17 16:33:30 208

原创 webpack的基本使用

概念 webpack概念请移步阅读官网 loader解析不同文件类型解析txt module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } } 解析es6和react jsx module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, } babel的配置⽂件是：.babelrc，需要安装的依赖如下

2021-07-17 00:59:32 193

原创 nodejs实现登录认证功能--使用session方式

具体详细的代码可以看我的个人github 校验登录信息 // 命中登录路由 function loginRouter(req, res) { const promsie = new Promise((resolve, reject) => { if(req.path === '/api/user/login') { // 拿到password, username const { password, username } = req.body // ..

2021-07-03 19:57:50 1456

原创 nodejs实现日志功能

目录结构环境搭建安装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) => { res.end('hello node') })

2021-06-24 22:51:33 2810

原创 Vue的相关基础知识的应用

$ on 和 $ emit 可以为同一个事件绑定多个处理函数 // 结合分页组件来看 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <button @click="boost">触发事件</button> </div> </body> new V

2020-07-19 21:18:41 315

原创 Vue.extend源码分析

整体思路比较简单，就直接写在代码里边了 Vue.extend = function (extendOptions: Object): Function { extendOptions = extendOptions || {} const Super = this // 这里指向function Vue() {} const SuperId = Super.cid ...

2020-04-02 01:00:50 593

原创 Iterator和Symbol

迭代模式：提供一种方法可以顺序获得聚合对象中的各个元素，是一种最简单也是最常见的一种设计模式。它可以让用户透过特定的接口巡访集合中的每一个元素而不用了解底层的实现迭代器简介：依照与迭代模式的思想而实现，分为内部迭代器和外部迭代器内部迭代器：本身是函数，该函数内部定义好迭代规则，完全接手整个迭代过程，外部只需要一次初始化调用 Array.prototype.forEach 外部迭代器：本...

2020-03-29 22:54:07 350

原创 async+await

async简介 async函数，是Generator语法糖，通过babel编译后可以看出他就是Generator+co+Promise思想实现的。配合await使用目的：优雅的解决异步问题用法 async关键字定义的函数，返回的值是Promise实例。根据异步事件的调用结果，返回Promise对应的状态 const fs = require('fs') function readFile...

2020-03-29 21:36:48 280

原创 Generator

简介：生成器，本身是函数，执行后返回迭代对象，函数内部要配合yield使用Generator函数分段执行，遇到Yields即暂停特点： function和函数名之间需要带* 函数体内部Yield表达式，产出不同的内部状态 function* test() { let value1 = yield 'a' console.log(value1) let value2 = ...

2020-03-29 16:59:52 287

原创手动模拟实现Map

基于hash算法表链表实现模拟拿到对应的key值----> 转化得到hash值---->对应到相对的表的位置(这个其实使用一个数组实现) ----> 在对应的位置对链表进行操作 function myMap() { this.bucketLength = 8 this.bucket = [] this.init() } myMap.prototy...

2020-03-28 21:46:13 341

原创手撕Promise代码

我的思路是根据这个Promise的使用方法，一步步用js还原其原理 // 这个回调函数传进来就开始执行了 let oP = new Promise((resolve, reject) => { resolve(1) }) // 这个要根据你的状态进行选择 Fulfilled pending Rejected oP.then((res) => { console.l...

2020-03-25 01:40:20 457

原创 css三大常规布局

常规流盒模型：规定单个盒子的规则视觉格式化模型（布局规则）：页面中的多个盒子排列规则视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素，默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。...

2020-03-22 11:39:37 474

原创 javascript编译过程

作用域和作用域链 [[scope]]: 每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，有些不可以，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]指的是我们所说的作用域，其中存储了运行期上下文集合。作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接(叫做作用域链) 语法分析通篇扫描看...

2020-03-17 11:38:38 500

原创对象的基本问题和一些引用场景

创建方法： var obj = {} 对象字面量/对象直接量构造函数系统自带的函数自定义（要加上new操作符）大驼峰式命名规则构造函数的内部原理：在函数体最前面隐式的加上this = {}; 执行this.xxx = xxx 隐式的返回this（返回的只能是对象) 包装类原始值是肯定没有属性和方法的，隐式的创建包装类，然后delete。再次访问时返回undefined ...

2020-02-25 23:51:12 270

原创初识nginx

学习nginx接触到的linux中的命令行 service在/sbin目录下，是一个脚本文件，它通过检查/etc/init.d目录中的一系列脚本文件来识别各个服务，并调用这些脚本从而实现对服务的控制。 service脚本的基本用法为：service 服务名称 start|stop|restart|status。例如service nginx restart systemctl是一个sys...

2019-01-20 18:27:44 211

原创数组常用的源代码

push() var arr = [1, 3, 4, 5] Array.prototype.myPush = function() { for(var i = 0; i < arguments.length; i ++) { this[this.length] = arguments[i] } return this.length } arr.myPush(1,3...

2018-11-17 01:30:43 538

转载 HTTP知识总结

HTTP是基于TCP/IP协议的应用层协议，用于客户端和服务器之间的通信，默认80端口。我们按照他的发展历程的时间顺序开始说。 1. HTTP/0.9 1990年提出的，是最早期的版本，只有一个命令GET。 2. HTTP/1.0 缺点：每个TCP连接只能发送一个请求。解决方法：Connection：keep-alive 3.HTTP/1.1 1997年1月提出，现在使用最广泛的。特性 ...

2018-11-13 23:18:41 253

原创封装ajax

function ajax(method, url, data, callback, flag) { // 创建全平台兼容的XMLHTTPREQUEST对象 function getXHR() { var xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequ...

2018-11-13 12:40:45 259

原创 vue项目中引入svg的问题

最近在跟着一个网上的项目进行学习，遇到的第一个问题就是vue中使用svg图标。基于vue的组件化思想，项目中进行了开发了一个SvgIcon组件。在此，我们要先安装好"svg-sprite-loader"（这个之后要去学习一下这个库），反正装了这个loader能自动的为我们在#showroot生成一系列东西。接下来遇到的问题是属于webpack中的配置问题，我曾天真的以为会智能的在webpack...

2018-10-24 01:29:28 2584

原创 path.resolve和_dirname结合使用

在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。在应用程序根目录下新建app.js文件，其中代码如下所示。 var testModule1=require(’. ./test/testModule.js’); 在应用程序根目录下新建一个test子目录，在该目录下新建一个testModule.js文件，其中代码如下所示。 console.log(__...

2018-10-21 10:22:52 4010

原创函数的编程思想

惰性函数常用于函数库的编写，单例模式中 // 惰性函数 function addEvent(dom, type, handler) { if (dom.addEventListener) { console.log('first') dom.addEventListener(type, handler, false) // 这里结合预编译的过程 addEvent = fun...

2018-10-17 01:25:41 367

原创 js执行机制

定义： JavaScript是基于单线程运行的，同时又是异步执行的，一般来说这种既是单线程又是异步的语言都是基于事件来驱动的，恰好浏览器给JavaScript提供了这种环境执行过程同步和异步任务分别进入不同的执行"场所""，同步的进入主线程，异步的进入Event Table并注册函数当指定的事情完成之后，Event Table会将这个函数移入Event Queue 主线程的任务执行完...

2018-10-16 15:45:41 405

原创 dom总结

遍历节点树 parentNode 父节点（最顶端的parentNode为#document） childNodes 子节点们 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 后一个兄弟节点，previousSibling前一个兄弟节点节点的四个属性 nodeName 元素的标签名、以大写形式表示，只读 nodeV...

2018-10-16 12:51:27 351

原创数组

数组的定义 new Array(length/content) 字面量[] 数组的读和写 arr[num]不可以溢出读结果undefined arr[num] = xxx//可以溢出写数组的常用的方法改变原数组（就这几个改变原数组） push() Array.prototype.push = function () { for(var i = 0; i &lt; argumen...

2018-10-16 11:55:54 261

原创原型与原型链

由图可看出绝大多数对象都继承自Object.prototype,还有例外继承自（0bject.create(原型)）定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象示例一： Person.prototype.name = 'abc'; function Person() { ...

2018-10-16 11:09:24 237

原创 js中this问题

默认绑定 // 没人绑定，this =&gt; window 隐式绑定 // 谁调用this指向谁显示绑定 // bind call apply 构造器调用。（构造器里的this指向返回的这个对象）这里可以联系new的原理过程用来指定函数内部的this指向，以下是bind的源码 Function.prototype.bind = function(){ var self = th...

2018-10-16 10:39:46 287

ccxCode的博客