Bootstrap 4 中 hidden-* 和 visible-* 类都去哪了？

之前使用过一个CMS开发过后台系统，使用了 Bootstrap3，里面有好个非常好用的css类 hidden-* 和 visible-*，可以方便地实现响应式。最近帮朋友改一个基于 Bootstrap 4 开发的系统，却发现找不到这两个好用的类啦。后来仔细看了一下，发现在 Bootstrap 4 中，这2个类前缀已经被移除了。 取而代之的是新的控制 display 的方法，见这里：Display property · Bootstrap 几个示例 下面的示例来自 Stackoverflow Show/hide for breakpoint and down: hidden-xs-down (hidden-xs) = d-none d-sm-block hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block hidden-lg-down = d-none d-xl-block hidden-xl-down (n/a 3.x) = d-none(same as hidden) Show/hide for breakpoint and up: hidden-xs-up = d-none (same as hidden) hidden-sm-up = d-sm-none hidden-md-up = d-md-none hidden-lg-up = d-lg-none hidden-xl-up (n/a 3. 继续阅读

网页调试控制台注入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. 继续阅读

text-overflow: ellipsis 无效的解决方案

一个简单的需求，要展示用户的微信名，有的人喜欢把微信名起的很长，导致一个框框显示不下，于是用到了 text-overflow 的属性。代码如下： width: 90%; margin: 0 auto; overflow: hidden; font-size: 14px; color: #fff; text-align: center; text-overflow: ellipsis; 可效果不是我想要的 解决方案 可以看出问题出在换行，加一句white-space: nowrap;即可。

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. 继续阅读