后面可以是字母、数字、

作者: 前端  发布:2019-11-08

前端参考指南

2015/05/09 · CSS, HTML5, JavaScript · 前端

本文由 伯乐在线 - cucr 翻译,周进林 校稿。未经许可,禁止转载!
英文出处:github.com。欢迎加入翻译组。

1. 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

1、利用图片width显示位置来播放图片,技术:.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left =  、onclick()
2、利用数组放入图片经行轮播,技术:setInterval()。没有onclick()

HTML

  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test("a1a__a1a__a1a__a1a__");

图片轮播12js.html

语义

HTML5为我们提供了大量的语义元素,旨在精准地描述内容。确保你受益于其丰富的词汇。

XHTML

<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>
 
<!-- good -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

确保您理解您正在使用的语义元素。以错误的方式使用语义元素比不使用更糟糕。

XHTML

<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1>

1
2
3
4
5
6
7
8
9
10
11
<!-- bad -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>
 
<!-- good -->
<h1>
  <img alt=Company src=logo.png>
</h1>

2. 截取字符串abcdefg的efg

复制代码 代码如下:

简洁

保持代码简洁。忘记旧的XHTML习惯。

XHTML

<!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- bad -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
 
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>
  1. var str = "abcdefg";
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf("efg"), 3);
  4.      alert(efg);
  5. }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   ";
<html xmlns="" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>images slide</title>
 <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
  }
  img {
   border: 0;
  }
  a {
   text-decoration: none;
  }
  #slide {
   width: 800px;
   height: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
  }
  #slide ul {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 400px;
   width: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: hidden;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
  }
  #slide .ico a {
   display: inline-block;
   width: 10px;
   height:10px;
   background: url(out.png) no-repeat 0px 0px;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   width: 60px;
   height: 400px;
   left: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnLeft :hover {
   background: url() no-repeat 0px 0px;
  }
  #btnRight {
   width: 60px;
   height: 400px;
   right: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnRight :hover {
   background: url() no-repeat 0px 0px;
  }  

可访问性

可访问性不应该是一个事后的想法。你不必成为一位WCAG专家来提升你的网站,你可以立即开始修复这些小问题,它将产生巨大的改善,如:

  • 学会正确使用alt属性
  • 确保你的链接和按钮等都很好地标记(没有<div class =button>这种暴行)
  • 不要完全依赖颜色来传达信息
  • 显式地给表单控件加标签

XHTML

<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1>

1
2
3
4
5
<!-- bad -->
<h1><img alt="Logo" src="logo.png"></h1>
 
<!-- good -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

3. 判断一个字符串中出现次数最多的字符,统计这个次数

 </style>

语言

虽然定义语言和字符编码是可选的,但推荐在文档级别声明它们,即使它们已经在HTTP请求头部已经指定。字符编码优先使用utf – 8。

XHTML

<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>

1
2
3
4
5
6
7
8
9
10
<!-- bad -->
<!doctype html>
<title>Hello, world.</title>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>
  1. //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数
  2. var str = "abcdefgaddda";
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i++) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key]++;
  10.               }
  11. }
  12.  
  13. /*遍历这个hash table,获取value最大的key和value*/
  14. var max = -1;
  15. var max_key = "";
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert("max:"+max+" max_key:"+max_key);

 <script type="text/javascript">
  window.onload = function() {
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a");
   var oSlide = document.getElementById("slide");
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
   var oBtnLeft = document.getElementById("btnLeft");
   var oBtnRight = document.getElementById("btnRight");

性能

除非有一个合理的理由在内容之前加载脚本,否则请不要把它放在前面阻止页面的渲染。如果您的样式表很大,分离出初始化时必须的样式,并在一个独立样式表中延迟加载其它部分。两次HTTP请求显著低于一次,但感知速度是最重要的因素。

XHTML

<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- bad -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
 
<!-- good -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

4. IE与FF脚本兼容性问题

   var baseWidth = aLi[0].offsetWidth;
   //alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length + "px";
   var iNow = 0;
   for(var i=0;i<aBtn.length;i++) { 
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl[0].style.left);
     move(this.index);
     //aIco[this.index].className = "active";
    }
   }
   oBtnLeft.onclick = function() {
    iNow ++;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow --;
    document.title = iNow;
    move(iNow);
   }

