- 博客(73)
- 收藏
- 关注
RSS订阅原创 JS垃圾回收机制
JS最初是采用引用计数法引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行...
2019-09-02 08:39:52
402
原创 前端闭包
闭包定义函数A中的函数B，能够访问函数A中的变量，函数B就是一个闭包，闭包的变量是存储在堆内存中。function A(){var a="外面的变量" window.B=function(){ console.log(a);}}这部分代码证明了不必须要return函数才是闭包闭包的意义就是能够间接的访问函数内部变量闭包的作用1.想要改变函数的变量...
2019-08-28 21:05:20
3207
原创 前端跨域
跨域跨域源于同源策略，同源包括协议，域名，端口，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。为了用户上网安全，没有限制同源策略的话，会有安全问题，比如跨站请求伪造（CSRF）CSRF跨站请求伪造的情况的...
2019-08-28 17:05:04
361
原创 flex布局详解
flex布局容器属性采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交...
2019-07-26 16:17:32
196
原创 react-mobx+less+antd+axios
为了识别装饰器语法，在react中需要配置的文件npm i @babel/plugin-proposal-decorators -d注意一下：babel版本问题装的插件会有点问题，最好装饰器识别装两个插件npm i babel-plugin-transform-decorators-legacy -dmobx需要下载的插件npm i mobx-react mo...
2019-07-26 16:16:55
604
1
原创 React redux中间件的使用
Redux-thunk中间件ajax数据请求安装这个插件就是为了返回一个函数，而不是只是对象。先安装依赖npm install redux-thunk --save使用了中间件redux-thunk的作用是什么呢。就是让createAction中创建的action不一定要返回对象，可以返回方法。因为store.dispatch只接受一个对象，但是想要是一个方法，并且执行，就必须使用...
2019-07-26 16:16:16
922
原创 gulp
gulp自动化工具入门Gulp和Webpack的基本区别：gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。Webpack是前端构建工具，实现了模块化开发和文件处理...
2019-07-26 16:15:43
2771
1
原创 异步请求的处理方案
1.iterator迭代器Iterator 的作用有三个;一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。方法next()首先执行第一次next()方法，指针对象iterator中的第一个成员，后面执行第二个next()方法时，...
2019-07-26 16:14:43
840
原创 JavaScript事件执行eventLoop讲述
js是单线程的，所以执行任务采用同步，异步的方式进行，执行过程是如下。也就是同步任务全部执行完成，再执行异步任务。异步任务里面又分为宏任务和微任务。执行顺序如下图也就是宏任务多次执行，微任务一次执行。宏任务先执行一个，微任务全部执行，再执行剩余的宏任务宏任务中执行优先级微任务中优先级再次总结就是主任务执行后，执行微任务，再执行setTimeout,set...
2019-07-11 13:01:44
113
原创 前端模块化
前端项目越来越大，应对前端工程化，我们应该怎么做，由以下三个方面的改变。思维上：使用模块化思想工具上：webpack，npm等模块化工具工作方式上：多人协作那了解模块化规范是必不可少的1.Common.jsCommonJS模块的特点如下。所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加...
2019-07-11 09:09:22
122
原创 Jpress的基本使用
Jpress安装流程Jpress作用：用于模板快速切换，模板在线安装，卸载，插件在线安装，卸载，用户，角色权限管理jpress 官方文档 http://www.jpress.io/article/36方式一：本地编译克隆项目到本地 在项目的根目录下使用 mvn 构建项目 （自己找mvn安装及环境配置）只运行 mvn compile 是无法生成文档中说的starter-2.0...
2019-07-11 08:43:33
9596
2
原创 web前端之浏览器兼容问题
1.margin问题每个浏览器的margin值设置的不太一样，所以采用重置margin等2.浏览器浮动问题浏览器如果采用浮动，那么就可以设置长宽，并且右边距离的可以设置，那么设置的长度是过长将会把右边的模块挤到第二排，那么处理方法是将左边的浮动设置为inline3.设置的高度低于浏览器默认高度，那么对这个模块采用overflow:hidden4.ie中event.srcElem...
2019-06-11 08:14:22
214
原创 前端项目部署到服务器的几种方式
1.使用github作为服务器在github创建一个特殊的仓库。仓库名是你的“用户名.github.io”，这样里面放入你的打包文件就可以作为服务器访问。访问网址为http://用户名.github.io/文件名2.使用netlify服务器在官网使用github作为注册一个netlify内容3.使用阿里云服务器...
2019-06-11 08:02:32
26501
原创 计算机网络基础详解
OSI与TCP模型OSI七层模型（开放式系统互联）各层功能定义 这里我们只对OSI各层进行功能上的大概阐述，不详细深究，因为每一层实际都是一个复杂的层。后面我也会根据个人方向展开部分层的深入学习。这里我们就大概了解一下。我们从最顶层——应用层 开始介绍。整个过程以公司A和公司B的一次商业报价单发送为例子进行讲解。<1> 应用层 ...
2019-06-07 22:41:49
890
原创 JavaScript数据结构与算法
第一阶段基础算法1.字符串问：输入: "Let's take LeetCode contest"输出: "s'teL ekat edoCteeL tsetnoc"使用jest测试并解答：sum.jsfunction sum(str) { //变成数组 const words = str.split(" "); const words...
2019-06-01 21:53:39
459
原创 前端Jest测试工具使用
参考官方文档使用：https://jestjs.io/docs/zh-Hans/getting-started.html首先来一个简单的例子使用npm和yarn工具安装都是可以的npm install jest -g安装jest后就可以进行测试了，测试步骤如下1.在终端npm init一个文件夹2.创建被测试的js文件，里面写一个函数，使用common.js或者AMD导出...
2019-06-01 21:34:23
1818
原创 Git的基本操作
首先在官网安装git的安装包，下载成功的标识可以通过在桌面鼠标右键的内容看到有没git bash这个选项，有表示安装成功。git可以采用两种提交方式1.使用totorise小乌龟桌面提交，具体方式就不多说2.项目中使用最多的命令行提交，可以在cmd里面，git bash或者编辑器里面自带的终端。原理都是一致的，一般cmd和编辑器比如vscode里面都是使用windows的方式对文件...
2019-05-09 16:20:32
84
原创 使用CSS绘出各类图形
1.合理使用after和before伪类如果伪类是一个有长宽的内容，那么就会无效，也就是伪类内容会在长宽里面，不会在外面，那么就可以设置伪类形状必须采用定位才能解决位置问题，有一重点是content必须要，没有内容的情况下都使用content:""，没有content的情况下，伪类失效。2.使用伪类画出图形 <style> .main { ...
2019-05-02 10:09:02
489
转载 NodeJS+Express+MongoDB
NodeJS+Express+MongoDB目录NodeJS+Express+MongoDB一、MongoDB1.1、安装MongoDB1.1.1、配置运行环境1.1.2、运行MongoDB1.2、数据库操作1.2.1、创建数据库与查看数据库1.2.2、删除数据库1.2.3、插入数据1.2.4、查询数据1.2.5、修改1.2.6、删除二、...
2019-04-23 12:06:15
1140
原创 CSS基础知识
1.position定位知识position：static，跟随文档流，默认设置值，没有top,right,bottom,left,z-index等内容。position:fixed，脱离文档流，可以设置top....等属性，header这种可以固定在上下左右，所以一些导航栏就是这样设置的，高度不用更改html和body就可以设置为100%；实例：导航栏固定，并且在导航栏下面设置背景图...
2019-04-03 16:19:38
236
原创 Web前端易错知识点总结
目录1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？3.div+css的布局较table布局有什么优点？4.CSS选择器有哪些？5.@import和link引入css的差别6.常用的行内元素有哪些，块级元素有哪些7.css3新增伪类选择器8.typeof打印奇怪的几个...
2019-03-24 19:49:38
630
原创 网页布局
单列布局应用场景：网页中有时候内容不多，单行内容的，最多只用margin居中就行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
2019-03-21 19:29:53
355
原创 CSS专题梳理之（块级行内级）水平垂直居中的多种方式
设置块级元素长宽水平，垂直居中1.使用relative，absolute脱离文档流2.使用绝对定位后，各方向初始化为0，margin为auto就可以执行。块级元素和行内元素水平，垂直居中1.使用flex布局都可以使用2.使用relative,css中transform专门的块级元素水平居中：margin：0 auto；专门的行级元素水平，垂直居中：...
2019-03-21 18:31:33
1202
原创 HTML5新特性
HTML5新特性：1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. 音频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后...
2019-03-17 21:37:52
241
原创 web三大安全问题和其解决方案
XSS跨站请求攻击直接举个例子：也就是你发表一篇博客这种，别人会来浏览，你看如果在文章里面写一段带有攻击性的<script><script>的javascript代码，那么问题来了这个js代码依靠他的浏览器执行，获取你浏览器中的cookie，因为你登录信息在里面传到攻击者的服务器。解决方法：将<>通过> <转义XSRF...
2019-03-16 11:14:15
364
原创 web性能优化（六）之总结基础（通过页面加载渲染优化）
首先理解页面加载理解页面加载通过题目理解1.这个理解可以参考我的另一篇详细解说第一个问题：https://mp.csdn.net/postedit/884286262.onload是将所有的资源文件加载完成后，才开始渲染页面，而DOMContentload不加载img，视频等资源就开始渲染页面，然后通过异步的方式加载这些资源，这样的好处是，图片加载慢，那么就使用DOMConte...
2019-03-16 10:56:30
324
原创 Github编辑README.md文件
第一步：创建属于自己的repository，然后关联本地的git仓库，刷新就是下面这个页面第二步：创建README.md第三步：编辑保存第四步：有时候还想修改点击创建的README.md文件，右边有一只笔的形状，然后点击修改，然后保存...
2019-03-14 16:40:59
540
原创 Git入门到基本使用
版本管理工具1.分布式版本管理工具2.多个开发人员协调工作3.有效监听谁做的修改4.本地及远程操作下载安装Git工具https://git-scm.com/downloadsgitinit初始化文件夹为本地git仓库，也就是创建一个有.git的文件，便于git追踪.这儿全局配置一个Git名字，记得和后期github上面的名字一致。这里举个例子，创建index.html,a...
2019-03-14 16:40:39
155
翻译 关于http缓存的理解
Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在介绍HTTP缓存之前，作为知识铺垫，先简单介绍一下HTTP报文HTTP报文就是浏览器和服务...
2019-03-14 16:39:21
215
原创 一次完整的浏览器请求过程
从输入网址到页面收到请求这期间发生了什么过程1.域名解析2.发起TCP三次握手3.建立TCP连接后发起http请求4.服务器响应http请求，浏览器得到html代码5.浏览器解析HTML代码，并请求HTML代码中的资源（如js和css和img）6.浏览器对页面进行渲染呈现给用户1.首先对于域名解析输入域名，然后首先在浏览器DNS缓存中，但是保存时间很短，大概一分...
2019-03-12 21:10:50
3258
原创 Javascript基础梳理
1.DOM基础Dom一共有三种节点，元素节点，属性借贷案，文本节点。文本节点和属性节点都是元素节点的子节点，因此先获取元素节点，再获取属性和文本节点。 将新节点添加到指定节点 appendChild 删除子节点 removeChild...
2019-03-11 16:35:59
171
1
原创 Web性能优化（五）之从加载网络资源的方式，CDN加速
CDN由来随着互联网人群规模不断增多，访问同一个服务器，网络延迟太大。CDN原理第一步：从主服务器复制内容到边缘服务器也就是访问后，造成的情况是什么呢，通过DNS解析，DNS直接返回IP地址，而是到上一级的智能DNS服务器寻找返回到最近的服务器，然后返回他的IP地址进行返回。CDN分类按照资源分类的话主要的就是内容，静态资源（就是一些HTML和CS...
2019-03-10 10:24:11
350
1
原创 web性能优化（四）之使用JSON进行数据交换和高效使用DOM操作
使用JSON进行数据交换JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方...
2019-03-10 09:57:39
549
原创 Web性能优（三）之从加载静态资源方式，减少HTTP请求
减少HTTP请求属于页面级优化，这条策略是最重要最有效的。为什么要减少http请求呢，原因是你在浏览器中输入一个域名，浏览器要做的事情就是通过DNS寻址，通过IP地址去访问服务器，等待链接，发送数据，等待服务器响应，接收数据，这是一个漫长的阶段，如果一个页面http请求多了起来，那么就会造成过多的时间成本，资源上每个请求都要携带数据，因此每个请求否需要占用带宽。浏览器请求多了以后，浏览器需要分批次...
2019-03-10 09:50:55
414
原创 Web性能优化（二）之页面重绘repaint和回流reflow
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML...
2019-03-10 09:32:41
271
1
原创 BFC
BFC概念：块级格式上下文，独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。形成条件：1.浮动元素2.绝对定位元素3.display：inline-block作用：1.包含浮动影响下一行内容。2.不被浮动元素所遮盖3.阻止外边距折叠也就经常遇到margin-top影响到外面的内容，在盒子里面反而没起效...
2019-03-09 16:25:28
100
原创 Web性能优化(一)之防抖和节流
节流概念：可以举个应用场景来理解，就是在搜索引擎执行过程中，我们每输入一个汉字后，搜索引擎自动执行ajax请求，但是键盘事件是通过字母触发而不是汉字，所以我们就可以固定频率来节约资源。实现节流使用时间戳 <section style="width: 1200px;height:400px;background: red" id="scry"> </se...
2019-03-09 15:44:30
1048
原创 Vue2.0基础入门
目录渐进式框架理解:创建Vue对象：事件修饰符keyup键盘绑定双向数据绑定动态绑定css样式Vue方法属性绑定事件绑定 渐进式框架理解: 像agular.js就不是渐进式框架，因为所有的内容都要符合他的规范，而vue就可以和其他的库一起使用，不会出现问题。点击vue.js开发文档的cdn可以引入，就可以使用vue的内容了。cdn引入：<...
2019-03-08 14:43:34
276
原创 webpack4基本打包（三）----错误处理
1.这个错误是output的path没有使用绝对路径，必须使用node的path模块输出绝对路径。2.这个没有css，loader加载这个样式。3.style-loader和css-loader加载顺序交换会造成这个问题4.关于babel打包没有先安装...
2019-03-06 21:47:42
378
原创 webpack4基本打包（二）----babel配置打包方法
首先想要配置babel打包，先在本地配置一下babel转换环境，后面再使用webpack加载要转换打包的文件。配置环境有两种第一种：插件自己安装类型首先配置本地babel环境1.安装babel-corenpm install babel-core2.根目录创建.babelrc文件，这个文件的作用是在linux中rc文件是自动执行文件3.安装babel-cli，安装这个...
2019-03-06 16:58:56
1083
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人