longwanxiang的博客 | Ryuurock

解决Websocket并发执行的问题

setTimeout也算能线救国

在解决掉这个问题之前，我都有点想放弃了，因为尝试的方法都不行，照惯例先来描述下问题吧。为了能在所有页面能接收到服务器给用户发起的通知，所以我们在每个页面建立了websocket长连接来监听服务器的动静，那么问题来了，如果我开启了两个，三个甚至四个标签页，那效果你能猜到：刷刷刷一排通知烦到你直接关了通知功能。标签页之间的通信，我了解到的目前就两种通过window.opener.wi......

Posted by Wanxiang Long(Ryuurock) on 2017-09-12

websocket 并发

使用观察者模式（发布-订阅模式）对抽象组件与业务组件进行解耦

最近在重构一处功能，发现抽象组件居然依赖了业务组件的代码，从window作用域call了业务组件提供的方法，这里的强耦合让我强迫症又犯了，本着每天进步一点点的原则，毅然决然的进行解耦合。我们在学习面向对象的时候，有一条设计原则叫依赖倒置原则： A.高层次的模块不应该依赖于低层次的模块，他们都应该依赖于抽象。 B.抽象不应该依赖于具体实现，具体实现应该依赖于抽象。其实用通俗点的话来......

Posted by Wanxiang Long(Ryuurock) on 2017-09-04

订阅者模式 Observer 设计模式

多页、多入口、前后端耦合的webpack配置

webpack的流行给前端开发减少了许多不必要的工作，webpack可以让我们更纯粹的关注我们的代码，但是很多人认为它更适合单页应用，主要有以下一些痛点如果模板是后台管理的生成的怎么办我目前没有使用任何模块化的开发方式，或使用了模块加载器（如seajs、requireJs等）其实第二点我已经在上篇文章中讲过了，如果平滑的过渡到webpack，痛点一也解释过，只是没有详细的说明，此次......

Posted by Wanxiang Long(Ryuurock) on 2017-08-17

webpack vuejs

记前端从“刀耕火种”过渡到到“现代化”的自动构建工具

从r.js优化器到webpack构建工具的无痛迁移，需要做哪些工作

博主是14年入的程序员大军，当时主java兼具前端开发的活儿，在现在看来的一些流开发框架和新兴思想，早在node.js开始进入大家视野的时候就流行起来了，只是在那时博主并没有关注前端的生态圈（然而java好像也并没有关注，逃），所以还是处在很多人所描述的刀耕火种的阶段，前端代码全部挂载到全局作用域，包括插件导出的变量。那更别提组件化和模块化的编程思想了，甚至代码都不用压缩优化就直接上传到服务......

Posted by Wanxiang Long(Ryuurock) on 2017-07-22

javascript webpack AMD CMD

如何保证ajax按你想要的顺序执行？

回调回调回调回调。。。。。flag、flag、flag、flag、flag...

前端的蓬勃发展和要求越来越高的用户体验，使得现在的web页面越来越依赖ajax，无处不在的ajax，无处不在的回调，使得你的代码越写越丑，还容易陷入回调地狱，比如这样： 123456789101112131415161718192021222324$.get('/test', function() { // do something $.get(......

Posted by Wanxiang Long(Ryuurock) on 2017-07-12

Promise async await

关于javascript的跨域问题的几种解决办法

要说跨域，那得先来认识什么是跨域，以下内容摘自网络总而言之就是浏览器厂商为了web安全，使得不同域名的网页之间，无法通信，在博主的web开发历程中，主要遇到的是以下几种跨域的情况。 web api访问时 iframe与父页面或顶层页面之间资源访问时访问opener时一般解决跨域问题可以从两个维度来解决 web前端通过一些技巧来解决后端的服务器解决通过前端手段解决通过前端......

Posted by Wanxiang Long(Ryuurock) on 2017-06-27

javascript 跨域

基于jQuery的轻量图片排版插件

一个轻量的图片排版插件

之前因为公司项目需要，一个页面图片挺多的，并且图片的分辨率完全随机，这就对页面排版要求挺高的，目前最流行的解决方案就是使用纵向瀑布流。但是因为图片加载都是异步的，js插件在获取图片容器宽高时往往得到的都是还没完全加载的值，导致并不能达到需求要的效果。于是便抽业余时间写了这个插件，虽然最后因为种种原因没有用到这个插件，但是毕竟是自己付之劳动的成果于是就作了个记录话不多说直接上效果图效果......

Posted by Wanxiang Long(Ryuurock) on 2017-06-21

javascript jQuery plugin

jQuery的ajax方法拦截器

之前因为一些原因，担任过一段时间公司的前端开发面试官，面试了很多人，问过这样两个问题：如何侵入一个方法实现代理（或者叫钩子）？// 2017年10月15日修正，这里应该叫装饰器或者装饰者在不修改页面业务代码只修改一处代码的情况下，如何统一处理jQuery的ajax的response数据？其实上面两个问题本质是差不多的，不过不知道是表述不清楚，还是web前端这一块的人水平确实参差......

Posted by Wanxiang Long(Ryuurock) on 2017-06-19

jquery ajax

如何完美阻止浏览器的滚动事件向上冒泡

我们都知道，浏览器的事件一般是从元素的一层一层网上冒泡的(document.addEventListener方法的第三个参数设置为true则是冒泡, false则是捕获)，鼠标的滚轮事件也不例外，当某个滚动区域的内容滚动到最底部时，则会往上走，找到最近的父元素，继续滚动。在某些时候这是个很不错的设定，但是当页面的可滚动区域过多的时候，便会造成不好的用户体验。给人以“到处都在动”的感觉，可能你......