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; }

Laravel Cannot use PhpParser Node Scalar String as class name解决方案

在使用 Lavarel 生成项目的时候又出现了问题，报错如下: Cannot use PhpParser Node Scalar String as class name 在网上搜索了一堆，后来发现还是PHP的版本引起来的问题。 问题原因 PHP 7 中将 String 作为了一个保留关键字。这与 PhpParser 这个库冲突了。 解决方案 方法一：升级 PhpParser 的版本 方法二：升级 Lavarel 版本