1、用js写出一个冒泡排序算法。
解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置。
2.第一轮的时候最后一个元素应该是最大的一个。
3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较。
function bubbleSort(array){
var len=array.length;
var temp;
for(var i=0;i<len-1;i++){
for(var j=0;j<len-1-i;j++){
if(array[j]>array[j+1]){
temp=array[j];
array[j]=array[j+1];
array[j+1]=temp;
}
}
}
return array;
}<br><br>var arr=[3,6,2,9,10,32,1];<br>console.log(arr);<br>bubbleSort(arr);<br>console.log(arr);
2、CSS中的选择器的优先级是怎么样的?如何优化选择器?
行内样式(权重为1000) > id选择器(权重为100) > class类选择器 (权重为10) > 标签选择器(权重为1)
优化原则:
①避免使用通配规则*{}
②尽量少直接对标签进行选择,而是class
③要知道继承这个东西, 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复编写规则
④尽量少的去使用后代选择器,降低选择器的权重值 后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
⑤不要去用标签限定ID或者类选择符
3、使用HTML5写出一个页面,包含头部、页头、页脚、文字内容和图片。
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1>头部</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h2>Content is loading……</h2>
<article>
<p>Writing something……</p>
</article>
</section>
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
<footer>
<p><a href="https://i.cnblogs.com/">https://i.cnblogs.com/</a><p>
</footer>
</body>
</html>
4、前端页面的优化方法有哪些?有什么优化工具?
优化方法:
1、减少Http请求,优化加载速度。
a、合并文件:将多个Script合成一个文件,将多个CSS文件合成一个文件;
b、使用“雪碧图”CSS SPrites将背景图整合到一张图片中,通过坐标来实现对背景进行定位;
c、减少DOM数量。
2、CSS:
a、避免使用CSS表达式;
b、避免使用@import引入css文件,使用link形式引入;
c、在头部head中引入CSS样式表文件。因为如果把CSS文件放在底部,大部分浏览器会现下载内容,但是不能显示出来,因为CSS在最底部。
3、Javascript
a、去除重复的脚本;
b、尽量减少DOM的访问;
c、JS脚本文件在底部body之前或者之后引入;
d、将JS、CSS文件进行压缩,去除中间的换行和空格等无用内容,减小体积,且注意JS和CSS文件的个数。
4、图片部分
a、优化图片
b、不要使用HTML缩放图片,即不要在HTML中对图片进行设置高度和宽度;
c、使用小且可以存储的favicon.ico图标
5、cookies
a、给cookies减肥;
b、清除不必要的cookies
c、保证cookies尽量小。
5、创建子类Child,使用原型和构造函数的方式继承父类People的方法,并调用say函数说出姓名和年龄。
父类:
function People(name,age){
this.name=name;
this.age=age;
this.say=function(){
console.log("我的名字是:"+this.name+"我今年"+this.age+"岁!");
};
}
复制代码
原型继承:
function Child(name, age){
this.name = name;
this.age = age;
}
Child.prototype = new People();
var child = new Child('Rainy', 20);
child.say()
复制代码
构造函数继承:
function Child(name, age){
People.call(this)
this.name = name;
this.age = age;
}
var child = new Child('Rainy', 20);
child.say()
复制代码
组合继承:
function Child(name, age){
People.call(this);
this.name = name;
this.age = age;
}
Child.prototype = People.prototype;
var child = new Child('Rainy', 20);
child.say()
复制代码
组合继承优化:
function Child(name, age){
People.call(this);
this.name = name;
this.age = age;
}
Child.prototype = Object.create(People.prototype);
Child.prototype.constructor = Child;
var child = new Child('Rainy', 20);
child.say()
复制代码
6、2016-12-12类型的日期格式校验正则表达式
var r=new RegExp("^[1-2]\\d{3}-(0?[1-9]||1[0-2])-(0?[1-9]||[1-2][1-9]||3[0-1])$)")
r.test('2013-23-12')
var str = '9999-12-23';
if(str.match(/^((\d\d\d\d))-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)) {
alert('是日期');
} else {
alert('不是日期');
}
7、使用ajax(可使用jQuery框架,若使用其他框架请注明)写一个跨域异步获取JSON数据方案;说说能否使用JS进行跨域异步post数据
$.ajax
({
type: "POST",
contentType: "application/x-www-form-urlencoded",
dataType: "html",
url: "http://www.*****.com", //这里是网址
success:function(data){alert(data);},
timeout:30000,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
8、请描述zepto touch模块的移动事件?click与tap的区别?tap底层是对哪些事件的封装?
如果手指移动屏幕超过30像素,则触发相应的滑动事件,swipeLeft, swipeRight, swipeUp, swipeDown
一、click 和 tap 比较
两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。
singleTap和doubleTap 分别代表单次点击和双次点击。
二、关于tap的点透处理
在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。
tap 事件相当于 pc 浏览器中的 click 效果,虽然在触屏设备上 click 事件仍然可用,但是在很多设备上,click 会存在一些延迟,如果想要快速响应的 “click” 事件,需要借助 touch 事件来实现。