Js篇

1;jquery使用时是怎样绑定事件的?

四种方式bind,live,delegate,on 前三种都是内部调用on来实现绑定事件的.

我常用的是$(document).on(事件名,事件类型,function事件)

2:怎样实现js的模块化编程.

模块就是能够实现特定功能的一组方法

1;把函数封装在对象里,使用的时候,就调用对象的方法

(缺点:外部通过调用内部方法会改写内部方法)

2;立即执行函数通过return把内部成员返回出去,可以不暴露内部成员

(Function fn(){

Return function(){}

})()

当然这是最基础的模块化版本,在阮一峰老师的js模块化教程里边还讲了许多特别高级的模块化应用

3;ECSA6新规范将支持类和模块

4;

5;怎样处理浏览器之间的兼容问题的?

很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，

浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会初始化各个标签的样式

浏览器兼容问题二：块属性标签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时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}(默认值,内容不会被修剪,超出的部分会呈现在元素框之外)

备注：在B/S系统中，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

优先在谷歌浏览器使用最好的版本,再采用优雅降级的方法兼容其他浏览器,比如csshack,移动端使用媒体查询@media

/* CSS hack*/

通过在css样式中添加一些特殊符号,让不同的浏览器是识别相应的符号,以达到不同的浏览器识别相应的css样式

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

6;为什么会学js框架?

1. 现阶段框架已经是前端开发的标配了,在工作中,为了提高工作效率,使用框架是最方便快捷的方式.

2. 工作中,公司要求

3. 可以通过查看框架的源码,去了解框架底层的结构,学习一下别人的开发模式,以后要是向全栈法装的话,这是必须学习的开发思想

7:原生js,库和框架的区别

原生js是一段简单的代码，库是一个更大代码的集合，以dom,bom作为驱动,而框架不只是库的简单集合，它还有自己的事件、DOM交互模型

8:怎样把一些内容加到页面上?

分情况而定:

1:例如弹出框,先编辑好弹出框,然后隐藏,当触发某个事件的时候,就弹出显示就好.

再比如下拉列表,也是一样的原理;

2:部分模块切换,当触发某个事件时,相应的模块内容发生相应的变化,这个可以通过js去切换相应的类

3:要是数据渲染的话,可以先写一个template,通过ajax请求获取数据,对数据渲染好之后,再append到相应的位置.

10:bootstrap的设计理念

方便,快捷,简单,直观,可以让使用者快速地构建出一个网站来,并且能够具备响应式功能,特别是移动端的开发,bootstrap比较适用.

11:在使用bootstrap的js模块时,需要引入jquery包,为什么他自己不集成?

如果他自己集成了jQuery,很可能跟使用者自己引入的jQuery包版本不同,从而引起冲突.

12:mvc,MVP,mvvm模式的区别

Mvc:module, view, controller

Mvp:module,view,presenter 与controller的区别:负责处理view背后的事件,通过view接收数据,module对数据进行处理,再返回到view上,presenter与view是通过接口的方式传递的,两者之间可以双向交互

Mvvm:module,view,viewmodule这个模式中view和viewmodule是双向数据绑定的,viewmodule可以通过观察者模式把view中的数据变化实时传递给module

12:

14:attribute和property的区别

Attribute指的是dom节点

要设置一个attribute节点,通过getattribute,setattritube,removeattribute方法

Property是属性

两者都可以修改属性的值,获取属性

两者的区别:

<div class=”box” ></div>

<select>

<option checked=checked>123</option>

</select>

Opt=getelementbytagname(‘option’)[0];

Console.log(opt.getAttribute(checked))//checked

Console.log(opt.checked)//true

15:

16:angularJS的框架

Angularjs的框架是mvvm(mvc的一种);

17:mvc和mvvm的理解

两者都是一种开发模式,mvc指的是module,view,controller三部分构成,使用这种模式方便后期代码维护,修改一块功能,不影响其他功能的使用,同时为了方便复用,项目中很多逻辑是一样的,mvc的最终目的是为了模块化和复用.Module用来处理数据,view用来展示结果,Controller用来连接module和view;

Mvvm:指的是module,view,viewmodule,在angularJS中,$scope充当这个角色,

18;Angularjs的核心:双向数据绑定和脏检查机制

脏检查机制:每建立一个$scope,angularJS内部就和自动地与之匹配一个$watch去监听$scope的数据,当$scope中的数据发生变化时,angularJS会自动地调用$diges()t去触发一轮$digest循环,循环的时候,digest会触发每一个$scope的$watch,这些$watch会自动对比当前数据与上次数据是否一致,如果不一致,会调用callback函数,通过调用callback去更新view中的数据.

