文章列表
孙世吉 于 5个月前发表 873 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技术
Red626 于 6个月前发表 862 0 0
ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. We can now use rest parameters, default values and destructuring, among other new features. PS:这篇文章主体是根据Faraz Kelhini的文章(见引用1)翻译而来,加入了自己的一些理解。 背景介绍 随着ES6的出现,javascript具备了很多新的特性,很多特性不仅仅在语法上更加清晰简洁,同时也提高了效率和可靠性,便于后期扩展和维护。不过很多新特性普及度并不高,通过学习ES6的一些特性后,可以更好地将其运用到实际项目中,对于浏览器支持度,我觉得可以乐观一些,毕竟ES6是趋势,而且现在也有诸如babel这类工具可以帮助我们将ES6转换为ES5来实现兼容,所以开发中去用ES6,何乐而不为呢? 概念介绍
6个月前
javascript技术
孙世吉 于 6个月前发表 2502 0 1
引言 最近实践中需要用到大量的异步回调风格代码的编写,作者最近处于同步编程风格转为异步编程风格的状态。同时第一时间遇到了下面提到的代码,第一直觉就是该代码肯定有问题!但是问题在哪里有讲不出来,感觉非常蛋疼与疑惑。先上当时遇到的代码: // 删除,先检查是否存在,存在再执行真正的删除动作functiondel() { // 查找return find().then(function(resultOfFind) { // 如果没找到,直接返回if (!resultOfFind) { returnfalse; } // 执行真正做删除操作的方法return reallyDelete(); }, function(err) { // 处理错误情况 handle(err) }) } functiondeleteItem(req, res) { // 删除 del().then(function(resultOfDelete) {
6个月前
javascript技术
王少飞 于 6个月前发表 760 1 0
React diff 作为Virtual DOM的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文将剖析 React diff 的不可思议之处。 React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合,特别是其高效的 diff 算法,让用户可以无需顾忌性能问题而”任性自由”的刷新页面,让开发者也可以无需关心 Virtual DOM 背后的运作原理,因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分,并只针对该部分进行实际 DOM 操作,而非重新渲染整个页面,从而保证了每次操作更新后页面的高效渲染,因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。 DIFF 策略 1 Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。 2 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。 3 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。
6个月前
javascript技术
json 于 6个月前发表 963 0 0
什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码: // 未使用JSXReact.render( React.createElement('ul', { className: 'list' }, React.createElement('li', null, 'fist li'), React.createElement('li', null, 'second li'), React.createElement('li', null, 'third li') ), document.getElementById('example') ); // 使用JSX React.render( <ul class="list"> <li>fist li</li> <li>second li</li> <li>third li</li> </ul>,
6个月前
javascript技术
coverguo 于 6个月前发表 2518 2 0
前言 最近,团队对测试用例十分的注重,因此,下面是我对测试用例的一些解析。 首先,我们需要知道:为什么需要测试用例? 理由很简单,就是为了在测试用例的辅助下,编写出高质量,可维护代码。 -------------------------------------------------------------------------------- 问题 正如因为地震的爆发,才会有地震仪的诞生。 测试用例的诞生,也必然有其需要解决的问题: 当我们在开发,我们往往会有以下的问题: 需求和开发脱节 当一份需求来了, 开发人员往往不能百分百的理解需求的内容(抛弃产品自己变更需求的可能性。。),这往往会让开发人员开发出的功能会有跟需求有所差别,这会带来额外的工作量 开发和测试脱节 什么是开发和测试脱节,说的是,当开发人员按照自己的想法开发完了一个需求。然后测试人员也按照自己的想法去测试这个需求,然后由于双方的分歧,导致测试认为开发有bug,开发认为测试是sb. 那么如何解决上面的问题呢? 答案就是 选择一种软件敏捷开发模式
6个月前
javascript技术
zzbozheng 于 6个月前发表 832 2 0
最近在做一些关于JSON Schema的基建,JSON Schema可以描述一个JSON结构,那么反过来他也可以来验证一个JSON是否符合期望的格式,于是我想到之前lqlong 之前的一篇 《数据字段防卫探索》 [http://www.imweb.io/topic/56f3892f14ea0f7263803d46] 发现JSON Schema可以做这个事情。 如果之前看我写的 《使用joi来验证数据模型》 [http://www.imweb.io/topic/572561798a0819f17b7d9d3e] 可能会问,为什么不使用JOI,反而使用JSON Schema?因为JOI这个nodejs库,除了验证格式,还带有验证字段关系的功能,库体积相对庞大,而且对于含有嵌套格式的JSON,用JOI来编写验证配置,极为繁琐。JSON Schema清晰简读,用来验证接口数据非常合适。 假设我们有一个期望JSON: { users: [ { id: 1, username: "zzbo", } ] } 我们理解这个JSON结构如下:
6个月前
javascript技术
jaychen 于 6个月前发表 2265 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FpcixPJjbpH-f-CxmctWXwDcOhie] 什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间结束调用。第二次调用时,会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行,则将其替换为新的定时器。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
6个月前
javascript技术
王少飞 于 7个月前发表 763 0 0
先看下官网的一个demo 定时更新当前元素, [http://7tszky.com1.z0.glb.clouddn.com/FgBAioAZXqXE4LTBOrMlhJ6UHk3p] 拿这个例子分析下setState的实现原理: 首先是reactComponent的setState方法 [http://7tszky.com1.z0.glb.clouddn.com/FoTS_0R1Zsj15E7arVRGdunawb4W] 将新的状态放到队列中 [http://7tszky.com1.z0.glb.clouddn.com/FoKkb1YH3Dqm_AbplL3_v2wCubsX] 新的状态是立即更新还是后面render更新(这个例子是在batchedUpdate中更新的情况) [http://7tszky.com1.z0.glb.clouddn.com/FidFopHg3JzaNgNUsboh4L-PoF-O] 这里采用事务处理为了可以执行用户绑定的生命周期的方法,要更新的状态最终放到dirtyComponents中
7个月前
javascript技术
json 于 7个月前发表 1905 1 0
npm是什么,大家都应该很熟悉了。npm的常用命令很多,为了避免经常到npm官网查找,特将常用的npm命令整理下来。 NPM INSTALL 包安装模块 本地安装 npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install express@3.0.5 安装结束后,当前目录下回多出一个node_modules目录,里面有express模块[http://7tszky.com1.z0.glb.clouddn.com/FpQIaMwDsa-4hioh7FHnqAwHpDH4] 简单说明一下上图 * express@3.0.5 当前安装的package为express,版本为3.0.5 * node_modules/express:安装目录 * methods@0.0.1: 依赖的模块有methods、fresh等以及各自的版本和依赖。全局安装 npm install express -g 将包安装到全局环境中,可以直接在命令行里使用。 NPM UNINSTALL 卸载模块
7个月前
javascript技术
结一 于 7个月前发表 3594 0 2
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
7个月前
javascript技术
朱灵子 于 7个月前发表 2370 1 1
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。 本文初探react的顶层事件代理机制~ 顶级事件代理机制 React采用的是顶层的事件代理机制,能够保持事件冒泡的一致性,可以跨浏览器执行,甚至可以在IE8中使用HTML5的事件。 React 实现了一个“合成事件”层,这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。首先区分原生事件与合成事件,我们在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件,使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener,所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”。 “合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候自动销毁绑定的事件。 事件代理
7个月前
javascript技术