CSS

(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex += 1;
    }

分号

技术上来讲,分号在CSS里充当一个分隔符,但请把它当作一个终结符。

CSS

/* bad */ div { color: red } /* good */ div { color: red; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: red
}
 
/* good */
div {
  color: red;
}

(2) 获取事件源
IE用srcElement获取事件源,而FF用target获取事件源

   }

盒模型

盒模型对整个文档应该是相同的。虽然全局样式 * { box-sizing:border-box;} 很好,但不要在特定元素改变默认的盒模型(如果你可以避免这么做)。

CSS

/* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
 
/* good */
div {
  padding: 10px;
}

(3) 添加,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length - 1;
     iNow = index;
    }
    for(var n=0;n<aBtn.length;n++) {
     aBtn[n].className = ""; 
    }
    aBtn[index].className = "active";
    oUl[0].style.left = -index * baseWidth + "px";
    //buffer(oUl[0],{
    // left: -index * baseWidth
    // },8)

不要改变元素的默认行为(如果你可以避免这么做)。尽量保持元素在普通的文档流中。例如,删除图像下面的空白,不应该改变其默认显示:

CSS

/* bad */ img { display: block; } /* good */ img { vertical-align: middle; }

1
2
3
4
5
6
7
8
9
/* bad */
img {
  display: block;
}
 
/* good */
img {
  vertical-align: middle;
}

同样的,不要让一个元素脱离文档流(如果你可以避免这么做)。

CSS

/* bad */ div { width: 100px; position: absolute; right: 0; } /* good */ div { width: 100px; margin-left: auto; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
}
 
/* good */
div {
  width: 100px;
  margin-left: auto;
}

(4) 获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)

   }
  }
  </script>
  </head>
<body>
 <div id="slide">
  <a id="btnLeft" href="javascript:void(0);" ></a>
  <a id="btnRight" href="javascript:void(0);" ></a>
  <!--when change next image:style="left: -(n-1)*800px;"-->
  <ul>
   <li><img src="1.jpg" alt="" /></li>
   <li><img src="2.jpg" alt="" /></li>
   <li><img src="3.jpg" alt="" /></li>
   <li><img src="4.jpg" alt="" /></li>
   <li><img src="5.jpg" alt="" /></li>
   <li><img src="6.jpg" alt="" /></li>
  </ul>
  <div id="ico" class="ico"> 
   <a class="active" href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
  </div>
 </div>
</body>
</html>

位置

有很多方法可以在CSS中定位元素,但尝试限制自己使用下面的属性/值。优先顺序如下:

XHTML

display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed;

1
2
3
4
5
6
display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以

图片自动播放.html

选择器

减少紧耦合的DOM选择器。当你的选择器超过3个结构伪类、后代或兄弟的组合,考虑添加一个class到你需要匹配的元素上。

CSS

/* bad */ div:first-of-type :last-child > p ~ * /* good */ div:first-of-type .info

1
2
3
4
5
/* bad */
div:first-of-type :last-child > p ~ *
 
/* good */
div:first-of-type .info

避免在不必要的时候重载你的选择器。

CSS

/* bad */ img[src$=svg], ul > li:first-child { opacity: 0; } /* good */ [src$=svg], ul > :first-child { opacity: 0; }

1
2
3
4
5
6
7
8
9
/* bad */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}
 
/* good */
[src$=svg], ul > :first-child {
  opacity: 0;
}

(6) input.type的属性
IE:input.type只读
FF:input.type可读写

复制代码 代码如下:

特性

不要让选择器难以覆盖。减少使用 id 和避免 !important。

CSS

