ccattempt-CSDN博客

原创 Git详解

整理 Git 的基本知识，本文适合了解git部分知识但是不太熟练的童鞋目录1、git简介及安装2、git基本命令1、git简介及安装git是目前常用的一个版本控制系统，由Linus创始人Linus Torvalds发明，github和gitee等都是基于git的远程仓库。安装很简单：Git下载，下载后一路点击确定即可。安装完Git后通常需要配置用户名和邮箱：git --global user.name "用户名"git --global user.email "email地址"如果要查看.

2022-01-01 21:02:35 595

原创 sass的基本语法整理

整理下sass的常用语法目录1、变量2、嵌套语法3、继承4、注释5、根选择器@at-root6、1、变量sass中可以使用变量，变量名以$开头：$c: #fff;body { color: $c;}/* 编译成css */body { color: #fff;}注意变量声明遵循实现了块级作用域，如果在选择器内声明的变量，只能在选择器内部使用：// 正确案例body { width: 100%; height: 100%; $c: red; #app.

2021-12-19 17:57:12 1849

原创怎样去掉vscode中因为无法识别flow语法出现的红线

在看源码的时候，有时候会看到代码中使用了flow进行静态检查，vscode因为无法识别flow语法而出现红线：此时在当前目录下新建.vscode文件夹，里面创建settings.json文件，文件内写入如下代码：{ "javascript.validate.enable": false}这样会禁用vscode对js文件的代码检查，并且只对当前项目有效。效果如下：...

2021-12-19 14:10:11 1420

原创常见的webpack基本配置(2)

上一篇常见的webpack的基本配置写了一些webpack的基本知识，包括webpack的入口、出口以及loader和plugin等知识。但是现在觉得写的太啰嗦，现在补充其余知识的时候尽量做到简单易懂。目录1、dev-tool(source-map)2、tree shaking(树摇)3、缓存1、dev-tool(source-map)我们在运行webpack打包运行项目的时候，实际执行的是打包后的代码，这样不利于找到错误代码在源代码的位置。webpack提供了dev-tool帮助开发者快速定位到.

2021-11-02 23:15:17 119

原创 require.context的用法

require.context是webpack提供的一个api。通常用于批量注册组件。require.context("文件夹路径", "布尔值，表示是否查询子目录", "正则表达式，用于过滤文件")例如，假设当前目录下有个叫module的文件夹，里面放置了a.vue和b.vue两个文件，现在想要全局注册这两个组件：const files = require.context('./components', true, /\.vue$/i) // 筛选出components文件夹下所有的vue文件，

2021-10-18 16:06:00 411

原创简单搭建一个github项目

由于平时工作使用svn，git的使用还在一年前，写的笔记现在来看不太清晰。这次重新记录。力求简明清晰。目录1、初始化一个项目2、提交文件到本地仓库3、提交到远程仓库(github)1、初始化一个项目首先在本地搭建一个项目，然后使用git init初始化本地git仓库。git init打开隐藏的项目可以看到生成了一个.git文件夹。所有的数据就保存在这里面，被称作本地仓库。2、提交文件到本地仓库首先提交到暂存区：git add 文件名 // 提交某一个文件到暂存区git add . /.

2021-10-16 23:16:02 579

原创使用npm命令查看包（本地和远程）的版本

1.查看本地包查看当前目录的包：npm ls 包名查看全局安装的包：npm ls 包名 -g2.查看远程包查看最新版本：npm view 包名 version查看所有的版本：npm view 包名 versions或者：npm info 包名 // 这种方法可以得到更多信息...

2021-10-12 23:07:19 1672

原创常见的webpack的基本配置

本文使用的webpack版本为 4.46.0目录1、安装webpack及其脚手架2、安装webpack-dev-server启动服务器3、使用html-webpack-plugin生成index.html文件1、安装webpack及其脚手架首先在工作目录使用npm init生成package.json，再运行以下命令下载webpack和webpack-cli（使用脚本命令运行webpack必须的脚手架工具）。npm i -D webpack@4 webpack-cli@3在当前目录创建web.

2021-10-04 18:52:30 292

原创 vue使用render函数和template模板的渲染对比

在vue中我们通常使用template进行模板的设计，但是在某些时候无法使用template进行渲染，此时需要使用render函数。实际在vue源码中，template会被转化成render函数。目录1、render函数的简单用法2、使用render函数渲染插槽1、render函数的简单用法render函数接收1个参数(createElement函数)，返回值是createElement函数的返回值（实际就是一个虚拟DOM）。createElement函数接收3个参数，分别代表HTML标签名（也可.

