小技术
小技术
王噶一啊一
新手新学,仅来记录学习过程
展开
-
前端面试题(08)
本篇LISTDoctype 的作用?严格模式与混杂模式的区别?IE 的双边距 BUG:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大。HTML 与 XHTML——二者有什么区别?对 WEB 标准以及 W3C 的理解与认识行内元素有哪些?块级元素有哪些?CSS 的盒模型?2.3.4.5....原创 2020-10-03 10:26:01 · 220 阅读 · 0 评论 -
虚拟的DOM与DOM diff
1.关于DOM的谣言2.虚拟DOM优点3.虚拟DOM是什么样子的reactvue4.如何创建虚拟DOM5.创建虚拟DOM的方便方法6.虚拟DOM是什么,虚拟DOM优点,缺点7.diff的实现基本思路8.小结原创 2020-10-03 10:25:45 · 162 阅读 · 0 评论 -
前端面试题(07)
本篇LISTCSS 中 link 和@import 的区别是简介盒子模型:为什么要初始化样式?BFC 是什么?html 语义化是什么?2.4.5.原创 2020-10-03 10:25:25 · 122 阅读 · 0 评论 -
前端面试题(06)
本篇LIST如何垂直居中一个浮动元素?px 和 em 的区别。描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗?你 了解他们的不同之处?Sass、LESS 是什么?大家为什么要使用他们?// 方法一:已知元素的高宽 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; lef原创 2020-10-03 10:25:05 · 146 阅读 · 0 评论 -
前端面试题(05)
本篇LIST什么是 Css Hack?ie6,7,8 的 hack 分别是什么?行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可 设置吗?什么是外边距重叠?重叠的结果是什么?rgba()和 opacity 的透明效果有什么不同?css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?2.3.4.5....原创 2020-10-03 10:24:50 · 94 阅读 · 0 评论 -
canvas(01基础用法)
1.canvas大小的初始化<canvas id="tutorial" width="150" height="150"></canvas>片canvas 标签只有两个属性—— width和height。这些都是可选的,并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲原创 2020-10-03 10:24:23 · 108 阅读 · 0 评论 -
前端面试题02
本篇LIST: cookies,sessionStorage,localStorage的区别 src与href的区别 网页制作用到的图片格式 一般一次js 请求会在哪里进行缓存3.原创 2020-10-03 10:24:01 · 149 阅读 · 0 评论 -
前端面试题01
本篇LIST div+css布局与table布局的比较 img标签的alt,title属性。strong与em标签不同的侧重点 为什么利用多个域名来存储网站的资源 网页标准制定的重要性2.3.4.原创 2020-10-03 10:20:31 · 120 阅读 · 0 评论 -
SSL/TLS协议运行机制的概述
一、作用(1) 所有信息都是加密传播,第三方无法窃听。(2) 具有校验机制,一旦被篡改,通信双方会立刻发现。(3) 配备身份证书,防止身份被冒充。互联网是开放环境,通信双方都是未知身份,这为协议的设计带来了很大的难度。而且,协议还必须能够经受所有匪夷所思的攻击,这使得SSL/TLS协议变得异常复杂。二、基本的运行过程SSL/TLS协议的基本思路是采用公钥加密法,也就是说,客户端先向服务器端索要公钥,然后用公钥加密信息,服务器收到密文后,用自己的私钥解密。(1)如何保证公钥不被篡改?解决原创 2020-07-15 08:44:17 · 114 阅读 · 0 评论 -
React Hooks深入了解
1.什么是 React Hooks官方介绍:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。2.React Hooks的优点是什么拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。拥有了Hooks,生命周期钩子函数可以先丢一边了。既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。3.一个最简单的Hooks以下是一个原本应该使用class的简单应原创 2020-07-15 08:43:52 · 4344 阅读 · 0 评论 -
原生js实现ajax封装
一、什么是ajax?定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。作用:提高用户体验,减少网络数据的传输量二、ajax常见运用场景表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。三、Ajax原理是什么Ajax请求数据流程,其中最核心的依赖是浏览器提供的对象xhr,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收HTTP响应原创 2020-07-15 08:43:37 · 303 阅读 · 0 评论 -
MVC与MVVM浅析(day02)
MVC1.什么是MVCMVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。2. M ,V,CModel(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象原创 2020-07-15 08:42:34 · 116 阅读 · 0 评论 -
await 理解(day02)
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function。若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表原创 2020-07-15 08:42:17 · 215 阅读 · 0 评论 -
CSS中定位和TRANSFORM的比较
POSITIONCSS中我们想要改变一个元素的位置,我们可以采用的方法之一就是定位,这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位(top,left,right,bottom)来实现元素的移动。TRANSFORMCSS3中提供了transform属性,其中的translateX和translateY值可以实现元素的横向与纵向移动。区别和选择经过测试。TRANSFO原创 2020-07-15 08:42:05 · 696 阅读 · 0 评论 -
js闭包,js变量泄露(day01)
一.什么是闭包加粗样式高级程序设计三中:闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉。可以让变量私有化,放到摸一个具体的作用函数中。二. 闭包的实例// 创建闭包最常见的方式函数作为返回值function foo() { var name = "kebi"; return function() {原创 2020-07-15 08:41:53 · 237 阅读 · 0 评论 -
Promise浅析(day02)
Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终 执行结果,而是一个能代表未来出现的结果的promise对象方法Promise.all(iterable) [全部成功时返回]这个方法返回一个新的promise对象,该promise对原创 2020-07-15 08:41:31 · 98 阅读 · 0 评论 -
promise的三个缺点
promise通常用来解决回调地狱的问题,但也有几个不可忽视的缺点promise一旦新建就会立即执行,无法中途取消当处于pending状态时,无法得知当前处于哪一个状态,是刚刚开始还是刚刚结束如果不设置回调函数,promise内部的错误就无法反映到外部promise封装ajax时,由于promise是异步任务,发送请求的三步会被延后到整个脚本同步代码执行完,并且将响应回调函数延迟到现有队列的最后,如果大量使用会大大降低了请求效率。...原创 2020-07-15 08:41:05 · 1669 阅读 · 0 评论 -
redux 异步编程
下载 redux 插件(异步中间件)npm install --save redux-thunkredux/store.js/*redux 最核心的管理对象 store*/import {createStore, applyMiddleware} from 'redux' import thunk from 'redux-thunk'import reducer from './reducer'export default createStore(reducer, applyMiddlew原创 2020-07-15 08:40:47 · 91 阅读 · 0 评论 -
React-redux使用
为什么要使用react-redux由于redux的store与组件的耦合度太高所以,我们用react官方提供的react-redux可以使两者耦合度降低,更好的实现模块化开发。react-redux使我们使用store更加的方便简洁如何使用首先store,reducer, actions的创建方式不变,我们只把在组件中用store API方式换成了高阶组件的方式/index.js/入口文件中,我们把根组件渲染到页面我们需要如下的书写方式:3. 接下来我们需要定义一个包裹组件,用来给UI原创 2020-07-15 08:39:44 · 100 阅读 · 0 评论 -
React-router中使用BrowserRouter跳转后刷新出现404问题的解决
问题引入react路由的browserRouter使用的是h5 history API 的高阶路由组件,保证你的 UI 界面和 URL 保持同步。但是有个缺点,一刷新页面就会出现404找不到,原因是本地开发webpack是从内存中读取资源browserRouter从实际引入中并未找到文件。也就是说咱们需要访问服务器的根目录下的index文件返回数据渲染页面,但是browser模式向服务器的非根路径下发送了请求,所以找不到页面。解决方案一:使用HashRouter来跳转,只是url里会带一个#号,不是太原创 2020-07-15 08:39:30 · 2628 阅读 · 0 评论 -
Redux的理解与使用
一.什么是Redux?Redux是一个第三方状态管理的js库,它不仅仅可以适用于react框架,还可以用于其他的vue,auglar等框架。只不过react的生态中不包括一个状态管理的库而已,所以与react配合使用较为好。二.神魔时候要使用Redux来管理状态当我们多个组件共享状态的时候最好使用Redux来管理,方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux二.Redux的三个核心要素1. actionsactions可以说是一个让reducer执行不同函数的s原创 2020-07-15 08:39:08 · 212 阅读 · 0 评论 -
深入vue响应式原理(day03)
VUE是如何追踪变化的当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖原创 2020-07-15 08:38:10 · 194 阅读 · 0 评论 -
谈谈 JS 垃圾回收机制(day03)
垃圾回收JavaScript 中的内存管理是自动执行的,而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。当不再需要某样东西时会发生什么? JavaScript 引擎是如何发现并清理它?可达性JavaScript 中内存管理的主要概念是可达性。简单地说,“可达性” 值就是那些以某种方式可访问或可用的值,它们被保证存储在内存中。1. 有一组基本的固有可达值,由于显而易见的原因无法删除。例如:本地函数的局部变量和参数当前嵌套调用链上的其他函数的变量和参数全局变量还有一些其他原创 2020-07-15 08:37:55 · 133 阅读 · 0 评论 -
手写防抖函数(day04)
问题引入当我们执行下面的一个事件时,当我们输入就会触发函数向后端发送请求,增大了浏览器的压力使用lodash进行防抖手写防抖函数利用闭包原创 2020-07-15 08:37:36 · 145 阅读 · 0 评论 -
vue中的CSS动画
2. 关键帧动画 的使用如下图: 先进行 动画的 定义 , 然后再 在 自动添加的 类名下 调用 这个 关键帧自定义 添加 的 类名 ,如下3. ANIMATE.CSS库 的使用(内部使用关键帧)首先下载 animate.css 库 , 然后 在项目中 引入, 需要 添加 一个 基础 的 类名 , 后面 跟一个 具体 的 动画 效果类名:刷新页面的 的 元素 第一次显示,不会触发 设置 的动画效果, 可以用下图方式 解决:4. 关键帧 动画 与 transtion 一起使用如果两者有冲原创 2020-07-15 08:36:45 · 690 阅读 · 0 评论 -
2059 - Authentication plugin 'caching_sha2_password' cannot be loaded dlope
今天在mac上使用navicat连接mysql报错弄了一下午,各种查询踩坑,总算解决了。即从mysql5.7版本之后,默认采用了caching_sha2_password验证方式,我用的mysql8.0,于是就遇到了这个问题。解决办法:修改代理的方式。换成第二种,即可连接成功...原创 2020-04-09 21:40:38 · 330 阅读 · 0 评论 -
css | js 实现扩展卡片小demo
1.代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link re...原创 2020-04-05 23:34:36 · 295 阅读 · 0 评论 -
ESLint如何配置
1.简介通过用 ESLint 来检查一些规则,我们可以:统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。2.安装1 安装 ESLint 的依赖。npm install ...转载 2020-04-05 13:01:35 · 1142 阅读 · 0 评论 -
VSCode——自定义VSCode背景图片
本文转载自https://blog.csdn.net/yukinoai/article/details/845649491.以管理员身份运行VS Code,安装background插件2.打开setting,在搜索框中输入background,选择扩展中的plugin background,选择在setting.json中编辑3.在用户设置中输入以下代码,修改完后保存,会提示重启VS C...转载 2020-04-05 09:11:25 · 1541 阅读 · 1 评论 -
VSCode 初次写vue项目并一键生成.vue模版
VSCode 写vue项目一键生成.vue模版1.新建代码片段文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定2.配置快捷生成的vue模板{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 --&...原创 2020-04-04 15:07:04 · 243 阅读 · 0 评论