从“点赞”到“框架”，发现业务本身的价值

2017-03-11

假如眼下有两个任务摆在你面前，做一个“点赞”的功能，以及“搭建一个底层框架给开发人员”，你会选哪一个？也许答案不言自明，但是今天我想说，他们都是很好的选择，取决于我们如何对待。

阅读更多

ES6的yield是如何执行和接受参数的

2016-06-17

其实是在去年的JsConf上才第一次看到有人介绍ES5的generator，以及他的实现语法 yield。当时演讲嘉宾举了一个例子，通过next()去调用，获取返回值，并传入参数，我看得略云里雾里，并且基于我的云里雾里，一时没有领会到这个语法的意思。我们先回顾一下这个经常被用来演示yield语法的函数例子

阅读更多

函数声明与函数表达式

2016-05-29

函数定义几乎是我们做的最多的一件事了，有时候我们以 function a(){} 来申明，有时候以 var a = function(){} 来申明，他们是不是一样呢？
比如我在写代码的过程中，经常写下如下代码，但其实就在刚刚，我才似乎终于懂得了一些下面的函数定义到底发生了什么（附注释）：

1
2
3
4
5
6
7
8
9
10
(function () { // 函数表达式
  'use strict'
  angular.module('moduleA')
    .controller('controllerA', ControllerA)

  ControllerA.$inject = []
  function ControllerA () { // 函数声明，变量提升
    // the actual body
  }
})() // 通过里面的(), 使函数体代码块被当做函数表达式执行，函数名可以忽略

阅读更多

flex布局当overflow时无法滑动到顶部

2016-05-21

有了flex布局后，让一个元素居中变得比以前容易了很多，当我们需要全屏展现一个图片时，我们也可以用flex布局使其居中。然而，当这个图片的高度超过外层DIV的高度（宽度占满外层DIV的宽度，高度等比压缩后），我们发现居中后无法滑动到图片的顶部，但是却可以滑动到图片的底部。

阅读更多

我们经常看到的"!!obj"

2016-05-21

相信大家在偶尔看到一些库的源码时，总是能看到这样一句语法a === true && !!obj;, 是的，这里面用了!!obj 这样一个运算符。我们不禁好奇，这样做的结果不就是等于什么都没做吗？最近在看老姚的《underscore源码解析》恰好也有这么一段，作者做了解释，我自己也求证了一下。

阅读更多

Prerender预渲染优化SEO

2016-05-06

单页面应用的主要内容都依赖于JS的执行，当其首页面下载下来的时候，其实不是完整的页面，而是HTML + JS文件，浏览器提供执行环境于是页面被渲染了出来。用户在访问的时候体验会很好，但是对于搜索引擎的爬虫就不太友善了，因为他们不能执行JS，这时候Prerender就派上用场了，它可以帮忙把页面渲染完成之后再返回给爬虫工具，我们的页面也就能被解析到了。最近我尝试搭建了基于本地的Prerender + NGINX的预渲染服务，希望可以帮到大家。

阅读更多

JS本地化的尝试

2016-04-30

还记得去年在百姓网组织的一次meetup上，听到过sofish分享了饿了么前端的一些架构，当时印象最深的是proxy_pass解决跨域问题，只听过词汇却不知道是什么意思。后来大量依赖NGINX，proxy_pass已经可以说是用得最多的一个配置了。还记得当时他们提到了请求合并、JS本地化，觉得实为厉害，但一直都没有机会实践。前不久突然想到我们的前端项目，尤其是通过APP加载的H5工程，应该很适合做本地化，于是也实践了一下。

阅读更多

NGINX add_header 在try_files中不生效

2016-04-30

由于项目是单页面应用，整个项目的JS文件其实包含了绝大部分的功能。项目发布时，会对文件名进行MD5重命名，因此以为缓存问题已被解决。但是在实际运行中，却发现总有发生没有请求最新文件的情况。那不就是项目的入口index.html被缓存了呗，得咱配置一个cache-control nocache吧！于是我GET到了一个新知识，因为这里面有误区。

阅读更多

基于最基本的float+overflow实现calc的CSS效果

2016-04-24

CALC() 是一种正在试验阶段的CSS属性（刚才查了一下，在PC上的支持其实还不错，但是手机端的支持还不好），而且是CSS中比较少的可以在运行时计算的属性值,通过它我们可以实现这种效果：左右布局，左边固定，右边自动铺满。只是限于其支持度我们总是不敢完全放心的使用它。前不久在360的奇舞周刊公众号看看到一篇文章，传送门，作者(瓜瓜) 介绍了BFC（块式布局上下文）， 并总结了BFC的几条原则，不多，但是有一条可以帮助我们实现很多情况下calc才能办到的效果。

阅读更多

借助background-size实现漂亮的avator头像

2016-04-16

可以说，但凡涉及到用户信息展示的页面，用户自定义的头像总是让人记得最深刻，我们也总在这上面花去不少心思。从正方形，到圆角，在到现在的全圆，我们的头像展示也经历着自己的演进。之前我在处理个人头像的时候，想到的总是使用一个DIV+IMG，DIV 正方形并使用50%的圆角，盖在图片IMG的上面。但是这样有一个问题，就是当图片的长宽比很大时，我们要么强行拉伸图片使其不安比例的铺满，要么就等比拉伸进而导致图片不能撑满整个圆形DIV，如果不使用JS，这似乎无解？ 哈哈，我们忽略了CSS的一个属性：background-size

阅读更多