简历资料

最新推荐文章于 2021-04-26 13:43:37 发布

终身学习者-刘

最新推荐文章于 2021-04-26 13:43:37 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_41370424/article/details/81226290

版权

专业技能

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 () </

最低0.47元/天解锁文章

终身学习者-刘

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
简历资料

专业技能1.移动端前端开发，PC端前端开发　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移...
复制链接

扫一扫