JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。

由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。

之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ， 迫于本屌丝开不起某 Q 会员，就只能收藏到本地，无法在其他的电脑上使用。久而久之收藏的也越来越多了，但是管理就成了问题，每次合适的场景想起一张合适的图，但怎么都找不到了，于是乎，本屌丝打算自己写一个斗图收藏网站。

上面所有的例子，在最新 chrome 上都可以运行。一个个小例子，点了点几个名词。当然也只是 “点” 而已，如果能提供读者深入学习相关知识点的一个 trigger，那么老姚就心满意足了。

程序媛学习手记一则！

之前的三篇介绍了下 bootstrap 的一些常用组件，发现博主对这种扁平化的风格有点着迷了。前两天做一个 excel 导入的功能，前端使用原始的 input type="file"这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然 bootstrap 开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个组件：bootstrap fileinput。在此记录下，就算做个学习笔记，也给需要使用的朋友提供点方便。

做过移动端网页的都知道，在一些高要求的移动网页上解决 Iphone5、6、6p，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。我曾今也尝试了很多办法，也参考了别人加的思路，有的用 js，有的用媒体查询，有的用一些比较新的单位 rm、rem 等等...... 我觉得还是很麻烦，难道就没有一个可以一行代码解决问题的方案吗？经过我各种的尝试之后终于有了，目前阶段还没发现 bug，如果有问题，还请不吝赐教!

推荐HammerSpoon，因为它的窗口管理功能足够强大。而且对开发者很友好，有控制台可以 Debug。语言采用 Lua，不难上手。另外，还有茫茫多的系统 API 可以随意调用。所以说，HammerSpoon 绝不仅仅是一个窗口管理软件

原生 js 的事件绑定方式有几种？想必有很多朋友说 3 种！ 目前，在本人目前的研究中，只有两种半！两种半？还有半种的？且听我道来。

微信 Web 开发者工具只有 window 版本和 mac 版本，如果想要在 Linux 系统下运行微信 Web 开发者工具，需要花费很大周折。

关于轮播组件，那肯定是一搜一大把，实在不行自己写貌似也不难。最近博主在项目中用到一款轮播组件，功能齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，在此推荐给大家，供大家参考。相信有你需要的效果。

这里讲的主要是想谈谈基于 Vue 的一个组件开发。不得不说的一点就是，在实际的 Vue 项目中，页面中每一个小块都是由一个个组件（.vue 文件）组成，经过抽离后，然后再合并一起组成一个页面。由于上家公司我负责多的是可视化这一块的开发，这边我也将带着大家进行一个 Vue 项目中的可视化组件的开发，这里用到的框架将是主流的可视化框架 highcharts。

不少朋友刚上手 Mac，对 macOS 系统提供的功能会很不适应，确实，有些功能隐藏的比较深，多少会影响些效率。我是一个做前端开发的菜鸡，所以这个系列多少也会涉及到一些开发相关的配置，写给有需要的朋友。文中提到的功能，强烈建议大家边看边试，有些东西文字描述起来会很复杂，自己操作一下就明白了，其实都很简单

由于前端是不能直接操作本地文件的，要么通过用户点击选择文件或者拖拽的方式，要么使用 flash 等第三方的控件，但 flash 日渐衰落，所以使用 flash 还是不提倡的。同时 html5 崛起，提供了很多的 api 操控，可以在前端使用原生的 api 实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的。

关于文本框的多值输入，一直是一个比较常见的需求，今天博主推荐一款好用的多值输入组件给大家，不要谢我，请叫我 “红领巾”！

现在打开各大知名网站，你有没有发现地址栏都已经加了个绿色的小锁？是的，这就是 https，这就是 https 的时代。

其实内容来说都是很简单的，本文算是 zepto 的部分源码分析了。其中 break 和 continue 的等价用法还是需要掌握的。至于源码都不是很难的东西，尤其是后面的判断类型的方法，判断是不是 window 和 document 的实现都是经典的实现。

