优秀前端源码解读汇总

Normalize.css 中文文档与源码解读

Normalize-zh.css 是根据对 Normalize.css 的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用。

逐行阅读 Bootstrap 源码

Bootstrap 是我接触前端开发时学习的第一个 CSS 框架,也是第一个完整看完文档的开源项目。在正式和非正式项目中多次使用 Bootstrap v3,也基本了解了 Bootstrap 的优缺点、如何定制 Bootstrap 等“高阶玩法”。

在自学前端开发的两年余时间里,裸写 CSS 代码时总能遇到一些没有见过的“古怪” CSS 语句和样式,而在使用 Bootstrap 时并不会出现此类问题,遂决定阅读 Bootstrap 项目中 CSS 部分的源码,看看到底是什么在“扰乱”开发者的视线,而 Bootstrap 为开发者提高效率做了哪些有趣的事情。

Underscore.js 源码解读 & 系列文章

阅读一些著名框架类库的源码,就好像和一个个大师对话,你会学到很多。为什么是 Underscore?最主要的原因是 Underscore 简短精悍(约 1.5k 行),封装了 100 多个有用的方法,耦合度低,非常适合逐个方法阅读,适合楼主这样的 JavaScript 初学者。从中,你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ,也可以学到变量类型判断、函数节流&函数去抖等常用的方法,还可以学到很多浏览器兼容的 hack,更可以学到作者的整体设计思路以及 API 设计的原理。

undersercore 源码分析

起初,我分析 underscore 的源码只是想更深入的了解 函数式编程(Functional Programming),但分析结束后,我就觉得单纯的源码注释不足以记录我的收获、理解和感悟,所以我想把这些写下来,我粗略地将写作意图概括如下:

函数式编程近些年非常火爆,诸如 haskwell 这样的纯函数式编程语言获得了非常高的社区活跃度。JavaScript 支持多范式编程,抛开 underscore 和 lodash 这样的生来为了函数编程的库不谈,诸如 redux 这样的库也大量运用了函数式编程,即便作为一个 react+redux 的业务开发者,想要深入理解的 redux 的实现机制,也不得不学习函数式编程。因此,学习函数式编程,将会成为 JavaScript 开发者的必须。

在阅读 underscore 的源码期间,被作者 jashkenas(他同时也是 backbone 和 coffee 的作者)的功力深深折服,一些功能可能我也能写出,但绝对写不了如此健壮。所以,深入学习 underscore 源码,不仅有助于我们认识函数式编程,也能深化我们对于 JavaScript 中一些基础知识的理解和掌握。

随着 backbone 的衰落和 lodash 的崛起,underscore 的热度已经不及当年,但是截止这篇文章的开始前的一个月,underscore 仍然有最新的 bug 修复,可见作者 jashkenas 仍然没有放弃 underscore 的维护。所以现在分析 underscore 的源码仍然不显得过时。相较于 lodash,underscore 的源码更加短小,也不太涉及 JavaScript 中的一些奇淫巧技,所以,分析 underscore 更加适合 JavaScript 开发者的进阶。在完成了 underscore 的源码分析后,希望我自己有时间,也希望读者有意愿再去分析 lodash 的源码,后者在性能和功能上都已经超越了 underscore,并且长时间霸占了 npm 了最热 package 的位置。

jQuery- v1.10.2 源码解读

jQuery 源码有些方法的实现特别长且繁琐,因为 jQuery 本身作为一个通用性特别强的框架,
一个方法兼容了许多情况,也允许用户传入各种不同的参数,导致内部处理的逻辑十分复杂,
所以当解读一个方法的时候感觉到了明显的困难,尝试着跳出卡壳的那段代码本身,
站在更高的维度去思考这些复杂的逻辑是为了处理或兼容什么,为什么要这样写,一定会有不一样的收获
其次,也是因为这个原因,jQuery 源码存在许多兼容低版本的 HACK 或者逻辑十分晦涩繁琐的代码片段
浏览器兼容这样的大坑极其容易让一个前端工程师不能学到编程的精髓
所以不要太执着于一些边角料,即使兼容性很重要,也应该适度学习理解,适可而止

