林夏天-CSDN博客

原创冲冲冲 !!!

JavaScript+CSS+HTML牛客网背面经 + 刷笔试题数据结构与算法 + LeetCode刷题操作系统计算机网络网络安全框架：Vue + Ant Design Vue + JQuery + BootstrapAjax / DOM / JSONNodeJs + ExpressWebpackGitHub前端代码规范做两个好项目...

2020-02-23 19:58:53 216 1

（一）浏览器组成结构1. 从打开浏览器输入一个网址到页面展示网页内容的这段时间内，浏览器和服务器都发生了什么事情？在接收到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理。调用浏览器引擎中对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址。通过DNS解析获取网站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发财GET请求。进行HTTP协议会

2020-08-20 12:30:03 460

原创 Git 命令快查

一. 创建版本库git clone [email protected]:Lin-Tui/gitTest.git //克隆远程版本库到本地（这个步骤前无需添加该远程仓库）git clone -b remote_branchName [email protected]:Lin-Tui/gitTest.git //克隆指定的远程分支到本地git init //初始化本地版本库二. 修改和提交touch fileName //创建文件mkdir dirName //在当前目录创建文件夹rm fileName /

2020-08-19 16:44:27 301

原创 React与Vue的异同点

区别点：Templating vs JSXreact的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理react渲染是使用jsx，用js来操作html，列表渲染、条件判断等都通过js来控制，而vue提供了模板的语法，支持指令、过滤器等模板功能，简化

2020-08-19 16:32:06 1441

转载容易混淆-论query和params在前后端中的区别

一. Vue中路由的传参假设需要实现一个路由切换，点击之切换到W组件。并传递一个id值和一个age值。运用router-link来写：<router-link :to="{A: 'xxx', query: {xx: 'xxx'}}" /><router-link :to="{A: 'xxx', params: {xx: 'xxx'}}" />routers:{???}对于query 和 params来说：A是那么还是pathrouters要怎么写url长什么样子

2020-08-19 16:27:54 1022

原创 React：React-redux使用

一. Redux简介1. 什么是ReduxRedux是一个用于JavaScript状态容器，提供可与预测化的状态管理。Redux可以让你构建一致化的应用，运用于不同的环境（客户端，服务器，原生应用），并且易于测试。Redux除了和React一起使用外，还支持其他界面库，而且它体小精悍。2. redux的设计初衷随着JavaScript单页面开发日趋复杂，JavaScript需要管理更多的state，这些state可能包括服务器响应、缓存数据、本地生成服务器的数据，也包括UI状态等。管理不断变化

2020-08-19 16:21:44 248

原创 React：生命周期

一. React v16.3前的生命周期1. 组件初始化initialization阶段constructor()：初始化stategetDefaultProps():设置默认的props，也可以用defaultProps设置组件的默认属性getInitialState():初始化state，可以直接在constructor中定义this.state2. 组件挂载Mounting阶段componentWillMount()：在组件挂载到DOM前调用，整个生命周期只会被调用一次，以后组件更新不

2020-08-19 16:16:54 302 1

原创 React：组件通信方式

