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