jQuery v3.1.1 源码解读

我虽然接触 jQuery 很久了,但也只是局限于表面使用的层次,碰到一些问题,找到 jQuery 的解决办法,然后使用。显然,这种做法的弊端就是,无论你怎么学,都只能是个小白。

当我建立这个项目的时候,就表示,我要改变这一切了,做一些人想做,憧憬去做,但从没踏入第一步的事情,学习 jQuery 源码。

到目前为止,jQuery 的贡献者团队共 256 名成员,6000 多条 commits,可想而知,jQuery 是一个多么庞大的项目。jQuery 官方的版本目前是 v3.1.1,已经衍生出 jQueryUI、jQueryMobile 等多个项目。

虽然我在前端爬摸打滚一年多,自认基础不是很好,在没有外界帮助的情况下,直接阅读项目源码太难了,所以在边参考遍实践的过程中写下来这个项目。

更多 jQuery 源码分析

backbone源码解读

backbone是我两年多前入门前端的时候接触到的第一个框架,当初被backbone的强大功能所吸引(当然的确比裸写js要好得多),虽然现在backbone并不算最主流的前端框架了,但是,它里面大量设计模式的灵活运用,以及令人赞叹的处理技巧,还是非常值得学习。个人认为,读懂老牌框架的源代码比会用流行框架的API要有用的多。

另外,backbone的源代码最近也改了许多(特别是针对ES6),所以有些老旧的分析,可能会和现在的源代码有些出入。

vue成长系列文章

从源码的角度看vue的成长历程。

Vuex 源码解析

上一篇文章说的是如何阅读框架源代码,收到了“如果更详细一点就好了”的反馈,不如就以 Vuex 为切入点进行一次实践吧,不矫揉不造作,说走咱就走~~

Vuex框架原理与源码分析

Vuex是一个专为Vue服务,用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state change 的流程来进行,再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理,可以让复杂的组件交互变得简单清晰,同时可在调试模式下进行时光机般的倒退前进操作,查看数据改变过程,使code debug更加方便。

最近在开发的项目中用到了Vuex来管理整体页面状态,遇到了很多问题。决定研究下源码,在答疑解惑之外,能深入学习其实现原理。

vue-router 源码分析-整体流程

在前端框架 React、Vue.js 和 Angular 三足鼎立的年代, Vue.js 因其易用、易学、学习成本低等特点已经成为了广大前端er的新宠, 而其对应的路由 vue-router 也是简单好用, 功能强大. 本文将结合 Vue.js 来分析 vue-router 的整体流程.

从vue-cli源码学习如何写模板

vue-cli 是 vuejs 官方提供的基于 vuejs 的项目脚手架工具, 可以很快的帮助 vuejs 开发者搭建一个 startup 项目, 免去环境配置的繁琐, 开箱即用. 今天就来看下 vue-cli 的实现.

redux 源码解读

redux并不局限于flux与react。redux 自身保持简洁以便适配各种场景,让社区发展出各种 redux-* 中间件或者插件,从而形成它自己的生态系统。

Redux 源码解读(长文慎入)

Redux 的源码非常的精炼,短短几百行代码,去提供了强大的功能。

MobX 核心源码解析

深入 MobX 源码来解析其核心原理以及工作流程。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容

  • 写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架,当初被backbone的强大功能所吸引(当...
    浙大javascript联盟阅读 1,097评论 0 5
  • 1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经...
    MR_LIXP阅读 115,313评论 225 4,486
  • 这是梁超文持续写作第51篇文章,如果我们有过类似的故事和回忆,如果我们拥有青春却怀念青春,如果我们曾这样去爱过一个...
    梁超文阅读 696评论 0 0
  • 跟同事聚餐,让宝宝爸爸去接我,宝宝也一起来了,看到我就开始笑,那种全心全意的信赖让我心里暖暖的。 路上经过...
    文文_53c7阅读 132评论 0 1
  • 原文:看到微友发布2017新词:传销就是兔子专吃窝边草。中国式众筹也是在亲朋好友间开展众筹活动,但和传销却是天壤之...
    阿渡SZ阅读 450评论 0 0