JavaScript 很少为人所知的玩法

Stack OverFlow 的联合创始人杰夫·阿特伍德（Jeff Atwood）曾提出著名的“Atwood定律”，即：

毫无疑问，JavaScript 已然成为当下最流行的编程语言之一，这点已经不需要争论了，不服的话前后端乃至全栈工程师肯定跟你急。最近，hackereart 就发表过一篇博文，文中描述了2016年主流编程语言的使用情况：

他们因此预测今年最流行的语言将会是：

• JavaScript
• Java
• Python
• PHP
• R
• Matlab
• Arduino
• Swift

作为编程语言界的当红辣子鸡，JavaScript 已将其触角延伸到了很多领域，变换出了很多新奇的玩法，下面的内容我试图探索一些 JavaScript 很少为人所知的玩法：

Espruino

Espruino 是一个专门为微控制器（MCU）设计的 JavaScript 解释器，最低资源开销 128KB Flash & 8KB RAM，使用 MPL-2.0 协议开源。

作者 Gordon Williams 简直就是个全才，最近还设计了一款硬件 Puck.js 来支持 Espruino。

在这位巨人的肩膀上，我做了一些修改，让其能够兼容我自己开发的硬件，修改后的代码我已经提交 GitHub 了，感兴趣的小伙伴可以克隆下来玩玩。

$ git clone https://github.com/makerdiary/Espruino.git

$ cd Espruino

# 将 YS-Beacon 连接至 PC

$ YS_BEACON=1 RELEASE=1 make flash

# 终端跳出一大堆字符，板子上的蓝色灯闪烁，最后一切轻松搞定~

...

[====================] 100%

DEBUG:root:reset stop on Reset

INFO:root:Programmed 446464 bytes (109 pages) at 14.56 kB/s

DEBUG:root:uninit board <pyOCD.board.mbed_board.MbedBoard object at 0x1025e8a90>

DEBUG:root:closing interface

Espruino 还有一个配套的开发工具 Espruino Web IDE，可以用来编辑代码、下载程序，甚至可用于图形化编程。下面是简单实现 LED 闪烁的代码，有没有一种似曾相识的感觉：

var on = false;

setInterval(function() {

on = !on;

LED1.write(on);

}, 500);

有意思的是，Espruino 硬件上跑着 JavaScript 的解释器，上传给它的 JavaScript 代码只是保存在 RAM 中，掉电就没有了，这点跟浏览器的做法居然如出一辙，也正好体现了其具备动态解析的特点。

JerryScript

如果说 Espruino 有点玩具化，那 JerryScript 应该说就比较产品化了，而且 JerryScript 的资源开销也不高，RAM 可小于 64KB，ROM 可小于 200KB。

一说到 JerryScript 就一定离不开 IoT.js 和三星，他们的“三角关系”是这样的：

整个内部架构如下：

下面这一小段代码可以显示 JerryScript 的基本工作流程：初始化引擎 → 解析 JavaScript 代码 → 执行代码 → 结束运行，释放内存。

{

jerry_init(JERRY_FLAG_ENABLE_LOG);

char script[] = \"print (\'Hello, World!\');\";

jerry_parse(script, strlen(script));

jerry_run();

jerry_cleanup();

}

查看 JerryScript 的源码，发现已经能够在一些 RTOS（如 Zephyr、mbed OS 等）上运行了。去年在深圳举行的 mbed Connect Asia 2016 大会上，Jan Jongboom 说他已经将 JerryScript 带到 mbed OS 5 上来了，还介绍了几个简单的示例。

既然已经支持 mbed OS 5 了，那事情就好办多了，可以轻松支援自己开发的硬件，至于开发环境的搭建可以参考 README，不难实现。

$ git clone https://github.com/YS-Beacon/mbed-js-example.git

$ cd mbed-js-example

# 国内的朋友可以使用淘宝镜像安装依赖：cnpm install

$ npm install

# 此处 gulp 用于获取 JerryScript 源码

$ gulp

# 获取 mbed os 最新源码

$ cd ./build/jerryscript/targets/mbedos5/mbed-os

$ git checkout master

$ git pull

# 从我的仓库拉回相关目标硬件配置文件

$ git remote set-url origin https://github.com/makerdiary/mbed-os.git

$ git pull

# 指定目标板子，自动编译

$ gulp --target=YS_BEACON

再来看下 JavaScript 所编写应用的源码，是不是有种既陌生又亲切的感觉：

// blink_leds.js

var led = DigitalOut(LED1);

