js语言进阶 - Flow

JavaScript013

js语言进阶 - Flow,第1张

安装babel和flow

babel 和 flow 安装后， yarn run flow init ，生成 .flowconfig 文件

在 pacakge.json ，scripts中添加 "flow": "flow"

yarn run flow 来检测有无错误

yarn run build 将文件打包到 lib 文件夹下，此时打包好的文件已经经过 babel 的处理，可以正常运行

求和函数

不用 flow 的错误处理逻辑如下

会报错，因为类型推断 c 不可能是 string

1、Jasmine

Jasmine是一个行为驱动的测试开发框架，用于对JavaScript代码进行测试。它不依赖其它任何JavaScript框架，也不需要DOM。它的语法简洁、明确，写测试非常容易。

2、Mocha

Mocha是一个功能丰富的JavaScript测试框架，既运行于Node.js环境中，也可以运行于浏览器环境中。Mocha以串行方式运行测试，能做出灵活而准确的报告，也能将测试中未捕捉的异常映射到正确的测试用例。

3、Chai

Chai是个支持BDD/TDD的库，可用于node和浏览器，可配合任何JavaScript测试框架使用。

4、QUnit

QUnit是个功能强大又易于使用的JavaScript单元测试框架。jQuery、jQueryUI和jQueyMobile项目都使用这个框架，它能测试普通的JavaScript代码。

5、Sinon

Sinon.JS为JavaScript提供了独立的spies、stubs和mocks[译者注：Spy、Stub和Mock都是测试专用名词，Stub常被翻译为桩，spies是Spy的复数形式，是一种可以监视方法、调用和参数的技术]。它不依赖任何东西，可以配合任何单元测试框架工作。

6、Karma

Karma是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器，它的测试和显示都是通过命令行暴露给开发者的，这样他们就可以看到浏览器测试的通过或失败。

7、Selenium

Selenium有一个简单的目标：就是自动化浏览器。它主要用于自动化测试web应用程序，但是只是很简单地考虑到了基于网络的管理任务。

8、WebdriverIO

WebdriverIO允许用户仅添加几行代码就可以控制浏览器或移动应用程序，使测试代码更简单、简洁、易读。集成的TestRunner同样允许你以同步的方式调用异步命令，这样你不需要关心如何处理Promise以避免竞态条件。此外，它取消了所有的繁琐的设置工作，并且会为您管理的Selenium会话。

9、Nightwatch

Nightwatch.js是一个易于使用的Node.js，它是为基于浏览器的app和网站设计的终端到终端（E2E）的测试方法。它使用强大的W3CWebDriverAPI，用于在DOM元素上执行命令和断言。

10、PhantomCSS

PhantomCSS获得CasperJS捕获的屏幕截图，并使用Resemble.js将其与基准图进行对比，以测试RGB像素差异。java课程http://www.kmbdqn.com/发现PhantomCSS然后生成图像差异对比，用于帮助您找到原因。

11、PhantomFlow

PhantomFlow使用决策树提供UI测试方案。针对PhantomJS,CasperJS和PhantomCSS的NodeJS包装器——PhantomFlow能够流畅地在代码中描述用户流程，同时生成用于可视化的结构化树数据。

程序上给body或documentElement的scrollLeft、scrollTop赋值，

浏览器在没有出滚动条时，赋值后该值不会发生变化，始终是0。

下面是示例，该检测方法，不仅可以检测页面滚动条，传入要检测的节点，一样可以得到想要的结果。

代码（给scrollLeft，scrollTop赋负数值时会报错，此外scrollLeft，scrollTop的值不能大于实际最大的滚动值）：

复制代码代码示例:

var isScroll = function (el) {

// test targets

var elems = el ? [el] : [document.documentElement, document.body]

var scrollX = false, scrollY = false

for (var i = 0i <elems.lengthi++) {

var o = elems[i]

// test horizontal

var sl = o.scrollLeft

o.scrollLeft += (sl >0) ? -1 : 1

o.scrollLeft !== sl &&(scrollX = scrollX || true)

o.scrollLeft = sl

// test vertical

var st = o.scrollTop

o.scrollTop += (st >0) ? -1 : 1

o.scrollTop !== st &&(scrollY = scrollY || true)

o.scrollTop = st

}

// ret

return {

scrollX: scrollX,

scrollY: scrollY

}

}

第二部分，jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码 js 页面刷新记住滚动条位置的方法 js动态隐藏滚动条(兼容多浏览器 IE FF等)

有些浏览器下会出现累计执行、重复执行的情况，可以在准备执行前和执行完毕加一个执行完毕的标记，当判断上一次执行完毕，再执行该次操作。

复制代码代码示例:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>jQuery实现当拉动滚动条到底部加载数据</title>

<style type="text/css">

*{margin:0padding:0}

body{font-size:14pxcolor:#444font-family:"微软雅黑",Arialbackground:#fff}

a{color:#444text-decoration: none}

a:hover{color:#065BC2text-decoration: none}

.clear{clear:both}

img{border:nonevertical-align: middle}

ul{list-style: none}

</style>

</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">

//首先，窗口绑定事件scroll

$(window).bind("scroll",function() {

// 判断窗口的滚动条是否接近页面底部，这里的20可以自定义

if ($(document).scrollTop() + $(window).height() >$(document).height() - 20) {

//没有写ajax的调用，直接触发了链接的click事件。

$("#container").append('<div style="height:500px">dd</div>')

} // www.jbxue.com

})

</script>

</head>

<body>

<div id="container">

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

</div>

</body>

</html>

另外，此下拉到最后，浏览器会记住当前滚动条位置，会在刷新页面后，直接执行操作，所以在刷新页面时要执行，滚动条到顶部的操作。

复制代码代码示例:

<script>

$(document).ready(function(){

$('body,html').animate({scrollTop:0})

})

</script>

在jQuery中获取浏览器窗口的尺寸信息

在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码：

$(window).height() 　//浏览器时下窗口可视区域高度

$(document).height()//浏览器时下窗口文档的高度

$(document.body).height()//浏览器时下窗口文档body的高度

$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin

$(window).width() 　//浏览器时下窗口可视区域宽度

$(document).width()//浏览器时下窗口文档对于象宽度

$(document.body).width()//浏览器时下窗口文档body的高度

$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding margin