前端面试题还没开始学就学不动了说出三种不同含义this的使用场景。实现一个获取当前页面链接search值的函数。

以供大家查漏补缺

HTML CSS

html新增标签及作用
rem 与 em
写布局内容随着浏览器自适应两边高度随中间内容增加最低视口高度
图片不变形填充不成比例容器

JS

基本数据类型引用数据类型
getElementByXXX系列与 queryselect系列区别
[8,9,10].map(parseInt)
说出三种不同含义this的使用场景。
实现一个获取当前页面链接search值的函数。（如下例子中，输入key1输出value1）例：’test.com/index?key1=…
事件委托是什么？有什么作用以及原理。
懒得打字了.....
利用自己的掌握的 javascript 知识实现一个能检测页面滚动速度（包括大小与方向）的方法
利用 mousedown mousemove mouseup，实现一个 dom 拖动类，mousedown mousemove mouseup 分别应该注册在哪个 dom 节点上

<body>
 	<div class="dragDom">
</body>

数据生成Dom

<body>
	<div id="container"></div>
	<script>
 		//假如以下有 1000 个节点，请将以下数据解析生成对应的 dom 结构
 		var treeData = [
           {"name": "A-1"},
           {"name": "A-2"},
           {"name": "A-3"},
			{
               "name": "A-4",
               "sub": [
	               {"name": "A-4-1"},
    	           {"name": "A-4-2"},
        	       {
            		   "name": "A-4-3",
               			"sub": [
              				{"name": "A-4-3-1"},
              				{"name": "A-4-3-2"}
 						]
 					}
 				]
 			}
 		];
 		//在下面空白处写下通用方法
        
	</script>
</body>

反转 container 里面的子元素,前提：不使用 innerHTML

<ul class="container">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 ...
 <li>1000</li>
</ul>

需求：

如图左边为操作区，右边为缩略图。当用户在左边区域操作 dom 时，右边缩略图能实时更新已知条件：

截图非常耗性能
左则 dom 中所有元素的信息都有记录，如下。当元素信息改变时，数据也会同步刷新

{
 a1:{"x":100,"y":200,"width":100,"height:100,",color":"#FF0000"},
 a2:{"x":200,"y":100,"width":50,"height:100,",color":"#000000"},
 ...
}

//------------------- 以下是实现方案（伪代码） -------------------//
//截图函数，能将 dom 截成一张图片(截图非常耗性能)
function domToImage(){
}
a1.on("位置改变",function(){
 domToImage();
})
a1.on("大小改变",function(){
 domToImage();
})
a1.on("颜色改变",function(){
 domToImage();
})
...

请根据以上条件优化此方案

React

purecomponent 与 component区别

Vue

生命周期
数据劫持实现

其他

浏览器输入url经历了什么
git checkout 什么用

前端面试题 还没开始学就学不动了

HTML CSS

JS

React

Vue

其他

前端面试题还没开始学就学不动了