分类 » JavaScript

Vue 响应式原理剖析 —— 数据更新常见问题

分类: , 标签:‚ ‚  评论:2 2 评论

在 Vue 开发的过程中,多少都会遇到数据更新后,页面没有更新渲染这类问题。而在上两篇文章中,从「实例化」、「渲染」、「数据更新」三条线完整地讲述了 Vue「响应式」的工作原理,本文正是基于这些原理去解决一些常见的数据更新相关问题。...

Read More –>

Vue 响应式原理剖析 —— 从实例化、渲染到数据更新(下)

分类: , 标签:‚ ‚ ‚ ‚  评论:2 2 评论

在上一篇文章中,梳理了 Vue 实例化和渲染的基本逻辑,并且介绍了订阅者模式这种设计模式,Vue 的「响应式」实现本质上也是一个订阅者模式,但是由于 Vue 需要考虑更加复杂的情况,并且需要在其中作出大量优化操作,因此具体实现也会复杂很多。下面通过更详细地说明 Vue「响应式」的实现,同时发掘在 Vue 中订阅者三要素分别是什么。...

Read More –>

Vue 响应式原理剖析 —— 从实例化、渲染到数据更新(上)

分类: , 标签:‚ ‚  评论:1 1 评论

在系统地梳理「响应式」工作原理的过程中,也参考了不少现有的文章,大部分都是围绕“依赖收集”、“派发更新”或者“Watcher”,“Dep”这些响应式相关的概念逻辑展开讲述,当然这些概念和逻辑是必不可少的要展开讲述的内容,但是如果单纯围绕这些内容展开来编写一篇文章,对于理解「响应式」在整个 Vue 中的工作过程可能会感到困惑。因此,本文会换一个角度,从 Vue 使用的过程展开说明「响应式」的工作原理,即从「实例化」、「渲染」、「数据更新」三条线讲述「响应式」的工作过程。...

Read More –>

Gulp 结构化最佳实践

分类: , 标签:‚ 

在 Gulp 的官方文档中,Gulp 的任务都是写在 gulpfile.js 这一个文件中的,如果任务数量不多,这并不会有什么问题,但当任务数量较多时,会造成代码可读性差,难以维护,多人协作时还会容易造成冲突。因此,更好的处理方式是把 Gulp 的代码结构化。 开始结构化 https://github.com/QMUI/qmui_web 这是一个前端框架,主要由一个 SASS 方法合集与内置的工作...

Read More –>

特征检测而不是浏览器检测!

分类: 标签:‚ ‚  评论:22 22 评论

正如上一篇文章所述,最近趁着有空把 jQuery 的浏览器模块抽取出来,再修改成独立简洁的一个对象 —— support,可以方便地使用 JavaScript 进行特征检测。 是的,这里要介绍的,是特征检测而不是浏览器检测! 由于 JavaScript 在不同的浏览器中存在差异,尤其是不同内核的浏览器之间的差异更是明显,因此在传统的前端开发中,在实现某些功能的过程中会判断浏览器的型号和版本,再实现一个跨浏览器的解决方...

Read More –>

Let’s free of jQuery! — Part Two

分类: 评论:9 9 评论

接着上一篇《Let's free of jQuery!》,上一篇主要介绍 jQuery 中最常用的一些方法的原生解决方案,本篇则会介绍余下相对较少用到的内容。 11. form 表单序列化 在 jQuery 中,有一个 serialize() 方法,该可以通过序列化表单值,创建 URL 编码文本字符串,在 ajax 提交表单时很有用,下面介绍一下原生的方法: function formToString(formO...

Read More –>

Let’s free of jQuery!

分类: 标签:‚  评论:8 8 评论

8月份时,断断续续把整个网站的 JavaScript 重写了一遍,原因很简单,自这个博客创建以来,一直都是依赖于 jQuery 库,随着 jQuery 库的愈发臃肿,以及自身对于 JavaScript 的日渐熟悉,摆脱 jQuery 的想法也越来越强烈了,于是终于在上个月,达成目标了。这里必须补充一下,Kayo 之所以想摆脱 jQuery ,原因有二: 一是因为 jQuery 的体积已经比较臃肿了,加载需时,对于移...

Read More –>

HTML5 Page Visibility

分类: , 标签:‚ ‚  评论:26 26 评论

HTMl5 推出了一个很“特别”的 API Page Visibility ,之所以说它特别,是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下,这个“激活”,指的是这个标签是否正被用户浏览,或者说是否为当前标签。 那么,这个 API 究竟有些什么用途呢?通常,很多传统的页面在用户没有激活它的时候,它还会继续工作,例如,当用户正在浏览新闻门户,而他之前打开的...

Read More –>

两道 JavaScript 题目

分类: 标签:‚  评论:19 19 评论

偶遇两道 JavaScript 题目,觉得都比较有趣,分享一下。 第一道是很老的题目了,getElementsByClassName,写一下当作练习: 下面这个思路比较简单,基本也是 Robert Nyman 的思路了,判断了 IE5 中使用原生的 all 属性代替其不支持的 getElementsByTagName ,使用 indexOf 判断相应的 class 是否匹配。 function getElemen...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 与响应式

分类: , 标签:‚ ‚  评论:3 3 评论

jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外,另外一个最直接的特点就是“响应式设计”,关于响应式设计,Kayo 已经写了不少相关的文章进行说明,而本文要介绍的,是 jQuery Mobile 中为响应式设计作出的优化和工具。 在 jQuery Mobile 测试版本的文档中,有一个栏目名为“Responsive Layout Helpe...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 方法下

分类: 标签:‚ ‚ 

本文承接上文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 方法上》,继续说明 jQuery Mobile 的方法,这部分内容主要与页面 URL 解析相关,除此之外还有其他一些实用方法。 以下两个方法在 jQuery Mobile 1.1 中不赞成使用 八. $.mobile.fixedToolbars.show() 固定工具栏(包括固定的头部栏和尾部栏)可...

Read More –>