面向许三多编程

原创 【无标题】

原创 2021-10-03aa

原创 前端面试题（08）

本篇LISTDoctype 的作用？严格模式与混杂模式的区别？IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大。HTML 与 XHTML——二者有什么区别？对 WEB 标准以及 W3C 的理解与认识行内元素有哪些?块级元素有哪些?CSS 的盒模型?2.3.4.5....

原创 虚拟的DOM与DOM diff

1.关于DOM的谣言2.虚拟DOM优点3.虚拟DOM是什么样子的reactvue4.如何创建虚拟DOM5.创建虚拟DOM的方便方法6.虚拟DOM是什么，虚拟DOM优点，缺点7.diff的实现基本思路8.小结

原创 前端面试题（07）

本篇LISTCSS 中 link 和@import 的区别是简介盒子模型：为什么要初始化样式？BFC 是什么?html 语义化是什么？2.4.5.

原创 前端面试题（06）

本篇LIST如何垂直居中一个浮动元素？px 和 em 的区别。描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你 了解他们的不同之处？Sass、LESS 是什么？大家为什么要使用他们？// 方法一：已知元素的高宽 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; lef

原创 前端面试题（05）

本篇LIST什么是 Css Hack？ie6,7,8 的 hack 分别是什么？行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可 设置吗？什么是外边距重叠？重叠的结果是什么？rgba()和 opacity 的透明效果有什么不同？css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？2.3.4.5....

原创 canvas（01基础用法）

1.canvas大小的初始化<canvas id="tutorial" width="150" height="150"></canvas>片canvas 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲

原创 前端面试题02

本篇LIST： cookies,sessionStorage,localStorage的区别 src与href的区别 网页制作用到的图片格式 一般一次js 请求会在哪里进行缓存3.

原创 无重复字符的最长子串

