- 博客(50)
- 收藏
- 关注
RSS订阅
原创 socketjs, stomp-client,react, redux-observable 搭建一个基于stomp over websocket的前端服务
最近小编接到一项紧急任务：国外同事让让我三天搭建一个基于stomp 协议的websocket服务。这项服务允许用户在切换region的时候订阅后端对应的topic.由于小编最近 有点忙，废话不说先上代码。后续补充理论import SockJS from 'sockjs-client'import Stomp from 'stompjs'import { Observable, Subject } from 'rxjs'export default class AutoConnectWeb.
2020-05-23 15:36:08
845
原创 Web Workers 在React项目中应用/Web Workers 性能优化
弄清楚webWorker,我们首先要弄清楚几个问题1. JavaScript为什么是单线程在前端JavaScript操作DOM树，其实通过调用浏览器API来操作DOM树的 ，如果JavaScript是多线程的，那意思就是我们可以一边对DOM树的同一节点既做增加的行为也可以做删除的操作，这岂不是乱套了。2. 为什么需要异步由于JavaScript是单线程的，所以当执行Javascri...
2019-08-24 12:02:20
962
原创 React context 实现组件联动功能
我们知道React Context 已经出现有一段时间了并且随着hook的盛行，我们更多的发掘出了Context的价值。Context是可以像Redux一样用来管理状态，不知道你有没有像我一样有这个疑问，那既然Redux就可以管理状态，为什么要使用Context呢？现在我的理解呢是由于Context API不像Redux那样依赖很多第三方库。但是并不是说Context就可以代替Redux的...
2020-03-17 20:27:11
547
翻译 DOM 性能案例研究
我有一个有趣的问题想问你，你最后一次使用原生DOM API创建你的真实的项目是什么时候了，是的，你也许也不记得是什么时候了。你知道的，我们可以利用DOM API来和HTML做任何交互。 但是现在我们可以使用当下流行的UI框架以及库来搭建我们的UI，例如React，VUE，Angular。所以在不使用框架来将我们的代码编译成为HTML/CSS/JS的情况下，你大部分还是要基于DOM AP...
2019-10-30 11:43:48
150
原创 如何模拟section timeout && session 与cookie关系
最近遇到一个小需求就是：当用户停留某个页面超过4个小时的时候，这个时候如果用户做任何交互行为，都给用户一个弹窗，提醒用户登陆超时需要重新登陆等信息。拿到这个需求的时候，心中窃喜，分析了一下，当用户与页面做交互的时候，比如发送请求的时候，后端会返回当sesstion timeout 的时候，返回给前端的某个标记sesstion timeout 的属性，我只需要判断这个标记信息，然后作出是否有...
2019-08-24 11:38:21
377
原创 如何用原生javascript将html string 转换为node 节点
最近在优化页面性能，项目中使用了jquery，但是我们项目主要将jquery用于发送ajax请求，所以决定去掉jquery，在去掉jquery的时候发现要用原生javascript 实现将html string 转化为node 节点的过程，查了资料发现一个之前从未接触过的方法，DOMParser,static parseElement(htmlString){ return new ...
2019-04-23 20:09:42
4527
原创 RxJS 中 调用Subject.error()会造成什么结果
最近一段时间做一个需求，需要我根据服务器断开 的时候我将一个react组件抛出出，刚开始我的思路是当server.js中的onerror触发的时候我抛出一个observable 异常，observable.error.call(observable). 我epic中的处理是action.map(dispatch(action2)).catch().感觉这行代码行得通，所以我就屁颠屁颠的撸代码，...
2018-11-06 13:43:29
611
原创 ::在React 中的意义
我在看一些项目的时候遇到了::这种写法，查了之后才知道这种是ES7针对.bind的新语法。例如：在React中我们常见的写法是<button onClick={this.handleClick,bind(this)}></button>,那么ES7中我们可以按照如下格式方法书写：<button onClick={::this.handleClick}>&...
2018-10-24 14:58:01
427
原创 loading 半圆css实现
isplay: inline-block; box-sizing: border-box; width: 18px; height: 18px; margin-right: 15px; border: 2px solid transparent; border-top-color: #0855c6; border-left-color: #0855c6; border-radius...
2018-10-22 17:18:01
467
原创 去重，字符出现次数，扁平化数组，数组交集以及并集
1. 去重let a = [2, 3, 4, 5, 4]let a1 = [2, 3, 4, 5, 4]// method1 filter并不会改变原来数组let method1 = a.filter(function (value, index) { return a.indexOf(value) === index})console.log('方法-', method1)...
2018-09-12 16:56:46
221
原创 javascript push()、shift()、pop()、unshift()实现简单导航轮播效果
最近做一个本来只有三期活动的页面，后面伟大的需求说后面需求可能增加到n期，所以有一个以三期活动为一组的轮播，实现轮播的插件太多了，但是后端说不希望用插件，因为他那边可能要变动，所以就手动实现了一个简单的轮播效果 var length=$('.ul-nav li').length; var count=0; if(length>3){ $...
2018-07-20 17:48:18
412
原创 .toFixed(n)输出结果是string
在说问题之前先附上一段代码： function addCourage(currentAddedCount){ if(currentAddedCount>0){ $('div.inner').find("div").addClass('inner-bar'); if(currentAddedCount<10){ $('div.inner')...
2018-06-06 15:31:28
7355
6
原创 HTML 5 的自定义 data-* 实现图片切换或者轮播
除了用swipper等插件实现图片的切换之外，我们通过引入html5规范中的自定义data属性来实现图片切换。在详细介绍怎么实现切换之前，先介绍data属性的使用方法。<div class="dragon_eggs"> <img src="./img/dragon_egg1.png" alt="" id="dragon_eggImg" data-aw...
2018-05-30 20:56:49
1601
原创 html5 autoplay不起作用 Uncaught (in promise) DOMException: play() failed because the user didn't interac
Chrome的autoplay政策在2018年4月做了更改。新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单1. muted autoplay始终被允许2. 音乐的autoplay 只有在下面集中情况下起作用： 1. 有用户行为发生像（click,tap,etc）. 2. 对于桌面程序，用户已经提前播放了音频...
2018-05-30 13:28:40
61641
6
翻译 何处处理获取数据逻辑：componentWillMount vs componentDidMount
我们都很清楚，render不是一个很好的处理获取数据或者任何异步操作的位置，它在某种程度上会更改状态或者导致一些其他影响componentWillMountReact会在组件第一次执行render方法前执行这个方法，乍一看它时处理获取数据逻辑的很完美的地方。但是我们一般都是通过异步请求API的方式来获取数据，这就意味着我们还没有获取到数据而render方法已经被执行了。我们没有办法暂停render...
2018-02-28 09:38:54
5072
1
原创 使用func作为setState的参数
我们知道一个react 组件状态发生变化时，render方法会被调用。 所以对于组件状态变化时，我们可以在render这个方法体内执行某个动作，那么问题就来了，为什么需要func作为setState的回掉函数呢？查了些资料终于弄明白了：1. 原来setState是以异步的方式来运作的。这就意味着在调用setState之后，this.state这个变量对象并没有立即改变。所以如我们想要直接
2018-02-05 17:58:47
553
翻译 React select
原文：https://reactjs.org/docs/forms.html#why-select-value在HTML中用来创建下拉框,例如：select> option value="grapefruit">Grapefruitoption> option value="lime">Limeoption> option selected value="coconut">
2018-02-02 13:31:22
3110
2
原创 JSON-RPC
JSON-RPC 是一个无状态且轻量级的远程过程调用协议（RPC）协议，它允许运行在基于socket,http等诸多不同消息传输环境的同一进程中。其使用JSON作为数据格式
2017-12-27 13:44:37
1092
翻译 Node.js中request模块与http模块之间的区别
原文https://stackoverflow.com/questions/27783806/what-is-the-difference-between-request-and-http-modules-in-node-jshttp包含对原生HTTP协议的支持而request模块使用http模块并且添加了很多语法糖
2017-12-04 14:47:49
1582
原创 .gitignore文件
有的时候我们需要把某些文件放在Git目录中，但不能提交他们，Gith为我们创建了一个特殊的.gitignore文件，然后我们只需要把忽略的文件名填进去，Git就会自动忽略这些文件。
2017-11-29 09:47:42
156
原创 await is a reserved word 以及将forEach方法的参数改为async函数出现的问题
异步出错：await is a reserved word 。在用forEach发送请求的时候并不是期望的继发而是并发
2017-11-28 10:14:42
14197
原创 ES6接口
什么时接口？其实接口简单理解就是一种约定，一种协议，使得实现接口的类在形式上保持一致，而在ES6中的接口不像C#中一样，需要对象实现接口。interface SetBreakpointsArguments{source:Source;breakpoints?:SourceBreakpoint[];lines?:number[];sourceModified?:boolean;
2017-11-26 15:52:01
4458
1
原创 ES6尾部调用优化
ES6关于函数最有趣的变化可能是尾调用系统的引擎优化。尾调用指的是函数作为另一个函数的最后一句被调用就像：let debugSetting=function(done){(async()=>{})();};it('should pass Usersetings test with default setting',(done)=>{return debugSetting(d
2017-11-24 12:44:03
355
原创 JavaScript 箭头函数
最近在看JavaScript看到了箭头函数，发现这个和C#中的 拉姆达表达式的用法差不多语法：1.let sum=(num1,num2)=>{num1+num2}2. let sum=()=>{num1+num2}自己小小demo中的代码var yammy=angular.module('Yammy',['ngRoute']);yammy.config(($routePro
2017-09-05 17:06:03
230
原创 XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP angularjs
最近在做angularjs 的小小demo的时候遇到了下面的问题XMLHttpRequest cannot load file:///F:/Yammy/app/views/restaurants.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-exte
2017-09-05 15:12:28
735
原创 To be or not to be that is a question
Just find a right way then use all ways to go to the top. We must suffer enough.
2017-07-17 22:13:53
596
原创 单体内置对象,内置对象
内置对象：由ECMAScript实现提供的、不依赖宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。开发人员不必显示的实例化内置对象，内置对象有：Object、Array和string.两个单体内置对象：Global和Math.Global对象不属于其他对象的属性和方法，最终都是它的属性和方法，所有定义在全局作用域下的变量和方法都是Global的属性和方法。ECMAS
2017-07-16 13:29:46
362
原创 数组的栈方法和队列方法
ECMAScript数组提供了让数组像其他数据结构一样的表现形式例如像栈和队列一样。队列：先进先出，后进后出； pop()是删除末尾元素；shifft()是删除队首元素，unshift()是在队首位置添加元素。栈：先进后出，后进先出； pop()是删除末尾元素；push()是添加元素到尾部。
2017-07-13 14:14:55
314
原创 setInterval()
setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。返回一个intervalID。语法：let intervalID=setInterval(func,delay[,param1,param2]);1. intervalID是此重复操作的唯一辩识符，可以作为参数传给clearInterval().2. func是你想要重复调用的函数。3
2017-07-12 15:11:36
1709
原创 Jquery位置遇到的问题($ is not defined)
由于将scripttype="text/javascript"src="res/jquery-1.9.0.min.js">script>放在了结束标签后面，会出现Jquery不能加载的问题导致出现$ is not defined的问题。解决方式window.onload=function(){Jquery代码}即window.onload= functi
2017-07-12 13:59:49
24395
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人