Read the original

如果你有成为全栈的梦想，METEOR是个不错的平台。

1.创建你的第一个App(Creating your first app)

在这个教程中，我们会创建一个简单的App去管理待办事项列表并和他人合作完成任务。在完成这个项目后，你会对Meteor和它的项目结构有个基本的了解，。我们先创建App，打开命令行，键入以下命令：

译者注：前提是你安装了meteor,具体安装步骤可以参考这里

1

meteor create simple-todos

GitHub地址：https://github.com/oneuijs/You-Dont-Need-jQuery

常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

• document.querySelector 返回第一个匹配的 Element

• document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array

• 如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []

注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

插入文档

insert()

语法格式

insert() 方法的基本格式为:
>db.COLLECTION_NAME.insert(document)

范例1

1
2
3
4
5
6
7
8
9
10
11

>db.mycol.insert(
  {
    "_id": ObjectId(7df78ad8902c),
    "title": "MongoDB Overview",
    "description": "MongoDB is no sql database",
    "by": "Freak",
    "url": "https://rockjins.js.org",
    "tags": ["mongodb", "database", "NoSQL"],
    "likes": "100"
  }
)

这篇文章面向对Promise不甚了解的朋友，我将告诉你如何把它快速运用在开发中。

什么是Promise？

简单几句介绍一下。Promise是抽象异步处理对象以及对其进行各种操作的组件。你可以理解为：它的出现，是为了让我们更方便的进行异步处理。

在Promise出现之前，说到JavaScript的异步处理，我们都会想到回调函数,like this:

1
2
3
4
5

getAsync("fileA.txt", function(error, result){
  if(error){// 取得失败时的处理 throw error;
    throw error;
  }
});

Read the original

我们最好了解”原生”的构建方式

译者注：这篇文章旨在告诉大家，构建的过程是怎样的。因为现在太多的脚手架工具了，大家确实很方便就搭建了环境，但内部的过程却让人迷糊。

前言

构建工具变得越来越丰富多彩了，但是你真的需要它们吗？有没有更简单的方式去搭建Rollup、Stylus或者其它的环境，而不用花上一整天时间。

现在我要向你展示用“原生”的方式构建项目，使用NPM scripts和监听器(chokidar)。

我向来是先实现功能再考虑优化，不然就本末倒置了。

网上有很多关于前端优化的帖子，最出名的应该是雅虎前端优化35条军规了，但其实很多朋友看完就忘了，确实要记住这么多条优化建议有困难。但你吸收这些优化建议后，你的潜意识就会慢慢养成优化的习惯，看到不完美的代码你就会不自觉的想到怎样去优化它们。

今天就举一个小栗子,我们来聊聊怎样做前端优化。

产品经理进门：“小周，这次的项目要兼容到IE8。”

我：“好的，没问题…”(除了这个我还能说什么？)

好了，假设不能使用第三方库，我们要用原生JS实现DOM元素事件绑定，我们就要考虑到兼容性问题(这时候脑子里面不用想优化的问题，先想想怎么实现功能吧)。

Read the original

前言

typeof运算符在JavaScript中用来判断一个数据的类型，它返回一个字符串。比如，我们想知道123的数据类型，我们可能这样写：

1

typeof 123

它会返回123的数据类型，那么应该是”number”。除了”number”，typeof运算符还会返回其他6种结果：

1
2
3
4
5
6
7
8
9
10
11
12
13

typeof 123 // "number"
typeof "abc" // "string"  
typeof true // "boolean"  
typeof {a: 1} // "object"  
typeof function foo() {} // "function"  
typeof undefined // "undefined"  
typeof Symbol('foo') // "symbol"

之前翻译了一篇博客，里面有讲到这个，今天单独拎出来聊聊。

前言

事件的触发权很多时候都属于用户，有些情况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力

• 一些浏览器事件:window.onresize、mousemove等，触发的频率非常高，会造成浏览器性能问题

如果你碰到这些问题，那就需要用到这些技术了。

我们先来解释一下函数节流(Throttling)和函数防抖(Debouncing)的区别:

我们上班、生活每天都需要坐电梯，用这个比喻再恰当不过了：

函数防抖和我们平时坐电梯差不多，如果有人进电梯（用户触发事件），那将在10秒钟后出发（执行程序），这时如果又有人进电梯了（用户在10秒内再次触发事件），我们又得等10秒再出发（重新计时）。

函数节流就比较直观了，有人进电梯，就开始计时，每10秒运送一次，如果没有人，则待机。

这两种策略具体使用场景还得看你的实际需求了，但是，只要理解了这个思想，接下来的就好办了。

JavaScript技巧，偶尔更新。

计算数组的极值

1
2
3
4
5
6
7
8
9
10
11

function smallest(array){                         
  return Math.min.apply(Math, array);             
}                                                 
function largest(array){                          
  return Math.max.apply(Math, array);             
}  
smallest([0, 1, 2.2, 3.3]); // 0
largest([0, 1, 2.2, 3.3]); // 3.3

就像最早听到斐波拉切数列一样，第一次听到柯里化我也是懵逼的

前言

本文旨在让大家简单理解柯里化和反柯里化，这里不做深入探究，只求能带大家装逼就好，看完还不懂你砍我。

我们先来简单了解一下他们的作用。

柯里化又称部分求值，字面意思就是不会立刻求值，而是到了需要的时候再去求值。如果看的懵逼，没事，看完整篇文章再回过头来看这里你就会豁然开朗。

反柯里化的作用是，当我们调用某个方法，不用考虑这个对象在被设计时，是否拥有这个方法，只要这个方法适用于它，我们就可以对这个对象使用它。