- 博客(171)
- 收藏
- 关注
RSS订阅
原创 React组件的数据——prop和state
React组件数据分为两种，prop和state，无论prop或state改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候选择用state呢？其实原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。一、React中的prop在React中，prop是从外部传递给组件的数据，一个React组件通过定义自己能够接受...
2018-05-07 22:09:36
2481
转载 深度剖析HTTP缓存机制及原理
前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有...
2018-04-16 13:52:45
382
2
转载 React中的组件通信问题
本次的代码都放在 github.com/sunyongjian… ， 可以 done 下来加深理解。父子组件父→子parent组件传给child组件，符合react的单向数据流理念，自上到下传递props。// 父组件class Parent extends Component { constructor() { super(); this.state = { v...
2018-04-10 17:09:18
264
原创 TCP/IP通信传输流及各层网络协议详细解读
一、TCP/IP通信传输流 TCP/IP协议族按层次分别分为以下4层：应用层、传输层、网络层和数据链路层 1、利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。发送端从应用层往下走，接收端则从链路层往上走。 2、发送端在层与层之间传输数据时，每经过一层时必定会被打上一个该层所属的首部信息，反之，接收端在层与层传输数据时，每经过一层时会把对应的首部消去。这种把数据...
2018-04-10 10:26:40
3283
原创 react+ts+antd实现全选/反选操作
最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤：1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选；2. 定义全选checkbox的change函数，为true则遍历list中所有元素，将其checked置为true，反之，置为false；3. 定义list中单个checkbox的change函数，控制list中当前元素是否勾选，同时判断全选是否应该勾选；importReact,{useState}from'reac...
2020-07-12 11:10:05
1863
转载 Express之托管静态资源
中间件express.static我们使用express初始化一个目录的时候，会在app.js中看到一大推的app.use。其中一个主要的中间件是express.static(4.0版本依旧保留的中间件)var express = require('express');var app = express();app.use('/static',express.static('p...
2019-05-21 09:58:26
2879
1
原创 Visual Studio Code修改主题背景颜色
点击“文件”——“首选项”——“颜色主题”，即可设置背景颜色啦，快捷键Ctrl+K，Ctrl+T；
2019-05-20 17:35:51
45784
原创 VSCode更换背景主题快捷键
vscode 默认是有好几种主题的，有颜色较深的，也有比较柔和的；我们可以使用快捷键来快速的选择更换主题；首先：按下 Ctrl + k然后再按下：Ctrl + t此时就会弹出相关的主题，自行选择就好了...
2019-04-06 20:51:04
3276
转载 Windows下使用word2vec进行词向量训练
首先在windows环境下需要安装Cygwin软件，安装见上一篇博文。今天主要来记录一下怎么使用word2vec进行词向量训练。1.启动cygwin，使用cd命令进入word2vec文件夹下输入make命令，报如下错误gcc word2vec.c -o word2vec -lm -pthread -O3 -march=native -Wall -funroll-loops -Wno-unu...
2019-03-10 15:42:50
2169
转载 Windows下Cygwin的安装
1.Cygwin安装在我安装之前，本以为一个简单的软件安装流程，结果碰到了各种坑，还是写个教程吧，给自己和大家一个借鉴。Cygwin下载网址（windows请选择set-x86.exe bit根据自己系统多少位决定）http://www.cygwin.com/ ;下载Cygwin的setup.exe安装文件，但是这个安装文件是属于Linux风格的，跟win下的安装风格不一样，准确的说就是：...
2019-03-10 15:33:49
1402
转载 TF-IDF与余弦相似性的应用（三）：自动摘要
有时候，很简单的数学方法，就可以完成很复杂的任务。这个系列的前两部分就是很好的例子。仅仅依靠统计词频，就能找出关键词和相似文章。虽然它们算不上效果最好的方法，但肯定是最简便易行的方法。今天，依然继续这个主题。讨论如何通过词频，对文章进行自动摘要（Automatic summarization）。如果能从3000字的文章，提炼出150字的摘要，就可以为读者节省大量阅读时间。由人完成的...
2019-02-16 21:32:23
323
转载 TF-IDF与余弦相似性的应用（二）：找出相似文章
上一次，我用TF-IDF算法自动提取关键词。今天，我们再来研究另一个相关的问题。有些时候，除了找到关键词，我们还希望找到与原文章相似的其他文章。比如，"Google新闻"在主新闻下方，还提供多条相似的新闻。为了找出相似的文章，需要用到"余弦相似性"（cosine similiarity）。下面，我举一个例子来说明，什么是"余弦相似性"。为了简单起见，我们先从句子着手。 句子...
2019-02-16 21:28:52
479
转载 TF-IDF与余弦相似性的应用（一）：自动提取关键词
这个标题看上去好像很复杂，其实我要谈的是一个很简单的问题。有一篇很长的文章，我要用计算机提取它的关键词（Automatic Keyphrase extraction），完全不加以人工干预，请问怎样才能正确做到？这个问题涉及到数据挖掘、文本处理、信息检索等很多计算机前沿领域，但是出乎意料的是，有一个非常简单的经典算法，可以给出令人相当满意的结果。它简单到都不需要高等数学，普通人只用10分...
2019-02-16 21:26:48
238
原创 express快速创建项目
首先要确保已经安装了node和express，网上大篇幅的介绍如何安装配置的，可自行查找：1.nodejs安装：http://www.cnblogs.com/zhouyu2017/p/6485265.html2.在node中安装express： npm install -g express express在4.0后把命令工具单独分了出来，安装完express后，还得安...
2019-01-16 21:49:24
7752
原创 MongoDB的CRUD操作
MongoDB中有三个重要的概念：数据库、集合、文档。 在开始之前，先来用一张图对比一下SQL和MongoDB： 一、创建操作：创建或插入操作，即向集合collection添加新的文档documents。如果插入时集合不存在，插入操作会创建该集合。db.collection.insert()若字段较多可以以这种缩进的形式，可读性更高，上图中的三个点“...
2019-01-16 21:28:50
768
原创 adminMongo的安装与连接
adminMongo：一款 MongoDB 可视化数据管理工具。安装与启动：git clone https://github.com/mrvautin/adminMongocd adminMongonpm installnpm start打开http://localhost:1234页面，即可看到如下界面：连接本地mongodb点击Add connection，输入...
2019-01-15 19:48:42
2617
1
原创 Windows安装配置MongoDB之踩坑记
一、安装MongoDB先登录Mongodb官网https://www.mongodb.com/download-center#community 下载安装包。32位还是64位视情况而定。下载完是这样的：安装没什么特殊的，就是在“custom”时需要自定义安装路径修改下：D:\MongoDB然后不断“下一步”，安装至结束。这里有一个坑：在 Installing Mongo...
2019-01-14 17:31:40
748
原创 操作系统——文件管理学习笔记
文件是具有文件名的一组相关元素的集合，在文件系统中是一个最大的数据单位，它描述了一个对象集，每个文件都有一个文件名，用户通过文件名来访问文件。文件的组成结构： 数据项组成记录，记录组成文件。数据项：数据项是文件系统中最低级的数据组织形式，可分为以下两种类型：基本数据项：用于描述一个对象的某种属性的一个值，如姓名、日期或证件号等，是数据中可命名的最小逻辑数据单位，即原子数...
2019-01-08 21:26:01
1987
原创 记一次突如其来的小米前端面试
小米的简历投递的挺早的，我记得是8月15日，然而石沉大海，一直没有音信，也抱着笔试挂了的心态，无所谓了。一次补录的机会，我再次投递了前端开发岗，幸运的是2018年11月26日中午接到小米北京的一位面试官预约的电话面试，订的晚上7点。于是开始了我的第一次小米电面（38分钟）：1、自我介绍2、对react掌握多少？3、JSX语法，与react有什么关系？4、render方法...
2018-11-27 16:12:59
1301
原创 记一次幸运的拼多多Web前端面试（一面+二面+hr面）
来赞赞人品，希望能通过，目前为止，三面都是电话面试。2018年11月4日一面（26分34秒）首先自我介绍，然后提问。1、css中的水平居中的不同方式2、css中的伪类：before与after3、html中的meta标签是用***什么的？4、有做过H5，移动端的页面吗？5、media-query用过吗？6、用的ES6的语法吗？7、promise是什么意思？8、后台拿数据是...
2018-11-26 17:02:53
9894
5
原创 CSS绘制三角形原理剖析
首先，从对border的应用开始，以前一直以为边框是矩形的，其实不然，如下：.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }当我们增大border值时：.border { width:50px; ...
2018-11-26 16:56:50
300
原创 深入理解JSX
JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。 对于Web项目而言，React的JSX提供了一组类似于HTML的XML标签，转译后，XML会被转译为针对React库的函数调用，如下：<h1>Hello World</h1>会被转译为：React.createElemen...
2018-11-05 16:12:16
473
转载 this的值到底是什么？
首先说明本篇是我在知乎上看到的一位大神对js中this的解读，讲的挺清楚的，拿来保存和大家分享一下~~原谅我的转载 你可能遇到过这样的 JS 面试题：var obj = { foo: function(){ console.log(this); }}var bar = obj.foo;obj.foo(); // 打印出的 this 是 objbar...
2018-11-05 11:27:57
368
原创 常用的BOM对象
1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；2、document对象，文档对象；3、location对象，浏览器当前URL信息；4、navigator对象，浏览器本身信息；5、screen对象，客户端屏幕信息；6、history对象，浏览器访问历史信息； ...
2018-11-05 11:10:48
751
原创 单页面应用——SPA
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。 它将所有的活动局限于一个web页面中，仅在该web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的交换HTML的内容，从而实现UI与用户的交互。...
2018-11-05 10:31:13
877
原创 javascript中数组和对象的深拷贝实现方法
在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示： 如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。一、数组的深拷贝1.for 循环实现数组的深拷贝for循环是非常好用的。如果不知道高级方法，通过for循环能够完成我们大多数的需求。var arr = [1,2,3,4,5];var arr2 = ...
2018-11-02 16:26:31
625
原创 call、apply、bind的应用与区别
call、apply、bind的作用是改变函数运行时this的指向，有关this的用法，可阅读上一篇文章JavaScript中this的四种调用模式。call call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。var arr = [1, 2, 3, 89, 46];var ...
2018-11-02 15:37:26
515
原创 JavaScript中this的四种调用模式
this，即函数执行时的上下文环境，通常有四种调用模式：函数调用模式，方法调用模式，构造器调用模式，call/apply调用模式。函数调用模式就是普通函数的调用方式，此时this被绑定到window对象。最普通的函数调用function fn1(){ console.log(this);//window}fn1()函数嵌套function fn1(){...
2018-11-02 10:56:55
996
转载 JavaScript的new操作做了什么？
今天在知乎上，看到一位大神这样解释new的操作，很详细，通俗易懂，前端面试中也会涉及到这方面的问题，所以分享来大家一起学习学习，膜拜大神的思维，很赞！今天我从「省代码」的角度来讲 new。---------------------------想象我们在制作一个策略类战争游戏，玩家可以操作一堆士兵攻击敌方。我们着重来研究一下这个游戏里面的「制造士兵」环节。一个士兵的在计算...
2018-11-02 09:35:56
2080
原创 JavaScript精确判断对象类型——Object.prototype.toString
面试中经常会问到js的数据类型有哪些，以及如何判断数据类型的问题，对于基本数据类型undefined，string，boolean，number，symbol使用最常用的typeof即可判断，但是对于null，array，{}使用typeof就会统一返回object字符串，这样就不能准确的判断。怎么解决的呢，来看下面：首先使用typeof来判断基本的数据类型： //基本数据类型：...
2018-11-01 20:58:52
2078
原创 360企业安全前端面试
一面：1.html5的新特性有哪些？除了新标签之外还有新的特性？新增的标签主要是为了什么？（语义化标签）2.盒模型，标准模型和怪异模型有什么区别？（box-sizing来回答的）3.id或类名命名的规范，id可以用数字表示吗？4.浮动和定位分别在什么情况下使用？5.flex弹性盒模型的布局方式，哪些属性，flex-basic是做什么的？换行怎么办？6.移动端的布局方式有哪些...
2018-10-22 11:11:07
1444
原创 JavaScript面试编程题集
1.给你一个字符串String=“adadfdfseffqdjhuserfefsefseetsdg”，要求找出里边的字符串qdjhu，使用JavaScript实现。解析：这里要用到indexOf().返回字符indexOf(string)中字符串string在父串首次出现的位置，从0开始，没有返回-1。代码如下：var str = "adadfdfseffqdjhuserfefsef...
2018-10-09 11:32:52
2559
原创 前端面试之ES5与ES6的区别
首先我们来看一下ES是什么？全称为ECMAScript，是JavaScript语言的核心，它规定了js的组成部分：语法、类型、语句、关键字、保留字、操作符、对象。下面直奔两者不同：1. 系统库的引用 ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用//ES5var React = require("react");var { ...
2018-10-07 17:00:32
13706
1
原创 《深入理解ES6》——Promise异步编程
Promise的生命周期 每个promise都会经历一个短暂的生命周期：先是处于进行中（pending）的状态，此时操作尚未完成，所以它也是未处理（unsettled）的；一旦异步操作执行结束，Promise则变为已处理（settled）的状态。已处理的状态又分为以下两种：Fulfilled Promise异步操作成功完成 Rejected 由于程序错误或其他一些原因，Pro...
2018-10-07 16:13:02
259
原创 《深入理解ES6》——Set集合与Map集合
Set集合 ES6中新增的Set类型是一种有序列表，其中含有一些相互独立的非重复值，通过Set集合可以快速访问其中的数据，更有效的追踪各种离散值。创建Set集合并添加元素 调用new Set()创建Set集合，调用add()方法向集合中添加元素，访问集合的size属性可以获取集合中目前的元素数量。let set = new Set();set.add(5);set...
2018-10-06 21:49:19
584
原创 《深入理解ES6》——对象解构和数组解构
为何使用解构功能 在ES5及早期版本中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码，如下：let options = { repeat:true, save:false};//从对象中取数据let repeat = options.repeat, save = options.save; 这段代码从opti...
2018-10-06 16:23:06
9467
1
原创 《深入理解ES6》——扩展对象的功能性
对象字面量语法扩展 对象字面量之所以如此流行，是因为如果我们想要创建对象，不再需要编写冗余的代码，直接通过它简洁的语法就可以实现。而在ES6中，以下语法让对象字面量变得更强大、更简洁。属性初始值的简写 在ES5及更早版本中，对象字面量只是简单的键值对集合，这意味着初始化属性值时会有一些重复。如下：function createPerson(name,age){ ...
2018-09-29 11:31:11
364
原创 《深入理解ES6》——箭头函数
箭头函数 在ES6中，箭头函数是其中最有趣的新增特性。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：没有this、super、arguments和new.target绑定 箭头函数中的this、super、arguments及new.target这些值由外围最近一层非箭头函数决定。 不能通过ne...
2018-09-27 11:42:44
1932
原创 《深入理解ES6》——字符串和正则表达式
字符串中的子串识别 子javascript首次被使用以来，开发者们就开始使用indexOf()方法来在一段字符串中检测另一段字符串，在ES6中，提供以下三种类似的方法可以达到相同效果：includes()方法，如果在字符串中检测到指定文本则返回true，否则返回false startsWith()方法，如果在字符串中的起始部分检测到指定文本则返回true，否则返回false en...
2018-09-26 16:37:17
513
原创 《深入理解ES6》——块级作用域绑定
一、var声明及变量提升（Hoisting）机制 在函数作用域或全局作用域中通过关键字var声明的变量，无论实际上是在哪里声明的，都会被当成在当前作用域顶部声明的变量，这就是我们常说的提升(Hoisting）机制。下面以一个函数为例来说明：function getValue(condition){ if(condition){ var value = "blue...
2018-09-26 11:19:25
257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人