文章列表
黎清龙 于 4天前发表 244 3 2
深入探讨前端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 前端的工作 [http://7tszky.com1.z0.glb.clouddn.com/FjQRozSFfOJTE8y3Ew9l3yMZoEY8]
4天前
前端库
link ,除了分享,也是知识管理。 于 6个月前发表 980 1 0
术语 事务 指的是构成单一逻辑工作单元的操作的集合。比如:将钱从一个账户转到另一个账户就是一个事务,该事务包括分别针对每个账户的两个更新。 transaction [http://7tszky.com1.z0.glb.clouddn.com/Fu6p2U0G546cZrahPsAuGwfXbPiT] 英文中 transaction 又是交易的意思,我想应该是因为事务(transaction)管理的场景首先是出现在利用银行账户进行交易(transaction)的过程中,所以计算机科学家们把数据库的这一特性称为事务(transaction)。 事务有以下几个属性: * 原子性(atomicity):事务的所有操作在数据库中要么全部正确反映出来,要么完全不反映。 * 一致性(consistency):隔离执行事务时(换言之,在没有其他事务并发执行的情况下)保持数据库的一致性。
6个月前
nodeJS全栈
coverguo 于 9个月前发表 2824 12 1
创世纪第一章 首卷原文 起初我创造了canvas 。 我说,要有雨,就有了雨; 我说,要有雪,就有了雪。 而对于前端来说,canvas即是天地 在canvas这个天地上,前端可以呼风唤雨,无所不能。 ------------------------------------华丽的分割线------------------------------------------------- ##文章起因 其实就是最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop的组件,来展现这种canvas常见的下落物体的效果。那么,=。= ,就让我们先看看效果吧。 [github地址] 之后贴出来哈。。。。 ##效果展示 调用代码 <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>#canvas{ width:100%; height:100%;
9个月前
HTML&HTML5
袁飞翔 于 21天前发表 483 2 1
前言 花样直播项目客服端的动画基本已都使用web来做,总结分享一下 方案列表 * css3动画 * canvas 动画 * 播图片 * gif图片 各个方案的优缺点 CSS3动画 * 优点:启用css3的3d加速,能够满足性能要求;资源文件最小; * 缺点:元素量多、复杂的动画难以实现 案例: * 花样交友礼物动画 [http://huayang.qq.com/jiaoyou_mgift/9999.html?from=bat>to=bat] CANVAS 动画 * 优点:可以用swf文件直接导出生成,在线导出 Google Swiffy [https://developers.google.com/swiffy/convert/upload] (感谢Flash大神龙哥的指导) * 缺点:性能不佳。如果不用swf导出,人工绘制canvas性能也不是很好,况且复杂的动画很难绘制,能人工绘制的基本就可以使用css3去搞 PS: 最初想用觉得完美,但性能问题被测试叼得不行,之后加班加点换播图片 播图片 * 优点:能够解决一切性能、复杂度的问题
21天前
移动开发
ouven ,https://ouvens.github.io/ 于 12天前发表 234 1 1
【原译】JAVASCRIPT中的正确错误处理 A Guide to Proper Error Handling in JavaScript [http://www.sitepoint.com/proper-error-handling-javascript/] 这是关于JavaScript中异常处理的故事。如果你相信 墨菲定律 [https://en.wikipedia.org/wiki/Murphy's_law] ,那么任何事情都可能出错,不,一定会出错!这篇文章中我们来看下JavaScript中的出错处理。文章会覆盖异常处理使用的正反例,然后看下ajax的异步处理。 JavaScript的事件驱动机制让JavaScript更加丰富,浏览器好比就是一个事件驱动的机器,错误也是一种事件。当一个错误发生时,一个事件就在某个点抛出。理论上,有人会说错误是Javascript中的简单事件。如果你觉得是这样,那你就要好好去看看了。另外这篇文章只关注浏览器端的JavaScript的情况。 这篇文章将在《 Exceptional Exception Handling in JavaScript
12天前
javascript技术
江源 ,非常让人头疼…… 于 21天前发表 421 2 3
我一直觉得我掌握的这份优雅是被许多人所知道了,直到我发现小伙伴们都下载 .msi 来装 node ,我心中的优雅感终于压制不住。 .MSI 安装 windows 的一键安装包,应该是最简单的 node 安装方式,但存在几个缺陷。 * 比如不能安装多个 node 版本,现在 node 的版本就像火箭似的,所以多个 node 版本并行的需求还是很强烈。 * 一键安装对 npm 的理解也存在问题,我们完全不知道安装过程中,和 npm 相关的目录有哪些,以及怎样配置这些目录。 多版本的方式当然可以去找些 nvm-windows 之类的解决方案,所以这里着重讲解和 npm 相关的东西。 优雅安装 目录 新建一个目录专门了管理 node 和 npm 。 比如在 E 盘下新建一个目录 NODE ,如下: E:\NODE\node E:\NODE\npm-global E:\NODE\npm-cache
21天前
工具建设
coolriver 于 4个月前发表 1321 3 1
如果懂setTimeout,可以直接看第3节,前面两节也可以当段子看一下。 如果不是很懂setTimeout,看下1,2两节应该会有一些收获。 1 JAVASCRIPT运行环境 之前 关于service worker介绍的文章 [http://imweb.io/topic/56592b8a823633e31839fc01] 中,这样描述了浏览器环境下Javascript环境:" 每个页面的javascript运行主线程都是一个Boss "、" Boss很厉害,在页面上指点江山,呼风唤雨。但他有个局限:同一时刻只做一件事(单线程) "。 以上体现了Javascript在浏览器运行环境中的局限性,单线程。实际上,不仅是在浏览器环境中,在Nodejs环境中的javascript也是单线程的。在不使用其它新员工(webworker等)的情况下,JS是如何在单线程上处理复杂的操作和逻辑,以至于在用户看来可以同时响应不同的操作的呢?
4个月前
javascript技术
link ,除了分享,也是知识管理。 于 14天前发表 239 4 0
原文: https://nodejs.org/en/docs/es6/ [https://nodejs.org/en/docs/es6/] ECMASCRIPT 2015 (ES6) IN NODE.JS(译) Node.js是建立在 V8引擎 [https://developers.google.com/v8/] 的基础上。通过保持对该引擎最新发布版的更新,我们可以确保能够将 JavaScript ECMA-262 specification [http://www.ecma-international.org/publications/standards/Ecma-262.htm] 中的新特性能够及时的提供给Node.js开发者们,就像我们借助该引擎保持性能和稳定性的持续改进一样。 所有ECMAScript2015(ES6)特性被分为 shipping , staged 和 in progress 三个部分: * shipping特性是V8认为已经稳定的特性,Node.js默认提供这些特性,而不需要额外的运行时标志位来开启。
14天前
nodeJS全栈
张颖 ,认真认真 于 13天前发表 491 4 0
5月7日,为期1天的匠心 · 打造:腾讯SNG&msup技术开放日圆满结束。本次开放日是腾讯 SNG和 msup 联合举办,通过案例分享的形式展示了社交网络事业群产品(包括 QQ、QQ 音乐等)背后的十几年的技术沉淀与积累,全景解读了拥有亿级用户规模的SNG 的技术实践。 [http://7tszky.com1.z0.glb.clouddn.com/FpvY-_UNTkwiTW6n7AwLpek9LKjq] 稍显粗犷的身材,配上一张娃娃脸,加上温柔细腻的嗓音,IMWeb的又一萌属性 男神莫卓颖 在7日的开放日 前端专场 上给我们带来了一场干货分享:《如何搭建高质量、高效率的前端工程体系》。 [http://7tszky.com1.z0.glb.clouddn.com/Fmscvmsd6xnmMOjTiQNtbPxyktXo] 他介绍了前端如何从开发、链条、测试、上线、监控维护五个阶段是如何做效率提升的,着重介绍了围绕整个前端的自动化如何提升效率。
13天前
开发模式
zzbozheng 于 23天前发表 257 6 1
我们用nodejs实现一些功能时,往往需要对用户输入的数据进行验证。然而,验证是一件麻烦的事情,很有可能你需要验证数据类型,长度,特定规则等等,在前端做表单验证时,我们常用的做法是使用正则,正则表达式也许可以一步到位,但是他只会给你true or false,如果想要知道数据不符合哪些条件时,那么你要进一步判断,下面和大家分享一种可读性和易用性更好的实现方法。 Joi 是 hapijs 自带的数据校验模块,他已经高度封装常用的校验功能,本文就是介绍如何优雅地使用 joi 对数据进行校验。相信你会喜欢上他。便于大家理解,以登录为例,一般分两种方式:A或B (输入密码或二维码),那么 joi 的配置如下即可实现检验: var Joi = require('joi'); var schema = Joi.object({ username: Joi.string().min(3).max(30).required(), isA: Joi.boolean(), AVal: Joi.number(), isB: Joi.boolean(),
23天前
nodeJS全栈
黄龙 于 21天前发表 317 0 1
名词介绍 webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块。 Riot是一个类似React的微型 UI 库,具体可以见 【微型UI库Riot介绍】 [http://imweb.io/topic/56fd61d2b4a205f5063ee056] Redux 是 JavaScript状态容器,提供可预测化的状态管理。 配置项目 1.首先创建package.json文件 mkdir riot-redux cd riot-redux npm init 2.安装 给package.json添加依赖描述 ... "scripts": { "dev": "webpack-dev-server" }, ... "dependencies": { "babel-core": "^6.3.17", "babel-loader": "^6.2.0",
21天前
构建工具
结一 于 21天前发表 316 0 0
故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》 ::BEFORE > ::AFTER 相当于多了两个空白标签,可以放置一些修饰的点缀或内容等 伪元素 [http://7tszky.com1.z0.glb.clouddn.com/FkkYfyLFf5KS4zd85l-ZE4n5MWvW] * css3 生成内容 [http://www.w3cplus.com/solution/css3content/css3content.html] * A Whole Bunch of Amazing Stuff Pseudo Elements Can Do [https://css-tricks.com/pseudo-element-roundup/] 字体 字体方面主要包括:字体渲染方式,浏览器默认字体及重置,@font-face自定义字体,字体性能等 * 字体渲染背后不得不说的故事 [http://www.jianshu.com/p/8414b96549e3]
21天前
CSS/重构