/* bad */ .bar { color: green !important; } .foo { color: red; } /* good */ .foo.bar { color: green; } .foo { color: red; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
.bar {
  color: green !important;
}
.foo {
  color: red;
}
 
/* good */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

(7) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>images</title>
 <script type="text/javascript">
  var curIndex = 0;
  var timeInterval = 1000;
  var arr = new Array();
  arr[0] = "1.jpg";
  arr[1] = "2.jpg";
  arr[2] = "3.jpg";
  arr[3] = "4.jpg";
  arr[4] = "5.jpg";
  arr[5] = "6.jpg";
  arr[6] = "7.jpg";
  setInterval(changeImg,timeInterval);
  function changeImg() {
   var obj = document.getElementById("obj");
   if (curIndex == arr.length-1) {
    curIndex = 0;
   } else {
    curIndex += 1;
     }
   obj.src = arr[curIndex];
  }
 </script>

覆盖

覆盖样式让选择器和调试变得不易使用。尽可能避免它。

CSS

/* bad */ li { visibility: hidden; } li:first-child { visibility: visible; } /* good */ li + li { visibility: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}
 
/* good */
li + li {
  visibility: hidden;
}

(8) 是否可用id代替HTML元素
IE:可以用id来代替HTML元素
FF:不可以

 <!-- <script language="javascript">
  setInterval(test,1000);
  var array = new Array();
  var index = 0;
  var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
  function test() {
   var myimg=document.getElementById("imgs");
   if(index==array.length-1)
   { index=0; }else{ index++; }
   myimg.src=array[index];
  }
 </script> -->
 </head>
 <body>
  <img id = "obj" src = "1.jpg" border = 0 />
 </body>
</html>

继承

在可以继承的情况下,不要重复样式声明,。

CSS

/* bad */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* good */ div { text-shadow: 0 1px 0 #fff; }

1
2
3
4
5
6
7
8
9
/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}
 
/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

5. 规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

您可能感兴趣的文章:

  • 使用html+js+css 实现页面轮播图效果(实例讲解)
  • 原生js和css实现图片轮播效果
  • 基于cssSlidy.js插件实现响应式手机图片轮播效果
  • js 图片轮播(5张图片)
  • 原生js和jquery实现图片轮播特效
  • 最简单的JavaScript图片轮播代码(两种方法)
  • JS实现简易图片轮播效果的方法
  • 带左右箭头图片轮播的JS代码
  • js图片轮播效果实现代码
  • JS+HTML+CSS实现轮播效果

简洁

保持代码简洁。使用简写属性,避免在不需要时使用多个属性。

CSS

/* bad */ div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } /* good */ div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}
 
/* good */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

6. javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下:

语言

优先使用英文而不是数学公式

JavaScript

/* bad */ :nth-child(2n + 1) { transform: rotate(360deg); } /* good */ :nth-child(odd) { transform: rotate(1turn); }

1
2
3
4
5
6
7
8
9
/* bad */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}
 
/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}
  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal("Buddy");
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

    7. FF下面实现outerHTML
    FF不支持outerHTML,要实现outerHTML还需要特殊处理
    思路如下:

浏览器引擎前缀

积极删除过时的浏览器引擎前缀。如果你需要使用它们,请在标准属性前插入。

CSS

/* bad */ div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } /* good */ div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* bad */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}
 
/* good */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。

动画

优先使用过渡,而不是动画。避免对 opacity 和 transform 以外的属性使用动画。

CSS

/* bad */ div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } /* good */ div:hover { transition: 1s; transform: translateX(100px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}
 
/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
  2. <html xmlns=";
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>获取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="a"><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type="text/javascript">
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement("div");
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML("a");
  27. </script>
  28. </body>
  29. </html>
  30.  

单位

在可以的情况下,使用没有单位的值。在你使用相对单位时优先 rem 。优先使用秒而不是毫秒。

CSS

/* bad */ div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } /* good */ div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}
 
/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

8. 编写一个方法 求一个字符串的字节长度
假设:一个英文字符占用一个字节,一个中文字符占用两个字节

颜色

如果你需要透明效果,请使用rgba。否则,总是使用十六进制格式。

CSS

/* bad */ div { color: hsl(103, 54%, 43%); } /* good */ div { color: #5a3; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: hsl(103, 54%, 43%);
}
 
/* good */
div {
  color: #5a3;
}
  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i++){
  5.                     if (str.charCodeAt(i) > 255) bytes++;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes("你好,as"));

绘图

当资源可以轻易地通过CSS实现时,避免HTTP请求。

CSS

/* bad */ div::before { content: url(white-circle.svg); } /* good */ div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* bad */
div::before {
  content: url(white-circle.svg);
}
 
/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

9. 编写一个方法 去掉一个数组的重复元素