我知道，类似的文章网上一搜一大把。作为一个只用 Mac 搞了不到一年开发的菜鸡，很多功能我也还在摸索中。本文旨在把自己积累的一些小技巧与大家分享，任何疑问、意见、建议，请在下方留言评论

浏览器每收到一段 html 的文本之后，就会把它序列化成一个个的 tokens，依次遍历这些 token，实例化成对应的 html 结点并插入到 DOM 树里面。我将在这一篇介绍第二步 Style 的过程，即 CSS 的处理。

你只看到我的程序，却没有看到背后的代码；你有你的选择 ，我有我的坚持 ；你嘲笑我假期过节不回家陪父母，我可怜你只在家向父母衣食伸手；你可以轻视我的道路，我会证明这是谁的时代！编程是注定孤独的旅行，路上少不了质疑和嘲笑；但那又怎样，哪怕代码千万行，我也要让 bug 无处藏，编就编的漂亮。

鉴于时不时，有同学私信问我（老姚，下同）怎么学前端的问题。这里统一回复一下，如下次再遇到问我此问题同学，就直接把本文链接地址发给你了。

闲的无聊，看到一个段子网站的美女福利还不错，迫于福利加载太慢看的不过瘾，就想用 Nodejs 写个简单爬虫全部爬下来看多好..... 此处省略 5000 字.....

html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。

话说现在很多很多项目需要用到文件上传，自从有了 HTML5 之后，上传就变的超级简单了。HTML5 支持多图片上传，而且支持 ajax 上传！而且支持上传之前图片的预览！而且支持图片拖拽上传！而且还是纯粹利用 file 控件实现！而且代码还超级简单！！！原谅我这个没见过世面的人这么激动 ==，但是说真的，有这么多优点，想不让人称赞都难啊！

老姚谈：JavaScript 中 prototype 的本质系列文章！此系列共有 5 篇文章，带你更深刻的了解 JavaScript 中的 prototype 的本质！希望对大家有用！

撸码的时候听到不喜欢的音乐会不会想马上下一曲，但是又不想切换程序呢。自己利用 HammerSpoon 捯饬的一个实现音乐播放的全局键盘控制的工具。撸码听歌，全局控制。感兴趣的朋友可以先试用一下，提提意见和建议。

分享几种移动适配的方式，希望对大家有用~

什么是代码耦合？代码耦合的表现是改了一点毛发而牵动了全身，或者是想要改点东西，需要在一堆代码里面找半天。由于前端需要组织 js/css/html，耦合的问题可能会更加明显，下面按照耦合的情况分别说明

在上一篇《从 Chrome 源码看浏览器如何构建 DOM 树》介绍了 blink 如何创建一棵 DOM 树，在这一篇将介绍事件机制。
上一篇还有一个地方未提及，那就是在构建完 DOM 之后，浏览器将会触发 DOMContentLoaded 事件，这个事件是在处理 tokens 的时候遇到 EndOfFile 标志符时触发的

这几天下了 Chrome 的源码，安装了一个 debug 版的 Chromium 研究了一下，虽然很多地方都一知半解，但是还是有一点收获，将在这篇文章介绍 DOM 树是如何构建的，看了本文应该可以回答以下问题：

RTFSC 是程序员打怪升级路上避不开的功课，那营造一个舒适的环境来提升上课的体验就很有必要了。比如阅读 AOSP 这种大型源码，用什么姿势来阅读才能丝般顺滑，让 F**king Source Code 也变得不那么可恶呢？

例如笔者就遇到一个奇芭的问题，就是使用 height: calc(100% - 80px) 的时候，在手机 Safari 上面展开某个子菜单时，偶现菜单滑不动的情况。当时就想很可能是在 Safari 在展开菜单时高度算错了，导致 overflow: auto 不管用。所以在展开菜单后再手手动计算和设置 height，然后就解决问题了。

