一家只做特卖的网站,淘宝联盟+做网站,自己做一个小程序需要多少钱,网络事件营销面试了两家公司#xff0c;第一家没有笔试直接面试#xff0c;第二家笔试面试#xff0c;将记得住的问题记录下来#xff0c;答案自己找的#xff0c;有好的答案欢迎提出。 1、响应式布局 一家公司问了em和rem的区别#xff0c;另一家公司先问了一下px,em,rem的区别…面试了两家公司第一家没有笔试直接面试第二家笔试面试将记得住的问题记录下来答案自己找的有好的答案欢迎提出。 1、响应式布局 一家公司问了em和rem的区别另一家公司先问了一下px,em,rem的区别然后又问是否熟悉响应式布局 1px,em,rem的区别 px:像素Pixel。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸。实际上只需要知道em是相对于父元素的就行了父元素字体大小是10px1em就等于10px。 rem也是相对长度单位但相对的只是HTML根元素 目前除了IE8及更早版本外所有浏览器均已支持rem。对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。 p {font-size:14px; font-size:.875rem;} 2响应式布局 流式布局%em,rem弹性布局flex都属于响应式布局,当然最出名的是媒体查询 流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。 详情参考手把手教你响应式布局一 2、两栏布局一侧固定一侧自适应的几种方式 div classwrapper idwrapperdiv classleft左边固定宽度高度不固定 /br /br/br/br高度有可能会很小也可能很大。/divdiv classright这里的内容可能比左侧高也可能比左侧低。宽度需要自适应。/br基本的样式是两个div相距20px, 左侧div宽 120px/div
/div 1基本方法 .wrapper {padding: 15px 20px;border: 1px dashed #ff6c60;
}
.left {width: 120px;border: 5px solid #ddd;
}
.right {margin-left: 20px;border: 5px solid #ddd;
} 2float方法 .wrapper-float {overflow: hidden; // 清除浮动
}.wrapper-float .left {float: left;
}.wrapper-float .right {margin-left: 140px;
} 3使用floatBFC方法 .wrapper-float-bfc {overflow: auto;
}.wrapper-float-bfc .left {float: left;margin-right: 20px;
}.wrapper-float-bfc .right {margin-left: 0;overflow: auto;
} 4使用absolutemargin-left方法 .wrapper-absolute .left {position: absolute;
}.wrapper-absolute .right {margin-left: 150px;
} (5)flex方案 .wrapper-flex {display: flex;align-items: flex-start;
}.wrapper-flex .left {flex: 0 0 auto;
}.wrapper-flex .right {flex: 1 1 auto;
} 需要注意的是flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。为了让两个盒子高度自动需要设置: align-items: flex-start; 参考七种实现左侧固定右侧自适应两栏布局的方法 3、h5废弃的标签和属性及新增的标签和属性 4、浏览器的内核有哪些 1、IE浏览器内核Trident内核也被称为IE内核 2、Chrome浏览器内核Chromium内核 → Webkit内核 → Blink内核 3、Firefox浏览器内核Gecko内核也被称Firefox内核 4、Safari浏览器内核Webkit内核 5、Opera浏览器内核最初是自主研发的Presto内核后跟随谷歌从Webkit到Blink内核 5、box-sizing有哪几种 box-sizing: content-box | border-box | inherit; 6、通过原生js和jQuery获取元素的区别 jQuery获取的是jQuery对象原生js获取到的是DOM元素 7、工作中的增删改查是哪些方法 JS数组操作之增删改查的简单实现 新增一条数据编辑原有数据删除数据查询数据 8、Vue的生命周期有哪些页面挂载之前beforecreated到mounted使用的区别 beforeCreate创建前,created创建后,beforeMount(载入前),mounted载入后,beforeUpdate更新前,updated更新后,beforeDestroy销毁前,destroyed销毁后 beforecreatedel 和 data 并未初始化
created:完成了 data 数据的初始化el没有
beforeMount完成了 el 和 data 初始化
mounted 完成挂载 beforecreate : 举个栗子可以在这加个loading事件
created 在这结束loading还做一些初始化实现函数自执行
mounted 在这发起后端请求拿回数据配合路由钩子做一些事情
beforeDestroy 你确认删除XX吗 destroyed 当前组件已被删除清空相关内容 9、你做过哪些性能优化 一、减少HTTP请求 CSS Sprites直译过来就是CSS精灵 在可以大量使用字体图标的地方我们可以尽可能使用字体图标字体图标可以减少很多图片的使用从而减少http请求字体图标还可以通过CSS来设置颜色、大小等样式 合并脚本 和样式表将多个样式表或者脚本文件合并到一个文件中可以减少HTTP请求的数量从而缩短效应时间。 然而合并所有文件对许多人尤其是编写模块化代码的人来说是不能忍的而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本对于只访问该网站一个或几个页面的人来说反而增加了下载量所以大家应该自己权衡利弊 二、使用CDN 三、添加Expires头 页面的初次访问者会进行很多HTTP请求但是通过使用一个长久的Expires头可以使这些组件被缓存下次访问的时候就可以减少不必要的HTPP请求从而提高加载速度。 Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本直到指定的时间为止。例如 Expires: Fri, 18 Mar 2016 07:41:53 GMT Expires缺点 它要求服务器和客户端时钟严格同步过期日期需要经常检查 HTTP1.1中引入Cache-Control来克服Expires头的限制使用max-age指定组件被缓存多久。 Cache-Control max-age12345600 若同时制定Cache-Control和Expires则max-age将覆盖Expires头 四、压缩组件 从HTTP1.1开始Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持 Accept-Encoding: gzip,deflate 如果Web服务器看到请求中有这个头就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。 Content-Encoding: gzip 五、将样式表放在头部 首先说明一下将样式表放在头部对于实际页面加载的时间并不能造成太大影响但是这会减少页面首屏出现的时间使页面内容逐步呈现改善用户体验防止“白屏”。 我们总是希望页面能够尽快显示内容为用户提供可视化的回馈这对网速慢的用户来说是很重要的。 将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素浏览器会阻塞内容逐步呈现造成“白屏”。这源自浏览器的行为如果样式表仍在加载构建呈现树就是一种浪费因为所有样式表加载解析完毕之前务虚会之任何东西 六、将脚本放在底部 更样式表相同脚本放在底部对于实际页面加载的时间并不能造成太大影响但是这会减少页面首屏出现的时间使页面内容逐步呈现。 js的下载和执行会阻塞Dom树的构建严谨地说是中断了Dom树的更新所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。 下载脚本时并行下载是被禁用的——即使使用了不同的主机名也不会启用其他的下载。因为脚本可能修改页面内容因此浏览器会等待另外也是为了保证脚本能够按照正确的顺序执行因为后面的脚本可能与前面的脚本存在依赖关系不按照顺序执行可能会产生错误。 七、使用外部的JavaScript和CSS 内联脚本或者样式可以减少HTTP请求按理来说可以提高页面加载的速度。然而在实际情况中当脚本或者样式是从外部引入的文件浏览器就有可能缓存它们从而在以后加载的时候能够直接使用缓存而HTML文档的大小减小从而提高加载速度。 影响因素 1、每个用户产生的页面浏览量越少内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量那么缓存的样式和脚本将会极大减少下载的时间提交页面加载速度。 2、如果你的网站不同的页面之间使用的组件大致相同那么使用外部文件可以提高这些组件的重用率。 八、精简JavaScript 移除不必要的空白字符空格换行、制表符这样整个文件的大小就变小了。 一般来说压缩产生的节省是高于精简的在生产环境中精简和压缩同时使用能够最大限度的获得更多的节省。 CSS的精简 CSS的精简带来的节省一般来说是小于JavaScript精简的因为CSS中注释和空白相对较少。 除了移除空白、注释之外CSS可以通过优化来获得更多的节省 合并相同的类 移除不使用的类 九、避免重定向 当页面发生了重定向就会延迟整个HTML文档的传输。在HTML文档到达之前页面中不会呈现任何东西也没有任何组件会被下载。 来看一个实际例子对于ASP.NET webform开发来说对于新手很容易犯一个错误就是把页面的连接写成服务器控件后台代码里例如用一个Button控件在它的后台click事件中写上Response.Redirect()然而这个Button的作用只是转移URL这是非常低效的做法因为点击Button后先发送一个Post请求给服务器服务器处理Response.Redirect()后就发送一个302响应给浏览器浏览器再根据响应的URL发送GET请求。正确的做法应该是在html页面直接使用a标签做链接这样就避免了多余的post和重定向。 参考Web前端性能优化——如何提高页面加载速度 10、截取字符串的方法有哪些参数的区别 slice(start,[end]) 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串... substring(start,[end]) 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差. substr(start,[length]) 第一个参数代表开始位置,第二个参数代表截取的长度 函数split() 功能使用一个指定的分隔符把一个字符串分割存储到数组例子 str”jpg|bmp|gif|ico|png”;arrtheString.split(”|”);//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组 函数John() 功能使用您选择的分隔符将一个数组合并为一个字符串例子 var delimitedStringmyArray.join(delimiter);var myListnew Array(”jpg”,”bmp”,”gif”,”ico”,”png”);var portableListmyList.join(”|”);//结果是jpg|bmp|gif|ico|png function func(s, n) {return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);} 11、改变this指向的方法有哪些call和apply的区别 call方法: 语法call(thisObjObject) //对象参数集定义调用一个对象的一个方法以另一个对象替换当前对象。说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数那么 Global 对象被用作 thisObj。apply方法 语法apply(thisObj[argArray]) //对象数组定义应用某一对象的一个方法用另一个对象替换当前对象。 说明 如果 argArray 不是一个有效的数组或者不是 arguments 对象那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数那么 Global 对象将被用作 thisObj 并且无法被传递任何参数。 call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. $.proxy(fn,context)改变this的指向 fn必须是一个函数 ES5还定义了一个方法bind() js改变this指向方法call,apply;jq改变this指向方法$.proxy() 12、知道哪些ES6语法解构赋值数组和对象的区别 ES6常用知识总结20%的知识占80%的份额 数组以序列号一一对应这是一个有序的对应关系。而对象根据属性名一一对应这是一个无序的对应关系属性名一致即可。根据这个特性使用解析结构从对象中获取属性值更加具有可用性。 13、你对jQuery优化有哪些建议 1、总是使用#id去寻找element. 在Classes前面使用Tags 2、缓存jQuery对象可以用逗号隔开一次定义多个本地变量这样可以节省一些字节。 3、更好的利用链 4、事件委托又名冒泡事件 5、遵从$(windows).load 参考jQuery代码性能优化的10种方法 14、AMD和CMD AMD 即Asynchronous Module Definition中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。由于不是JavaScript原生支持使用AMD规范进行页面开发需要用到对应的库函数也就是大名鼎鼎RequireJS实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。 requireJS主要解决两个问题 1、多个js文件可能有依赖关系被依赖的文件需要早于依赖它的文件加载到浏览器 2、js加载的时候浏览器会停止页面渲染加载文件越多页面失去响应时间越长 require([dependencies], function(){}); require()函数接受两个参数 第一个参数是一个数组表示所依赖的模块
第二个参数是一个回调函数当前面指定的模块都加载成功后它将被调用。加载的模块会以参数形式传入该函数从而在回调函数内部就可以使用这些模块 require()函数在加载依赖的函数的时候是异步加载的这样浏览器不会失去响应它指定的回调函数只有前面的模块都加载成功后才会运行解决了依赖性的问题。 CMD 即Common Module Definition通用模块定义CMD规范是国内发展出来的就像AMD有个requireJSCMD有个浏览器的实现SeaJSSeaJS要解决的问题和requireJS一样只不过在模块定义方式和模块加载可以说运行、解析时机上有所不同 前端模块化AMD与CMD的区别 15、如何创建一个对象划出内存图 一、原始方法 通过new关键字生成一个对象然后根据JavaScript是动态语言的特性来添加属性和方法构造一个对象。其中的this表示调用该方法的对象。 二工厂方法构造函数 scriptfunction Person(name,age){this.name name;this.age age;this.showName function () {console.log(this.name);};this.showAge function () {console.log(this.age);};}var obj1 new Person(Kitty,21);var obj2 new Person(Luo,22);obj1.showName();//Kittyobj1.showAge();//21obj2.showName();//luoobj2.showAge();//22
/script 工厂方法为每个对象都创建逻辑相同的方法很浪费内存。 三混合的构造函数/原型方式 scriptfunction Person(name,age){this.name name;this.age age;this.array new Array(Kitty,luo);}Person.prototype.showName function (){console.log(this.name);};Person.prototype.showArray function (){console.log(this.array);};var obj1 new Person(Kitty,21);var obj2 new Person(luo,22);obj1.array.push(Wendy);//向obj1的array属性添加一个元素obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
/script 四动态原型方法 scriptfunction Person(name,age){this.name name;this.age age;this.array new Array(Kitty,luo);//如果Person对象中_initialized 为undefined表明还没有为Person的原型添加方法if(typeof Person._initialized undefined){Person.prototype.showName function () {console.log(this.name);};Person.prototype.showArray function () {console.log(this.array);};Person._initialized true;}}var obj1 new Person(Kitty,21);var obj2 new Person(luo,22);obj1.array.push(Wendy);//向obj1的array属性添加一个元素obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
/script 参考JavaScript如何创建一个对象 16、new具体做了哪些事情 var fn function () { };
var fnObj new fn(); 1创建一个空对象 var obj newobject(); 2设置原型链 obj._proto_ fn.prototype; 原型链三张图搞懂JavaScript的原型对象与原型链 3让fn的this指向obj并执行fn的函数体 var result fn.call(obj); 4判断fn的返回值类型如果是值类型返回obj。如果是引用类型就返回这个引用类型的对象。 if (typeof(result) object){ fnObj result;
} else { fnObj obj;
} new 操作符具体干了什么 创建一个新的对象将构造函数的作用域赋值给新对象this执行新的对象执行构造函数的代码返回新的对象17、CSS3有哪些新特性如何兼容CSS3和H5新标签 CSS3新特性 border-radius
box-shadow
border-image
text-overflow
font-face 规则
//2D转换
translate()
rotate()
scale()
skew()
matrix()
//3D转换
rotateX()
rotateY() 渐变linear-gradient、radial-gradient transition //过渡keyframes animation //动画 //多列
column-count //多少列
column-gap //列的间隙
//多列边框
column-rule-style
column-rule-width
column-rule-color
column-rulecolumn-span //元素跨越多少列
column-width //列宽 box-sizing
Flex Box
media CSS3 根据设置自适应显示
media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: Email: ; font-style: italic; color: #666666; }} CSS3兼容写法 -webkit-, -ms- IE或 -moz- FF-o- IE8浏览器中还没有添加对HTML5新标签的支持所以在IE8中无法直接展现HTML5新标签中的内容。庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签代码如下 var e abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video.split(, );
var i e.length;
while (i--){document.createElement(e[i])
} 浏览器支持新标签后还需要添加标签默认的样式
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000} 参考关于H5新标签的浏览器兼容问题的详解 18、doctype声明严格模式和混合模式是什么意义 放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式以便正确显示由doctype声明所指定的文档种类。 doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下“阅读程序”通常是浏览器或者校验器这样的一个程序“规则”则是W3C所发布的一个文档类型定义DTD中包含的规则。 DOCTYPE声明作用及用法详解 19、浏览器常见兼容问题 1不同浏览器的标签默认的外补丁和内补丁不同 解决方案css里 *{margin:0;padding:0;}2图片默认有间距 解决方案使用float属性为img布局3透明度的兼容css设置 最全整理浏览器兼容性问题与解决方案、常见的浏览器兼容性问题总结 20、定位有哪些 static默认值块级元素和行内元素按照各自的特性进行显示 relative:相对定位,元素相对于原本位置的定位元素不脱离文档流位置会被保留其他的元素位置不会受到影响不会改变元素的display属性 absolute绝对定位相对于static以外的第一个父元素进行定位如何不存在这样的包含块则相对于body进行定位。脱离文档流并改变了display属性元素本身生成块级框可以设置宽高不设置宽度时宽高由内容撑开不继承父级宽度可以在一行显示换行符不解析 fixed:固定定位相对于浏览器窗口进行定位。脱离文档流并改变了display属性元素本身生成块级框。 inherit:从父元素继承 position 属性的值。IE8以及以前的版本都不支持inherit属性。 sticky:粘性定位它结合了结合了position:relative 和 position:fixed 两种定位功能于一体的特殊定位 21、如何实现div居中如何让float元素居中 .center { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; } .center {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); } //浮动元素居中
//子元素在父元素里面垂直居中
//父元素设置
display:table-cell;vertical-align:middle;
//浮动元素既垂直又水平居中的方法{display:table-cell;vertical-align:middle;margin:0 auto;} DIV居中的几种方法 22、如何区分html和html5 1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签header,nav,footer,aside,article,section3. 音频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失7. sessionStorage 的数据在浏览器关闭后自动删除8. 表单控件calendar、date、time、email、url、search9. 新的技术webworker, websocket, Geolocation支持HTML5新标签 23、CSS选择器有哪些它们的优先级顺序怎么样CSS3增加了哪些伪类选择器 ID选择符 #box类选择符 .box标签 div伪类和伪元素 link、visited、active、hover 总结排序!important 行内样式ID选择器 类选择器 标签 通配符 继承 浏览器默认属性 CSS选择器优先级总结 24、对json的理解 JSON是一种轻量级数据交换格式是一种传递对象的语法JSON能够做到字符串到对象之间的转换 JSON.stringify()方法用于将一个值转为字符串。该字符串应该符合JSON格式并且可以被JSON.parse()方法还原 默认情况下JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进 25、get和post的区别 get和post是HTTP与服务器交互的方式get用于获取数据post用于提交数据 GET和POST本质上就是TCP链接并无差别。但是由于HTTP的规定和浏览器/服务器的限制导致他们在应用过程中体现出一些不同。 GET后退按钮/刷新无害POST数据会被重新提交浏览器应该告知用户数据会被重新提交。
GET能被缓存POST不能缓存 。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制当发送数据时GET 方法向 URL 添加数据URL 的长度是受限制的URL 的最大长度是 2048 个字符。POST无限制。
与 POST 相比GET 的安全性较差因为所发送的数据是 URL 的一部分。 GET和POST还有一个重大区别简单的说 GET产生一个TCP数据包POST产生两个TCP数据包。 长的说 对于GET方式的请求浏览器会把http header和data一并发送出去服务器响应200返回数据 而对于POST浏览器先发送header服务器响应100 continue浏览器再发送data服务器响应200 ok返回数据。 GET和POST两种基本请求方法的区别、get和post区别 26、link与import的区别 1.从属关系区别import是 CSS 提供的语法规则只有导入样式表的作用link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。 2.加载顺序区别加载页面时link标签引入的 CSS 被同时加载import引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别import是 CSS2.1 才有的语法故只可在 IE5 才能识别link标签作为 HTML 元素不存在兼容性问题。 4.DOM可控性区别可以通过 JS 操作 DOM 插入link标签来改变样式由于 DOM 方法是基于文档的无法使用import的方式插入样式。 就结论而言强烈建议使用link标签慎用import方式。 参考link和import的区别 27、如何实现移动端字体大小屏幕自适应百分比方法的缺点rem的作用 1用媒体查询rem media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {//针对iPhone 4, 5c,5s, 所有iPhone6的放大模式个别iPhone6的标准模式
html{font-size:10px;}
}
media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {//针对大多数iPhone6的标准模式
html{font-size:12px;}
}media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {//针对所有iPhone6的放大模式
html{font-size:16px;}}
media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {//针对所有iPhone6的标准模式,414px写为412px是由于三星Nexus 6为412px可一并处理
html{font-size:20px;}
} 2jsrem 按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来改变html的font-size从而达到适配各种屏幕的效果 (function (doc, win) {var docEl doc.documentElement,resizeEvt orientationchange in window ? orientationchange : resize,recalc function () {var clientWidth docEl.clientWidth;brwindow.innerWidthmax ? window.innerWidth : max;if (!clientWidth) return;docEl.style.fontSize 20 * (clientWidth / 320) px;};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener(DOMContentLoaded, recalc, false);
})(document, window);
//这个方法就是在监听屏幕的宽度然后根据不同的屏幕做出反应
//orientationchange :检测屏幕发生反转时就是是横屏还是竖屏时
//clientWidth :就是设备的宽度
//docEl.style.fontSize 20 * (clientWidth / 320) px; 核心就是这句设置根元素的字体大小是clientWidth/320*20
//document.documentElement.clientWidth 屏幕宽度 3CSS3的计算calc和vw单位 calc()的运算规则 使用“”、“-”、“*” 和 “/”四则运算
可以使用百分比、px、em、rem等单位
可以混合使用各种单位进行计算
表达式中有“”和“-”时其前后必须要有空格如widht: calc(12%5em)这种没有空格的写法是错误的
表达式中有“*”和“/”时其前后可以没有空格但建议留有空格。 .elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();} VW相对于视口的宽度。视口被均分为100单位的vw也就是说在375宽度的屏幕中1vw等于3.75px320的屏幕中1vw等于3.2px。这样的话对于不同尺寸的屏幕有了一个统一的单位来进行衡量这时我们再结合rem即对HTML设置字体大小font-sizecalc(100vw/18.75)——这是以iPhone6的尺寸为设计图时做的计算此时在iPhone6尺寸的页面中1rem为20px 28、如何封装ajax参数是什么对象 export const BASEURL /api/export function ajax(options){ let config {url:options.url,method:options.method || get,params:options.params || {},data:options.data || {},headers:options.headers || {}}axios.interceptors.response.use((response) { //响应拦截器if (response.data.errorCode 401) {router.push(/login)message({message:会话失效请重新登陆,type:error})return response} else {return response}}, (error) {return Promise.reject(error)})return axios(config).catch((e) {if(!e.response){router.push(/login)message({message:会话失效请重新登陆,type:error})}else{if(e.response.status 504){message({message:网关超时,type:error})}else{message({message:e.response.data.msg,type:error})}}})
} 29、事件委托的原理是什么什么时候需要事件委托 事件委托的原理是事件冒泡机制 当动态创建元素的时候因为DOM不存在的时候无法添加事件所以需要委托给父元素 30、懒加载多页面优化 转载于:https://www.cnblogs.com/phoebeyue/p/9339008.html
