- 博客(38)
- 收藏
- 关注
RSS订阅原创 charles的安装和使用
意义开发web项目的时候可以通过浏览器的debug或者Network去查看req和res的各个网络资源和数据，但是对于线上项目测试的时候想要测试接口，要么原部署项目修改接口后，复制一份，然后测试。但是资源消耗大，繁琐。所以需要一个工具可以对请求进行转发。对于移动端开发没有浏览器的情况下则需要抓包工具。charles是一个http代理服务器，反转代理服务器，当程序连接charles的代理访问互联网时，charles可以监控这个程序发送和接收的所有数据。它允许一个开发者查看所有连接诶互联网的http通信
2021-01-19 19:48:31
254
1
原创 到底是什么this？（上下文）
到底什么是this？假设我们有一个对象小明，我们要求他三科成绩的总和。var xiaomin={ shuxue : 50, yuwen : 89, yingyu : 20}function sum(o){ return o.shuxue+o.yuwen+o.yingyu}var a = sum(xiaomin);console.log(a); //159东西很简单，但是有一个问题，这里的函数和对象是一个什么关系。不用很复杂。这里的对象是作为参数传入函数的，那么问题来了。那么有
2020-10-09 19:55:27
526
原创 CSS复习总结
CSS盒模型就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。box-sizing（有3个值）：border-box，padding-box，content-box。从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的 宽度时存在着差异：标准盒子模型的盒子宽度：bor
2020-10-08 17:36:38
209
转载 React的调和过程（Reconcilliation）
Reconciliation 是实现UI更新的一个过程。目的就是在用户无感知的情况下降数据的更新体现到UI上。触发调和的方式ReactDom.render() 函数 和 ReactNativeRender.render()函数setState()函数forceUpdate()函数的调用comopnentWillMount 和 componentWillReceiveProp 中直接修改了state（地址）hooks中的useReducer 和 useState 返回的钩子函数virtual
2020-10-05 19:22:33
980
原创 react的理解
react的简单在于，它的核心API其实非常少。所以我们会看到很多地方在说react其实是一个UI库，并不是一个完整的框架，他告诉我们如何创建组件以及如何进行数据传递。甚至于创建组件的方式正是使用ES6的class语法因此在开发中react的使用对于ES6的语法依赖非常高。因此react自身本来就没有多少强限制的语法。我们只需要掌握组件里的props，state，ref，生命周期，就好像没有过多的额外知识，如果想要在jsx模板来遍历渲染，还得使用原生的map方法。而react的告诫组件，理解之后发现，其实
2020-10-04 23:03:28
523
转载 React Component 和 Element
React 和React Element到底是什么？React 是一个构建视图层的类库。不管React本身如何复杂，不管其他生态多么庞大，构建视图始终是他的核心。React Element简单的说，React Element 描述了“你想”在屏幕上看到的事物。抽象的说，React Element 元素是一个描述了Dom Node的对象。因为 React Element并不是你在屏幕上看见的真实事物。相反的它是一个描述真实事物的集合。Javascript 对象很轻量。用对象来作为 React E
2020-10-04 21:00:46
1091
原创 HTML/浏览器（三）
200 和 304 的区别200 ok 代表请求成功，一般用 GET 和 POST 请求304 代表资源未修改，一般在协商缓存中使用。这个不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息支出客户端希望只返回在指定日期之后修改的资源。post和get区别GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据两个都是 基于TCP数据包。对于GET方式的请求，浏览器会吧http header和data一并发送出去，服务器响应200（返回数据）；而对于PO
2020-09-28 19:11:15
110
原创 setState简易理解
setState，这个问题来源于一个疑惑，在使用redux的时候dispath一个action，为什么可以导致视图的更新？猜想是store改变后，redux在某处调用了setState，通知了react
2020-09-28 18:20:41
698
转载 入门React的内部机制（render-＞JSX-＞createElement-＞virtualDom)）
JSX的原理我们常常吧这个叫做 “转译”，其实用“汇编”来描述更为正确。React官方推荐使用一种混合HTML和javascript的语法，即JSX来编写自己的组件。但浏览器对JSX及其语法并不理解。浏览器只理解Javascript ，所以JSX必须转化为javascript。下面是JSX的代码，一个与class和一些内容的div<div className="cn"> Content!</div>//转化为javascript只需要调用以下函数React.creat
2020-09-27 18:46:16
188
原创 react 对 diffing 算法应用的准备
React 提供的声明式 API 让开发者可以在对 React 的底层实现没有具体了解的情况下编写应用.在开发者编写应用时虽然保持相对简单的心智,但开发者无法了解内部的实现机制.本文描述了在实现 React 的 “diffing” 算法中我们做出的设计决策以保证组件满足更新具有课预测性,以及在复杂业务下依然保持应用的高性能性.设计动力在某一时间节点调用 React 的 render() 方法,...
2020-09-27 18:43:10
102
原创 前端复习二（http和缓存）
（1）常用http请求头平时在后端中常用的请求头此为node，其他语言请自行设置字段 res.header("Access-Control-Allow-Origin", "*"); //常用的解决同源策略的解决方法 res.header("Access-Control-Allow-Headers", "X-Requested-With,Authorization");//用于与检测请求 res.header("Access-Control-Allow-Methods","PUT,POST,G
2020-09-24 21:04:01
95
原创 浏览器中输入url，到页面呈现出来，到底发生了什么
输入url然后DNS解析首先需要找到这个url域名的服务器ip，即dns解析。是浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录的顺序是浏览器缓存->系统缓存->路由器缓存，缓存中没有就查找系统的hosts文件中是否有记录，如果没有就查找DNS服务器，得到服务器ip地址后。建立TCP连接tcp的三次握手很详细https://blog.csdn.net/qq_44786519/article/details/108709553浏览器根据这个ip以及相应的端口号，构造http请求
2020-09-24 21:02:04
190
转载 前端性能优化
基本问题http层面的优化DNS预解析：DNS实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。每次DNS解析在200ms以下，一般采用DNS Prefetch的一种DNS预解析技术，当浏览网页时，会在加载网页的过程中对域名进行解析缓存，这样在单击当前页面中的i链接时就无需进行DNS解析，减少用户等待时间，提高用户体验 <LInk rel="dns-prefetch" href="www.baidu.com" /> //只有部分浏览器支持TCP连接采用ht
2020-09-22 20:22:07
103
转载 HTTP强缓存和协商缓存
强缓存和协商缓存都是属于浏览器缓存浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存的有什么优点：1.减少冗余的数据传递2.减少服务器负担3.加快客户端加载页面的速度Web性能优化的重要方式，浏览器缓存的过程究竟是怎么样？浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务端响应的请求，浏览器端缓存。过程浏览器第一次请求发生后，再次发送请求时：浏览器请求某一资源时，会先获取该资源
2020-09-21 12:56:09
113
原创 前端系统复习（一）（HTTP/HTML/浏览器）
一、http和https都是运行在传输层http(超文本传输协议)，是客户端和服务端请求和应答的标准（TCP），用于从web服务器传输超文本到本地浏览器的传输协议，使浏览器更加高效，让网络传输减少。https:以安全为目标的HTTP通道，再http下加入SSL层，主要作用就是建立信息安全通道确保数据的传输。区别：1.http传输的是明文，https传输的是ssl协议加密传输和身份认证的网络协议。2.https协议需要ca协议，费用较高。3.连接方式不同http：80端口，https：443端口
2020-09-19 18:47:07
344
转载 WEB安全(客户端XSS和会话注入)(前端面试)
WEB基本攻击大致可以分为三大类—— “资源枚举”、“参数操纵” 和 “其它攻击”。资源枚举日常开发中都会用约定俗称的去做某件事,文件命名就是这样,比如用骆驼命名来命名函数名,目的是为了团队开发工作更加规范.但是成为习惯的文件命名方式,也更容易让其他人更方便的找他想找的文件参数操纵对于客户端的攻击就是XXS和会话劫持XSS(跨域脚本攻击)也是最常见的web攻击重点就是客户端执行.举个例子,在搜索框搜索东西的时候在搜索框搜索内容,填入,点击搜索.如果前端页面没有对返回的数据进行过滤,直接显示
2020-09-15 20:10:47
261
原创 Web Worker和异步的对比（浏览器线程，任务队列）
1.浏览器的主要线程UI线程（用于渲染页面）javascript引擎线程（用于处理js）GUI事件触发线程（用于交互）还有HTTP传输线程和定时触发线程（定时器）（1）UI线程和javascript引擎线程互斥因为 javascript 可以操作页面的DOM，所以两个线程不互斥的话，ui线程在页面渲染的同时，js进行DOM修改，最终会造成DOM不一致的现象，所以js引擎运行的时候，ui渲染处于冻结状态。（2）js引擎和GUI事件触发线程（用于交互）异步浏览器开启事件触发线程，等待用户动作，事
2020-09-15 17:04:49
870
原创 前端文件流的一些简单处理(前端下载文件的方式)(接口正常,图片显示不出来?)
图片上的显示问题比较少,大部分都是直接antd组件,人家处理好了,所以不用担心.主要是下载文件怎么处理先说图片的显示问题吧.文件流都是二进制.相信大多数人和我一样笨笨的,旧直接 ajax 或者 axios 请求了.但是发现请求一切正常,但是就是没有文件被下载下来.文件传输都是二进制,原始的xmlhttprequest 1版本,ajax不支持文件流,jquery也一样.所以默认处理二进制就直接文本乱码显示了,也不会当作附件下载下来.当然xmlhttprequest 2 标准中支持文件流.并且用xhr.
2020-09-14 21:50:42
1557
原创 react+express+mongdb前后端搭建多人博客平台
写一篇博客总结一下，自己搭建博客平台的经历。也希望对之后看到这篇博客的同行者有一些帮助。 这是一些感受：整个博客开发历时16天，前后端分离，从前后端的搭建到项目在阿里云上线，其中选用什么技术和整个项目功能的构思花了一周时间，学习项目部署上线花了一天，其他时间都在进行实际开发。因为之前就有一些 react的学习和一点点前端开发经验所以后端上的学习比较多，当然前端方向也学习了很多，学习的途径大多还是...
2020-02-19 13:29:55
498
原创 express生成器生成项目以及目录详解和 app.js文件的解释
创建一个文件夹，在文件夹下，按照以下命令输入。npm install express-generator -gexpress --view=pug myappcd myappnpm install创建完成后输入node app.js这样就可以启动项目在浏览器中打开 http://localhost:3000/ 就可以看见了这是创建完成后的文件夹目录.├── app....
2020-02-18 19:26:56
705
原创 Portals （react）
Portal 提供了一种将子节点渲染到存在于父节点以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child,container)第一个参数 child 是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment 第二个参数是一个 DOM 元素 。用法通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点...
2019-12-29 13:16:31
217
原创 深入 JSX（React）
JSX仅仅只是 React.createElement(component,porps,...children)函数的语法糖。<MyButton color="blue" shadowSize={2}> Click Me</MyButton>会编译为：React.createElement( MyButton, {color:'blue',shadowSiz...
2019-12-28 17:34:27
150
原创 高阶组件（React）
高阶组件高阶组件 （HOC） 是 React 中用于复用组件逻辑的一种高级技巧。HOC自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体来说，告诫在徐建是参数为组件，返回值为新组件的函数。const EnhancedComponent = higherOrderComponent(WrappedComponent);组件是将 props 转化...
2019-12-23 18:51:03
145
原创 Fragments （ React ）
原来写组件必须有一个div包着，但是组件 过多就会对渲染造成无形的负担所以用这个FragmentsFragmentsReact 中的一个常见模式时一个和组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。render() { return ( <React.Fragment> <ChildA /> <Chi...
2019-12-21 17:26:58
98
原创 Refs 转发 （react）
Refs转发Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。最常见的案例如下所述。转发 refs 到 DOM 组件考虑这个渲染原生 DOM 元素 button 的 FancyButton 组件：function FancyButton(porps) { return ( ...
2019-12-21 15:35:20
245
原创 错误边界（React）
错误边界部分 UI 的 javascript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 – 错误边界。错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 javascript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间，生命周期方法和整个组件树的构造函数中捕获错误。注意错误边...
2019-12-18 22:30:42
361
原创 Context (React)
ContextContext 提供了一个无需为每层组件手动添加 props ， 就能再组件树间进行数据传递的方法。在典型的 React 应用中 ，数据是通过 props 属性自上而下 （由父及子）进行传递的 ，但这种做法对于某些类型的属性而言是及其繁琐的（比如：地区偏好，UI主题）, 这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式的通过组...
2019-12-05 20:21:54
131
原创 React.lazy
React.lazy注意：React.lazy和Suspense 技术还不支持服务器端渲染。如果你想要在使用服务端渲染的应用中使用，推荐 Loadable Componentszhe 这个库。React.lazy 函数能让你像渲染常规组件一样处理动态引入 （组件）。使用之前import OtherComponent from './OtherComponent'function My...
2019-12-01 13:58:47
319
原创 less入门（leaner Style Sheets）
简介Less 是一门 css 扩展语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。很容易学，但需要一定的编程基础。变量变数在一个位置控制常用值@width : 30px;@height : @width + 10px;#header { width:@width; height:@height;}编译为：...
2019-11-18 21:04:55
308
原创 微信小程序学习笔记（ 自定义组件 ）
自定义组件开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码掩护。自定义组件在使用是与基础组件非常相似。创建自定义组件（自定义组件需要重新开一个文件夹，然后再在其他页面引用，可以理解成封装一个组件，一个组件放在一个文件夹里）类似于页面，一个自定义组件由 json wxml wxss js 四个文件组成。要编写一个自定...
2019-11-02 16:24:37
803
1
原创 微信小程序学习笔记（ 小程序框架 ）
注册小程序每个小程序都需要在app.js中调用App方法注册小程序的示例，并绑定声明周期回调函数，错误监听和页面不存在监听函数等。App中可以调用的详细参数：1.onlaunch 初始化完成时触发，全局只触发一次，参数可以使用 wx.getLaunchOptionsSync获取（一个wx提供api获取小程序的一些的启动信息参数2.onshow 小程序启动，或者从后台进入前台显示触发。 或者...
2019-10-24 22:07:35
800
原创 javascript面向对象编程（创建对象和继承的常用方法）（比较长，仔细看完收获会很大哦）（干货）
本博客基于(Javascript高级程序设计（第二版）和(第三版)),以及很多优秀的博客，以及我的个人见解，和个人总结。前情提要面向对象语言的三大特点：继承、封装、多态。但Javascript是一种基于对象（object-based）的语言，可以说是万物皆对象。但是，它不是一种真正的面向对象编程（OO）语言，因为它的语法中没有class（类）这个概念，所以说它的对象（Object）模型会比较...
2019-07-25 19:37:10
172
原创 搜索（深度优先搜索和广度优先搜索）
搜索中比较基础也比较重要的就两种 广搜（BFS）和深搜（DFS）其实搜索可以理解为一种高级的暴力（遍历所有的点），简单的说就是从一个点开始搜索所有可能到达的点一. 深度优先搜索可以分为两种一种用递归一种不用递归（不用递归的比较麻烦就不给大家讲了）首先递归应该都很清楚，不清楚的同学们可以看看下面的这篇文章（讲解的很清楚）https://blog.csdn.net/sinat_38052999...
2019-04-12 15:56:27
235
原创 买铅笔（C语言）
买铅笔题目描述P老师需要去商店买n支铅笔作为小朋友们参加NOIP的礼物。她发现商店一共有 33种包装的铅笔，不同包装内的铅笔数量有可能不同，价格也有可能不同。为了公平起 见，P老师决定只买同一种包装的铅笔。商店不允许将铅笔的包装拆开，因此P老师可能需要购买超过nn支铅笔才够给小朋 友们发礼物。现在P老师想知道，在商店每种包装的数量都足够的情况下，要买够至少nn支铅笔最少需要花费多少钱。输...
2019-03-30 11:48:12
7030
3
原创 不高兴的津津
不高兴的津津题目描述津津上初中了。妈妈认为津津应该更加用功学习，所以津津除了上学之外，还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴，而且上得越久就会越不高兴。假设津津不会因为其它事不高兴，并且她的不高兴不会持续到第二天。请你帮忙检查一下津津下周的日程安排，看看下周她会不会不高兴；如果会的话，哪天最不高兴。输入输出格式...
2019-03-28 15:54:16
2596
1
原创 小鱼游泳时间（C语言）
小鱼游泳时间（C语言）题目描述伦敦奥运会要到了，小鱼在拼命练习游泳准备参加游泳比赛，可怜的小鱼并不知道鱼类是不能参加人类的奥运会的。这一天，小鱼给自己的游泳时间做了精确的计时（本题中的计时都按24小时制计算），它发现自己从a时b分一直游泳到当天的c时d分，请你帮小鱼计算一下，它这天一共游了多少时间呢？小鱼游的好辛苦呀，你可不要算错了哦。输入输出格式输入格式：一行内输入 4 个整数，分...
2019-03-27 17:15:44
4714
原创 小玉买文具(c语言)
小玉买文具（C语言）代码如下：#include <stdio.h>int main(){ int a,b; scanf("%d %d",&a,&b); printf("%d",(a*10+b)/19); return 0;}
2019-03-27 16:41:43
3461
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人