NodeJS 将 JSON 转换成 EXCEL（CSV）

最近要使用LeanCloud的数据，导出来是一个JSON格式的文件，妹子根本没办法打开处理，于是使用 Node 将这个JSON文件转换成CSV格式的文件，让她能在EXCEL中打开使用。 方法 用到了2个库，一个是 zemirco/json2csv，另外一个就是系统自带的 fs 模块了。json2csv 这个库非常强大，可以在命令行及Javascript module方式使用，具体使用参考github地址即可。 代码 var fs = require('fs'); const Json2csvParser = require('json2csv').Parser; const fields = ['car', 'price', 'color']; const myCars = [ { "car": "Audi", "price": 40000, "color": "blue" }, { "car": "BMW", "price": 35000, "color": "black" }, { "car": "Porsche", "price": 60000, "color": "green" } ]; const json2csvParser = new Json2csvParser({ fields }); const csv = json2csvParser.parse(myCars); console.log(csv); fs.writeFile("./out.csv", csv, function(err) { if(err) { return console. 继续阅读

JavaScript 封装一个显眼的 console

开发时候经常会打印很多log，开始的时候还好，可后来就会打印一堆log出来，有时候调试为了找自己的log就会使用如下的句式： console.log('=============================>', a) 有没有办法让log更显眼一点？有。官方文档中说可以设置一个 %c 来指定输出样式。 那接下来就好办了 封装一个函数 最先想到封装一个函数。 function lc(tips, v, style) { if (!style) { style = 'background: red;color:white;font-size: 16px;'; } try { console.log('%c ' + (tips || v) + '=====>', style, v); } catch(e) { console.log('loger==>', e) } } module.exports = { lc: lc } 改原型 但这样调用每次都要引用这个文件，可不可以不引用？直接改 console 的 __proto__ 属性 try { if (typeof console.__proto__.lc !== 'function') { console.__proto__.lc = function(tips, v, style) { if (!style) { style = 'background: red;color:white;font-size: 16px;'; } console. 继续阅读

PWA浅尝辄止

前段时间看到苹果官方将对PWA提供支持，之前看到沪江也已经开始了PWA的尝试，于是尝试自学了一把，写点心得。 教程 Your First Progressive Web App 几点心得 PWA不算一种技术标准，算是一种理念，目的是为了给web应用提供接近APP的用户体验。大约有几个特性（我理解的，不保证全）： 可添加HOME访问图标，支持全屏运行 离线访问 消息推送 所以，PWA是一系列技术的合集。添加图标这个靠浏览器及系统实现，离线访问依赖了Service Worker + CacheStorage API + Fetch API，消息推送Chrome支持GCM（这玩意国内肯定不好用。。。） 虽然看起来依赖的东西很多都不完备支持（实际上也是），但因为是 Progressive，不支持也没关系，也不影响原来的Web APP运行，就是没了上述的特性而已。总而言之，PWA这东西加上之后，支持的可以提升用户体验，不支持的就当什么都没发生。 示例 模仿官方的示例，我也自己写了一个。只实践了离线访问的特性。 PWA测试页面 总体流程如下： 正常加载页面 检测支持PWA？ 继续3 : 啥也不做。 缓存请求及数据（图片等资源） 再加载页面资源直接从缓存加载，请求的接口数据先从缓存展示，等有返回再更新。 问题 强制需要https 测试离线页面竟然在firfox下完美，在chrome上离线有问题。。。还在找原因。

《JavaScript高级程序设计》读书笔记：classList 与 readyState

继续学习《JavaScript高级程序设计》，体会原生 JavaScript 之美。今天记录2个有用的属性。 1.classList HTML5 对DOM操作 class 做了优化，增加了 classList 属性，从此再也不用对 className 做字符串操作了。它有4个方法 add // 增加一条属性（已经存在就不添加） contains // 判断属性是否存在 remove // 删除属性 toggle // 如果存在就删除，不存在就添加。这个好玩～ 2.readyState 曾几何时，使用 onload 方法来判断页面有没有加载完毕，现在有了 document.readyState , 一切就简单了。 其中书中的内容不完整（P292），这个属性目前已经有了3个值（2018-02-24） loading //页面还在加载 interactive //文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。 complete // 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。 之前使用 m-React 的时候使用的是 onload 方法，如果下次有机会再来测试一波 readyState

html == document.childNodes[0] ? 不是

《JavaScript高级程序设计》（第三版）中发现了一个问题，在P254中有这么一句 html === document.childNodes[0] 作者当时写书的时候，document.childNodes[0] 返回的是html元素，也就是说返回 true， 但我在读的时候试验了一下，发现是不对的。 在Chrome v63 及 Firfox v58.0 中document.childNodes[0]均不是html元素，而是 documentType。

document.implementation.hasFeature总是返回true

在读《JavaScript高级程序设计》（第三版）中发现了document.implementation.hasFeature 方法，这个方法功能很强大，可以检测到浏览器是否支持某些功能。（P259） 于是我赶紧使用了一下，发现： document.implementation.hasFeature('Range',"40000000.0") 输出 true why MDN上说，这个方法已经废弃了。DOMImplementation.hasFeature() - Web APIs | MDN 所以不要用了。 so，读书要趁早。

通过ua判断微信浏览器打开

最近做了一个小需求，需要判断网页是不是在微信内打开的，打印了一下微信浏览器的UA，写了一个简单的小函数。 function checkWechatBrowser () { var userAgent = navigator.userAgent.toLowerCase(); return (/MicroMessenger/ig).test(userAgent); }; 暂时可用。 PHP 版本 if( !preg_match('/micromessenger/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) { return true; }