2021-09-26 22:59:56 2853

原创简单的柯里化转换

今天看源码看到了柯里化的利用，过去从来没注意这块知识，上午手动实现了一个简单的将任意函数转化为柯里化形式。function curry(fn, args, length) { let arg = args || []; let len = length === undefined ? fn.length : length; return function f(...rest) { arg = arg.concat(rest); const res.

2021-09-06 15:52:17 75

原创手动实现一个flat方法

最近看 vue 源码的时候，看到了 normalizeArrayChildren 里面对数组的打平操作，感觉很不错就把它单独抽离出来，做了小改动function myFlat(array, deep) { const res = []; let i, c; for (i = 0; i < array.length; i++) { c = array[i]; if (Array.isArray(c) && deep--) { c = myFlat(c, deep.

2021-09-04 23:30:34 298

原创 Vue源码学习2--$mount的执行流程

主要梳理了一下$mount的执行和构建过程。文章重点有两块：1、公共的 $mount 方法的创建，2、带编译模板的 vue 给 $mount 扩展了编译部分。上次梳理了vue入口文件的怎么查找，这次看一看$mount。由于后面尚未学习，只简单梳理流程。1、扩展$mount首先打开entry-runtime-with-compiler.js文件，这里我们可以看到对$mount的扩展：先用 mount 变量存储Vue.prototype.$mount备用，接着重新给Vue.prototype.$m.

2021-09-04 18:58:09 642

原创 Vue源码学习1--获取源码和查找入口文件

目录1、下载源码2、查找入口文件1、下载源码首先在Github上找到vue源码，使用git下载：git clone https://github.com/vuejs/vue.git安装依赖：npm install修改package.json的scripts里面的dev命令，添加--sourcemap，方便日后调试："dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"打包

2021-09-04 11:46:50 3170

原创怎么查看和更换yarn和npm的源

npm, yarn查看源和换源：npm config get registry // 查看npm当前镜像源npm config set registry https://registry.npm.taobao.org/ // 设置npm镜像源为淘宝镜像yarn config get registry // 查看yarn当前镜像源yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像镜像源

2021-09-03 22:16:40 205

原创 $nextTick的源码核心逻辑分析

源码用了flow做静态检查，这里去除flow部分核心逻辑其实就两步：保存回调函数根据不同浏览器的情况选择不同的方法延迟执行回调函数首先看函数nextTick的实现：const callbacks = []let pending = falselet timerFunc// cb: 回调函数// ctx: 用于改变this指向function nextTick (cb, ctx) { let _resolve // 保存通过then传入的回调函数 callbacks.pu.

2021-08-29 13:15:14 106

原创利用Vue.observable实现简易的Vuex

目录1、搭架子2、注入Vue构造函数3、初始化并声明commit和dispatch4、利用Vue.observable实现响应式5、利用Object.defineProperty实现getters6、测试7、完整代码1、搭架子首先把大致的架子搭好。let Vue;let _self;class Store { constructor(state, getters, mutations, actions) {} commit(cb, ...args) {} dispatch(cb, ..

2021-08-28 14:20:24 364

原创使用css设置超出盒子宽度时显示省略号

1、单行单行比较常见，不赘述。.show-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}2、多行多行文本相对来说不太好处理，因为没有专门的css属性支持。不考虑兼容性可以通过-webkit-line-clamp模拟，它的功能是可以设置块级盒子里面最多能够显示的行数，如果超出则会在最后一行显示省略号。这个属性需要配合其他属性使用。.show-mul-ellipsis { display

2021-08-14 13:55:42 1522

原创一个将扁平数组转成树形数据的非递归函数

通常我们都是通过递归的方式将扁平数组转成树形数据，这次偶然看见一位大佬写的非递归方法，记录下来学习一下。人菜就得多学习啊/** * @param list 列表 * @param id id-key * @param pid pid-key * @param rootid 根id * @param children children-key */function toTree(list = [], { id = "id", pid = "pid", rootid = "rootid", .

2021-08-10 14:28:10 241

原创关于安装node-sass出现的问题

每次下载依赖包的时候，node-sass总是像个撒娇的小姑娘一样耍脾气，不肯乖乖下来。这次就专门整个文章记录一下，方便日后查阅。目录1. 提示python未安装2.提示 HTTP error 404 Not Found1. 提示python未安装常见的一个错误，通常情况下在报错信息里面看见python就知道得在环境变量下加点东西了。解决方法很简单，在python官网下载python2.7版本，安装好以后在环境变量里面加上就好了。至于下载和添加环境变量这块，不懂可百度。不过记得添加环境变量后需要重启.

2021-08-07 12:58:46 1666

原创秒删node_modules的方法

使用一个包即可：npm install rimraf -g使用：rimraf node_modules以上。

2021-08-06 17:46:40 56

原创函数防抖和函数节流

简单记录一下函数防抖和节流，代码来自B站小野森森老师目录1、函数防抖2、函数节流总结参考链接1、函数防抖函数防抖主要用于解决多次触发回调函数时造成的资源浪费问题。通过控制两次触发的时间间隔，达到只有时间间隔大于等于设定值才执行回调函数的效果。主要思路是每次触发回调函数时，先清空上次设置的定时器，然后设置新的定时器，重新计时。当两次操作时间间隔大于设置的时间时，定时器会被触发，从而执行回调函数，否则定时器被清空。/*** fn 需要执行的回调函数* time 时间间隔* trigger 是否.

2021-06-20 16:35:50 161

原创 call、apply、bind的源码实现

根据B站的小野森森老师的视频整理，代码有所修改。主要有以下难点：怎样改变this指向怎样给修改后的函数传参解决方法是：函数内部的this指向是通过其调用者决定的，因此可以通过将call等的第一个参数(假设为ctx)上增加一个属性(假设为originFn)，保存当前调用函数的地址，通过调用ctx.originFn来改变this指向。然后通过将其余参数拼接为字符串，调用eval方法将字符串转为表达式的方式传参。源码如下：1、call// callFunction.prototype.my.

2021-05-23 18:47:28 176

原创红宝书学习笔记之 BOM

主要是红宝书第12章内容目录1. 浏览器窗口相关API2. location3. history4. navigator1. 浏览器窗口相关API// 1 moveTo(x, y) 移动浏览器窗口到坐标 (x, y)window.moveTo(100, 100); // 在chrome浏览器中不可用// 2 moveBy(x, y) 将浏览器窗口移动 (x, y) 距离window.moveBy(x, y); // 在chrome浏览器中不可用// 3 resizeTo(x, y) 将浏览.

2021-04-12 22:10:05 96

原创红宝书学习笔记3 -- Set和WeakSet类型

目录1. Set1. SetSet有点类似数组，但是Set和数组最大的不同在于Set中不能存在相同的元素。new Set([1,2,3,4,1,2,3,4]); // { 1, 2, 3, 4 }其次，Set的内置函数也没有数组那么丰富。主要有：add()、has()、delete()、clear()、keys()、values()、entries()、forEach()// 1、初始化 Setconst set = new Set();// 2、添加值set.add(1);set.ad

2021-04-05 12:11:45 57

原创红宝书学习笔记（2）JavaScript里面的Map和WeakMap类型

目录1. Map2. WeakMap1. Map通常我们是使用对象来表示键值对关系，如下:let obj = { name: '李四', age: 18, desc: '一个憨批'};对于大部分情况，使用对象已经足够了。但是对象的键名只能使用字符串或者Symbol，其余类型会被转为字符串。let student1 = { name: '李四', age: 18};let student2 = { name: '李四', age:19};let score = { [st

2021-04-04 17:20:36 120

原创 JavaScript里面的 == 号学习笔记

JavaScript里面的 == 常常让人摸不着头脑，这次索性根据红宝书记录一下。同一类型的比较自然没什么多说的，不同类型的则会发生强制类型转换。如果有一方为布尔值，则会将布尔值转为数值(true转为1，false转为0)再进行比较如果有一方为数值，一方为字符串，则会先将字符串转为数值再比较如果有一方为对象，则会先调用对象的 valueOf 方法，再对返回值进行比较null 和 undefined不会发生强制类型转换，且 null == undefinedNaN和任何值都不相等"1" .

2021-04-04 14:33:55 58

原创红宝书学习笔记(1)

红宝书第三章笔记目录1 var、let、const的区别1 var、let、const的区别let和const都是ES6引入的，下面是它们和var的区别。使用var声明的变量只有全局作用域和函数作用域，使用let和const声明的变量存在局部作用域。在全局作用域中使用var声明的变量会保存在window对象中，使用let和const声明的变量不会。使用var声明的变量具有变量提升，let和const没有。因此let和const必须先声明后使用（在let和const声明之前使用变量的这个瞬间.

2021-04-04 14:11:03 146

原创纯JS导入导出文件（XLSX）

主要整理了一下怎样使用前端导入导出txt、csv和excel文件，代码都在chrome运行成功目录1. 前置知识1.1 File API1.2 Blob类型1.3 ArrayBuffer类型1.4 下载文件的两种方法2. 导入导出txt和csv3. 导入导出excel文件3.1 关于插件js-xlsx和xlsx-style3.2 js-xlsx和xlsx-style中的API3.3 导入excel文件3.4 导出excel文件参考链接1. 前置知识1.1 File API1.2 Blob类型1.

2021-03-26 22:43:56 2146

原创 css中的渐变色

简单介绍渐变色和阴影目录1、径向渐变2、径向渐变参考文献1、径向渐变径向渐变使用linear-gradient，语法如下：background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);渐变方向有以下几种值：使用表示方位的单词to top 表示从下往上的方式进行渐变to bottom 表示从上往下的方式进行渐变to right 表示从左往右的方式进行渐变to left 表示从右往左的方.

2021-02-21 22:35:09 7710 1

原创 nth-child和nth-of-type的区别

nth-child和nth-of-type是比较常用的一个伪类选择器，过去一直没在意这个，今天发现原来他们之间还有这样的区别，记录一下。我们首先来看MDN上对它们的解释：:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）:nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选.

2021-02-10 16:48:06 1742 1

原创 base64的笔记

过去一直没搞懂base64是什么，最近看了阮一峰的笔记后，自己查了部分资料后才搞明白是什么。原来base64也像我之前做的UTF-8笔记一样，进行了编码，是为了解决电子邮件中不能直接使用非ASCII码字符的规定的问题。当然，现在我们常常是在图片中使用base64，减少请求次数。目录1、什么是base642、base64的编码方式3、base64的优缺点4、参考链接1、什么是base64我们都知道，ASCII码字符集只有128个字符，对于美国人可能还够用，但是对于其他国家来说就远远不够了。于是出现了.

2021-02-09 11:38:49 192

原创 Unicode，UTF-8，UTF-16和JavaScript

过去一直没搞懂Unicode和UTF-8之间的关系，对JavaScript中为什么无法正确表示某些四字节字符也懵懵懂懂，看了阮一峰大神的博客之后终于搞明白了，这篇是我的整理。目录1、什么是Unicode字符集2、UTF-8和UTF-163、JavaScript和UTF-164、参考链接1、什么是Unicode字符集我们都知道，在计算机里面，所有的内容都是以二进制的形式存在，那么可以很自然的想到，当我们要表示一个字符时，当然也是用一个二进制来表示，也就是说其实是用一个二进制数字来表示字符。但是问题是.

2021-02-08 17:13:17 404

原创学习flex基础用法，这篇就够啦

flex布局是目前常用的一种布局方式，这篇文章主要对flex的常用基础知识做一个整理。目录1、flex简介2、主轴上的设置2、侧轴上的设置4、其余部分参考链接1、flex简介flex布局是一种一维布局（网格布局则是一种二维布局）。这种布局主要作用于父级容器，通过控制父级容器的排列规则来达到需要的效果。任何一个元素都可以使用flex布局，只要给元素添加display: flex;即可。我们把添加了display: flex;的元素称为容器，元素内部的子元素称为项目。从上图我们可以看出，flex布.

2021-02-05 17:24:04 2414

原创关于position的sticky定位的介绍

前端时间浏览阮神的博客发现position居然还有个sticky这种神奇的定位，马上试了试，简单好用，一些简单的，比如说手机京东网页的吸附效果就可以使用sticky快速做好。目录1、`sticky`的效果2、`sticky`的简单介绍3、参考链接1、sticky的效果sticky有粘性的意思，所以sticky定位也可以称为粘性定位。从名字就可以看出这个定位常用于一些吸附功能。例如下面这个京东的页面，页面向上滑动的时候搜索框会从相对定位变成固定定位，使得其在用户浏览页面的时候搜索框一直固定在顶部，便.

2021-02-04 21:49:36 896

原创关于colgroup和col标签的介绍，使用其达到固定表头的效果

今天摸鱼的时候看阮神的博客，里面介绍了position的用法，最后一部分介绍了一个新的定位属性sticky，其中有一个固定表头的案例，我发现案例里面的固定表头只能用于那种占据整个页面的那种大表，但是我们常用的表格通常是只在一部分区域使用，于是查了一下固定表头的实现，在其中一种实现方法中发现了colgroup和col标签，回想起element-ui的表格组件也用了这两个标签，属实好奇，百度后决定记录一下。目录1、colgroup和col2、colgroup和col标签的区别3、使用colgroup和co.

2021-02-01 17:43:06 8351

基于xlsx-style的一个导出多页excel文件的简单函数封装

vue-devtools.rar

空空如也