Hacks

不要使用它们。

CSS

/* bad */ div { // position: relative; transform: translateZ(0); } /* good */ div { /* position: relative; */ will-change: transform; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  // position: relative;
  transform: translateZ(0);
}
 
/* good */
div {
  /* position: relative; */
  will-change: transform;
}
  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i++){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());

JavaScript

10. 写出3个使用this的典型应用
(1)在html元素事件属性中使用,如:

性能

可读性,正确性和可表达性优先于性能。JavaScript基本上永远不会成为你的性能瓶颈。优化图像压缩、网络访问和DOM渲染。如果你仅记得本文的一条原则,记住这条。

JavaScript

// bad (albeit way faster) const arr = [1, 2, 3, 4]; const len = arr.length; var i = -1; var result = []; while (++i < len) { var n = arr[i]; if (n % 2 > 0) continue; result.push(n * n); } // good const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; const square = n => n * n; const result = arr.filter(isEven).map(square);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad (albeit way faster)
const arr = [1, 2, 3, 4];
const len = arr.length;
var i = -1;
var result = [];
while (++i < len) {
  var n = arr[i];
  if (n % 2 > 0) continue;
  result.push(n * n);
}
 
// good
const arr = [1, 2, 3, 4];
const isEven = n => n % 2 == 0;
const square = n => n * n;
 
const result = arr.filter(isEven).map(square);
  1. <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

无污染

尽量保持你的函数干净。所有函数最好无副作用,不使用外部数据,返回新对象而不是改变现有的对象。

JavaScript

// bad const merge = (target, ...sources) => Object.assign(target, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" } // good const merge = (...sources) => Object.assign({}, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

1
2
3
4
5
6
7
// bad
const merge = (target, ...sources) => Object.assign(target, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
 
// good
const merge = (...sources) => Object.assign({}, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

(2)构造函数

原生

尽可能地依靠原生方法。

JavaScript

// bad const toArray = obj => [].slice.call(obj); // good const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();

1
2
3
4
5
6
7
// bad
const toArray = obj => [].slice.call(obj);
 
// good
const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();
  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }

强制转换

当有必要时,拥抱隐式强制转换。否则避免它。不要盲目使用。

JavaScript

// bad if (x === undefined || x === null) { ... } // good if (x == undefined) { ... }

1
2
3
4
5
// bad
if (x === undefined || x === null) { ... }
 
// good
if (x == undefined) { ... }

(3)

循环

当强迫使用可变的对象时,不要使用循环。依靠 array.prototype 中的方法。

JavaScript

// bad const sum = arr => { var sum = 0; var i = -1; for (;arr[++i];) { sum += arr[i]; } return sum; }; sum([1, 2, 3]); // => 6 // good const sum = arr => arr.reduce((x, y) => x + y); sum([1, 2, 3]); // => 6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
const sum = arr => {
  var sum = 0;
  var i = -1;
  for (;arr[++i];) {
    sum += arr[i];
  }
  return sum;
};
 
sum([1, 2, 3]); // => 6
 
// good
const sum = arr =>
  arr.reduce((x, y) => x + y);
 
sum([1, 2, 3]); // => 6

如果你不能,或者使用 array.prototype 方法很虐心。使用递归。

JavaScript

// bad const createDivs = howMany => { while (howMany--) { document.body.insertAdjacentHTML("beforeend", "<div></div>"); } }; createDivs(5); // bad const createDivs = howMany => [...Array(howMany)].forEach(() => document.body.insertAdjacentHTML("beforeend", "<div></div>") ); createDivs(5); // good const createDivs = howMany => { if (!howMany) return; document.body.insertAdjacentHTML("beforeend", "<div></div>"); return createDivs(howMany - 1); }; createDivs(5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// bad
const createDivs = howMany => {
  while (howMany--) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);
 
// bad
const createDivs = howMany =>
  [...Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);
 
// good
const createDivs = howMany => {
  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");
  return createDivs(howMany - 1);
};
createDivs(5);
  1. <input type="button" id="text" value="点击一下" />
  2. <script type="text/<a href=")" class="st_tag internal_tag" rel="tag" title="Posts tagged with Javascript">javascript</a>">
  3. var btn = document.getElementById("text");
  4. btn.onclick = function() {
  5. alert(this.value); //此处的this是按钮元素
  6. }
  7. </script>

