JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
近期在按照业务划分项目时,我们组被分了好多的项目过来,大量的是基于 Node.js 的,也是我们组持续在使用的语言。 现有流程中的一些问题 在维护多个项目的时候,会暴露出一些问题: 如何有效的使用 测试用例 如何有效的使用 ESLint 部署上线还能再快一些吗 使用了 TypeScript 以后带来的额外成本 测试用例 首先是测试用例,最初我们设计在了 git hooks 里边,在执行 git commit 之前会进行检查,在本地运行测试用例。
工作了四年多,基本上都在围绕着 JavaScript 做事情。 写的代码多了,看的代码也多了,由衷的觉得,写出别人看不懂的代码并不是什么能力,写出所有人都能读懂的代码,才是真的牛X。 众所周知, JavaScript 是一个弱类型的脚本语言,这就意味着,从编辑器中并不能直观的看出这段代码的作用是什么,有些事情只有等到代码真正的运行起来才能够确定。
使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。 TypeScript之所以叫Type,和它的强类型是分不开的,这也是区别于JavaScript最关键的一点,类型的声明可以直接写在代码中,也可以单独写一个用来表示类型的描述文件*.d.ts。
从今年过完年回来,三月份开始,就一直在做重构相关的事情。 就在今天刚刚上线了最新一次的重构代码,希望高峰期安好,接近半年的Node.js代码重构。 包含从callback+async.waterfall到generator+co,统统升级为了async,还顺带推动了TypeScript在我司的使用。
适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。 其实在日常开发中,很多时候会不经意间写出符合某种设计模式的代码,毕竟设计模式就是老前辈们总结提炼出来的一些能够帮助提升开发效率的一些模版,源于日常的开发中。
如果是经常使用Node来做服务端开发的童鞋,肯定不可避免的会操作数据库,做一些增删改查(CRUD,Create Read Update Delete)的操作,如果是一些简单的操作,类似定时脚本什么的,可能就直接生写SQL语句来实现功能了,而如果是在一些大型项目中,数十张、上百张的表,之间还会有一些(一对多,多对多)的映射关系,那么引入一个ORM(Object Relational Mapping)工具来帮助我们与数据库打交道就可以减轻一部分不必要的工作量,Sequelize就是其中比较受欢迎的一个。
最近的一段时间一直在搞TypeScript,一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。 第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。 第二个前后端的项目目前也在重构中,关于前端基于webpack的TypeScript套路之前也有提到过:TypeScript在react项目中的实践。
前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目。
koa源码阅读的第四篇,涉及到向接口请求方提供文件数据。 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose第三篇:koa源码阅读-2-koa-router 处理静态文件是一个繁琐的事情,因为静态文件都是来自于服务器上,肯定不能放开所有权限让接口来读取。
首先,JavaScript是一个单线程的脚本语言。所以就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert()以后进行疯狂console.log,如果没有关闭弹框,控制台是不会显示出一条log信息的。
koa源码阅读[2]-koa-router 第三篇,有关koa生态中比较重要的一个中间件:koa-router 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose koa-router是什么 首先,因为koa是一个管理中间件的平台,而注册一个中间件使用use来执行。
接上次挖的坑,对koa2.x相关的源码进行分析 第一篇。不得不说,koa是一个很轻量、很优雅的http框架,尤其是在2.x以后移除了co的引入,使其代码变得更为清晰。 express和koa同为一批人进行开发,与express相比,koa显得非常的迷你。
koa源码阅读[0] Node.js也是写了两三年的时间了,刚开始学习Node的时候,hello world就是创建一个HttpServer,后来在工作中也是经历过Express、Koa1.x、Koa2.x以及最近还在研究的结合着TypeScript的routing-controllers(驱动依然是Express与Koa)。
TypeScript在node项目中的实践 TypeScript可以理解为是JavaScript的一个超集,也就是说涵盖了所有JavaScript的功能,并在之上有着自己独特的语法。最近的一个新项目开始了TS的踩坑之旅,现分享一些可以借鉴的套路给大家。
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
最近新开了一个Node项目,采用TypeScript来开发,在数据库及路由管理方面用了不少的装饰器,发觉这的确是一个好东西。装饰器是一个还处于草案中的特性,目前木有直接支持该语法的环境,但是可以通过 babel 之类的进行转换为旧语法来实现效果,所以在TypeScript中,可以放心的使用@Decorator。
纯原生的组件化、模块化的一次小小的尝试,用到了如下几个新特性:shadown-DOM 对HTML标签结构的一个封装,真正意义上的组件,能保证 shadow-DOM 中的DOM元素不会被外界影响,内部也不会影响到外部的行为,变成了一个独立的模块。
这里安利两款我认为开发中能够极大的提高生产力的工具,Charles 和 Postman。 P.S. Charles(查尔斯)。。不要再读查理斯了,金刚狼中被老铁扎心的博士就叫 CharlesP.P.S. 多图慎点 两者的作用 首先,这两个工具重叠的功能并不多,两者一起使用效果绝对是1 + 1 > 2。
其实浏览器原生模块相关的支持也已经出了一两年了(我第一次知道这个事情实在2016年下半年的时候) 可以抛开webpack直接使用import之类的语法 但因为算是一个比较新的东西,所以现在基本只能自己闹着玩 :p 但这并不能成为不去了解它的借口,还是要体验一下的。
这两天针对一个Node项目进行了一波代码层面的优化,从响应时间上看,是一次很显著的提升。一个纯粹给客户端提供接口的服务,没有涉及到页面渲染相关。 背景 首先这个项目是一个几年前的项目了,期间一直在新增需求,导致代码逻辑变得也比较复杂,接口响应时长也在跟着上涨。
弹性布局flex是一个几年前的CSS属性了,说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局,什么postion: absolute+margin,float+padding,各种都可以使用flex来取代之。
Proxy是什么 首先,我们要清楚,Proxy是什么意思,这个单词翻译过来,就是 代理。可以理解为,有一个很火的明星,开通了一个微博账号,这个账号非常活跃,回复粉丝、到处点赞之类的,但可能并不是真的由本人在维护的。
最近突然想做一些好玩的东西,找来找去,想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来感觉这个挺有意思,正好趁着周末,自己也搞一波 前言 在线地址: 优化前的版本优化后的版本源码仓库地址 不建议上传大图片。
前两年大量的在写Generator+co,用它来写一些类似同步的代码但实际上,Generator并不是被造出来干这个使的,不然也就不会有后来的async、await了Generator是一个可以被暂停的函数,并且何时恢复,由调用方决定希望本文可以帮助你理解Generator究竟是什么,以及怎么用...
2018年已经到了5月份,node的4.x版本也已经停止了维护 我司的某个服务也已经切到了8.x,目前正在做koa2.x的迁移 将之前的generator全部替换为async 但是,在替换的过程中,发现一些滥用async导致的时间上的浪费 所以来谈一下,如何优化async代码,更充分的利用异步事件流 杜绝滥用async 首先,你需要了解Promise Promise是使用async/await的基础,所以你一定要先了解Promise是做什么的Promise是帮助解决回调地狱的一个好东西,能够让异步流程变得更清晰。
函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮)MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参。 ES5 使用逻辑或||来实现 众所周知,在ES5版本中,并没有提供的直接方法供我们我们处理函数默认值所以只能够自己去增强函数的功能...
从Promise开始,JavaScript就在引入新功能,来帮助更简单的方法来处理异步编程,帮助我们远离回调地狱。Promise是下边要讲的Generator/yield与async/await的基础,希望你已经提前了解了它。
这里指的遍历方法包括:map、reduce、reduceRight、forEach、filter、some、every因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个async/await的脚本。
npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XXX以及npm run XXX。 其实这里边还有很多有意思的命令&参数。关于npm,大概有两个作用: 能让我们很方便的从网上下载第三方包进行实现功能 能够让我们自己编写包,并上传到网上供其他人下载 下载相关的操作 下载主要就是围绕着install这一个命令来的。
最近用Atom写博客比较多,然后发现一个很严重的问题。。没有一个我想要的上传图片的方式,比如某乎上边就可以直接copy/paste文件,然后进行上传。然而在Atom上没有找到类似的插件,最接近的一个,也还是需要手动选择文件,然后进行上传。
清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍微丑了一些-.-项目地址:https://github.com/Jiasm/tetris在线Demo:http://blog.
最近在进行一个老项目的升级,第一步是先将node版本从4.x升级到8.x,担心升级会出现问题,所以需要将服务的接口进行验证;如果手动输入各种URL,人肉check,一个两个还行,整个服务。。大几十个接口,未免太浪费时间了-.-;因为是一个纯接口服务的项目,所以打算针对对应的API进行一波自动化测试;所以就开始寻找对应的工具,突然发现,平时使用的PostMan貌似也是支持写测试用例的-.-,所以就照着文档怼了一波;一下午的时间,很是激动,之前使用PostMan仅限于修改Header,添加Body发送请求,从来没有考虑过拿PostMan来进行测试,一下午的使用,感觉发现了新大陆。
最近想到了一个自认为很有意思的面试题如何实现一个compose函数。函数接收数个参数,参数均为Function类型,右侧函数的执行结果将作为左侧函数执行的参数来调用。 1 compose(arg => `${arg}%`, arg => arg.
什么是正则表达式 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法。
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。
背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案。 有如下几种方案: 使用js来设置元素的高度 使用vw单位 div {width: 50vw; height: 50vw;} 使用伪元素设置padding的方式来实现正方形(也就是本次使用的方式) 实现一个正方形 1 .
背景: 随着微信小程序开始公测,我司也拿到了AppID,所以开始了微信小程序的趟坑之旅。 由于现在网上已经有很多的《微信小程序从精通到入门》的教程了,所以就不再重复那些,只是讲一下,在开发的过程中,如何使用本地(开发环境)的接口。
背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅。 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的开发周期都不太长,上半年比较激烈,基本一个月要上个三四个的活动。
背景: 闲来无事,翻了下co的源码来看,源码短小精悍,算上注释,一共240行左右; 决定写一篇博客来记录下学习的心得。 TJ大神的co:https://github.com/tj/co 作用: co通过将Generator函数拆成一个Promise将码...
准备工作 参考资料: FileReader(用来获取上传文件的数据) (用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用来将一个Blog对象转换为Base64格式资源的API) 前言: 因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路。
first: 获取当前对象集合中的第一个dom元素。 $("div").first(); // 返回第一个div对象(zepto对象) //相当于$("div").eq(0); 与之对应的是last last: 获取当前对象集合中的最后一个dom元素。
继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. 方法的实现就是循环调用方法对象.
今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents", "empty", "eq", "filter", "find", "first", "get", "has", "last", "not", "parent", "parents", "siblings"] children: 获取对象的所有匹配的直接子元素.
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("").
今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到外,从主到从,从前到后的顺序来说这八个方法.
zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说明,下边介绍的方法都会返回zepto对象; add(): 支持一到二个参数,第一个为选择器,...
接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复); $.grep(): 作用与Array.filter类似(其实就是调用的filter方法- -) 通过传入两个参数,第一个为类数组的对象,第二个为用来执行判断的函数; var array = [1,2,3,4,5]; var even = $.
新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): 方法接收一个字符串,将连字符格式的字符串转为驼峰格式的字符串: $.
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用...
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 1...