郭明慧 于 3个月前发表 735 2 0
开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。 Github地址: https://github.com/IronPans/LazyPicker [https://github.com/IronPans/LazyPicker] 效果图: [http://7s1r1c.com1.z0.glb.clouddn.com/t_lazyPicker.gif] 你也可以扫描二维码用手机体验: [http://7s1r1c.com1.z0.glb.clouddn.com/t_1480730967.png] 如果你使用PC浏览器,那么你需要切换到手机模式才可使用。 步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可。 使用方法 引入CSS和JavaScript脚本: <link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script> 简单的表单(input)
3个月前
前端库
张颖 ,认真认真 于 3个月前发表 707 0 0
REACT-ROUTER使用方式 react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。 嵌套的路由表声明一份路径到各个component的映射表结构非常清晰: <Providerstore={store}><Routerhistory={browserHistory}><Routepath="/"component={AppSimple}><Routepath="/editor"component={Editor} /><IndexRedirectto="/proj" /></Route></Router></Provider> 而且支持多层嵌套
3个月前
前端库
ouven ,https://ouvens.github.io/ 于 3个月前发表 736 0 0
原文链接: http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html [http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html] 前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需要长期维护,这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块,评估运行结果。预设条件应包括正常条件和异常条件,以达到自动运行测试过程、减少或避免人工干预测试的目的。在前端自动化测试中,我们通常是通过不同的工具来解决不同场景下不同的问题的。就测试类型来看,主要分为BDD(Bebavior Driven Developement,行为驱动测试)和TDD(Testing Driven
3个月前
javascript技术
郭明慧 于 3个月前发表 564 0 0
最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fit和object-position。 这两个奇葩的属性是搞毛的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。 等等,好像多了一个名词,啥叫替换元素?替换元素其实是: * 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。 *
3个月前
CSS/重构
lxy ,学无止境 于 3个月前发表 619 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FqSr0oqb2NxKhp0DgUvcBXsSN3-v] 以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style:规定如何在 3D 空间中呈现被嵌套的元素 4、transition:定义过渡开始、完成的时间、速度和类型 简述:.cube代表一个正方体,.cube里面的每一个div分别表示正方体的一个面,要想每个面都有图片,即在每个div里分别加上一个img。正方体的制作很简单,只需要先让6个面处于同一位置,然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操: div部分[http://7tszky.com1.z0.glb.clouddn.com/FgCeilBN40rl5iZZ3pCTkkB_BxHZ] css搭建舞台 [http://7tszky.com1.z0.glb.clouddn.com/FoLDkXZtDEX7bjukxv61smPgMBsY]
3个月前
CSS/重构
结一 于 3个月前发表 1720 1 0
按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: * 元素大小 * 元素与元素之间的间距 * 元素在页面的位置 下面对上面问题一一详细展开 元素大小 先来说下元素大小的问题,对于图片类的来说我们就要获取图片在PS中的正确大小,这一般来说百分之八十都没什么问题,除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定;而对于文字来说,那就是文字大小了,但是还有个不能忽略的字体问题,同一个大小不同字体可能相差十万八千里。 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 对于第一点为了准确性及效率,我们可以采用 Cutterman [http://www.cutterman.cn/zh] 这个PS插件;而第二点我们就得使用规范去约定,约定网站常规字体类型及大小 元素之间的间距
3个月前
CSS/重构
郭明慧 于 3个月前发表 556 0 0
相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: [http://7s1r1c.com1.z0.glb.clouddn.com/t_multi-columns.png] 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须使用JavaScript对内容分段,再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在,强大的CSS3为我们提供了“multi-column”,让我们可以很轻松的实现这样的分列布局。 先来看看与多列布局(multi-column)相关的css属性有哪些: * 列数和列宽:column-count、column-width、columns * 列的间距和分列样式:column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule * 跨越列:column-span * 填充列:column-fill
3个月前
CSS/重构
否子戈 于 3个月前发表 1583 0 0
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。 不把require和import整清楚,会在未来的标准编程中死的很难看。 REQUIRE时代的模块 node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。 node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。 // a.js// -------- node -----------module.exports = { a : function() {}, b : 'xxx'
3个月前
javascript技术
jaychen 于 3个月前发表 819 0 0
[http://7tszky.com1.z0.glb.clouddn.com/Flx3rVQjMqZJtBsPdMtS1xGSCx-H] YARN( HTTPS://GITHUB.COM/YARNPKG/YARN [HTTPS://GITHUB.COM/YARNPKG/YARN] ) facebook发布的新一代包管理工具,旨在解决以往使用npm作为包管理会遇到的一些问题。从其官方介绍可以看到其重点强调的3个点:快、可靠、安全。 YARN拥有以下6个特性: * 离线模式: 一次安装,永久使用,无需下载 * 依赖确定性:安装依赖锁定,保证一致性 * 更好的网络性能:下载包,优化网络请求,最大限度提高网络利用率 * 多注册来源处理:不管依赖包被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装(npm/bower), 防止出现混乱不一致。 * 网络弹性处理: 安装依赖时,不会因为某个单次网络请求的失败导致整个安装挂掉。当请求失败时会进行自动重试。
3个月前
工具建设
link ,除了分享,也是知识管理。 于 4个月前发表 516 0 0
导语:写下这篇文章的缘由是因为在项目过程中,碰到了一个使用JavaScript处理 UINT64 类型数字的坑。 与大部分现代编程语言(包括几乎所有的脚本语言)一样,JavaScript中的数字类型是基于 IEEE 754 标准来实现的,该标准通常也被称为“浮点数”。JavaScript使用的是“双精度”格式(即64位二进制)。 较小的数值 不仅仅是JavaScript,所有遵循 IEEE 754 规范的语言都会碰到如下问题: 0.1 + 0.2 === 0.3; // false 从数学角度来说,上面的条件判断结果应该是true,可实际上却为false。 这是因为,二进制浮点数中的 0.1 和 0.2 并不是十分精确,它们相加的结果并非刚好等于 0.3 ,而是一个比较接近的数字 0.30000000000000004, 所以条件判断的结果为false。 那么该如何处理这种语言上的缺陷呢? 最常见的方法是设置一个误差范围,通常称为“机器精度”(machine epsilon),对JavaScript的数字类型来说,这个值通常是2^-52(2.220446049250313e-16)。
4个月前
nodeJS全栈
江源 ,非常让人头疼…… 于 4个月前发表 589 2 0
原文 [http://jiangyuan.me/blog/2016/11/01/vscode-autocomplete/] vscode 1.6.x 发布了,有一系列的新特性,我个人比较开心见到 ts/js 语法着色 [https://code.visualstudio.com/updates#_preview-typescript-javascript-grammar] 有提升,我还专门搞了个 issue [https://github.com/Microsoft/vscode/issues/12362] 吐槽过这个。 当然今天不是扯 vscode 的更新节奏很快的梗,而是扒一扒它的 自动完成 , 上一篇文章 [http://jiangyuan.me/blog/2016/09/24/vscode/] 已经介绍过, 自动完成 和 typings 紧密相关。 typings 官网 [https://github.com/typings/typings] 描述: The TypeScript Definition Manager.
4个月前
工具建设
结一 于 4个月前发表 728 0 0
听闻 w3cplus [http://www.w3cplus.com/] 大漠在第三届 CSS Conf [https://css.w3ctech.com/] 上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝尘而扼腕叹息。 闲话少说,提起网格系统,大家都应该耳熟能详,如 960 [http://960.gs/] ,当然随着技术与分辨率的进步有了进一步的演变,但设计思想还是一致的。既然是这么实用的东西,CSS当然有了纳入规范之想,这不就出现了我们今天要说的CSS Grid Layout 网格系统浏览器支持 虽说IE10、11早就实现了网格布局,不过那已经是过时的了,新标准目前没有任何浏览器默认正规支持(chrome 54,firefox 49),都需要去手动设置开启: * chrome 在地址栏输入“chrome://flags”,找到"experimental web platform features"开启
4个月前
CSS/重构