Arguments

忘记 arguments 对象。rest 参数一直是一个更好的选择,因为:

  1. 它是命名的,所以它给你一个函数期望arguments的更好的做法
  2. 它是一个真正的数组,这使得它更容易使用。

JavaScript

// bad const sortNumbers = () => Array.prototype.slice.call(arguments).sort(); // good const sortNumbers = (...numbers) => numbers.sort();

1
2
3
4
5
6
// bad
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();
 
// good
const sortNumbers = (...numbers) => numbers.sort();

(4)CSS expression表达式中使用this关键字

Apply

忘记 apply() 。使用 spread 操作符代替。

JavaScript

const greet = (first, last) => `Hi ${first} ${last}`; const person = ["John", "Doe"]; // bad greet.apply(null, person); // good greet(...person);

1
2
3
4
5
6
7
8
const greet = (first, last) => `Hi ${first} ${last}`;
const person = ["John", "Doe"];
 
// bad
greet.apply(null, person);
 
// good
greet(...person);
  1. <table width="100px" height="100px">
  2.      <tr>
  3.               <td>
  4.              <div style="width:expression(this.parentNode.width);">div element</div>
  5.              </td>
  6.      </tr>
  7. </table>

Bind

当有惯用方法时,不要使用 bind() 。

JavaScript

// bad ["foo", "bar"].forEach(func.bind(this)); // good ["foo", "bar"].forEach(func, this); // bad const person = { first: "John", last: "Doe", greet() { const full = function() { return `${this.first} ${this.last}`; }.bind(this); return `Hello ${full()}`; } } // good const person = { first: "John", last: "Doe", greet() { const full = () => `${this.first} ${this.last}`; return `Hello ${full()}`; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// bad
["foo", "bar"].forEach(func.bind(this));
 
// good
["foo", "bar"].forEach(func, this);
// bad
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = function() {
      return `${this.first} ${this.last}`;
    }.bind(this);
    return `Hello ${full()}`;
  }
}
 
// good
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = () => `${this.first} ${this.last}`;
    return `Hello ${full()}`;
  }
}

12. 如何显示/隐藏一个DOM元素?

高阶函数

在不必要时,避免嵌套函数。

JavaScript

// bad [1, 2, 3].map(num => String(num)); // good [1, 2, 3].map(String);

1
2
3
4
5
// bad
[1, 2, 3].map(num => String(num));
 
// good
[1, 2, 3].map(String);
  1. el.style.display = "";
  2. el.style.display = "none";

组合

避免多嵌套函数的调用。使用组合。

JavaScript

const plus1 = a => a + 1; const mult2 = a => a * 2; // bad mult2(plus1(5)); // => 12 // good const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const addThenMult = pipeline(plus1, mult2); addThenMult(5); // => 12

1
2
3
4
5
6
7
8
9
10
const plus1 = a => a + 1;
const mult2 = a => a * 2;
 
// bad
mult2(plus1(5)); // => 12
 
// good
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);
const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12

el是要操作的DOM元素

缓存

缓存功能测试、大数据结构和任何昂贵的操作。

JavaScript

// bad const contains = (arr, value) => Array.prototype.includes ? arr.includes(value) : arr.some(el => el === value); contains(["foo", "bar"], "baz"); // => true // good const contains = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); // => true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
const contains = (arr, value) =>
  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => true
 
// good
const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => true

13. JavaScript中如何检测一个变量是一个String类型?请写出函数实现

变量定义

优先const,再是let,然后是var。

JavaScript

// bad var obj = {}; obj["foo" + "bar"] = "baz"; // good const obj = { ["foo" + "bar"]: "baz" };

1
2
3
4
5
6
7
8
// bad
var obj = {};
obj["foo" + "bar"] = "baz";
 
// good
const obj = {
  ["foo" + "bar"]: "baz"
};

String类型有两种生成方式:
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);

条件