题目解法一： 维护数组var lengthOfLongestSubstring = function(s) { let arr = [], max = 0 for(let i = 0; i < s.length; i++) { let index = arr.indexOf(s[i]) if(index !== -1) { arr.splice(0, index+1); } arr.push

原创 前端导航站点（PC端）

本篇LIST1.项目预览地址： 项目预览地址2.项目完成效果：3.HTML布局拆分1. tip提示部分2. title标题部分3.搜索栏部分找的是codepen上现成的搜索框样式，包含搜索框展开收缩的特效。4.键盘录入部分找的是codepen上的现成的3d键盘样式，当点击实际键盘上对应的按键时，品目上的键盘会按下。5.整体页面背景部分找的是google导航的也页面背景。6.添加网站的弹出框部分找的是codepen上现成的弹出框样式，少加修改。4. CSS结构拆分主要是现成的样

原创 前端面试题01

本篇LIST div+css布局与table布局的比较 img标签的alt，title属性。strong与em标签不同的侧重点 为什么利用多个域名来存储网站的资源 网页标准制定的重要性2.3.4.

原创 TypeScript精进（01）

课程背景随着互联网行业的发展，前端开发已经不仅仅是Web网页开发。实际上，移动端，服务端，再到物联网、机器学习等，都有前端来发的身影，都在使用 javascript 。但是，由于 JS 自身的不足（比如，缺少类型系统），导致使用JS 开发大型项目时，心有余而力不足！因此，就有了 TypeScript。TS 与 JS 异同-----1. TS 比 JS 的优势开发工具准备安装TS 解析包， 把TS转换成 node.js/浏览器可以运行的JS代码。npm i -g typescript.

原创 Sonni站点(移动端)

本篇list1.项目预览2.项目介绍3.项目开发--3.1移动端样式初始化--2.2 解决三秒点击延迟事件--2.3 完成静态页面布局--2.4利用vue实现数据响应式--2.5 实现删除功能--2.6 添加背景切换功能（图片闪动，键盘呼出问题）项目预览：https://jackson01.gitee.io/mobile_site1. 项目介绍Sonni站点是一个H5，移动端的站点，利用了VUE，js，html，css技术点。集成了网站搜索和网址保存的功能。方便用户保存经常访问的网

原创 森尼简易画板

本篇LIST：项目介绍项目实现--静态布局--交互逻辑实现项目预览地址：http://jackson01.gitee.io/canvashua/项目介绍：在学习HTML5 canvas时制作的一个画板，支持移动端和桌面端，可以图片形式保存绘画内容。功能可选择笔的粗细可选择笔的颜色添加橡皮擦功能添加清空功能添加可下载内容项目实现：1.静态布局2.逻辑实现2.1 根据设备自动设置画布的大小我们定义一个自动设置画布大小函数利用document.documentElem

原创 typescript--基础类型

本篇List1）概念ts支持与js相同类型的数据类型，此外还提供了枚举等类型2）字符串let dogName: string = "linda";let dogAge: number = 12;let introDog: string = `我有一只狗他${dogAge}`;3) 数字//2.数字// 2, 8, 10, 16let num1: number = 16;let num2: number = 0x10;let num3: number = 0o20;let num

原创 ts-接口（1）

本篇LIst什么是接口？定义一个接口可选属性接口只读属性接口可添加属性接口函数接口什么是接口定义接口// 1.定义一个接口interface Person { pName: string; pAge: number; pSex: string; } let person: Person = { pName: "xiaoming", pAge: 18, pSex: "woman", }; function p

原创 SSL/TLS协议运行机制的概述

一、作用（1） 所有信息都是加密传播，第三方无法窃听。（2） 具有校验机制，一旦被篡改，通信双方会立刻发现。（3） 配备身份证书，防止身份被冒充。互联网是开放环境，通信双方都是未知身份，这为协议的设计带来了很大的难度。而且，协议还必须能够经受所有匪夷所思的攻击，这使得SSL/TLS协议变得异常复杂。二、基本的运行过程SSL/TLS协议的基本思路是采用公钥加密法，也就是说，客户端先向服务器端索要公钥，然后用公钥加密信息，服务器收到密文后，用自己的私钥解密。（1）如何保证公钥不被篡改？解决

原创 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的简单应

原创 原生js实现ajax封装

一、什么是ajax？定义：Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。作用：提高用户体验，减少网络数据的传输量二、ajax常见运用场景表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。三、Ajax原理是什么Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应

原创 将node服务部署到云服务器上

1.什么是云服务器？云服务器就是 一台远程的电脑主机， 一般是linux 或者 mac 系统。2.部署流程首先购买一台云服务器。下载宝塔linux 面板来进行可视化 操作 这个云电脑。下载这台云电脑需要的软件，环境等。PM2来进行 node 的管理，使 node 可以在后台运行，不用一直在终端打开。把本地需要 运行在云服务器上的node项目， 前端项目 ， 上传到云服务器上，好让我们在可视化操作中找到它。开启node服务然后 用 pm2 来管理一下这个node 项目然后在宝塔面板的安全中

原创 VUE造轮子ui框架（上）

1.需求分析用例图，状态分析2.UI设计我们用SKetch进行ui的设计。可以利用symbol来绑定关联等详细操作就不赘述了，设计效果如下图3.项目初始化1.先在github上建立gulu仓库，本地电脑创建项目，关联到远程仓库2.创建README.md 和 LICENSE许可证（许可证可在github上进行创建，具体创建的类型可以看阮一峰老师的经典图）3.npm init 来简化项目的传输等，记载项目依赖，此时可以进行提交但node_modules依赖包过大，可以创建.gitignore文

原创 MVC与MVVM浅析（day02）

MVC1.什么是MVCMVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。2. M ，V，CModel（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象

原创 await 理解（day02）

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表

原创 CSS中定位和TRANSFORM的比较

POSITIONCSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。TRANSFORMCSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。区别和选择经过测试。TRANSFO

原创 js闭包，js变量泄露（day01）

一.什么是闭包加粗样式高级程序设计三中:闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉。可以让变量私有化，放到摸一个具体的作用函数中。二. 闭包的实例// 创建闭包最常见的方式函数作为返回值function foo() { var name = "kebi"; return function() {

原创 Promise浅析（day02）

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终 执行结果，而是一个能代表未来出现的结果的promise对象方法Promise.all(iterable) [全部成功时返回]这个方法返回一个新的promise对象，该promise对

原创 promise的三个缺点

promise通常用来解决回调地狱的问题，但也有几个不可忽视的缺点promise一旦新建就会立即执行，无法中途取消当处于pending状态时，无法得知当前处于哪一个状态，是刚刚开始还是刚刚结束如果不设置回调函数，promise内部的错误就无法反映到外部promise封装ajax时，由于promise是异步任务，发送请求的三步会被延后到整个脚本同步代码执行完，并且将响应回调函数延迟到现有队列的最后，如果大量使用会大大降低了请求效率。...

原创 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

原创 React项目

百万答题项目1.项目结构搭建UI框架：Ant蚂蚁框架（专门为移动端开发的）网址js框架： React 。 利用create-react-app 来搭建项目，项目结构需要自己来拆分。2.项目具体实现1.Ant蚂蚁的配置；安装使用：npm install ants-mobile --save全部导入：import { Button } from 'antd-mobile';import 'antd-mobile/dist/antd-mobile.css'; 按需导入：安装插

原创 React-redux使用

为什么要使用react-redux由于redux的store与组件的耦合度太高所以，我们用react官方提供的react-redux可以使两者耦合度降低，更好的实现模块化开发。react-redux使我们使用store更加的方便简洁如何使用首先store，reducer， actions的创建方式不变，我们只把在组件中用store API方式换成了高阶组件的方式/index.js/入口文件中，我们把根组件渲染到页面我们需要如下的书写方式：3. 接下来我们需要定义一个包裹组件，用来给UI

原创 React-router中使用BrowserRouter跳转后刷新出现404问题的解决

问题引入react路由的browserRouter使用的是h5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步。但是有个缺点，一刷新页面就会出现404找不到，原因是本地开发webpack是从内存中读取资源browserRouter从实际引入中并未找到文件。也就是说咱们需要访问服务器的根目录下的index文件返回数据渲染页面，但是browser模式向服务器的非根路径下发送了请求，所以找不到页面。解决方案一：使用HashRouter来跳转，只是url里会带一个#号，不是太

原创 Redux的理解与使用

一.什么是Redux？Redux是一个第三方状态管理的js库，它不仅仅可以适用于react框架，还可以用于其他的vue，auglar等框架。只不过react的生态中不包括一个状态管理的库而已，所以与react配合使用较为好。二.神魔时候要使用Redux来管理状态当我们多个组件共享状态的时候最好使用Redux来管理，方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux二.Redux的三个核心要素1. actionsactions可以说是一个让reducer执行不同函数的s

原创 c++(引用, 内联函数,constexpr函数,带有参数值的函数)

C++引用1. 什么是引用引用变量是一个别名，也就是说，它是某个已存在变量的另一个名字。一旦把引用初始化为某个变量，就可以使用该引用名称或变量名称来指向变量。2. C++ 引用 vs 指针引用很容易与指针混淆，它们之间有三个主要的不同：不存在空引用。引用必须连接到一块合法的内存。一旦引用被初始化为一个对象，就不能被指向到另一个对象。指针可以在任何时候指向到另一个对象。引用必须在创建时被初始化。指针可以在任何时间被初始化。我们可以为 i 声明引用变量，如下所示：int& r =

原创 VUE实战--网易云音乐

VUE实战–网易云音乐知识点：音乐的暂停播放。歌词的动态匹配。动态组件：根据is 属性 后面的组件名匹配<component :is="组件的名字"></component>背景模糊：可以利用伪类选择器， 来给背景来一层， rgba（0，0，0，0.5）模糊audio标签：audio 没有controls 属性 不在页面中显示通过下面的两个方法可以播放&暂停 音乐[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Hm

原创 深入vue响应式原理（day03）

VUE是如何追踪变化的当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖

原创 谈谈 JS 垃圾回收机制（day03）

垃圾回收JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。当不再需要某样东西时会发生什么? JavaScript 引擎是如何发现并清理它?可达性JavaScript 中内存管理的主要概念是可达性。简单地说，“可达性” 值就是那些以某种方式可访问或可用的值，它们被保证存储在内存中。1. 有一组基本的固有可达值，由于显而易见的原因无法删除。例如:本地函数的局部变量和参数当前嵌套调用链上的其他函数的变量和参数全局变量还有一些其他

原创 手写防抖函数（day04）

问题引入当我们执行下面的一个事件时，当我们输入就会触发函数向后端发送请求，增大了浏览器的压力使用lodash进行防抖手写防抖函数利用闭包

原创 画一只会动的皮卡丘（下）

！精品网站推荐： 一个喜欢开发的小玩意的网站： https://codepen.io/本篇清单List1. 页面布局2. 动态生成代码与皮卡丘style3. 3.实现速度的控制上篇中我们已经实现了静态的皮卡丘，我们需要让他动起来。1.页面的布局这里我们把屏幕分为上下两块。下面为预览皮卡丘的区域，上面为代码动态生成的区域<div class="code-wrapper"><pre id="code"></pre></div> <

原创 画一只会动的皮卡丘（上）

实现的皮卡丘样式如下图：本篇内容List：tip1--全局样式初始化，配置tip2--实现鼻子tip3--实现眼睛tip4--实现脸颊tip5--嘴巴实现1.先进行页面整体的样式配置这里我们要在手机端展示，所以我们尽量整个图形的宽度要小于手机屏幕的最小宽度，代码如下： * { margin: 0; padding: 0; box-sizing: border-box; } *::before { margin: 0;