黎清龙 于 3个月前发表 2285 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]
3个月前
前端库
结一 于 1个月前发表 3531 1 2
SHERAL [HTTPS://GITHUB.COM/IMWEB/SHERAL] 是什么 简单来说, sheral [https://github.com/imweb/sheral] 是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库,它还拥有了30+ sass 的基础 mixin 或 % 的封装及其他基础能力,有了这些基础能力,不仅快捷便利,更是拥有了更多扩展可能。下面是sheral的三张UI截图: [http://7tszky.com1.z0.glb.clouddn.com/Fg0TocYTmOVFQYuPe1sZ5F-TG7VL][http://7tszky.com1.z0.glb.clouddn.com/Fkr1IoX-fIQrwTdwDLeh8JWJdVRB][http://7tszky.com1.z0.glb.clouddn.com/FknbTNLAw6iEBt1SW53uV9LPY8Am]
1个月前
移动开发
ShiJianwen 于 2个月前发表 3237 3 0
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
2个月前
javascript技术
yangchunwen 于 9个月前发表 2088 8 0
相信很多人都试过这样的经历,浏览一个正常的网站时,右下突然角弹出一堆小广告,而且这些广告的内容和你浏览的网站格格不入: taobaodns [http://i12.tietuku.com/1dd0edf962adb967.jpg] 前几天还有某微博用户爆料访问github时居然也有广告: githubhijack [http://i12.tietuku.com/b1adbbdfaa71501f.jpg] 又或者,你有没有试过因为不小心输错了某个网站的网址,出来一堆不堪入目的广告内容? 我今天还特意在家里试了一把,故意输入一个乱七八糟的网址,出来的页面让我无语,各种小广告,而且连续故意输错几个网址,都是这样: wrongname [http://i12.tietuku.com/7b8d35c48dfd23cf.jpg] 上面说的几个事情,未必但很有可能就是 运营商DNS劫持 。事实上,运营商劫持几乎到了明目张胆的地步,尤其是一些N级小电信运营商。对运营商劫持的一些实际例子的危害,感兴趣可以看看这篇 文章 [http://www.75team.com/archives/350]
9个月前
Web安全
coverguo 于 1年前发表 6989 18 5
创世纪第一章 首卷原文 起初我创造了canvas 。 我说,要有雨,就有了雨; 我说,要有雪,就有了雪。 而对于前端来说,canvas即是天地 在canvas这个天地上,前端可以呼风唤雨,无所不能。 ------------------------------------华丽的分割线------------------------------------------------- ##文章起因 其实就是最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop的组件,来展现这种canvas常见的下落物体的效果。那么,=。= ,就让我们先看看效果吧。 [github地址] 之后贴出来哈。。。。 ##效果展示 调用代码 <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>#canvas{ width:100%; height:100%;
1年前
HTML&HTML5
devinran ,唯封建与迷信难养也 于 1年前发表 2771 5 3
在最初的六天,我创造了天与地 webGL 是基于 OpenGL 的Web3D图形规范,是一套JavaScript的API。简单来说,可以把它看成是3D版的 canvas 。恩,你会这样引入canvas对吧: canvas = document.getElementById("xxx"); ctx = canvas.getContext("2d"); SO,3D版本的就酱: canvas = document.getElementById("xxx"); gl = canvas.getContext("experimental-webgl"); 是的,webGL直接使用canvas元素,只是引入一个不同的上下文“ experimental-webgl ”,方便吧。 这里的上下文实际上应该是.getContext("webgl"),但由于现在webgl标准尚未完善,所以多数浏览器采用一个“试验性”的上下文 让我们先啰嗦一些玩意儿 3D坐标系 [http://7tszky.com1.z0.glb.clouddn.com/FsJGJz-KF4wl30j2y8-tet8cSbRx]
1年前
javascript技术
王军 于 18小时前发表 42 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— AngularJS AngularJS 简介 AngularJS 是一个 JavaScript框架。它可通过 [removed] 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript框架 AngularJS 是一个 JavaScript框架。它是一个以 JavaScript编写的库。 AngularJS 是以一个 JavaScript文件形式发布的,可通过 script标签添加到网页中:<script src=" http://apps.bdimg.com/libs/ang [http://apps.bdimg.com/libs/ang] ... gt;[Note] 我们建议把脚本放在 <body> 元素的底部。 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
18小时前
HTML&HTML5
王军 于 5天前发表 110 2 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuety 实例 找出所有属于 div 元素的子元素的 p 元素,然后设置其边框属性: [code]$("div > p") .css("border", "1px solid gray");[/code] 定义和用法 jQuery() 方法接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器。 jQuery() 函数有三种语法:语法 1 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器: jQuery([i]selector[/i], [[i]context[/i]]) 详细用法语法 2 使用原始 HTML 的字符串来创建 DOM 元素: jQuery([i]html[/i],[[i]ownerDocument[/i]]) 详细用法语法 3 绑定一个在 DOM 文档载入完成后执行的函数: jQuery( callback ) 详细用法 jQuery( selector, [ context ] ) 该语法有以下几种用法:用法 1 :设置选择器环境语法
5天前
HTML&HTML5
孙世吉 于 5天前发表 130 0 0
1 简介 JSON 模式(JSON Schema)是一种基于 JSON 格式定义 JSON 数据结构的规范 。其用于: * 描述现有数据格式。 * 干净的人类和机器可读的文档。 * 完整的结构验证,有利于自动化测试,可用于验证客户端提交的数据。 表现形式上来说 JSON Schema实际上也还是JSON数据。 JSON Schema制定了一系列规范,使得我们可以使用它来定义JSON数据的格式。 这有点像我们先定义了“语言”是什么怎么用,然后可以用“语言”来规定什么是诗词歌赋。“诗词歌赋”以及“诗词歌赋的定义”实际上也都还是“语言”。 简单来说,我们有JSON数据①,我们可以定义JSON数据②用来描述①的结构。这时候JSON数据②也就是JSON Schema,它可以 描述 以及 验证 JSON数据①。 JSON数据①: { "name": "shijisun", "age": 24, "gender": "male"} JSON数据②(JSON Schema): { "type": "object", "properties": {
5天前
javascript技术
杨文坚 ,首席吹牛工程师 于 9天前发表 250 0 0
Standard Component 项目需要一个基于 AST 的 Javascript Transformer 编写工具,用于从一种类型的组件 transform 到 Standard Component。本来,想用著名的 esprima,来编写相应工具。但后来发现,Facebook 已经开发了 jscodeshift,重造一个轮子明显是多余的。 所以,jscodeshift 是什么鬼? jscodeshift 是一个 Javscript Codemod 工具,官方对 Codemod 的解释是: Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. jscodeshift 也是基于 esprima 的,相比 esprima 及 estools 工具集,其通过 path 可以很容易的在 AST 上遍历
9天前
工具建设
江源 ,非常让人头疼…… 于 11天前发表 182 1 0
原文http://jiangyuan.me/blog/2016/08/13/babel/ [http://jiangyuan.me/blog/2016/08/13/babel/] 最近总算有点时间能系统的梳理下 babel 。入门或者使用手册什么的直接查看“ 参考文章 [#wafaha] ”即可,我只说说我的理解。 插件 Babel is built out of plugins. * babel-core 只是个插件加载器, presets 是一组插件,避免繁琐地一个一个安装插件。 * preset es2015 [http://babeljs.io/docs/plugins/preset-es2015/] 可以很好的编译 es6 ,唯独对常用的 class property 无能为力,快使用插件 Class properties transform [http://babeljs.io/docs/plugins/transform-class-properties/] 。
11天前
构建工具
王军 于 6天前发表 165 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —-RegExp 对象 RegExp 对象用于规定在文本中检索的内容。 什么是 RegExp? RegExp 是正则表达式的缩写。 当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。 更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。 您可以规定字符串中的检索位置,以及要检索的字符类型,等等。 定义 RegExp RegExp 对象用于存储检索模式。 通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。 RegExp 对象的方法 RegExp 对象有 3 个方法:test()、exec() 以及 compile()。 test() test() 方法检索字符串中的指定值。返回值是 true 或 false。
6天前
HTML&HTML5