记录一些js 自己得盲点

青旅半醒 2022-08-11 04:29 129阅读 0赞

做jser多年,依旧有很多不熟悉的东西,边看边记录吧

# **toString** #

把各种东西变成字符串,比如把数组变成字符串,把函数变成字符串，等等

把函数变成字符串

可以把整个函数字符串化,比如

var f = function()\{console.log(1)\}

f.toString()

返回的字符串是"function()\{console.log(1)\}"

函数的toString()有什么作用了,

在现实中是有很大的作用的

比如老赵的Jscex,能把异步的回调写法写成同步的写法,

用到的方法就是把function toString然后改变该函数,回调后在往下执行

还有requirejs也用到了类似的方法

把对象转化成字符创

var a={}
    a.toString()
    //"[object Object]"

会以 "\[object Object\]"这种形式出现,

如果是functon 或者是是 array调用对象的toString也会是这种形式

所以在判断一个变量的类型的时候用到它是个不错的解决方案(typeof 判断不出来函数,数组)

判断是否是函数

var toString = Object.prototype.toString
    function isFunction(fun){
    	return toString.call(fun) == "[object Function]"
    }

**MatchesSelector**

接收一个css选择符，如果调用元素与该选择符匹配，返回true。否则返回false

然后各个浏览器的实现出来的名字都不相同 所以做好拿一个变量来引用

var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector

MatchesSelector这个方法是挂在dom元素上的,入参数是一个css选择符

使用方法如下

$("\#a")\[0\].webkitMatchesSelector ("\#b \#a")

判断id为a的元素是否符合"\#b \#a"这个css表带式  (其实就是看id为a的元素是否在id为b的元素的子集)

ie6支持fiexed定位

源于一个恶心的需求

还好看到了一篇文章

http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html

chrome查看内存,网络,cpu

[可以去看这篇文章,图文并茂][Link 1]

快捷键按ctrl+esc

屏幕滚动到该元素：div.scrollIntoView();

检测是否网络连接状态

navigator.onLine 如果有为true表示有网络连接状态 false表示没有

也可以监听网络的连接和断开(webkit浏览器支持,不支持的浏览器可以轮询访问navigator.onLine来判断)

window.addEventListener("online", function()\{  
alert("连上了!!!")  
\})  
window.addEventListener("offline", function()\{  
alert("断开了!!!")  
\})

网页文件另存为

[http://ucren.com/blog/archives/473][http_ucren.com_blog_archives_473]

不需要真实的文件,也可以另存为

HTML5 的 <a> 标签有了一个新属性，叫 download，取值是一个文件名，当一个带有 download 属性的 <a> 链接被点击时，其形为不再是一个网页跳转，而变成将目标以指定的文件名另存到本地，兼容性还不错的样子

试试点下面的保存

保存

不知道高宽 图片垂直居中

1.                  top:50%;  
2.                  left: 50%;  
3.                  -webkit-transform:translate(-50%,-50%);   
4.                  -moz-transform:translate(-50%,-50%);  
5.                  -transform:translate(-50%,-50%);

css3帧动画  动画结束 不回到初始状态

animation-fill-mode:forwards

查看网络哪些地方耗时

# window.performance #

http://www.alloyteam.com/2015/09/explore-performance/

抓https和socket包的工具

https://avwo.github.io/whistle/

[Link 1]: http://jingyan.baidu.com/article/d621e8da14740b2864913f58.html
[http_ucren.com_blog_archives_473]: http://ucren.com/blog/archives/473