优先使用立即执行函数表达式(IIFE和返回语句,而不是 if,else if 和 switch 语句

JavaScript

// bad var grade; if (result < 50) grade = "bad"; else if (result < 90) grade = "good"; else grade = "excellent"; // good const grade = (() => { if (result < 50) return "bad"; if (result < 90) return "good"; return "excellent"; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
var grade;
if (result < 50)
  grade = "bad";
else if (result < 90)
  grade = "good";
else
  grade = "excellent";
 
// good
const grade = (() => {
  if (result < 50)
    return "bad";
  if (result < 90)
    return "good";
  return "excellent";
})();
  1. function IsString(str){
  2.            return (typeof str == "string" || str.constructor == String);
  3. }
  4. var str = "";
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));

对象迭代

在允许的情况下避免使用 for…in

JavaScript

const shared = { foo: "foo" }; const obj = Object.create(shared, { bar: { value: "bar", enumerable: true } }); // bad for (var prop in obj) { if (obj.hasOwnProperty(prop)) console.log(prop); } // good Object.keys(obj).forEach(prop => console.log(prop));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const shared = { foo: "foo" };
const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});
 
// bad
for (var prop in obj) {
  if (obj.hasOwnProperty(prop))
    console.log(prop);
}
 
// good
Object.keys(obj).forEach(prop => console.log(prop));

14. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

对象映射

当对象合法使用情况下,map 通常是一个更好的,更强大的选择。如果有疑问,请使用 map 。

JavaScript

// bad const me = { name: "Ben", age: 30 }; var meSize = Object.keys(me).length; meSize; // => 2 me.country = "Belgium"; meSize++; meSize; // => 3 // good const me = new Map(); me.set("name", "Ben"); me.set("age", 30); me.size; // => 2 me.set("country", "Belgium"); me.size; // => 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// bad
const me = {
  name: "Ben",
  age: 30
};
var meSize = Object.keys(me).length;
meSize; // => 2
me.country = "Belgium";
meSize++;
meSize; // => 3
 
// good
const me = new Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2
me.set("country", "Belgium");
me.size; // => 3
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.    <title>倒计时</title>
  6. </head>
  7. <body>
  8. <input type="text" value="" id="input" size="1000"/>
  9. <script type="text/javascript">
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 - date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)%60);
  19.       var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
  20.       document.getElementById("input").value = str;
  21.    }
  22.    window.setInterval("counter()", 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  

Curry(柯里化)

柯里局可能在其他语言有它的地位,但避免在 JavaScript 使用。它通过引入外来范式,且相关的用例极不寻常,使得您的代码更难阅读。

JavaScript

// bad const sum = a => b => a + b; sum(5)(3); // => 8 // good const sum = (a, b) => a + b; sum(5, 3); // => 8

1
2
3
4
5
6
7
// bad
const sum = a => b => a + b;
sum(5)(3); // => 8
 
// good
const sum = (a, b) => a + b;
sum(5, 3); // => 8

15. 补充代码,鼠标单击Button1后将Button1移动到Button2的后面

可读性

不要通过看似聪明的技巧来混淆代码的意图。

JavaScript

// bad foo || doSomething(); // good if (!foo) doSomething(); // bad void function() { /* IIFE */ }(); // good (function() { /* IIFE */ }()); // bad const n = ~~3.14; // good const n = Math.floor(3.14);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// bad
foo || doSomething();
 
// good
if (!foo) doSomething();
// bad
void function() { /* IIFE */ }();
 
// good
(function() { /* IIFE */ }());
// bad
const n = ~~3.14;
 
// good
const n = Math.floor(3.14);
  1. <div> <input type=”button” id =”button1″ value=”1″ onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>

  3. <div>

  4.           <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
  5.            <input type="button" id ="button2" value="2" />
  6. </div>
  7. <script type="text/javascript">
  8. function moveBtn(obj) {
  9.           var clone = obj.cloneNode(true);
  10.           var parent = obj.parentNode;
  11.           parent.appendChild(clone);
  12.           parent.removeChild(obj);
  13. }
  14. </script>

代码重用

不要害怕创造大量小,高度可组合、可重用的函数。

JavaScript

// bad arr[arr.length - 1]; // good const first = arr => arr[0]; const last = arr => first(arr.slice(-1)); last(arr); // bad const product = (a, b) => a * b; const triple = n => n * 3; // good const product = (a, b) => a * b; const triple = product.bind(null, 3);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
arr[arr.length - 1];
 
// good
const first = arr => arr[0];
const last = arr => first(arr.slice(-1));
last(arr);
// bad
const product = (a, b) => a * b;
const triple = n => n * 3;
 
// good
const product = (a, b) => a * b;
const triple = product.bind(null, 3);

16. JavaScript有哪几种数据类型
简单:Number,Boolean,String,Null,Undefined
复合:Object,Array,Function

依赖

减少依赖。第三方代码你不熟悉。不要仅仅为了使用一些很容易复制的方法而加载整个库:

JavaScript

// bad var _ = require("underscore"); _.compact(["foo", 0])); _.unique(["foo", "foo"]); _.union(["foo"], ["bar"], ["foo"]); // good const compact = arr => arr.filter(el => el); const unique = arr => [...Set(arr)]; const union = (...arr) => unique([].concat(...arr)); compact(["foo", 0]); unique(["foo", "foo"]); union(["foo"], ["bar"], ["foo"]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
var _ = require("underscore");
_.compact(["foo", 0]));
_.unique(["foo", "foo"]);
_.union(["foo"], ["bar"], ["foo"]);
 
