可复用的代码 和 感想

1.监听到scroll事件的条件：父级元素定高，子元素高度比父元素高，滚动条是相对于父级元素的。对于某些浏览器来说，滚动元素是html，但是有些确实body。通用的获取页面的滚动元素的方法，document.scrollingElement

2.video和audio不能做到自动播放，只能用户手动点击，才可以播放，video的全屏功能浏览器兼容性不好

3.要想设置滚动条样式，设置-webkit-scrollbar是前提，否则无法生效

 .right::-webkit-scrollbar {
                width: 8px;
        }
  /* 滚动条滑块 */
  .right::-webkit-scrollbar-thumb {
         background: rgb(255,205,19);
         border-radius: 4px;
  }

4.z－index是相对于父元素而言，不是相对于整个页面。必须有position为非static才能生效的css属性有：top、bottom、right、left还有 z-index。

5.vue中，<slot :name="name"></slot>, 通过v-for动态创建slot的方法是不合理的，也不会成功。应该找其他方法解决问题。

6. ::before和::after，中，可以设置background

7,移动端：i）touchstart、touchmove、touchend、click事件是依次触发的。ii）微信中由于内存问题，touchmove只会触发一次，touchend也不会每次都触发(大概滑动3次才会执触发并执行自己的代码)。所以，要想得到手指最后的位置，需要在touchend而不是touchmove中获取。iii）在touchstart中阻止默认事件，可以保证touchmove每次都触发，但是，click事件和a标签不会触发。在touchmove中阻止默认事件，可以保证拿到位置，但是，会阻止浏览器的默认滑动。

8. 使用animation-fill-mode: forwards，可以让动画停止在最后一帧，动画的延迟加载可以做出依次出现的幻灯片动效。但是在某些安卓浏览器上不支持这个css属性，判断浏览器是否支持此属性的方式："aniamtion-fill-mode" in document.body.style

9.firefox与chrome的区别：1.滚轮事件：DOMMouseScroll，获取滚动角度的方式：event.detail  2.默认情况下的滚动元素：document.documentElement

兼容chrome和firefox的页面的scrollTop的获取方式，var rootElement = document.scrollingElement || docuemnt.body;

10. encodeURI 和encodeURIComponent的区别：前者对于整个url编码，后者对url的部分进行编码，前者，对保留字符不编码，后者对保留字符依然编码。保留字符的范围：／、？、：、&、@、＝

11. css中的类名不能以数字开头

12.问题，mouseenter和mouseleave，模拟hover出现对话框，对话框闪烁的问题。

 

想实现一个鼠标移上去，显示提示框，移出，隐藏提示框的效果
提示框使用了absolute定位，如果提示框部分覆盖住添加hover效果的元素，浏览器无法确定是否鼠标是在哪个元素上，提示框就会不断隐藏、显示，呈现闪烁效果
要解决，就修改提示框的top或bottom值，使提示框不覆盖住‘hover元素’，就不会出现闪烁问题了

 

13.当点击a标签时，如果a标签上绑定了事件监听器，则会首先执行click的回调，然后再跳转到href指向的链接。一般来说，会在click回调中做一定判断，如果符合条件，则会禁止跳转到href指向的链接，这个时候需要在回调中，使用preventDefault方法，阻止a标签的默认行为。

 

14.css的margin折叠－－margin折叠 上下是折叠的，最终2个block块上下之间的距离取最大的值、而左右是不折叠的，取设置的距离之和。margin的垂直方向折叠是BFC的特性，处于同一个BFC的2个块级元素才会发生折叠，因此，解决margin垂直折叠的方法是让2个block块处于不同的BFC中。

 

15.如果a标签内嵌套了另一个a标签，则浏览器解析时，不会解析成嵌套的结构。

 

16.location.href赋值时，如果赋予的值是空 ，那么页面会在本页面刷新一下，而不会什么都不做。

 

17.inline-block默认宽度和高度都是0，但是其宽度可以被内部元素撑开。block默认宽度为100%，这个100%是相对其父级宽度的，默认高度为0。如果一个block元素内部有一个inline-block元素，那么在inline-block与父级元素block之间会有共8px的空隙。

 

18.对于图片的缓存以绝对路径为key，如果想要某个图片事先被下载并成功缓存下来，那么，要求是，这个图片所在的路径，和你想要缓存的图片的路径是一致的。

19.多行文本溢出显示省略号三点的方法：

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

20.在用ajax请求数据时，我们首先会对返回的数据做一定的判断，常见的是返回一个lists数组，这个时候会判断lists是否为空，判断为空的方式是length，而不能用!,因为[]==false, 

![]==false,都会返回true。与[]有相似特性的还有' ',  '0'。

 

21.某些ui事件，例如resize、scroll、keyup，一旦用户有相关操作，就会频繁的触发事件回调，这个时候，1.事件回调尽可能的简单，不要频繁的操作dom 2.可以利用节流函数，即将事件回调的执行频率降低。

22.JSON.stringify和JSON.parse函数，一个是将js对象({name: "wfz"}或者{"name": "wfz"})转换为JSON字符串"{"name": "wfz"}"，一个反过来。

23.<a href="#">表示一个锚点，点击a时，跳到页面顶部。 <a href="#id">表示点击时定位到，id为id的dom。

<a href="javascript: alert(1)"> 表示当点击a时，执行javascript之后的代码。

<a href="javascript: void(0)">表示当点击a时，什么也不做。void为执行里面的语句，但是不返回值。这种写法在firfox和safari浏览器上无效，最好不要这样用。

