其实这是可以做到的，今天就分享下如何优雅的调试线上报错： 首先，我们准备一段 JS 代码： 这是我随便找的一段 JS 代码，里面抛了一个错误。...但现在代码是被压缩过的，看不出啥来： 怎么能直接定位到抛异常的源码呢？...这时候就要用到 sourcemap 了，它就是用于把编译后的源码映射回源码的： 首先要生成 sourcemap，这个配置下 webpack 的 devtool 为 hidden-source-map...关联 sourcemap 需要在文件末尾加上 //# sourceMappingURL=xxx.js.map 的代码。 但现在这个文件是线上的，不能直接改本地文件。...： 接下来就可以直接调试源码了，可以通过作用域、调用栈等信息来定位报错原因： 这样我们就完成了直接本地调试线上报错代码对应的源码！
[堆栈工具实现原理] 一步步来说的话： 拿到原始堆栈字符串，使用 error-stack-parser 解析为堆栈帧，每个堆栈帧包含三个最重要的字段： url - 源码的 URL 地址 line - 堆栈位置行号...col - 堆栈位置列号 对于 url，我们可以用于加载源码内容，得到 source source 使用 UglifyJs 反向美化成多行的代码 prettysource，并且同时生成 sourcemap...下面给出 SourceMap 的使用源码： var code = result.code; var consumer = result.sourceMapConsumer; var position...prettyLineNumber: position.line, prettyColumnNumber: position.column + 1 } }, sourceOrigin); 完整源码有兴趣的读者也可以下下来把玩把玩...： js-loader.html.zip 源码只包含堆栈解析的实现，UI 的实现不在本文的讨论之内，用 React 随便画一画就好了。
前言 Mybatis是一款半自动的ORM框架，是目前国内Java web开发的主流ORM框架，因此作为一名开发者非常有必要掌握其实现原理，才能更好的解决我们开发中遇到的问题；同时，Mybatis的架构和源码也是很优雅的...（PS：本系列文章基于3.5.0版本分析） 精良的Mybatis骨架 宏观设计 Mybatsi的源码相较于Spring源码无论是架构还是实现都简单了很多，它所有的代码都在一个工程里面，在这个工程下分了很多包...基础支撑 在了解了Mybatis的宏观架构设计后，下面就是对源码的详细分析，首先先来看几个重点的基础支撑模块： 日志 数据源 缓存 反射 日志 日志的加载 Mybatis本身是没有实现日志功能的，而是引入第三方日志...但Mybatis对缓存做了大量的扩展，提供了防止缓存击穿、缓存清空策略、序列化、定时清空、日志等功能，设计非常优雅，所以此处主要领略这一模块的设计思想。先来看看包的结构： ?...总结 本篇讲解了Mybatis最核心的四大模块，可以看到使用了大量的设计模式使得代码优雅简洁，可读性高，同时便于扩展，这也是我们在做项目时首先需要考虑的，代码都是给人读的，如何降低阅读代码的成本，提高代码的质量
本文是Netty文集中“Netty 源码解析”系列的文章。主要对Netty的重要流程以及类进行源码解析，以使得我们更好的去使用Netty。...Netty是一个非常优秀的网络框架，对其源码解读的过程也是不断学习的过程。...Netty的优雅关闭操作 Netty是通过『eventLoopGroup.shutdownGracefully()』操作来实现它的优雅关闭的。...源码解析 // AbstractEventExecutorGroup#shutdownGracefully public Future<?...然后启动的线程就会执行我们通过executor.execute方法提交上来的这个任务(具体的这块说明请见Netty 源码解析 ——— 服务端启动流程 (上))。
调试 React 源码还有优雅和不优雅之分？ 别着急，我们先来听个故事： 东东是一名前端工程师，主要用 React 技术栈，用了多年之后想深入一下，所以最近开始看 React 源码。...这样调试了一段时间之后，他有了一些困惑： 这样调试是可以的，但是总感觉和源码有段距离，因为调试的是 react-dom.development.js 而源码里这些逻辑是分散在不同的包里的，所以就算搞懂了逻辑...但这不是我们最主要的目的，现在调试的依然是 react-dom.development.js： 那怎么调试 react 最初的源码呢？...在新的 workspace 里 debug，你就会发现，路径映射对了： 点击调用栈能直接打开 react 源码项目的对应文件了！ 至此，我们就能优雅的调试 React 最初的源码了。...毫不夸张地说，这应该是全网最优雅的 React 源码调试方式了。
Contents 1 如何优雅地在JS中使用枚举 1.1 为什么使用枚举 1.2 如何解释 1.3 关于 如何优雅地在JS中使用枚举 为什么使用枚举 去魔法数字 枚举语义化 定义一体化：枚举值和枚举描述写在了一起...p>当前状态：{STATUS.getDescFromValue(status)} 也可用通过枚举名称获取描述：{STATUS.getDesc('AUDITING')} 关于 由于js...没有枚举这一概念，借助JAVA思想，我们编写创建枚举方法 本文首发于:如何在JS中使用枚举定义
Node.js 进程启动时，首先执行 c / c++ 代码，然后 c / c++ 加载并执行 lib/internal/bootstrap_node.js 并给予一个 process 参数( 运行上下文...) // lib/internal/bootstrap_node.js 概览 // Hello, and welcome to hacking node.js!...exports: 默认值是 {} loaded / loading: NativeModule 状态 _cache: 简单的模块缓存 _source: 模块源码资源 require():...()，源码如下: // bootstrap main module....至此 启动-js部分 已经全部完成，后续模块加载部分，见 Node.js源码解析-require背后 End 启动只是 Node.js 源码的一小部分，除此之外还有大量的内置模块和 c / c++ 源码
在Google上搜索时，我发现了impress.js的存在，与我的设想不谋而合，于是乎……不再自己造轮子，又花了两天时间熟悉使用impress.js来设计幻灯片，效果完全超越了我的预期。 ...impress.js简单来说仅仅是实现了幻灯片的转场特效的框架，虽说将单页限制在框架之内，但所有单页还是需要自己用代码设计。...花了一天探索了下impress.js源码，其实并不复杂，个人感觉收获颇丰，以下阐述我的收获。.../impress.js"> impress().init(); 源码中的init()函数，分析写在注释中 var init = function(...源码简洁明了，并不复杂，作者的本意也是构建一个基础的框架，让使用者自由发挥，正合吾意！
要想构建源码，大家都知道第一步干什么？github走起。...源码构建 上面环境准备，大家会存在一个疑问，构建Mybatis源码为什么要下载parent项目呢？...2.2mybatis源码 parent依赖 上面我们已经提到好几次要依赖parent项目。...如何大家使用mvn clear install命令构建源码，也是会失败的，因为mybatis依赖的parent项目构建失败，wagon-ssh 依赖失败。但是不影响我们跟踪源码。...构建失败不影响大家跟踪源码要用事实证明，小编简单在编码里写了一个demo，运行一下证明成功运行。 ? 后面小编会专门写一篇如何demo构建跟踪源码。
通过上一篇文章的铺垫，我们可以猜测，Express其实也没有什么黑魔法，也仅仅是原生API的封装，主要是用来提供更好的扩展性，使用起来更方便，代码更优雅。...http://localhost:${port}`); }); 复制代码 可以看到Express的路由可以直接用app.get这种方法来处理，比我们之前在http.createServer里面写一堆if优雅多了...手写源码 手写源码才是本文的重点，前面的不过是铺垫，本文手写的目标就是自己写一个express来替换前面用到的express api，其实就是源码解析。...express.js对应的源码看这里：github.com/expressjs/e… app.listen 上面说了，express.js只是一个空壳，真正的app在application.js里面，所以...[method] 所以我们来看下Router这个类，下面的代码是从源码中简化出来的： // router/index.js var setPrototypeOf = require('setprototypeof
watch.js 源码解读 用麻雀虽小五脏俱全来描述Watch.js比较合适。“观察者”模式是我们在开发的时候经常需要用到的。...使用Watch.js那么我们就可以实现在“每当对象属性改变的时候，执行你的函数”。...虽然有很多其他的库可以实现相同的功能，但是Watch.js却可以不改变你平时书写代码的方式，并且实现属性改变的监听功能。...”修改的时候“观察者”函数会被调用 ex1.attr1 = "other value";` [try demo](http://jsfiddle.net/NbJuh/17/) Watch.js...总结 抛开watch.js的bug不谈，它还是有很多可圈可点的地方。
那么hashmap是如何高效计算大于等于一个数的最小2的幂次方数的呢，源码如下： static final int tableSizeFor(int cap) { int n = cap...源码如下： static final int hash(Object key) { int h; return (key == null) ?...0 : (h = key.hashCode()) ^ (h >>> 16); } 从源码中可以看到，最终的哈希值是将原哈希码和原哈希码右移16位得到的值进行异或运算的结果。...和jdk1.7中不同的是，jdk1.8中多转存进行了优化，可以不再需要重新计算bucket下标，其实现源码如下： ?...5、一款基于 Spring Boot 的现代化社区（论坛/问答/社交网络/博客） 更多项目源码 1、推荐两个项目！
第二篇文章是看了Express的基本用法，更主要的是看了下他的源码：手写Express.js源码 Express的源码还是比较复杂的，自带了路由处理和静态资源支持等等功能，功能比较全面。...从上面两个例子的代码来看，Koa跟Express有几个明显的区别： ctx替代了req和res 可以使用JS的新API了，比如async和await 手写源码 手写源码前我们看看用到了哪些API，这些就是我们手写的目标...lib/application.js这个文件就是我们经常用的Koa类，虽然我们经常叫他Koa类，但是在源码里面这个类叫做Application。...app.createContext对应的官方源码看这里：github.com/koajs/koa/b… context.js 上面的this.context其实就是来自context.js，所以我们先在...Express源码可以看我之前这篇文章：手写Express.js源码 Koa的思路看起来更清晰，Koa本身的库只是一个内核，只有中间件功能，来的请求会依次经过每一个中间件，然后再出来返回给请求者，这就是大家经常听说的
在看 jQuery 源码时，发现了这段注释： //源码5235行 /* * Helper functions for managing events -- not part of the public...Edwards' addEvent library for many of the ideas. */ jQuery.event = { } Dean Edwards 的 addEvent.js...(http://dean.edwards.name/weblog/2005/10/add-event/)库为 jQuery 的事件绑定提供了很多想法，我们就来看下 2005 年的 addEvent.js...console.log(a,'a55') //{0:'111'} b 改变属性，a 也会改变，因为 b 与 a 指向同一地址（b=a） 一、addEvent() 作用： 为目标元素绑定事件（如 click） 源码...最后： 完整代码请看https://github.com/AttackXiaoJinJin/jQueryExplain/blob/master/addEvent.js.html ----
getLifecycleProcessor().stop(); // 2、触发ContextStoppedEvent事件 publishEvent(new ContextStoppedEvent(this));} 查看源码...，且eureka client相关的定时线程也都停止了，不会再被定时线程注册上线，所以可以在sleep一段时间，待服务实例下线被像Zuul这种Eureka Client刷新到，再停止微服务，就可以做到优雅下线...端点可以更新服务实例状态为 OUT_OF_SERVICE，再经过一段Server端、Client端缓存的刷新，使得服务不会再被调用，此时再通过/shutdown端点 或 暴利的kill -9 停止服务进程，可以达到优雅下线的效果...不过在比较规范化的公司中，也是不错的选择 var first_sceen__time = (+new Date());if ("" == 1 && document.getElementById('js_content...')) { document.getElementById('js_content').addEventListener("selectstart",function(e){ e.preventDefault
如何优雅的使用线程池以及源码剖析 背景 今天是10.24号，天气晴，你正在摸鱼，突然间接到一个需求，由于系统升级，说要同步数据，方案就是把老系统需要同步的数据（订单）发送到MQ中，新系统再去拉取这个MQ...源码分析 ”太棒了！这样我就可以改造一个属于我自己的线程池了！不过我还有一个问题，这个线程池的原理是啥啊？为什么可以做到线程复用？为什么重写那三个方法就可以达到这样的效果？...负数左移 首先，我们要知道，负数在计算机中是以其正值的补码形式表示 原码：负数的绝对值 反码：对源码取反 补码：反码+1 回到我们刚才说的：-1 << 29 ?...submit方法和execute方法有什么区别等等 小调研 大家是喜欢直接讲源码的呢？还是喜欢有开头这种场景带入的类型的呢？...大家要是对后半段源码感兴趣的话 立个flag，这篇文章点赞破10个，小杰就继续把这篇线程池文章中没讲到的源码加班加点赶出来！
对，就是看别人写的JS代码。文档嘛，自然是没有的。 之前也有试过看代码，但项目中N多JS文件，每个JS文件上千行，一行一行的看下来，用不了几分钟就完全晕掉了。...于是，这一次，我决定换一个方式读JS源码。 这个项目中有N个JS文件，我把入口的JS文件拿出来先看，然后我把它里面所有的函数名，都用思维导图写出来，就像这样， ?...看小说一行行看就OK，但读源码的重点，不在于要读完并理解每一行JS代码，而在于通过图表和笔记，理解系统的结构和它们之间的关系。...实际上这也是不可能的，每个大项目中上百个JS文件，每个JS文件上千行、几千行代码，这算起来就十万多行了，哪有时间让你慢慢看完。...推广来说，看项目源码，看前端各种构架的源码，它最大的好处就是可以培养自己的对于代码的“层次感”。
把这六个原则的首字母联合起来（两个 L 算做一个）就是 SOLID （solid，稳定的），其代表的含义就是这六个原则结合使用的好处：建立稳定、灵活、健壮的设计...
3.isArguments、isFunction、isString、isNumber、isDate、isRegExp、isError这些方法放到一起讲，因为这些方法的的源码实现都是放到了一个each函数中遍历每一个方法名然后实现的布尔值判定...源码： _.each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error'], function(name) {...需要注意的是js数组和函数是对象，字符串和数字不是。...bb6dc3cabae6651b94f69bbd562ff370/page/2.html https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js.../underscore-1.8.3-analysis.js http://www.css88.com/doc/underscore/#isEmpty http://www.css88.com/doc
Hyperapp 是最近热度颇高的一款迷你 JS 框架，其源码不到 400 行，压缩 gzip 后只有 1kB，却具有相当高的完成度，拿来实现简单的 web 应用也不在话下。...源码解析 回到源码上来，由于 Hyperapp 所有的操作都在 app 函数中完成，下面就来探究一下 app 函数都做了什么。...该函数主流程相当简单，源码总计十来行，先贴在下面，后面慢慢分析： export function app(state, actions, view, container) { var map = [...我们看一下源码： function scheduleRender() { if (!...在研究其源码前，我们先看一下 Hyperapp 对 actions 中的方法制定的规范，当 state 中无嵌套对象时，总结起来大致是以下几条： 必须是一元函数（只接受一个参数） 函数返回值必须是以下几种
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