var blink = function() {

led.write(led.read() ? 0 : 1);

print(\"blink! LED is now \" + led.read());

};

module.exports = blink;

// main.js

var blink = require(\'./blink_leds\');

setInterval(function() {

blink();

}, 1000);

将编译好的 mbedos5.hex文件下载到目标板，看看是不是你想要的结果：

Blockly

如果你对编程语言或命令行窗口闪烁的光标感到恐惧的话，Blockly 或许是拯救你的利器，让你变得好玩有趣。

Blockly 是 Google 开发并开源的一个 JavaScript 库，用于实现图形化编程，只需拖动一些表示变量、表达式、循环等含义的图形块，组合在一起就可以完成编程，是不是很酷？

实际上，Blockly 只做一件事：可视化编辑，生成代码。而代码背后的行为，Blockly 是不管的，这就留给开发者们非常大的想象空间，例如 Ozobot 就开发了一个智能机器人玩具，玩家可以使用 Blockly 编程机器人的行为：优酷视频

是不是很好玩？可惜就是没有机器人。不过，你可以先用 Espruino 体验一下 Blockly 的玩法，再一步一步构建你自己的机器人（没错，前面提到的 Espruino 是支持 Blockly 的）：

未完待续

是不是还没有玩过瘾？更多好玩的东西，我还在探索中，等我学上手就来分享，感兴趣的朋友可以稍微关注一下。

仿淘宝回到顶部效果的JavaScript代码分享

本篇文章给大家带来的内容是仿淘宝回到顶部效果的JavaScript代码。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。

思路：

1、页面加载完毕才能执行js代码

可以将js代码写在最下边（本次回顶示例是用的这种）

想写在上边可以用下边这两种：

①window.onload=function(){...}

②window.addEventListener(\'load\',function(){...})

2、获取需要用到的元素

3、绑定滚动事件scroll

当用户滚到banner模块时使侧边栏变为固定状态

if(window.pageYOffset>=bannerTop){//window.pageYOffset屏幕被滚上去的距离

sliderbar.style.position=\'fixed\';//当用户滚到banner模块时使侧边栏变为固定状态

sliderbar.style.top=sliderbarTop+\'px\';

}else{

sliderbar.style.position=\'absolute\';

sliderbar.style.top=\'300px\';

}

当用户滚到main模块时显示返回顶部按钮

if(window.pageYOffset>=mainTop){//当用户滚到main模块时显示返回顶部按钮

goBack.style.display=\'block\';

}else{

goBack.style.display=\'none\';

}

4、绑定点击事件click

点击返回顶部按钮后页面会动态滑到顶部，速度由快到慢向上滑动

sliderbar.addEventListener(\'click\',function(){

animate(window,0);

})

5、关于动画函数animate(obj,target,callback)

这里obj对象即是window；target目标位置即是0；callback是回调函数，没传参的话就可以忽略

设置一个定时器setInterval();

声明一个step作为步长值，值为顶部位置到当前滚动条位置之差除以10（step会越来越小，滚动速度也就越来越慢，实现了滚动条的速度由快到慢的滑上去）

varstep=(target-window.pageYOffset)/10;

然而step并不总是整数，当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step=step>0?Math.ceil(step):Math.floor(step);

window.scroll(x,y)滚动到文档特定位置，定时器每次调用函数都会往上滑一点

window.scroll(0,window.pageYOffset+step);

判断动画是否执行完毕，如果执行完毕则关闭定时器clearInterval();

if(window.pageYOffset==target){//当页面回到顶部后(即动画执行完)清除定时器

clearInterval(obj.timer);

//判断是否传了回调函数

/*if(callback){

callback();

}*/

//可以简写为下边这种。&&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()

callback&&callback();

}

详细代码如下：

<!DOCTYPEhtml>

<html>

<head>

<metacharset=\"UTF-8\">

<metaname=\"viewport\"content=\"width=device-width,initial-scale=1.0\">

<metahttp-equiv=\"X-UA-Compatible\"content=\"ie=edge\">

<title>返回顶部效果</title>

<style>

.slider-bar{

position:absolute;

left:47%;

top:300px;

margin-left:600px;

width:45px;

height:130px;

background-color:pink;

cursor:pointer;

}

.w{

width:1100px;

margin:10pxauto;

}

.header{

height:150px;

background-color:purple;

}

.banner{

height:250px;

background-color:skyblue;

}

.main{

height:1000px;

background-color:yellowgreen;

}

span{

display:none;

position:absolute;

bottom:0;

}

</style>

</head>

<body>

<div>

<span>返回顶部</span>

</div>

<divclass=\"headerw\">头部区域</div>

<divclass=\"bannerw\">banner区域</div>

<divclass=\"mainw\">主体部分</div>

<script>

//querySelector()方法返回匹配指定选择器（）的第一个元素，传的必须是字符串

varsliderbar=document.querySelector(\'.slider-bar\');

varbanner=document.querySelector(\'.banner\');

varbannerTop=banner.offsetTop;//banner模块距离顶部的长度

varsliderbarTop=sliderbar.offsetTop-bannerTop;//侧边栏固定后距离顶部的长度

varmain=document.querySelector(\'.main\');

vargoBack=document.querySelector(\'.goBack\');

varmainTop=main.offsetTop;//main模块距离顶部的长度

//scroll屏幕发生滚动事件时执行

document.addEventListener(\'scroll\',function(){

if(window.pageYOffset>=bannerTop){//window.pageYOffset屏幕被滚上去的距离

sliderbar.style.position=\'fixed\';//当用户滚到banner模块时使侧边栏变为固定状态

sliderbar.style.top=sliderbarTop+\'px\';

}else{

sliderbar.style.position=\'absolute\';

sliderbar.style.top=\'300px\';

}

if(window.pageYOffset>=mainTop){//当用户滚到main模块时显示返回顶部按钮

goBack.style.display=\'block\';

}else{

goBack.style.display=\'none\';

}

});

sliderbar.addEventListener(\'click\',function(){

animate(window,0);

})

/*动画函数：

*obj做动画的对象（这里就是指window）

*target目标位置（顶部）

*callback回调函数（没有传参的话就不执行）

*/

functionanimate(obj,target,callback){

clearInterval(obj.timer);//先清除定时器，保证只有一个定时器在执行，以免出现bug

obj.timer=setInterval(function(){

//window.pageYOffset距离顶部的距离（是负的）

varstep=(target-window.pageYOffset)/10;//step步长（让页面速度逐渐变慢的滑动上去）

step=step>0?Math.ceil(step):Math.floor(step);//step并不总是整数。大于零向上取整,小于零向下取整

if(window.pageYOffset==target){//当页面回到顶部后(即动画执行完)清除定时器

clearInterval(obj.timer);

//判断是否传了回调函数

/*if(callback){

callback();

}*/

//可以简写为下边这种。&&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()

callback&&callback();

}

//window.scroll(x,y)滚动到文档特定位置

window.scroll(0,window.pageYOffset+step);

},15);

}

</script>

</body>

</html>