22.dom元素都有childNodes和children属性，两者的区别是，childNodes会包含非元素节点（空白文本节点）和元素节点，而children属性只包含元素节点。

23.求2个数组的交集和并集：

 

let intersection = a.filter(v => b.includes(v))
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))

24.正则表达式：

25.求数组最大值的4种方法：http://www.jb51.net/article/107373.htm

26.微信浏览器内，打开某个网页时，清理页面缓存的方法：1.设置通用清理微信缓存2.关掉微信进程，重新进入3.退出你的账号重新登陆

27.背景音乐自动播放策略：iphone手机微信内：

 

            // 微信里音乐自动播放
            document.addEventListener('WeixinJSBridgeReady', function (e) {
                var audio = document.querySelector('.audio');
                var music = document.querySelector('.music');
                var btncolor = music.className.split(' ')[1].split('_')[0];
                audio.play();
                music.classList.add(btncolor + '_on');
                music.classList.remove(btncolor + '_close');
            }, false);

iphone自带safari浏览器：没办法自动播放，只能由用户介入点击，才能播放。

 

安卓手机：。。。。。

28. iphone5的手机宽度：320，i6: 375， i6plus：414

29. 设有一个string类型的变量str="<p>d</p>"，str.replace("<p>", "dd")，返回"<p>ddd"，但是str保持不变，不会发生变化。

 

30. BFC是一个独立的渲染容器，有其规定的渲染规则。形成BFC的方式如下：

i）根元素

i）position的值不为static

i）float的值不为none

i）overflow的不为visible

i）display的值为inline-block、table-cel、table－caption

i）display：flex、inline－flex

BFC内的block块排列规则如下：

i）一行一行的排列

i）内部元素的外边框紧贴BFC的最左侧

i）元素垂直方向margin重叠

i）避开外部的float元素

i）计算BFC的高度时，浮动元素也包含在内

i）BFC的内部元素与外部元素互不重叠

利用BFC可以解决如下问题：

i）解决margin重叠

i）清除浮动

i）解决浮动元素的覆盖问题

31. 经典js面试题

for (var i = 1; i < 4; i++) {
    setTimeout(() => {
      console.log(i)
    }, 0)
} // 输出444

   for (let i = 1; i < 4; i++) {
      setTimeout(() => {
        console.log(i)
      }, 0)
    } // 输出1、2、3

知识点：1.异步：setTimeout要等到当前脚本的同步任务执行完之后才会执行。2.闭包：保留对它被声明的位置所处的作用域的引用，console log由于要用到i，所以要保留定义i的作用域。3.作用域链：执行到console时，顺着作用域逐层寻找i，第一个函数找到了函数外部的中的i，这个时候i为4，所以输出3个4（每层循环共用一个作用域）。第二个函数每层循环分别拥有自己的作用域，每个作用域内部的i分别是1、2、3，所以，输出1、2、3.

32. :checked伪类适用于：1. 单选按钮被选中：input[type="radio"]:checked 2.多选按钮被选中：input[type="checkbox"]:checked  3.select下的option被选中.

33. 正则表达式：|、*等一些特殊字符在[和]内是无效的，也就是只是代表字符本身。

34. 块级元素和行内元素，行内元素不起作用的css：width、height、margin－top、margin－bottom。起作用的css：padding、border、margin－left、margin－right

35. promise的3种状态：pending（进行中）、resolved（已完成）、rejected（已拒绝）

36. setTimeout、setInterval传参，setTimeout(callback(para), time),错！传不进去，正确的方法：setTimeout(()=>{callback(para)}, time)

37. 跨浏览器获取整个页面的滚动元素的通用方法：

var rootEle;

if (document.scrollingElement) {

   rootEle = document.scrollingElement

} else {

    if (document.compatMode != "backCompat") {

             rootEle = document.documentElement

    } else {

           rootEle = document.body

   }

}

38 跨浏览器获取页面scrollTop的方法

scrollTop = document.body.scrollTop || document.documentElement.scrollTop

39 基本数据类型5种，外加一个复杂数据类型Object，typeof取值范围也为6种，没有null，多了一个function，而typeof null 为object

40 if、＝＝、＝＝＝示图，https://dorey.github.io/JavaScript-Equality-Table/

41. html中折行，会在折行的对应元素间出现一个空格，解决方法：别写在一行，或者父级元素font-size:0

42.

<div style="font-size: 13px; height: 20px;line-height: 20px;">
   13
</div>

以上代码，在安卓手机上，13并不会上下居中，在iphone手机上没问题。解决办法：将font-size改成偶数，如14px 

43. display: flex能满足所有要求，能不要用display: inline-flex就不要用display: inline-flex。ios8需要autofix，autofix 网站：http://www.cssdrive.com/cssautoprefixer/。网上抄的有些是错的，这个网站比较官方。

44.当我们在设置元素的style="transform: translate3d(0, 0, 0)"时，x、y、z中间有一个空格（也就是说逗号后面必须有一个空格），这个空格必须存在，也就是不能写成style="transform: translate3d(0,30px, 0)"或者style="transform: translate3d(3px,4px,5px)"。如果空格没有写，由transition: transform ease 400ms, 设置的动画是无法实现的。无法实现动画。

45.img图片下会出现3px的空白间隙，解决办法，将img的display:none

46.input输入框外边会有一条线，去掉的方法：outline: none

47.eslint自动修复代码格式：npm run lint --fix

48.当npm的包安装有错时，多试几次，先npm i，然后再逐一修复启动时的报错