xiaobe阿-CSDN博客

原创 1024我们的码农节-向自己致敬！

一、blog主有话要说因为我主要在博客园里发博客啦. 在这里打个广告:《xiaobe的博客园》作为(真正)入赘程序届的第一年, 对明天的1024码农节有很多话想说.比如:给各位辛苦大佬们讲几个咱们程序届段子给自己立一个flag, 明年的1024争取少掉点甚至不掉头发！共同探讨程序届高居不下的两大热点: 衣品和女朋友！…更多没涉(xia)及(xian)的话题请评论里, 留起来...

2018-10-23 22:21:01 737

原创真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

一、前面bb两句因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉。想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈。好了,可以停止bb了,说一下干货。二、这个项目能学到啥?为了减少秒关文章的冲动。我得把好话放在前头。做了这个项目，我学会了….(对于我). 1. Webpack的配置以及各个参数概念都有一定的熟悉。 2. React+Webpack+Exp...

2018-08-17 12:06:50 1157 2

原创不要再混淆js的substring和substr了！

一、字符串操作方法js中字符串方法操作有很多:concat、indexOf…. 这里只要介绍两种经常混淆的字符串截取方法:substring、substr 二、从例子入手let str = 'xiaobe'//substring(start,end)let str1 = str.substring(1,2);//substr(start,length)let str...

2018-08-22 19:33:51 2471

原创异步加载script,提高前端性能(defer和async属性的区别)

一、异步加载script的好处为了加快首屏响应速度,前端会采用代码切割、按需加载等方式优化性能。异步加载script也是一种前端优化的手段。就好比如果我的页面其中一个功能需要打开地图,但是地图的js插件包是非常大的,而如果用户不用地图功能的时候,我们当然不能再给它加载js地图包,白白让他多花等待时间岂不是很冤枉!于是我们可以动态插入script,当用户点击了某个按钮的时候,再新建scr...

2018-08-22 19:31:09 2243

原创前端单页面富应用(SPA)的实现

一、什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。实现方法: Node+Html5实现React/Vue等MVVM框架二、单页面应用的实现1. Node+Html5H5实现单页面应用为什么需要N...

2018-08-21 10:29:47 5270 1

原创 Chrome,你这坑人的默认非安全端口

一、什么是默认非安全端口?   每个浏览器出于安全问题,都会禁止一些网络浏览以外的端口。因为不清楚这个机制,我用node开启的6000服务根本无法访问,调试了半天代码,用别的浏览器发现打开了！深究得知浏览器禁用端口这一说。二、浏览器默认限制端口有哪些?Chrome谷歌浏览器:6000、6665-6669…（详细末尾贴上）FireFox火狐浏览器...

2018-08-20 20:11:17 3433 1

原创彻底弄懂JS事件委托的概念和作用

一、写在前头   接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗？然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面才知道,原来他要考察的是事件委托(代理)的原理,他指的是未来还不清楚会创建多少个节点,所以没办法实现给他们注册事件。二、事件委托(事件代理)的作用?为...

2018-08-18 19:34:20 1464

原创 react-redux的mapStateToProps可取到state值但不会注入props

一、问题描述想通过react-redux和redux实现react组件之间的通信,reducer、action、store都编写正确,mapDispatchToProps也能正确传值.唯独mapStateToProps的return出现了问题。//connect参数之一,获取参数 , state为接受的参数const mapStateToProps = (state) =&gt...

2018-08-18 09:52:34 3633

原创 Webpack+React项目入门——入门及配置Webpack

一、入门Webpack参考文章:《入门Webpack,看这篇就够了》耐心看完这篇非常有帮助二、React+Webpack环境配置参考文章:《webpack+react项目初体验》项目实战:《webpack+react小项目》三、webpack相关参数1. entry参数module.exports = { ... entry:__dirn...

2018-08-18 09:51:44 423

原创 React入门实例:组件化+react-redux实现网上商城(1)

项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文件目录) 3.npm install(安装依赖) 4.npm start(项目启动)功能一览1.购买产品2.查看购买的产品3.删除购买的产品功能...

2018-08-18 09:38:34 4133

原创前端笔试算法题,提高笔试存活率！(持续更新)

一、前言 1. 校招笔试马上开始,整理一些算法题一起学习. 2. 我统一使用Javscript(V8/Node)解答,都已经调试通过. 3. 一起加油！一起进步！二、题目字符串拼接提交链接：字符串拼接题目:     不借用任何字符串库函数实现无冗余地接受两个字符串，然后把它们无冗余的连接起来。输入描述:  ...

2018-08-17 18:49:23 1136

原创 CSS3动画详解(结合实例)

一、使用CSS3动画代替JS动画JS动画频繁操作DOM导致效率非常低在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint）可以避免占用JS主线程这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation二、CSS3动画animation属性(可直接跳转三、实例)简写:...

2018-08-17 18:48:40 5610

转载前端浏览器的两种缓存:协商缓存和强缓存

1.浏览器缓存机制浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存的优点有： 1. 减少了冗余的数据传输，节省了网费 2. 减少了服务器的负担，大大提升了网站的性能 3. 加快了客户端加载网页的速度浏览器缓存主要有两类：缓存协商和彻底缓存，也有称之为协商缓存和...

2018-08-17 18:47:14 1707

转载 JS中什么是发布--订阅模式?

转载文章部分内容: 发布订阅模式介绍发布—订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。现实生活中的发布-订阅模式；比如小红最近在淘宝网上看上一双鞋子，但是呢联系到卖家后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以呢联系卖家，问卖家什么时候有货，卖家告诉她，要...

2018-08-17 18:46:00 151

原创 ES6中Promise的入门(结合例子)

一、Promise的前言解决回调地狱//以往回调方式函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(function(data3){ //代码执行...(ajax3) }); ...

2018-08-17 18:43:12 497

原创前端如何应对笔试算法题?(用node编程)

用nodeJs写算法题咱们前端使用算法的地方不多,但是为了校招笔试,不得不针对算法题去练习呀！好不容易下定决心攻克算法题.发现js并不能像c语言一样自建输入输出流。只能回去学习c语言了吗?其实不用,node也能很好帮助我们完成！且笔试都支持用nodeJs,实际上就是用JS编程,只是用到了node的一些输入输出流方法。我们看看最简单的使用模板:(转载)var readl...

2018-08-17 18:40:50 718

原创关于js中splice方法返回的结果

　　刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可！因为splice()会改变原来数组！之前对splice()方法一直不熟悉,写个随笔记录一下。官方说明:定义和用法　　splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。　　注释：该方法会改变原始数组。语法　　arrayOb...

2018-08-17 18:39:50 6057

原创前端调用后端接口下载excel文件的几种方式

　　今天有一个导出相应数据为excel表的需求。后端的接口返回一个数据流，一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax的安全性问题导致无法下载。下面列觉两种我测试成功的方式:1.window.location.href = ‘接口地址’　含义:当前页面打开URL页面.　和在浏览器输入接口地址一样,可以...

2018-08-17 18:35:48 26239 5

soybean