前端开发中或多或少都要对 DOM 进行一些操作，比如我们常用的一些方法：document.getElementById("");document.querySelectorAll("");document.getElementsByClassName();document.createElement()...... 等等一系列的方法, 这些方式是从哪里来的呢？在哪里定义的呢？我们就一起来测试一下。

春节放假前打开知乎整理整理文章，发现 7 个月前开源的知乎专栏文章 LsLoader, 对 AMD 模式和 webpack1 打包的移动端网站技术进行了详解，基本原理是利用对 AMD 语法的分析拆分请求，本地缓存，然后按需 combo 变化的代码。滴

从毕业到现在也工作了一年多了，在这一年多里面，我感觉我是很幸运的，有和谐的团队氛围、哲学的 leader 和开放的环境。在这样的环境中，我的成长不仅仅局限于技术栈的积累，更重要的是收获了一个清晰的发展方向，让自己在前端的道路上看的更远，更清晰。这里主要分享下我在成长道路上一点收获和想法，主要讲述了一些前端领域需要注意的地方，希望可以带给新人一些启发，让他们在前端的道路上走的顺畅点。

当拖动页面或者滚动的时候页面一卡一卡的，看起来不连贯，我们就说页面卡了，这是一种非常不友好的体验，怎么衡量页面卡顿的情况呢？

上次做了前端的 ajax 的上传文件技术，支持单文件，多文件上传，并对文件的格式和大小进行检查和限制。但是上次还有个心结一直没解开，就是本来前端浏览器的文件切割已经好了，但是后台文件重组一直没搞明白和处理好，所以就搁置了。主要也是对自己的代码负责，因为自己本身都没把这个技术搞透彻，外加各种测试都没通过，不想这样打脸。所以这个心结一直憋了好久，做梦都在想。终于功夫不负有心人，这周终于将这个问题干掉了，一个字：爽！！！下面咱们直接干！！

团队项目开发中，常见的版本控制有 svn，git 等。这里我将向大家分享一下 TX 是如何合理利用 Git 进行一个团队的协作开发。

经常在别人家的网页上看到各中好看图形，其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下，网页上有哪些姿势实现这个效果

本文是鄙人工作这几年随手收集整理的一些自认为还不错的资料，成长的道理上需要积累，这么长时间了，是时候放出来分享下了，或许能帮助到你。欢迎点赞，让更多人看到，让福利普照。因为本文以后不会更新，但项目依旧会更新。

用过苹果的大家都知道，苹果公司做了一个虚拟按钮，让页面上的挂件可被拖拽并吸附到屏幕边框处，降低挂件对用户的干扰。该效果如果用 JavaScript 进行实现又该如何实现呢，接下来我将分享给大家。首先上一张效果图

找不到 Mac 上的 Home，End，PageUp？想截图还得打开 QQ？不知道 Mac 如何剪切文件？找不到全屏窗口的按钮？找不到隐藏文件夹？不知道如何向后删除？想少用鼠标，多用键盘？……

找不到 Mac 上的 Home，End，PageUp？想截图还得打开 QQ？不知道 Mac 如何剪切文件？找不到全屏窗口的按钮？找不到隐藏文件夹？不知道如何向后删除？想少用鼠标，多用键盘？……
希望我的这一系列博文能帮到你

快过年了，我妈一个电话打过来叫我给他买火车票，我到 12306 一查，硬座和硬卧基本没有了，高铁又太贵。最后只抢了 3 张无座票，但是我妈说能不能买有座位的啊，我说没有了啊，我妈：你过两天再帮我看看。我：... 为了帮老妈抢到有座的票，后来用了 360 抢票插件，还用了网上的一个别人用 c# 写的客户端来抢票，妈的，用了两三天都没用。最后还是打算自己用 node 写一个，当时我的想法就是写个简单的，能用就行。

bootstrap 风格的时间组件非常多，你可以在 github 上面随便搜索 “datepicker” 关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。

前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。Yslow 是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的 Yslow 23 条优化规则，这 23 条，就够我们玩的了。