$digest至少会循环2次,最多会循环10次,确保$watch中的数据得到检测完成.

项目开发

19:项目的开发流程

1. 立项公司高层发布立项通知

2. 可行性分析/评审技术总监和营销总监进行调研分析

3. 产品需求分析/评估产品经理进行调研,公司高层进行评审

4. 需求产品规划与构架系统架构师进行分析与架构

5. 程序开发产品经理组织开发人员对相对应的功能进行实现.

6. 测试测试人员对系统进行测试,并把结果返回给产品经理

7. 交付上线产品经理部署工程师将产品进行相应的功能不输,投入线上

8. 后期维护

20:怎样提高页面性能?

（1） 减少http请求次数, JS、CSS,源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

CDN:一种新型智能网络构建方式

基本实现思路:尽可能避免网络上有可能影响数据传输速度和网络瓶颈和环节,使内容传输更快,更稳定,通过在网络各处放置节点服务器构成一层智能虚拟网络,cdn能够根据网络流量,节点,请求以及到用户的距离等因素将用户的请求导向离用户最近的节点服务器上,使用户可就近获取所需内容,解决网络拥挤的问题,提高用户访问网站的响应速度

（2）对于前端来说,用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）使用模块化开发,组件化开发,对js代码进行封装, 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

21:怎样处理浏览器缓存问题?

在使用ajax的get请求时,浏览器会把获取的数据进行缓存,在此请求时就会出现拿不到实时的数据,影响代码的逻辑实现

1:解决方式,以下2种方式都有弊端,使用jQuery的 jQuery.ajaxPrefilter方法配置,可以对全局缓存进行禁用,也可以开启js脚本的缓存.

如果js脚本文件进行了修改,则可以在url后边添加版本号的方式来进行数据的刷新

(在url后边加上一个随机参数,或者对ajax的cache设置为false这种方式对于请求次数多的页面不适用

解决方式:使用ajax的$.ajaxSetup({ cache: false });全局禁用浏览器端缓存.)

2;使用gulp自动化工具去配置自动更新修改了的版本号

22;做表单类页面的时候需要注意哪些问题?

注重用户体验,比如:用js中的正则表达式对表单输入的内容做判断,并快速反馈给用户输入的内容是否有效,比如当用户填写完成之后,汇总一个完整率给用户,比如用户信息填完之后生成一个信息预览,便于用户检查修改

23:怎样减少首屏加载时间?

1: 可以使用懒加载方法对第二屏进行设置延时加载,优先加载第一屏图片

2:尽可能压缩图片

3:把js放到body后边,尽可能地保证基本信息先加载出来

24;对前端的理解:

对前端的基本定义就是连接设计,后端以及用户的一座桥梁,

它需要掌握三项基本技能:html css js ,要是再懂点php,Java等其他语言就更好了

定位:他可以基于用户开发网页,提供方友好的用户体验

让前端更加规范和标准

项目展示

1.H5的项目

Css篇

1;filedset 对表单进行分组

<filedset>

<legend>分组说明</legend>

</filedset>

Filedset和legend都是块元素,可以设置样式

2;Text-align=center === align=center

3;out-line

是元素外面的边框线,用于突出元素,一般初始化清除out-line:none

4;select 下拉框

<select>

<option></option> 下拉选项

</select>

5;textarea文本框

Resize:none是否允许用户缩放,改动,拖动

6;vertical-align:middle;

垂直对齐方式(img,text)

7;img有默认三像素的空白

8;border-collapse: collapse

table {

border-collapse: collapse;//合并表格边框tr td

}

9: font: 12px/150% Arial, Verdana, "\5b8b\4f53";

12px或者(默认字体8px)150%也就是12px, 宋体,unicode编码

10:font:400 13px/15px "consolas";

"microsoft yahei"

Font-weight font-size line-height font-family

11:顶部导航边线不能居中问题

1:在li后边加<div class=”line”></div>

2:给li加边框ul{

height: 30px;

line-height: 30px;

li{

height: 20px;

line-height: 20px;

padding:0 10px;

margin:5px 0;

float: left;

border-right:1px solid #ddd;

display: inline-block;

height: 20px;

line-height: 20px;

}

12:三种清除浮动的方法:

1:给父盒子添加clear:both;

2:给父盒子添加overfiow:hidden;

3:单伪元素标签法

.clearfix:after{

Content:””;

Height:0;

Visibisity:hidden;

Overflow:hidden;

Display:block;

Clear:both;

}

.clearfix{

Zoom:1

}

4:双伪元素标签法

.clearfix:before,.clearfix:after{