// good
const compact = arr => arr.filter(el => el);
const unique = arr => [...Set(arr)];
const union = (...arr) => unique([].concat(...arr));
 
compact(["foo", 0]);
unique(["foo", "foo"]);
union(["foo"], ["bar"], ["foo"]);

赞 6 收藏 评论

17. 下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewport
borderLeftColor
mozViewport

关于作者:cucr

9159.com 1

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

9159.com 2

18. JavaScript中如何对一个对象进行深度clone

  1. function cloneObject(o) {
  2.         if(!o || 'object' !== typeof o) {
  3.             return o;
  4.        }
  5.        var c = 'function' === typeof o.pop ? [] : {};
  6.        var p, v;
  7.        for(p in o) {
  8.                      if(o.hasOwnProperty(p)) {
  9.                          v = o[p];
  10.                                      if(v && 'object' === typeof v) {
  11.                                          c[p] = Ext.ux.clone(v);
  12.                                     }
  13.                                     else {
  14.                                        c[p] = v;
  15.                          }
  16.         }
  17.     }
  18.     return c;
  19. };

19. 如何控制alert中的换行

  1. n alert(“pnp”);

20. 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
  2. <html xmlns=";
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>鼠标点击页面中的任意标签,alert该标签的名称</title>
  6. <style>
  7. 9159.com,div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. <script type="text/javascript">
  12. document.onclick = function(evt){
  13. var e = window.event || evt;
  14. var tag = e["target"] || e["srcElement"];
  15. alert(tag.tagName);
  16. };
  17. </script>
  18. </head>
  19. <body>
  20. <div id="div"><span>SPAN</span>DIV</div>
  21. <span>SPAN</span>
  22. <p>P</p>
  23. </body>
  24. </html>
  25.  

21. 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:
var url = “″;

  1. function parseQueryString(url){
  2.            var params = {};
  3.            var arr = url.split("?");
  4.            if (arr.length <= 1)
  5.                            return params;
  6.            arr = arr[1].split("&");
  7.            for(var i=0, l=arr.length; i<l; i++){
  8.                            var a = arr[i].split("=");
  9.                            params[a[0]] = a[1];
  10.            }
  11.            return params;
  12. }
  13.  
  14. var url = "";
  15. var ps = parseQueryString(url);
  16. alert(ps["key1"]);

22. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术:
XHTML:对应W3C的XHTML规范,目前是XHTML1.0。

CSS:对应W3C的CSS规范,目前是CSS2.0
DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中
JavaScript:对应于ECMA的ECMAScript规范
XML:对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest:对应WhatWG的Web Applications1.0规范()

同步:脚本会停留并等待服务器发送回复然后再继续
异步:脚本允许页面继续其进程并处理可能的回复

跨域问题简单的理解就是因为JS同源策略的限制,a.com域名下的JS无法操作b.com或c.a.com下的对象,具体场景如下:

PS:(1)如果是端口或者协议造成的跨域问题前端是无能为力的

(2) 在跨域问题上,域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法:
(1) document.domain+iframe
(2) 动态创建script标签

