BETWAY登录面试题汇总 一、HTML和CSS 1、你做的页面在哪些流览器测验过?这些阅览器的内核别离是什么? IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:曾经是presto内核,Opera现已改用Google Chrome的 内核
Chrome: (依据webkit,Google与Opera Software共同开发)
2、每个HTML文件里最初都有个很重要的东西,Doctype,知道这是干什么的吗? 声明坐落文档中的最前面的方位,处于标签之前。此标签可奉告阅览器文档运用哪种 HTML 或 XHTML 标准。(要害:奉告阅览器依照何种标准解析页面)
3、Quirks【扩科斯】办法是什么?它和Standards办法有什么差异 从IE6开端,引进了Standards【斯坦尔德是】办法,标准办法中,阅览器测验给契合标准的文档在标准上的正确处理到达在指定阅览器中的程度。
在IE6之前CSS还不行老练,所以IE5等之前的阅览器对CSS的支撑很差, IE6将对CSS供应更好的支撑,可是这时的问题就来了,由于有许多页面是依据旧的布局办法写的,而假如IE6 支撑CSS则将令这些页面显现不正常,怎样在即保证不损坏现有页面,又供应新的烘托机制呢?
在写程序时咱们也会常常遇到这样的问题,怎样保证本来的接口不变,又供应更强壮的功用,尤其是新功用不兼容旧功用时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,咱们就运用新功用,而假如这个参数 不为真时,dd就运用旧功用,这样就能不损坏原有的程序,又供应新功用。IE6也是类似这样做的,它将DTD当成了这个“参数”,由于曾经的页面咱们都不会去写DTD,所以IE6就假定 假如写了DTD,就意味着这个页面将选用对CSS支撑更好的布局,而假如没有,则选用兼容之前的布局办法。这便是Quirks办法(古怪办法,奇怪办法,奇怪办法)。
差异:
全体会有布局、款式解析和脚本履行三个方面的差异。
盒模型:在W3C标准中,假如设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 办法下,IE的宽度和高度还包含了padding和border。
设置行内元素的高宽:在Standards办法下,给等行内元素设置wdith和height都不会收效,而在quirks办法下,则会收效。
设置百分比的高度:在standards办法下,一个元素的高度是由其包含的内容来决议的,假如父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:运用margin:0 auto在standards办法下能够使元素水平居中,但在quirks办法下却会失效。
(还有许多,答出什么不重要,要害是看他答出的这些是不是自己经历遇到的,仍是说都是看文章看的,乃至彻底不知道。)
4、div+css的布局较table布局有什么长处? 改版的时分更便利 只需改css文件。
页面加载速度更快、结构化明晰、页面显现简练。
体现与结构相别离。
易于优化(查找引擎优化)查找引擎更友爱,排名更简略靠前。
5、 img的alt与 有何异同? strong与em的异同? a:alt(alt text):为不能显现图画、窗体或 s的用户署理(UA),alt特色用来指定替换文字。替换文字的言语由lang特色指定。(在IE阅览器下会在没有 时把alt当成 tool tip显现)
(tool tip):该特色为设置该特色的元素供应主张性的信息。
strong:粗体着重标签,着重,表明内容的重要性
em:斜体着重标签,更激烈着重,表明内容的着要点
6、你能描绘一下渐进增强和高雅降级之间的不同吗? 渐进增强 progressive enhancement:针对低版别阅览器进行构建页面,保证最根本的功用,然后再针对高档阅览器进行作用、交互等改善和追加功用到达更好的用户体会。
高雅降级 graceful degradation:一开端就构建完好的功用,然后再针对低版别阅览器进行兼容。
差异:高雅降级是从凌乱的现状开端,并企图削减用户体会的供应,而渐进增强则是从一个十分根底的,能够起作用的版别开端,并不断扩大,以习气未来环境的需求。降级(功用衰减)意味着往回看;而渐进增强则意味着朝前看,一起保证其根基处于安全地带。
“高雅降级”观念
“高雅降级”观念以为应该针对那些最高档、最完善的阅览器来规划网站。而将那些被以为“过期”或有功用缺失的阅览器下的测验作业安排在开发周期的终究阶段,并把测验方针约束为干流阅览器(如 IE、Mozilla 等)的前一个版别。
在这种规划典范下,旧版的阅览器被以为仅能供应“粗陋却不妨 (poor, but passable)” 的阅览体会。你能够做一些小的调整来习气某个特定的阅览器。但由于它们并非咱们所重视的焦点,因而除了修正较大的过错之外,其它的差异将被直接疏忽。
“渐进增强”观念
“渐进增强”观念则以为应重视于内容自身。
内容是咱们树立网站的诱因。有的网站展现它,有的则搜集它,有的寻求,有的操作,还有的网站乃至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的规划典范。这也是它当即被 Yahoo! 所选用并用以构建其“分级式阅览器支撑 (Graded Browser Support)”战略的原因地点。
那么问题来了。现在产品司理看到IE6,7,8网页作用相对高版别现代阅览器少了许多圆角,暗影(CSS3),要求兼容(运用图片布景,抛弃CSS3),你会怎样压服他?
7、为什么运用多个域名来存储网站资源会更有用? CDN缓存更便利
打破阅览器并发约束
节约cookie带宽
节约主域名的衔接数,优化页面呼应速度
防止不必要的安全问题
8、请谈一下你对网页标准和标准拟定组织重要性的了解。 网页标准和标准拟定组织都是为了能让web开展的更‘健康’,开发者遵从共同的标准,下降开发难度,开发本钱,SEO也会更好做,也不会由于乱用代码导致各种BUG、安全问题,终究进步网站易用性。
9、请描绘一下cookies,sessionStorage和localStorage的差异? sessionStorage用于本地存储一个会话(session)中的数据,这些数据只需在同一个会话中的页面才干拜访而且当会话完毕后数据也随之毁掉。因而sessionStorage不是一种耐久化的本地存储,只是是会话等级的存储。而localStorage用于耐久化的本地存储,除非自动删去数据,否则数据是永久不会过期的。
web storage和cookie的差异
Web Storage的概念和cookie类似,差异是它是为了更大容量存储规划的。Cookie的巨细是受限的,而且每次你恳求一个新的页面的时分Cookie都会被发送曩昔,这样无形中糟蹋了带宽,别的cookie还需求指定作用域,不能够跨域调用。
除此之外,Web Storage具有setItem,getItem,removeItem,clear等办法,不像cookie需求BETWAY登录开发者自己封装setCookie,getCookie。可是Cookie也是不能够或缺的:Cookie的作用是与服务器进行交互,作为HTTP标准的一部分而存在 ,而Web Storage只是是为了在本地“存储”数据而生。
10、简述一下src与href的差异。 src用于替换当时元素,href用于在当时文档和引证资源之间树立联络。
src是source的缩写,指向外部资源的方位,指向的内容将会嵌入到文档中当时标签地点方位;在恳求src资源时会将其指向的资源下载并运用到文档内,例如js脚本,img图片和 等元素。
< src =”js.js”>
当阅览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、履行完毕,图片和结构等元素也如此,类似于将所指向资源嵌入当时标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写,指向网络资源地点方位,树立和当时元素(锚点)或当时文档(链接)之间的链接,假如咱们在文档中增加
< href=”common.css” rel=”stylesheet”/>
那么阅览器会辨认该文档为css文件,就会并行下载资源而且不会中止对当时文档的处理。这也是为什么主张运用 办法来加载css,而不是运用@import办法。
11、知道的网页制造会用到的图片格局有哪些? png-8,png-24,jpeg,gif,svg。
可是上面的那些都不是面试官想要的终究答案。面试官希望听到是Webp。(是否有重视新技术,新鲜事物)
科普一下Webp:WebP格局,谷歌(google)开发的一种旨在加速图片加载速度的图片格局。图片紧缩体积大约只需JPEG的2/3,并能节约许多的服务器带宽资源和数据空间。Facebook Ebay等闻名网站现已开端测验并运用WebP格局。
在质量相同的状况下,WebP格局图画的体积要比JPEG格局图画小40%
12、知道什么是微格局吗?谈谈了解。在BETWAY登录构建中应该考虑微格局吗? 微格局(Microformats)是一种让机器可读的语义化XHTML词汇的调集,是结构化数据的敞开标准。是为特别运用而拟定的特别格局。
长处:将智能数据增加到网页上,让网站内容在查找引擎成果界面能够显现额定的提示。(运用典范:豆瓣,有爱好自行google)
13、在css/js代码上线之后开发人员常常会优化功用,从用户改写网页开端,一次js恳求一般状况下有哪些当地会有缓存处理? 答案:dns缓存,cdn缓存,阅览器缓存,服务器缓存。
14、一个页面上有许多的图片(大型电商网站),加载很慢,你有哪些办法优化这些图片的加载,给用户更好的体会。 图片懒加载,在页面上的未可视区域能够增加一个滚动条作业,判别图片方位与阅览器顶端的间隔与页面的间隔,假如前者小于后者,优先加载。
假如为幻灯片、相册等,能够运用图片预加载技术,将当时展现图片的前一张和后一张优先下载。
假如图片为css图片,能够运用CSSsprite,SVGsprite,Iconfont、 64等技术。
假如图片过大,能够运用特别编码的图片,加载时会先加载一张紧缩的特别凶猛的缩略图,以进步用户体会。
假如图片展现区域小于图片的实在巨细,则因在服务器端依据事务需求先行进行图片紧缩,图片紧缩后巨细与展现共同。
15、你怎样了解HTML结构的语义化? 去掉或款式丢掉的时分能让页面呈现明晰的结构:
html自身是没有体现的,咱们看到
屏幕阅览器(假如访客有视障)会彻底依据你的符号来“读”你的网页.
例如,假如你运用的含语义的符号,屏幕阅览器就会“逐一拼出”你的单词,而不是试着去对它完好发音.
PDA、手机等设备或许无法像一般电脑的阅览器相同来烘托网页(一般是由于这些设备对CSS的支撑较弱)
运用语义符号能够保证这些设备以一种有意义的办法来烘托网页.抱负状况下,观看设备的使命是契合设备自身的条件来烘托网页.
语义符号为设备供应了所需的相关信息,就省去了你自己去考虑一切或许的显现状况(包含现有的或许将来新的设备).例如,一部手机能够挑选使一段符号了标题的文字以粗体显现.而掌上电脑或许会以比较大的字体来显现.不管哪种办法一旦你对文本符号为标题,您就能够坚信读取设备将依据其自身的条件来适宜地显现页面.
查找引擎的爬虫也依靠于符号来确认上下文和各个要害字的权重
曩昔你或许还没有考虑查找引擎的爬虫也是网站的“访客”,但现在它们他们实践上是极端名贵的用户.没有他们的话,查找引擎将无法索引你的网站,然后一般用户将很难过来拜访.
你的页面是否对爬虫简略了解十分重要,由于爬虫很大程度上会疏忽用于体现的符号,而只重视语义符号.
因而,假如页面文件的标题被符号,而不是,那么这个页面在查找成果的方位或许会比较靠后.除了进步易用性外,语义符号有利于正确运用CSS和 ,由于其自身供应了许多“钩钩”来运用页面的款式与行为.
SEO首要仍是靠你网站的内容和外部链接的。
便于团队开发和保护
W3C给咱们定了一个很好的标准,在团队中咱们都遵从这个标准,能够削减许多差异化的东西,便利开发和保护,进步开发功率,乃至完结模块化开发。
16、谈谈以BETWAY登录视点动身做好SEO需求考虑什么? 了解查找引擎怎样抓取网页和怎样索引网页
你需求知道一些查找引擎的根本作业原理,各个查找引擎之间的差异,查找机器人(SE robot 或叫 web crawler)怎样进行作业,查找引擎怎样对查找成果进行排序等等。
标签优化
首要包含主题( ),网站描绘(De ion),和要害词(Keywords)。还有一些其它的躲藏文字比方Author(作者),Category(目录),Language(编码语种)等。
怎样选取要害词并在网页中放置要害词
查找就得用要害词。要害词剖析和挑选是SEO最重要的作业之一。首要要给网站确认主要害词(一般在5个上下),然后针对这些要害词进行优化,包含要害词密度(Density),相关度(Relavancy),杰出性(Prominency)等等。
了解首要的查找引擎
尽管查找引擎有许多,可是对网站流量起决议作用的就那么几个。比方英文的首要有Google,Yahoo,Bing等;中文的有百度,搜狗,有道等。不同的查找引擎对页面的抓取和索引、排序的规矩都不相同。还要了解各查找门户和查找引擎之间的联系,比方AOL网页查找用的是Google的查找技术,MSN用的是Bing的技术。
首要的互联网目录
Open Directory自身不是查找引擎,而是一个大型的网站目录,他和查找引擎的首要差异是网站内容的搜集办法不同。目录是人工修正的,首要录入网站主页;查找引擎是自动搜集的,除了主页外还抓取许多的内容页面。
按点击付费的查找引擎
查找引擎也需求生计,跟着互联网商务的越来越老练,收费的查找引擎也开端大行其道。最典型的有Overture和百度,当然也包含Google的广告项目Google Adwords。越来越多的人经过查找引擎的点击广告来定位商业网站,这里边也大有优化和排名的学识,你得学会用最少的广告投入获得最多的点击。
查找引擎登录
网站做完了今后,别躺在那里等着客人突如其来。要让别人找到你,最简略的办法便是将网站提交(submit)到查找引擎。假如你的是商业网站,首要的查找引擎和目录都会要求你付费来获得录入(比方Yahoo要299美元),可是好消息是(至少到现在为止)最大的查找引擎Google现在仍是免费,而且它操纵着60%以上的查找商场。
链接交流和链接广泛度( Popularity)
网页内容都是以超文本(Hypertext)的办法来互相链接的,网站之间也是如此。除了查找引擎以外,人们也每天经过不同网站之间的链接来Surfing(“冲浪”)。其它网站到你的网站的链接越多,你也就会获得更多的拜访量。更重要的是,你的网站的外部链接数越多,会被查找引擎以为它的重要性越大,然后给你更高的排名。
合理的标签运用
17、有哪项办法能够对一个DOM设置它的CSS款式? 外部款式表,引进一个外部css文件
内部款式表,将css代码放在标签内部
内联款式,将css款式直接界说在 HTML 元素内部
18、CSS都有哪些挑选器? 派生挑选器(用HTML标签声明)
id挑选器(用DOM的ID声明)
类挑选器(用一个款式类名声明)
特色挑选器(用DOM的特色声明,归于CSS2,IE6不支撑,不常用,不知道就算了)
除了前3种根本挑选器,还有一些扩展挑选器,包含
子孙挑选器(运用空格间隔,比方div .a{ })
群组挑选器(运用逗号间隔,比方p,div,#a{ })
那么问题来了,CSS挑选器的优先级是怎样样界说的?
根本准则:
一般来说,挑选器越特别,它的优先级越高。也便是挑选器指向的越准确,它的优先级就越高。
凌乱的核算办法:
用1表明派生挑选器的优先级
用10表明类挑选器的优先级
用100标明ID挑选器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
那么问题来了,看下列代码,
标签内的文字是什么色彩的?
答案:red。与款式界说在文件中的先后次序有关,便是后边的掩盖前面的,与在
中的先后联系无关。
19、CSS中能够经过哪些特色界说,使得一个DOM元素不显现在阅览器可视规模内? 最根本的:
设置display特色为none,或许设置visibility特色为hidden
技巧性:
设置宽高为0,设置通明度为0,设置z-index方位在-1000
20、超链接拜访往后hover款式就不呈现的问题是什么?怎样处理? 答案:被点击拜访过的超链接款式不在具有hover和active了,处理办法是改动CSS特色的摆放次序: L-V-H-A( ,visited,hover,active)
21、什么是Css Hack?ie6,7,8的hack别离是什么? 答案:针对不同的阅览器写不同的CSS code的进程,便是CSS hack。
示例如下:
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ 22、请用Css写一个简略的幻灯片作用页面 答案:知道是要用css3。运用animation动画完结一个简略的幻灯片作用。
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-key s "loops" {
0% {
background:url(https://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(https://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(https://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(https://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(https://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
} 24、行内元素和块级元素的具体差异是什么?行内元素的padding和margin可设置吗? 块级元素(block)特性:
总是独占一行,体现为另起一行开端,而且这以后的元素也有必要另起一行显现;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可操控;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不行改动(也便是padding和margin的left和right是能够设置的),便是里边文字或图片的巨细。
那么问题来了,阅览器还有默许的天然生成inline-block元素(具有内在尺度,可设置高宽,但不会自动换行),有哪些?
25、什么是外边距堆叠?堆叠的成果是什么? 外边距堆叠便是margin-collapse。
在CSS傍边,相邻的两个盒子(或许是兄弟联系也或许是先人联系)的外边距能够结组成一个独自的外边距。这种兼并外边距的办法被称为折叠,而且因而所结组成的外边距称为折叠外边距。
折叠成果遵从下列核算规矩:
两个相邻的外边距都是正数时,折叠成果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠成果是两者必定值的较大值。
两个外边距一正一负时,折叠成果是两者的相加的和。
26、rgba()和opacity的通明作用有什么不同? rgba()和opacity都能完结通明作用,但最大的不同是opacity作用于元素,以及元素内的一切内容的通明度,
而rgba()只作用于元素的色彩或其布景色。(设置rgba通明的元素的子元素不会承继通明作用!)
27、css中能够让文字在笔直和水平方向上堆叠的两个特色是什么? 笔直方向:line-height
水平方向:letter-spacing
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:能够用于消除inline-block元素间的换行符空格空隙问题。
28、怎样笔直居中一个起浮元素? // 办法一:已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需求相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
//办法二:不知道元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需求相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
} 那么问题来了,怎样笔直居中一个?(用更简洁的办法。)
#container //的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
} 29、px和em的差异。 px和em都是长度单位,差异是,px的值是固定的,指定是多少便是多少,核算比较简略。em得值不是固定的,而且em会承继父级元素的字体巨细。
阅览器的默许字体高都是16px。所以未经调整的阅览器都契合: 1em=16px。那么12px=0.75em, 10px=0.625em。
30、描绘一个”reset”的CSS文件并怎样运用它。知道normalize.css吗?你了解他们的不同之处? 重置款式十分多,但凡一个BETWAY登录开发人员必定有一个常用的重置CSS文件并知道怎样运用它们。他们是盲目的在做仍是知道为什么这么做呢?原因是不同的阅览器对一些元素有不同的默许款式,假如你不处理,在不同的阅览器下会存在必要的危险,或许更有戏剧性的性发作。
你或许会用Normalize来替代你的重置款式文件。它没有重置一切的款式风格,但仅供应了一套合理的默许款式值。既能让很多阅览器到达共同和合理,但又不打乱其他的东西(如粗体的标题)。
在这一方面,无法做每一个复位重置。它也的确有些超越一个重置,它处理了你永久都不必考虑的古怪,像HTML的audio元素不共同或line-height不共同。
31、Sass、LESS是什么?咱们为什么要运用他们? 他们是CSS预处理器。他是CSS上的一种笼统层。他们是一种特别的语法/言语编译成CSS。
例如Less是一种动态款式言语. 将CSS赋予了动态言语的特性,如变量,承继,运算, 函数. LESS 既能够在客户端上运转 (支撑IE 6+, Webkit, Firefox),也可一在服务端运转 (凭借 Node.js)。
为什么要运用它们?
结构明晰,便于扩展。
能够便利地屏蔽阅览器私有语法差异。这个不必多说,封装对阅览器语法差异的重复处理,削减无意义的机械劳作。
能够轻松完结多重承继。
彻底兼容 CSS 代码,能够便利地运用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也能够与 LESS 代码一起编译。
32、display:none与visibility:hidden的差异是什么? display : 躲藏对应的元素但不抢占该元素本来的空间。
visibility: 躲藏对应的元素而且抢占该元素本来的空间。
便是,运用CSS display:none特色后,HTML元素(方针)的宽度、高度等各种特色值都将“丢掉”;而运用visibility:hidden特色后,HTML元素(方针)只是是在视觉上看不见(彻底通明),而它所占有的空间方位依然存在。
34、CSS中 和@import的差异是: 归于html标签,而@import是CSS中供应的
在页面加载的时分, 会一起被加载,而@import引证的CSS会在页面加载完结后才会加载引证的CSS
@import只需在ie5以上才干够被辨认,而 是html标签,不存在阅览器兼容性问题
引进款式的权重大于@import的引证(@import是将引证的款式导入到当时的页面中)
35、简介盒子模型: CSS的盒子模型有两种:IE盒子模型、标准的W3C盒子模型模型
盒模型:内容、内边距、外边距(一般不计入盒子实践宽度)、边框
36、为什么要初始化款式? 由于阅览器兼容的问题,不同的阅览器对标签的默许款式值不同,若不初始化会构成不同阅览器之间的显现差异
可是初始化CSS会对查找引擎优化构成小影响
37、BFC是什么? BFC(块级格局化上下文),一个创立了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在笔直方向发作margin堆叠的问题
BFC是指阅览器中创立了一个独立的烘托区域,该区域内一切元素的布局不会影响到区域外元素的布局,这个烘托区域只对块级元素起作用
38、html语义化是什么? 当页面款式加载失利的时分能够让页面呈现出明晰的结构
有利于查找引擎优化优化,利于被查找引擎录入(更便于查找引擎的爬虫程序来辨认)
便于项目的开发及保护,使html代码更具有可读性,便于其他设备解析。
39、Doctype的作用?严厉办法与稠浊办法的差异? 用于奉告阅览器该以何种办法来烘托文档
严厉办法下:页面排版及JS解析是以该阅览器支撑的最高标准来履行
稠浊办法:不严厉依照标准履行,首要用来兼容旧的阅览器,向后兼容
40、IE的双方距BUG:块级元素float后设置横向margin,ie6显现的margin比设置的较大。处理:参加_display:inline 41、HTML与XHTML——二者有什么差异? 1. 一切的符号都有必要要有一个相应的完毕符号
2. 一切标签的元素和特色的姓名都有必要运用小写
3. 一切的 符号都有必要合理嵌套
4. 一切的特色有必要用引号 "" 括起来
5. 把一切 < 和 & 特别符号用编码表明
6. 给一切特色赋一个值
7. 不要在注释内容中运用 "--"
8. 图片有必要有阐明文字
42、html常见兼容性问题? 1.双方距BUG float引起的 运用display
2.3像素问题 运用float引起的 运用dislpay:inline -3px
3.超链接hover 点击后失效 运用正确的书写次序 visited hover active
4.Ie z-index问题 给父级增加position:relative
5.Png 通明 运用js代码 改
6.Min-height 最小高度 !Important 处理’
7.select 在ie6下隐瞒 运用 嵌套
8.为什么没有办法界说1px左右的宽度容器(IE6默许的行高构成的,运用over:hidden,zoom:0.08 line-height:1px)
9.IE5-8不支撑opacity,处理办法:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6不支撑PNG通明布景,处理办法: IE6下运用gif图片
43、对WEB标准以及W3C的了解与知道 答:标签闭合、标签小写、不乱嵌套、进步查找机器人查找几率、运用外 链css和js脚本、结构行为体现的别离、文件下载与页面速度更快、内容能被更多的用户所拜访、内容能被更广泛的设备所拜访、更少的代码和组件,简略维 护、改版便利,不需求变化页面内容、供应打印版别而不需求仿制内容、进步网站易用性。
44、行内元素有哪些?块级元素有哪些?CSS的盒模型? 答:块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
45、BETWAY登录页面有哪三层构成,别离是什么?作用是什么? 答:结构层 Html 表明层 CSS 行为层 js。
46、Doctype作用? 严厉办法与稠浊办法-怎样触发这两种办法,差异它们有何意义? (1)、 声明坐落文档中的最前面,处于标签之前。奉告阅览器的解析器,用什么文档类型 标准来解析这个文档。
(2)、严厉办法的排版和 JS 运作办法是 以该阅览器支撑的最高标准运转。
(3)、在稠浊办法中,页面以宽松的向后兼容的办法显现。模仿旧式阅览器的行为以防止站点无法作业。
(4)、DOCTYPE不存在或格局不正确会导致文档以稠浊办法呈现。
47、行内元素有哪些?块级元素有哪些? 空(void)元素有那些? (1)CSS标准规矩,每个元素都有display特色,确认该元素的类型,每个元素都有默许的display值,比方div默许display特色值为“block”,成为“块级”元素;span默许display特色值为“inline”,是“行内”元素。
(2)行内元素有:a b span img input select strong(着重的口气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)闻名的空元素:
48、CSS的盒子模型? (1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、鸿沟(margin)、 边框(border).
49、CSS 挑选符有哪些?哪些特色能够承继?优先级算法怎样核算? CSS3新增伪类有那些? * 1.id挑选器( # myid)
2.类挑选器(.myclassname)
3.标签挑选器(div, h1, p)
4.相邻挑选器(h1 + p)
5.子挑选器(ul < li)
6.子孙挑选器(li a)
7.通配符挑选器( * )
8.特色挑选器(a[rel = "external"])
9.伪类挑选器(a: hover, li: nth - child)
* 可承继: font-size font-family color, UL LI DL DD DT;
* 不行承继 :border padding margin width height ;
* 优先级就近准则,款式界说最近者为准;
* 载入款式以终究载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例:
p:first-of-type 挑选归于其父元素的首个
元素的每个
元素。
p:last-of-type 挑选归于其父元素的终究
元素的每个
元素。
p:only-of-type 挑选归于其父元素仅有的
元素的每个
元素。
p:only-child 挑选归于其父元素的仅有子元素的每个
元素。
p:nth-child(2) 挑选归于其父元素的第二个子元素的每个
元素。
:enabled、:disabled 操控表单控件的禁用状况。
:checked,单选框或复选框被选中。
50、怎样居中div,怎样居中一个起浮元素? 给div设置一个宽度,然后增加margin:0 auto特色
div{
width:200px;
margin:0 auto;
}
居中一个起浮元素
确认容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度能够不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//便利看作用
left:50%;
top:50%;
}
51、阅览器的内核别离是什么?常常遇到的阅览器的兼容性有哪些?原因,处理办法是什么,常用hack的技巧 ? * IE阅览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto;
* png24为的图片在iE6阅览器上呈现布景,处理计划是做成PNG8.
* 阅览器默许的margin和padding不同。处理计划是加一个大局的*{margin:0;padding:0;}来共同。
* IE6双方距bug:块特色标签float后,又有横行的margin状况下,在ie6显现margin比设置的大。
起浮ie发作的双倍间隔 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种状况之下IE会发作20px的间隔,处理计划是在float的标签款式操控中参加 ——_display:inline;将其转化为行内特色。(_这个符号只需ie6会辨认)
渐进辨认的办法,从全体中逐步扫除部分。
首要,奇妙的运用“\9”这一符号,将IE游览器从一切状况中别离出来。
接着,再次运用“+”将IE8和IE7、IE6别脱离来,这样IE8现已独立辨认。
css
.bb{
background-color:#f1ee18;/*一切辨认*/
.background-color:#00deff\9; /*IE6、7、8辨认*/
+background-color:#a200ff;/*IE6、7辨认*/
_background-color:#1e0bd1;/*IE6辨认*/
}
* IE下,能够运用获取惯例特色的办法来获取自界说特色,
也能够运用getAttribute()获取自界说特色;
Firefox下,只能运用getAttribute()获取自界说特色.
处理办法:共同经过getAttribute()获取自界说特色.
* IE下,even方针有x,y特色,可是没有pageX,pageY特色;
Firefox下,event方针有pageX,pageY特色,可是没有x,y特色.
* (条件注释)缺陷是在IE阅览器下或许会增加额定的HTTP恳求数。
* Chrome 中文界面下默许会将小于 12px 的文本强制依照 12px 显现, 可经过参加 CSS 特色 -webkit-text-size-adjust: none; 处理.
超链接拜访往后hover款式就不呈现了 被点击拜访过的超链接款式不在具有hover和active了处理办法是改动CSS特色的摆放次序:
L-V-H-A : a: {} a:visited {} a:hover {} a:active {}
52、列出display的值,阐明他们的作用。position的值, relative和absolute定位原点是? 1. block 象块类型元素相同显现。
none 缺省值。向行内元素类型相同显现。
inline-block 象行内元素相同显现,但其内容象块类型元素相同显现。
list-item 象块类型元素相同显现,并增加款式列表符号。
2. position的值
*absolute
生成必定定位的元素,相关于 static 定位以外的第一个父元素进行定位。
*fixed (老IE不支撑)
生成必定定位的元素,相关于阅览器窗口进行定位。
* relative
生成相对定位的元素,相关于其正常方位进行定位。
* static 默许值。没有定位,元素呈现在正常的流中
*(疏忽 top, bottom, left, right z-index 声明)。
* inherit 规矩从父元素承继 position 特色的值。
53、absolute的containing block核算办法跟正常流有什么不同? 54、position跟display、margin collapse、overflow、float这些特性互相叠加后会怎样样? 55、对WEB标准以及W3C的了解与知道 标签闭合、标签小写、不乱嵌套、进步查找机器人查找几率、运用外 链css和js脚本、结构行为体现的别离、文件下载与页面速度更快、内容能被更多的用户所拜访、内容能被更广泛的设备所拜访、更少的代码和组件,简略维 护、改版便利,不需求变化页面内容、供应打印版别而不需求仿制内容、进步网站易用性;
56、css的根本句子构成是? 挑选器{特色1:值1;特色2:值2;……}
57、阅览器标准办法和奇怪办法之间的差异是什么? 盒子模型 烘托办法的不同
运用 window.top.document.compatMode 可显现为什么办法
58、CSS中能够经过哪些特色界说,使得一个DOM元素不显现在阅览器可视规模内?
最根本的:
设置display特色为none,或许设置visibility特色为hidden
技巧性:
设置宽高为0,设置通明度为0,设置z-index方位在-1000
59、超链接拜访往后hover款式就不呈现的问题是什么?怎样处理?
答案:被点击拜访过的超链接款式不在具有hover和active了,处理办法是改动CSS特色的摆放次序: L-V-H-A( ,visited,hover,active)
60、什么是Css Hack?ie6,7,8的hack别离是什么?
答案:针对不同的阅览器写不同的CSS code的进程,便是CSS hack。
示例如下:
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
62、请用Css写一个简略的幻灯片作用页面
答案:知道是要用css3。运用animation动画完结一个简略的幻灯片作用。
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-key s "loops" {
0% { background:url(https://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(https://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(https://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(https://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(https://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
}
63、行内元素和块级元素的具体差异是什么?行内元素的padding和margin可设置吗?
块级元素(block)特性:
· 总是独占一行,体现为另起一行开端,而且这以后的元素也有必要另起一行显现;
· 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可操控;
内联元素(inline)特性:
· 和相邻的内联元素在同一行;
· 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不行改动(也便是padding和margin的left和right是能够设置的),便是里边文字或图片的巨细。
那么问题来了,阅览器还有默许的天然生成inline-block元素(具有内在尺度,可设置高宽,但不会自动换行),有哪些?
64、什么是外边距堆叠?堆叠的成果是什么?
答案:
外边距堆叠便是margin-collapse。
在CSS傍边,相邻的两个盒子(或许是兄弟联系也或许是先人联系)的外边距能够结组成一个独自的外边距。这种兼并外边距的办法被称为折叠,而且因而所结组成的外边距称为折叠外边距。
折叠成果遵从下列核算规矩:
1. 两个相邻的外边距都是正数时,折叠成果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时,折叠成果是两者必定值的较大值。
3. 两个外边距一正一负时,折叠成果是两者的相加的和。
65、rgba()和opacity的通明作用有什么不同?
rgba()和opacity都能完结通明作用,但最大的不同是opacity作用于元素,以及元素内的一切内容的通明度,
而rgba()只作用于元素的色彩或其布景色。(设置rgba通明的元素的子元素不会承继通明作用!)
66、css中能够让文字在笔直和水平方向上堆叠的两个特色是什么?
笔直方向:line-height
水平方向:letter-spacing
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:能够用于消除inline-block元素间的换行符空格空隙问题。
67、怎样笔直居中一个起浮元素? // 办法一:已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需求相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
//办法二:不知道元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需求相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
那么问题来了,怎样笔直居中一个?(用更简洁的办法。)
#container //的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
68、描绘一个"reset"的CSS文件并怎样运用它。知道normalize.css吗?你了解他们的不同之处?
重置款式十分多,但凡一个BETWAY登录开发人员必定有一个常用的重置CSS文件并知道怎样运用它们。他们是盲目的在做仍是知道为什么这么做呢?原因是不同的阅览器对一些元素有不同的默许款式,假如你不处理,在不同的阅览器下会存在必要的危险,或许更有戏剧性的性发作。
你或许会用Normalize来替代你的重置款式文件。它没有重置一切的款式风格,但仅供应了一套合理的默许款式值。既能让很多阅览器到达共同和合理,但又不打乱其他的东西(如粗体的标题)。
在这一方面,无法做每一个复位重置。它也的确有些超越一个重置,它处理了你永久都不必考虑的古怪,像HTML的audio元素不共同或line-height不共同。
69、说display特色有哪些?能够做什么? display:block行内元素转化为块级元素
display:inline块级元素转化为行内元素
display:inline-block转为内联元素
70、哪些css特色能够承继? 可承继: font-size font-family color, ul li dl dd dt;
不行承继 :border padding margin width height ;
71、css优先级算法怎样核算? !important > id > class > 标签
!important 比 内联优先级高
*优先级就近准则,款式界说最近者为准;
*以终究载入的款式为准;
72、b标签和strong标签,i标签和em标签的差异? 后者有语义,前者则无。
73、有那些行内元素、有哪些块级元素、盒模型? 1.内联元素(inline element)
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不引荐)
big – 大字体
br – 换行
em – 着重
font – 字体设定(不引荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不引荐)
select – 项目挑选
small – 小字体文本
span – 常用内联容器,界说文本内区块
strike – 中划线
strong – 粗体着重
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 界说变量
2、块级元素
address – 地址
blockquote – 块引证
center – 举中对齐块
dir – 目录列表
div – 常用块级简略,也是css layout的首要标签
dl – 界说列表
fieldset – form操控组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
no s – s可选内容,(关于不支撑 的阅览器显现此区块内容)
no – )可选脚本内容(关于不支撑 的阅览器显现此内容)
ol – 排序表单
p – 阶段
pre – 格局化文本
table – 表格
ul – 非排序列表
3.CSS盒子模型包含四个部分组成:
内容、填充(padding)、边框(border)、外鸿沟(margin)。
74、有哪些挑选符,优先级的核算公式是什么?行内款式和!important哪个优先级高? #ID > .class > 标签挑选符 !important优先级高
75.我想让行内元素跟上面的元素间隔10px,加margin-top和padding-top能够吗? margin-top,padding-top无效
76.CSS的盒模型由什么组成? 内容,border ,margin,padding
77、.说说display特色有哪些?能够做什么? display:block行内元素转化为块级元素
display:inline块级元素转化为行内元素
display:inline-block转为内联元素
78、哪些css特色能够承继? 可承继: font-size font-family color, ul li dl dd dt;
不行承继 :border padding margin width height ;
79、css优先级算法怎样核算? !important > id > class > 标签
!important 比 内联优先级高
* 优先级就近准则,款式界说最近者为准;
* 以终究载入的款式为准;
80、text-align:center和line-height有什么差异? text-align是水平对齐,line-height是行间。
81、BETWAY登录页面由哪三层构成,别离是什么?作用是什么? 结构层 Html 表明层 CSS 行为层 js
82、写一个表格以及对应的CSS,使表格奇数行为白色布景,偶数行为灰色,鼠标一上去为黄色布景。 二、JS根底 1、 的typeof回来哪些数据类型 number function boolean underfind
2、例举3种强制类型转化和2种隐式类型转化? 强制(parseInt【颇似艾特】,parseFloat,number)
隐式(== – ===)
3、split【斯普雷特】() join() 的差异 前者是切割成数组的办法,后者是将数组转化成字符串
4、数组办法pop() push() unshift() shift() Push()尾部增加 pop()尾部删去
Unshift()头部增加 shift()头部删去
5、作业绑定和一般作业有什么差异 作业绑定是指把作业注册到具体的元素之上,一般作业指的是能够用来注册的作业
6、IE和DOM作业流的差异 1.履行次序不相同、
2.参数不相同
3.作业加不加on
4.this指向问题
7、IE和标准下有哪些兼容性的写法 Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8、call和apply的差异 .call(this,obj1,obj2,obj3)
.apply(this,arguments)
9、b承继a的办法 10、 this指针、闭包、作用域 11、作业托付是什么 让运用作业冒泡的原理,让自己的所触发的作业,让他的父元素替代履行!
12、闭包是什么,有什么特性,对页面有什么影响 闭包便是能够读取其他函数内部变量的函数。
13、怎样阻挠作业冒泡和默许作业 canceBubble return false
14、增加 删去 替换 刺进到某个接点的办法 obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
七、JS高档 1、 JQuery一个方针能够一起绑定多个作业,这是怎样完结的? jQuery能够给一个方针一起绑定多个作业,低层完结办法是运用addEventListner或attachEvent兼容不同的阅览器完结作业的绑定,这样能够给同一个方针注册多个作业。
2、 知道什么是webkit么? 知道怎样用阅览器的各种东西来调试和debug代码么? Webkit是阅览器引擎,包含html烘托和js解析功用,手机阅览器的干流内核,与之相对应的引擎有Gecko(Mozilla Firefox 等运用)和Trident(也称MSHTML,IE 运用)。
关于阅览器的调试东西要娴熟运用,首要是页面结构剖析,后台恳求信息检查,js调试东西运用,娴熟运用这些东西能够快速进步处理问题的功率
3、 怎样测验BETWAY登录代码? 知道BDD, TDD, Unit Test么? 知道怎样测验你的BETWAY登录工程么(mocha, sinon, jasmin, qUnit..)? 了解BDD行为驱动开发与TDD测验驱动开发现已单元测验相关概念,
4、 BETWAY登录templating(Mustache, underscore, handlebars)是干嘛的, 怎样用?
Web 模板引擎是为了运用户界面与事务数据(内容)别离而发作的,
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于能够运用在 、PHP、Python、Perl 等多种编程言语中。
Underscore封装了常用的 方针操作办法,用于进步开发功率。
Handlebars 是 一个语义模板库,经过对view和data的别离来快速构建Web模板。
5、 简述一下 Handlebars 的根本用法? 没有用过的话说出它是干什么的即可
6、 简述一下 Handlerbars 的对模板的根本处理流程, 怎样编译的?怎样缓存的? 学习技术不只需会用,还有了解它的完结机制,这样在开发中遇到问题时才干更好的处理
7、 用js完结千位分隔符? 原生js的娴熟度,实践经历,完结思路
8、 检测阅览器版别版别有哪些办法? IE与标准阅览器判别,IE不同版别的判别,userAgent var ie = /*@cc_on !@*/false;
9、 咱们给一个dom一起绑定两个点击作业,一个用捕获,一个用冒泡,你来说下会履行几回作业,然后会先履行冒泡仍是捕获 对两种作业模型的了解
10、完结一个函数clone,能够对 中的5种首要的数据类型(包含Number、String、 、Array、Boolean)进行值仿制 · 调查点1:关于根本数据类型和引证数据类型在内存中寄存的是值仍是指针这一差异是否清楚
· 调查点2:是否知道怎样判别一个变量是什么类型的
· 调查点3:递归算法的规划
// 办法一:
.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === " " ? this[e].clone() : this[e];
}
return o;
}
//办法二:
/**
* 克隆一个方针
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = [];//创立一个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof ){
buf = {};//创立一个空方针
for (var k in Obj) { //为这个方针增加新的特色
buf[k] = clone(Obj[k]);
}
return buf;
}else{ //一般变量直接赋值
return Obj;
}
} 11、怎样消除一个数组里边重复的元素?
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
var newArr=[];
var obj={};
var index=0;
var l=arr.length;
for(var i=0;i<l;i++){
if(obj[arr[i]]==undefined)
{
obj[arr[i]]=1;
newArr[index++]=arr[i];
}
else if(obj[arr[i]]==1)
continue;
}
return newArr;
}
var newArr2=deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25 12、小贤是一条心爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时分就会乖乖叫一声(yelp)。从这段描绘能够得到以下方针:
function Dog() {
this.wow = function() {
alert(’Wow’);
}
this.yelp = function() {
this.wow();
}
} 小芒和小贤相同,本来也是一条心爱的小狗,可是忽然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不断叫唤(yelp)。请依据描绘,按示例的办法用代码来实。(承继,原型,setInterval)
function MadDog() {
this.yelp = function() {
var self = this;
setInterval(function() {
self.wow();
}, 500);
}
}
MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
13、下面这个ul,怎样点击每一列的时分alert其index?(闭包)
-
这是第一条
-
这是第二条
-
这是第三条
// 办法一:
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i]. =function(){
alert(this.index);
};
}
//办法二:
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++){
lis[i].index=i;
lis[i]. =(function(a){
return function() {
alert(a);
}
})(i);
} 14、编写一个 函数,输入指定类型的挑选器(仅需支撑id,class,tagName三种简略CSS挑选器,无需兼容组合挑选器)能够回来匹配的DOM节点,需考虑阅览器兼容性和功用。 /*** @param selector {String} 传入的CSS挑选器。* @return {Array}*/
var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result = [];
//假如是id挑选器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
}else {
result.push(document.getElementById(regResult[3]));
}
}
}
//假如是class挑选器
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === 'function') {
var doms = document.getElementsByClassName(regResult[3]);
if(doms) {
result = converToArray(doms);
}
}
//假如不支撑getElementsByClassName函数
else {
var allDoms = document.getElementsByTagName("*") ;
for(var i = 0, len = allDoms.length; i < len; i++) {
if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
result.push(allDoms[i]);
}
}
}
}
}
//假如是标签挑选器
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {
result = converToArray(doms);
}
}
return result;
}
function converToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);//针对非IE阅览器
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes.length; i < len ; i++ ) {
array.push(nodes[i])
}
}
return array;
} 15、请点评以下代码并给出改善定见。 if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
});
}
} · 不该该在if和else句子中声明addListener函数,应该先声明;
· 不需求运用window.addEventListener或document.all来进行检测阅览器,应该运用才干检测;
· 由于attachEvent在IE中有this指向问题,所以调用它时需求处理一下
改善如下:
function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
}else if(elem.attachEvent){
elem['temp' + type + handler] = handler;
elem[type + handler] = function(){
elem['temp' + type + handler].apply(elem);
};
elem.attachEvent('on' + type, elem[type + handler]);
}else{
elem['on' + type] = handler;
}
} 16、给String方针增加一个办法,传入一个string类型的参数,然后将string的每个字符间价格空格回来,例如: addSpace(“hello world”) // -> ‘h e l l o w o r l d’
String.prototype.spacify = function(){
return this.split('').join(' ');
}; 接着上述问题答案发问,1)直接在方针的原型上增加办法是否安全?尤其是在 方针上。(这个我没能答出?希望知道的说一下。) 2)函数声明与函数表达式的差异?
答案:在js中,解析器在向履行环境中加载数据时,对函数声明和函数表达式并非是天公地道的,解析器会首先读取函数声明,并使其在履行任何代码之前可用(能够拜访),至于函数表达式,则有必要比及解析器履行到它地点的代码行,才会实在被解析履行。
17、界说一个log办法,让它能够署理console.log的办法。 可行的办法一:
function log(msg) {
console.log(msg);
}
log("hello world!") // hello world! 假如要传入多个参数呢?明显上面的办法不能满足要求,所以更好的办法是:
function log(){
console.log.apply(console, arguments);
}; 到此,诘问apply和call办法的异同。
关于apply和call两者在作用上是相同的,便是调用一个方针的一个办法,以另一个方针替换当时方针。将一个函数的方针上下文从初始的上下文改动为由 thisObj 指定的新方针。
但两者在参数上有差异的。关于第一个参数意义都相同,但对第二个参数: apply传入的是一个参数数组,也便是将多个参数组组成为一个数组传入,而call则作为call的参数传入(从第二个参数开端)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。
18、在 中什么是伪数组?怎样将伪数组转化为标准数组? 伪数组(类数组):无法直接调用数组办法或希望length特色有什么特别的行为,但仍能够对实在数组遍历办法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都回来NodeList方针都归于伪数组。能够运用Array.prototype.slice.call(fakeArray)将数组转化为实在的Array方针。
假定接第八题题干,咱们要给每个log办法增加一个”(app)”前缀,比方’hello world!’ ->’(app)hello world!’。办法如下:
function log(){
var args = Array.prototype.slice.call(arguments); //为了运用unshift数组办法,将argument转化为实在的数组
args.unshift('(app)');
console.log.apply(console, args);
}; 19、对作用域上下文和this的了解,看下列代码: var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what? 问两处console输出什么?为什么?
答案是1和undefined。
func是在winodw的上下文中被履行的,所以会拜访不到count特色。
持续诘问,那么怎样保证Uesr总是能拜访到func的上下文,即正确回来1。正确的办法是运用Function.prototype.bind。兼容各个阅览器完好代码如下:
Function.prototype.bind = Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}
var func = User.getCount.bind(User);
console.log(func()); 20、原生JS的window. 与Jquery的$(document).ready(function(){})有什么不同?怎样用原生JS完结Jq的ready办法? window. ()办法是有必要比及页面内包含图片的一切元素加载完毕后才干履行。
$(document).ready()是DOM结构制作完毕后就履行,不必比及加载完毕。
/*
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备安排妥当时,函数作为document的办法调用
*/
var whenReady = (function() { //这个函数回来whenReady()函数
var funcs = []; //当获得作业时,要运转的函数
var ready = false; //当触发作业处理程序时,切换为true
//当文档安排妥当时,调用作业处理程序
function handler(e) {
if(ready) return; //保证作业处理程序只完好运转一次
//假如发作 作业,但其状况不是complete的话,那么文档没有准备好
if(e.type === ' ' && document.readyState !== 'complete') {
return;
}
//运转一切注册函数
//留意每次都要核算funcs.length
//以防这些函数的调用或许会导致注册更多的函数
for(var i=0; i<funcs.length; i++) {
funcs[i].call(document);
}
//作业处理函数完好履行,切换ready状况, 并移除一切函数
ready = true;
funcs = null;
}
//为接纳到的任何作业注册处理程序
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false); //IE9+
window.addEventListener('load', handler, false);
}else if(document.attachEvent) {
document.attachEvent(' ', handler);
window.attachEvent(' ', handler);
}
//回来whenReady()函数
return function whenReady(fn) {
if(ready) { fn.call(document); }
else { funcs.push(fn); }
}
})(); 假如上述代码十分难明,下面这个简化版:
function ready(fn){
if(document.addEventListener) {//标准阅览器
document.addEventListener('DOMContentLoaded', function() {
//刊出作业, 防止重复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();//履行函数
}, false);
}else if(document.attachEvent) {//IE
document.attachEvent(' ', function() {
if(document.readyState == 'complete') {
document.detachEvent(' ', arguments.callee);
fn();//函数履行
}
});
}
}; 21、(规划题)想完结一个对页面某个节点的拖曳?怎样做?(运用原生JS) 回答出概念即可,下面是几个要害
1. 给需求拖拽的节点绑定mousedown, mousemove, mouseup作业
2. mousedown作业触发后,开端拖拽
3. mousemove时,需求经过event.clientX和clientY获取拖拽方位,并实时更新方位
4. mouseup时,拖拽完毕
5. 需求留意阅览器鸿沟的状况
22、请完结如下功用
function setcookie(name,value,days){ //给cookie增加一个时刻变量
var exp = new Date();
exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时刻为days天
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
var result = "";
var myCookie = ""+document.cookie+";";
var searchName = "+name+"=";
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if(satrtOfCookie != -1){
startOfcookie += searchName.length;
endOfCookie = myCookie.indexOf(";",startOfCookie);
result = (myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
(function(){
var oTips = document.getElementById('tips');//假定tips的id为tips
var page = {
check: function(){//检查tips的cookie是否存在而且答应显现
var tips = getCookie('tips');
if(!tips || tips == 'show') return true;//tips的cookie不存在
if(tips == "never_show_again") return false;
},
hideTip: function(bNever){
if(bNever) setcookie('tips', 'never_show_again', 365);
oTips.style.display = "none";//躲藏
},
showTip: function(){
oTips.style.display = "inline";//显现,假定tips为行级元素
},
init: function(){
var _this = this;
if(this.check()){
_this.showTip();
setcookie('tips', 'show', 1);
}
oTips. = function(){
_this.hideTip(true);
};
}
};
page.init();
})();
23、说出以下函数的作用是?空白区域应该填写什么? //define
(function(window){
function fn(str){
this.str=str;
}
fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
});
}
window.fn = fn;
})(window);
//use
(function(){
var t = new fn('
{1}{2}
');
console.log(t.format('https://www.alibaba.com','Alibaba','Welcome'));
})(); 答案:访函数的作用是运用format函数将函数的参数替换掉{0}这样的内容,回来一个格局化后的成果:
第一个空是:arguments
第二个空是:/\{(\d+)\}/ig
24、 作用链域? 了解变量和函数的拜访规模和生命周期,大局作用域与部分作用域的差异, 中没有块作用域,函数的嵌套构成不同层次的作用域,嵌套的层次构成链式办法,经过作用域链查找特色的规矩需求深化了解。
25、 谈谈This方针的了解。 了解不同办法的函数调用办法下的this指向,了解作业函数、守时函数中的this指向,函数的调用办法决议了this的指向。
26、 eval是做什么的? 它的功用是把对应的字符串解析成JS代码并运转;应该防止运用eval,不安全,十分耗功用(2个过程,一次解析成js句子,一次履行)
27、 关于作业,IE与火狐的作业机制有什么差异? 怎样阻挠冒泡? [1].在IE中,作业方针是作为一个大局变量来保存和保护的.一切的阅览器作业,不管是用户触发的,仍是其他作业,都会更新window.event方针.所以在代码中,只需调用window.event就能够获取作业方针, 再event.srcElement就能够获得触发作业的元素进行进一步处理.
[2].在FireFox中,作业方针却不是大局方针,一般状况下,是现场发作,现场运用,FireFox把作业方针自动传给作业处理程序.
关于作业的兼容性处理要娴熟掌握,作业方针具体哪些特色存在兼容性问题,IE与标准作业模型作业冒泡与作业捕获的支撑要了解
28、 什么是闭包(closure),为什么要用它? 简略的了解是函数的嵌套构成闭包,闭包包含函数自身现已它的外部作用域
运用闭包能够构成独立的空间,延伸变量的生命周期,报存中心状况值
29、 代码中的"use strict";是什么意思 ? 运用它差异是什么? 意思是运用严厉办法,运用严厉办法,一些不标准的语法将不再支撑
30、怎样判别一个方针是否归于某个类? Instanceof constructor
31、new操作符具体干了什么呢? 1、创立一个空方针,而且 this 变量引证该方针,一起还承继了该函数的原型。
2、特色和办法被参加到 this 引证的方针中。
3、新创立的方针由 this 所引证,而且终究隐式的回来 this 。
32、用原生 的完结过什么功用吗? 首要调查原生js的实践经历
33、 中,有一个函数,履行时方针查找时,永久不会去查找原型,这个函数是? HasOwnProperty
34、对JSON的了解? 轻量级数据交互格局,能够构成凌乱的嵌套格局,解析十分便利
35、js推迟加载的办法有哪些? 计划一:< >标签的async="async"特色(具体拜见: 标签的async特色)
计划二:< >标签的defer="defer"特色
计划三:动态创立< >标签
计划四:AJAX eval(运用AJAX得到脚本内容,然后经过eval_r( http.responseText)来运转脚本)
计划五: 办法
36、模块化开发怎样做? 了解模块化开发办法:阅览器端requirejs,seajs;服务器端nodejs;ES6模块化;fis、webpack等BETWAY登录全体模块化处理计划;grunt、gulp等BETWAY登录作业流的运用
37、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)标准差异? 了解这两种标准的差异,首要经过requirejs与seajs的比照,了解模块的界说与引证办法的差异以及这两种标准的规划准则
38、requireJS的中心原理是什么?(怎样动态加载的?怎样防止屡次加载的?怎样 缓存的?) 中心是js的加载模块,经过正则匹配模块以及模块的依靠联系,保证文件加载的先后次序,依据文件的途径对加载过的文件做了缓存
39、让你自己规划完结一个requireJS,你会怎样做? 中心是完结js的加载模块,保护js的依靠联系,操控好文件加载的先后次序
40、谈一谈你对ECMA 6的了解? ES6新的语法糖,类,模块化等新特性
41、ECMA 6 怎样写class么,为什么会呈现class这种东西? class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
42、异步加载的办法有哪些? 计划一:< >标签的async="async"特色(具体拜见: 标签的async特色)
计划二:< >标签的defer="defer"特色
计划三:动态创立< >标签
计划四:AJAX eval(运用AJAX得到脚本内容,然后经过eval_r( http.responseText)来运转脚本)
计划五: 办法
43、documen.write和 innerHTML的差异? document.write是重写整个document, 写入内容是字符串的html
innerHTML是HTMLElement的特色,是一个元素的内部html内容
44、DOM操作——怎样增加、移除、移动、仿制、创立和查找节点? (1)创立新节点
createDocumentFragment() //创立一个DOM片段
createElement_x() //创立一个具体的元素
createTextNode() //创立一个文本节点
(2)增加、移除、替换、刺进
appendChild()
removeChild()
replaceChild()
insertBefore()
(3)查找
getElementsByTagName() //经过标签称号
getElementsByName() //经过元素的Name特色的值
getElementById() //经过元素Id,仅有性
45、call() 和 .apply() 的意义和差异? apply的参数是数组办法,call的参数是单个的值,除此之外在运用上没有不同,要害了解这两个函数调用的this改动
46、数组和方针有哪些原生办法,罗列一下? Array.concat( ) 衔接数组
Array.join( ) 将数组元素衔接起来以构建一个字符串
Array.length 数组的巨细
Array.pop( ) 删去并回来数组的终究一个元素
Array.push( ) 给数组增加元素
Array.reverse( ) 倒置数组中元素的次序
Array.shift( ) 将元素移出数组
Array.slice( ) 回来数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 刺进、删去或替换数组的元素
Array.toLocaleString( ) 把数组转化成部分字符串
Array.toString( ) 将数组转化成一个字符串
Array.unshift( ) 在数组头部刺进一个元素
.hasOwnProperty( ) 检查特色是否被承继
.isPrototypeOf( ) 一个方针是否是另一个方针的原型
.propertyIsEnumerable( ) 是否能够经过for/in循环看到特色
.toLocaleString( ) 回来方针的本地字符串表明
.toString( ) 界说一个方针的字符串表明
.valueOf( ) 指定方针的原始值
47、JS 怎样完结一个类。怎样实例化这个类 严厉来讲js中并没有类的概念,不过js中的函数能够作为结构函数来运用,经过new来实例化,其实函数自身也是一个方针。
48、 中的作用域与变量声明进步? 了解 的预解析机制,js的运转首要分两个阶段:js的预解析和运转,预解析阶段一切的变量声明和函数界说都会提早,可是变量的赋值不会提早
49、怎样编写高功用的 ? 运用 DocumentFragment 优化屡次 append
经过模板元素 clone ,替代 createElement
运用一次 innerHTML 赋值替代构建 dom 元素
运用 firstChild 和 nextSibling 替代 childNodes 遍历 dom 元素
运用 Array 做为 StringBuffer ,替代字符串拼接的操作
将循环操控量保存到部分变量
次序无关的遍历时,用 while 替代 for
将条件分支,按或许性次序从高到低摆放
在同一条件子的多( >2 )条件分支时,运用 switch 优于 if
运用三目运算符替代条件分支
需求不断履行的时分,优先考虑运用 setInterval
50、那些操作会构成内存走漏? 闭包,循环
51、 方针的几种创立办法? 1. 工厂办法
2. 结构函数办法
3. 原型办法
4. 混合结构函数和原型办法
5. 动态原型办法
6. 寄生结构函数办法
7. 保险结构函数办法
52、 承继的 6 种办法? 1. 原型链承继
2. 借用结构函数承继
3. 组合承继(原型+借用结构)
4. 原型式承继
5. 寄生式承继
6. 寄生组合式承继
53、eval是做什么的? 1. 它的功用是把对应的字符串解析成JS代码并运转
2. 应该防止运用eval,不安全,十分耗功用(2次,一次解析成js句子,一次履行)
54、 原型,原型链 ? 有什么特色? 1. 原型方针也是一般的方针,是方针一个自带隐式的 __proto__ 特色,原型也有或许有自己的原型,假如一个原型方针的原型不为 null 的话,咱们就称之为原型链
2. 原型链是由一些用来承继和同享特色的方针组成的(有限的)方针链
55、作业、IE与火狐的作业机制有什么差异? 怎样阻挠冒泡? 1. 咱们在网页中的某个操作(有的操作对应多个作业)。例如:当咱们点击一个按钮就会发作一个作业。是能够被 侦测到的行为
2. 作业处理机制:IE是作业冒泡、firefox一起支撑两种作业模型,也便是:捕获型作业和冒泡型作业
3. ev.stopPropagation();
留意旧ie的办法:ev.cancelBubble = true;
56、简述一下Sass、Less,且阐明差异? 他们是动态的款式言语,是CSS预处理器,CSS上的一种笼统层。他们是一种特别的语法/言语而编译成CSS。
变量符不相同,less是@,而Sass是$;
Sass支撑条件句子,能够运用if{}else{},for{}循环等等。而Less不支撑;
Sass是依据Ruby的,是在服务端处理的,而Less是需求引进less.js来处理Less代码输出Css到阅览器
57、关于 中apply()和call()办法的差异? 相同点:两个办法发作的作用是彻底相同的
不同点:办法传递的参数不同
.call(this,obj1,obj2,obj3)
.apply(this,arguments)
apply()接纳两个参数,一个是函数运转的作用域(this),另一个是参数数组。
call()办法第一个参数与apply()办法相同,但传递给函数的参数有必要罗列出来。
58、简述一下JS中的闭包? 闭包用的多的两个作用:读取函数内部的变量值;让这些变量值一直保存着(在内存中)。
一起需求留意的是:闭包慎用,不乱用,不乱用,由于函数内部的变量都被保存在内存中,会导致内存耗费大。
59、说说你对this的了解? 在 中,this一般指向的是咱们正在履行的函数自身,或许是,指向该函数所属的方针。
大局的this → 指向的是Window
函数中的this → 指向的是函数地点的方针
方针中的this → 指向其自身
60、别离论述split(),slice(),splice(),join()? join()用于把数组中的一切元素拼接起来放入一个字符串。所带的参数为切割字符串的分隔符,默许是以逗号分隔。归归于Array
split()即把字符串别脱离,以数组办法存储。归归于Stringstring
slice() 办法可从已有的数组中回来选定的元素。该办法并不会修正数组,而是回来一个子数组。假如想删去数组中的一段元素,应该运用办法 Array.splice()
splice() 办法向/从数组中增加/删去项目,然后回来被删去的项目。回来的是含有被删去的元素的数组。
61、作业托付是什么? 让运用作业冒泡的原理,让自己的所触发的作业,让他的父元素替代履行!
62、怎样阻挠作业冒泡和默许作业? 阻挠阅览器的默许行为
window.event?window.event.returnValue=false:e.preventDefault();
中止作业冒泡
window.event?window.event.cancelBubble=true:e.stopPropagation();
原生 中,return false;只阻挠默许行为,不阻挠冒泡,jQuery中的return false;既阻挠默许行为,又阻挠冒泡
63、增加 删去 替换 刺进到某个接点的办法? obj.appendChidl()
obj.removeChild()
obj.replaceChild()
obj.innersetBefore()
64、你用过require.js吗?它有什么特性? (1)完结js文件的异步加载,防止网页失掉呼应;
(2)办理模块之间的依靠性,便于代码的编写和保护。
65、谈一下JS中的递归函数,而且用递归简略完结阶乘? 递归便是程序在履行进程中不断调用自身的编程技巧,当然也有必要要有一个清晰的完毕条件,否则就会堕入死循环。
66、请用正则表达式写一个简略的邮箱验证。 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
67、简述一下你对web功用优化的计划? 1、尽量削减 HTTP 恳求
2、运用阅览器缓存
3、运用紧缩组件
4、图片、JS的预载入
5、将脚本放在底部
6、将款式文件放在页面顶部
7、运用外部的JS和CSS
8、精简代码
68、在JS中有哪些会被隐式转化为false Undefined、null、要害字false、NaN、零、空字符串
69、守时器setInterval有一个有名函数fn1,setInterval(fn1,500)与setInterval(fn1(),500)有什么差异? 第一个是重复履行每500毫秒履行一次,后边一个只履行一次。
70、外部JS文件呈现中文字符,会呈现什么问题,怎样处理? 会呈现乱码,加charset=”GB2312”;
71、谈谈阅览器的内核,而且说一下什么是内核? Trident (['traɪd(ə)nt])--IE,Gecko (['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和Safari
阅览器内核又能够分红两部分:烘托引擎和 JS 引擎。它担任获得网页的内容(HTML、 、图画等等)、收拾消息(例如参加 CSS 等),以及核算网页的显现办法,然后会输出至显现器或打印机。JS 引擎则是解析 言语,履行 言语来完结网页的动态作用。
72、 原型,原型链 ? 有什么特色? * 原型方针也是一般的方针,是方针一个自带隐式的 __proto__ 特色,原型也有或许有自己的原型,假如一个原型方针的原型不为null的话,咱们就称之为原型链。
* 原型链是由一些用来承继和同享特色的方针组成的(有限的)方针链。
* 的数据方针有那些特色值?
writable:这个特色的值是否能够改。
configurable:这个特色的装备是否能够删去,修正。
enumerable:这个特色是否能在for…in循环中遍历出来或在 .keys中罗列出来。
value:特色值。
* 当咱们需求一个特色的时, 引擎会先看当时方针中是否有这个特色, 假如没有的话,就会查找他的Prototype方针是否有这个特色。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等价于 .create(Person);
}
function (old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = (old );
73、写一个通用的作业侦听器函数 `// event(作业)东西集,来历:https://github.com/markyun
markyun.Event = {
// 页面加载完结后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var old = window. ;
if (typeof window. != 'function') {
window. = fn;
} else {
window. = function() {
old ();
fn();
};
}
},
// 视才干别离运用dom0||dom2||IE办法 来绑定作业
// 参数: 操作的元素,作业称号 ,作业处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//作业类型、需求履行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除作业
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻挠作业 (首要是作业冒泡,由于IE不支撑作业捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 撤销作业的默许行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取作业方针
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event方针的引证,取到作业的一切信息,保证随时能运用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
74、作业、IE与火狐的作业机制有什么差异? 怎样阻挠冒泡? 1. 咱们在网页中的某个操作(有的操作对应多个作业)。例如:当咱们点击一个按钮就会发作一个作业。是能够被 侦测到的行为。
2. 作业处理机制:IE是作业冒泡、火狐是 作业捕获;
3. ev.stopPropagation();
75、什么是闭包(closure),为什么要用? 履行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得 的废物收回机制GC不会收回say667()所占用的资源,由于say667()的内部函数的履行需求依靠say667()中的变量。这是对闭包作用的十分直白的描绘.
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//履行成果应该弹出的667
76、怎样判别一个方针是否归于某个类? 运用instanceof (待完善)
if(a instanceof Person){
alert('yes');
}
77、new操作符具体干了什么呢? 1、创立一个空方针,而且 this 变量引证该方针,一起还承继了该函数的原型。
2、特色和办法被参加到 this 引证的方针中。
3、新创立的方针由 this 所引证,而且终究隐式的回来 this 。
var obj = {};
obj.__proto__ = .prototype;
.call(obj);
78、JSON 的了解 JSON( Notation) 是一种轻量级的数据交流格局。它是依据 的一个子集。数据格局简略, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}
79、js推迟加载的办法有哪些 defer和async、动态创立DOM办法(用得最多)、按需异步载入js
80、模块化怎样做? 当即履行函数,不露出私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
81、异步加载的办法 (1) defer,只支撑IE
(2) async:
(3) 创立 ,刺进到DOM中,加载完毕后callBack
documen.write和 innerHTML的差异
document.write只能重绘整个页面
innerHTML能够重绘页面的一部分
82、奉告我答案是多少? (function(x){
delete x;
alert(x);
})(1+5);
函数参数无法delete删去,delete只能删去经过for in拜访的特色。
当然,删去失利也不会报错,所以代码运转会弹出“1”。
83、JS中的call()和apply()办法的差异? 比方顶用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运转成果为:alert(4);
留意:js 中的函数其实是方针,函数名是对 Function 方针的引证。
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);
84、Jquery与jQuery UI 有啥差异? *jQuery是一个js库,首要供应的功用是挑选器,特色修正和作业绑定等等。
*jQuery UI则是在jQuery的根底上,运用jQuery的扩展性,规划的插件。
供应了一些常用的界面元素,比方对话框、拖动行为、改动巨细行为等等
85、jquery 中怎样将数组转化为json字符串,然后再转化回来? jQuery中没有供应这个功用,所以你需求先编写两个jQuery的扩展:
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后调用:
$("").stringifyArray(array)
86、 中的作用域与变量声明进步? 其他部分
(HTTP、正则、优化、重构、呼应式、移动端、团队协作、SEO、UED、职业生涯)
*依据Class的挑选性的功用相关于Id挑选器开支很大,由于需遍历一切DOM元素。
*频频操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。
比方:var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 特色,在开端循环的时分设置一个变量来存储这个数字,能够让循环跑得更快:
for (var i = size, length = arr.length; i < length; i++) {}
87、BETWAY登录开发的优化问题(看yahoo14条功用优化准则)。 (1) 削减http恳求次数:CSS Sprites, JS、CSS源码紧缩、图片巨细操控适宜;网页Gzip,CDN保管,data缓存 ,图片服务器。
(2) BETWAY登录模板 JS+数据,削减由于HTML标签导致的带宽糟蹋,BETWAY登选用变量保存AJAX恳求成果,每次操作本地变量,不必恳求,削减恳求次数
(3) 用innerHTML替代DOM操作,削减DOM操作次数,优化 功用。
(4) 当需求设置的款式许多时设置className而不是直接操作style。
(5) 少用大局变量、缓存DOM节点查找的成果。削减IO读取操作。
(6) 防止运用CSS (css表达式)又称Dynamic properties(动态特色)。
(7) 图片预加载,将款式表放在顶部,将脚本放在底部 加上时刻戳。
(8) 防止在页面的主体布局中运用table,table要等其间的内容彻底下载之后才会显现出来,显现比div+css布局慢。
88、http状况码有那些?别离代表是什么意思? 100-199 用于指定客户端应相应的某些动作。
200-299 用于表明恳求成功。
300-399 用于现已移动的文件而且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的过错。
400 语义有误,当时恳求无法被服务器了解。
401 当时恳求需求用户验证
403 服务器已司了解恳求,可是拒绝履行它。
500-599 用于支撑服务器过错。
503 – 服务不行用
89、一个页面从输入 URL 到页面加载显现完结,这个进程中都发作了什么?(流程说的越具体越好) 要了解前后端的通讯流程,最好把动态网站的背面细节也介绍一遍
八、盛行结构 1、JQuery的源码看过吗?能不能简略概略一下它的完结原理? 调查学习常识的情绪,是否只是是停留在运用层面,要知其然知其所以然
2、jQuery.fn的init办法回来的this指的是什么方针?为什么要回来this? this履行init结构函数自身,其实便是jQuery实例方针,回来this是为了完结jQuery的链式操作
3、 jquery中怎样将数组转化为json字符串,然后再转化回来? $.parseJSON('{"name":"John"}');
4、 jQuery 的特色复制(extend)的完结原理是什么,怎样完结深复制? 递归赋值
5、 jquery.extend 与 jquery.fn.extend的差异? Jquery.extend用来扩展jQuery方针自身;jquery.fn.extend用来扩展jQuery实例
6、谈一下Jquery中的bind(),live(),delegate(),on()的差异? 7、JQuery一个方针能够一起绑定多个作业,这是怎样完结的? 能够一起绑定多个作业,低层完结原理是运用addEventListner与attachEvent兼容处理做作业注册
10、 Jquery与jQuery UI有啥差异? jQuery是操作dom的结构,jQueryUI是依据jQuery做的一个UI组件库
11、 jQuery和Zepto的差异?各自的运用场景? jQuery首要用于pc端,当然有对应的jQuerymobile用于移动端,zepto比jQuery愈加细巧,首要用于移动端
12、 针对 jQuery 的优化办法? 优先运用ID挑选器
在class前运用tag(标签名)
给挑选器一个上下文
慎用 .live()办法(应该说尽量不要运用)
运用data()办法存储暂时变量
13、 Zepto的点透问题怎样处理? 点透首要是由于两个div重合,例如:一个div调用show(),一个div调用hide();这个时分当点击上面的div的时分就会影响到下面的那个div;
处理办法首要有2种:
1.github上有一个叫做fastclick的库,它也能躲避移动设备上click作业的推迟呼应,https://github.com/ftlabs/fastclick
将它用 标签引进页面(该库支撑AMD,所以你也能够依照AMD标准,用比方require.js的模块加载器引进),而且在dom ready时初始化在body上,
2.依据剖析,假如不引进其它类库,也不想自己依照上述fastclcik的思路再开发一套东西,需求1.一个优先于下面的“divClickUnder”捕获的作业;2.而且经过这个作业阻挠掉默许行为(下面的“divClickUnder”对click作业的捕获,在ios的safari,click的捕获被以为和滚屏、点击输入框弹起键盘等相同,是一种阅览器默许行为,即能够被event.preventDefault()阻挠的行为)。
12、知道各种JS结构(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的长处和缺陷么? 常识面的宽度,盛行结构要多多了解
13、Underscore 对哪些 JS 原生方针进行了扩展以及供应了哪些好用的函数办法? Underscore的了解程度
14、运用过angular吗?angular中的过滤器是干什么用的 在表达式中转化数据
姓名为 {{ lastName | uppercase }}
currency,是什么过滤器——格局化数字为钱银格局,单位是$符。
九、移动APP开发 1、移动端最小触控区域是多大? 移动端的点击作业的有推迟,时刻是多久,为什么会有? 怎样处理这个延时?(click 有 300ms 推迟,为了完结safari的双击作业的规划,阅览器要知道你是不是要双击操作。)
十、NodeJs 1、对Node的长处和缺陷提出了自己的观点: *(长处)由于Node是依据作业驱动和无堵塞的,所以十分适宜处理并发恳求,
因而构建在Node上的署理服务器比较其他技术完结(如Ruby)的服务器体现要好得多。
此外,与Node署理服务器交互的客户端代码是由 言语编写的,
因而客户端和服务器端都用同一种言语编写,这是十分美好的作业。
*(缺陷)Node是一个相对新的开源项目,所以不太安稳,它总是一直在变,
而且短少足够多的第三方库支撑。看起来,就像是Ruby/Rails当年的姿态。
2、需求:完结一个页面操作不会整页改写的网站,而且能在阅览器行进、撤退时正确呼应。给出你的技术完结计划? 至少给出自己的思路(url-hash,能够运用已有的一些结构history.js等)
6、 Node.js的适用场景? 1)、实时运用:如在线谈天,实时告诉推送等等(如socket.io)
2)、分布式运用:经过高效的并行I/O运用已有的数据
3)、东西类运用:海量的东西,小到BETWAY登录紧缩布置(如grunt),大到桌面图形界面运用程序
4)、游戏类运用:游戏范畴对实时和并发有很高的要求(如网易的pomelo结构)
5)、运用安稳接口进步Web烘托才干
6)、前后端编程言语环境共同:BETWAY登录开发人员能够十分快速地切入到服务器端的开发(如闻名的纯 全栈式MEAN架构)
4、(假如会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么? Nodejs相关概念的了解程度
7、 解释一下 Backbone 的 MVC 完结办法? 盛行的MVC架构办法
8、 什么是“BETWAY登录路由”?什么时分适宜运用“BETWAY登录路由”? “BETWAY登录路由”有哪些长处和缺陷? 了解前后端通讯相关常识
7、对Node的长处和缺陷提出了自己的观点? 长处:
1. 由于Node是依据作业驱动和无堵塞的,所以十分适宜处理并发恳求,因而构建在Node上的署理服务器比较其他技术完结(如Ruby)的服务器体现要好得多。
2. 与Node署理服务器交互的客户端代码是由 言语编写的,因而客户端和服务器端都用同一种言语编写,这是十分美好的作业。
缺陷:
1. Node是一个相对新的开源项目,所以不太安稳,它总是一直在变。
2. 短少足够多的第三方库支撑。看起来,就像是Ruby/Rails当年的姿态(第三方库现在现已很丰厚了,所以这个缺陷能够说不存在了)。
十一、BETWAY登录归纳性问题 1、常运用的库有哪些?常用的BETWAY登录开发东西?开发过什么运用或组件? 运用率较高的结构有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超越91%。
轻量级结构有Modernizr、underscore.js、backbone.js、Raphael.js等。(了解这些结构的功用、功用、规划原理)
BETWAY登录开发东西:Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
开发过的插件:城市挑选插件,轿车类型挑选插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)
9、 对BFC标准的了解? Formatting Context:指页面中的一个烘托区域,而且具有一套烘托规矩,他决议了其子元素怎样定位,以及与其他元素的互相联系和作用。
3、99%的网站都需求被重构是那本书上写的? 网站重构:运用web标准进行规划(第2版)
4、WEB运用从服务器自动推送Data到客户端有那些办法? html5 websoket
WebSocket经过Flash
XHR长时刻衔接
XHR Multipart Streaming
不行见的
< >标签的长时刻衔接(可跨域)
5、加班的观点 加班就像借钱,准则应当是------救急不救穷
6、平常怎样办理你的项目,怎样规划突发大规模并发架构? 先期团队有必要确认好大局款式(globe.css),编码办法(utf-8) 等
编写习气有必要共同(例如都是选用承继式的写法,单款式都写成一行);
标示款式编写人,各模块都及时标示(标示要害款式调用的当地);
页面进行标示(例如 页面 模块 开端和完毕);
CSS跟HTML 分文件夹并行寄存,命名都得共同(例如style.css)
JS 分文件夹寄存 命民以该JS 功用为准英文翻译;
图片选用整合的 images.png png8 格局文件运用 尽量整合在一起运用便利将来的办理
7、那些操作会构成内存走漏? 内存走漏指任何方针在您不再具有或需求它之后依然存在。
废物收回器定时扫描方针,并核算引证了每个方针的其他方针的数量。假如一个方针的引证数量为 0(没有其他方针引证过该方针),或对该方针的专一引证是循环的,那么该方针的内存即可收回。
setTimeout 的第一个参数运用字符串而非函数的话,会引发内存走漏。
闭包、操控台日志、循环(在两个方针互相引证且互相保存时,就会发作一个循环)
8、你说你酷爱BETWAY登录,那么应该WEB职业的开展很重视吧? 说说最近最盛行的一些东西吧? Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs
9、你有了解咱们公司吗?说说你的知道? 由于我想去阿里,所以我针对阿里的说
最仰慕便是在双十一购物节,350.19亿元,每分钟付出79万笔。海量数据,竟然无一漏单、无一毛病。太凶猛了。
10、 移动端(比方:Android IOS)怎样做好用户体会? 融入自己的规划理念,重视用户体会,挑选适宜的技术
11、 你所知道的页面功用优化办法有那些? 紧缩、兼并,削减恳求,代码层析优化。。。
12、 除了BETWAY登录以外还了解什么其它技术么?你最最凶猛的技术是什么? 常识面宽度,最好了解一些后台言语,比方php,展现出自己的技术两点
13、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)标准差异? 14、谈谈你以为怎样做能使项目做的更好? 考虑问题的深化,不只是停留在完结使命上,要精雕细镂
15、你对BETWAY登录界面工程师这个职位是怎样样了解的?它的远景会怎样样? 体现出对BETWAY登录的认同与爱好,重视相关技术前沿
16、php中下面哪个函数能够翻开一个文件,以对文件进行读和写操作? A.fget(); B.file_open(); C.fopen(); D.open_file();
17、php中rmdir能够直接删去文件夹吗?该目录有必要是空的,而且要有相应的权限--来自api A.任何文件夹都能够删去 B.空文件夹能够删去
C.有权限的任何文件夹都能够删去 D.有权限的空文件夹能够删去
18、phpinset和empty的差异,举例阐明 1、empty函数
用处:检测变量是否为空
判别:假如 var 对错空或非零的值,则 empty() 回来 FALSE。换句话说,""、0、"0"、NULL、FALSE、array()、var $var; 以及没有任何特色的方针都将被以为是空的,假如 var 为空,则回来 TRUE。留意:empty() 只检测变量,检测任何非变量的东西都将导致解析过错。换句话说,后边的句子将不会起作用;
2、isset函数
用处:检测变量是否设置
判别:检测变量是否设置,而且不是 NULL。假如现已运用 unset() 释放了一个变量之后,它将不再是 isset()。若运用 isset() 测验一个被设置成 NULL 的变量,将回来 FALSE。一起要留意的是一个NULL 字节("\0")并不等同于 PHP 的 NULL 常数。
19、php中$_SERVER变量中怎样得到当时履行脚本路劲
20、写一个php函数,要求两个日期字符串的天数差,如2012-02-05~2012-03-06的日期差数 21、一个衣柜中放了许多凌乱的衬衫,假如让你去收拾一下,使得更简略找到你想要的衣服;你会怎样做?请写出你的做法和思路? 22、怎样优化网页加载速度? 1.削减css,js文件数量及巨细(削减重复性代码,代码重复运用),紧缩CSS和Js代码
2.图片的巨细
3.把css款式表放置顶部,把js放置页面底部
4.削减http恳求数
5.运用外部 Js 和 CSS
23、作业流程,你怎样来完结页面规划图,你以为BETWAY登录应该怎样高质量完结作业? 了解相关规划标准,自己总结的一些经历
24、介绍项目经历、协作开发、独立开发。 团队协作,个人才干。实践经历
25、开发进程中遇到困难,怎样处理。 调查处理问题的才干
26、对BETWAY登录界面工程师这个职位是怎样样了解的?它的远景会怎样样? BETWAY登录是最靠近用户的程序员,比后端、数据库、产品司理、运营、安全都近。
1、完结界面交互
2、进步用户体会
3、有了Node.js,BETWAY登录能够完结服务端的一些作业
BETWAY登录是最靠近用户的程序员,BETWAY登录的才干便是能让产品从 90分进化到 100 分,乃至更好,
参加项目,快速高质量完结完结作用图,准确到1px;
与团队成员,UI规划,产品司理的交流;
做好的页面结构,页面重构和用户体会;
处理hack,兼容、写出美丽的代码格局;
针对服务器的优化、拥抱最新BETWAY登录技术。
其它相关的加分项:
1. 都运用和了解过哪些修正器?都运用和了解过哪些日常东西?
2. 都知道有哪些阅览器内核?开发过的项目都兼容哪些阅览器?
3. 瀑布流布局或许流式布局是否有了解
4. HTML5都有哪些新的API?
5. 都用过什么代码调试东西?
6. 是否有触摸过或许了解过重构。
7.你遇到过比较难的技术问题是?你是怎样处理的?
转载请注明: 文章转载自:BETWAY官网网 https://www.nucmc.com/show-66-1036-1.html