js typeof、getBoundingClientRect、anywhere

文章目录

typeof

检测某个全局变量是否已经赋值用到了typeof,比如说比较常用的 typeof(jQuery) !== 'undefined'。typeof实际上是检测某个表达式的类型。返回值为一个字符串。

对应的表达式和值如下:

TypeResult
Undefined"undefined"
Null"object" (see below)
Boolean"boolean"
Number"number"
String"string"
Symbol (new in ECMAScript 2015)"symbol"
Host object (provided by the JS environment)Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms)"function"
Any other object"object"

使用示例:

// Numbers
typeof 37 === 'number';
typeof "bla" === 'string';
// Booleans
typeof true === 'boolean';
// Undefined
typeof undefined === 'undefined';
// Symbols
typeof Symbol() === 'symbol'
// Objects
typeof {a:1} === 'object';
// Functions
typeof function(){} === 'function';
// This stands since the beginning of JavaScript
typeof null === 'object';

getBoundingClientRect

常用于返回某个元素在视窗中的位置,包括left、right、top、bottom、width、height,查看caniuse在IE9以下不支持width和height,兼容性总体较好。

//兼容所有浏览器写法:

var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top;

//有了这个方法,获取页面元素的位置就简单多了:

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

width和height算出来的值跟下面这两个差不多。

var height = el.offsetHeight

var width = el.offsetWidth

有一点坑的是,当元素不在可视窗口中getBoundingClientRect()返回的值是为空的。所以以上的值也会返回0.

判断元素是否在可视区域

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

nodejs anywhere

谁用谁知道,随时随地想搭服务器就来一个。挺方便的。

官方介绍:Running static file server anywhere. 随时随地将你的当前目录变成一个静态文件服务器的根目录。

安装:

npm install anywhere -g

命令:

$ anywhere
// or with port
$ anywhere -p 8000
// or start it but silent(don't open browser)
$ anywhere -s
// or with hostname
$ anywhere -h localhost -p 8888
// or with folder
$ anywhere -d ~/git/anywhere
// or enable html5 history
$ anywhere -f /index.html

帮助:

$ anywhere --help

使用:

anywhere --help // print help information
anywhere // 8000 as default port, current folder as root
anywhere 8888 // 8888 as port
anywhere -p 8989 // 8989 as port
anywhere -s // don't open browser
anywhere -h localhost // localhost as hostname
anywhere -d /home // /home as root
anywhere -f /index.html // Enable html5 history,the index is /index.html

访问:

http://localhost:8000

执行命令后,默认浏览器将为您自动打开主页。

手机调试

由于在真实机子调试中,好像工具没法查看动态元素的变化代码,无法使用开发者那样直接看元素,所以,我想出了一个行之有效的方法,直接在页面中定义一个按钮,绑定这个按钮一个事件,事件输出需要查看元素的实时HTML代码,也就相当于实时查看元素的变化了。

<div id="box"><div style="display:none">我的活动元素</div></div>
<a href="javascript:void(0)" onclick="gethtml()">获取html</a>
<textarea id="showhtml"></textarea>
<script type="text/javascript">
function gethtml(){
var html = document.getElementById('box').innerHTML;
document.getElementById('showhtml').value = html;
alert(html)
}
</script>

感觉不会那么苦恼,也可能是我经验不足,不知道其它方法。anyway, it work fine!

有用链接:

  1. Element.getBoundingClientRect()
  2. getBoundingClientRect判断元素是否可见
  3. CSSOM视图模式(CSSOM View Module)相关整理

多记录,多分享,多总结,希望越来越好!

原创文章:js typeof、getBoundingClientRect、anywhere ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/typeof-getboundingclientrect-anywhere.html)
评论已关闭。

“js typeof、getBoundingClientRect、anywhere”有1个评论

  1. MAGICOS

    好东西

    登录回复