23. 什么是闭包?下面这个ul,如何点击每一列的时候alert其index?

  1. <ul id=”test”>
  2.     <li>这是第一条</li>
  3.     <li>这是第二条</li>
  4.     <li>这是第三条</li>
  5. </ul>

两种方案,一是给每个li加一个自定义属性,然后在点击事件中alert出就行,

二是利用闭包。这两种方法各有利弊,前者简单,但增加了自定义属性,改变了页面HTML代码,后者代码简洁但增加了内存消耗。代码如下:

第一种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute("index",i);
        lis[i].onclick=function(){
            alert(this.getAttribute("index"));
        }
    }

 第二种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(x){
            return function(){
                alert(x);
            }
        }(i);
    }

 

24. 请给出异步加载js方案,不少于两种
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

异步加载方式:
(1) defer,只支持IE
(2) async:
(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:

  1. function loadScript(url, callback){
  2.              var script = document.createElement("script")
  3.              script.type = "text/javascript";
  4.                             if (script.readyState){ //IE
  5.                                          script.onreadystatechange = function(){
  6.                                             if (script.readyState == "loaded" ||
  7.                                                         script.readyState == "complete"){
  8.                                                         script.onreadystatechange = null;
  9.                                                         callback();
  10.                                                      }
  11.                                           };
  12.                            } else { //Others: Firefox, Safari, Chrome, and Opera
  13.                                    script.onload = function(){
  14.                                      callback();
  15.                               };
  16.      }
  17.     script.src = url;
  18.     document.body.appendChild(script);
  19. }

25. 请设计一套方案,用于确保页面中JS加载完全。

  1. var n = document.createElement("script");
  2. n.type = "text/javascript";
  3. //以上省略部分代码
  4. //ie支持script的readystatechange属性
  5. if(ua.ie){
  6.    n.onreadystatechange = function(){
  7.        var rs = this.readyState;
  8.        if('loaded' === rs || 'complete'===rs){
  9.            n.onreadystatechange = null;
  10.            f(id,url); //回调函数
  11.        }
  12. };
  13. //省略部分代码
  14. //safari 3.x supports the load event for script nodes(DOM2)
  15.    n.addEventListener('load',function(){
  16.        f(id,url);
  17.    });
  18. //firefox and opera support onload(but not dom2 in ff) handlers for
  19. //script nodes. opera, but no ff, support the onload event for link
  20. //nodes.
  21. }else{
  22.    n.onload = function(){
  23.        f(id,url);
  24.    };
  25. }

26. js中如何定义class,如何扩展prototype?
Ele.className = “***”; //***在css中定义,形式如下:.*** {…}
A.prototype.B = C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值

27. 如何添加html元素的事件,有几种方法.
(1) 为HTML元素的事件属性赋值
(2) 在JS中使用ele.on*** = function() {…}
(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

28. documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

29. 多浏览器检测通过什么?
(1) navigator.userAgent
(2) 不同浏览器的特性,如addEventListener

30. js的基础对象有那些, window和document的常用的方法和属性列出来
String,Number,Boolean

Window:
方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性:name,parent,screenLeft,screenTop,self,top,status

Document
方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性:cookie,doctype,domain,documentElement,readyState,URL,

31. 前端开发的优化问题
(1) 减少http请求次数:css spirit,data uri
(2) JS,CSS源码压缩
(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
(5) 用setTimeout来避免页面失去响应
(6) 用hash-table来优化查找
(7) 当需要设置的样式很多时设置className而不是直接操作style
(8) 少用全局变量
(9) 缓存DOM节点查找的结果
(10) 避免使用CSS Expression
(11) 图片预载
(12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢

32. 如何控制网页在网络传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性

33. Flash、Ajax各自的优缺点,在使用中如何取舍?
Ajax的优势
(1) 可搜索性
(2) 开放性
(3) 费用
(4) 易用性
(5) 易于开发

Flash的优势
(1) 多媒体处理
(2) 兼容性
(3) 矢量图形 比SVG,Canvas优势大很多
(4) 客户端资源调度,比如麦克风,摄像头

 

 

本文转载自

本文由9159.com发布于前端,转载请注明出处:后面可以是字母、数字、

关键词:

上一篇:没有了
下一篇:按资源划分,原文出处