2017年05月_浴盆

翻译 jQuery事件绑定原理(2)

jQuery事件jQuery需要处理事件对象不同浏览器的兼容性。event 对象的属性和方法包含了当前事件的状态。在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。event的某些属性只对特定的事件有意义。

2017-05-28 20:05:42 960

翻译 jQuery事件绑定原理(1)

jQuery事件处理机制能帮我们处理那些问题？解决浏览器事件兼容问题可以在一个事件类型上添加多个事件处理函数，可以一次添加多个事件类型的事件处理函数提供了常用事件的便捷方法支持自定义事件扩展了组合事件提供了统一的事件封装、绑定、执行、销毁机制jQuery的事件绑定有多个方法可以调用，以click事件来举例：1. click方法 2. bind方法 3. delegate方法 4. on

2017-05-28 15:56:51 4601

翻译聊聊单页应用

单页应用优势单页应用有几个优势：可以像桌面应用一样渲染，只需要重绘界面上需要变化的部分。可以拥有和桌面一样的响应速度，尽可能把工作数据和处理过程从服务器端转移到客户端，把响应时间缩减至最小。只有数据验证、授权和持久存储必须放在服务器端。可以把它的状态通知给用户，当单页应用需要等待服务器响应的时候，可以动态显示进度条或者繁忙指示器。PjaxPjax是一个优秀的单页应用路由

2017-05-27 19:12:12 960

翻译现代前端技术解析(3)

MVVM数据检测手动触发指令绑定是比较直接的实现方式，主要思路是通过在数据对象上定义get()方法和set()方法，调用时手动触发get()或set()函数来获取、修改数据，改变数据后会主动触发get()和set()函数中View层的重新渲染功能。我们来看一个栗子 input q-value="value" type="text" id="input"> span q-tex

2017-05-17 22:43:04 1112

翻译现代前端技术解析(2)

响应式页面响应式设计师指根据不同设备浏览器尺寸或分辨率来展示不同页面结构层、行为层、表现层内容的设计方式。响应式设计网站目前比较主流的实现方式有两种：一是通过前端或者后端判断useAgent来跳转不同的页面完成不同设备浏览器的适配，也就是维护两个不同的站点进行相应的跳转。二是使用media query媒体查询手段，让页面根据不同设备浏览器自动改变页面的布局和显示，但不做跳转。先看第一种方案。要注

2017-05-14 14:18:21 990

翻译现代前端技术解析(1)

浏览器组成通常我们认为浏览器主要由七部分组成：用户界面、网络、js引擎、渲染引擎、UI后端、js解释器和持久化数据存储。用户界面包括浏览器中可见的地址输入框，浏览器前进返回按钮等功能选项。浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器各个部分通信的核心。浏览器渲染引擎的功能是解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的页面，处理兼容问题时我们常

2017-05-13 17:01:44 1931

翻译聊聊架构(4)

单元测试要认识单元测试，首先要明白什么是单元(Unit)。所谓单元指的是代码调用的最小单位，实际上指的是一个功能块(Function)或者方法(Method)。单元测试是一种白盒测试，必须要对单元的代码细节很清楚才能做的测试。所以单元测试都是由软件工程师来做的。服务代码、管理者代码和存储代码都是不需要写单元测试的，因为这些代码是简单的顺序执行，而且通常有上下文，而单元测试的代码都是简单的顺序执

2017-05-10 22:16:15 888

翻译聊聊架构(3)

什么是软件架构师在现实生活中，具备软件架构师头衔的人，大都是从软件工程师成长出来的，这个出身已经决定了他们的主要关注点是在软件和CS上。而要真正成长为一个架构师，首先需要克服的就是时间困境。为什么软件工程师会对时间有恐惧和压力呢？其原因是他们把按时完成自己的工作当成了自己的最大利益，并且对业务的不了解也会导致他们没有太大的把握。这就要求软件架构师把完成业务的工作当做自己的最大利益，深入到业务中去。随

2017-05-07 14:28:09 1165

翻译聊聊架构(2)

我们接着上一篇聊聊架构(1)来聊软件中的架构。什么是软件软件的历史，可以说是用机器模拟人的历史的进一步发展。软件是提升生产力的一种手段，它让人们能够节省大量的工作时间，有更充足的时间去关注并推进自身的核心生命周期。从冯诺依曼结构开始，程序逻辑开始脱离硬件，采用二进制编码。加上存储，配合输入输出等硬件，一个简化的大脑就出现了。图灵机则是模拟大脑的计算，用数学的方式把计算的过程定义了出来。这就是现在

2017-05-06 17:06:15 1440

翻译聊聊架构(1)

生命周期接触React的同学肯定对生命周期印象深刻，这是相对于组件而言的生命周期。举一个生活栗子，我们在一次购物场景中，从用户进入到商店，进行浏览、询问、购买等活动，到离开商店，也可以看做是一次购买活动的生命周期，这个生命周期的主体是购买活动。一个生命周期里面的活动可以进行拆分，拆分的原则就是形成若干个新的生命周期，每个新的生命周期都有自己的主体，比如上面说到的购物活动，又可以拆分成物品的选购和物品

2017-05-06 15:45:29 2960 1

翻译 webpack热更新原理

开发环境页面热更新早已是主流，常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或弹幕、在线聊天室等，都需要借助热更新功能，才能达到实时的端对端的极致体验。webpack-hot-middlewarewebpack-hot-middleware中间件是webpack的一个plugin，通常结合webpack-dev-middleware一起使用。借助它可以实现浏览器

2017-05-06 13:28:48 14550 1

翻译前端架构设计

前端架构师们认为有多个关键的决策需要在项目启动之初就制定下来，如果等到开发阶段的后期再考虑，不是已经用不上，而是一开始错误的决定已经造成了无法挽回的损失。一旦做出这些决策，我们的任务就是去辅助视觉设计、平台开发、底层结构，使之能最大程度满足需求。如果我们有这样的机会，那么可以创建一个很长的愿望清单：模块化内容。希望尽可能复用小的组件，而不是弄出几十个不同的内容块。全面测试。我们之前经常出现这

2017-05-03 11:56:53 11362

翻译《CSS设计彻底研究》总结

选择器CSS选择器主要包括id、class和标记选择器。复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。交集选择器由连个选择器直接连接构成，其中第一个必须是标记选择器，第二个必须是类别选择器或者id选择器，这两个选择器之间不能有空格。这种方式构成的选择器，将选中同时满足前后定义的元素。并集选择器是多个选择器通过逗号连接而成的。最常用的是通过嵌套的形式，即多个选择器之间以

2017-05-02 14:14:11 1455

翻译 Node.js开发指南

Node.js简介我们可以认为，Node.js 中所谓的 JavaScript 只是 Core JavaScript，或者说是 ECMAScript 的一个实现，不包含 DOM、BOM 或者 Client JavaScript。这是因为 Node.js 不运行在浏览器中，所以不需要使用浏览器中的许多特性。Node.js 是一个让 JavaScript 运行在浏览器之外的平台。它实现了诸如文件系统、模

2017-05-01 15:01:04 669

原创浏览器有关的宽高详解

简介window对象表示浏览器打开的窗口（可以省略，全局变量挂载在window对象下，alert，confirm等方法）。document对象是HTML文档，是window对象的一部分(document.body可以写成window.document.body)。与window有关的宽高介绍window.innerHeight和window.outerHeight的区别在于，前者是浏览器内部文档的高

2017-05-01 11:20:16 3080

sysuzhyupeng的博客