深入探讨前端UI框架 1 前言 先说说这篇文章的由来 最近看riot的源码，发现它很像angular的dirty check，每个component ( tag )都保存一个expressions数组，更新时，遍历expressions数组，重新求值，对比旧值，如果有变更则更新DOM。 这不就是dirty check吗？为什么riot还声称它实现了virtual DOM？ 疑惑之下，就去复盘了一下各大前端框架，把一些收获分享给大家 本文内容很多，实在不知道怎么取标题，最终取了一个泛泛的标题，请读者不要纠结 本文将会涉及的内容有： 1. MV*前端框架，UI框架，UI更新相关介绍 2. UI更新机制原理及其代表框架介绍 3. 深入探讨各个UI更新机制（为什么virtual DOM会快） 4. 浏览器渲染机制 5. riot的真相（virtual DOM的本质，给我自己一个交代！） 裹脚布较长，读者慎入！ 2 理解前端框架 2.1 前端的工作

JSON-SCHEMA(一) 相关知识点 1. 它是什么 描述json的数据格式 2. 有什么优点 * 描述自定义的数据格式 * 清晰，对人和机器友好 * 完整的结构校验 * 自动化测试 * 校验表单提交数据 一个简单的示例构建自己的JSON-SCHEMA 一个数据对象或者API的数据是这样的 { "id": 1, "name": "A green door", "price": 12.50, "tags": ["home", "green"] } JSON-SCHEME类似XML或者HTML，有一个声明的头 这里可以看到有文档遵循的协议格式，标题，描述以及文档的类型 { "$schema": "http://json-schema.org/draft-04/schema#", "title": "Product", "description": "A product from Acme's catalog", "type": "object"}

定义 Riot :类似 React 的微型 UI 库 特点: * 自定义标签 * 快速上手的语法 * 虚拟 DOM * 体积超小 * 很好的中文文档 自定义标签 Roit在所有浏览器上支持自定义标签 Riot 标签首先被 编译 成标准 JavaScript，然后在浏览器中运行。 虚拟 DOM * 保证最少量的DOM 更新和数据流动 * 单向数据流: 更新和删除操作由父组件向子组件传播 * 表达式会进行预编译和缓存以保证性能 * 为更精细的控制提供生命周期事件 * 支持自定义标签的服务端渲染，支持单语言应用 与标准保持一致 * 没有专有的事件系统 * 渲染出的 DOM 节点可以放心地用其它工具（库）进行操作 * 不要求额外的 HTML 根元素或 data- 属性 * 与 jQuery 友好共存 简单，最小化 最小化是 Riot 区别于其它库的重要特点: 友好的语法 设计目标之一是尽量少写脚手架（boilerplate）代码就能实现强大的标签语法:

写在前面 在实际项目中，应用往往充斥着大量的异步操作，如ajax请求，定时器等。一旦应用涉及异步操作，代码便会变得复杂起来。在flux体系中，让人困惑的往往有几点： 1. 异步操作应该在 actions 还是 store 中进行？ 2. 异步操作的多个状态，如pending（处理中）、completed（成功）、failed（失败），该如何拆解维护？ 3. 请求参数校验：应该在 actions 还是 store 中进行校验？校验的逻辑如何跟业务逻辑本身进行分离？ 本文从简单的同步请求讲起，逐个对上面3个问题进行回答。一家之言并非定则，读者可自行判别。 本文适合对reflux有一定了解的读者，如尚无了解，可先行查看 官方文档 [https://github.com/reflux/refluxjs] 。本文所涉及的代码示例，可在 此处 [https://github.com/chyingp/blog/tree/master/demo/2016.01.05-reflux-async] 下载。 SYNC ACTION：同步操作 同步操作比较简单，没什么好讲的，直接上代码可能更直观。

背景 在最近的一个管理后台的项目中，决定用angularjs去试一下水，后台采用express4.0的node来写，前端就直接用angularjs来实现。第一次边学边用，这里记录下使用过程中的心得。 开发思路 1、首先URL的定位到了指定的HTML页面。 Angularjs比较适合做SPA，所以在express中只需要把地址指导制定的html页面就好，其余的接口，全部都是面向数据即可。 router.get('/', (req, res) => res.sendfile(path.join('public', 'views', 'index.html'))); 在index.html页面中首先引入angularjs，之后再根据需要，将对应的js文件引入。 2、定义ANGUARJS MODULE。 * 依赖注入已经初始化好的对象。 var myMod = angular.module('myMod',['ngRoute', 'ngAnimate']);

先看例子 其实，redux的核心概念就是 store 、 action 、 reducer ，从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) --> final state 可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍 // reducer方法, 传入的参数有两个 // state: 当前的state // action: 当前触发的行为, {type: 'xx'} // 返回值: 新的state var reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); default: return state; } }; // 创建store, 传入两个参数 // 参数1: reducer 用来修改state

