网页调试控制台注入jQuery

最近调试一个React写的网站，想在控制台进行DOM操作。虽然目前浏览器已经原生支持了querySlector，但还是不如使用jQuery方便，由于项目本身并未引入jQuery，在控制台中调试还遇到了一点困难。方法总比困难多，找了一个办法在控制台成功注入了jQuery。 注入方法 var script = document.createElement("script") script.type = "text/javascript" script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" document.body.appendChild(script) 其实就是给网页动态加了一个引用jQuery的script标签。 改进版本 上面的方法，如果遇到网络慢的情况下，就无法确切的知道脚本有没有加载成功。解决这个问题一是可以换一个国内CDN的地址，另一种方法就是在脚本加载完成后输出一个信息，也就是监测onload方法。如下 ： var script = document.createElement("script") script.type = "text/javascript" script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" script.onload = function(){console.log("jQuery is ready!")} document.body.appendChild(script) EOF

Error: write after end的解决方案

最近在看之前的大神写的一个项目，出现了 Error: write after end 的报错信息，导致项目始终跑不起来。开始以为是我网络的问题，又是加VPN，又是挂代理，后来发现并没有用，还是install不上，后来查了一下，发现与npm版本有关。总结了下面几个解决方案。 安装特定版本npm 使用如下命令 npm install npm@4 -g 其中，@ 后接的是npm的版本。这种方法也可用于npm的降级。 切换node版本 通常这种项目是使用某一版本的node及其带的npm开发的，所以只要切换相应的node版本就可以了。笔者推荐使用nvm，运行如下命令 nvm install 6.14 nvm use 6.14 就可以了，如果要设置永久的node版本，使用如下命令 nvm alias default 8.1.0 结语 npm 这个快速发展的项目还是有的太多的不完善和不方便。虽然目前有了类似 yarn 的解决方案，但还是需要一个过程。

使用jquery.simple-scroll-follow实现滚动跟随

在开发麻辣GIS的时候需要实现一个滚动跟随的效果，写得自己脱了一层皮，各种计算，不过好歹实现了。最近把个人博客也想加上这个效果，不想再重复造一次轮子。于是发现了这个：sutara79/jquery.simple-scroll-follow 尝试使用了一个发现还不错，比自己重新写一次要好得多。不过有些效果还是自己手动调教。 Demo 本站右侧的广告就是了，但触底的效果还是有点问题，等我搞定了再来总结一下。

浅说JavaScript之Event Loop（上）

Event Loop 也叫事件循环，是 JavaScript 中的基础概念，听起来蛮唬人，查了一些资料，斗胆用大白话来说说这个东西。PS：仅限浏览器的讨论。 为什么会有 Event Loop 这一切还要从 JavaScript 的诞生说起，因为造它的用途简单，就是来浏览器“谈谈心”。谈心嘛，套路什么的不用太深，给你一个单线程的脑子就够了。于是乎，这“一根筋”的 JavaScript 就来到了人间，虽然这个呆头呆脑的家伙后来上了一件叫 “Worker” 的装备，也开始学会了城里人的套路，但它总归是村里出来的（web worker本身限制诸多，有空再叨），再多的套路也没变了它“一根筋”的本质。 虽然它“一根筋”，但它不傻。不管工作多么忙碌，人家照样张弛有度。举例来说，就像衣服放洗衣机了，它才不会在那等着45分钟衣服洗完去晒，而是继续扫地、打麻将…等听到洗衣机洗完响了，再去收。它的这个本事就叫“非阻塞”，而让它能有这个本事的，就是今天的主角——Event Loop。 Event Loop 的流程 说起 Event Loop 的流程，要先看这张来自 Philip Roberts 的图。 基本的过程就先从左边看起，JavaScript 主线程运行的过程中产生了 堆（heap） 和 栈（stack），栈中的代码顺序执行，当遇到“拦路虎（异步）”操作的时候，就把这“锅”扔给浏览器老大哥，并对它说“大哥，这事我不好搞，你帮搞定吧。对了，搞定完了，和我弟（任务队列/task queue）说一声啊。”。然后继续栈中的代码跳过这，继续往下走，再遇到（比如DOM操作，AJAX请求）再找老大哥。。。 当栈中的活都干完了，“哎？大哥帮我把事处理的怎样了？找我弟问问去。” 老弟（任务队列）给了一个列表：二哥，这些活（回调），还要你干。 于是，把任务队列的活再接着干，直到没活可干，就可以休息了。 这就是上面图的流程，所以同步总要比异步的结果先出来。比如： setTimeout(function(){ console.log('2') }, 0) console.log('1') console.log('3') 结果： 1 3 2 老弟的账本（任务队列的秘密） 既然 JavaScript 这么信任小弟，那小弟做事也不能马虎，对浏览器老大哥也是言听计从。可老弟也是一个有原则的人。当浏览器老大哥给来一堆任务的时候，哪个在前，哪个在后呢？ 老弟内心也门清，他把这些任务分为了2类，当官的（micro task）和老百姓（macro task）。任务来了，他就先看看身份，然后把他们放到不同的队伍中去（干部的纯洁性嘛）。于是当大任务（好处）来临时，干部优先嘛，先处理micro task，再处理macro task。 那何人可为官？ new Promise() new MutaionObserver() 老百姓是谁？ setInterval() setTimeout() 所以下面的代码： setTimeout(function () { console.log(1); }); new Promise(function(resolve,reject){ console. 继续阅读

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上离线有问题。。。还在找原因。