yleo77
yleo77
## 概述 自从习惯了 Chrome 作为日常浏览器之后，在开发过程中也一直在使用 Chrome 的 Devtool 作为调试工具，发现了其中很多好用的地方，这篇文章对这些功能以面板维度为区分做一个回顾和引述。 ## Elements面板 有时候我们需要查看某一个特定元素绑定的事件，在这个面板可以直接查看到（或者借助 Command Line API: getEventListener），选择 Elements 面板右侧的 _Event Listeners_，这里会显示出所有可以发生在这个元素的事件（捕获和冒泡），但是这往往不是大多数场景下我们想要的，大部分场景想要的是查看自身绑定的事件，也是可以做到的，只需要在最右侧下拉中选择 _Selected Node Only_ 的选项就可以了，如图。  因为浏览器里的编程大多数是和 DOM 紧密结合在一起的，JS 中也往往会存在一些改变 DOM...
- [背景](#sec-1) - [上手篇](#sec-2) - [环境配置](#sec-2-1) - [iOS 配置](#sec-2-1-1) - [Android 配置](#sec-2-1-2) - [开发](#sec-2-2) - [第一步 最基本的标签使用](#sec-2-2-1) - [第二步 增加场景切换功能](#sec-2-2-2) - [第三步 通过网络请求获取真实数据](#sec-2-2-3) - [调试](#sec-2-3) - [默认的调试功能](#sec-2-3-1) - [组件树的调试](#sec-2-3-2) -...
这是一篇简单的介绍 Service Worker 以及如何使用的文章，这个东西也不复杂。主要分**背景**，**为什么它会出现** ，**如何使用** 以及**总结** 四部分。 ## 背景 当大家谈论 web 应用的时候，潜在里都清楚它有一个受限点：当没有网的时候，所有网站或应用打开都会出现「网页无法加载」或类似的文案提示，web 的这一特点，自它的诞生，一直持续到现在。 而现在，Service worker 的出现，正是为了解决这一天然缺陷，或者更准确得说叫做突破这一限制，使得 web 应用也能够如同 Native APP 一样，即使离线，页面也不会出现无法加载的局面。 ## 为什么它会出现 源于现在绝大多数的 web HTML5 应用都是严重依赖于网络，没有网络 HTML5 便会完全瘫痪。而借助于 service...
## Why? 康威定律中提到一点, 设计系统的组织产生的设计和架构等价于组织间的沟通结构. 类比得说, 一个有章可循的组织所产生的代码也应当是可读性良好的, 反之也成立. 其次, 无规则不成方圆. 同样在一个组织中, 无规范无法成就一份便于团队共享, 交流的代码, 所以有了这篇文档. 这份文档的目的, 并不在于将前端开发中的方方面面都有所提及, 而是会有所侧重, 同时也包含一些最佳化实践, 未来也会不断更新. 另外, 老生常态的一些规则不会从该文中出现或者只是简单略过. 包含四部分: **常规性**, **HTML**, **CSS**及**Javascript 相关**, **Git 相关**. ## 常规性 *...
## 概述 今天，前端的重要性是不容置疑的。但是这个职位的重要性，在十多年前，却并不如今天这般肩负产品成败的使命，甚至不存在这样的分工。这篇文章简要回顾了这十多年的前端变迁，以及今天的web开发前端为什么愈来愈重要。此外，也会当前非常流行的四大前端框架做一简单对比，帮助我们更好得针对未来项目做出更合适的技术选型。  ## 前端演进 谈到前端的发展及重要性的，不可脱离三大因素： - 互联网对人们生活影响力的不断深入。 - 硬件性能的提升，接入设备的改变。 - 浏览器厂商的日益俱进。 二和三可能做技术的人们都会有所了解，为什么第一点**互联网对人们生活影响力的不断深入** 也会影响**前端** 的发展？这里谈谈我的理解，互联网在不断入侵及深入普通人的生活所带来的情况是，从技术的角度来看这个问题是，用户体验的地位在不断被强调，产品的易用性愈来愈重要（尤其是在同类型产品的竞争中），界面的简洁，美观，交互是否能够对用户产生持续性吸引，再具体一些，产品性能表现如何，页面在用户交互的感官体验中是否良好，能够带给用户轻松愉悦的使用感受，等等，这些都交叉性得指向了一个技术岗位： **前端**。 ### 被忽视的时代 大约在90年代至2000年初的时间轴里，可以称为早期的web开发，是不分前后端的，HTML 片段大多由 Server 端生成，直接渲染到浏览中，甚至包括了表现，就是 `table` 满天飞的那个年代。Javascript 在其中也只是充当了玩具的角色，充其量做个表单校验，“这个脚本语言还能干点什么呢？估计也就这点用途吧”。这是那个时代开发者对 Javascript 的印象。整个 web 开发可能也没有应用起...
## 简介 Koa 是一个非常小巧且轻量级的由 Node.js 完成的 web框架，底层借助于 co 解决了繁琐的回调嵌套，充分发挥了 Generator 的优势。目前该 team 已经尝试将 async/await 引入其中，不过还在 Alpha 阶段。 关于 Koa，还有一个关键字：Middleware。 这篇文章主要是在边看 Koa 源码边做的一个整理笔记。 ## 如何使用 先通过代码看一段简单示例。 ``` javascript var koa =...
## 聊聊跨域 这篇文章是 2013 年在搜狐视频时为分享的一个 Topic 写的，主要从两个场景：获取跨域服务器相关资源和纯客户端页面和页面之间的跨域信息获取 以及在这两个场景下都有哪些技术方案可以选择。 因为 2014 年底和近期又遇到过两次和跨域有关的 Case，而且还是同一个， 所以就把这个 Case 当做一个知识点补充进来。 不存在完美的方案，只有适合特定场景的方案。 ### 什么是跨域？ 简单说就是因为 javascript 的同源策略限制，当域名不同时，安全考虑则禁止了彼此间的一个通信。 ### 什么情况下会造成跨域？ 协议不同，端口不同，子域不同，都会造成跨域 ### 什么情况下需要跨域？ 前端交互开发中，往往需要往不同于当前域名的后端服务器获取/提交一些数据，或者是不同 window 之间的一个通信，但因为同源限制，导致 javascript...
去年在看 Ruby on Rails 时非常喜欢它的简洁高效，后来也迷上了 Ruby 这门语言，感觉它就像一个魔法盒子一样，总是能看到很多得意于 Ruby 这门语言的自身大量特性而独有的一些解决问题的方式，所谓处处都是 Magic。 最近找来「Ruby 元编程」这本书，边看边做一些 Note 当做备忘。 元编程是什么，直白一点得说：就是编写能写代码的代码。程序世界的语言解释为 > 编写在运行时操纵语言构件的代码。 ## 第一章 对象模型 Ruby 的 `class` 关键字和别的编程语言有个很大的区别点，它更像是一个作用域操作符而不是类型声明语句，核心作用是把你带到类的上下文中，让你可以在类中定义方法，通俗点就是当类不存在时定义类，当类存在时重新打开（不会覆盖原有的定义），并在原有类的基础上进行修改，这个也叫 **打开类技术(Open Class)**。 #### 对象有什么 - 实例变量...
## 介绍 Grunt 是一款基于 Nodejs 的任务工具，并不如大多数文章介绍的只局限于前端自动化工具，只是大多数情况下应用于前端的重复性任务。大多数场景下，Nodejs 可以干什么，它也就可以干什么。 这篇文章从 **介绍**，**新手入门**，**核心源码分析**，**进阶 - Grunt 的卡顿缘何引起？** 以及 **其他** 这五个节组成，最后一节是填坑。 ## 新手入门 ### 准备 选择一个目录，新建项目目录，并进入 ``` bash $ mkdir grunt-tutorial && cd grunt-tutorial ``` 创建...