如何写好前端业务代码

一、背景想想从15年11月到现在,从zbj以前的交易取经团,到现在的顾问平台,大大小小做了不少业务需求,也是一边踩坑(一边挖坑)一边成长。以前维护10年累计下来的老代码,缝缝补补,主站所有项目全部在一个文件夹里,也是练就了一身从定位代码的本事。到后来新项目用了新框架,node作为controller层,后台不需要兼容ie的项目也引入了vue。刚开始的时候开心得不行,终于不用苦逼地搭php那一套老开发环境,前后端彻底分离,也不用维护那些“

阅读更多...

postMessage解决跨域、跨窗口消息传递

最近遇到一个需求,页面嵌入了iframe框,iframe框里是一个Im在线聊天对话框。在用户切换聊天对象时,外层页面也需要获取当前用户正在聊天的对方的userid。但是由于im页面是嵌入的iframe,外层父页面既无法监听切换聊天对象的事件,也无法获取里面的dom元素,会报跨域的错误。为了解决这一问题,可以使用html5的APIpostMessage.

阅读更多...

函数防抖和节流

函数防抖我们经常会遇到这样的需求:需要我们监听用户的输入向后端发送请求,比如搜索推荐,我们会监听input框的change事件,但是如果用户每次按下键盘都发送请求,会发送很多请求、卡顿等。为了优化这种情况,我们就需要用到函数防抖。 函数防抖就是让某个函数在上一次执行后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发此函数,等待时间会重新计算。 使用函数防抖后,假设我们input框的change事件,当输入完成后

阅读更多...

《ECMAScript 6 入门》读书笔记

let与constlet 块级作用域 不存在变量提升 暂时性死区 不允许重复声明 const const声明一个只读的常量。一旦声明,常量的值就不能改变。 const一旦声明变量,就必须立即初始化,不能留到以后赋值。 暂时性死区 不允许重复声明 将一个对象声明为常量必须非常小心,只是保持了指向的地址不变,不保证指向的数据不变。 变量的解构赋值用处: 对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。let { log,

阅读更多...

单元测试 & mocha框架

一、什么是单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元指一个类,图形化的软件中可以指一个窗口或一个菜单等。总的来说,单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。 单元测试在前端

阅读更多...

2016年总结和2017年目标

好久没更新博客了,上一次的博客都要追溯到4月份了,真是惭愧。
今天工作需求测试阶段基本快告一段落,而且今天正好部门前端开了个总结会,想想2016年过去了,趁着现在有时间,也该来写一下2016年的总结和规划规划2017年的目标了。

阅读更多...

使用pm2+github将node项目一键部署到远程服务器

每次在本地跑Node项目自娱自乐总不是很爽,一直想把自己的node项目部署到服务器上。但是我对于后端和运维知识我还是处于小白阶段,今天研究了一下午,总算是成功把自己的node项目搞了上去,又学到了新姿势。本文将介绍怎么从零开始,获得服务器,并将node项目通过github+pm2部署到远程服务器。

阅读更多...

关于jQuery的Deferred对象介绍(译)

(趁着毕设要求,翻译了一篇文章,顺便放上来。英文不好翻了2天才翻完,/(ㄒoㄒ)/~~如有错误欢迎指正。)原文链接:An Introduction to jQuery’s Deferred Objects 长久以来,javascript的开发者习惯于使用回调函数去执行某些任务。一个常见的例子就是当某些事件比如click或者keypress执行的时候,通过addEventListener()添加回调函数。这样做的好处是,回调函数很简单,让

阅读更多...