React还是Vue:你该如何选择?

2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。

但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在JavaScript社区引起了巨大反响,GitHub上多出的25000颗star就是最好的证明。

React和Vue的适用范围无疑是很相似的:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展为复杂的应用程序。

因为,很多Web开发者想知道他们应该使用哪个框架。是其中一个明显优于另一个?还是他们有各自的优点和坑?或者他们基本就是一个样?

两个框架 两个拥护者

在本文中,我想用一次公平,彻底的对比来回答上面的疑问。但是唯一的问题是我是一个Vue粉丝,完全不够客观。今年我在项目中重度使用Vue,在Medium上大加赞赏,甚至还发布了Udemy课程

为了平衡我的偏见,我叫上了我的朋友Alexis Mangin,他是一个很牛的JavaScript开发者,同时也是一个React铁粉。他同样沉浸于React中,经常在Web端和移动端的项目中使用。 继续阅读

JavaScript中的定时控制-requestAnimationFrame应用

javascript2

这篇文章很短。

在前一篇文章中,我们讨论了在另一篇文章中讨论的几个技术的API实现。

在这篇文章中,我们将看看requestAnimationFrame

当我们有一些重绘任务的时候,我们使用requestAnimationFrame – 这将改变屏幕上的内容。但这只是工作的一般方式。

function render() {
  // do something
  window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);

HighResTimeStamp

requestAnimationFrame的问题是它不强制一个回调速度 – 只定义了它的上限。正如MDN所说:>回调的数量通常是每秒60次,根据W3C的建议,通常会匹配在大多数浏览器的显示刷新率。 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的API实现

javascript1

上一篇文章中,我们研究了一些技术用来函数的定时控制(回调),在特定事件发生时触发。这些技术是:

  • Throttle
  • Debounce
  • Immediate

在这篇文章中,我们将看到这些技术如何以高阶函数的形式实现通用的API。

我们首先看看 Debounce 的实现: 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念

javascript

你可能知道,JavaScript遵循事件驱动的编程范例。这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。我们称这些行为events(事件),和响应callbacks(回调)。连续的事件流被称为event stream(事件流)。

这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。

  • Throttle
  • Debounce
  • Immediate

Throttle

在现代浏览器中,帧速率为60fps是流畅性能的目标,给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断,如果每秒发生n个事件并且回调执行,需要t秒的时间,为了流畅运行, 继续阅读

jQuery 3.0 升级指南

jquery-3-0

概述

在3.0主版本中,jQuery Core团队对API进行更改及清理,并修复某些代码更改引起的bug。这包括删除以前弃用的公开API,更改或删除未记录的API,并更改现有API的记录或未记录的行为用于特定输入。

浏览器支持

jQuery 3.0 支持以下浏览器:

  • Internet Explorer: 9+
  • Chrome, Edge, Firefox, Safari: 当前版本 和 当前版本 – 1
  • Opera: 当前版本
  • Safari Mobile iOS: 7+
  • Android 4.0+

jQuery团队策略是主版本更新只针对这些浏览器,所以这个浏览器列表至少支持到jQuery 4。

jQuery Migrate 插件

与jQuery 1.9 / 2.0中的主要更改一样,我们已经创建了一个新版本的jQuery Migrate插件,以简化旧代码迁移到3.0版本。我们强烈建议您使用这个插件作为升级工具,它将给出 可能影响您的代码的关于大多数主要更改的具体建议。 继续阅读

JavaScript ES6(ES2015)入门-核心特性概述

JavaScript ES6(ES2015)特性概述

JavaScript在过去几年里发生了很大的变化。这里有12个新功能,您今天开始就可以使用他们!

JavaScript历史

新增加的语言称为ECMAScript 6。它也称为ES6或ES2015 +。

自从 1995年提出的JavaScript构想以来,发展进展非常缓慢。每隔几年新增一次。1997年以来 ECMAScript 一直作为JavaScript实现的基础,引导JavaScript 发展。它已经发布了好几个版本,如ES3,ES5,ES6等。 继续阅读

ES6中块级作用域及变量声明let

ES6之前JavaScript没有块级作用域,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,用var声明的变量具有变量提升(declaration hoisting)的效果。ES6新增加了一个let,可以在{}, iffor里声明。用法同var,但作用域限定在块级,let声明的变量不存在变量提升。

例1: 块级作用域 if

function test(flag) {
    if (flag) {
        var a = 'js'
    } 
    // 这里也可以访问 a
}

变量a在if块里声明的,但在else块和if外都可以访问到val,把var换成let后:

function test(flag) {
    if (flag) {
        let a = 'js'
    } 
    // 这里也访问不到 a
}

继续阅读

兼容多种模块规范(AMD,CMD,Node)的代码

在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内。

1b4f2d19-ca78-4189-a20c-236e786a1659

很早写的有兴趣可以看看,如何封装Node.js和前端通用的模块:http://www.css88.com/archives/4478

AMD规范

AMD,即“异步模块定义”。主要实现比如: RequireJS。

其模块引用方式如下:

define(id?,dependencies?,factory);

其中,id及依赖是可选的。其与CommonJS方式相似的地方在于factory的内容就是实际代码的内容,下面是一个简单的例子:

define(function(){
  var exports = {};
  exports.say = function(){
    alert('hello');
  };
  return exports;
});

CMD规范

CMD规范,与AMD类似,区别主要在于定义模块和依赖引入的地方。主要实现比如: SeaJS。

主要区别是:AMD需要在声明模块时指定所有的依赖,通过形参传递依赖到模块内容中。 继续阅读

Lodash:10个JavaScript工具函数-用Lodash减少LOC,并改善你的应用程序逻辑清晰

开发JavaScript应用程序的时候,我们经常需要自己编写实用方法等作为我们的实用(工具函数)模块。那么,什么是实用模块?

实用类就是定义一组经常执行的方法,重复使用功能的类。 – 维基百科

从处理字符串和对象到集合迭代器,总是会需要实用功能来完成工作的情况。

即使是采用主流的ES6,我敢说,JavaScript开发人员仍然无法获得像Objective-C或Ruby那样多的语法糖。 因此,在JavaScript应用中,仍然普遍需要我们编写大量重复的自定义工具函数。

然而,最近我很喜欢一个JavaScript库,它提供很多干净,高性能的实用方法 – Lodash

YHvwPgwojjsFa

如果jQuery是DOM操作的瑞士军刀,那么Lodash对于Javascript来说相当于是蝙蝠侠的实用腰带。蝙蝠侠总是用他信赖的腰带上的小工具摆脱棘手的情况。

以下是我在JavaScript应用已经停止重写的10个实用方法,当然对于不同的工作,你很可能也会需要其他的工具函数, 本文仅作为一个入门Lodash的引子。 继续阅读

如何快速开发可演示的微信小应用(应用号)

微信小程序最近刷爆朋友圈和微博,一个星期了就没消停过。于是我也出来打个酱油,尝试做了个小demo。本文演示了如何快速的快速开发一个事件提醒的微信小应用。

功能需求

  • 首先先说说功能需求:
  • 用户输入事件标题和提醒时间后保存
  • 列出全部事件
  • 对一条事件进行修改或删除
  • 后端定时任务,到了时间指定的提醒时间后,发送短信给用户手机

创建应用号微信小应用

打开“微信web开发者工具”v0.9版本,添加项目,随便输入AppID,随便输入项目名称,选择一个本地项目目录。

选中“在当前目录中创建quick start项目”,可以生成一个快速启动的程序页面,便于修改。

001

点击“添加项目”按钮后,进入项目界面,可以看到初始的页面样子: 继续阅读