迷途老书僮-优快云博客

原创如何手写一个Generator函数

我们也许用的多async，也许知道async原理是基于generator语法糖封装的，那你知道如何手写一个类Generator函数吗，废话不说直接上代码const context={ prevalue:0, nextvalue:0, done:false, stop: function stop () { this.done = true }}function gen(context){ while(true){ switch(context.prevalue=

2020-12-01 15:58:49 436

原创如何手写一个异步Promise函数

先定义几个状态const PENDING='PENDING', FULLFILLED="FULLFILLED", REJECTED="REJECTED";新建一个Promise，封装函数resolve和reject；在这里插入代码片let resolve=(value)=>{if(this.status=PENDING){this.status=FULLFILLED;this.value=value;this.successArr.forEach((fn)=

2020-12-01 15:47:14 497

原创 websocket之性能优化-防抖函数

在用户执行某种特定操作时（频率很高），我们没必要每次都监听这个函数，如淘宝搜索栏，百度搜索栏快速输入值检索过滤，可以定义多少ms后执行一次，减少http的请求频率function debounce(func, wait) { let timer; return function() { let context = this; // 注意 this 指向 let args = arguments; // arguments中存着e if

2020-12-01 15:20:28 898

原创性能优化-节流函数

什么是节流函数？节流函数既是某个函数只能在某个时间段内只能执行一次，我们在开发中如果使用了类似scroll,onsize,mouse事件，都会非常频繁的监听这个函数，如果在这函数里面操纵dom，代价将是非常大的，笔者遇到的一个项目问题正是如此，通过websocket推送端，在scroll过程中发送即时消息给接收端，接收端在收到消息之后进行页面dom操作，因为用了一些页面大小位置监听元素，所以指示页面极度卡顿，后面想到稀释发送次数来缓解接收端的压力，也就是我今天讲的主角，节流函数...

2020-12-01 15:09:23 465 1

原创 webpack打包构建之性能优化

1 写es6时需要转换工具babel，我们可以只需src目录上转换rules:[ { //js文件才使用babel test:/\.js$/, loader:'babel-loader', //只在src文件夹下查找 include:[resolve('src')]， //不会去查找的路径

2020-11-30 22:17:43 143

原创前端优化之electron启动，白屏时间过长问题

前端优化之electron启动，白屏时间过长问题1窗口先创建后隐藏，初始化后再展示`。 mainWindow = new BrowserWindow({ height: 600, width: 960, frame: false, minWidth: 710, minHeight: 500, offscreen: true, webPreferences: {webSecurity: false}, resizable: true,

2020-11-30 22:01:21 5748

原创 websocket原理、加密、解密

websocket是什么，websocket是基于tcp/ip协议封装的一套实现tcp连接的接口，或者说是工具。我们应该都知道他的业务应用逻辑。1创建socket2绑定3监听4等待数据5接受数据那么他和http之间有什么区别呢，websocket原理又是如何加密和解密的？http协议：\r\n分割、请求头和请求体\r\n分割、无状态、短连接，属于超文本传输协议，对应于应用层，用于如何封装数据。websocket协议：\r\n分割，创建连接后不断开、验证+数据加密，属于传输控制协议，对应于传输

2020-06-03 09:31:33 3774

原创 css flex布局实现电影字幕效果

最近做的一个语音转换项目，需要即时通过websocket把服务器转换的语音问题以电影字幕效果实现处理，想了很久，发现flex方法可以巧妙实现，代码如下； height: 20px; display: flex; flex-flow: column-reverse; align-items: baseline; overflow: hidden;通过flex-flow的主轴设置为垂直方向，继续设置下沿起点，然后统一容器基线即可。...

2020-05-25 15:56:02 455

原创 three.js学习笔记（1）如何创建一个场景

three.js，显而易见，three即3D，js为JavaScript，如果要建立一个3d效果的页面，那么three.js是一个很好地选择，如下图three.js的简单模型如下图，基础要素如下，包含虚拟场景，虚拟相机，执行渲染操作，投影直接上代码这样就可以创建一个基础的3d场景了...

2019-08-28 15:53:36 432

原创优化webpack打包后资源过大，首次加载缓慢问题(动态加载)

在我们做h5页面，打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。我们可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件...

2019-08-28 15:23:14 1339

原创如何打造自己的专属桌面客户端，自定义状态栏，首页界面（electron）

如何打造类似上图的客户端界面？1 新建个electron界面，并且干掉直接的边框重写htmlmainWindow = new BrowserWindow({webPreferences: {webSecurity: false},height: 600,useContentSize: true,width: 800,minHeight:600,minWidth:800,full...

2019-08-16 16:01:39 2388

原创 javascript如何获取设备连接网络类型，切换提示给用户

js有个navigator对象，有兴趣可自行在浏览器打印,如下图具体方法如下getTypeNet() {let strCode = navigator.userAgent;let stringNet= strCode .match(/NetType/\w+/) ? strCode .match(/NetType/\w+/)[0] : ‘NetType/other’;var netwo...

2019-08-16 15:34:02 3396

原创 Vue.js如何实现悬浮窗拖动

h5 代码模块内容1内容2js模块自己写一个自定义制定directivesdrag: function(el) {var that=this;let dragBox = el; //获取当前元素dragBox.onmousedown = e => {sessionStorage.setItem(‘move’,‘startmove...

2019-08-16 15:12:03 2224

原创 node.js如何实现下载文件（含下载进度），打开文件，删除文件或者文件夹

1 首先从服务器抓取下载地址和文件名字，然后开始截取拼接下载地址ipcMain.on(‘文件的服务器地址’, (event, args) => {var arr=args.split("+");downloadpath=arr[0];console.log(downloadpath)savepath=arr[1];openName=arr[2];mainWindow.webCo...

2019-08-16 14:59:18 2301

原创如何实现websocket多页面长连接

最近做即时通信app出现了websocket无法在多页面长连接，找了下网上还没有一个方案解决类似问题，很是头疼，很多人可能会在页面用到时新建一个websocket，然后不用时直接销毁掉，这是一种办法，但是随之而来会导致一个项目多页面创建了多个websocket对象，这样肯定对违背数据请求和性能优化，那么在只创建一个websocket的情况下如何实现多页面的长连接呢？1 通过iframe去嵌套页面...

2019-05-23 17:55:04 14942 6

weixin_39531576的博客