原文地址

在单页应用上,前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么,当我们在谈前端路由的时候,还可以谈些什么?本文将简要分析并实现一个的前端路由,并对 react-router 进行分析。

介绍这个工具前不得不先介绍一下积木系统。

积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统,详细介绍见 PPT

简单可以这么理解它的理念:

  1. 一个页面 = 一个模板 + 多个组件
  2. 一个组件 = 一份代码 + 一份数据
  3. 一个组件开发一次,复用多次
  4. 一个页面使用多个组件拼装后,实时预览、快速发布上线

此前在阿里实习的时候也接触过一个叫 TMS(淘宝内容管理系统)的系统, 专门用于快速搭建电商运营活动页面.

这种系统可统一理解为运营活动页面发布系统。

原文地址

 

 

webpack

最近,项目用了 React,配套使用了 Webpack,毕竟热替换(react-hot-loader)吸引力确实高,开发模式下使用 webpack 构建其实也够用,并且相对 gulp-webpack 来说,模块的编译等待时间大大缩小,这是生命啊! 发布时,借助 gulp 来进行其他方面的处理,如合图,打包等。或许把这些边幅修一修、支持下,Webpack 估计就要逆天了吧?

 

写在最前

我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。

做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。

 

怎么获取首屏时间呢?

我们经常要先问自己:页面是怎么加载数据?

A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容

QQ截图20160109164815

TAT.bizai 致我们终将组件化的Web
In Web开发,经验心得 on 2015年11月24日 by view: 27,733
46

这篇文章将从两年前的一次技术争论开始。争论的聚焦就是下图的两个目录分层结构。我说按模块划分好,他说你傻逼啊,当然是按资源划分。

mulu_left 《=》mulu_right

 

Angular2开发者预览版出来已有一段时间,这个以速度与移动性能为目的的框架到底如何,今天我们来尝试一下。

在官网有一段号称5分钟入门的教程:

quick start: https://angular.io/docs/js/latest/quickstart.html



不得不说的废话

随着前端工程化的推进,相信越来越多的项目都用上了自动化构建。
对前端构建来说,使用最多的莫过于gruntgulp

本文的主角是gulp,所以花一两句话来介绍gulp还是有必要的。

gulp是一款基于stream的前端构建工具,由于底层使用stream,可以将多个任务无缝串连在一起,相比使用临时文件的grunt要快不少;同时也不用像grunt一样写一大堆配置文件,每一个任务都可以可编程的来完全控制逻辑。

gulp比grunt“快”这是公认的事实,这里不再过多比较两者之间的差异,还是那句话,各有千秋吧。

 

场景描述

有时候我们会碰到这样的任务场景,需要在一个界面上展示,许多图表内容,而获取图表数据的CGI做得非常原子化,也不方便更改,那么只能发很多个请求来拉取数据,展示图表,大致像下面的界面。
liushui
或者有时候,希望一系列函数按照一定顺序自动执行,但里面内嵌各种回调,完全不知道函数何时执行。可能不得不使用标志位来记录执行阶段。(当然可以使用promise,这里是尝试给出另外一种解决方案和思路),这样代码看来一团糟,作为有处女座潜质的程序员多少有些纠结。

背景交代完毕,现在是正题,小技巧分享。
其实呢,我们需要的只是一个有加载顺序的队列来完成任务。
但是这里有个思维难点是程序执行流程并非线性推进,而是通过事件推进,不符合常规的线性思维方式。

我就想了一种可以让代码看起来更线性的一种方案.

代码如下:

这里我做的事情就是将队列函数,交给调用方自己来决定,何时执行。
同时run是个幂等函数,方便随时调用,还可以保证只有一个队列在执行,且不被多次调用。
这样就满足了开场需求,在ajax中顺序回调:)

 

一、概念解析:

Mongoose:

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose.

Mongoose简单来说就是数据库操作ORM

createConnection 与 connect:

许多入门学徒在看到这两个函数的时候都会有一定疑惑,但是这两个函数其实并不是一个东西,

createConnection 创建的并非一个默认的数据库连接,它返回的是一个Connection。我们需要通过这个Connection来创建Model、Instance,然后进行数据表操作,这通常是在程序需要连接多个数据库的情况下使用,否则一般使用connect来打开默认的数据库连接,这时候我们就可以用mongoose.model来创建我们的Model了。