vienwu 于 2年前发表 2020 0 0
这篇是前段时间总结给自己备忘的,要用到的工具实在太多,没法一一记住。作为一个测试的工具,会用就好了。 所以这里稍微做了一些修改,简单介绍一下常用的写法和命令,其次将之前的一些示例改成javascript版本,方便没有coffee基础的同学浏览。 介绍 mocha是一个拥有丰富功能的javascript测试框架,可以用于nodejs和浏览器。支持同步/异步测试用例,有多种报告形式。 官网介绍了很多的特性,个人感觉实用的就几点,一个是nodejs和浏览器都可以用,不用再记那么多奇怪的api和写法了。其次是编写同步/异步测试用例非常简单。 安装 $ npm install mocha -g 成功安装后就可以使用 mocha 命令了。 使用 运行 ./test/ 目录所有js $ mocha 指定js文件 $ mocha xxx.js 监听文件变化 $ mocha xxx.js -w 指定coffee编译 for coffescript 1.6 $ mocha --compilers coffee:coffee-script test.coffee for coffeescript 1.7+
2年前
调试
coolriver 于 2年前发表 1874 0 0
非可变性是函数式编程的一个核心规则,对于面向对象编程也有很多用处。本文为参考sitepoint(参考链接1)中的文章后所记录的一些主要内容。 参考链接1: http://www.sitepoint.com/immutability-javascript/ [http://www.sitepoint.com/immutability-javascript/] 参考链接2: immutable-js [http://facebook.github.io/immutable-js/] 参考链接3: Immutable_object [http://en.wikipedia.org/wiki/Immutable_object] 什么是非可变性?(IMMUTABILITY) 如果用非可变性来形容一个对象,对么这个对象的特点是: 这个对象在创建之后不会被修改 。JS中很多值是非可变的,例如: var statement = "I am an immutable value"; var otherStr = statement.slice(8, 17); 在执行完以上代码后, statement
2年前
性能
coolriver 于 2年前发表 5510 3 1
本文为初步阅读 ECMAScript6入门 [http://es6.ruanyifeng.com/] 后的一些记录与感想。 简介 ES6的设计目标,是使得JavaScript语言可以用来编写大型复杂的应用程序,成为企业级开发语言。ES6将于2015年6月正式发布。 现在最新版本的Nodejs上可以通过`--harmony`参数开启ES6的部分支持。如果旧的Nodejs版本不支持或者想体验更多的ES6 特性 可以 使用Google的[traceur](https://github.com/google/traceur-compiler)工具。traceur可以在前端编译ES6代码,也可以 在node上 编译或执行ES6代码。 * traceur在node上安装: npm install -g traceur * 直接执行ES6文件: traceur test.es6.js * 编译ES6文件到ES5文件: traceur --script test.es6.js --out test.es5.js ES6在很方面都对ES5有增强,下面将从不同方面对ES6在ES5上的加强进行介绍。
2年前
浏览器
杨文坚 ,首席吹牛工程师 于 2年前发表 2815 0 1
前一篇文章 [https://github.com/miniflycn/qvd/issues/1] 我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能做直出? 对于MVVM,HTML片段即为配置,而直出后的HTML无法还原配置,所以问题不是MVVM能否直出,而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子: <sapnHello {name}!</span 上面这段HTML配置和数据在一起,直出后会变成: <spanHello world!</span 这时候当我们失去了name的值改变的时候会导致页面渲染这个细节。当然,如果为了实现MVVM直出我们可能有另外的方法来解决,例如直出结果变成这样: <spanHello <span q-text="name"world</span!</span
2年前
性能
helondeng 于 2年前发表 1303 0 0
Rosin是一个Fiddler插件,协助开发者进行移动端页面开发调试。 特性 * 可配置的页面匹配规则 * 拦截console * 日志内容的存储,展示,过滤 * 脚本运行错误捕获 原理 * 首先在fiddler里面配置了匹配规则 * 访问的页面进过fiddler之后,匹配规则会生效,如命中,则在返回的内容中注入脚本。 * 脚本重写了console的各种方式(也监听了onerror事件) * 将console打出的各种消息push到消息队列 * 队列达到阈值或者间隔的时间到,就将消息通过xhr发送到 http://__rosin__.qq.com * rosin插件在fiddler中捕获上面的请求(并且隐藏了,所以看不到这个请求),将请求的body部分显示到面板上面 * 将log存储到本地 D:\Program Files (x86)\Fiddler2\Scripts\Rosin\Log add: function() {
2年前
调试
黎清龙 于 2年前发表 2652 3 1
这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以把这些伪元素放在任何位置,有了这两个伪元素,就代表每个元素都有两个助手可供使用,灵活运用它们的话将会得到很多有趣的实现,简化许多实现。 伪元素特性(目前已经遇到的) * 它不存在于文档中,所以js无法操作它 * 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字母;因此当伪元素被点击的时候触发的是主元素的click事件 * 块级元素才能有:before, :after,譬如img就不能设置,亦即某些元素是没有:before, :after的,只要知道一般的块级元素都可以用就行了 各种图标 利用这两个伪类,可以实现需要简单的图标,例如搜索的放大镜,叉叉,箭头等等 //视频播放图标 .course[data-type="2"] { .course__cover { &:before, &:after { content: '';
2年前
CSS/重构
ouven ,https://ouvens.github.io/ 于 2年前发表 2671 4 0
2015-04-27 跳转进入 [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g] http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g]
2年前
浏览器
杨文坚 ,首席吹牛工程师 于 2年前发表 2693 0 0
前端可选的视频直播协议大致只有两种: * RTMP(Real Time Messaging Protocol) * HLS(HTTP Live Streaming) 其中 RTMP 是Adobe开发的协议,无法在iPhone中兼容,故目前兼容最好的就是HLS协议了。 HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。所以,HLS比RTMP有较高的延迟。 前端播放HLS * Native支持 1. Android 3.0+ 2. iOS 3.0+ * flash支持 1. Flowplayer(GPL × ) 2. GrindPlayer(MIT) 3. video-js-swf(Apache License 2.0) 4. MediaElement.js(MIT) 5. clappr(BSD IE10+ × )
2年前
浏览器
结一 于 2年前发表 2394 3 4
一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下: 第一个和第三个为正常不处理的情况,第二个和第三个是我们要实现的情况 [http://7tszky.com1.z0.glb.clouddn.com/FuHVM5gtpt-9u-4tmoRuBm-84n__] 以前因为要兼容ie7-,所以对结构比较有要求,实现起来也比较复杂。这里我们先讨论下ie8+的情况,然后在来讨论下更高级的flex实现。 IE8+ 实现思路为:设置body最小高度为100%,相对定位,然后空出底部的高度,关键是要设置盒模型box-sizing为border-box或padding-box,最后将footer绝对定位在底部即可。 html代码如下: <body ... <div class="footer"</div </body css代码如下: html{ height: 100%; }
2年前
CSS/重构
杨文坚 ,首席吹牛工程师 于 2年前发表 2031 4 0
作为 React 的核心技术之一 Virtual DOM ,一直披着神秘的面纱。 实际上,Virtual DOM包含: 1. Javascript DOM模型树(VTree),类似文档节点树(DOM) 2. DOM模型树转节点树方法(VTree -> DOM) 3. 两个DOM模型树的差异算法(diff(VTree, VTree) -> PatchObject) 4. 根据差异操作节点方法(patch(DOMNode, PatchObject) -> DOMNode) 接下来我们分别探讨这几个部分: VTREE VTree模型非常简单,基本结构如下: { // tag的名字 tagName: 'p', // 节点包含属性 properties: { style: { color: '#fff' } }, // 子节点 children: [], // 该节点的唯一表示,后面会讲有啥用 key: 1 }
2年前
性能
杨文坚 ,首席吹牛工程师 于 2年前发表 1751 1 0
Facebook’s challenges are applicable to any very complex websites with many developers. Or any situation where CSS is bundled into multiple files and loaded asynchronously, and often loaded lazily. ——@vjeux 将Facebook换成Tencent同样适用。 同行们是怎么解决的? * Shadow DOM Style Shadow DOM的样式是完全隔离的,这就意味着即使你在主文档中有一个针对全部 <h3> 标签的样式选择器,这个样式也不会不经你的允许便影响到 shadow DOM 的元素。 举个例子: 举个栗子 [http://7tszky.com1.z0.glb.clouddn.com/Fst7pnZpcfxtdFcqOCQw6aWM2iMZ] <body <style button { font-size: 18px;
2年前
性能