需要组件之间进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信1. 父组件向子组件通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息。父组件PageA：import React, { Component } from 'react';import ChildA from '../components/ChildA';class pageA extends Component {

2020-08-19 16:07:42 704

原创 React：react-router-dom 使用

1. react-router 与 react-router-dom区别react-router与react-router-dom使用时的区别2. 示例安装：首先进入项目目录，使用npm安装react-router-dom：npm install react-router-dom --save-dev基础使用：Class1.js：import React, { Component } from 'react';class Class1 extends Component {

2020-08-19 16:03:20 743

原创 React：Context 使用

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行跨层级数据传递的方法，它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据一. 式例11. 目录结构2. 基本使用global.js：import React from "react";export const globalData = { a: 1}export const globalContext = React.createContext(globalData);/public/in

2020-08-19 15:56:06 382

转载 JS中的异步以及事件轮询机制

1. JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作） JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有

2020-05-21 14:23:13 272

原创 JavaScript 事件

事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。（一）事件流DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定? 这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。事件流有两种:事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父

2020-05-21 14:15:22 315

原创 EventBus 实现

实现：class MyEventBus{ constructor() { this.eventQueue = {} } on(eventName, callback) { //订阅 if (!this.eventQueue[eventName]) { this.eventQueue[eventName] = [] } this.eventQueue[eventName].push(callback) } once(eventName, callback) {

2020-05-17 17:52:44 276

转载 hash模式和history模式实现原理及区别

目前单页应用（SPA）越来越成为前端主流，单页应用一大特点就是使用前端路由，由前端来直接控制路由跳转逻辑，而不再由后端人员控制，这给了前端更多的自由。目前前端路由主要有两种实现方式：hash 模式和 history模式，下面分别详细说明。1. hash模式比如在用超链接制作锚点跳转的时候，就会发现，url后面跟了"#id"，hash值就是url中从"#"号开始到结束的部分。hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取

2020-05-14 13:34:24 12499 1

转载 js中的隐式转换

js中的不同的数据类型之间的比较转换规则如下：1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false2. 对象和字符串比较对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true;3.

2020-05-13 20:32:07 197

转载 JS 异步编程

教程简介作者: TigerChain地址: https://www.jianshu.com/p/876e68fd6a1c本文出自 TigerChain 简书手把手教 Vue 系列本节大纲正文js 是一门单线程、非阻塞、异步、并发语言。一、同步和异步1. 同步同步指的是任务是一个接一个的去完成，上一个任务没有完成，下一个任务就不能开始，单线程和多线程都可以实现同步，但是单线程一定是同步的「一个线程只有执行完前面的任务，才能执行后面的」2. 异步异步是一个相对概念，多线程.

2020-05-12 13:44:12 285

原创事件绑定中this指向问题

<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <title>This</title> <style> #container{ width: 100%; ...

2020-05-07 16:04:31 744

转载 JS异步操作：概述

目录1. 单线程模型什么是单线程模型JS为什么采用单线程模式单线程模式的优缺点2. 同步任务和异步任务3. 任务队列和事件循环4. 单线程模型回调函数事件监听发布/订阅5. 单线程模型串行执行并行执行并行和串行的结合本文转载于：异步操作概述（一）单线程模型1. 什么是单线程模型？单线程模型指：JavaScript 只在一个线程上运行。也就...

2020-05-05 13:14:22 591

原创防抖、节流和预加载、懒加载

目录1. 防抖节流2. 预加载3. 懒加载（一）防抖节流1. 防抖对于短时间内连续触发的事件（如滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。**防抖实现思路：**在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数如果在200ms内再次触发滚动事件，...

2020-05-03 18:04:18 683

原创 JS 类的创建继承与 new原理实现

目录1. 类的创建工厂模式构造函数模式原型模式组合模式2. 类的继承原型链继承构造继承实例继承拷贝继承组合继承寄生组合继承3. new 的原理实现学习和参考于：JS定义类的六种方式详解JS实现继承的几种方式JavaScript深入之创建对象的多种方式以及优缺点js new一个对象的过程，实现一个简单的new方法（一）类的创建1. 工厂模式fun...

2020-05-03 15:35:27 540

原创 call、apply、bind 原理实现

目录1. call 的模拟实现2. apply 的模拟实现3. bind 的模拟实现4. 三者异同学习并参考于：JavaScript深入之call和apply的模拟实现JS的call,apply与bind详解，及其模拟实现（一）call的模拟实现call 用法： MDN Function.prototype.call()call() 方法使用一个指定的 this 值和可...

2020-05-03 11:11:53 386

原创 async 、await、Generator 原理实现

目录1. async await2. Generator本文仅是学习：异步编程二三事 | Promise/async/Generator实现原理解析中一部分知识的学习笔记，（强烈推荐阅读原文）（一）async await在多个回调依赖的场景中，尽管Promise通过链式调用取代了回调嵌套，但过多的链式调用可读性仍然不佳，流程控制也不方便，ES7 提出的async 函数，终于让 J...

2020-05-02 19:48:58 1123

原创 Promise 学习笔记

目录1. Promise 基本结构2. Promise 状态和值3. Promise 的 then 方法4. Promise基本实现5. Promise零碎知识学习 Promise 用法见：MDN Promise学习 Promise 底层实现见：Promise实现原理（附源码）（本文学习并参考的一篇博客，推荐直接阅读）其他推荐：Promise简单实现（一）Promis...

2020-05-02 11:48:09 983

转载九种跨域方式实现原理

目录1. 同源策略及其限制内容同源策略同源策略限制2. 跨域什么是跨域跨域的常见场景3. 跨域解决方案JSONP 跨域CORS 跨域资源共享Node 中间件代理(两次跨域)nginx 代理跨域websocketpostMessage 跨域window.name + iframe 跨域location.hash + iframe 跨域document.dom...

2020-05-01 15:21:56 199

原创 HTTPS 超详解一文搞定HTTPS面试知识

目录1. HTTP基本原理基本概念HTTPS 优缺点2. 加密共享密钥加密公开密钥加密HTTPS采用混合加密机制3. 证书数字证书EV SSL 证书客户端证书自签名证书4. HTTPS的安全通信机制HTTPS 通信过程具体版通信过程简要版通信过程不一直使用 HTTPS的原因SSL 和 TLSSS...

2020-05-01 11:09:16 5104

原创 HTTP 超详解一文搞定HTTP面试知识

目录1. HTTP原理概念HTTP过程特点2. HTTP请求报文请求报文结构请求行（请求方法、URL、协议版本）请求方法URL协议版本请求头请求体3. HTTP响应报文响应报文结构响应行（版本协议、状态码及状态描述）状态码及状态描述响应头响应体4. HTTP缓存（浏览器缓存机制）强缓存协商缓...

2020-04-30 20:03:38 444

原创 TCP 超详解一文搞定TCP面试知识

TPC 超详细解目录1. TCP数据包结构2. TCP三次握手和四次握手 TPC三次握手TCP四次挥手3. TCP如何保证传输可靠性详解概述校验和确认应答+序列号超时重传停止等待协议流量控制拥塞控制连接管理4. TCP短连接与长连接短连接长连接5. TCP 粘包和拆包 6. TCP和UDP协议的区别7. TCP/IP 模型传输层控制...

2020-04-30 13:19:23 1214 1

原创 Vue：深入理解组件

目录1. 组件注册全局注册局部注册2. PropProp的大小写Prop验证传递Prop3. 插槽基本使用后备内容作用域插槽4. 动态组件 & 异步组件动态组件在动态组件上使用 keep-alive异步组件（一）组件注册两种组件的注册类型：全局注册和局部注册。1. 全局注册全局注册的组件可以用在其被注册之后的任何 (通过 new Vu...

2020-04-21 14:56:47 284

原创 Vue基础：计算属性与侦听器

（一）计算属性computed对于任何复杂逻辑，你都应当使用计算属性。1. 基本使用**计算属性是基于它们的响应式依赖进行缓存的。**只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖数据没有发生改变，computed将从缓存中获取之前的计算结果，而不必再次执行函数。例子：<div id="example"> <p>Original messag...

2020-04-20 20:32:16 281

原创 Vue基础：指令详解

目录v-htmlv-forv-ifv-showv-modelv-bindv-onv-once1. v-html：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用该指令。它使内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。<!--这个 span 的内容将会被替换成为属性值 raw...

2020-04-20 20:24:37 212

原创 Vue2 双向绑定原理（数据响应式）

目录1. MVVM定义优点缺点2. Vue2 双向绑定原理（数据响应式)原理概述数据劫持发布与订阅（一）MVVM1. 定义：MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写；是一种软件架构设计模式。其中：Model：是数据模型，既后端传过来的数据；View：是视图层，既我们看到的页面；ViewModel：是连接Model和...

2020-04-20 12:55:50 2302 2

原创 Vue：模板编译与 Virtual DOM

（一）Vue模板编译在Vue中我们有三种方式来创建HTML模板手动写渲染函数JSX渲染函数是最原始的方法，而模板最终会通过编译转换陈渲染函数。渲染函数执行后，会得到一份vnode用来渲染真实DOM。所以，模板编译其实是配合虚拟DOM进行渲染。1. 什么是模板编译？所谓模板编译就是把模板编译成vnode的渲染函数。2. 模板编译过程：模板编译可以分为三个阶段：将模板解析...

2020-04-19 20:50:27 882

原创 Vue：生命周期详解

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（一）生命周期钩子按顺序依次为：1. beforeCreate()在实例初始化事件和生命周期之...

2020-04-19 20:20:19 389

原创不同版本vue-cli区别详解

目录vue-cli 命令项目结构设置环境变量（一）vue-cli 命令1. vue-cli下载安装：vue-cli2:npm install vue-cli -gvue-cli3/cli4:npm install -g vue@cli2. 创建新项目vue-cli2:vue init webpack 2.0projectvue-cli3...

2020-04-19 16:16:51 6560 1

原创《数据结构与算法之美》学习笔记(5) 哈希算法红黑树

哈希算法（1）什么是哈希算法？将任意长度的二进制值串映射为固定长度的二进制值串，这个映射的规则就是哈希算法，而通过原始数据映射之后得到的二进制值串就是哈希值。（2）设计好的哈希算法要求要想设计一个优秀的哈希算法，需要满足的几点要求：从哈希值不能反向推导出原始数据（所以哈希算法也叫单向哈希算法）；对输入数据非常敏感，哪怕原始数据只修改了一个 Bit，最后得到的哈希值也大不相同；散列冲...

2020-04-16 22:29:05 210

原创数据库：区分笛卡儿积、自然连接、内连接、等值连接、外连接

假设存在两张表 c 和 p，这里使用的是MySQL数据库。数据表 c：course_idtitledept_namecreditsBIO-301GeneticsBiology4CS-190Game DesignComp.sci4CS-315RoboticsComp.sci3数据表 p：course_idprereq_id...

2020-04-15 15:04:57 2202 2

原创 Vue项目实战：上线部署

剔除项目无用代码前端性能优化配置服务器做域名解析上传项目启动服务（1）路由按需加载方案路由懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由懒加载主要目的是防止首屏加载内容过多，延时过长，造成白屏，不利于用户体验。方式1：在router.js中：import Vue from 'vue';import Rou...

2020-04-11 17:24:08 566

原创《HTML5 与CSS3 权威指南》（第四版上册）学习笔记

目录Web时代的变迁HTML5和HTML4的区别点HTML5的结构表单及其他新增和改良元素ECMAScript中新增功能一.Web时代的变迁（1）HTML5 的目标：能够创建更简单的Web程序，书写出更简洁的HTML代码。提供很多API，使Web应用程序开发变得更容易；开发出了新的属性，新的元素，使HTML变得更简洁，文档结构更加清晰明确，容易阅读。（2）可放心使用HTM...

2020-04-11 15:07:02 1456 1

原创 HTML link元素的rel属性

2020-04-11 14:25:21 730

原创 Vue项目实战：订单列表页面实现

目录调整Order父组件结构（解决Bug）订单列表数据渲染Loading 和 NoData优化订单列表分页 - 分页器订单列表分页 - 加载更多订单列表分页 - 滚动加载（1）调整Order父组件结构（解决Bug）之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-hea...

2020-04-09 18:10:16 11637

空空如也

空空如也