专业技能

1.移动端前端开发，PC端前端开发

　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局

等方面的不同，但是还是很不系统，所以这里做一个总结。

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，

一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

第二：在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，

这样的问题在PC端都是遇不到的。

第三：在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

第四：在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，

而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单、效率又高。

第五：微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。

第六：百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，

在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。

第八：一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的，所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，

在移动端的差别还是挺大的。

而未压缩的jquery是262kb，压缩的jquey是83kb，可见两者的差别之大。

第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，

想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。

第十：性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

第十一：比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，

所以可以使用hammer-time.js来移除这300ms的延迟。

2.移动端与PC端比有哪些不同？

关于移动端：

1、iPhone上submit按钮bug：iPhone上的控件（<button>、<input>之类的）若不写-webkit-appearance: none; 的话，就算你已经做好了控件的样式，iPhone还是会使用自身默认的样式。
2、移动端的自动播放功能：移动端浏览器大部分是禁用video和audio的autoplay功能，并且，很多移动浏览器也不支持首次js调用play方法进行播放。（此段内容摘抄自百度回答~）
3、手机端的字体显示问题：手机端文本字的大小也有点不一样，iPhone上最小字体可以显示10px，安卓大部分手机由于不是高清显示屏，像素不够只能最小显示12px的字体。编写的时候需要注意。
4、移动端设备的分辨率：iPhone设备分辨率宽度分别为640、750、828，我们这里现在的设计稿一般是使用750的宽度，实际开发时需要将宽高减半，包括字体（字体在小于24px的情况是需要与设计师确认是否为系统字，减半后安卓在字体小于10px时会按照12px大小显示）

几点响应屏幕大小的建议和方法：

1、由于现在手机屏幕多种多样，想要兼容所有设备所需要开发的经验必须非常丰富，对设计师的要求也非常高，如果是初学或者开发经验较少，可将设备分为手机、平板、PC三种页面来写。
2、宽度的响应：宽度的响应最近使用的最多的就是类似以下这种写法

width:calc(100% - 10px);

width:-webkit-calc(100% - 10px);

width:-moz-calc(100% - 10px);

好处是可以很好的控制布局，把已知的宽度和整列宽度结合在一起使用，方便设置位置。
另外有些比较奇葩的手机游览器可能不兼容css3的属性，这时你可以使用以下代码来加强你代码的健壮性

@media screen and (max-width: 355px) { //宽度小于355px时

... //添加属性

}

3、图片的处理：由于各个设备的分辨率不同，理论上需要切出不同设备大小的图片，并且判断当前设备的分辨率再调用相对应的图片。但操作起来实在是过于困难，所以一般都是使用同一张图片来显示。

===================补充时间：2015-08-11====================
我来说说calc()的兼容问题：
calc()属性也是近两个月才使用的，目前仅有一台安卓的测试机放到我们自制的app平台上使用时无法读取该样式，该机器在自带的游览器内看是可以正常显示的。我们的处理方法是在使用calc()的上面写上普通的样式，例如：

width:95%;

width:calc(100% - 10px);

width:-webkit-calc(100% - 10px);

width:-moz-calc(100% - 10px);

当游览器无法读取样式时会使用最上面的widht：95%;这样会与实际设计稿有些许出入，所以使用时谨慎对待~

3.W3c标准

W3C标准万维网联盟标准。

　　万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：

结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。网页通过W3C标准的步骤：1、图片的alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。2、每个文档必须加上DTD声明。a) !DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.3、RSS的XML通过时其中的域名地址必须与检测的地址一致，否则会报错。4、标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);5、同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。<div id="a1">111</div><div id="a1">222</div>如果不用W3C来检测的话，在CSS设计里是允许这样做的。那是程序的角度不能相同，CSS上是可以相同的!之前就是相同的产生问题，后面就改成类引用了!6、不可省略双引号或单引号。a) 这个是指属性，标准是双引号~单引号也能通过验证。7、标签之间不可错位嵌套。<div class="CaseDetaListSS">原文链接：<a href='/html/cases/cases_61.html'>官方网站</div></a>这是不允许的。8、所有的标签都使用小写。9、FLASH的标签代码中不能含有,必须采用其它的方法实现。10、所有的标签中含有的属性必须有值(官方的说法)。11、标签必须配对完成,单标签必须以/关闭12、JS和CSS外部引入文件必须加上类型定义。13、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。14、页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“

4.使用响应式布局

一开始并没有响应式布局这个词语，但是慢慢就出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现，就好比3G网络出现之前，没人知道自己手机用的是2G网络。所以3G和2G是一起出现了，技术上当然是2G技术先出现。同理，渐进增强出现之后，另一个词[优雅降级]也随之出现了

响应式布局和自适应的区别：

首先两种的方式的解决问题是不一样的。

自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度，多点百分比

(3)相对大小的字体:

字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

(4)流式布局，

float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

(5)选择加载css，

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

但是无论怎样，他们主体的内容和布局是没有变的。

响应式的概念应该覆盖了自适应，而且涵盖的内容更多。

响应式布局等于流动网格布局，

而自适应布局等于使用固定分割点来进行布局。

自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。

响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。）

3. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {

  #head { … }

  #content { … }

  #footer { … }

这里的样式就会覆盖上面已经定义好的样式。

4. 设置多种试图宽度

假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就这样的一个原理。

一些注意的

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }

#content { width: 50%; }

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：

<img src="image.jpg"

     data-src-600px="image-600px.jpg"

     data-src-800px="image-800px.jpg"

     alt="">

CSS 控制：

