随笔分类 -  D前端开发

1 2 下一页
html css Javascript 框架解读 mvvm canvas svg mobile webFonts
关于UI测试自动化的考虑
摘要：针对IE的测试使用.net体系是比较方便的，利用process启动IE，再把IE进程转换成IExplore对象，就可以随意的操纵html dom了针对Firefox的测试使用selenium也是比较方便的，不需要额外安装 浏览器driver其实UI测试方面功能还是太弱了，键盘输入，鼠标滑动，鼠标长按，拖拽，表单的记忆填充，这些我觉得都不太容易测试。理想中的测试自动化，希望编写完脚本后执行一次，测试工具就能自动运行ie,ff,chrome,safari,opera,uc等浏览器，然后给出各个浏览器下的表现。前面研究Node.js child_process启动和关闭进程，就是为了构造一个测试工具 阅读全文
posted @ 2013-10-06 21:31 web 的世界 阅读(207) 评论(0) 推荐(0)
Css gray 无法覆盖IE10
摘要：网站变灰这个效果很常见，在我这里暂时没有找到最优解决方式，先把今天的研究结果记录一下。第一种方案 ：对所有静态资源文件进行灰度处理，得到新一个资源目录，例如asset_ori 原始资源 asset_gray灰度资源，将文件映射指向灰度资源这里面包括对img以及css中所有颜色属性的处理，css里面最好不要有red,green这种字母颜色，但是还是会有#xyz,rgb(x,y,z),rgba(x,y,z,o)灰度算法临时变量=(原红色值*30+原绿色值*59+原蓝色值*11)/100; 原红色值=临时变量; 原绿色值=临时变量; 原蓝色值=临时变量; 第二种方案 CSS方案：针对IE10以下 . 阅读全文
posted @ 2013-10-06 19:10 web 的世界 阅读(1480) 评论(0) 推荐(0)
Javascript 参数传递
摘要：又一个基本概念出问题，参数传递都是值传递，var a={x:10}function test(obj){obj=1}test(a)console.log(a)输出什么，如果你说1,那就错了，本质上和下面是一样的var a={x:10}var b=a;b=1;console.log(a)输出什么,毫无疑问是{x:10}这个Object啊，这样你就明白了，Javascript里面没有引用传递，都是值传递 阅读全文
posted @ 2013-09-24 12:24 web 的世界 阅读(200) 评论(0) 推荐(0)
CSS九宫格带边框的多种实现
摘要：九宫格，每个单元格滑动上去显示完整边框。本身考察的知识点并不复杂，margin负值的遮挡，以及流布局中relative的超越。代码固定部分是这样的， 1 2 3 4 5.0 6 7 8 9 有四个场景，1.兼容较新浏览器，不能改html结构，利用CSS3, 里面我用到了nth-child http://jsbin.com/exuKuXI/3 兼容IE9+2.兼容所有浏览器，可以改html结构，可以使用浮动 http://jsbin.com/uTOQEVO/33.兼容所有浏览器，可以改html结构，不允许使用浮动 http://jsbin.com/IvopIxi/404.兼容所... 阅读全文
posted @ 2013-09-24 10:04 web 的世界 阅读(2206) 评论(0) 推荐(0)
80%人会答错的JS基础面试题
摘要：这套题第一道题难度最大，我第一遍的回答居然也错的，我悲观估计80%的JavaScript从业人员都答不完全准确[]==![] 得到什么？false, 你还需要看看基础true, 恭喜你答对了，你的推导过程是否正确呢？请看代码链接，http://jsbin.com/uVOTOce/9 阅读全文
posted @ 2013-09-24 09:38 web 的世界 阅读(253) 评论(0) 推荐(0)
离线应用程序初探
摘要：今天中午计划完成一个离线应用程序的尝试试了一下，太简单了，提供一个应用程序清单就可以了。clock.manifest文件内容如下：CACHE MANIFEST# Version 0.4clock.html/clock.css/clock.jsclock.html代码如下ClockThe time is: 在浏览器中访问 localhost/clock.html应用程序配置清单就会被下载，相应的资源也会被下载，Ctrl+C关掉Node.js服务器，再次访问，离线状态依然能使用。 阅读全文
posted @ 2013-09-24 09:04 web 的世界 阅读(213) 评论(0) 推荐(0)
也谈模块加载，吐槽CMD
摘要：先吐槽CMD，不要没头没脑的搞出个CMD，没意思。大家都看AMD好了，异步模块加载机制，CMD并没有改变这个模式。模块加载的关口就是getCurrentScript，每次define被调用的时候，识别出是哪个脚本在调用它，把javascript内容解析出来，识别出依赖的模块，（就是里面有require的资源部分），在执行前先准备好这些资源。当然这里面有若干相对路径的转换。AMD很好，人人都喜欢异步工作方式，所以QQ、email比电话更受欢迎，有什么事情我准备好了再回复你。但是人也是有控制欲的，人喜欢别人以同步方式工作，恨不得别人停下手里所有事立刻为自己服务。所以我对AMD不满足，使用过Node 阅读全文
posted @ 2013-09-24 09:01 web 的世界 阅读(277) 评论(0) 推荐(0)
Javascript基础知识面试题
摘要：[]==![]解题思路：step1,[]==!Boolean([]);step2,[]==!true;step3,[]==false;step4,[].valueOf()==false;step5,[]==false;step5,[].toString()==false;step6,''==falsestep7true别人说我的结果是对的，解题思路完全错了。不知道怎么解？正在思考中，难倒我了。 阅读全文
posted @ 2013-09-23 12:35 web 的世界 阅读(314) 评论(0) 推荐(1)
padding的讲究
摘要：padding有一个陷阱，你平常可能不太注意。行内元素上设置的内边距不会影响行高计算；因此，如果一个行内元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。对于块元素，利用padding结合box-sizing可以轻松制作类似 三列高度相等，左右宽度固定，中间自适应的布局，box-sizing有两种方式 border-box content-box需要注意的是对于火狐，box-sizing属性居然需要加前缀 -moz-box-sizing,而且它还支持第三种格式：padding-box各种浏览器都有神奇的地方。神啊，这真是既痛苦又有乐趣啊。分久必合，合久必分。HTM 阅读全文
posted @ 2013-09-16 11:41 web 的世界 阅读(200) 评论(0) 推荐(0)
margin的讲究
摘要：什么元素允许有margin值，无论块状元素还是行内元素都可以，只是各有限制。先说行内元素，这个是不允许有上下 外边距的，再说块状元素，上下左右外边距都允许 但是相邻元素的外边距会合并，要注意的是浮动元素的外边距不会合并而行内元素的左右边距是不会合并的块状元素的上下边距需要很谨慎的使用，一不小心就超越了自身，作用到父节点上了。总结一下两点注意：一是外边距合并问题二是上下外边距超越问题 阅读全文
posted @ 2013-09-16 10:44 web 的世界 阅读(175) 评论(0) 推荐(0)
absolute与relative 的超越
摘要：relative 超越了自身而已，所有位置的变化是相对于正常流下自身的表现而言absolute 超越了父容器，位置信息是基于父容器的位置而言 阅读全文
posted @ 2013-09-16 10:43 web 的世界 阅读(153) 评论(0) 推荐(0)
CSS选择器组合符号
摘要：组合连接符号无连接符 多项条件空格符 后代节点> 子节点+ 兄弟节点~ 兄弟节点这里要注意+和~之间的区别+是后面紧邻兄弟~是后面所有兄弟 阅读全文
posted @ 2013-09-16 10:32 web 的世界 阅读(317) 评论(0) 推荐(0)
CSS选择器详解
摘要：单个选择器#id.classdiv 标签名* 任意元素伪类伪对象CSS2伪类有十个，:link，:hover，:active，:visited，:focus，:first-child，:lang，:first，:left，:right。伪元素有四个，:first-letter，:first-line，:before，:after。CSS3增加了若干个伪类nth-child nth-of-type only-child empty .checked .enable .disable和一个伪元素 ::selection这里还是回顾一下伪类、伪元素CSS 引入伪类和伪元素的概念是为了实现基于... 阅读全文
posted @ 2013-09-16 10:24 web 的世界 阅读(212) 评论(0) 推荐(0)
HTML标签分类
摘要：先从闭合特征上来分类自闭合标签 meta link img input br等闭合标签 div span label 再从是否另起一行上分类行元素 又叫内联元素，默认会再本行内继续输出块元素 默认需另起一行但是还有很多隐含的标签约定，比如P标签是块元素，但是它不允许包含其他块元素，这一点你注意到了吗？ 阅读全文
posted @ 2013-09-16 09:34 web 的世界 阅读(263) 评论(0) 推荐(0)
JavaScript兼容性总结一点点
摘要：JavaScript 不同浏览器之间的差异还是很大，所以js库才这么有需求，需要解决各种兼容性问题。其实反过来，既然存在js库能解决这些兼容性问题，说明底层大部分功能还是相通的。首先想到的是事件模型，IE最早只支持冒泡，不支持捕获，event是全局变量再想到的都是一些API接口上的差异，比如event.srcElement与event.target再比如getComputedStyle与currentStyle再有就是ActiveXObject与XMLHttpRequest再能想到的就是ES3与ES5的差异，String、Array的API差异cookie localStorage基本上能想到 阅读全文
posted @ 2013-09-13 15:22 web 的世界 阅读(243) 评论(0) 推荐(0)
CSS兼容性总结一点点
摘要：CSS3的兼容性，除了前缀、还有参数格式的区分，因为仍在变化中，不在这篇文章中讨论。很想总结一下IE 6 7 8 9 10的兼容性问题，但是我实在不喜欢IE 6 7 8，在Web开发上也很少再调整到IE 67 模式下观察，先说几点能想到的吧。IE6的一些问题，浮动间距double,不支持png透明，IE8开始支持box-sizing after伪类，遵循ES3标准，开始表现的更接近标准。IE9开始支持border-radius仍然不支持transform transition animation，flexbox开始支持SVG、Canvas，放弃了VMLIE10开始全面支持CSS3,更多的设计. 阅读全文
posted @ 2013-09-13 15:05 web 的世界 阅读(193) 评论(0) 推荐(0)
回流与重绘：CSS性能让JavaScript变慢？
摘要：参考张鑫旭博客：http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/CSS编写的误区，避免重绘，尽可能地降低回流。避免table布局,因为table布局需要进行回溯，重新计算单元格元素的高度和宽度。 阅读全文
posted @ 2013-09-13 11:40 web 的世界 阅读(264) 评论(0) 推荐(0)
使用css控制table的cellspacing和cellpadding属性
摘要：HTML默认的表格样式之间有间隙，每次为了解决这些问题，总要在table标签里添加cellspacing和cellpadding，你是否也很厌倦这样的写法，那么有没有对应的CSS属性能达到相同的效果呢？1 2 答案是肯定的，cellspacing属性对应table的border-spacing CSS属性，但是cellpadding属性对应td的padding属性1 table{2 border-spacing:0; 3 }4 td{5 padding:0; 6 }table还有很多CSS属性可以控制，比如table-layout,border-collaspse如果你使用... 阅读全文
posted @ 2013-08-14 09:56 web 的世界 阅读(2811) 评论(0) 推荐(0)
JavaScript 读取CSS3 transform
摘要：某些场景需要读取 css3 transform的属性例如 transform:translate(10px,10px) rotate(-45deg);这该怎么读取呢，正则表达式？毫无疑问这很坑爹试试浏览器getComputedStyle得到的style对象中有没有这些属性，得到的只有matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px) 这种格式没有tranlate和rotate这些细节，但是所有的transform都可以在matrix数据里运算出来，下面是代码var values = tr.split('(')[1].split( 阅读全文
posted @ 2013-08-12 16:45 web 的世界 阅读(436) 评论(0) 推荐(0)
Javascript的运行效率是原生代码的20%-30%
摘要：所以jser们，写代码更仔细些吧。http://www.cnblogs.com/codemood/p/3213459.html 阅读全文
posted @ 2013-08-12 16:24 web 的世界 阅读(158) 评论(0) 推荐(0)

1 2 下一页