- 博客(53)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 10个 Javascript 小技巧帮你提升代码质量
Javascript 常用代码优化和重构的方法简介主要介绍以下几点：提炼函数合并重复的条件片段把条件分支语句提炼成函数合理使用循环提前让函数退出代替嵌套条件分支传递对象参数代替过长的参数列表少用三目运算符合理使用链式调用分解大型类1. 提炼函数好处：避免出现超大函数。独立出来的函数有助于代码复用。独立出来的函数更容易被覆写。独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。语义化将多段分离的逻辑放在不同的函数中实现，可以使代码逻辑清晰，清楚的看到.
2020-12-26 12:20:50
201
原创 Vue3组件通信总结
前言我们知道vue3的Composition Api是它几个最大亮点之一，所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。基本操作这里先简单开发一个VInput的输入框组件。组件就像一个函数，主要就是处理输入和输出。Vue3在setup函数上提供了两个参数，一个props，一个是context下面的emit方法，分别来处理输入和输出。props现在VInput就是子组件，我需要它能够接受父级传递一个值，让它可以帮我做后续的逻辑处理在返回给父级。所以，这里
2020-12-16 21:07:41
10888
1
原创 前端面试知识点汇总
前端基础浏览器浏览器的缓存机制：强缓存与协商缓存，以及其区别是什么？存储相关：localstorage、sessionStorage、cookie等分别是做什么用的，区别是什么？浏览器的network面板里面的东西，主要是timing下面的时间段代表的都是什么意思？TTFB是什么？浏览器的performance用过吗，是用来干什么的？跨域的原理，跨域的实现方式有哪几种？浏览器环境下的event loop是怎样的？其实也就是宏任务和微任务，可以看下这篇文章JavaScript基础数据
2020-12-14 19:46:20
285
原创 前端性能优化之图片懒加载
在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。如图所示，这个页面启动时加载了几十张图片（甚至更多），而这些图片请求几乎是并发的，在 Chrome 浏览器，最多支持的并发请求次数是有限的，其他的请求会推入到队列中等待或者停滞不前，直到上轮请求完成后新的请求才会发出。所以相当一部分图片资源请求是
2020-12-13 21:46:30
464
原创 深入浅出vue.js 最佳实战
聊下Vue.js开发项目的最佳实践以及风格规范，为列表渲染设置属性Keykey这个特殊属性主要用在Vue.js的虚拟DOM算法中，在对比新旧虚拟节点时辨识虚拟节点。在v-if/v-if-else/v-else 中使用key如果一组v-if+v-else的元素类型相同，最好使用属性key(比如两个元素)// 不好的做法<div v-if="error"> 错误：{{ error }}</div><div v-else> {{ results }
2020-12-13 17:14:43
695
原创 教你用 Node 创建 CLI 工具
准备工作创建工程mkdir my-clicd my-clinpm init -ynpm i commander download-git-repo ora handlebars figlet clear chalk open watch -S创建 bin 目录package.json 添加 bin 字段，将自定义的命令软连到全局环境，同时执行 npm link 创建链接。 "bin": { "wbiao": "./bin//index.js" }在根目录下创建
2020-12-12 15:34:56
615
原创 Javascript异步的发展与6种解决方案总结
异步（Asynchronous）指同一时间不止一个事件发生，或者说是多个相关事件不等待前一事件完成就发生。异步处理不用阻塞当前线程来等待处理完成，而是允许后续操作，直至其它线程将处理完成，并回调通知此线程。现在与将来一个完整的javascript程序，几乎一定是由多个块构成的。这些块中只有一个是现在执行，其余的则会在将来执行。最常见的块单位是函数。举个例子function now() { return 21;}function later() { answer = answer * 2;
2020-12-11 11:22:54
211
原创 一份简简单单的git命令手册（附带备忘清单）
git 备忘清单一份简简单单的git备忘录清单git init # 初始化本地git仓库（创建新仓库）git config --global user.name "xxx" # 配置用户名git config --global user.email "xxx@xxx.com" # 配置邮件git config --global
2020-12-10 18:57:39
126
原创 8个css技巧
下面是总结的css技巧，建议大家收藏，以后用的时候就不用到处查资料了。当然这些也不是所有的，大家如果有什么好的css有趣样式技巧也可以发出来哦三角形最常见的一种形状了。切图，不存在的虚线效果css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计文本超出省略号为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
2020-12-09 21:43:14
162
原创 9个非常实用的CSS图标库
以前网页上显示图标都是用切成小图片，然后根据不同场景作多个小图，通过js来控制显示效果。字图图标，顾名思义，就像使用通常的字体，可以设置字体颜色，大小等，不用在搞多张小图片，非常灵活。其优点：轻松的定义图标的颜色，大小，阴影，和任何与css相关的特性。更快的载入速度、样式更容易定义。使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中。1、Iconfont阿里巴巴矢量图标库，Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴
2020-12-09 17:15:38
1130
原创 Scss 缩减50%样式代码的实战经验总结
前言Sass是css3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改html标签，并编译出标准的css代码用于各种生产环境。Sass语法比较简单，难点在于如何将Sass运用到实际项目中，解决css存在的痛点，从而提高我们效率。经过实际项目的摸索，总结了以下14条实践经验进行分享，希望能帮助大家扩宽思维，更好地将Sass运用到实际项目中。在项目中，我们使用支持传统的类css语法
2020-12-09 16:00:02
187
原创 十五条 JavaScript 编程技巧
大多数编程语言都足够开放，以允许程序员以多种方式得到类似的结果。JavaScript 也是如此，使用 JavaScript，我们通常可以通过多种方法来达到相似的结果，虽然有时会造成混淆。其中一些用法比其他方法要好，而这些就是我要分享的。我将在本文中一一列举，我敢肯定，您在阅读本文时会发现，在很多地方您和我的做法是相同的。1. 使用模板字符串使用+运算符拼接字符串来构建有意义的字符串，这是过时的做法。此外，将字符串与动态值（或表达式）连接可能会导致计算或表达错误。let name = 'Charl
2020-12-06 21:43:19
155
原创 磁盘调度算法
来自不同进程的磁盘I/O请求构成一个随机分布的请求队列。磁盘I/O调度的主要目标就是减少请求队列对应的平均柱面定位时间。目前常用的磁盘调度算法有：先来先服务FCFS最短寻道时间优先SSTF扫描（SCAN）算法循环扫描（CSCAN）算法例 假设磁盘访问序列：98，183，37，122，14，124，65，67。移动臂的运动方向：沿磁道号递减的方向移动。读写头起始位置：53（1）安排磁头服务序列（2）计算磁头移动总距离（道数）1.先来先服务按访问请求到达的先后次序服务优点：
2020-12-05 22:14:58
3387
原创 如何在JavaScript中获取屏幕，窗口和网页大小
浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。屏幕屏幕尺寸屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存屏幕尺寸信息的对象。screen.width：屏幕的宽。screen.height：屏幕的高。可用屏幕尺寸可用的屏幕大小由活动屏幕的宽度和高度组成，没有操作系统工具栏。screen.availWidth：可利用的宽，等于屏幕的宽。screen.availH
2020-12-05 11:10:00
2122
原创 Vue3新特性
官方还没有正式推出来，利用@vue/composition-api先预热一下初始化项目npm install -g @vue/clivue create vue3npm install @vue/composition-api --save// main.js 导入import VueComposition from '@vue/composition-api'Vue.use(VueComposition)一、setupsetup是专门为使用vue3的composition-api新特性
2020-12-03 23:43:24
154
原创 手写Axios核心原理
Axios是一个基于promise的HTTP库，它能够自动判断当前环境，自由切换在浏览器和 node.js环境中。如果是浏览器，就会基于XMLHttpRequests实现；如果是node环境，就会基于node内置核心http模块实现。同时，它还用promise处理了响应结果，避免陷入回调地狱中去。不仅如此，Axios还可以拦截请求和响应、转化请求数据和响应数据、中断请求、自动转换JSON数据、客户端支持防御XSRF等。如此众多好用的功能，快来一起看看它是如何实现的吧！1.基本使用axios基本使用方式
2020-12-03 16:36:54
302
原创 前后端分离之项目引入node
一、为什么要做前后端分离随着不同终端(Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。现阶段我们主要以后端MVC的模式进行开发，这种模式严重阻碍了前端开发效率，也让后端不能专注于业务开发，对后期的维护损耗较大。解决方案是让前端能控制Controller层，但是如果
2020-12-02 19:54:21
305
原创 css3实现水平垂直居中的十种方案
实现水平垂直居中的1十种方案html代码： <h1 class="app"> <div></div> </h1>1. 第一种方案子元素高度可以设定也可以不设定 .app { width: 200px; height: 200px; background-color: yellow; display: flex;
2020-12-02 19:16:14
616
转载 前端面试题（2020-2021）
一，前端解决跨域问题（常用）1，后端设置cors允许跨域，一般指定ip，也可以允许全部2，jsonp，利用浏览器对script加载完自动执行的特新来实现的，需要客户端和服务器端两端的同时配合，因此需要特别处理的接口可以使用，一般传统的后台接口不会采用这种方式进行跨域。3，Nginx反向代理，一般利用vue-cli全家桶，开发时在vue.config.js中设置接口在同一个后端域名和端口，正式服务则使用Nginx确保在统一域名下。二，常见web安全及防护防护：1，对用户输入内容进行限制和校验2，
2020-11-27 22:30:14
1088
原创 Vue.js 模板语法
1. Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。2. 插值文本数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值：文本插值<div id="app"> <p>{{ me
2020-11-27 19:40:31
124
原创 JS 浏览器BOM
1. JavaScript Window1.1 JavaScript Window - 浏览器对象模型浏览器对象模型(BOM) 使 JavaScript 有能力与浏览器"对话"。1.2 浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。1.3 Window 对象所有浏览器都支持window对象。它表示浏览器窗口。
2020-11-25 20:15:07
87
原创 js高级教程
1. JavaScript 对象1.1 JavaScript 对象JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。1.2 所有事物都是对象JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。数字型可以是一个对象。字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象1.3
2020-11-23 22:16:30
376
原创 JS HTML DOM
1. DOM简介通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。1.1HTML DOM (文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM模型被构造为对象的树：HTML DOM 树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性
2020-11-23 21:06:24
95
原创 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won‘t
vue-cli项目打包报错Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.报错原因因为vue-cli的默认配置中,publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:npm install -g http-serve...
2020-09-12 10:02:08
8123
原创 vue中的动画
vue中的动画使用过度类名实现动画动画自定义v-前缀钩子函数实现半场动画transition-group元素使用过度类名实现动画使用tranisition元素，把需要被动画控制的元素包裹起来，tranisition是vue官方提供的。<tranisition> <h1>我需要动画</h1></tranisition>自定义两组样式，来控制tranisition内部的元素实现动画(1) v-enter（这是一个时间点）是进入之前，元素的
2020-08-29 16:15:38
142
原创 vue-resource实现get，post，json请求
vue-resource实现get，post，json请求getpostjson除了vue-resource之外，还可以使用‘axios’的第三方包实现数据的请求。在引入vue-resource包时，因为vue-resource依赖于vue，所以要先引入vue，再引入vue-resourceget假如get的api为：http://vue.studyit.io/api/getlunbo<input type="button" value="get请求" @click="getInfo">
2020-08-28 14:17:54
720
原创 vue生命周期钩子
vue生命周期钩子生命周期图示beforeCreateCreatedbeforeMountMountedbeforeUpdateUpdated生命周期图示beforeCreate表示实例完全被创建出来之前，会执行他。数据观测（data observer）和event/watcher事件配置之前被调用。注意：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化beforeCreate() { console.log('beforeCreate')
2020-08-28 09:46:13
100
原创 v-bind及class与style的绑定
github利用git上传项目文件初始化仓库，在git中输入：“git init”添加文件项目：在git中输入 “git add .”描述项目信息，输入：git commit -m “项目信息”将本地的仓库关联到github上，输入：git remote add origin “你的ssh仓库地址”。把代码上传到github仓库，输入：git push -u origin master如果显示如上图，则须把readme.md文件下载到本地，输入：git pull --rebase or
2020-08-26 15:10:41
209
原创 vue报错
执行vue报错出现如下情况解决方法：在编译vue是报错，排查后是，在.vue文件中后加入空行后就能够解决了。出错情况如下：表示多次导入element-ui解决方法如下：
2020-08-25 18:39:37
236
原创 如何从GitHub上下载项目？下载一个项目中的一个文件或者子文件夹
从GitHub上下载整个项目非常简单，只需要git clone xxx就可以了，但是有时候我们只需要项目中的某个文件或者子文件夹，用SVN就可以实现。在Windows上装个TortoiseSVN比较方便。安装过程很简单，TortoiseSVN安装完毕后，例如我们打开GitHub上的某一个项目：https://github.com/sunshineatnoon/Paper-Implementations这个项目里面有很多子文件夹，假如我们只要pix2pix这个文件夹里的东西：首先，点开pix..
2020-08-24 12:35:35
887
1
原创 Eslint报错整理与解决方法
Eslint报错整理与解决方法1.‘Unexpected tab character’ 字面意思理解呢就是意想不到的制表符，当时出现的时候就是我习惯的使用Tab键去打空格，但是eslint默认不认可Tab，所以解决方法很简单： 在eslint的配置文件中（.eslintrc）rules项中添加一行："no-tabs":"off"。如下：2.‘expected indentation of 2 spaces but found 1 tab’ 字面意思就是预期缩进2个空格，但找到1
2020-07-18 20:10:40
1855
原创 github利用git上传项目文件
github利用git上传项目文件初始化仓库，在git中输入："git init" 添加文件项目：在git中输入 "git add." 描述项目信息，输入：git commit -m "项目信息" 将本地的仓库关联到github上，输入：git remote add origin "你的ssh仓库地址"。 把代码上传到github仓库，输入：git push -u origin master 如果显示如上图，则须把readme.md文件下载到本地，输入：git pull --rebas..
2020-07-16 13:00:13
109
原创 数据库sql几种增删改查的语法以及例子
结构化查询语言SQL的定义SQL的特点SQL的功能SQL动词SQL的定义 定义：结构化查询语言（SQL），是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。SQL的特点 特点：综合统一，高度非过程化，面向集合的操作方式SQL的功能 功能：数据查询、数据定义、数据操纵、数据控制功能于一体。数据查询 select语法：SELECT 列名称 FROM 表名称 或SELECT * FROM 表名称 例：SELECT * FROM Persons数据定义
2020-07-13 09:35:08
970
原创 排序
排序直接插入排序希尔排序冒泡排序快速排序简单选择排序堆排序归并排序基数排序各种排序方法的性能直接插入排序直接插入排序算法如下：void InsertSort(int *a, size_t n){ int i; int j; for (i = 2; i <= n; i++) { a[0] = a[i]; j = i - 1; while (a[0] < a[j]) { a[j + 1] = a[j]; j--; } a[j + 1] = a[0]
2020-07-12 22:21:07
123
原创 结构体
结构体顺序表的结构体单链表的结构体双链表的结构体顺序栈的结构体链栈的结构体顺序队的结构体链队的结构体链队头结点结构体二叉树的链式存储的结构体顺序表的结构体Define maxsize 50;Typedef struct {Elemtype data[maxsize];Int length;}sqList;单链表的结构体Typedef struct Lnode {Elemtype data;Struct Lnode *next;}LinkNode;双链表的结构体Typede
2020-07-12 21:41:26
105
原创 查找
数据结构中的查找算法目录顺序查找顺序查找的时间复杂度以及优点顺序查找的算法折半查找折半查找的时间复杂度以及优点折半查找的算法分块查找分块查找的算法顺序查找顺序查找的时间复杂度以及优点顺序查找是一种最简单的查找方法，优点是算法简单，且对表的结构无特别要求，无论是顺序表还是用链表来存放元素，也无论是元素之间是否按关键字有序，它都同样适用。顺序查找的时间复杂度是O(n),其中n为查找表中的元素个数。顺序查找的算法顺序查找的算法如下：int SeqSearch(RecType R[],int n
2020-07-12 21:31:42
96
原创 初识GitHub
文章目录什么是 Github ？注册安装step1:创建新项目step3：可以开始写作啦！step4:上传你写的小说step5：回退到之前的版本step6：除了写代码你还可以用 github 做什么？什么是 Github ？作为开源代码库以及版本控制系统，Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。如前所述，作为一个分布式的版本控制系统，在Git中并不存在主库这样的概念，每一份复制出的库都可以独立使用
2020-06-13 11:02:33
589
1
原创 jquery增删改查与jquery事件
jquery增删改查与jquery事件目录jquery查找1. 基本选择器 #id.class 同css2. 层级选择器 后代选择器 子代选择器 同css3. 兄弟关系jquery修改1． 访问元素属性2.内容2.1 html操作2.2 文本操作2.3 值操作3. 样式3.1． 直接修改css属性3.2． 通过修改class批量修改样式jquery添加jquery删除Jquery事件1. 事件绑定2. 事件对象jquery查找1. 基本选择器 #id.class 同css2. 层级选择器 后
2020-05-24 17:40:28
221
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人