@media (min-device-width:600px) {

    img[data-src-600px] {

        content: attr(data-src-600px, url);

@media (min-device-width:800px) {

    img[data-src-800px] {

        content: attr(data-src-800px, url);

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

5.移动web开发响应式布局总结

首先来理解三个概念。

一、viewport深入理解

　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

　该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
　
　点击这里查看viewport详细介绍

二、flexbox弹性盒子布局

　flexbox是css3的新属性，具有新旧两个版本。
　flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为flex）。
　flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。
　详细的介绍点击链接　flexbox详细介绍

三、媒体查询@media query

　 media query是css3的新属性，针对不同的设备可以使用不同的css属性。用起来很简单，直接在css文件中添加以下代码即可：
　 @media 媒体设备 and(条件)。
　看下面的代码，在不同屏幕宽度下使用不同的css样式：

@media only screen and (max-width: 2000px) {

    html {

        font-size: 150%;/*20 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 1500px) {

    html {

        font-size: 125%;/*20 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 1280px) {

    html {

        font-size: 110.6%;/*17 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 720px) {

    html {

        font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 600px) {

    html {

        font-size: 50%;/*8 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 414px) {

    html {

        font-size: 50%;/*7 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 375px) {

    html {

        font-size: 37.5%;/*6 ÷ 16 × 100% = 62.5%*/

@media only screen and (max-width: 320px) {

    html {

        font-size: 31.25%;/*5 ÷ 16 × 100% = 62.5%*/

@font-face {

    font-family:"acme";

    src: url(acme.TTF);

再看一下如何进行响应式设计：

6.响应式设计总结：

1.使用百分比布局

仅仅使用媒体查询来适应不同的固定宽度设计，只会从一组css到另一组css切换，两种之间没有任何平滑的渐变。当没有命中媒体查询时，变现就会变得不可控制（滚动，换行）。

2.设置弹性图片

img {

    max-width: 100%;

很简单，如同第一点布局使用百分比，图片也使用百分比。其背后的思路是：无论何时，都全包在图片的元素宽度范围内，以最大宽度同比完整的显示图片。

3.重新布局，显示与隐藏

当页面达到查手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，简洁。所以我们必须要做出一下处理：

同比例缩减元素尺寸
调整页面结构布局
隐藏冗余元素
注：经常要切换的位置元素使用绝对定位，减少重绘提高渲染能力。

解决手机端一像素边框问题：
在高清屏下，有时候当我们设置手机边框为1px的时候，实际看起来并没有那么精致，那是因为在高清屏幕下1px用2dp去渲染。如果我们将边框设置为border : 0.5px 是否可行呢？答案是仅在ios8下可用。现在一种比较成熟的写法是用到了scacleY(0.5)。我们知道scacleY(value)中，当value>1表示垂直方向的扩大，<1表示缩放，具体写法如下：

.sidebar .folder li {
/*border-bottom: 0.5px solid #000;*/
padding: 8px 0 8px 15px;
positon: relative;
}
.folder li:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
border-bottom: 1px solid #ddd;
-webkit-tranform: scaleY(0.5);
}

7. ajax五步使用法:

1. 建立XMLHTTPRequest对象(创建异步对象)
2. 注册回调函数(设置请求的url等参数)

当服务器回应我们了,我们想要执行什么逻辑

1. 使用open方法设置和服务器端交互的基本信息(发送请求)

设置提交的网址,数据,post提交的一些额外内容

1. 设置发送的数据，开始和服务器端交互(注册事件)

发送数据

1. 更新界面(在注册的事件中获取返回的内容,并修改页面显示)

在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET

get的数据,直接在请求的url中添加即可

<script type="text/javascript">

    // 创建XMLHttpRequest 对象

    var xml = new XMLHttpRequest();

    // 设置跟服务端交互的信息

    xml.open('get','01.ajax.php?name=fox');

    xml.send(null);    // get请求这里写null即可

    // 接收服务器反馈

    xhr.onreadystatechange = function () {

        // 这步为判断服务器是否正确响应

        if (xhr.readyState == 4 && xhr.status == 200) {

            // 打印响应内容

            alert(xml.responseText);

};

</script>

示例代码:POST

<script type="text/javascript">

    // 异步对象

    var xhr = new XMLHttpRequest();

    // 设置属性

    xhr.open('post', '02.post.php' );

    // 如果想要使用post提交数据,必须添加

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    // 将数据通过send方法传递

    xhr.send('name=fox&age=18');

    // 发送并接受返回值

    xhr.onreadystatechange = function () {

    // 这步为判断服务器是否正确响应

    if (xhr.readyState == 4 && xhr.status == 200) {

           alert(xhr.responseText);

};

</script>

清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

◆清除浮动不是不用浮动，清除浮动产生的不利影响。

◆清除浮动的方法

clear: left | right | both

工作里用的最多的是clear:both;

★额外标签法

在最后一个浮动元素后添加标签,。

★给父集元素使用overflow:hidden; bfc

如果有内容出了盒子，不能使用这个方法。

★伪元素清除浮动推荐使用

8 渐进增强优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，

然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，

然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，

向上兼容的很少。大多数软件都是向下兼容的，比如说Office2010能打开Office2007，Office2006，Office2005，Office2003等建的word文件，但是用Office2003就不能打开用Office2007，Office2010等建的word文件！

二者区别

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。

关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后

阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (

poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，

其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，

有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。

这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

8.浅析JSONP解决Ajax跨域访问问题的思路详解

前几天，工作上有一新需求，需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种，本例采用jQuery+Ajax，完成后，在本地调试了一切ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事？代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档或脚本在同一域名下的内容。不同域名下的脚本不能互相访问，即便是子域也不行。

但是有时候又不可避免地需要进行跨域操作，这时候“同源策略”就是一个限制了，怎么办呢？采用JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并探讨下JSONP跨域的原理。

这里提到了JSONP，那有人就问了，它同JSON有什么区别不同和区别呢，接下我们就来看看，百度百科有以下说明：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

到这里，应该明白了，JSON是一种轻量级的数据交换格式，像xml一样，是用来描述数据间的。JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。

那JSONP是如何工作的呢，我们知道，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。若要跨域请求出于安全性考虑是不行的，但是我们发现，Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>，这时候，聪明的程序猿就想到了变通的方法，如果要进行跨域请求，通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，这不就突破同源策略的限制，解决了跨域访问的问题了么。

下面我们就看下怎么实现：

前端代码：

function CallWebServiceByJsonp() {

$("#SubEquipmentDetails").html('');

$.ajax({

type: "GET",

cache: false,

url: "http://servername/webservice/webservice.asmx/GetSingleInfo",

data: { strCparent: $("#Equipment_ID").val() },

dataType: "jsonp",

//jsonp: "callback",

jsonpCallback: "OnGetMemberSuccessByjsonp"

});

}

function OnGetMemberSuccessByjsonp(data) {

//处理data

alert(data);

}

后端的WebService代码：

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

public void GetSingleInfo(string strCparent)

{

string ret = string.Empty;

HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";

string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();

//string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim();

//上面代码必须

//中间代码执行自己的业务操作，可返回自己的任意信息（多数据类型）

BLL.equipment eq_bll = new BLL.equipment();

List<Model.equipment> equipmentList = new List<Model.equipment>();

equipmentList = eq_bll.GetModelEquimentList(strCparent);

ret = JsonConvert.SerializeObject(equipmentList);

//下面代码必须

HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret));

HttpContext.Current.Response.End();

}

如上所示，前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法，后台的GetSingleInfo方法，使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象，返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。

JSONP的缺点：

JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。

9.对网站的文件和资源进行优化?

　　文件合并

　　文件最小化/文件压缩

　　使用CDN托管

　　缓存的使用

10.Angularjs十大经典面试题

原创 2016年12月30日 14:19:20

44371

1. `ng-show/ng-hide` 与 `ng-if`的区别？

我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

2.解释下什么是`$rootScrope`以及和`$scope`的区别？

通俗的说$rootScrope 页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。

step1:Angular解析ng-app然后在内存中创建$rootScope。

step2:angular回继续解析，找到{{}}表达式，并解析成变量。

step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

3. 表达式 `{{yourModel}}`是如何工作的？

它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。

4. Angular中的digest周期是什么？

每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。更深层次的研究，可以移步The Digest Loop and apply。

5. 如何取消 `$timeout`, 以及停止一个`$watch()`?

停止 $timeout我们可以用cancel：

var customTimeout = $timeout(function () {

  // your code

}, 1000);

$timeout.cancel(customTimeout);

停掉一个$watch：

// .$watch() 会返回一个停止注册的函数

function that we store to a variable

var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {

  if (newVal) {

    // we invoke that deregistration function, to disable the watch

    deregisterWatchFn();

...

});

6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

restrict中可以分别设置:

A匹配属性
E匹配标签
C匹配class
M 匹配注释

当然你可以设置多个值比如AEC,进行多个匹配。

在scope中，@,=,&在进行值绑定时分别表示

@获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;
= 双向绑定，绑定scope上的一些属性；
& 用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数

angular.module('docsIsolationExample', [])

.controller('Controller', ['$scope', function($scope) {

  $scope.alertName = function() {

      alert('directive scope &');

}])

.directive('myCustomer', function() {

  return {

    restrict: 'E',

    scope: {

      clickHandle: '&'

},

    template: '<button ng-click="testClick()">Click Me</button>',

    controller: function($scope) {

      $scope.testClick = function() {

        $scope.clickHandle();

};

});

<div ng-app="docsIsolationExample">

<div ng-controller="Controller">

  <my-customer click-handle="alertName()"></my-customer>

</div>

 </div>

Codepen Demo

< 进行单向绑定。

7. 列出至少三种实现不同模块之间通信方式？

Service
events,指定绑定的事件
使用 $rootScope
controller之间直接使用$parent, $$childHead等
directive 指定属性进行数据绑定

8. 有哪些措施可以改善Angular 性能

官方提倡的，关闭debug,$compileProvider

myApp.config(function ($compileProvider) {

  $compileProvider.debugInfoEnabled(false);

});

使用一次绑定表达式即{{::yourModel}}
减少watcher数量
在无限滚动加载中避免使用ng-repeat,关于解决方法可以参考这篇文章
使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

console.time("TimerName");

//your code

console.timeEnd("TimerName");

9. 你认为在Angular中使用jQuery好么？

这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候，我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了很多api可以完全替代掉jQuery中常用的api，我们可以使用angular.element，$http,$timeout,ng-init等。

我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。

所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去遵循angular的设计。

10. 如何进行angular的单元测试

我们可以使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。一段简单的测试代码：

describe('calculator', function () {

  beforeEach(module('calculatorApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){

    $controller = _$controller_;

  }));

  describe('sum', function () {

        it('1 + 1 should equal 2', function () {

            var $scope = {};

            var controller = $controller('CalculatorController', { $scope: $scope });

            $scope.x = 1;

            $scope.y = 2;

            $scope.sum();

            expect($scope.z).toBe(3);

});

});

});

11.AngularJS 常见面试问题

面试

angular.js

huangtengfei 2016年06月30日发布

赞 | 10收藏 | 217
50.4k 次浏览

问题来源：如何衡量一个人的 AngularJS 水平？

ng-if 跟 ng-show/hide 的区别有哪些？

第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。

第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

<p>{{name}}</p>

<div ng-if="true">

    <input type="text" ng-model="name">

</div>

ng-show 不存在此问题，因为它不自带一级作用域。

避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。

详见 AngularJS 中的作用域

ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。

ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

举个栗子：

<p>{{parseInt(55.66)}}<p>

会发现，什么也没有显示。

但如果在 $scope 中添加了这个函数：

$scope.parseInt = function(x){

    return parseInt(x);

这样自然是没什么问题了。

对于这种需求，使用一个 filter 或许是不错的选择：

<p>{{13.14 | parseIntFilter}}</p>

app.filter('parseIntFilter', function(){

    return function(item){

        return parseInt(item);

})

`{{now | 'yyyy-MM-dd'}}` 这种表达式里面，竖线和后面的参数通过什么方式可以自定义？

filter，格式化数据，接收一个输入，按某规则处理，返回处理结果。

内置 filter

ng 内置的 filter 有九种：

date（日期）
currency（货币）
limitTo（限制数组或字符串长度）
orderBy（排序）
lowercase（小写）
uppercase（大写）
number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）
filter（处理一个数组，过滤出含有某个子串的元素）
json（格式化 json 对象）

filter 有两种使用方法，一种是直接在页面里：

<p>{{now | date : 'yyyy-MM-dd'}}</p>

另一种是在 js 里面用：

// $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)

$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

自定义 filter

// 形式

app.filter('过滤器名称',function(){

    return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){

        //...做一些事情

        return 处理后的对象;

});

// 栗子

app.filter('timesFilter', function(){

    return function(item, times){

        var result = '';

        for(var i = 0; i < times; i++){

            result += item;

        return result;

})

factory、service 和 provider 是什么关系？

factory

把 service 的方法和数据放在一个对象里，并返回这个对象

app.factory('FooService', function(){

    return {

        target: 'factory',

        sayHello: function(){

            return 'hello ' + this.target;

});

service

通过构造函数方式创建 service，返回一个实例化对象

app.service('FooService', function(){

    var self = this;

    this.target = 'service';

    this.sayHello = function(){

        return 'hello ' + self.target;

});

provider

创建一个可通过 config 配置的 service，$get 中返回的，就是用 factory 创建 service 的内容

app.provider('FooService', function(){

    this.configData = 'init data';

    this.setConfigData = function(data){

        if(data){

            this.configData = data;

    this.$get = function(){

        var self = this;

        return {

            target: 'provider',

            sayHello: function(){

                return self.configData + ' hello ' + this.target;

});

// 此处注入的是 FooService 的 provider

app.config(function(FooServiceProvider){

    FooServiceProvider.setConfigData('config data');

});

从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其 $get 中定义的内容。factory 和 service 功能类似，只不过 factory 是普通 function，可以返回任何东西（return 的都可以被访问，所以那些私有变量怎么写，你懂的）；service 是构造器，可以不返回（绑定到 this 的都可以被访问）；provider 是加强版 factory，返回一个可配置的 factory。

详见 AngularJS 之 Factory vs Service vs Provider

angular 的数据绑定采用什么机制？详述原理

脏检查机制。

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。

原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。

举个栗子

<button ng-click="val=val+1">increase 1</button>

click 时会产生一次更新的操作（至少触发两次 $digest 循环）

按下按钮
浏览器接收到一个事件，进入到 angular context
$digest 循环开始执行，查询每个 $watch 是否变化
由于监视 $scope.val 的 $watch 报告了变化，因此强制再执行一次 $digest 循环
新的 $digest 循环未检测到变化
浏览器拿回控制器，更新 $scope.val 新值对应的 dom

$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。

详见关于 AngularJS 的数据绑定

两个平级界面块 a 和 b，如果 a 中触发一个事件，有哪些方式能让 b 知道？详述原理

这个问题换一种说法就是，如何在平级界面模块间进行通信。有两种方法，一种是共用服务，一种是基于事件。

共用服务

在 Angular 中，通过 factory 可以生成一个单例对象，在需要通信的模块 a 和 b 中注入这个对象即可。

基于事件

这个又分两种方式

第一种是借助父 controller。在子 controller 中向父 controller 触发（$emit）一个事件，然后在父 controller 中监听（$on）事件，再广播（$broadcast）给子 controller ，这样通过事件携带的参数，实现了数据经过父 controller，在同级 controller 之间传播。

第二种是借助 $rootScope。每个 Angular 应用默认有一个根作用域 $rootScope，根作用域位于最顶层，从它往下挂着各级作用域。所以，如果子控制器直接使用 $rootScope 广播和接收事件，那么就可实现同级之间的通信。

详见 AngularJS 中 Controller 之间的通信

一个 angular 应用应当如何良好地分层？

目录结构的划分

对于小型项目，可以按照文件类型组织，比如：

css

js

  controllers

  models

  services

  filters

templates

但是对于规模较大的项目，最好按业务模块划分，比如：

css

modules

  account

    controllers

    models

    services

    filters

    templates

  disk

    controllers

    models

    services

    filters

    templates

modules 下最好再有一个 common 目录来存放公共的东西。

逻辑代码的拆分

作为一个 MVVM 框架，Angular 应用本身就应该按照模型，视图模型（控制器），视图来划分。

这里逻辑代码的拆分，主要是指尽量让 controller 这一层很薄。提取共用的逻辑到 service 中（比如后台数据的请求，数据的共享和缓存，基于事件的模块间通信等），提取共用的界面操作到 directive 中（比如将日期选择、分页等封装成组件等），提取共用的格式化操作到 filter 中等等。

在复杂的应用中，也可以为实体建立对应的构造函数，比如硬盘（Disk）模块，可能有列表、新建、详情这样几个视图，并分别对应的有 controller，那么可以建一个 Disk 构造函数，里面完成数据的增删改查和验证操作，有跟 Disk 相关的 controller，就注入 Disk 构造器并生成一个实例，这个实例就具备了增删改查和验证方法。这样既层次分明，又实现了复用（让 controller 层更薄了）。

参考 AngularJS在苏宁云中心的深入实践

angular 应用常用哪些路由库，各自的区别是什么？

Angular1.x 中常用 ngRoute 和 ui.router，还有一种为 Angular2 设计的 new router（面向组件）。后面那个没在实际项目中用过，就不讲了。

无论是 ngRoute 还是 ui.router，作为框架额外的附加功能，都必须以模块依赖的形式被引入。

区别

ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。

ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。

使用 ui.router 能够定义有明确父子关系的路由，并通过 ui-view 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，如果同时在父子视图中使用了 <div ng-view></div> 会陷入死循环。

示例

ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);

app.config(function($routeProvider){

    $routeProvider

        .when('/main', {

            templateUrl: "main.html",

            controller: 'MainCtrl'

})

        .otherwise({ redirectTo: '/tabs' });

ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);

app.config(function($urlRouterProvider, $stateProvider){

    $urlRouterProvider.otherwise("/index");

    $stateProvider

        .state("Main", {

            url: "/main",

            templateUrl: "main.html",

            controller: 'MainCtrl'

})

如果通过angular的directive规划一套全组件化体系，可能遇到哪些挑战？

没有自己用 directive 做过一全套组件，讲不出。

能想到的一点是，组件如何与外界进行数据的交互，以及如何通过简单的配置就能使用吧。

分属不同团队进行开发的 angular 应用，如果要做整合，可能会遇到哪些问题，如何解决？

可能会遇到不同模块之间的冲突。

比如一个团队所有的开发在 moduleA 下进行，另一团队开发的代码在 moduleB 下

angular.module('myApp.moduleA', [])

    .factory('serviceA', function(){

...

})

angular.module('myApp.moduleB', [])

    .factory('serviceA', function(){

...

})

angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])

会导致两个 module 下面的 serviceA 发生了覆盖。

貌似在 Angular1.x 中并没有很好的解决办法，所以最好在前期进行统一规划，做好约定，严格按照约定开发，每个开发人员只写特定区块代码。

angular 的缺点有哪些？

强约束

导致学习成本较高，对前端不友好。

但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。

不利于 SEO

因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。

一种解决办法是，对于正常用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。

性能问题

作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。

可以用来优化 Angular 应用的性能的办法：

减少监控项（比如对不会变化的数据采用单向绑定）
主动设置索引（指定 track by，简单类型默认用自身当索引，对象默认使用 $$hashKey，比如改为 track by item.id）
降低渲染数据量（比如分页，或者每次取一小部分数据，根据需要再取）
数据扁平化（比如对于树状结构，使用扁平化结构，构建一个 map 和树状数据，对树操作时，由于跟扁平数据同一引用，树状数据变更会同步到原始的扁平数据）

另外，对于Angular1.x ，存在脏检查和模块机制的问题。

移动端

可尝试 Ionic，但并不完善。

参考如何看2015年1月Peter-Paul Koch对Angular的看法？

如何看待 angular 1.2 中引入的 controller as 语法？

最根本的好处

在 angular 1.2 以前，在 view 上的任何绑定都是直接绑定在 $scope 上的

function myCtrl($scope){

    $scope.a = 'aaa';

    $scope.foo = function(){

...

使用 controllerAs，不需要再注入 $scope，controller 变成了一个很简单的 javascript 对象（POJO），一个更纯粹的 ViewModel。

function myCtrl(){

    // 使用 vm 捕获 this 可避免内部的函数在使用 this 时导致上下文改变

    var vm = this;

    vm.a = 'aaa';

原理

从源码实现上来看，controllerAs 语法只是把 controller 这个对象的实例用 as 别名在 $scope 上创建了一个属性。

if (directive.controllerAs) {

    locals.$scope[directive.controllerAs] = controllerInstance;

但是这样做，除了上面提到的使 controller 更加 POJO 外，还可以避免遇到 AngularJS 作用域相关的一个坑（就是上文中 ng-if 产生一级作用域的坑，其实也是 javascript 原型链继承中值类型继承的坑。因为使用 controllerAs 的话 view 上所有字段都绑定在一个引用的属性上，比如 vm.xx，所以坑不再存在）。

<div ng-controller="TestCtrl as vm">

    <p>{{name}}</p>

    <div ng-if="vm.name">

        <input type="text" ng-model="vm.name">

    </div>

</div>

问题

使用 controllerAs 会遇到的一个问题是，因为没有注入 $scope，导致 $emit、 $broadcast、 $on、 $watch 等 $scope 下的方法无法使用。这些跟事件相关的操作可以封装起来统一处理，或者在单个 controller 中引入 $scope，特殊对待。

参考 angular controller as syntax vs scope

详述 angular 的 “依赖注入”

栗子

依赖注入是一种软件设计模式，目的是处理代码之间的依赖关系，减少组件间的耦合。

举个栗子，如果没有使用 AngularJS，想从后台查询数据并在前端显示，可能需要这样做：

var animalBox = document.querySelector('.animal-box');

var httpRequest = {

    get: function(url, callback){

        console.log(url + ' requested');

        var animals = ['cat', 'dog', 'rabbit'];

        callback(animals);

var render = function(el, http){

    http.get('/api/animals', function(animals){

        el.innerHTML = animals;

})

render(httpRequest, animalBox);

但是，如果在调用 render 的时候不传参数，像下面这样，会报错，因为找不到 el 和 http（定义的时候依赖了，运行的时候不会自动查找依赖项）

render();

// TypeError: Cannot read property 'get' of undefined

而使用 AngularJS，可以直接这样

function myCtrl = ($scope, $http){

    $http.get('/api/animals').success(function(data){

        $scope.animals = data;

})

也就是说，在 Angular App 运行的时候，调用 myCtrl，自动做了 $scope 和 $http 两个依赖性的注入。

原理

AngularJS 是通过构造函数的参数名字来推断依赖服务名称的，通过 toString() 来找到这个定义的 function 对应的字符串，然后用正则解析出其中的参数（依赖项），再去依赖映射中取到对应的依赖，实例化之后传入。

简化一下，大概是这样：

var inject = {

    // 存储依赖映射关系

    storage: {},

    // 注册依赖

    register: function(name, resource){

        this.storage[name] = resource;

},

    // 解析出依赖并调用

    resolve: function(target){

        var self = this;

        var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;

        var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

        fnText = target.toString().replace(STRIP_COMMENTS, '');

        argDecl = fnText.match(FN_ARGS)[1].split(/, ?/g);

        var args = [];

        argDecl.forEach(function(arg){

            if(self.storage[arg]){

                args.push(self.storage[arg]);

})

        return function(){

            target.apply({}, args);

使用这个 injector，前面那个不用 AngularJS 的栗子这样改造一下就可以调用了

inject.register('el', animalBox);

inject.register('ajax', httpRequest);

render = inject.resolve(render);

render();

问题

因为 AngularJS 的 injector 是假设函数的参数名就是依赖的名字，然后去查找依赖项，那如果按前面栗子中那样注入依赖，代码压缩后（参数被重命名了），就无法查找到依赖项了。

// 压缩前

function myCtrl = ($scope, $http){

...

// 压缩后

function myCtrl = (a, b){

...

所以，通常会使用下面两种方式注入依赖（对依赖添加的顺序有要求）。

数组注释法

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){

...

}])

显式 $inject

myApp.controller('myCtrl', myCtrl);

function myCtrl = ($scope, $http){

...

myCtrl.$inject = ['$scope', '$http'];

补充

对于一个 DI 容器，必须具备三个要素：依赖项的注册，依赖关系的声明和对象的获取。

在 AngularJS 中，module 和 $provide 都可以提供依赖项的注册；内置的 injector 可以获取对象（自动完成依赖注入）；依赖关系的声明，就是前面问题中提到的那样。

下面是个栗子

// 对于 module，传递参数不止一个，代表新建模块，空数组代表不依赖其他模块

// 只有一个参数（模块名），代表获取模块

// 定义 myApp，添加 myApp.services 为其依赖项

angular.module('myApp', ['myApp.services']);

// 定义一个 services module，将 services 都注册在这个 module 下面

angular.module('myApp.services', [])

// $provider 有 factory, service, provider, value, constant

// 定义一个 HttpService

angular.module('myApp.services').service('HttpService', ['$http', function($http){

...

}])

参考

[AngularJS] 自己实现一个简单的依赖注入
理解angular中的module和injector，即依赖注入
AngularJS中的依赖注入实际应用场景

如何看待angular2

相比 Angular1.x，Angular2的改动很大，几乎算是一个全新的框架。

基于 TypeScript（可以使用 TypeScript 进行开发），在大型项目团队协作时，强语言类型更有利。

组件化，提升开发和维护的效率。

还有 module 支持动态加载，new router，promise的原生支持等等。

迎合未来标准，吸纳其他框架的优点，值得期待，不过同时要学习的东西也更多了（ES next、TS、Rx等）。

12.Angular常见面试题

原创 2017年05月28日 16:33:04

标签：
Angular

4990

1.angular的数据绑定采用什么机制？详述原理

脏检查机制。

原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。

2 AngularJS的数据双向绑定是怎么实现的？

1、每个双向绑定的元素都有一个watcher

2、在某些事件发生的时候，调用digest脏数据检测。

这些事件有：表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。

3、脏数据检测会检测rootscope下所有被watcher的元素。

$digest函数就是脏数据监测

3.在使用angularjs项目开发中你使用过那些第三方的插件

AngularUi ui-router oclazyload等等附上一篇文章仔细去看看 https://segmentfault.com/a/1190000003858219

4.ng-show/ng-hide 与 ng-if的区别？

我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

5 解释下什么是$rootScrope以及和$scope的区别？

通俗的说$rootScrope 页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。

step1:Angular解析ng-app然后在内存中创建$rootScope。

step2:angular回继续解析，找到{{}}表达式，并解析成变量。

step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

6 列出至少三种实现不同模块之间通信方式？

Service

events,指定绑定的事件

使用 $rootScope

controller之间直接使用$parent, $$childHead等

directive 指定属性进行数据绑定

7. 表达式 {{yourModel}} 是如何工作的？

它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个 {{}} ，则会设置一个 $watch 。而 $interpolation 会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式 $parse 到那个作用域上。

8.angular中的$http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

9.ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）

10.angularjs 是mvc还是mvvm框架

首先阐述下你对mvc和mvvm的理解

首先为什么我们会需要MVC？因为随着代码规模越来越大，切分职责是大势所趋，还有为了后期维护方便，修改一块功能不影响其他功能。还有为了复用，因为很多逻辑是一样的。而MVC只是手段，终极目标是模块化和复用。

mvvm的优点

低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；

可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；

独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModemvvmdi计人员可以专注于UI(View)的设计；

可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。

在angular中MVVM模式主要分为四部分：

View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是可以被多个Controller或者其他service复用的领域服务。

Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

mvc的界面和逻辑关联紧密，数据直接从数据库读取。mvvm的界面与viewmode是松耦合，界面数据从viewmodel中获取。所以angularjs更倾向于mvvm

11.angularjs中$scope，controller，directive，sevice在mvvm中充当什么角色

如果你不知道，第一题的分析以及很明确，仔细再仔细的看一遍

12.在使用angularjs项目开发中你使用过那些第三方的插件

AngularUi ui-router oclazyload等等附上一篇文章仔细去看看 https://segmentfault.com/a/1190000003858219

13.在angular项目中你如何控制静态资源的合理加载

懒加载

第三题提到了oclazyload这个插件，很好的一个懒加载静态资源的第三方插件

14.再写controlloer逻辑的时候你需要注意什么？

1.简化代码（这个是所有开发人员都要具备的）

2.坚决不能操作dom节点这个时候可能会问为什么不能啊

你的回答是：DOM操作只能出现在指令（directive）中。最不应该出现的位置就是服务（service）中。Angular倡导以测试驱动开发，在service或者controller中出现了DOM操作，那么也就意味着的测试是无法通过的。当然，这只是一点，重要的是使用Angular的其中一个好处是啥，那就是双向数据绑定，这样就能专注于处理业务逻辑，无需关系一堆堆的DOM操作。如果在Angular的代码中还到处充斥着各种DOM操作，那为什么不直接使用jquery去开发呢。

测试驱动开发是什么呢？普及一下：

测试驱动开发，英文全称Test-Driven Development，简称TDD，是一种不同于传统软件开发流程的新型的开发方法。它要求在编写某个功能的代码之前先编写测试代码，然后只编写使测试通过的功能代码，通过测试来推动整个开发的进行。这有助于编写简洁可用和高质量的代码，并加速开发过程。

15.AngularJS的数据双向绑定是怎么实现的？

1、每个双向绑定的元素都有一个watcher

2、在某些事件发生的时候，调用digest脏数据检测。

这些事件有：表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。

3、脏数据检测会检测rootscope下所有被watcher的元素。

$digest函数就是脏数据监测

又附上一篇原理性的文章 https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md

16.controller之间怎么通讯

1、event

这里可以有两种方式，一种是$scope.$emit，然后通过监听$rootScope的事件获取参数；另一种是$rootScope.$broadcast，通过监听$scope的事件获取参数。

这两种方法在最新版本的Angular中已经没有性能区别了，主要就是事件发送的方向不同，可以按实际情况选择。

2、service

可以创建一个专用的事件Service，也可以按照业务逻辑切分，将数据存储在相应的Service中

3、$rootScope

这个方法可能会比较dirty一点，胜在方便，也就是把数据存在$rootScope中，这样各个子$scope都可以调用，不过需要注意一下生命周期

4、直接使用$scope.$$nextSibling及类似的属性

类似的还有$scope.$parent。这个方法的缺点就更多了，官方不推荐使用任何$$开头的属性，既增加了耦合，又需要处理异步的问题，而且scope的顺序也不是固定的。不推荐

另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了，除非特殊情况，请避免这类方式。

17.自定义指令的几个参数

说几个常用的如：

restrict:指令在dom中的声明形式 E（元素）A（属性）C（类名）M（注释）

template：两种形式，一种HTML文本；一个可以接受两个参数的函数，tElemetn和tAttrs，并返回一个代表模板的字符串。模板字符串必须存在一个根DOM元素

templateUrl:两种形式，一种代表外部HTML文件路径的字符串；一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串

compile (对象或函数)：compile 选项可以返回一个对象或函数。如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上,当我们设置了 link 选项,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。

然后又是传送门：http://www.cnblogs.com/mliudong/p/4180680.html

compile和link的区别：

编译的时候，compile转换dom，碰到绑定监听器的地方就先存着，有几个存几个，到最后汇总成一个link函数，一并执行，提升了性能。

18.angular中的$http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1、链式调用

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的

配置内容。这个函数返回一个promise对象，具有success和error两个方法。

2、返回一个promise对象

3、快捷的get请求

4、响应对象

传送门：http://www.2cto.com/kf/201506/405137.html

19.angular和jquery的区别

angular是基于数据驱动，所以angular适合做数据操作比较繁琐的项目（这里可以再提一下单页面应用，如果你不会福利又来了 http://www.zhihu.com/question/20792064）

jquery是基于dom驱动，jquery适合做dom操作多的项目

20.对angular中的form表单了解多少

Angular对input元素的type进行了扩展，一共提供了以下10种类型：

text

number

url

radio

checkbox

hidden

button

submit

reset

Angular为表单内置了4中CSS样式。

ng-valid 校验合法状态

ng-invalid 校验非法状态

ng-pristine 如果要使用原生的form，需要设置这个值

ng-dirty 表单处于脏数据状态

Angular在对表单进行自动校验的时候会校验Model上的属性，如果不设置ng-model，则Angular无法知道myForm.$invalid这个值是否为真。

校验的一下内容

required 表示是否输入内容

ng-maxlength 最大长度

ng-minlength 最小长度

例子：传送门https://github.com/18500047564/clutter

21. ng-show/ng-hide 与 ng-if 的区别？

我们都知道ng-show/ng-hide实际上是通过 display 来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载确认的话，那么ng-if的性能好过ng-show.

22.解释下什么是 $rootScrope 以及和 $scope 的区别？

$rootScrope是所有$scope的父对象

23. 表达式 {{yourModel}} 是如何工作的？

24.fliter是什么你了解的有多少？实现一个自定义fliter

ng 内置的 filter 有九种：

date（日期）

currency（货币）

limitTo（限制数组或字符串长度）

orderBy（排序）

lowercase（小写）

uppercase（大写）

number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）

filter（处理一个数组，过滤出含有某个子串的元素）

json（格式化 json 对象）

filter 有两种使用方法，

一种是直接在页面里：

另一种是在 js 里面用：

$filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)

$filter('date')(now, 'yyyy-MM-dd hh:mm:ss’);

自定义一个去重数组的

app.filter('unique', function(){

return function(arr){

var n = [];

var obj = {};

for(var i = 0;i<arr.length;i++){

if(!obj[arr[i]]){

n.push(arr[i])

obj[arr[i]] = 1;

}

return n;

}

})

13. Node.js面试题

11933浏览 2015-12-22 10:09:05

小字号

如果你希望找一份有关Node.js的工作，但又不知道从哪里入手评测自己对Node.js的掌握程度。本文就为你罗列了10个常见的Node.js面试题，分别考察了Node.js编程相关的几个主要方面。

在进入正文之前，需要提前声明两点：

这些问题只是Node.js知识体系的一个局部，并不能完全考察被面试者的实际开发能力。
对现实世界开发中遇到的问题，需要的是随机应变与团队合作，所以你可以尝试结对编程。

Node.js面试题列表

什么是错误优先的回调函数？
如何避免回调地狱？
如何用Node来监听80端口？
什么是事件循环？
哪些工具可以用来保证一致的编程风格？
运算错误与程序员错误的区别？
使用NPM有哪些好处？
什么是stub？举个使用场景？
什么是测试金字塔？对于HTTP API，如何利用测试金字塔？
你最喜欢的HTTP框架，并说明原因？

现在，我们依次来解答这些问题吧。

什么是错误优先的回调函数？

错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象，用于检查程序是否发生了错误。其余的参数用于传递数据。例如：

fs.readFile(filePath, function(err, data) {

    if (err) {

        //handle the error

    // use the data object

});

解析：这个题目的主要作用在于检查被面试者对于Node中异步操作的一些基本知识的掌握。

如何避免回调地狱

你可以有如下几个方法：

模块化：将回调函数分割为独立的函数
使用Promises
使用yield来计算生成器或Promise

解析：这个问题有很多种答案，取决你使用的场景，例如ES6, ES7，或者一些控制流库。

如何用Node监听80端口

这题有陷阱！在类Unix系统中你不应该尝试去监听80端口，因为这需要超级用户权限。因此不推荐让你的应用直接监听这个端口。

目前，如果你一定要让你的应用监听80端口的话，你可以有通过在Node应用的前方再增加一层反向代理（例如nginx）来实现，如下图所示。否则，建议你直接监听大于1024的端口。

Reverse Proxy

方向代理指的是以代理服务器来接收Internet上的连接请求，然后将请求转发给内部网络上的服务器，并且将服务器返回的结果发送给客户端。

关于反向代理的更多内容，建议你阅读这篇文章。关于如何利用nginx来为node配置方向代理的实践，可以参考这篇博文。

解释：这个问题用于检查被面试者是否有实际运行Node应用的经验。

什么是事件循环

Node采用的是单线程的处理机制（所有的I/O请求都采用非阻塞的工作方式），至少从Node.js开发者的角度是这样的。而在底层，Node.js借助libuv来作为抽象封装层，从而屏蔽不同操作系统的差异，Node可以借助livuv来来实现多线程。下图表示了Node和libuv的关系。

Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给V8引擎。可以简单用下面这张图来表示。

（图片来源于网络）

每一个I/O都需要一个回调函数——一旦执行完便推到事件循环上用于执行。如果你需要更多详细的解释，可以参考这个视频。你也可以参考这篇文章。

解释：这用于检查Node.js的底层知识，例如什么是libuv，它的作用是什么。

哪些工具可以用来保证一致性的代码风格

你可以选择如下的工具：

JSLint
JSHint
ESLint
JSCS - 推荐

在团队开发中，这些工具对于编写代码非常的有帮助，能够帮助团队开发者强制执行规定的风格指南，还能够通过静态分析捕获常见的错误。

解析：用于检查被面试者是否有大型项目开发经验。

运算错误与程序员错误的区别

运算错误并不是bug，这是和系统相关的问题，例如请求超时或者硬件故障。而程序员错误就是所谓的bug。

解析：这个题目和Node关系并不大，用于考察面试者的基础知识。

使用NPM有哪些好处？

通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明项目依赖的具体版本。

关于NPM的更多信息，你可以参考官方文档。

解析：它能考察面试者使用npm命令的基础知识和Node.js开发的实际经验。

什么是Stub？举个使用场景

Stub是用于模拟一个组件或模块的函数或程序。在测试用例中，简单的说，你可以用Stub去模拟一个方法，从而避免调用真实的方法，使用Stub你还可以返回虚构的结果。你可以配合断言使用Stub。

举个例子，在一个读取文件的场景中，当你不想读取一个真正的文件时：

var fs = require('fs');

var readFileStub = sinon.stub(fs, 'readFile', function (path, cb) {

    return cb(null, 'filecontent');

});

expect(readFileStub).to.be.called;

readFileStub.restore();

在单元测试中：Stub是完全模拟一个外部依赖，而Mock常用来判断测试通过还是失败。

有关Node.js的单元测试小结，你可以参考这个链接。

解析：用于测试被面试者是否有测试的经验。如果被面试者知道什么是Stub，那么可以继续问他是如何做单元测试的。

什么是测试金字塔？

测试金字塔指的是：当我们在编写测试用例时，底层的单元测试应该远比上层的端到端测试要多。

当我们谈到HTTP API时，我们可能会涉及到：

有很多针对模型的底层单元测试
但你需要测试模型间如何交互时，需要减少集成测试

解析：本文主要考察被面试者的在测试方面的经验。

你最喜欢的HTTP框架以及原因

这题没有唯一的答案。本题主要考察被面试者对于他所使用的Node框架的理解程度，考察他是否能够给出选择该框架的理由，优缺点等。常用的HTTP框架你可以参考这个网站。

14. Javascript面试题总结（内附答案）

转载 2017年04月17日 10:59:15

24167

原创 IT168企业级2017-04-13 17:02

近年来，从事JavaScript的程序员越来越多，JavaScript的曝光率也越来越高，如果你想转行试试JavaScript，不妨收下这份面试题及答案，没准用得上。当然，如果针对这些问题，你有更棒的答案，欢迎移步至评论区。

1、什么是JavaScript？（这是基本题，对很多程序员来说也是送分题！）

JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。

类似的基本题目还包括：JavaScript都有哪些类型?JavaScript是谁发明的？......

2、列举Java和JavaScript之间的区别？

Java是一门十分完整、成熟的编程语言。相比之下，JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。 Java是一种面向对象编程（OOPS）或结构化编程语言，类似的如C ++或C，而JavaScript是客户端脚本语言，它被称为非结构化编程。

3. JavaScript和ASP脚本相比，哪个更快？

JavaScript更快。JavaScript是一种客户端语言，因此它不需要Web服务器的协助来执行。另一方面，ASP是服务器端语言，因此总是比JavaScript慢。值得注意的是，Javascript现在也可用于服务器端语言（nodejs）。

4、什么是负无穷大？

负无穷大是JavaScript中的一个数字，可以通过将负数除以零来得到。

5、如何将JavaScript代码分解成几行吗？

在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成

例：document.write("This is \a program");

如果不是在字符串语句中更改为新行，那么javaScript会忽略行中的断点。

例：

var x=1, y=2,

x+y;

上面的代码是完美的，但并不建议这样做，因为阻碍了调试。

6、什么是未声明和未定义的变量？

未声明的变量是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值，则会遇到运行时错误。未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值，则返回未定义的值。

7、如何编写可动态添加新元素的代码？

8、什么是全局变量？这些变量如何声明，使用全局变量有哪些问题？

全局变量是整个代码长度可用的变量，也就是说这些变量没有任何作用域。var关键字用于声明局部变量或对象。如果省略var关键字，则声明一个全局变量。

例：// Declare a global globalVariable = “Test”;

使用全局变量所面临的问题是本地和全局变量名称的冲突。此外，很难调试和测试依赖于全局变量的代码。

9、解释JavaScript中定时器的工作？如果有，也可以说明使用定时器的缺点？

定时器用于在设定的时间执行一段代码，或者在给定的时间间隔内重复该代码。这通过使用函数setTimeout，setInterval和clearInterval来完成。

setTimeout（function，delay）函数用于启动在所述延迟之后调用特定功能的定时器。
setInterval（function，delay）函数用于在提到的延迟中重复执行给定的功能，只有在取消时才停止。
clearInterval（id）函数指示定时器停止。

定时器在一个线程内运行，因此事件可能需要排队等待执行。

10、ViewState和SessionState有什么区别？

“ViewState”特定于会话中的页面。

“SessionState”特定于可在Web应用程序中的所有页面上访问的用户特定数据。

11、什么是===运算符？

===被称为严格等式运算符，当两个操作数具有相同的值而没有任何类型转换时，该运算符返回true。

12、说明如何使用JavaScript提交表单？

要使用JavaScript提交表单，请使用

document.form [0] .submit（）;

13、元素的样式/类如何改变？

可以通过以下方式完成：

document.getElementById(“myText”).style.fontSize = “20?;

或

document.getElementById(“myText”).className = “anyclass”;

14、JavaScript中的循环结构都有什么？

For、While、do-while loops

15、如何在JavaScript中将base字符串转换为integer？

parseInt() 函数解析一个字符串参数，并返回一个指定基数的整数。parseInt（）将要转换的字符串作为其第一个参数，第二个参数是给定字符串的基础。

为了将4F（基数16）转换为整数，所使用的代码是：parseInt ("4F", 16);

16、说明“==”和“===”之间的区别？

“==”仅检查值相等，而“===”是一个更严格的等式判定，如果两个变量的值或类型不同，则返回false。

17、3 + 2 +“7”的结果是什么？

由于3和2是整数，它们将直接相加。由于7是一个字符串，它将会被直接连接，所以结果将是57。

18、说明如何检测客户端机器上的操作系统？

为了检测客户端机器上的操作系统，应使用navigator.appVersion字符串（属性）。

19、Javascript中的NULL是什么意思？

NULL用于表示无值或无对象。它意味着没有对象或空字符串，没有有效的布尔值，没有数值和数组对象。

20、delete操作符的功能是什么？

delete操作符用于删除程序中的所有变量或对象，但不能删除使用VAR关键字声明的变量。

21、JavaScript中有哪些类型的弹出框？

Alert、Confirm and、Prompt

22、Void（0）怎么用？

Void（0）用于防止页面刷新，并在调用时传递参数“zero”。
Void（0）用于调用另一种方法而不刷新页面。

23、如何强制页面加载JavaScript中的其他页面？

必须插入以下代码才能达到预期效果：

24、escape字符是用来做什么的？

使用特殊字符（如单引号，双引号，撇号和＆符号）时，将使用转义字符（反斜杠）。在字符前放置反斜杠，使其显示。

例：

25、什么是JavaScript Cookie？

Cookie是用来存储计算机中的小型测试文件，当用户访问网站以存储他们需要的信息时，它将被创建。

26、解释JavaScript中的pop（）方法？

pop（）方法与shift（）方法类似，但不同之处在于Shift方法在数组的开头工作。此外，pop（）方法将最后一个元素从给定的数组中取出并返回。然后改变被调用的数组。

例：

var cloths = [“Shirt”, “Pant”, “TShirt”];

cloths.pop();

//Now cloth becomes Shirt,Pant

27、在JavaScript中使用innerHTML的缺点是什么？

如果在JavaScript中使用innerHTML，缺点是：内容随处可见；不能像“追加到innerHTML”一样使用；即使你使用+ = like“innerHTML = innerHTML +'html'”旧的内容仍然会被html替换；整个innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多；innerHTML不提供验证，因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。

28、break和continue语句的作用？

Break语句从当前循环中退出。
continue语句继续下一个循环语句。

29、在JavaScript中，dataypes的两个基本组是什么？

Primitive
Reference types

原始类型是数字和布尔数据类型。引用类型是更复杂的类型，如字符串和日期。

30、如何创建通用对象？

通用对象可以创建为：

var I = new object();

31、operator类型用来做什么？

'Typeof'是一个运算符，用于返回变量类型的字符串描述。

32、哪些关键字用于处理异常？

try... Catch-finally用于处理JavaScript中的异常。

33、JavaScript中不同类型的错误有几种？

有三种类型的错误：

Load time errors：该错误发生于加载网页时，例如出现语法错误等状况，称为加载时间错误，并且会动态生成错误。
Run time errors：由于在HTML语言中滥用命令而导致的错误。
Logical Errors：这是由于在具有不同操作的函数上执行了错误逻辑而发生的错误。

34、在JavaScript中使用的Push方法是什么？

push方法用于将一个或多个元素添加或附加到数组的末尾。使用这种方法，可以通过传递多个参数来附加多个元素。

35、什么是JavaScript中的unshift方法？

Unshift方法就像在数组开头工作的push方法。该方法用于将一个或多个元素添加到数组的开头。

36、对象属性如何分配？

属性按以下方式分配给对象：

obj["class"] = 12;

或

obj.class = 12;

37、获得CheckBox状态的方式是什么？

alert（document.getElementById（'checkbox1'）。checked）;

如果CheckBox被检查，此警报将返回TRUE。

38、解释window.onload和onDocumentReady？

在载入页面的所有信息之前，不运行onload函数。这导致在执行任何代码之前会出现延迟。

onDocumentReady在加载DOM之后加载代码。这允许早期的代码操纵。

39、你将如何解释JavaScript中的闭包？什么时候使用？

Closure是与函数返回时保留在内存中的函数相关的本地声明变量。

例如：

40、一个值如何附加到数组？

可以以给定的方式将值附加到数组：

arr [arr.length] = value;

41、解释for-in循环？

for-in循环用于循环对象的属性。

for-in循环的语法是：

在每次循环中，来自对象的一个属性与变量名相关联，循环继续，直到对象的所有属性都被耗尽。

42、描述JavaScript中的匿名函数？

被声明为没有任何命名标识符的函数被称为匿名函数。一般来说，匿名函数在声明后无法访问。

匿名函数声明：

43、.call（）和.apply（）之间有什么区别？

函数.call（）和.apply（）在使用上非常相似，只是有一点区别。当程序员知道函数参数的编号时，使用.call（），因为它们必须在调用语句中被提及为参数。另一方面，当不知道数字时使用.apply（）,函数.apply（）期望参数为数组。

.call（）和.apply（）之间的基本区别在于将参数传递给函数。它们的用法可以通过给定的例子进行说明。

44、定义事件冒泡？

JavaScript允许DOM元素嵌套在一起。在这种情况下，如果单击子级的处理程序，父级的处理程序也将执行同样的工作。

45、什么样的布尔运算符可以在JavaScript中使用？

“And”运算符（&&），'Or'运算符（||）和'Not'运算符（！）可以在JavaScript中使用。

*运算符没有括号。

46、一个特定的框架如何使用JavaScript中的超链接定位？

可以通过使用“target”属性在超链接中包含所需帧的名称来实现。

47、在web-garden和web-farm之间有何不同？

web-garden和web-farm都是网络托管系统。唯一的区别是web-garden是在单个服务器中包含许多处理器的设置，而web-farm是使用多个服务器的较大设置。

48、如何分配对象属性？

将属性分配给对象的方式与赋值给变量值相同。例如，表单对象的操作值以下列方式分配为“‘submit”：Document.form.action =“submit”

49、在JavaScript中读取和写入文件的方法是什么？

可以通过使用JavaScript扩展（从JavaScript编辑器运行），打开文件的示例来完成：

fh = fopen(getScriptPath(), 0);

50、在JavaScript中如何使用DOM？

DOM代表文档对象模型，并且负责文档中各种对象的相互交互。DOM是开发网页所必需的，其中包括诸如段落，链接等对象。可以操作这些对象以包括添加或删除等操作，DOM还需要向网页添加额外的功能。除此之外，API的使用比其他更有优势。

51、JavaScript中如何使用事件处理程序？

事件是由用户生成活动（例如单击链接或填写表单）导致的操作。需要一个事件处理程序来管理所有这些事件的正确执行。事件处理程序是对象的额外属性。此属性包括事件的名称以及事件发生时采取的操作。

52、解释延迟脚本在JavaScript中的作用？

默认情况下，在页面加载期间，HTML代码的解析将暂停，直到脚本停止执行。这意味着，如果服务器速度较慢或者脚本特别沉重，则会导致网页延迟。在使用Deferred时，脚本会延迟执行直到HTML解析器运行。这减少了网页加载时间，并且它们的显示速度更快。

53、JavaScript中的各种功能组件是什么？

JavaScript中的不同功能组件是：

First-class函数：JavaScript中的函数被用作第一类对象。这通常意味着这些函数可以作为参数传递给其他函数，作为其他函数的值返回，分配给变量，也可以存储在数据结构中。
嵌套函数：在其他函数中定义的函数称为嵌套函数。

54、解释unshift（）方法？

该方法在数组启动时起作用，与push（）不同。它将所需数量的元素添加到数组的顶部。例如：

输出如下所示：

[" joseph "," Jane ", " charlie ", " john "]

55、decodeURI（）和encodeURI（）是什么？

EncodeURl（）用于将URL转换为十六进制编码。而DecodeURI（）用于将编码的URL转换回正常。

56、为什么不建议在JavaScript中使用innerHTML？

innerHTML内容每次刷新，因此很慢。在innerHTML中没有验证的余地，因此，更容易在文档中插入错误代码，从而使网页不稳定。

57、如何在不支持JavaScript的旧浏览器中隐藏JavaScript代码？

在<script>标签之后的代码中添加“<！ - ”，不带引号。
在<script>标签之前添加“// - >”代码中没有引号。
旧浏览器现在将JavaScript代码视为一个长的HTML注释。而支持JavaScript的浏览器则将“<！ - ”和“// - >”作为一行注释。

15.自己总结jquery面试题

1 你在公司是怎么用jquery的？

答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊，动画啊，表单啊，ajax事件等

配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可

$(function(){ });

</script>

2 你为什么要使用jquery？

答：因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

3 你觉得jquery有哪些好处？

答案同上

4 你使用jquery遇到过哪些问题，你是怎么解决的？

答：这个答案是开发的，看你是否有相关的项目经验。

例：前台拿不到值，JSON 可是出现的错误(多了一个空格等)这编译是不会报错的 jquery库与其他库冲突；

今天在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！

5 你知道jquery中的选择器吗，请讲一下有哪些选择器？

答：选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器

6 jquery中的选择器和 css中的选择器有区别吗？

答：jQuery选择器支持CSS里的选择器，

jQuery选择器可用来添加样式和添加相应的行为

CSS 中的选择器是只能添加相应的样式

7 你觉得jquery中的选择器有什么优势？

答：简单的写法 $('ID') 来代替 document.getElementById()函数

支持CSS1 到CSS3 选择器

完善的处理机制(就算写错了id也不会报错)

8 你在使用选择器的时候有有没有什么觉得要注意的地方？

答: 1 选择器中含有".","#","[" 等特殊字符的时候需要进行转译

2 属性选择器的引号问题

3 选择器中含有空格的注意事项

9 jquery对象和dom对象是怎样转换的？

答：jquery转DOM对象:jQuery 对象是一个数组对象，可以通过[index]的丰富得到相应的DOM对象

还可以通过get[index]去得到相应的DOM对象。

DOM对象转jQuery对象:$(DOM对象)

10 你是如何使用jquery中的ajax的？

答: 如果是一些常规的ajax程序的话，使用load(),$.get(),$.post(),就可以搞定了，一般我会使用的是$.post() 方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用$.ajax()

11 你觉得jquery中的ajax好用吗，为什么？

答: 好用的。因为jQuery提供了一些日常开发中夙瑶的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了。

12 jquery中$.get()提交和$.post()提交有区别吗？

答: 1 $.get() 方法使用GET方法来进行异步请求的。

$.post() 方法使用POST方法来进行异步请求的。

2 get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3 get方式传输的数据大小不能超过2KB 而POST要大的多

4 GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

13 jquery中的load方法一般怎么用的？

答：load方法一般在载入远程HTML代码并插入到DOM中的时候用

通常用来从Web服务器上获取静态的数据文件。

如果要传递参数的话，可以使用$.get() 或 $.post()

14 在jquery中你是如何去操作样式的？

答: addClass() 来追加样式

removeClass() 来删除样式

toggle() 来切换样式

15 简单的讲叙一下jquery是怎么处理事件的，你用过哪些事件？

答: 首先去装载文档，在页面家在完毕后，浏览器会通过javascript 为DOM 元素添加事件。

16 你使用过jquery中的动画吗，是怎样用的？

答:使用过。

hide() 和 show() 同时修改多个样式属性。像高度，宽度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法.

17 你使用过jquery中的插件吗？

答:看个人的实力和经验来回答了，例如：jQuery_Mobile,jQuery_ui。

18 你一般用什么去提交数据，为什么？

答:一般我会使用的是$.post() 方法。

如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用$.ajax()

19 在jquery中引入css有几种方式？

答:四种行内式，内嵌式，导入式，链接式

20 你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore()

内添加

1.append在文档内添加元素

2.appendTo()把匹配的元素添加到对象里

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到对象前

外添加

1.after()在元素之后添加

2.before()在元素之前添加

3.insertAfter()把匹配元素在对象后添加

4.insertBefore()把匹配元素在对象前添加

21 你使用过包裹节点的方法吗，包裹节点有方法有什么好处？

答: 1.wrap()把匹配的元素包裹起来

2.wrapAll()把所有匹配的对象用单个元素包裹

3.wrapInner()将每一个元素的子内容包裹

需要在文档中插入额外的结构化标记的时候可以使用这些包裹的方法，应为它不会帛画原始文档的语义

22 jquery中如何来获取或和设置属性？

答：jQuery中可以用attr()方法来获取和设置元素属性

removeAttr() 方法来删除元素属性

23 如何来设置和获取HTML 和文本的值？

答：html()方法类似于innerHTML属性可以用来读取或者设置某个元素中的HTML内容注意：html() 可以用于xhtml文档，不能用于xml文档

Text() 类似于innerText属性可以用来读取或设置某个元素中文本内容。

val() 可以用来设置和获取元素的值

24 你jquery中有哪些方法可以遍历节点？

答：children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素 next() 取得匹配元素后面紧邻的同辈元素

prev() 取得匹配元素前面紧邻的同辈元素

siblings() 取得匹配元素前后的所有同辈元素

closest() 取得最近的匹配元素

find() 取得匹配元素中的元素集合包括子代和后代

25 子元素选择器和后代选择器元素有什么区别？

答:子代元素是找子节点下的所有元素,后代元素是找子节点或子节点的子节点的元素

26 在jquery中可以替换节点吗？

答：可以在jQuery中有两者替换节点的方式replaceWith() 和 replaceAll() 例如：在<p title="hao are you">hao are you</p>替换成<strong>I am fine<strong> $('p').replaceWith('<strong>I am fine</strong>');

replaceAll 与replaceWith的用法前后调换一下即可。

27 你觉得beforeSend方法有什么用？

答：发送请求前可以修改XMLHttpRequest对象的函数，在beforeSend中，如果返回false可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数，所以在这个方法里可以做验证

28 siblings() 方法和 $('prev~div')选择器是一样的嘛？

答: $('prev~div') 只能选择'#prev'元素后面的同辈<div>元素

而siblings()方法与前后的文职无关，只要是同辈节点就都能匹配。

29 你在ajax中使用过JSON吗，你是如何用的？

答:使用过，在$.getJSON()方法的时候就是。

因为 $.getJSON() 就是用于加载JSON文件的

30 有哪些查询节点的选择器？

答：我在公司使用过

:first 查询第一个， :last 查询最后一个，

:odd查询奇数但是索引从0开始 :even 查询偶数，

:eq(index)查询相等的 , :gt(index)查询大于index的 ,

:lt查询小于index :header 选取所有的标题等

31 nextAll()能替代$('prev~siblindgs')选择器吗？

答:能。使用nextAll() 和使用$('prev~siblindgs') 是一样的

32 jQuery中有几种方法可以来设置和获取样式

答：addClass() 方法，attr() 方法

33 $(document).ready()方法和window.onload有什么区别？

答: 两个方法有相似的功能，但是在实行时机方面是有区别的。

1 window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

2 $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

34 jQuery是如何处理缓存的？

答：要处理缓存就是禁用缓存.

1 通过$.post() 方法来获取数据，那么默认就是禁用缓存的。

2 通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。

可以在URL后面加上+(+new Date)

例 $.get('ajax.xml?'+(+new Date),function () { //内容 });

3 通过$.ajax 方法来获取数据，只要设置cache:false即可。

35 $.getScript()方法和 $.getJson() 方法有什么区别？

答: 1 $.getScript() 方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。

2 $.getJson() 是用于加载JSON 文件的，用法和$.getScript()

36 你读过有关于jQuery的书吗？

答: 《jquery基础教程》，《jquery实战》，《锋利的jquery》，《巧用jquery》，《jQuery用户界面库学习指南》等

37 $("#msg").text(); 和 $("#msg").text("<b>new content</b>");有什么区别？

答：1 $("#msg").text() 是返回id为msg的元素节点的文本内容

2 $("#msg").text("<b>new content</b>");是将“<b>new content</b>”作为普通文本串写入id为msg的元素节点内容中,

页面显示粗体的<b>new content</b>

38 radio单选组的第二个元素为当前选中值，该怎么去取？

答 : $('input[name=items]').get(1).checked = true;

39 选择器中 id，class有什么区别？

答：在网页中每个id名称只能用一次，class可以允许重复使用

40 你使用过哪些数据格式，它们各有什么特点？

答: HTML格式 ,JSON格式,javascript格式,XML格式

1 HTML片段提供外部数据一般来说是最简单的。

2 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。

3 而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

41 jQuery 能做什么？

答：1 获取页面的元素

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

6 无需刷新页面，即可以从服务器获取信息

7 简化常见的javascript任务

42 在ajax中data主要有几种方式？

答：三种，html拼接的，json数组，form表单经serialize()序列化的。

43 ：jQuery中的hover()和toggle()有什么区别？

答 hover()和toggle()都是jQuery中两个合成事件。

hover()方法用于模拟光标悬停事件。

toggle()方法是连续点击事件。

44 你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

答 : 知道, 事件冒泡是从里面的往外面开始触发。

在jQuery中提供了stopPropagation()方法可以停止冒泡。

45 例如单击超链接后会自动跳转，单击"提交"按钮后表单会提交等，有时候我想阻止这些默认的行为，该怎么办？

答: 可以用 event.preventDefault()

或在事件处理函数中返回false，即 return false;

46.jquery表单提交前有几种校验方法？分别为？？

formData:返回一个数组，可以通过循环调用来校验

jaForm：返回一个jQuery对象，所有需要先转换成dom对象

fieldValue：返回一个数组 beforeSend()

47.在jquery中你有没有编写过插件，插件有什么好处？你编写过那些插件？它应该注意那些？

答: 插件的好处：对已有的一系列方法或函数的封装，以便在其他地方重新利用，方便后期维护和提高开发效率

插件的分类：封装对象方法插件、封装全局函数插件、选择器插件注意的地方：

1.插件的文件名推荐命名为jquery.[插件名].js，以免和其他的javaScript库插件混

2.所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

3.插件应该返回一个jQuery对象，以保证插件的可链式操作

4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示，这样可以避免冲突或使用闭包来避免

5.所有的方法或函数插件，都应当一分好结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响

6.在插件中通过$.extent({})封装全局函数,选择器插件，扩展已有的object对象通过$.fn.extend({})封装对象方法插件

48.怎样给jquery动态附加新的元素?那么怎样给新生成的元素绑定事件呢？

jQuery的html()可以给现在元素附加新的元素

直接在元素还未生成前就绑定肯定是无效的，因为所绑定的元素目前根本不存在。

所以我们可以通过live和livequery来动态绑定事件

49.Jquery与jQuery UI 有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

50.jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {

return JSON.stringify(array)

}

$.fn.parseArray = function(array) {

return JSON.parse(array)

}

然后调用：

$("").stringifyArray(array)

16. jQuery 面试问题及答案

　jQuery 面试问题和答案

　　JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java web开发面试中发现许多jQuery的面试问题.

　　早些时候，绝大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近开始，除了 JavaScript 基础之外，人们也希望知道你是否熟悉 jQuery。这16个jQuery的问题是为web开发者准备的，且也能够非常方便你在参加一次电话或者视频一轮的面试之前纠正一些关键的概念。如果你是 jQuery 新手，那么它也能够帮助你更加好的理解基础知识，并激励你去发现更多东西。

　　1. jQuery 库中的 $() 是什么？（答案如下）

　　$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。

　　2. 网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？（答案）

　　另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

　　3. jQuery 里的 ID 选择器和 class 选择器有何不同？（答案）

　　如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

1 2	`$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'` `$('.active') // Returns all elements with CSS class active.`

　　正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

　　4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

　　这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});

　　我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

　　5. $(document).ready() 是个什么函数？为什么要用它？(answer)

　　这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

　　6. JavaScript window.onload 事件和 jQuery ready 函数有何不同？（答案）

　　这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

　　7. 如何找到所有 HTML select 标签的选中项？（答案如下）

　　这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 <select > 标签的选中项：

1	`$('[name=NameOfSelectedTag] :selected')`

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。

　　8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

　　each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {

alert($(selected).text());

});

　　其中 text() 方法返回选项的文本。

　　9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下）

　　你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

　　10. 你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略）

　　这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落（<p>标签）内部的超链接（<a>标签）……

　　11. $(this) 和 this 关键字在 jQuery 中有何不同？（答案如下）

　　这对于很多 jQuery 初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

　　12. 你如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href? (答案)

　　attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

$('a').each(function(){

alert($(this).attr('href'));

});

　　13. 你如何使用jQuery设置一个属性值? (答案)

　　前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值例如. attr(name, value), 这里name是属性的名称，value是属性的新值。

　　14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

　　尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看用来向DOM中添加元素的 appendTo() 方法.

　　15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案)

　　这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

　　17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

　　ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

　　18. jQuery 中的方法链是什么？使用方法链有什么好处？

　　方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

　　19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

　　这通常用于阻止事件向上冒泡。

　　20. 哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

　　第一种，因为它直接调用了 JavaScript 引擎。

　jQuery 面试问题和答案

　　1. jQuery 库中的 $() 是什么？（答案如下）

　　2. 网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？（答案）

　　3. jQuery 里的 ID 选择器和 class 选择器有何不同？（答案）

1 2	`$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'` `$('.active') // Returns all elements with CSS class active.`

　　4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});

　　我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

　　5. $(document).ready() 是个什么函数？为什么要用它？(answer)

　　6. JavaScript window.onload 事件和 jQuery ready 函数有何不同？（答案）

　　7. 如何找到所有 HTML select 标签的选中项？（答案如下）

1	`$('[name=NameOfSelectedTag] :selected')`

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。

　　8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

$('[name=NameOfSelectedTag] :selected').each(function(selected) {

alert($(selected).text());

});

　　其中 text() 方法返回选项的文本。

　　9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下）

　　10. 你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略）

　　11. $(this) 和 this 关键字在 jQuery 中有何不同？（答案如下）

　　12. 你如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href? (答案)

$('a').each(function(){

alert($(this).attr('href'));

});

　　13. 你如何使用jQuery设置一个属性值? (答案)

　　14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

　　15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案)

　　17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

　　ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

　　18. jQuery 中的方法链是什么？使用方法链有什么好处？

　　方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

　　19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

　　这通常用于阻止事件向上冒泡。

　　20. 哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

　　第一种，因为它直接调用了 JavaScript 引擎。

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

2016年09月14日 15:02:11

9534

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：
第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
这篇文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：css里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
问题症状：ie6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容css设置
方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* css hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。
使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
比如这样一个css设置 height:300px;*height:200px;_height:100px;
ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；
剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。

项目经验：天天有课

写点有些咯搜，为了让你易用理解，你自己进行删减，排版等。这里你的组长是兰瑞智，他是这个产品的WEB前端的开发，与产品经理助理，很多产品的需求实现上他都干了包括原型的设计，角色你就是他的手下，WEB前端实习生和产品经理助理。把这个复制到WPS里整理完，再弄上去。

正文：

我在2016年上3月至10月做为实习生参与哈尔滨布卡网络科技公司的【天天有课】产品研发。因为该产品是商业项目（2016年10月上线），能让我学到很多学校里学不到的东西。这个产品【天天有课】O2O模式，是针对小、初、高课外补习的教育平台，即线上选择教师与课程进行购买，线下实地授课的经营模式；产品分为：家长端、教师端。

产品运用技术：

服务器（生产环境）：（服务器这块有两个，一个生产环境，一个测试环境，都是在阿里购买的服务器。这块我不懂，你问一下大可，他可能知道怎么描述）

数据库：MySQL

前台：Android、iOS、Web

后台：Java

开发人员：

产品经理1人；设计美工2人；后台+数据库7人；Android与iOS各3个；WEB前端3人。我担当WEB前端实习生与产品助理（经常与我的组长和产品经理讨论需求实现）

作为一个实习生，我的主要工作是根据组长的安排编写‘家长端’手机页面（主要是微信内嵌浏览器的兼容），不需要考虑太多的内核问题，基本是样式与特效的实现，还有给后台传数据（这里我不会描述，注意这里一般会问到传数据的格式、报文头之类的问题，你也可以不写你传过数据，实习生没让你干）。有时还做为产品助理与组长和产品经理商讨产品需求问题（因为中间有改动过需求发生）。最后测试环节没有参与。

收获：

真正参与一个产品的开发过程，了解到一个产品开发所涉及到的很多问题（比如这个产品因为时间紧，没有把原型设计、交互问题完全弄完再开发，而是完成三分之二左右就进行技术开发了，造成后续交互问题大量发生，甚至改动过业务流程），让我在编写时效率更高，知道怎么避免常见问题的发生，同时也理解产品经理的工作，知道怎么与设计沟通，让开发效率更高。经过这个实习，我在技术上与项目开发日常工作中成长很多。

注意：这里面最好举一个关于技术的小例子，你怎么出现问题，怎么解决问题。

让你懂的：什么是业务流程：比如在京东买东西，是选好商品先添加购物车，再在购物车里去结算，下单，付款，付款结束，形成有效订单，这就是业务流程，这里有一个地方动一下，整个基本就全动了，就得改业务流程，前后台都得动，数据库也得动。

咱们的业务流程改动是：家长选老师，选课，购买课时数量*单价，付款，形成有效订单，然后根据时间来判断上课数量进行结束，教师可以从【天天有课】把课时费提走。改后为：选老师，选课，只能购买1课时数量*单价，形成有效订单并绑定教师与家长关系，实地上课，根据绑定关系继续以后实地上课付款。这是让你懂的，一量别人问到，你得说明白。

开发时遇到的问题及解决办法

1、让容器内文字不管是单行还是多行始终垂直居中

解决：css无法直接控制，用js实现

2、IE上超链接使用绝对定位后失效

解决办法：
（1）使用position:relative而不是position:absolute；
（2）添加背景色；
（3）添加透明的背景图片，gif或png，但会增加无意义的http请求；
（4）使用background:url(about:blank)，最佳方案。

3、IE6/7/8/9不支持placeholder的两种解决办法

（1）使用input的value作为显示文本

（2）不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面

或者，也可以用这种方式：

<input type="text" value="姓名" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}">

4、IE9以下浏览器不支持background-size属性

三种解决方法：

（1）使用滤镜，但是不能指定任意大小background百分比，要用绝对路径的图片；

（2）引入htc文档，可指定百分比，相对路径

（3）将图片大小变化成实用大小。

5、关于移动端字体问题

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

6、ie7下，a下的span手型指针消失的问题

这是ie7的一个bug，二种解决办法：
（1）a标签里面文字链接不要用span包裹，用em或其他标签；
（2）给a标签多加一个样式：cursor: pointer;

7、IE7下不支持对block元素的inline-block

对元素设置 _zoom:1; *display:inline;即可

项目中遇到的bug（web前端-持续更新）

input放在a标签里面单击不能获取input的光标（IE环境下）

双击才可以获得焦点，目前有的解决方案：

不要给a标签添加href属性；
不要在外面套上a标签。

隐藏input标签的光标

项目需求：input值json加载，只读+光标隐藏，通用的解决方案有其他标签模拟，但是不能改input
所以解决方案为给input加下面这两个属性：

//只读

readonly="readonly"

//隐藏光标

unselectable="on"

返回私有数组

返回数组的一个副本，这样改动就不会影响原数组，只是副本而已

    var array = (function () {

       var days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

        return {

            getDays: function () {

                return days.slice();

    })()

jquery选择器的扩展

//jQuery contains 选择器，对Contains查找的内容不区分大小写

jQuery.expr[':'].Contains = function (a, i, m) {

    return jQuery(a).text().toUpperCase()

        .indexOf(m[3].toUpperCase()) >= 0;

};

例子

<div>john</div>

<div>John</div>

<div>hey hey JOHN hey hey</div>

$('div:Contains("john")') //会选择到两个div

当一个变量被声明后，扩充其属性并不会改变原数据类型

var a = 'foo';

a[1] = 'O';

console.log(0.1+0.2==0.3||a); //'foo'

闭包是函数的嵌套定义，而不是函数的嵌套调用

function foo(){

    console.log(a);

function bar () {

    var a = 3;

    foo();

var a = 2;

bar(); //2

DOMContentLoaded兼容IE9以下版本

//jQuery的实现

      // Mozilla, Opera and webkit nightlies currently support this event

      if ( document.addEventListener ) {

          // Use the handy event callback

          document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

          // A fallback to window.onload, that will always work

          window.addEventListener( "load", jQuery.ready, false );

          // If IE event model is used

      } else if ( document.attachEvent ) {

          // ensure firing before onload,

          // maybe late but safe also for iframes

          document.attachEvent( "onreadystatechange", DOMContentLoaded );

          // A fallback to window.onload, that will always work

          window.attachEvent( "onload", jQuery.ready );

          // If IE and not a frame

          // continually check to see if the document is ready

          var toplevel = false;

          try {

              toplevel = window.frameElement == null;

          } catch(e) {}

          if ( document.documentElement.doScroll && toplevel ) {

              doScrollCheck();

        //函数DOMContentLoaded的赋值

        if ( document.addEventListener ) {

            DOMContentLoaded = function() {

                document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                jQuery.ready();

};

        } else if ( document.attachEvent ) {

            DOMContentLoaded = function() {

                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).

                if ( document.readyState === "complete" ) {

                    document.detachEvent( "onreadystatechange", DOMContentLoaded );

                    jQuery.ready();

};

// The DOM ready check for Internet Explorer

        function doScrollCheck() {

            if ( jQuery.isReady ) {

                return;

            try {

                // If IE is used, use the trick by Diego Perini

                // http://javascript.nwbox.com/IEContentLoaded/

                document.documentElement.doScroll("left");

            } catch(e) {

                setTimeout( doScrollCheck, 1 );

                return;

            // and execute any waiting functions

            jQuery.ready();

//网友的实现

    // @win window reference

    // @fn function reference

    function contentLoaded(win, fn) {

        var done = false, top = true,

                doc = win.document,

                root = doc.documentElement,

                modern = doc.addEventListener,

                add = modern ? 'addEventListener' : 'attachEvent',

                rem = modern ? 'removeEventListener' : 'detachEvent',

                pre = modern ? '' : 'on',

                init = function(e) {

                    if (e.type == 'readystatechange' && doc.readyState != 'complete') {

                        return;

                    //load事件在win上，移除事件监听(readystatechange, DOMContentLoaded, load)

                    (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);

                    //保证fn只执行一次

                    if (!done && (done = true)) fn.call(win, e || e.type);

},

                poll = function() {

                    try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }

                    init('poll');

};

        if (doc.readyState == 'complete') fn.call(win, 'lazy');

        else {

            if (!modern && root.doScroll) {

                try { top = !win.frameElement; } catch(e) { }

                if (top) poll();

            doc[add](pre + 'DOMContentLoaded', init, false); //触发时，doc.readyState为'interactive'

            doc[add](pre + 'readystatechange', init, false); //会触发两次，readystatechange先触发，再触发DOMContentLoaded, 最后才是load

            win[add](pre + 'load', init, false);

document.querySelectorAll和getElementsByTagName的区别

//html代码

<ul>

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

//script代码

    var ul = document.querySelector('ul');

    var li = ul.querySelectorAll('li'),

            tagLi = ul.getElementsByTagName('li'); //动态取值

    ul.appendChild(document.createElement('li'));

    console.log(li.length); //3   li.toString()为[object NodeList]

    console.log(tagLi.length); //4 tagLi.toString()为[object HTMLCollection]

Web前端开发的问题汇总

河南码农教育 2015-08-25 10:53:12

我在平时工作中经常会遇到一些小问题，我将这些问题汇总到了一起，具体如何收集的已经记不清楚了，我将这些问题总结起来，希望对以后的工作能够带来便利和帮助。
1）.margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
   div{height:0;overflow:hidden;}
例
CSS样式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法：在P标签前后各加2个空的div：<divstyle="height:0;overflow:hidden"></div>
二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2）.div层中高度自适应问题
    网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
    这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
    200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
    http://www.xueshengshu.com/网站中用到最多了。
3）.div层中子层的居底部对齐问题
    div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
    对齐就涉及到了position定位问题；
    例
    div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
    div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
    100px},最近写的网站中http://www.msgc.net.cn/就用到了
4）.div层中清除clear属性的一小部分应用
   在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
   只会成一条线了，此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}后在每个浮动外框调用wrapfix；http://www.xueshengshu.com学生书网里用到最多了。
5）.解决IE8下div移位、错位等兼容性问题
   在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.单行文字居中与字体样式问题
   在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7）.鼠标滑上去的特殊效果
往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用οnmοuseοver="this.className='hover'"οnmοuseοut="this.className=this.classtype"即可
8）.IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
11）.list-style-image的用法
div中经常用到新闻列表前面有图标的样式，有两种简单的方法
一.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显示
二. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的小图标即可在ie6，ie7，ie8,ff中都正常显示但，ie6需要不断的刷新才能正常显示小图标；

12）.
IE6 li:hover兼容问题
<scripttype="text/javascript"><![CDATA[//><!］>
</script>
13）.ie6下支持position:absolute;
最近写一个短信平台的页面用到的底部固定的层，在ff和ie7,ie8下都是好的，可到ie6下就不行了，转了整个地球终于出来了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调用即可！详细请见“高度自适应屏幕尺寸！”
14）.border:none;与border:0;的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏
总结：
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。
15）.ie下。png的图片不会有灰色背景出现
注：首推PNG8，即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是，输出时把“杂边”设置为和背景接近的颜色
1.几经周折终于把ie6下.png有色图问题解决了，原来IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明图片部分，会显示为淡淡的灰绿色。在网页中头部加个代码即可！
2.在样式里写#png-container{
width: 300px;
height: 150px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/logoB.png',sizingMethod='crop');border:1px solid red;display:block;
}到页面中调用<div id="png-container ">
<img src="imgs/logoB.png" alt="" />
</div>注意图片要保存为png-8格式的才行！
3. 将背景图片写成style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/dialog/da_fr.png',sizingMethod='scale');background:url(../imgs/dialog/da_fr.png) no-repeat!important;_background: none transparent scroll repeat 0% 0%;);"即可。ff、ie7、ie6下都不会有灰色背景了,这个怎么又失灵了，唉害得我纠结了好几天！。
16）.表格自动换行
唉，最讨厌表格了，可是编辑软件平台有很多报表要用到表格来写，搞的我郁闷半死，要想让表格里td的内容到了一定宽度自动换行就要先设一个全局样式table{table-layout:fixed;}
td{word-break: break-all; word-wrap:break-word;};
17）.iframe高度自适应
给div加一个样式style="position:relative;"
再给iframe 加一个样式如下，只有把iframe定义成绝对定位后，才能自适应高度
style="position:absolute; height:100%;"
18）.ie8下input的bug
我滴个孩来！一个小的两个input输入框，一个是文本框，一个是按钮，却怎么也接不到一起去，可把我给急坏了，这小问题花了我差不多一下午的时间，纠结半天终于给弄出来了，但不知原因，这么写就对了！
要定义input{ vertical-align:middle;}即可！
19）.按钮的链接路径
编写网页前台时会碰到按钮的链接路径怎么给的问题！只要在button里加个οnclick="window.location.href='orderCheck.htm‘"即可！
<button type="button"οnclick="window.location.href='orderCheck.htm'">Add toCart</button>
20）.图片加alt好处
网页中<img src=""alt=""/> 中的alt是很重要的，这涉及到网页的亲和力问题（http://www.yixieshi.com/ucd/9345.html），网页中的图片若是不加alt在图片没加载出来的时候会什么信息也看不到，加了alt则在加载不出来图片的时候显示图片的信息便于用户查看信息！
21）.
去除chrome浏览器下input和textarea点击选中框
取消chrome下input和textarea的聚焦边框：
input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放大：
textarea{resize:none}
最后，写在一起，重置input和textarea的默认样式：
input,button,select,textarea{outline:none}
textarea{resize:none}

21）.页面中流动条问题
打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条的槽道，而Firefox浏览器下没有。
22). 手机, Adroid2.2, 平板电脑, 浏览器, mobile safari
最近给平板电脑做页面，经历了一番探索，搞定了。
下面来说说我的解决方案。

测试设备：
   GT-P1000 三星平板电脑（其实为大号手机）
   操作系统：android2.1
   浏览器：Mobile Safari/533.1
   User Agent打印结果：
       Mozilla/5.0 (Linux; U; Android 2.1;zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

1. 在jsp页面顶上增加以下文档类型声明：
Java代码
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

      如果不加上文档类型声明的话，在浏览器里打开页面后，页面会根据移动设备屏幕的大小自动缩放页面，并且当点击输入框时，页面会自动放大，特别难看。加上声明之后，页面会展现原始大小，手指也可以拖动屏幕进行页面放大。

2. 普通的网页字体大小，在移动设备浏览器上看到的效果是字体变小
所以css的字体大小要做大一点。

我是研究了雅虎移动版的网站：
http://hk.m.yahoo.com/

23）.页面中流动条问题

网页中改变input输入框的背景时，当输入的文字超过一定数字时，背景图片会跑，这时只要限定input的maxlength就行了！

24）.input在google浏览器下若用背景图片写并且点击上去有效果的话会掉下来
解决的办法是将input里的value=""中加一个空格！即写成value=" "
25）.解决ff下面td的换行问题<tablestyle="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break :break-all; overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap :break-word; overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
26)巧妙clearfix解决css浮动问题
如何用clear来解决css浮动问题，应该是众多前端开发人员所关心的问题，是clear还是clearfix，其实我们最终一个目的就是让浮动产生更多的影响，最为一个前端人员，我们有必要深入研究和探讨...
万能float闭合，得知很多朋友都在使用下面的通用解决办法：
1.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。

最优浮动闭合方案（这是我们推荐的）：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
用法很简单，在浮动元素的父云素上添加class="clearfix"。你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
以上写法就避免了改变html结构，直接用css解决了。
很拉轰的浮动闭合办法：
1.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案，测试了，百试不爽，真的很简单，很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的，测试通过：
1.clearfix{overflow:hidden;_zoom:1;}
chrome下input[type=text]的placeholder不垂直居中的问题解决
line-height: normal;
line-height: 22px\9;
去掉超链接或按钮点击时的虚框线
a,a:hover,input,button{outline:none;blur:expression_r(this.onFocus=this.blur());} input:active {outline:none;}input::-moz-focus-inner{border:0px}

修改select默认的样式
select{background:none;width:400px;border:1pxsolid #d8d8d8;}
option{vertical-align: middle;}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

[前端] 记录工作中遇到的各种问题（Bug，总结，记录）
最近一年，在开发实践过程中遇到了不少问题，大多都能得到解决部分知其原理，部分只能做到解决问题，而半年前遇到的问题，或多或少都忘得差不多了是该记录一下一些问题，防止再遇到就得再查资料了 1. 浏览器在…...
2024/4/20 20:14:03
前端设计与编码规范
V1.2 Suming Lv [TOC]目录 0.0 总体原则 0.1 核心思想表现、内容和行为的分离。标记应该是结构良好、语义正确以及普遍合法。渐进增强，提高用户体验。 0.2 基本原则代码一致性： 通过保持代码风格和传统的一致性，我们可以减少遗留系统维…...
2024/4/20 20:14:02
观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）
一、 phonegap 性能优化以及 phonegap Angularjs ionic 1、安装包括：nodejs-cordova-ionic，sdk，phonegap等等； 2、怎样吧导航设置到底部的解决方案； 3、ionic、JqueryMobile、Sencha的对比：　 &#xff0…...
2024/5/3 2:46:58
前端知识点小结
一.HTML,CSS (兼容性) 1. animation animation 属性是一个简写属性，用于设置六个动画属性： animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction注释：请始终规定 animat…...
2024/4/21 3:01:58
angular ionic 轮播图不显示图片或白屏问题
在ion-slide-box 层上加入ng-if，数据加载后在进行循环...
2024/4/21 3:01:53
制作一个含文字和图片的轮播图
非原生JS制作轮播图有一定的参考价值，但是不能保证不出错，还请大佬门自己多多尝试实现3个功能： 1.自动轮播 2.鼠标放上去停止轮播 3.鼠标放在小圆点上实现轮播原理一个盒子（div）放置图片和文字，多个盒…...
2024/5/2 23:31:51
Angular实现图片点击缩放组件
Angular实现图片点击缩放组件本文将设计一个用于网页中点击图片缩放的 Angular 组件。阅读需要注意的是，本文只讲解原理和设计理念，不过多讲解Angular框架的API。线demo。需求分析一般用户在阅读文章的时候，由于种种限制，图片会比较小，所以需要提供一个可以查看图…...
2024/5/2 22:25:00
Angular4.x+Swiper3制作公告栏和轮播图（引用第三方库）
话不多说，先看一下效果： 上方的轮播图是循环轮播，可以通过手动来控制，而下方的公告栏则无法通过手动控制。一个界面出现两个Swiper组件的需求。数据来源：图片URL和公告内容都是通过*ngFor命令来读取ts文件中的数据然…...
2024/4/21 3:01:51
Angular中使用Resolve守卫实现预先获取路由组件所需数据
Angular官网中描述的使用resolve守卫主要解决的问题如下： 如果你在使用真实 api，很有可能数据返回有延迟，导致无法即时显示。在这种情况下，直到数据到达前，显示一个空的组件不是最好的用户体验，最好使用解…...
2024/4/21 3:01:50
Angular cli构建项目
一，准备阶段。初始化项目，并尝试运行： ng new myProjectcd myProjectng serve 二，添加外部框架：npm install jquery --save npm install popper.js --save npm install bootstrap --save由于typescript不能直接识别js…...
2024/4/21 3:01:49
AngularJS轮播图
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html ng-app"myApp" lang"en"> <head><meta charset"UTF-8"><title>AngularJS carousel</title><link href"http://libs.…...
2024/4/21 3:01:47
Angular（3）
jqLite的使用 -<li ng-repeat"(key,value) in obj" ng-bind-template"{{key}} {{value}}"> </li> 这行代码在webstorm 编辑器里面会报错用sublim 不会报错是这样写不规范还是只是编辑器自身解析问题呢?页面执行结果没有问题预习资料推荐…...
2024/4/21 3:01:46
angular中的无缝向上滚动效果
html代码如下： <div class"slide"><ul class"slide-ul"><demo-slide-follow id"slide1" dataset-data "data"></demo-slide-follow></ul> </div>css代码如下： .slide{h…...
2024/4/27 19:51:03
ionic实现轮播图效果
ionic 的js有一个自带的滑动框效果，可以实现手机端，类似于淘宝顶部的轮播图效果，向左滑动上一张、向右下一张。does-continue"true" 表示自动滑动，slide-interval2000 表示等待2000毫秒开始滑动预览效果：…...
2024/4/27 16:27:35
ionic实现动态轮播图
温馨提示 Ionic和angular在不断发展，项目也在不断更新迭代，此文档必然是有时效性的，继而温馨提示读者在使用此文档时，注意项目架构。如有变化，请持续更新此文档。一.所需资源 Ionic4 二.集成具体步骤 2.html代码 …...
2024/4/27 18:24:21
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂，那其组件体系就是其躯体，在模块的支持下渲染出所有用户直接看得见的东西，一个项目最表层的东西就是组件呈现的视图。而除了直接看的见的躯体之外，一个完整的“生物”还需要有感觉器官&#xff0c…...
2024/4/27 16:04:22
swiper轮播图+angular自定义指令
swiper轮播图angular自定义指令下载所与需要的库文件直接下载所需要的库文件，网址：http://www.swiper.com.cn/npm install npm install swiper3.4.2 --save Bower install bower install swiper#3.4.2 --save 说明注意：我所使用的Swiper…...
2024/4/27 14:48:27
AngularJS 动态添加展示数据
AngularJS 动态添加展示数据 2017/11/10 9:35:17 效果代码 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>Title</title><style type"text/css">table {margin: 10px;}</st…...
2024/4/27 19:51:44
淡入淡出轮播(banner),自动按图片个数生成居中按钮——和派孔明
淡入淡出轮播(banner),自动按图片个数生成居中按钮 /* 1、JQuery带左右按钮淡入淡出轮播 2、轮播图根据图片数量自动生成按钮个数 3、在宽高不确定的情况下，居中元素注：不管是菜鸟还是大神，若有bug，及时联系交流,QQ 2766588…...
2024/4/27 14:32:44
使用angular路由切换后轮播以及iscrollJs失效的问题
我们在使用angular的时候，路由总是最让人头疼的地方。在这里为大家解决一些用angular来回切换遗留下的小问题比如我们在使用ng-route时如果主页面含有轮播图，当你切换到其他页面再切回主页面时会发现主页面的轮播图不会动。对于这个问题我们要用到ang…...
2024/4/27 18:30:08

简历资料

1.移动端前端开发，PC端前端开发

2.移动端与PC端比有哪些不同？

关于移动端：

几点响应屏幕大小的建议和方法：

3.W3c标准

4.使用响应式布局

响应式布局和自适应的区别：

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度，多点百分比

(3)相对大小的字体:

(4)流式布局，

(5)选择加载css，

响应式布局等于流动网格布局，

响应式布局概念

响应式设计的步骤

一些注意的

5.移动web开发响应式布局总结

一、viewport深入理解

二、flexbox弹性盒子布局

三、媒体查询@media query

6.响应式设计总结：

1.使用百分比布局

2.设置弹性图片

3.重新布局，显示与隐藏

7. ajax五步使用法:

清除浮动

8 渐进增强优雅降级

二者区别

8.浅析JSONP解决Ajax跨域访问问题的思路详解

JSONP的缺点：

9.对网站的文件和资源进行优化?

10.Angularjs十大经典面试题

1. ng-show/ng-hide 与 ng-if的区别？

2.解释下什么是$rootScrope以及和$scope的区别？

3. 表达式 {{yourModel}}是如何工作的？

4. Angular中的digest周期是什么？

5. 如何取消 $timeout, 以及停止一个$watch()?

6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

7. 列出至少三种实现不同模块之间通信方式？

8. 有哪些措施可以改善Angular 性能

9. 你认为在Angular中使用jQuery好么？

10. 如何进行angular的单元测试

11.AngularJS 常见面试问题

ng-if 跟 ng-show/hide 的区别有哪些？

ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

{{now | 'yyyy-MM-dd'}} 这种表达式里面，竖线和后面的参数通过什么方式可以自定义？

factory、service 和 provider 是什么关系？

angular 的数据绑定采用什么机制？详述原理

两个平级界面块 a 和 b，如果 a 中触发一个事件，有哪些方式能让 b 知道？详述原理

一个 angular 应用应当如何良好地分层？

angular 应用常用哪些路由库，各自的区别是什么？

如果通过angular的directive规划一套全组件化体系，可能遇到哪些挑战？

分属不同团队进行开发的 angular 应用，如果要做整合，可能会遇到哪些问题，如何解决？

angular 的缺点有哪些？

如何看待 angular 1.2 中引入的 controller as 语法？

详述 angular 的 “依赖注入”

如何看待angular2

12.Angular常见面试题

1.angular的数据绑定采用什么机制？详述原理

2 AngularJS的数据双向绑定是怎么实现的？

3.在使用angularjs项目开发中 你使用过那些第三方的插件

4.ng-show/ng-hide 与 ng-if的区别？

5 解释下什么是$rootScrope以及和$scope的区别？

6 列出至少三种实现不同模块之间通信方式？

7. 表达式 {{yourModel}} 是如何工作的？

8.angular中的$http

9.ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

10.angularjs 是mvc还是mvvm框架

首先阐述下你对mvc和mvvm的理解

mvvm的优点

在angular中MVVM模式主要分为四部分：

11.angularjs中$scope，controller，directive，sevice在mvvm中充当什么角色

12.在使用angularjs项目开发中 你使用过那些第三方的插件

13.在angular项目中你如何控制静态资源的合理加载

14.再写controlloer逻辑的时候 你需要注意什么？

15.AngularJS的数据双向绑定是怎么实现的？

16.controller之间怎么通讯

1. `ng-show/ng-hide` 与 `ng-if`的区别？

2.解释下什么是`$rootScrope`以及和`$scope`的区别？

3. 表达式 `{{yourModel}}`是如何工作的？

5. 如何取消 `$timeout`, 以及停止一个`$watch()`?

`{{now | 'yyyy-MM-dd'}}` 这种表达式里面，竖线和后面的参数通过什么方式可以自定义？

3.在使用angularjs项目开发中你使用过那些第三方的插件

12.在使用angularjs项目开发中你使用过那些第三方的插件

14.再写controlloer逻辑的时候你需要注意什么？

39、你将如何解释JavaScript中的闭包？什么时候使用？