写在前面 redux的源码很简洁，除了applyMiddleware比较绕难以理解外，大部分还是 这里假设读者对redux有一定了解，就不科普redux的概念和API啥的啦，这部分建议直接看 官方文档 。 此外，源码解析的中文批注版已上传至github，可 点击查看 [https://github.com/chyingp/redux-source-insight] 。本文相关示例代码，可 点击查看 [https://github.com/chyingp/redux-source-insight/tree/master/examples] 。 源码解析概览 将redux下载下来，然后看下他的目录结构。 npm install redux 这里我们需要关心的主要是 src 目录，源码解析需要关心的文件都在这里面了 * index.js ：redux主文件，主要对外暴露了几个核心API * createStore.js ： createStore 方法的定义

PROMISE介绍 项目相关demo和代码地址 [https://github.com/moonye6/PromiseB] 介绍 Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算.。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。 Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。 引自 MDN [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise] 它解决什么问题 一个简单的示例 执行一个动画A，执行完之后再去执行另一个动画B setTimeout(function(){ //A动画console.log('A'); setTimeout(function() {

近期把团队的项目构建迁移到fis3，同时把模块加载器也由之前的requirejs切换到了modJS。 有些同学可能不了解modJS，这里做个简单的介绍。 那么，MODJS是什么呢？ 简单的说，modJS是百度fex-team提供的一个轻量级的模块加载器，类似requirejs。 但modJS并不完全兼容规范amd/cmd，事实上，只支持非常简单的全局方法define(id,factory)。 另外factory提供了3个参数require/exports/module，用于引用和导出模块。 modJS源码只有200行左右，相比之下requirejs的源码达到了2000+行。 除了体量非常小之外，modJS配合fis3的fis3-hook-commonjs插件，可以在纯前端项目中实现类似nodejs一样的开发体验。 那么，我们为什么要使用MODJS呢？ 有以下几点： 1. 加载器更小 上面已经提到，200+行和2000+行的差异 1. 配合构建工具，开发体验更好 之前开发时，需要将每一个模块的代码单独放在define内部，并且需要申明每一个依赖。

如何在前端编码时实现人肉双向编译 React+flux是目前最火的前端解决方案之一，但flux槽点颇多，例如store比较混乱，使用比较繁琐等，于是出现了很多第三方的基于flux优化的架构。 有人统计了目前主流的flux实现方案，感兴趣的可以看这里： Which Flux implementation should I use? [https://github.com/kriasoft/react-starter-kit/issues/22] 其中 redux 是目前 github 上 star 最多的一个方案，该方案完全独立于 react ，意味着这套理念可以作为架构层应用于其他的组件化方案。同时官方也提供了 react-redux 库，帮助开发者直接使用 react+redux 快速开发。 个人理解它的主要特性体现在以下几点： 1. 强制使用一个全局的 store ， store 只提供了几个简单的api（实际上应该是4个），如 subscribe / dispatch (订阅、发布), getState , replaceReducer 。

近几年来由于web应用的交互越来越复杂，前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV 类型的框架发展历程及对部分MV\ 框架的介绍。 为什么需要MV* 从前的web应用，前端主要负责改善用户体验，而服务器则将视图(view)和数据结合渲染成页面吐给浏览器。而随着Ajax等技术的出现，如今的web应用的也变得越来越复杂，相比于桌面应用来说也不虚。 如果此时我们还是仅仅使用jquery类库来开发web应用，那么随着应用的功能越来越丰富，业务逻辑越来越复杂，你的代码就可能会变成这样： 然后应用就会在一堆 杂乱无章的选择器和回调函数 中死亡。所以前端也需要将代码的逻辑分层，引用设计模式分离代码的职责，解除不同逻辑之间的耦合，使得前端的代码具有良好的维护性和扩展性。 什么是MV*

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码： <divid="demo" q-text="msg"></div> js代码： var q = new Q({ el: "#demo", data: { msg: 'this is a demo' } }) try Q.js是一个mvvm框架，可以通过构造函数Q new 一个viewModel的实例，其传入的参数el即要绑定的view，可以是selector也可以直接是dom元素，而第二个参数data即model，也就是数据对象。 2. 内容绑定： Q-TEXT, Q-VALUE html: <div id="demo" > <p q-text="msg"></p> <input q-value="name"> </div> js: var q = new Q({ el: '#demo', data: {