- 博客(26)
- 收藏
- 关注
RSS订阅原创 一键部署自己的网站以及上传至npm
如何将自己做的UI库以及文档上线并发布至npm？让我们的官网部署到github或者码云上发布到npm首先打包生成dist目录（如果项目中有dist目录则删除后在打包）yarn build// 或者npm run build在.gitnore中加入/dist（忽略根目录下的dist）在本地测试网站是否成功运行// 安装http-server 开启本地服务器npm install http-server -g// 切换到我们的项目目录、开启本地服务hs
2021-07-26 22:00:05
545
原创 JavaScript深浅拷贝原理实现
JS深浅拷贝与赋值JavaScript基本数据类型的变量存储在栈中，引用数据类型则存储在堆中，但是引用数据类型的存储地址则保存在栈中。赋值当我们把一个对象赋值给一个新的变量时候，赋的其实是该对象在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。var programmer = { name: '张三', attr: ['前端', ['Vue', 'React', 'Angular'], '后端
2021-06-05 16:24:24
357
1
原创 JavaScript数据结构与算法---队列和双端队列
队列定义：队列是遵循 先进先出 原则的一种有序的项队列在尾部添加新的元素，并从顶部移除元素最新添加的元素必须排在队列的末尾队列最通俗的讲就是排队，生活中的排队，先排的人先去处理服务队列的实现：创建队列// count属性控制队列的大小// lowestCount属性追踪第一个元素class Queue { constructor() { this.count = 0 this.lowestCount = 0 this.ite
2021-05-08 16:11:43
304
原创 JavaScript数据结构与算法---栈
栈定义：栈 是一种遵循 后进先出 原则的有序集合我们把新添加或者删除的的元素都保存在栈的同一端，称为栈顶，而另一端就叫做栈底在栈里，新元素都靠近栈顶，旧元素都靠近栈底。在生活中可以比作为老式手电筒中的电池，最后放进去的一块肯定最先被拿出来。也可以比作进电梯，最先进去的人肯定在最里面，也就是最后一个出来。栈的实现一：创建一个基于数组的栈// 这里用一个类来表示class Stack { constructor() { this.items = [] }
2021-05-07 23:34:59
273
原创 Vue之虚拟DOM和diff算法
Vue之虚拟DOM和diff算法snabbdom简介snabbdom是著名的虚拟DOM库，是diff算法的鼻祖，Vue源码借鉴了snabbdom官方git：https://github.com/snabbdom/snabbdom在git上的snabbdom源码是用TypeScirpt写的，git上并不提供编译好的JavaScript版本如果要直接使用build出来的JavaScript版本的snabbdom库，可以从npm上下载虚拟DOM和h函数虚拟DOM：用JavaScript对象描
2021-04-28 23:03:45
244
原创 JavaScript快速排序算法
快速排序法原理：首先要从一列数据中取出一个基准数小于这个基准数的全放到左边，大于等于这个基准数的全放到右边再对左右两个区间继续重复第2步，知道个区间只有一个数字最后将有序的区间合并起来即可代码实现： const arr = [31, 34, 23, 2, 15, 67, 54, 99] function quickSort(arr) { // 1.找基准数，并且将小于等于基准数的全部放到左边（左数组） // 将大于等于基准数的全部放到右边（右数组）
2021-04-18 23:59:08
176
原创 keep-alive详解
keep-alivekeep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，那么我们先来看一个例子，在Home组件中点击num++，在About组件中点击num–，那么当切换组件后，在查看刚才的组件，发现值又被重新加载回了100，这样类似的问题在我们实际开发中就会设计更多的组件页面切换等等。解决上面的问题非常简单，只需要将我们的用包裹起来就可以了// App.vue<template> <div id="app">
2021-04-15 22:23:48
541
原创 Vue父子组件传值以及兄弟组件传值
1. 父传子首先我们在component里创建一个子组件，然后用props声明他的属性title，其次在我们的父组件中注册子组件并为属性赋值，最后就可以在子组件中使用这个属性了。// 子组件 ChildComponent.vue<template> <div> <h2>{{ title }}</h2> </div></template><script>export default { p
2021-04-14 00:48:12
1136
3
原创 Vue双向数据绑定原理
VUE双向数据绑定原理vue双向数据绑定是通过 数据劫持，并结合 发布-订阅模式的方法来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变核心：关于vue实现双向数据绑定，其核心是Object.defineProperty()方法介绍一下Object.defineProperty()方法Object.defineProperty(obj,prop,descriptor)这个语法内有三个参数，分别是obj（要定义其上属性的对象） prop （要定义或
2021-04-13 00:33:40
4760
3
原创 Sass and Less使用以及区别
Sass and LessLess:（Leaner Style Sheets）使用一:安装lessnpm install -g less 解析less并保存lessc styles.less styles.css使用二：<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1
2021-04-11 17:45:00
369
4
原创 js实现深度优先搜索(DFS)和广度优先搜索(BFS)
深度优先搜索（DFS）首先构造一个我们需要遍历的结构，这里用html演示<div id="root"> <p></p> <label></label> <ul> <li> <span></span> </li> <li></li>
2021-04-05 23:12:47
4581
12
原创 JavaScript数组方法（最全）
JavaScript数组常用方法(最全)今天我们对JavaScript的数组以及对象的方法做一个总结，方便与以后的开发与查询，多多收藏哦！1. push()push方法可以向数组的末尾添加一个或者多个元素，并返回新的长度.2. pop()pop() 方法用于删除并返回数组的最后一个元素。3. unshift()unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。4. shift()shift() 方法用于把数组的第一个元素从其中删除，并返回第一
2021-04-02 22:04:45
39641
17
原创 Promise异步(三）手写实现Promise
实现手写Promise我们使用类的方式进行构建，首先声明三种状态，也就是我们Promise通常的三个值，然后需要一个构造函数，并传递一个执行函数作为参数 ，并且默认是准备状态，还有promise的返回值，接着继续定义我们的成功和拒绝的方法，但是这里注意的是，在严格模式下，这两个方法里的this并不是我们的对象，而是window，所以我们需要绑定当前的this<script>class MyPromise{ // 定义等待状态 static PENDING = 'pending'
2021-03-28 15:57:54
261
原创 Promise异步(二)Promise的使用以及async/await
现在我们正式开始了解并使用Promise首先我们先打印一个Promise看看<script> console.log(new Promise((resolve, reject) => {}))</script>这时候我们会看到一个padding状态，padding呢就可以理解成一个准备阶段，当这个准备阶段完成后，就是两种结果，成功或者失败 也就是上述 代码中的resolve和reject 当我们使用resolve通知成功的时候，状态就会发生改变<
2021-03-26 23:34:23
572
原创 Promise异步(一)JS执行机制以及宏任务、微任务
Promise异步Js执行机制javaScript语言的一大特性就是单线程，也就是说，同一时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，这样导致的问题就是：如果js执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。下面来看例子：<script> console.log(1) setTimeout(function(){ console.log(3) },2000) console.log(2)<
2021-03-26 00:02:57
733
1
原创 axios由浅入深(二)源码分析以及模拟实现
axios源码分析axios和Axios的关系？从语法上来说axios不是Axios的实例从功能上说axios是Axios的实例axios是Axios.request函数bind()返回的函数axios作为对象有Axios原型对象上所有方法，有Axios对象上所有属性instance与axios的区别相同：都是一个能发任意请求的函数：request(config)都有发特定请求的方法：get()/post()/put()/delete()都有默认配置和拦截器的属性：default
2021-03-21 16:54:00
236
2
原创 axios由浅入深(一)
axios构建服务端json-server安装全局json-servernpm install -g json-server创建一个db.json{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "n
2021-03-21 00:49:39
612
3
原创 原生js、JQuery、axios实现Ajax异步通信以及解决跨域
Ajax简介Ajax全称为 Asynchronous JavaScript And XML 就是异步的JS和XMLXML：可扩展标记语言 被设计用来传输和存储数据优点：可以无刷新页面与服务器进行通信允许你根据用户时间来更新部分页面内容缺点：没有浏览历史，不能回退存在跨域问题SEO不友好（搜索引擎优化）Ajax返回的状态0 - (未初始化) 还没有调用send()方法1 - (载入)已调用send()方法，正在发送请求2 - (载入完成)send()方法执行完
2021-03-20 01:05:51
2241
5
原创 简易登录静态页面（复制即可使用）
vue+elementUI实现的简易静态登录页面直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style>
2021-03-17 23:03:45
595
原创 快速搞懂Vuex(状态管理模式)以及vuex+elementUI实战案例任务列表
Vuex（Vue状态管理模式）Vuex的介绍Vuex 是一个专门为Vue.js 应用程序开发的状态管理模式。他采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可以预测的方式发生变化。说白了就是，当我们面对一些中大型项目时，各个组件之间传参就会变的比较复杂，这时，使用Vuex来进行参数的集中管理就很方便。Vuex的安装当我们创建vue项目时，可以选择手动安装vuex，如果未选择vuex，也可以进行npm安装npm install vuex -s然后在项目的src目录创建
2021-03-17 16:37:00
490
2
原创 git push origin master后报错! [rejected] master -＞ master (non-fast-forward)
! [rejected] master -> master (non-fast-forward)当我们git push -u origin master会报如下错误造成以上的原因可能是本地的ReadMe.md和远程的不同步解决方法一：git pull --rebase origin master // 本地生成ReadMe.md文件然后在git push origin master即可效果：解决方法二（谨慎使用！）：git push -f origin master
2021-03-17 00:57:32
345
原创 mac上安装并使用浏览器插件vue-devtools 避免踩坑 亲测有效
mac上安装并使用浏览器插件 vue-devtools 避免踩坑 亲测有效vue-devtools 是一款用于调试vue的浏览器插件，用过的人应该都知道，非常友好，极大提高调试效率，以下就是安装步骤将github上的vue-devtools项目clone至本地git clone https://github.com/vuejs/vue-devtools.git切换到vue-devtools目录cd vue-devtools查看一下当前所处git分支，clone后是默认处于dev
2021-03-15 14:17:23
822
原创 Vue中快速使用layui实现简易轮播图（易上手）
layui 快速实现简易轮播图（易上手）首先介绍一下layui这个框架layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为后端程序员量身定做，你
2021-03-13 13:05:04
1777
1
原创 Mac下安装vue环境
mac下安装vue环境1. 首先我们要安装 node.js 因为vue是依托于node的这里我演示的node.js官网安装 进去根据自己的需要下载自己的版本即可，下载完后，按照默认步骤安装即可安装完后我们可以打开终端试着输入如下命令，并且安装完node后其自带的npm也会安装node --versionnpm --version2. 安装cnpm 代理npm 国内直接使用 npm 的官方镜像是非常慢的，推荐使用淘宝 NPM 镜像：npm install -g cnpm --registry
2021-03-13 08:53:28
587
原创 mac上传项目到码云（gitee）
mac上传项目到码云（gitee）建立本地git仓库cd 项目的路径git init将本地项目工作区的所有文件添加到暂存区git add ..表示所有文件 如果想添加项目中的制定文件，那就把.改成指定的文件名即可将暂存区的文件提交到本地仓库git commit -m ''''中写注释语句在码云上创建自己的项目将本地仓库关联到码云上git remote add origin https://gitee.com/yinlululu/my-vue.git后面的url
2021-03-10 16:26:38
587
原创 Mac Book操作 Typora基本快捷键
标题级别# 一级标题 command + 1## 二级标题 command + 2### 三级标题 command + 3#### 四级标题 command + 4##### 五级标题 command + 5###### 六级标题 command + 6引用> 引用command + option + Q引用无序列表* AAA* BBB* CCC* 多行列表TAB * 多行列表TAB TAB * 多行列表comm
2021-03-10 16:03:33
266
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人