web前端面经

 1.  的作用？

        告诉浏览器的解析器用什么文档标准解析这个文档

    2.行内元素？

        (一个行内元素占据它对应标签的边框所包含的空间)行内元素是指一行内可连续并排出现的元素，例如：       ...</strong></span></p> <p>    3.块级元素？</p> <p>      <span style="color:#f33b45;"><strong>  块级元素占据父容器的整个宽度，例如：<div> <ul> <ol> <li> <p> <h1~6>  H5新标签<header> <main> <section>...</strong></span></p> <p>    4.行内元素和块级元素的区别？</p> <p>      <span style="color:#f33b45;"><strong>  格式上：默认情况下，行内元素不会以新行开始，而块级元素会</strong></span></p> <p><span style="color:#f33b45;"><strong>        内容上：默认情况下，行内元素只能包含文本和其他行内元素，而块级元素可以包含文本和其他行内元素与块级元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        行内元素和块级元素属性不同，行内元素设置width/height无效</strong></span></p> <p>    5.空元素？</p> <p>       <strong><span style="color:#f33b45;"> 空元素是指中间没有内容的标签，即单标签    <br/> <hr/> <img/> <input> <link> ...</span></strong></p> <p>    6.页面导入样式时，使用@import 和 link标签 有什么区别？</p> <p>      <strong><span style="color:#f33b45;">  1.@import 是css的语法规则，只有导入样式表的作用;而link既可以导入样式表，还可以设置rel等属性引入网站图表等 </span></strong></p> <p><strong><span style="color:#f33b45;">        2.link标签引入的css被同时加载；而用@import 引入的css则需要等到页面加载完毕之后加载</span></strong></p> <p><strong><span style="color:#f33b45;">        3.link标签可以被js脚本动态插入改变样式，而@imoprt 不可以</span></strong></p> <p>    7.浏览器内核/引擎？</p> <p>       <strong><span style="color:#f33b45;"> 浏览器的内核引擎分为渲染引擎和JS引擎，</span></strong></p> <p><strong><span style="color:#f33b45;">        渲染引擎的功能就是渲染，即在浏览器中展示所请求的内容，默认情况下，渲染引擎可以渲染xml,html,图片等，还可以借助插件渲染pdf</span></strong></p> <p><strong><span style="color:#f33b45;">        JS引擎的功能就是解析执行javascript脚本，</span></strong></p> <p>    8.常见的浏览器内核？</p> <p>       <strong><span style="color:#f33b45;"> IE              Trident</span></strong></p> <p><strong><span style="color:#f33b45;">        Chrome          Blink</span></strong></p> <p><strong><span style="color:#f33b45;">        Firefox         Gecko</span></strong></p> <p><strong><span style="color:#f33b45;">        Safari          Webkit</span></strong></p> <p>    9.浏览器渲染过程中遇到js文件怎么处理？</p> <p>      <span style="color:#f33b45;"><strong>  在构建DOM时，HTML若遇到了javascript脚本，则它会暂停对文档的解析，通过JS引擎解析运行javascript脚本，等待js加载完毕，才会从中断的地方继续加载文档</strong></span></p> <p>    10.defer 和 async 的作用和区别？</p> <p>     <strong><span style="color:#f33b45;">   JS脚本没有defer和async属性的话，浏览器会立即加载运行javascript</span></strong></p> <p><strong><span style="color:#f33b45;">        defer属性表示延迟执行引入的javascript，即这段代码在加载时HTML并未停止解析，这两个过程是并行的</span></strong></p> <p><strong><span style="color:#f33b45;">        async属性代表异步执行javascript，与defer的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程中不会阻塞，多个脚本的执行顺序无法保证</span></strong></p> <p>    11.渲染页面时常见的不良影响？</p> <p>       <span style="color:#f33b45;"><strong> 样式闪烁问题： CSS文件大加载缓慢或者放在body底部导致</strong></span></p> <p><span style="color:#f33b45;"><strong>        白屏：JS脚本放在head头部加载</strong></span></p> <p>    12.重绘 和 回流 ？</p> <p>      <span style="color:#f33b45;"><strong>  重绘：当渲染树中一些元素需要更新属性时，而这些属性只影响元素的外观，风格，而不会影响布局的操作，比如 background color 等称为重绘；</strong></span></p> <p><span style="color:#f33b45;"><strong>        回流：当渲染树中的一部分或全部因为元素的尺寸 布局 隐藏等改变而需要重新构建的操作，会影响到布局的操作称为回流。</strong></span></p> <p><span style="color:#f33b45;"><strong>            添加/删除可见的DOM元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            元素尺寸改变 （margin padding border width height）</strong></span></p> <p><span style="color:#f33b45;"><strong>            内容变化，（input输入框中输入文字）</strong></span></p> <p><span style="color:#f33b45;"><strong>            浏览器窗口尺寸改变 -resize事件</strong></span></p> <p><span style="color:#f33b45;"><strong>            。。。</strong></span></p> <p><span style="color:#f33b45;"><strong>        回流必引起重绘，重绘不一定会引起回流。</strong></span></p> <p>    13.如何减少回流？</p> <p>        <span style="color:#f33b45;"><strong> 使用transfrom代替top</strong></span></p> <p><span style="color:#f33b45;"><strong>         不要使用table布局，可能很小的改动都会造成整个table的回流</strong></span></p> <p><span style="color:#f33b45;"><strong>         不要一条一条的修改DOM样式，与其这样，还不如事先定义好css的class，然后修改DOM的className</strong></span></p> <p>    14.HTML5 有哪些新特性？</p> <p>       <span style="color:#f33b45;"><strong> 1.H5语义化标签<header> <main> <nav> <aside> <section> <footer>...</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.表单控件：date time email search url</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.Canvas画布</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.Video Audio 音视频</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.本地存储 localStorage</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.地理定位 geolocation</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.离线存储 appcache</strong></span></p> <p><span style="color:#f33b45;"><strong>        7.新的文档属性 document.visibilityState</strong></span></p> <p><span style="color:#f33b45;"><strong>        8.新的技术 websocket</strong></span></p> <p>    15.如何处理HTML5新标签的兼容性问题？</p> <p>      <span style="color:#f33b45;"><strong>  通过现成第三方库 html5shiv.js / 通过document.createElement()方法创建标签</strong></span></p> <p>    16. b和strong 与 i和em的区别？</p> <p>        <span style="color:#f33b45;"><strong>b和strong都是粗体，i和em都是斜体</strong></span></p> <p><span style="color:#f33b45;"><strong>        strong和em具有语义化，强调文本</strong></span></p> <p>    17.前端需要注意哪些SEO优化？</p> <p>      <span style="color:#f33b45;"><strong>  1.合理的title，description，keyword，title值强调重点即可，description把内容高度概括，keyword列举出几个关键字即可</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.语义化的HTML代码，符合W3C规范</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.重要内容html代码放在最前面，保证内容肯定被抓取</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.重要的内容不要用js输出，爬虫不会执行js获取内容</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.非装饰性的图片必须用alt</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.提高网站速度：网站速度是搜索引擎排序的一个重要指标</strong></span></p> <p>    18.浏览器的存储方式及区别？</p> <p>       <span style="color:#f33b45;"><strong> 浏览器的存储方式有cookie sessionStorage localStorage</strong></span></p> <p><span style="color:#f33b45;"><strong>        cookie：最多能存储4k数据，生成时间由expire属性决定，只能被同源的页面访问共享</strong></span></p> <p><span style="color:#f33b45;"><strong>        sessionStorage：会话存储，能够存储5M大小或更大的数据，随着浏览器的关闭而释放数据，只能被同一个窗口的同源页面所共享访问</strong></span></p> <p><span style="color:#f33b45;"><strong>        localStorage：本地存储，能够存储5M大小或更大的数据，不会随着浏览器的关闭而清除数据，除非手动清除，否则会一直存在浏览器中，只能被同源的页面访问共享</strong></span></p> <p>    19.Lable标签的作用是什么？ 用法？</p> <p>       <span style="color:#f33b45;"><strong> label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上</strong></span></p> <p><span style="color:#f33b45;"><strong>            <lable for="name">姓名</lable></strong></span></p> <p><span style="color:#f33b45;"><strong>            <input type="text" id="name" /></strong></span></p> <p>    20.如何实现浏览器内多个标签页之间的通信？</p> <p>      <span style="color:#f33b45;"><strong>  1.可以通过websocket协议，因为websocket协议可以实现服务器推送，所以服务器就可以用来当做这个中介者，标签页通过向服务器发送数据，然后服务器向其他标签页推送转发</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.使用localStorage本地存储方式，可以在一个标签页对localStorage变化事件进行监听，然后当另一个标签页修改数据的时候，就可以通过这个监听事件来获取到数据</strong></span></p> <p>    21.webSocket如何解决低版本浏览器兼容性问题？</p> <p>        <span style="color:#f33b45;"><strong>1.Adobe Flash Socket</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.基于长轮询的XHR请求（XmlHttpRequest ajax）</strong></span></p> <p>    22.页面可见性（Page Visibility API） 可以有哪些用途？</p> <p>        <span style="color:#f33b45;"><strong>这个API的作用在于，通过监听网页的可见性，可以预判卸载网页，还可以用来节省资源，比如：一旦用户不看当前网页，就可以停止对当前网页的轮询，停止网页的动画，音视频等等</strong></span></p> <p>    23.实现不用border画出1px高度的线，兼容浏览器标准模式和怪异模式       </p> <pre><code class="language-css"> {       overflow:hidden;       height:1px;       background-color:red; }</code></pre> <p>    24.title和h1的区别？</p> <p>        <span style="color:#f33b45;"><strong>title属性没有明确意义只是表示标题,h1则表示层次明确的标题，对页面信息的抓取也有很大的影响</strong></span></p> <p>    25.img的title和alt的区别？</p> <p>      <span style="color:#f33b45;"><strong>  title通常是鼠标滑入当前元素时所展示的信息，而alt是img的特有属性，为图片无法展示时显示的信息，搜索引擎会重点分析alt属性</strong></span></p> <p>    26.Canvas和svg的区别？</p> <p>      <span style="color:#f33b45;"><strong>  Canvas是一种通过JavaScript绘制2D图形的方法，以像素的形式描绘，所以放缩时会导致锯齿失真的情况</strong></span></p> <p><span style="color:#f33b45;"><strong>        SVG是一种通过XML绘制的2D图形的语言，当SVG缩放时并不会失真</strong></span></p> <p>    27.网页验证码的作用？</p> <p>      <span style="color:#f33b45;"><strong>  1.区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码，刷票，论坛灌水</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试</strong></span></p> <p>    28.attribute和property的区别？</p> <p>       <span style="color:#f33b45;"><strong> <div id="dv" class="content" data-id="1"></div></strong></span></p> <p><span style="color:#f33b45;"><strong>        如上述div元素，可通过 document.getElementById('dv').getAttribute('id') 获取id的值 也可以通过document.getElementById('dv').id 的方式</strong></span></p> <p><span style="color:#f33b45;"><strong>        前者称为attribute ，后者称为property </strong></span></p> <p><span style="color:#f33b45;"><strong>        只要是HTML标签内定义的都是attribute，两者同步，Attribute值是字符串类型</strong></span></p> <p><span style="color:#f33b45;"><strong>        Property属性则可以看做是DOM对象的键值对，用点操作符对它们进行操作，非自定义attribute，如id、class、titile等，都会有对应的property映射。就算没有在标签中出现都会有空值</strong></span></p> <p><span style="color:#f33b45;"><strong>        实际编程中，基本的DOM操作都是使用property的点操作符</strong></span></p> <p><span style="color:#f33b45;"><strong>            只有两种情况不得不使用attribute，</strong></span></p> <p><span style="color:#f33b45;"><strong>                1.自定义Attribute，因为它不能同步到DOM property （比如上面的div元素的data-id属性）</strong></span></p> <p><span style="color:#f33b45;"><strong>                2.访问内置的HTML标签的Attribute，这些attribute不能从property上同步过来，(比如input标签的value值)</strong></span></p> <p>    29.用于预格式化文本格式的标签是？</p> <p>       <span style="color:#f33b45;"><strong> <pre></pre>  保持文本原有的格式</strong></span></p> <p>    30.head标签中必不可少的是？</p> <p>        <span style="color:#f33b45;"><strong><head>为头部标签，可以在head标签中使用<link><meta><style><script>等，唯一且必须的标签是<title></title></strong></span></p> <p>    31.主流浏览器内核私有前缀？</p> <p>    <span style="color:#f33b45;"><strong>    IE          Trident       -ms       </strong></span></p> <p><span style="color:#f33b45;"><strong>        Chrome      Webkit        -webkit</strong></span></p> <p><span style="color:#f33b45;"><strong>        Firefox     mozilla       -mos</strong></span></p> <p><span style="color:#f33b45;"><strong>        Safari      Webkit        -webkit</strong></span></p> <p>    32.disabled和readonly的区别？</p> <p>      <span style="color:#f33b45;"><strong>  disabled指当input元素加载时被禁止使用，此时不会随着表单提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        readonly规定输入字段为只读状态，会随着表单提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        无论设置了disabled或readonly，通过js脚本都可以更改input的value值</strong></span></p> <p>    33.前端性能优化？</p> <p>        <span style="color:#f33b45;"><strong>页面内容方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过文件合并，css精灵图，base64等方式来减少http的请求</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过DNS缓存机制来减少DNS的查询次数</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.通过设置缓存策略，对常用不变的资源进行缓存</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.使用延迟加载的方式，来减少页面首屏加载时需要请求的资源</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.通过用户行为，对某些资源使用预加载的方式来提高用户需要访问资源时的响应速度</strong></span></p> <p><span style="color:#f33b45;"><strong>        服务器方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过CDN服务来提高用户对资源请求时的响应速度</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.服务器端通过Gzip等方式对于传输的资源进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.尽可能减小cookie的大小，静态资源分配到其他域名下，避免对静态资源请求时携带不必要的cookie</strong></span></p> <p><span style="color:#f33b45;"><strong>        CSS和javascript方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过对css和js文件进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.css放在head标签中，减少页面的首次渲染时间</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.避免使用@import </strong></span></p> <p><span style="color:#f33b45;"><strong>            4.JS放在body底部，或者使用defer或async属性，避免脚本的加载和执行阻塞页面的渲染</strong></span></p> <p>    34.html规范中为什么引用资源不加协议头 http或https ？</p> <p>        <span style="color:#f33b45;"><strong>如果用户当前访问的页面是通过https协议预览的，那么网页中的资源也只能够通过https协议的资源进行访问，否则浏览器会出现警告信息，</strong></span></p> <p><span style="color:#f33b45;"><strong>        不同的浏览器警告信息展示形式不同，为了解决这个问题，可以省略这个协议，省略后浏览器照样能正确引用相应的资源，还节省了5字节的数据量</strong></span></p> <p>    35.盒模型？</p> <p>        <span style="color:#f33b45;"><strong>盒模型分为内容(content)，填充(padding)，边框(border)，边距(margin)四个部分</strong></span></p> <p><span style="color:#f33b45;"><strong>        其中有标准盒模型和IE怪异模型</strong></span></p> <p><span style="color:#f33b45;"><strong>        标准盒模型：width/height 只包含content 不包含 padding和border</strong></span></p> <p><span style="color:#f33b45;"><strong>        IE怪异模型：width/height 包含content padding border</strong></span></p> <p><span style="color:#f33b45;"><strong>        可以使用box-sizing:content-box;设置为标准盒模型</strong></span></p> <p>    36.css中的选择器有哪些？</p> <p>       <span style="color:#f33b45;"><strong> id选择器        #</strong></span></p> <p><span style="color:#f33b45;"><strong>        类选择器        .</strong></span></p> <p><span style="color:#f33b45;"><strong>        标签选择器      div</strong></span></p> <p><span style="color:#f33b45;"><strong>        属性选择器      input[name=""]</strong></span></p> <p><span style="color:#f33b45;"><strong>        子代选择器      div>p</strong></span></p> <p><span style="color:#f33b45;"><strong>        后代选择器      div p</strong></span></p> <p><span style="color:#f33b45;"><strong>        兄弟选择器      li~a    选择li元素之后所有同层级的a元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        相邻兄弟选择器  li+a     选择紧接着li元素后的a元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪类选择器      :hover,:nth-child        </strong></span></p> <p><span style="color:#f33b45;"><strong>        伪元素选择器    ::after , ::before       </strong></span></p> <p><span style="color:#f33b45;"><strong>        通配符选择器    *</strong></span></p> <p>    37.伪类和伪元素的区别？</p> <p>       <span style="color:#f33b45;"><strong> 伪类和伪元素是用来修饰不在文档树中的部分</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说 当用户悬停在指定位置时，可以通过:hover来描述这个元素的状态</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如可以通过::before在一个元素前增加一些文本，虽然用户可以看到这些文本，但是这些文本实际上并不存在与文档树中</strong></span></p> <p><span style="color:#f33b45;"><strong>        按照规则 :: 代表伪元素    : 代表伪类    虽然目前大多数浏览器都支持使用这两种方式表示伪元素 </strong></span></p> <p>    38.css中哪些属性可继承？</p> <p>       <span style="color:#f33b45;"><strong> 一般具有继承性的属性有：字体相关的属性(font-size,font-weight),文本相关的属性(color,text-align),列表属性(list-style),光标属性cursor,元素可见性visibility</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个元素不是可继承属性的时候，可以通过将他的属性值设置成inherit来继承</strong></span></p> <p>    39.css优先级？</p> <p>     <span style="color:#f33b45;"><strong>   !important > 行内样式 > id选择器 > class选择器 > 标签选择器 > *         权重会叠加</strong></span></p> <p>    40.css3新增的伪类？</p> <p> <span style="color:#f33b45;"><strong>       nth-child()</strong></span></p> <p><span style="color:#f33b45;"><strong>        last-child</strong></span></p> <p><span style="color:#f33b45;"><strong>        first-of-type</strong></span></p> <p><span style="color:#f33b45;"><strong>        last-of-type</strong></span></p> <p><span style="color:#f33b45;"><strong>        nth-of-type()</strong></span></p> <p>    41.如何居中div？</p> <p>      <span style="color:#f33b45;"><strong>  对于宽高固定的元素：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.可以通过margin:0 auto;设置水平居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.{ position:absolute; width:200px; height:200px; left:50%; top:50%; margin:-100px; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.{ display:flex; justify-content:center; align-items:center; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于宽高不固定的元素，4和5即可实现</strong></span></p> <p>    42.display的值有哪些？</p> <p>     <span style="color:#f33b45;"><strong>   none: 元素隐藏</strong></span></p> <p><span style="color:#f33b45;"><strong>        block: 转为块级元素，换行显示，可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        inline: 转为行内元素，逐行显示，不可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        inline-block: 转为行内块元素，同行显示，可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        table:块级表格显示</strong></span></p> <p><span style="color:#f33b45;"><strong>        flex: 伸缩布局</strong></span></p> <p><span style="color:#f33b45;"><strong>        inherit:继承父元素display的值</strong></span></p> <p>    43.position的值定位原点是？</p> <p>       <span style="color:#f33b45;"><strong> static：无定位方式，原点不变</strong></span></p> <p><span style="color:#f33b45;"><strong>        fixed：定位原点左上角</strong></span></p> <p><span style="color:#f33b45;"><strong>        relative:定位原点位于当前元素左上角</strong></span></p> <p><span style="color:#f33b45;"><strong>        absolute：定位原点位于父级的relative元素的左上角</strong></span></p> <p>    44.css3有哪些新特性？</p> <p>     <span style="color:#f33b45;"><strong>   C3选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>        动画 (animation)</strong></span></p> <p><span style="color:#f33b45;"><strong>        圆角 (border-radius)</strong></span></p> <p><span style="color:#f33b45;"><strong>        阴影 (box-shadow text-shadow)</strong></span></p> <p><span style="color:#f33b45;"><strong>        渐变 (gradient)</strong></span></p> <p><span style="color:#f33b45;"><strong>        transform translate() scale() rotate() skew()</strong></span></p> <p><span style="color:#f33b45;"><strong>        过渡 (transtion)</strong></span></p> <p>    45.用纯css画一个三角形？</p> <p>        <span style="color:#f33b45;"><strong>采用相邻边框连接处的均分原理，把元素的宽高设为0，只设置border，把任意三条边隐藏transparent 就是一个三角形了</strong></span></p> <pre><code class="language-css">        {             width:0;             height:0;             border-width:10px;             border-style:solid;             border-color:red transparent transparent transparent;         }</code></pre> <p>    46.css多列等高实现方式？</p> <p>        <span style="color:#f33b45;"><strong>1.使用负margin-bottom 和 正 padding-bottom 对冲实现</strong></span>           </p> <pre><code class="language-css"> ul{      overflow:hidden; }  ul>li{      margin-bottom:-99999px;      padding-bottom:99999px;  }</code></pre> <p>       <span style="color:#f33b45;"><strong> 2.利用flex布局</strong></span></p> <pre><code class="language-css">            ul{                 display:flex;             }             ul>li{                 flex:1;             }</code></pre> <p>    47.css里的visibility属性里有个collapse属性值是干嘛用的？在不同浏览器中的区别？</p> <p>        </p> <p>    48.width:100% 和 width:auto 的区别？</p> <p>       <span style="color:#f33b45;"><strong> width:100%:会使当前元素盒子的宽度等于父元素的内容宽度</strong></span></p> <p><span style="color:#f33b45;"><strong>        width:auto：会使当前元素撑满整个父元素，margin/padding/border/content会自动分配水平空间</strong></span></p> <p>    49.简单介绍使用图片base64编码的优缺点？</p> <p>        <span style="color:#f33b45;"><strong>优点：可以减少一个http请求</strong></span></p> <p><span style="color:#f33b45;"><strong>        缺点：1.根据base64编码的原理，编码之后的大小会比原文件大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，还会增加浏览器对html/css文件解析渲染的时间</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.使用base64无法直接缓存，要缓存只能缓存包含base64的文件，这比直接缓存图标的效果差的多</strong></span></p> <p>    50.对于margin重叠问题的理解？</p> <p></p> <p>    51.BFC概念的理解？ (BlockFormattingContext:块格式化上下文)</p> <p>       <span style="color:#f33b45;"><strong> BFC指的是块级格式化上下文，一个元素形成BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素也不会影响到BFC中的内部元素。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一个BFC就相当于一个隔离区，和其他区域互不影响，一般来说，一个根元素就是一个BFC区域，浮动和绝对定位的元素也会形成BFC，</strong></span></p> <p><span style="color:#f33b45;"><strong>        display的属性值为inline-block,flex这些属性时也会创建BFC，还有就是overflow值不为visible时都会创建BFC</strong></span></p> <p>    52.IFC是什么？</p> <p>       <span style="color:#f33b45;"><strong> IFC指的是行级格式化上下文</strong></span></p> <p><span style="color:#f33b45;"><strong>        行级上下文会在水平方向上，一个接着一个摆放，当一行不够时会自动换行，行级上下文的高度由内部最高的内联盒子的高度决定</strong></span></p> <p>    53.为什么需要清除浮动？ 清除浮动的方式？</p> <p>        <span style="color:#f33b45;"><strong>因为浮动后的元素，脱离了文档流，高度塌陷，影响到其他元素的布局显示。</strong></span></p> <p><span style="color:#f33b45;"><strong>        方式：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1. ::after{ content:""; clear:both; }</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.父元素添加{ overflow:hidden }</strong></span></p> <p>    54.css优化 提高性能的方式？</p> <p>      <span style="color:#f33b45;"><strong>  加载性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.使用压缩方式，将css样式文件进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.使用link的方式引入样式表，减少使用@import 的方式</strong></span></p> <p><span style="color:#f33b45;"><strong>        选择器性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.避免使用通配符选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.尽量少的用标签选择器，而是用class选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.尽量少的使用后代选择器，降低选择器的权重值。</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.了解哪些属性是可以通过继承而来的，避免这些属性重复使用规则</strong></span></p> <p><span style="color:#f33b45;"><strong>        渲染性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.谨慎使用高性能属性：浮动，定位</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.尽量减少页面的重绘 重排</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.去除空规则。{ } 空规则的产生一般来说是为了预留样式</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.属性值为0时，不添加单位</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.属性值为浮动小数时，去掉小数点前的0</strong></span></p> <p><span style="color:#f33b45;"><strong>            6.使用精灵图将多个小图标整合在一次http请求中</strong></span></p> <p>    55.浏览器是怎么解析css选择器的？</p> <p></p> <p>    56.为什么不建议使用通配符初始化css样式？</p> <p>       <span style="color:#f33b45;"><strong> 通配符会将网页上所有的标签都遍历一遍，这样大大加强了对网站运行的负载，会使网站加载的时间变长</strong></span></p> <p>    57.全屏滚动的原理是什么 用到哪些css属性？</p> <p>       <span style="color:#f33b45;"><strong> 假设有5个需要展示的页面，那么页面的高度为500%，只是展示100%，容器及容器内部的页面取当前可视区高度，同时容器的父元素overflow属性值为hidden，</strong></span></p> <p><span style="color:#f33b45;"><strong>        通过更改容器可视区的位置来实现全屏滚动的效果，主要是响应鼠标滚轮事件，页面通过css动画进行移动</strong></span></p> <p><span style="color:#f33b45;"><strong>        overflow:hidden;    transition</strong></span></p> <p>    58.响应式原理？ 兼容ie低版本浏览器？</p> <p>        <span style="color:#f33b45;"><strong>响应式原理：媒体查询 @media max-width() ; 可用现成第三方库respond.js兼容ie低版本浏览器</strong></span></p> <p>    59.移动端需要设置的meta？</p> <pre><code class="language-html">      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/></code></pre> <p>    60.如何去除inline-block元素间间距？</p> <p>       <span style="color:#f33b45;"><strong> 1.去除空格</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.使用margin负值</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.font-size:0;</strong></span></p> <p>    61.overflow:scroll 移动端不能平滑滚动怎么解决？</p> <pre><code class="language-css">{ -webkit-overflow-scrolling:touch; }</code></pre> <p>    62.有一个高度自适应的div，里面有两个div，第一个div高度为100px，希望第二个div占满剩下的高度 如何做？</p> <pre><code class="language-html">        <div class="box">             <div style="height:100px;"></div>             <div class="ord"></div>         </div> <style>             .box{                 position:relative;             }             .ord{                 position:absolute;                 top:100px;                 bottom:0;                 left:0;                 right:0;             } </style></code></pre> <p>    63.什么是cookie隔离？ 或者说 资源请求的时候不带上cookie怎么做？</p> <p>       <span style="color:#f33b45;"><strong> cookie隔离是指将静态资源文件存放在非主域名下，这样请求静态资源时就不会带着cookie</strong></span></p> <p>    64.什么是css预处理器/后处理器？</p> <p>       <span style="color:#f33b45;"><strong> css预处理器定义了一种新的语言，为css提供了一些编程的特性，然后再编译成正常的css文件，如less ，sass 等</strong></span></p> <p><span style="color:#f33b45;"><strong>        css后处理器是对css进行处理，并最终生成css的预处理器，如 postcss</strong></span></p> <p>    65.画一条0.5px的线</p> <pre><code class="language-css">        {             width:100%;             height:1px;             background-color:red;             transform:scaleY(.5);         }</code></pre> <p>    66.transition和animation的区别？</p> <p>        <span style="color:#f33b45;"><strong>transition 关注的是css属性的变化，而animation作用于元素本身并不是样式属性，可以使用关键帧的概念，实现更自由的动画</strong></span></p> <p>    67.什么是首选最小宽度？</p> <p>        <span style="color:#f33b45;"><strong>首选最小宽度指的是元素最适合的最小宽度，中文最小宽度为每个汉字的宽度，英文最小宽度由特定的连续的英文字符决定，</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以如果想让英文和中文一样，每一个字符都是用最小宽度，则可以设置css { word-break:break-all; }</strong></span></p> <p>    68.为什么height:100%;会无效？</p> <p>      <span style="color:#f33b45;"><strong>  对于普通文档流中的元素，百分比高度要想起作用，其父元素必须有一个可以生效的高度值。</strong></span></p> <p>    69.什么是替换元素？</p> <p>        <span style="color:#f33b45;"><strong>通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素。如：<img>、<video>、<input>等</strong></span></p> <p>    70.如何实现单行、多行文本溢出的省略(...)</p> <p><span style="color:#f33b45;"><strong>        单行溢出：</strong></span></p> <p><span style="color:#f33b45;"><strong>            p{</strong></span></p> <p><span style="color:#f33b45;"><strong>                overflow:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>                text-overflow:ellipsis;</strong></span></p> <p><span style="color:#f33b45;"><strong>                white-space:nowrap;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>        多行溢出：</strong></span></p> <p><span style="color:#f33b45;"><strong>            p{</strong></span></p> <p><span style="color:#f33b45;"><strong>                position:relative;</strong></span></p> <p><span style="color:#f33b45;"><strong>                line-height:1.5em;</strong></span></p> <p><span style="color:#f33b45;"><strong>                height:3em;             两行省略，3/1.5=2</strong></span></p> <p><span style="color:#f33b45;"><strong>                overflow:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>                word-break:break-all;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>            p::after{</strong></span></p> <p><span style="color:#f33b45;"><strong>                content:'...';</strong></span></p> <p><span style="color:#f33b45;"><strong>                position:absolute;</strong></span></p> <p><span style="color:#f33b45;"><strong>                bottom:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>                right:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>                background-color:#fff;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p>    71.常见的元素隐藏方式？</p> <p><span style="color:#f33b45;"><strong>        1.display:none;</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.opacity:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.visibility:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.{ position:absolute;left:-9999px;top:-9999px; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.{ position:absolute;z-index:-999px; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.{ width:0;height:0; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        7.transform:scale(0,0)</strong></span></p> <p>    72.css实现上下固定，中间自适应布局？</p> <p>        <span style="color:#f33b45;"><strong>1.绝对定位方式：</strong></span></p> <pre><code class="language-css">            header,footer{                 position:absolute;                 height:100px;                 left:0;                 right:0;             }             header{                top:0;              }             main{                 position:absolute;                 top:100px;                 bottom:100px;             }             footer{                 bottom:0             }</code></pre> <p><span style="color:#f33b45;"><strong>        2.使用flex布局：</strong></span></p> <pre><code class="language-css">            body{                 display:flex;                 flex-direction:column;                 height:100vh;             }             header,footer{                 height:100px;                 background-color:red             }             main{                 flex-grow:1;                 background-color:green;             }</code></pre> <p>    73.css实现两栏布局？</p> <p>     <span style="color:#f33b45;"><strong>   1.浮动实现</strong></span></p> <pre><code class="language-css">            .left{                 float:left;                 width:200px;             }             .right{                 margin-left:200px;                 width:auto;             }</code></pre> <p>       <span style="color:#f33b45;"><strong> 2.绝对定位</strong></span></p> <pre><code class="language-css">            .left{                 position:absolute;                 left:0;                 width:200px;             }             .right{                 position:absolute;                 left:200px;             }             或             .right{                 margin-right:200px;             }</code></pre> <p>      <span style="color:#f33b45;"><strong>  3.flex布局</strong></span></p> <pre><code class="language-css">            box{                 display:flex;             }             .left{                 width:200px;             }             .right{                 flex:1             }</code></pre> <p>    74.三栏布局？</p> <p><span style="color:#f33b45;"><strong>        1.左右浮动宽度200px;中间设置margin:0 200px;需要注意的是中间的元素需要放在最底下</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.父元素相对定位，左右元素绝对定位在两侧设置宽度，中间margin：0 200px;</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.flex布局，父元素display:flex;左右两元素设置宽度，中间元素flex:1;</strong></span></p> <p>    75.js中的数据类型？</p> <p>       <span style="color:#f33b45;"><strong> 基本数据类型：Number String Boolean undefined null</strong></span></p> <p><span style="color:#f33b45;"><strong>        引用数据类型：Object Array Function</strong></span></p> <p>    76.js中有哪些内置对象？</p> <p>     <span style="color:#f33b45;"><strong>   JS中的内置对象主要是指程序执行前存在全局作用域里由js定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一般我们经常用到的全局值属性：NaN、undefined，全局函数如：parseInt(),parseFloat()，用来实例化对象的构造函数如：Date，Object，Math    </strong></span></p> <p>    77.undefined与undeclared的区别？</p> <p>      <span style="color:#f33b45;"><strong>  已在作用域下声明但还没赋值的变量是undefined，还没有在作用域下声明过的变量是undeclared。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于undeclared变量的引用，浏览器会报引用错误，但是我们可以通过typeof的安全机制来避免这种报错，因为undeclared的变量typeof会返回undefined</strong></span></p> <p>    78.undefined和null的区别？</p> <p>        <span style="color:#f33b45;"><strong>首先undefined和null都是基本数据类型，undefined指的是变量已声明但未赋值，null代表的含义为空对象</strong></span></p> <p>    79.JavaScript原型 原型链 ？</p> <p>       <span style="color:#f33b45;"><strong> 个人理解：原型就是一个属性，这个属性同时也是一个对象，构造函数中有一个属性prototype就是原型，原型的作用：共享数据，节省内存空间，实现继承</strong></span></p> <p><span style="color:#f33b45;"><strong>        原型链是指实例对象和原型对象是通过__proto__原型来联系的，这种关系叫做原型链</strong></span></p> <p>    80.在js中不同进制数表示方式？</p> <p>        <span style="color:#f33b45;"><strong>二进制：0b      以0b开头</strong></span></p> <p><span style="color:#f33b45;"><strong>        八进制：0o      以0o开头</strong></span></p> <p><span style="color:#f33b45;"><strong>        十进制：</strong></span></p> <p><span style="color:#f33b45;"><strong>      十六进制：0x00    以0x开头</strong></span></p> <p>    81.typeof NaN 的结果是什么？</p> <p>       <span style="color:#f33b45;"><strong> 结果为number。</strong></span></p> <p><span style="color:#f33b45;"><strong>        NaN指的是‘不是一个数字’，用于指出数字类型中的错误情况，即执行数学运算没有成功</strong></span></p> <p><span style="color:#f33b45;"><strong>        NaN是一个特殊值，它和自身不相等，是唯一一个非自反的值；即 NaN != NaN 为true</strong></span></p> <p>    82.解析字符串中的数字parseInt() 和 将字符串强制类型转换为数字Number() 的返回结果都是数字，他们有什么区别？</p> <p><span style="color:#f33b45;"><strong>        解析字符串parseInt()中含有非数字字符，解析从左到右解析，解析到非数字字符时即会停止</strong></span></p> <p><span style="color:#f33b45;"><strong>        强制类型转换Number()不允许出现非数字字符，否则会失败返回NaN</strong></span></p> <p>    83.什么情况下会发生布尔值的隐式强制类型转换？</p> <p>      <span style="color:#f33b45;"><strong>  条件判断表达式中会发生布尔值的隐式强制类型转换</strong></span></p> <p><span style="color:#f33b45;"><strong>        比如：1. if( .. ){}   2.  ..? '':''   3.逻辑与&&、逻辑或|| 4.do while(..) 等等</strong></span></p> <p>    84.如何将浮点数左边的数每三位添加一个逗号（千位分隔符）？ 如 12000000.11转化为 12,000,000.11    包含整数？</p> <pre><code class="language-javascript">        function format(number){             var number = number + ''             if(number.indexOf('.')!=-1){                 return number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");             }else{                 return number.replace(/\d{1,3}(?=(\d{3})+$)/g,"$&,")             }         }</code></pre> <p>    85.JavaScript创建对象的几种方式？</p> <p>        <span style="color:#f33b45;"><strong>1.工厂模式（解决了创建多个相似对象时，代码的复用问题；没有解决对象识别的问题，即不知道对象的类型）</strong></span></p> <pre><code class="language-javascript">            function createPerson(name,age){                 var o = new Object();                 o.name = name;                 o.age = age;                 o.saiName = function(){ alert(o.name) }                 return o             }             var person1 = createPerson('zs',18)             var person2 = createPerson('ls',16)</code></pre> <p>       <span style="color:#f33b45;"><strong> 2.构造函数模式（解决了工厂模式对象识别问题；没创建一个对象都会创建一个saiName函数的实例做相同的事，造成内存的浪费）</strong></span>           </p> <pre><code class="language-javascript"> function createPerson(name.age){                 this.name = name;                 this.age = age;                 this.saiName = function(){ alert(this.name) }                 return this             }             var person1 = new createPerson('zs',18)             var person2 = new createPerson('ls',16)</code></pre> <p>    <span style="color:#f33b45;"><strong>    3.原型模式</strong></span></p> <pre><code class="language-javascript">            function Person(){}             Person.prototype.name = 'zs'             Person.prototype.age = 18             Person.prototype.saiName = function(){ alert(this.name) }             var person1 = new Person()</code></pre> <p>       <span style="color:#f33b45;"><strong> 4.构造函数模式+原型模式 组合</strong></span></p> <pre><code class="language-javascript">            function Person(name, age, job){                 this.name = name;                 this.age = age;                 this.job = job;             }             Person.prototype = {                 constructor: Person,                 sayName: function(){                     alert(this.name);                 }             }             var person1 = new createPerson("james"，9，"student");             var person2 = new createPerson("kobe"，9，"student");     </code></pre> <p>   86.JavaScript实现继承的几种方式？</p> <p>        <span style="color:#f33b45;"><strong>1.原型链继承</strong></span></p> <pre><code class="language-javascript">            function SuperType(){                 this.colors = ['red','green','blue']             }             function SubType(){}             SubType.prototype = new SuperType()             var subtype1 = new SubType();             console.log(subtype1.colors.push('white'))          // 4 ['red','green','blue','white']             var subtype2 = new SubType();              console.log(subtype2.colors)                    // ['red','green','blue','white']</code></pre> <p><span style="color:#f33b45;"><strong>        2.借用构造函数继承</strong></span></p> <pre><code class="language-javascript">            function SuperType(){                 this.colors = ['red','green','blue']             }             function SubType(){                 SuperType().call(this)             }             var instance1 = new SubType()             instance1.colors.push('yellow')             console.log(instance1.colors)  // ['red','green','blue','yellow']             var instance2 = new SubType()             console.log(instance2.colors)  // ['red','green','blue']</code></pre> <p><span style="color:#f33b45;"><strong>        3.组合继承</strong></span></p> <pre><code class="language-javascript">            function SuperType(name){                 this.name = name                 this.colors = ['red','green','blue']             }             SuperType.prototype.sayName = function(){ console.log(this.name) }             function SubType(name,age){                 SuperType.call(this,name)                 this.age = age             }             //继承方法             SubType.prototype = new SuperType()             SubType.prototype.constructor  = SubType             var instance1 = new SubType("james",9);             instance1.colors.push("black");             console.log(instance1.colors);  //"red,green,blue,black"             instance1.sayName(); // "james"             var instance2 = new SubType("kobe",10);             console.log(instance2.colors);  //"red,green"blue,             instance2.sayName(); // "kobe"</code></pre> <p><span style="color:#f33b45;"><strong>        4.寄生式继承</strong></span></p> <pre><code class="language-javascript">            function createPerson(person){                 var clone = object(person)      // 通过调用函数创建新对象                 clone.saiHi = function(){       // 某种方式增强这个对象                     console.log(‘hi’)                 }                 return clone            // 返回这个对象             }             var person1 = createPerson({name:'zs'})             person1.saiHi()     // hi</code></pre> <p>     <span style="color:#f33b45;"><strong>   5.寄生式组合继承 (引用类型最理想的继承范式)</strong></span>          </p> <pre><code class="language-javascript">  function inheritPrototype(subType, superType) {                 //1.创建了超类（父类）原型的（副本）浅复制                 var prototype = Object.create(superType.prototype);                 // 2.修正子类原型的构造函数属性                 //  constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数                 // prototype.constructor  未修改前指向的 superType，为了弥补因重写原型而失去的默认constructor属性。                  prototype.constructor = subType;                 // 3.将子类的原型替换为超类（父类）原型的（副本）浅复制                 subType.prototype = prototype;             }             function SuperType(name) {                 this.name = name;                 this.colors = ["red", "blue", "green"];             }             SuperType.prototype.sayName = function () {                 alert(this.name);             };             function SubType(name, age) {                 //构造函数式继承--子类构造函数中执行父类构造函数                 SuperType.call(this, name);                 this.age = age;             }             // 核心：因为是对父类原型的复制，所以不包含父类的构造函数，也就不会调用两次父类的构造函数造成浪费             inheritPrototype(SubType, SuperType);             SubType.prototype.sayAge = function () {                 alert(this.age);             }             var instance = new SubType("lichonglou");             console.log(instance.name)</code></pre> <p>    87.JavaScript作用域链？</p> <p>        <span style="color:#f33b45;"><strong>作用域链的作用是保证执行环境有权访问的所有变量和函数的有效访问，通过作用域链，我们可以访问到外层环境的变量和函数。</strong></span></p> <p>    88.This的理解？</p> <p>        <span style="color:#f33b45;"><strong>this是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this的指向可以通过四种调用模式来判断</strong></span></p> <p><span style="color:#f33b45;"><strong>        1.函数调用模式，当一个函数直接作为函数来调用时，这个this指的是window（全局对象）</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.方法调用模式，当一个函数以一个对象的方法来调用时，这个this指的是这个对象</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.构造器调用模式，当一个函数用new的方式调用时，函数执行前会新创建一个对象，this指向这个新创建的对象</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.apply、call、bind调用模式，这三个方法都可以显示的指定调用函数的this指向</strong></span></p> <p>    89.写一个通用事件函数(封装 绑定事件、解绑事件、获取事件目标、获取event、阻止冒泡、取消默认行为)？</p> <p>     <span style="color:#f33b45;"><strong>   绑定事件：</strong></span></p> <pre><code class="language-javascript">            function addEvent(ele,eventType,fun){                 if(ele.addEventListener){                     ele.addEventListener(eventType,fun,false)                 }else if(ele.attachEvent){                     ele.attachEvent('on'+eventType,fun)                 }else{                     ele['on'+eventType] = fun                 }             }</code></pre> <p>       <span style="color:#f33b45;"><strong> 解绑事件：</strong></span></p> <pre><code class="language-javascript">            function removeEvent(ele,eventType,fun){                 if(ele.removeEventListener){                     ele.removeEventListener(eventType,fun,false)                 }else if(ele.detachEvent){                     ele.detachEvent('on'+eventType,fun)                 }else{                     ele['on'+eventType] = null                 }             }</code></pre> <p><span style="color:#f33b45;"><strong>        获取事件目标:</strong></span></p> <pre><code class="language-javascript">            function getTarget(event){                 return event.target || event.srcElement;             }</code></pre> <p><span style="color:#f33b45;"><strong>        获取event</strong></span></p> <pre><code class="language-javascript">            function getEvent(event){                 return event || window.event             }</code></pre> <p><span style="color:#f33b45;"><strong>        阻止冒泡：</strong></span></p> <pre><code class="language-javascript">            function stopPropagation(event){                 if(event.stopPropagation){                     event.stopPropagation()                 }else{                     event.cancelBubble = true                 }             }</code></pre> <p> <span style="color:#f33b45;"><strong>       取消默认行为：</strong></span></p> <pre><code class="language-javascript">            function preventDefault(event){                 if(event.preventDefault){                     event.preventDefault()                 }else{                     event.returnValue = false                 }             }</code></pre> <p>    90.三种事件模型是什么？ 事件处理机制</p> <p><span style="color:#f33b45;"><strong>        第一种事件模型（原始事件模型）：通过onclick，on+'事件类型'的形式绑定事件，只能绑定一个相同事件，再次绑定将会覆盖之前的事件</strong></span></p> <p><span style="color:#f33b45;"><strong>        第二种事件模型（IE事件模型）： 通过attachEvent绑定事件，只支持冒泡，所以事件有两个阶段，目标阶段和冒泡阶段，事件从目标元素冒泡到document，并且一次检查各个节点是否绑定了事件，如果有则执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        第三种事件模型：通过addEventListener绑定事件，有三个阶段，捕获阶段、目标阶段、冒泡阶段。捕获阶段：事件从外向内执行document->ele;冒泡阶段：事件从内向外执行ele->document;默认为冒泡（false）</strong></span></p> <p>    91.事件委托是什么？</p> <p><span style="color:#f33b45;"><strong>        事件委托的本质上利用了浏览器事件冒泡的机制，因为事件在冒泡的过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，</strong></span></p> <p><span style="color:#f33b45;"><strong>        因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式成为事件委托。</strong></span></p> <p>    92. ["1","2","3"].map(parseInt) 答案是什么？  </p> <p>       <span style="color:#f33b45;"><strong> map() 接收三个参数 item,index,arr （当前遍历项，当前索引，当前数组）</strong></span></p> <p><span style="color:#f33b45;"><strong>        parseInt() 接受两个参数 str,radix (要被解析的字符串，要解析的数字的基数)</strong></span></p> <p><span style="color:#f33b45;"><strong>        因为map()遍历第三个参数不需要，所以map之后的数组为[ parseInt(1,0), parseInt(2,1), parseInt(3,2) ]</strong></span></p> <p><span style="color:#f33b45;"><strong>        因为parseInt()第二个参数的值的取值范围在2~36之间且包含0，并且第一个参数的值的首位必须小于第二个参数，否则为NaN</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以最终的结果就是 [1,NaN,NaN]</strong></span></p> <p>    93.闭包？</p> <p>       <span style="color:#f33b45;"><strong> 闭包是指有权访问另一个函数作用域中变量的函数，</strong></span></p> <p><span style="color:#f33b45;"><strong>        闭包的作用：</strong></span></p> <p><span style="color:#f33b45;"><strong>         1.函数外部能够访问到函数内部的变量。通过使用闭包，在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量</strong></span></p> <p><span style="color:#f33b45;"><strong>         2.使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收</strong></span></p> <p>    94.javascript代码中的"use strict";是什么意思?使用它区别是什么？</p> <p>    <span style="color:#f33b45;"><strong>    "use strict" 指的是一种严格运行模式，在这种模式对js的使用添加了一些限制，比如说禁止this指向全局变量，禁止使用with语句等。</strong></span></p> <p>    95.怎么判断一个数据属于某种数据类型？  (如何判断一个对象是否属于某个类)</p> <pre><code class="language-javascript">        function getType(o){             return Object.prototype.toString.call(o).slice(8,-1)         }</code></pre> <p>    96.JavaScript中，哪个函数执行对象查找时永远不会去查找原型？</p> <p>       <span style="color:#f33b45;"><strong> Object.hasOwnProperty() : 用来检测一个对象是否含有特定的自身属性</strong></span></p> <p>    97.对于JSON的了解？</p> <p>      <span style="color:#f33b45;"><strong>  JSON是一种基于文本的轻量级数据交换格式，它可以被任何的编程语言读取和作为数据格式来传递。</strong></span></p> <p><span style="color:#f33b45;"><strong>        在js中，有两个操作json的方法，JSON.stringify():通过一个符合json格式的数据结构，将其转换为一个json字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>        JSON.parse():将一个符合json格式的字符串转换成一个js数据结构，如果不符合json格式的字符串则会报错。</strong></span></p> <p>    98.JS延迟加载的方式有哪些？</p> <p>   <span style="color:#f33b45;"><strong>     1.放在body标签底部</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.<script>标签中使用defer属性</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.<script>标签中使用async属性</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.动态加载script标签</strong></span></p> <p>    99.Ajax？ 如何创建一个ajax</p> <p>       <span style="color:#f33b45;"><strong> ajax是一种异步通信的方法，通过js向服务器发送http请求，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一个方法</strong></span></p> <pre><code class="language-javascript">        var xhr = new XMLHttpRequest()                          // 1. 创建XMLHttpRequest对象         xhr.open('get/post','url',true)                         // 2. 使用open创建一个http请求，接受三个参数 method，url，是否异步         xhr.onreadstatechange = function(){                     // 3. 监听xhr状态的改变             if(this.readyState !== 4) return;                   // 4. readyState等于4时，代表服务器返回的数据接收完成             if(this.status === 200){                            // 5. status状态码200 请求成功                 console.log('请求成功')             }else{                 console.error(this.statusText)             }         }                xhr.onerror = function(){                               // 6.监听xhr请求失败             console.error(this.statusText)         }         xhr.responseType = 'json';         xhr.setRequestHeader('Accept','application/json');         xhr.send(null)                                          // 7. 发送请求(params)</code></pre> <p>    100.浏览器的缓存机制？</p> <p><span style="color:#f33b45;"><strong>        浏览器的缓存机制指的是通过一段时间内保留已接收到web资源的一个副本，如果在资源的有效时间内，发起了对这个资源的再一次请求，那么浏览器会直接使用缓存的副本，而不是向服务器发送请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        浏览器的缓存类型分为两种：强缓存/协商缓存</strong></span></p> <p><span style="color:#f33b45;"><strong>        强缓存：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.不会向服务器发送请求，直接从缓存中读取资源，在谷歌控制台network选项中，可以看到请求状态码200并且size显示from disk cache或from memory cache </strong></span></p> <p><span style="color:#f33b45;"><strong>        协商缓存：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.向服务器发送请求，服务器会根据这个请求的请求头的一些参数来判断是否为协商缓存，如果是则返回304状态码并带上新的响应头通知浏览器从缓存中读取资源</strong></span></p> <p>    101.ajax解决浏览器缓存问题？</p> <p><span style="color:#f33b45;"><strong>        1. 在ajax发送请求前加上 ：          xhr.setRequestHeader('Cache-Control','no-cache')</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. 在请求地址上加上随机数或时间戳 :  "/server?t="+Math.random() 或 "/server?t="+new Date().getTime()</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. 如果是jquery，直接加上 :         $.ajaxSetup({cache:false})</strong></span></p> <p>    102.如何解决跨域问题？</p> <p><span style="color:#f33b45;"><strong>        1. get请求的话 可以使用 jsonp</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. CORS方式：Access-Control-Allow-Origin:*</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. 使用websocket协议，这个协议没有同源限制</strong></span></p> <p><span style="color:#f33b45;"><strong>        4. 使用服务器来代理跨域的访问请求：就是有跨域的请求操作时发送请求给后端，让后端代为请求再把最后返回的结果返回到前端</strong></span></p> <p>    103.同源策略？</p> <p><span style="color:#f33b45;"><strong>        我对浏览器的同源策略的理解是，一个域下的js脚本在未经允许的情况下，不能够访问另一个域的内容，这里的域指的是两个域的协议/域名/端口必须相同，否则则不属于同一个域。</strong></span></p> <p><span style="color:#f33b45;"><strong>        同源策略只要限制了三个方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.当前域下的js脚本不能够访问其他域下的cookie/localStorage和indexDB</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.当前域下的js脚本不能够操作访问其他域下的DOM</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.当前域下ajax不能够发送跨域请求</strong></span></p> <p><span style="color:#f33b45;"><strong>            同源策略的目的主要是为了保证用户的信息安全，它只是对js脚本的一中限制，并不是对浏览器的限制，对于一般的img或者<script>脚本请求都不会有跨域的限制</strong></span></p> <p>    104.document.write 和 innerHTML的区别？</p> <p><span style="color:#f33b45;"><strong>        document.write：替代整个文档内容，会重写整个页面</strong></span></p> <p><span style="color:#f33b45;"><strong>        innerHTML：替代指定元素的内容，只会重写页面中的部分内容</strong></span></p> <p>    105.js中DOM的操作(增删改查等操作)</p> <p><span style="color:#f33b45;"><strong>        查找节点：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.document.getElementById()</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.document.getElementsByTagName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.document.getElementsByClassName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.document.getElementsByName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.document.querySelector()</strong></span></p> <p><span style="color:#f33b45;"><strong>            6.document.querySelecrotAll()</strong></span></p> <p><span style="color:#f33b45;"><strong>        创建：  createElement(node)      </strong></span></p> <p><span style="color:#f33b45;"><strong>        追加：  appendChild(node)</strong></span></p> <p><span style="color:#f33b45;"><strong>        插入：  insertBefore(oldNode,newNode)</strong></span></p> <p><span style="color:#f33b45;"><strong>        替换：  replaceChild(oldNode,newNode)</strong></span></p> <p><span style="color:#f33b45;"><strong>        移除：  removeChild(node)</strong></span></p> <p><span style="color:#f33b45;"><strong>        克隆：  cloneNode(true)   // true:克隆节点下所有的元素  false:克隆当前节点</strong></span></p> <p><span style="color:#f33b45;"><strong>        属性操作：</strong></span></p> <p><span style="color:#f33b45;"><strong>            getAttribute(key)   setAttribute(key,value)    hasAttribute(key)    removeAttribute(key)</strong></span></p> <p>    106. .call() 和 .apply()的区别？</p> <p> <span style="color:#f33b45;"><strong>       .call()和.apply()的作用是一样的，都是为了改变this指向,第一个参数为this的指向</strong></span></p> <p><span style="color:#f33b45;"><strong>        .call(): 传入的参数不确定，从第二个参数开始每个参数被依次传入函数中</strong></span></p> <p><span style="color:#f33b45;"><strong>        .apply(): 传入两个参数，第二个参数为一个数组</strong></span></p> <p>    107.js中数组，对象，字符串的常用方法？</p> <p><span style="color:#f33b45;"><strong>        数组：</strong></span></p> <p><span style="color:#f33b45;"><strong>            forEach()   遍历</strong></span></p> <p><span style="color:#f33b45;"><strong>            map()       遍历，返回一个新更改的数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            filter()    遍历，过滤返回一个条件满足的数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            every()     判断，数组元素是否全部都满足一个条件</strong></span></p> <p><span style="color:#f33b45;"><strong>            some()      判断，数组元素是否有一个满足条件</strong></span></p> <p><span style="color:#f33b45;"><strong>            find()      查找元素，找到元素则直接返回，不在进行遍历查询</strong></span></p> <p><span style="color:#f33b45;"><strong>            findIndex() 功能同上，不同点在于查找元素索引</strong></span></p> <p><span style="color:#f33b45;"><strong>            push()      在数组后面新加一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            unshift()   在数组前面新加一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            shift()     删除数组中第一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            pop()       删除数组中最后一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            concat()    拼接数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            reverse()   数组反转</strong></span></p> <p><span style="color:#f33b45;"><strong>            sort()      排序</strong></span></p> <p><span style="color:#f33b45;"><strong>            join()      参数作为分隔符，将数组转化为字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>            slice()     截取数组（开始的位置，结束的位置）index从0开始</strong></span></p> <p><span style="color:#f33b45;"><strong>            splice(下标，要删除的个数，插入或则是替换的值)</strong></span></p> <p><span style="color:#f33b45;"><strong>            reduce()    求和</strong></span></p> <p><span style="color:#f33b45;"><strong>        对象：</strong></span></p> <p><span style="color:#f33b45;"><strong>            hasOwnProperty()    检测对象是否含有某个属性</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.keys()       将对象中的属性名存在一个数组中返回</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.values()     将对象中的属性值存在一个数组中返回</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.is()         判断两个值是否相等</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.assign()     对象的合并（浅拷贝）</strong></span></p> <p><span style="color:#f33b45;"><strong>        字符串：</strong></span></p> <p><span style="color:#f33b45;"><strong>            replace()           替换字符串(‘要替换的字符串’，‘替换后的字符串’)</strong></span></p> <p><span style="color:#f33b45;"><strong>            trim()              清楚两端空格</strong></span></p> <p><span style="color:#f33b45;"><strong>            substr()            字符串截取（开始的位置，结束的位置）index从0开始</strong></span></p> <p><span style="color:#f33b45;"><strong>            split()             字符串转数组，将参数中的值进行匹配截断成为一个数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            includes()          字符串中是否包含某些字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>            startsWith()        字符串是否以某些字符串开头</strong></span></p> <p><span style="color:#f33b45;"><strong>            endsWith()          字符串是否以某些字符串结尾</strong></span></p> <p><span style="color:#f33b45;"><strong>            padStart()          满足条件时在字符串前面填充字符串 (字符串长度不足多少个时，要填充的字符串)</strong></span></p> <p><span style="color:#f33b45;"><strong>            padEnd()            满足条件时在字符串后面填充字符串 (字符串长度不足多少个时，要填充的字符串)</strong></span></p> <p><span style="color:#f33b45;"><strong>            repeat()            重复字符串（重复的次数）</strong></span></p> <p><span style="color:#f33b45;"><strong>        数组和字符串共有的方法： indexOf()和lastIndexOf()     </strong></span></p> <p>    108.JavaScript中的作用域和变量声明提升？</p> <p>      <span style="color:#f33b45;"><strong>  作用域分为局部作用域和全局作用域，函数内声明的变量称为局部作用域，不可被函数外所访问；函数外声明的变量称为全局作用域，可以在任何地方使用。</strong></span></p> <p><span style="color:#f33b45;"><strong>        变量声明提升就涉及到一个预解析的概念，也就是说函数的声明、变量的声明会提升到使用之前，只提升声明，不提升赋值。</strong></span></p> <p>    109.如何编写高性能的JavaScript</p> <p></p> <p>    110.哪些操作会造成内存泄漏？</p> <p><span style="color:#f33b45;"><strong>        1.由于使用未声明的变量（隐士全局变量），而意外的创建了全局变量，而使这个变量一直留在内存中无法被回收</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.设置了setInterval()定时器，而没有清除掉这个定时器</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.获取一个DOM元素的引用，而后这个元素删除了，由于我们一直保留了这个元素的引用，那么它也不会被回收</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.不合理的闭包，从而导致某些变量一直存在于内存中</strong></span></p> <p>    111.需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。（SPA）</p> <p><span style="color:#f33b45;"><strong>        第一种方式：通过location.hash，设置hash可以操作浏览器的前进和后退</strong></span></p> <p><span style="color:#f33b45;"><strong>        第二种方式：通过H5的pushState API,通过pushState把记录保存到浏览器的历史记录中，然后通过window.onpopstate事件来响应浏览器的前进和后退，</strong></span></p> <p><span style="color:#f33b45;"><strong>        这种方式有两个问题：一个是打开首页时没有记录，可以通过replaceState来将首页记录替换；另一个问题是当页面刷新的时候，请求的url需要后端配合将其重定向到一个页面中</strong></span></p> <p>    112.如何判断当前脚本运行在浏览器端还是node端</p> <p>   <span style="color:#f33b45;"><strong>     this === 'window' ? 'browser' : 'node'</strong></span></p> <p>    113.移动端的点击事件有延迟，是多久？为什么会出现？怎么解决？</p> <p><span style="color:#f33b45;"><strong>        移动端的点击事件有300ms的延迟，是因为移动端有双击缩放的这个操作，因此浏览器在click事件后要等待300ms，来判断用户是不是双击。</strong></span></p> <p><span style="color:#f33b45;"><strong>        解决方式：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过meta标签禁止网页的缩放</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过调用现成的第三方库 比如 FastClick</strong></span></p> <p>    114.前端路由？ 优缺点？</p> <p><span style="color:#f33b45;"><strong>        前端路由是指把不同的路由对应不同的页面的任务交给前端来做，一般在单页面应用会使用前端路由。</strong></span></p> <p><span style="color:#f33b45;"><strong>        优点：无刷新、用户体验好，不需要每次都从服务器全部获取，快速展现给用户</strong></span></p> <p><span style="color:#f33b45;"><strong>        缺点：单页面无法记住之前滚动的位置，无法在前进后退的时候回到上一次的位置</strong></span></p> <p>    115.检测浏览器版本的方式？</p> <p><span style="color:#f33b45;"><strong>        1.通过 window.navigator.userAgent</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.通过各个浏览器中的特征来判断，比如IE浏览器有window.ActiveXObjcet函数，谷歌浏览器中有window.chrome对象等</strong></span></p> <p>    116.使用js实现获取文件扩展名？</p> <pre><code class="language-javascript">        function getFileExtension(filename) {             return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);         }</code></pre> <p>    117.防抖 节流？</p> <p>    <span style="color:#f33b45;"><strong>    防抖：在事件被触发n秒后在执行回调，如果在这n秒内事件又被触发，则重新计时</strong></span></p> <pre><code class="language-javascript">            function debounce(fn,delay){                 var timer = null;                 return function(){                     var that = this,                         arg = arguments;                     if(timer){                         window.clearTimeOut(timer);                         timer = null;                     }                     timer = window.setTimeOut(()=>{                         fn.apply(that,arg);                     },delay)                 }             }</code></pre> <p>        <span style="color:#f33b45;"><strong>节流：规定一个时间，在这个时间内，只能有一次触发事件回调函数的执行，如果在同一个时间内某事件被触发多次，只能有一次生效</strong></span></p> <pre><code class="language-javascript">            function throttle(fn,delay){                 var preTime = Date.now();                 return function(){                     var nowTime = Date.now();                     var that = this,                         arg = arguments;                 // 如果两次时间间隔超过了指定时间，则执行函数                     if(nowTime-preTime >= delay){                         preTime = Date.now();                         return fn.apply(that,arg)                     }                 }             }</code></pre> <p>    118.Object.is() 和 == 和 === 操作符的区别？</p> <p><span style="color:#f33b45;"><strong>        使用双等号判断是否相等时，如果两边的类型不一致，则会进行强制类型转换后在进行比较，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用三等号判断是否相等时，如果两边的类型不一致，不会做强制类型转换，直接返回false，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用Object.is()判断时，一般情况下和使用三等号判断一致，只是新加了一些特殊处理，比如：+0和-0为false，NaN和NaN为true</strong></span></p> <p>    119.Unicode和UTF-8的关系？</p> <p><span style="color:#f33b45;"><strong>        Unicode是一个字符集合，每一个字符对应不同的Unicode编码，它只规定了符号的二进制代码，却没有规定这个二进制代码在计算机中如何传输</strong></span></p> <p><span style="color:#f33b45;"><strong>        UTF-8是一种Unicode的编码格式，可以用1~4个字节表示一个字符</strong></span></p> <p>    120.js事件循环是什么？</p> <p><span style="color:#f33b45;"><strong>        因为JS是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        在执行同步代码的时候，如果遇到了异步事件，js引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈的其他任务。</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个异步事件返回结果后，js会将这个事件加入到与当前执行栈不同的另一个队列，我们称之为任务队列。</strong></span></p> <p><span style="color:#f33b45;"><strong>        被放入事件队列不会立即执行，而是等待当前执行栈中所有的任务都执行完毕，主线程属于闲置状态时，才会去找任务队列是否有任务。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行同步代码。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如此反复，就会形成一个循环，我们称之为事件循环。  </strong></span></p> <p><span style="color:#f33b45;"><strong>        任务队列(异步任务)可以分为宏任务和微任务，同一次事件循环中，微任务永远在宏任务之前执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        比如：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.微任务：new Promise().then() then函数的处理就是一个微任务   new Promise()是同步任务</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.宏任务：setInterval()    setTimeout()</strong></span></p> <p>    121.js中深浅拷贝的实现？</p> <p><span style="color:#f33b45;"><strong>        浅拷贝：</strong></span></p> <pre><code class="language-javascript">           1. function shallowCopy(object){                 // 只拷贝对象                 if(!object || typeof object !== 'object') return;                 // 根据 object 的类型判断是新建一个数组还是对象                 var newObject = Array.isArray(object) ? [] : {};                 for(var key in object){                     if(object.hasOwnProperty(key)){                         newObject[key] = object[key];                     }                 }                 return newObject;             }           2. Object.assign()             function shallowCopy(object){                 return Object.assign({},object);             }</code></pre> <p><span style="color:#f33b45;"><strong>    深拷贝：</strong></span></p> <pre><code class="language-javascript">            function deepCopy(object){                 if(!object || typeof object !== 'object') return ;                 var new Object = Array.isArray(object) ? [] : {};                 for(var key in objcet){                     if(object.hasOwnProperty(key)){                         newObject[key] = typeof object[key] === 'object' ? deepCopy(object[key]) : object[key];                     }                 }                 return newObject;             }</code></pre> <p>    122.手写call、apply及bind函数？</p> <pre><code class="language-javascript">        call: Function.prototype.myCall = function(context){                 if(typeof this != 'function'){                     throw new TypeError('type error')                 }                 let arg = [...arguments].slice(1),                     result = null;                 context = context || window;                 context.fn = this;                 result = context.fn(...arg)                 delete context.fn                 return result               }           apply: Function.prototype.myApply = function(context){                   if(typeof this !== 'function'){                     throw new TypeError('type error')                   }                     let result = null                   context = context || window                   context.fn = this                   if(arguments[1]){                       result = context.fn(...arguments[1])                   }else{                       result = context.fn()                   }                   delete context.fn                   return result                }         bind: Function.prototype.myBind = function(context){                 if(typeof this !== 'function'){                     throw new TypeError('error')                 }                 let arg = [...arguments].slice(1),                     fn = this;                 return function Fn(){                     return fn.apply(                         this instanceof Fn ? this : context,                         arg.concat(...arguments)                     )                 }               } </code></pre> <p>    123.函数柯里化的实现？       编写一个sum函数，实现如下功能： console.log(sum(1)(2)(3))      // 6</p> <p>       <span style="color:#f33b45;"><strong> 函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术</strong></span></p> <pre><code class="language-javascript">        function curry(fn, ...args) {             return fn.length > args.length ? (...args2) => curry(fn, ...args, ...args2) : fn(...args)         }         function fn(a, b, c) {             console.log(a + b + c )         }         sum = curry(fn)         sum(1)(2)(3) // 6    </code></pre> <p></p> <p>    124. toPrecision和toFixed和Math.round的区别？</p> <p><span style="color:#f33b45;"><strong>        163.65.toPrecision(4)       =>  163.7</strong></span></p> <p><span style="color:#f33b45;"><strong>        163.65.toFixed(2)           =>  163.7</strong></span></p> <p><span style="color:#f33b45;"><strong>        Math.round(163.65)          =>  164</strong></span></p> <p><span style="color:#f33b45;"><strong>        toPrecision() 用于处理精度，四舍五入，从左至右第一个不为0的数开始计算 </strong></span></p> <p><span style="color:#f33b45;"><strong>        toFixed()   小数点后指定位数取整，从小数点开始计起（四舍五入）</strong></span></p> <p><span style="color:#f33b45;"><strong>        Math.round() 四舍五入取整</strong></span></p> <p>    125.什么是xss攻击？如何防范</p> <p><span style="color:#f33b45;"><strong>        xss攻击指的是跨站脚本攻击，是一种代码注入攻击。XSS的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合，导致浏览器没有办法辨别哪些脚本是可信的，从而导致了恶意代码的执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        xss一般分为存储型、反射型、DOM型。</strong></span></p> <p><span style="color:#f33b45;"><strong>        存储型：恶意代码提交到了网站的数据库中，当用户请求数据的时候，服务器将其拼接为HTML后返回给了用户，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        反射型：攻击者构建了特殊的URL，当服务器接收到请求后，从URL中读取数据，拼接到HTML后返回，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        DOM型：攻击者构建了特殊的URL，用户打开网站后，js脚本从url中获取数据，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        XSS攻击的防范可以从两个方面入手，一个是恶意代码提交的时候，一个是浏览器执行恶意代码的时候。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于第一个方面，由于我们没有办法判断数据最后的使用场景，所以直接在输入端进行恶意代码的处理其实是不可靠的。</strong></span></p> <p><span style="color:#f33b45;"><strong>        因此我们可以从浏览器的执行来进行防御：一种是使用纯前端的方式，不用服务器拼接后返回。另一种是对需要插入到HTML中的代码做好充分的转义。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于DOM型的攻击，主要是前端脚本的不可靠造成的，我们对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。</strong></span></p> <p><span style="color:#f33b45;"><strong>        还有一些方式，比如CSP(告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击)。</strong></span></p> <p><span style="color:#f33b45;"><strong>        还可以对一些敏感信息进行保护，比如cookie使用http-only，使得脚本无法获取。</strong></span></p> <p><span style="color:#f33b45;"><strong>        也可以使用验证码，避免脚本伪装成用户执行一些操作。</strong></span></p> <p>    126.什么是CSP？</p> <p>     <span style="color:#f33b45;"><strong>   CSP指的是内容安全策略，它的本质是建立一个白名单，告知浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自身实现。</strong></span></p> <p><span style="color:#f33b45;"><strong>        通常有两种方式来开启CSP，一种是设置HTTP响应头信息Content-Security-Policy,另一种是通过meta标签<meta http-equiv="Content-Security-Policy" content="（配置规则）"></strong></span></p> <p>    127.什么是CSRF攻击？如何防范</p> <p>      <span style="color:#f33b45;"><strong>  CSRF：指的是跨站请求伪造攻击，攻击者诱导用户进入第三方网站，然后该网站向被攻击网站发送跨站请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        CSRF攻击的本质是利用了cookie会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一般的CSRF攻击类型有三种：</strong></span></p> <p><span style="color:#f33b45;"><strong>        1.GET类型的攻击：比如在网站中的一个img标签里构建一个请求，当用户打开网站时就会自动发起提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.POST类型的攻击：比如说构建一个隐藏表单，当用户进入时自动提交这个表单</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.链接类型的攻击：比如在a标签的href属性里构建一个请求，然后诱导用户去点击。</strong></span></p> <p><span style="color:#f33b45;"><strong>        防范的方式：在设置cookie属性的时候设置Samesite,限制cookie不能作为第三方使用，从而可以避免被攻击者使用。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Samesite一共有两种模式，一种是严格模式，在严格模式下cookie在任何情况下都不能被第三方cookie使用；</strong></span></p> <p><span style="color:#f33b45;"><strong>        在宽松模式下，cookie可以被会发生页面跳转的get请求使用。</strong></span></p> <p>    128.什么是MVVM？比之MVC有什么区别？</p> <p>       <span style="color:#f33b45;"><strong> MVVM,MVC都是常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。</strong></span></p> <p><span style="color:#f33b45;"><strong>        MVC通过分离Model、View、Controller的方式来组织代码结构。其中View负责页面的显示逻辑，Model负责存储页面的业务数据以及对相应数据的操作；</strong></span></p> <p><span style="color:#f33b45;"><strong>        并且View和Model应用了观察者模式，当Model层发生改变的时候会通知有关的View层更新界面；Controller是Model层和View层的纽带，它主要负责用户与应用的响应操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        MVVM中的VM指的是ViewModel通过双向的数据绑定将View层和Model层自动化同步更新。当 Model 发生变化的时候，ViewModel就会自动更新；ViewModel变化了，View也会更新。</strong></span></p> <p>    129.vue双向数据绑定原理？</p> <p>       <span style="color:#f33b45;"><strong> vue采用数据劫持结合发布者-订阅者模式的方式实现双向数据绑定，通过Object.defineProperty()来劫持各个属性的getter、setter，</strong></span></p> <p><span style="color:#f33b45;"><strong>        在数据变动时发布消息给订阅者，触发相应的监听回调，重新渲染视图。</strong></span></p> <p></p> <p>    130.介绍一下Object.defineProperty()</p> <p>      <span style="color:#f33b45;"><strong>  Object.defineProperty() 作用：创建一个对象，该方法接收三个参数，第一个参数为对象名称，第二个参数为对象中的属性名称，第三个参数是该属性的描述符。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一个属性的描述符有四个属性，分别是 value(属性的值)  writable(是否可重写)   enumerable(是否可枚举/遍历)   configurable(是否可配置)</strong></span></p> <p><span style="color:#f33b45;"><strong>        还有get和set存取描述符，在给对象设置get和set时，就不能设置属性值value和可读性writable，两者不能共存</strong></span></p> <p><span style="color:#f33b45;"><strong>        通过 Object.defineProperty添加的属性默认是不可修改、不可枚举、不可写的</strong></span></p> <p>    131.使用Object.defineProperty()进行数据劫持有什么缺点？</p> <p>      <span style="color:#f33b45;"><strong>  Object.defineProperty()本身有一定的监控数组下标变化的能力，但是在Vue中，从性能、体验的性价比考虑，尤大大放弃了这个特性。</strong></span></p> <p><span style="color:#f33b45;"><strong>        而是内部更改了原Array的方法 push(),shift(),pop(),unshift()等，通过Vue.$set()的方式改变数组对象。</strong></span></p> <p>    132.什么是Virtual DOM？为什么Virtual DOM比原生DOM快？</p> <p><span style="color:#f33b45;"><strong>        从我的理解来看，Virtual DOM是指生成Virtual DOM树，对比两棵树的差异，更新视图。</strong></span></p> <p><span style="color:#f33b45;"><strong>        其中生成虚拟DOM树围绕着三个部分，分别是：节点类型、节点属性、子节点。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对比两棵树的差异首先需要对树进行遍历，这样每个节点都有一个唯一的标记，通过这个标记和新的树的同一位置的节点进行对比，有差异则保存到一个对象中，</strong></span></p> <p><span style="color:#f33b45;"><strong>        常见的差异有四种，分别是：替换节点、增删节点、修改节点属性、更改文本内容。</strong></span></p> <p><span style="color:#f33b45;"><strong>        更新视图分别对应四种方法：replaceChild() appendChild() removeChild() setAttribute() removeAttribute() textContent/innerText</strong></span></p> <p><span style="color:#f33b45;"><strong>        我认为Virtual DOM这种方法对于我们需要大量的DOM操作的时候，能够很好的提高我们的操作效率，通过在操作前确定需要做的最小修改，尽可能的减少DOM操作带来的重绘和回流的影响。</strong></span></p> <p><span style="color:#f33b45;"><strong>        其实Virtual DOM并不一定比我们真实操作DOM要快，这种方法的目的是为了提高我们开发时的维护性，在任意情况下，都能保证一个尽量小的性能消耗去进行操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新，这一点是原生DOM远远无法替代的。</strong></span></p> <p>    133.说说webpack？</p> <p><span style="color:#f33b45;"><strong>        webpack的核心是一个用于现代JavaScript应用程序的静态模块绑定器。当webpack处理应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个包。</strong></span></p> <p><span style="color:#f33b45;"><strong>        webPack有四个主要的核心概念（Entry、Output、Loader、Plugins）入口、出口、加载器、插件</strong></span></p> <p><span style="color:#f33b45;"><strong>        Entry：是webpack的入口起点，它指示webpack应该从哪个模块开始着手，来构建内部依赖图的开始。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Output：打包文件的目录名称，告诉webpack在哪里输出它所创建的打包文件 默认位置为./dist</strong></span></p> <p><span style="color:#f33b45;"><strong>        Loader:可以理解为webpack的加载编译器，它使得webpack可以处理一些非JavaScript的文件。在对loader进行配置的时候，</strong></span></p> <p><span style="color:#f33b45;"><strong>            test属性标志着有哪些后缀的文件应该被处理，是一个正则表达式；use属性指定test类型的文件应该用哪个loader进行预处理</strong></span></p> <p><span style="color:#f33b45;"><strong>            常用的loader有 style-loader   css-loader等</strong></span></p> <p><span style="color:#f33b45;"><strong>        Plugins:用于执行范围更广的任务，包括打包、优化、压缩、搭建服务器等等，要使用一个插件，一般是先使用npm包管理器进行安装，然后在配置中引入，</strong></span></p> <p><span style="color:#f33b45;"><strong>            最后将其实例化后传递给plugins数组属性中。常用的plugins有  htmlWebpackPlugin（生成HTML） 、 uglifyjsWebpackPlugin（删除注释压缩） 等等</strong></span></p> <p>    134.clientWidth/Height 和 offsetWidth/Height 和 scrollWidth/Height 的区别？</p> <p><span style="color:#f33b45;"><strong>        clientWidth/Height:返回的是元素内部的宽度/高度，它只包含content+padding，不包含滚动条的宽高。</strong></span></p> <p><span style="color:#f33b45;"><strong>        clientLeft/Top : 返回的是左边框/上边框的宽度。</strong></span></p> <p><span style="color:#f33b45;"><strong>        offsetWidth/Height:返回的是元素的布局宽度/高度，它包含content+padding+border，包含了滚动条的宽高。</strong></span></p> <p><span style="color:#f33b45;"><strong>        offsetLeft/Top : 返回的是当前元素相对于其offsetParent元素 左侧/顶部 的距离。</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollWidth/Height: 返回值包含content+padding+溢出内容的尺寸。</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollTop : 返回的是一个元素的内容垂直滚动的距离</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollLeft : 返回的是元素滚动条到元素左边的距离</strong></span></p> <p>    135.异步编程的实现方式？</p> <p></p> <p>    136.js和css的动画有啥区别？分别实现方式？</p> <p><span style="color:#f33b45;"><strong>        css动画的优点：在性能上会稍微好一些，浏览器会对css3的动画做一些优化，代码也相对简单；缺点就是在动画控制上不够灵活，兼容性不好。</strong></span></p> <p><span style="color:#f33b45;"><strong>        js动画正好弥补了这两个缺点，控制能力强，可以单帧的控制，变换，同时还可以兼容，并且功能强大。对于一些复杂的动画，使用js会比较靠谱，</strong></span></p> <p><span style="color:#f33b45;"><strong>        而实现一些小的交互动效的时候就用css好。</strong></span></p> <p><span style="color:#f33b45;"><strong>        css：</strong></span></p> <p><span style="color:#f33b45;"><strong>            @keyframes 动画名称{</strong></span></p> <p><span style="color:#f33b45;"><strong>                from / 0% {}</strong></span></p> <p><span style="color:#f33b45;"><strong>                to / 100% {}</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>            animation: 动画名称 动画所需时间  动画速度曲线  延迟时间  播放的次数  是否轮流反向播放</strong></span></p> <p><span style="color:#f33b45;"><strong>        js:</strong></span></p> <p><span style="color:#f33b45;"><strong>            1. 利用setTimeout 定时器的方式实现</strong></span></p> <p><span style="color:#f33b45;"><strong>            2. 利用setInterval 定时器的方式实现</strong></span></p> <p><span style="color:#f33b45;"><strong>            3. 利用requestAnimationFrame() 方法实现，将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。性能上比上两种方式要好</strong></span></p> <p><span style="color:#f33b45;"><strong>            4. 利用 canvas 画布实现</strong></span></p> <p>    137.get和post请求在缓存方面的区别？</p> <p><span style="color:#f33b45;"><strong>        缓存一般只适用于不会修改服务器数据的请求，一般get请求都是查找请求，不会对服务器资源数据造成修改，而post请求一般都会对服务器数据进行修改，</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以，一般会对get请求进行缓存，很少会对post请求进行缓存。</strong></span></p> <p>    138.图片懒加载和预加载？</p> <p><span style="color:#f33b45;"><strong>        懒加载：也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户去访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户体验，并且减少服务器压力；</strong></span></p> <p><span style="color:#f33b45;"><strong>            它适用于图片很多，页面很长的一些网站场景；懒加载的实现原理是将img标签中的src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，</strong></span></p> <p><span style="color:#f33b45;"><strong>            进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值到src属性中，以此来实现图片懒加载。</strong></span></p> <p><span style="color:#f33b45;"><strong>        预加载：指的是将所需要的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存中取资源。通过预加载能够减少用户的等待时间，提高用户体验。</strong></span></p> <p><span style="color:#f33b45;"><strong>            我了解到的预加载最常见的方式是通过js中的image对象，通过为image对象设置src属性，来实现图片的预加载。</strong></span></p> <p><span style="color:#f33b45;"><strong>        这两种方式都是提高网页性能的方式，两者主要的区别在于一个是提前加载，一个是延迟加载甚至不加载。懒加载对服务器有一定的缓解压力的作用，预加载则会加重服务器前端压力</strong></span></p> <p>    139.mouseover和mouseenter的区别？</p> <p>     <span style="color:#f33b45;"><strong>   当鼠标移动到元素中就会触发mouseenter事件，类似mouseover，他们之间的区别在于mouseenter不会冒泡，也就是说只执行一次，而mouseover则会触发多次事件回调。</strong></span></p> <p>    140.js拖拽功能的实现？  </p> <p><span style="color:#f33b45;"><strong>        一个元素的拖拽过程，可以分为三个步骤：第一步是鼠标按下目标元素，第二部是鼠标保持按下的状态移动鼠标，第三步是鼠标抬起，拖拽过程结束。</strong></span></p> <p><span style="color:#f33b45;"><strong>        这三个步骤分别对应3个事件，mousedown,mousemove,mouseup,只有在鼠标按下的状态鼠标移动我们才会执行拖拽事件，因此我们需要在mousedown事件中</strong></span></p> <p><span style="color:#f33b45;"><strong>        设置一个状态来标识鼠标已经按下，然后在mouseup事件中取消这个状态。在mousedown事件中我们首先要判断，目标元素是不是为拖拽元素，如果是拖拽元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>        我们就设置状态保存这个时候鼠标的位置，然后在mousemove事件中，我们通过鼠标现在的位置和以前的位置的相对移动，来确定拖拽元素在移动中的坐标，</strong></span></p> <p><span style="color:#f33b45;"><strong>        最后mouseup事件触发后，清除状态，结束拖拽事件。</strong></span></p> <pre><code class="language-html">        #drag {             position: absolute;             width: 200px;             height: 200px;             background-color: green;             left: 100px;             top: 100px;             cursor: move;         }         <div id="drag">*******</div>         <script>             var drag = document.getElementById('drag')             drag.onmousedown = function (e) {                 var event = e || window.event,                     dragX = e.clientX - drag.offsetLeft,    //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离                     dragY = e.clientY - drag.offsetTop;                 if (drag.setCapture) {                     drag.setCapture()                 }                 document.onmousemove = function (e) {                     var event = e || window.event;                     var left = e.clientX - dragX,                         top = e.clientY - dragY;                     if (left < 0) {                         left = 0                     } else if (left > window.innerWidth - drag.offsetWidth) {                         left = window.innerWidth - drag.offsetWidth                     }                     if (top < 0) {                         top = 0                     } else if (top > window.innerHeight - drag.offsetHeight) {                         top = window.innerHeight - drag.offsetHeight                     }                     drag.style.left = left + 'px'                     drag.style.top = top + 'px'                 }                 document.onmouseup = function (e) {                     this.onmousedown = null                     this.onmousemove = null                     if (drag.releaseCapture) {                         drag.releaseCapture()                     }                 }             }         </script></code></pre> <p>    141.let和const的注意点？</p> <p><span style="color:#f33b45;"><strong>        let: 1.不存在变量声明提升</strong></span></p> <p><span style="color:#f33b45;"><strong>             2.存在暂时性死区（只要块级作用域内存在let命令，它所声明的变量就绑定了这个区域，不再受外界影响）</strong></span></p> <p><span style="color:#f33b45;"><strong>             3.不允许重复声明</strong></span></p> <p><span style="color:#f33b45;"><strong>        const: 1.声明常量必须赋值，否则报错</strong></span></p> <p><span style="color:#f33b45;"><strong>               2.也存在暂时性死区（只能在声明的位置后面使用。）</strong></span></p> <p><span style="color:#f33b45;"><strong>               3.不允许重复声明，不存在声明提升</strong></span></p> <p><span style="color:#f33b45;"><strong>               4.常量不允许被修改，（只针对于基本数据类型，引用数据类型除外）</strong></span></p> <p>    142.Set和WeakSet？</p> <p><span style="color:#f33b45;"><strong>        ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值，(一般用来做数组去重)。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakSet和Set类似，也是不重复值得集合，但是WeakSet的成员只能是对象，不能是其他类型的值。WeakSet不能遍历</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakSet的对象都是弱引用，因此适合临时存放一组对象以及存放跟对象绑定的信息，只要这些对象在外部消失，它在WeakSet的引用也会消失。</strong></span></p> <p>    143.Map和WeakMap？</p> <p><span style="color:#f33b45;"><strong>        Map数据结构类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakMap类似于Map，也是键值对的集合，但是键只能是对象（null除外），不接受其他类型的值作为键名。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。</strong></span></p> <p>    144.什么是Proxy？</p> <p><span style="color:#f33b45;"><strong>        Proxy用来修改某些操作的默认行为，等同于在语言层面上进行修改，所以属于一种“元编程”，即对编程语言进行编程。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Proxy可以理解成，在目标对象之前架设一层拦截，外界对这个对象的访问都必须先通过这层拦截，因此提供了一层机制，</strong></span></p> <p><span style="color:#f33b45;"><strong>        可以对外界的访问进行过滤和改写。</strong></span></p> <p>    145.什么是Promise对象？ 什么是Promise/A+规范 ？</p> <p><span style="color:#f33b45;"><strong>        Promise对象是异步编程的一种解决方案；Promise/A+规范是javascript Promise的标准，规定了一个Promise所必须具有的特性。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Promise是一个构造函数，接收一个函数作为参数，返回一个Promise实例。一个Promise实例有三种状态，分别是：pending、resolved、rejected，</strong></span></p> <p><span style="color:#f33b45;"><strong>        分别代表了进行中、已成功、已失败。实例的状态只能由pending转变为resolved或者rejected状态，并且状态一经改变，就无法在被更改了。</strong></span></p> <p><span style="color:#f33b45;"><strong>        状态的改变是由resolve()和reject()函数来实现的。我们可以在异步操作结束后调用这两个函数改变Promise实例的状态，它的原型上定义了一个then方法，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用这个then方法可以为两个状态的改变注册回调函数，这个回调函数属于微任务，会在本轮事件循环的末尾进行。</strong></span></p> <p>    146.手写一个Promise</p> <p></p> <p>    147.怎么做JS代码的error统计？</p> <p>       <span style="color:#f33b45;"><strong> 通过window.onerror事件进行统计，需要放在所有js脚本前执行</strong></span></p> <p>    148.Vue的生命周期是什么？ 有哪些阶段？</p> <p><span style="color:#f33b45;"><strong>        Vue的生命周期指的是组件从创建到销毁的一系列过程，称之为Vue生命周期。有8个阶段（创建前，创建后，加载前，加载后，更新前，更新后，销毁前，销毁后）</strong></span></p> <p><span style="color:#f33b45;"><strong>        每个阶段都对应了一个生命周期的钩子函数。</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeCreate    组件创建前</strong></span></p> <p><span style="color:#f33b45;"><strong>        created         组件已创建（此时已经可以拿到data中的数据了）</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeMount     虚拟DOM渲染前</strong></span></p> <p><span style="color:#f33b45;"><strong>        mounted         虚拟DOM已渲染</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeUpdate    数据更新时调用（适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器）   </strong></span></p> <p><span style="color:#f33b45;"><strong>        updated         数据更改导致DOM重新渲染后调用（一般不在这里做什么操作而是用watch或computed）</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeDestroy   实例销毁前（一般会在这里销毁定时器，解绑全局事件）</strong></span></p> <p><span style="color:#f33b45;"><strong>        destroyed       实例销毁后，Vue实例中所有的东西都会被移除</strong></span></p> <p><span style="color:#f33b45;"><strong>        处于 keep-alive 缓存的组件还有两个生命周期并且不会被销毁而是执行了这两个生命周期，activated和deactivated，分别代表 缓存的组件被激活、缓存的组件被停用</strong></span></p> <p>    149.Vue组件间的传递方式？</p> <p><span style="color:#f33b45;"><strong>        父子组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.子组件通过props属性来接收父组件的数据；然后父组件在子组件上注册监听事件，子组件通过$emit触发事件来向父组件发送数据</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过ref属性给子组件设置一个名字，父组件通过$refs组件名来获得子组件；子组件可以通过$parent来获得父组件</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.使用provider/inject，在父组件中通过provider提供变量，在子组件中通过inject来将变量注入到组件中。无论子组件有多深，只要调用了inject就可以注入provider中的数据</strong></span></p> <p><span style="color:#f33b45;"><strong>        兄弟组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过EventBus的方式，本质就是创建一个空的Vue实例来作为消息传递的对象，通过在这个实例上监听$on和触发$emit事件，来实现消息的传递</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过$parent.$refs来获取兄弟组件进行通信</strong></span></p> <p><span style="color:#f33b45;"><strong>        任意组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            业务不复杂的情况下也可以使用EventBus的方式，不然就用Vuex</strong></span></p> <p>    150.computed和watch的差异？</p> <p><span style="color:#f33b45;"><strong>        1.computed是计算一个新的属性，并将该属性挂载到Vue实例上；而watch是监听已经存在并挂载到Vue实例上的数据，所以用watch同样可以监听computed计算属性的变化</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.computed本质是一个惰性的观察者，具有缓存性，只有当依赖发生变化后，第一次访问computed属性才会计算新的值；而watch则是当数据发生变化便会调用执行函数，methods也是</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.从使用场景上说，computed适用于一个数据被多个数据影响，watch适用于一个数据影响多个数据</strong></span></p> <p>    151.vue-router中导航钩子函数（导航守卫）</p> <p><span style="color:#f33b45;"><strong>        全局守卫：beforeEach 和 afterEach</strong></span></p> <p><span style="color:#f33b45;"><strong>            beforeEach((to,from,next)=>{})前置守卫： 接收三个参数，to：要进入的路由对象，from：要离开的路由对象，next是一个必须要执行的函数，</strong></span></p> <p><span style="color:#f33b45;"><strong>            该函数（next）如果不传参数，那就执行下一个钩子函数，如果传入false，则终止跳转，如果传入一个路径，则导航到对应的路由，如果传入error，则导航终止，error传入错误的监听函数。</strong></span></p> <p><span style="color:#f33b45;"><strong>            afterEach((to,from)=>{}) 后置守卫： 和前置守卫不同的就是不用传入next</strong></span></p> <p><span style="color:#f33b45;"><strong>        路由独享守卫：beforeEnter</strong></span></p> <p><span style="color:#f33b45;"><strong>            路由配置上进行定义，和beforeEach的方法参数是一样的</strong></span></p> <p><span style="color:#f33b45;"><strong>        组件内守卫：beforeRouteEnter    beforeRouteUpdate   beforeRouteLeave</strong></span></p> <p><span style="color:#f33b45;"><strong>            组件内进行定义，和beforeEach的方法参数是一样的</strong></span></p> <p>    152. $route 和 $router 的区别？</p> <p><span style="color:#f33b45;"><strong>        $route:是路由信息对象，包括path、params、query、hash、name等路由信息参数，</strong></span></p> <p><span style="color:#f33b45;"><strong>        $router:是路由实例对象包括了路由的跳转方法，钩子函数等（push() replace() go() back() ...）</strong></span></p> <p>    153.Vue常用的修饰符？</p> <p><span style="color:#f33b45;"><strong>        事件修饰符：</strong></span></p> <p><span style="color:#f33b45;"><strong>            .stop           阻止冒泡</strong></span></p> <p><span style="color:#f33b45;"><strong>            .prevent        取消默认事件</strong></span></p> <p><span style="color:#f33b45;"><strong>            .capture        使用事件捕获机制</strong></span></p> <p><span style="color:#f33b45;"><strong>            .once           只执行一次</strong></span></p> <p><span style="color:#f33b45;"><strong>            .self           操作当前元素才执行</strong></span></p> <p><span style="color:#f33b45;"><strong>            .native         监听组件根元素事件</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-model修饰符：</strong></span></p> <p><span style="color:#f33b45;"><strong>            .trim           清空两端空字符</strong></span></p> <p><span style="color:#f33b45;"><strong>            .number         转换成数字类型</strong></span></p> <p><span style="color:#f33b45;"><strong>            .lazy           延迟更新，让数据失去焦点时更新</strong></span></p> <p>    154.Vue中key的作用？</p> <p><span style="color:#f33b45;"><strong>        key的作用可以分为两种情况，第一种是v-if中使用key，第二种是v-for中使用key</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-if:由于Vue会尽可能高效的渲染元素，通常是复用已有元素而不是从头开始渲染。因此，当我们使用v-if来实现元素切换的时候，如果切换前后含有相同类型的元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>            那么这个元素就会被复用。如果是相同的input元素，那么切换前后用户的输入不会被清除掉，可以使用key来标识一个唯一元素，这种情况下，使用key的元素不会被复用。</strong></span></p> <p><span style="color:#f33b45;"><strong>            这个时候key的作用是用来标识一个独立的元素。</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-for:用v-for更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处的每个元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>            因此通过为每一个列表项提供一个key值，以便跟踪元素所在的位置，从而高效的实现复用。这个key的作用是为了高效的更新渲染虚拟DOM</strong></span></p> <p>    155.keep-alive组件有什么作用？</p> <p><span style="color:#f33b45;"><strong>        具有缓存组件的作用：如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive组件包裹需要保存的组件。</strong></span></p> <p>    156.Vue中mixin和mixins的区别？</p> <p><span style="color:#f33b45;"><strong>        minxin：用于全局混入，会影响到每个组件实例。</strong></span></p> <p><span style="color:#f33b45;"><strong>        minxins：最常使用的扩展组件的方式了，如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过minxins混入代码，比如返回上一个页面，上拉下拉等操作，</strong></span></p> <p><span style="color:#f33b45;"><strong>        需要注意的是minxins混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项时也会有选择性的进行合并</strong></span></p> <p>    157.开发中几种常用的Content-Type ?</p> <p><span style="color:#f33b45;"><strong>        1. application/x-www-form-urlencoded        原生form表单</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. multipart/form-data                      常见post提交方式 文件上传</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. application/json                         JSON字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>        4. text/xml                                 用来提交xml格式的数据</strong></span></p> <p>    158.如何封装一个javascript的类型判断函数？</p> <p>     </p> <p>    159.如何判断一个对象是否为空对象？</p> <p> <span style="color:#f33b45;"><strong>       Object.keys(o).length === 0</strong></span></p> <p>    160.手写一个jsonp？</p> <pre><code class="language-javascript">        function jsonp(url, params, callback) {             let querystring = url.indexOf('?') === -1 ? '?' : '&'   // 判断是否含有参数             // 添加参数             for (var k in params) {                 if (params.hasOwnProperty(k)) {                     querystring += k + '=' + params[k] + '&'                 }             }             // 处理回调函数名             let random = Math.random().toString().replace('.', ''),                callbackName = "myJsonp" + random;             // 添加回调函数             querystring += 'callback=' + callbackName             // 构建请求             let scriptNode = document.createElement("script")             scriptNode.src = url + querystring             window[callbackName] = function () {                 // 调用回调函数                 callback(...arguments)                 // 删除这个引入的脚本                 document.getElementsByTagName('head')[0].removeChild(scriptNode)             }             // 发起请求            document.getElementsByTagName('head')[0].appendChild(scriptNode)         }</code></pre> <p>    161.手写一个观察者模式？</p> <pre><code class="language-javascript">        var events = (function () {             var topics = {};             return {                 // 注册监听函数                 subscribe: function (topic, handler) {                     if (!topics.hasOwnProperty(topic)) {                         topics[topic] = [];                     }                     topics[topic].push(handler);                 },                 // 发布事件，触发观察者回调事件                 publish: function (topic, info) {                     if (topics.hasOwnProperty(topic)) {                         topics[topic].forEach(function (handler) {                             handler(info);                         });                     }                 },                 // 移除主题的一个观察者的回调事件                 remove: function (topic, handler) {                     if (!topics.hasOwnProperty(topic)) return;                     var handlerIndex = -1;                     topics[topic].forEach(function (item, index) {                         if (item === handler) {                             handlerIndex = index;                         }                     });                     if (handlerIndex >= 0) {                         topics[topic].splice(handlerIndex, 1);                     }                 },                 // 移除主题的所有观察者的回调事件                 removeAll: function (topic) {                     if (topics.hasOwnProperty(topic)) {                         topics[topic] = [];                     }                 }             };         })();         //主题监听函数         var handler = function (info) {             console.log(info);         }         //订阅hello主题         events.subscribe('hello', handler);         //发布hello主题         events.publish('hello', 'hello world');</code></pre> <p>    162.js命名规则？</p> <p>        <span style="color:#f33b45;"><strong>开头字符必须是字母、下划线或 $符号, 余下的字符可以是下划线、$、或任意字母或数字字符 </strong></span></p> <p>    163.Object.assign()</p> <p>       <span style="color:#f33b45;"><strong>Object.assign(target,source1,source2...) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象 (浅拷贝)</strong></span></p> <p>    164.Math.ceil() 和 Math.floor()</p> <p>       <span style="color:#f33b45;"><strong> Math.ceil()：向上取整      Math.floor()：向下取整</strong></span></p> <p>    165.如何查找一篇英文文章出现频率最高的单词？</p> <pre><code class="language-javascript">        function findMostWord(article) {             if (!article) return false             article = article.trim().toLowerCase()      // 清除两端空字符串并转为小写             let wordlist = article.match(/[a-z]+/g),   // 将文章中的每个单词转换成数组中的每一项元素                 visited = [],                 maxNum = 0,                 maxWord = '';             article = " " + wordlist.join(" ") + " ";             // 遍历判断单词出现次数             wordlist.forEach(function (item) {                 if (visited.indexOf(item) === -1) {                     visited.push(item)                     let wrod = new RegExp(" " + item + " ", "g"),       // 正则  全局匹配 当前单词                                           num = article.match(wrod).length;           // 当前单词出现的个数                                       if (num > maxNum) {                         maxNum = num                         maxWord = item                     }                 }             })             return maxWord + " " + maxNum         }</code></pre> <p>    166. 算法知识总结</p> <p>      (1).冒泡排序</p> <p>      (2).选择排序</p> <p>      (3).插入排序</p> <p>      (4).希尔排序</p> <p>      (5).归并排序</p> <p>      (6).快速排序</p> <p>      (7).推排序</p> <p>      (8).基数排序</p> <p></p> <p>      <span style="color:#f33b45;"><strong>动态规划 爬楼梯问题->（有一座高度是10级台阶的楼梯，从下往上走，每跨一步只能向上1级或者2级台阶。要求用程序来求出一共有多少种走法？）</strong></span></p> <pre><code class="language-javascript">        function getClimbingWays(n){             if(n<1) return 0;             if(n===1) return 1;             if(n===2) return 2;             lat a = 1,                 b = 2,                 temp = 0;             for(let i = 3;i<=n;i++){                 temp = a + b;                 a = b;                 b = temp;             }             return temp;         }</code></pre> <p>    167.js实现一个函数，完成超过范围的两个大整数相加功能</p> <pre><code class="language-javascript">        function bigNumberAdd(str1, str2) {             let result = "", // 保存最后结果             carry = false; // 保留进位结果             // 将字符串转换为数组             str1 = str1.split("");             str2 = str2.split("");             // 当数组的长度都变为 0，并且最终不再进位时，结束循环             while (str1.length || str2.length || carry) {             // 每次将最后的数字进行相加，使用~~的好处是，即使返回值为 undefined 也能转换为 0             carry += ~~str1.pop() + ~~str2.pop();             // 取加法结果的个位加入最终结果             result = carry % 10 + result;             // 判断是否需要进位，true 和 false 的值在加法中会被转换为 1 和 0             carry = carry > 9; }             // 返回最终结果             return result;         }</code></pre> <p>    168.JS如何实现数组扁平化（将一个多维数组变成一个一维数组）  [1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]</p> <pre><code class="language-javascript">        function flattenArray(array){             if(!Array.isArray(array)) return false;             let result  = []             result =  array.reduce(function(prev,cur){                 return prev.concat(Array.isArray(cur)? flattenArray(cur) : cur)             },[])             return result;         }</code></pre> <p>    169.JS实现数组去重？</p> <pre><code class="language-javascript">        function unique(arr){             if (Array.hasOwnProperty('from')) {                 return Array.from(new Set(arr));             } else {                 var n = {}, r = [];                 for (var i = 0; i < arr.length; i++) {                     if (!n[arr[i]]) {                         n[arr[i]] = true;                         r.push(arr[i]);                     }                 }                 return r;             }         }</code></pre> <p>    170.求数组的最大值 和 最小值？</p> <pre><code class="language-javascript">        function arrayMax(arr){             return Math.max.apply(null,arr)         }         function arrayMin(arr){             return Math.min.apply(null,arr)         }</code></pre> <p>    171.如何求两个数的最大公约数？   最小公倍数？</p> <p>       <span style="color:#f33b45;"><strong> 最大公约数： 用大的数去除以小的那个数，然后再用小的数去除以的得到的余数，一直这样递归下去，直到余数为 0 时，最后的被除数就是两个数的最大公约数</strong></span></p> <pre><code class="language-javascript">            function getMaxCommonDivisor(a, b) {                 if (b === 0) return a;                 return getMaxCommonDivisor(b, a % b);             }</code></pre> <p>  <span style="color:#f33b45;"><strong>      最小公倍数：将两个数相乘，然后除以它们的最大公约数</strong></span></p> <pre><code class="language-javascript">            function getMinCommonMultiple(a, b){                 return a * b / getMaxCommonDivisor(a, b);             }</code></pre> <p>    172.判断一个字符串是否为回文字符串？</p> <pre><code class="language-javascript">        function isPalindrome(str){             let reg = /[\W_]/g,         // 匹配所有非单词的字符及下划线             newStr = str.replace(reg,"").toLowerCase()      // 替换为空字符并转为小写字母             reverseStr = newStr.split("").reverse().join("")    // 将字符串反转             return reverseStr === newStr;         }</code></pre> <p>    173.状态码？</p> <p><span style="color:#f33b45;"><strong>        1xx ： 代表服务器接收到请求     </strong></span></p> <p><span style="color:#f33b45;"><strong>        2xx ： 代表成功         200：成功       </strong></span></p> <p><span style="color:#f33b45;"><strong>        3xx :  代表重定向       301：永久性重定向       302：临时性重定向       304：所请求的资源未修改</strong></span></p> <p><span style="color:#f33b45;"><strong>        4xx ： 代表客户端错误   400：客户端请求语法错误     404：请求资源不存在</strong></span></p> <p><span style="color:#f33b45;"><strong>        5xx :  代表服务器端错误     500：服务器内部错误</strong></span></p> <p>    174.post 和 get 请求的区别？</p> <p><span style="color:#f33b45;"><strong>        post和get都是http请求的两种方法</strong></span></p> <p><span style="color:#f33b45;"><strong>        get请求一般用于不会对服务器资源产生影响的场景，浏览器一般会对get请求缓存，get请求的url会被保存在历史记录中，不太安全，并且浏览器对url有一个长度的限制，所以会影响get请求发送数据时的长度。</strong></span></p> <p><span style="color:#f33b45;"><strong>        post请求一般用于会对服务器资源产出影响的场景，浏览器很少会对post请求缓存，post请求相对安全，请求参数支持更多的数据类型。</strong></span></p> <p>    175.当你在浏览器中输入Google.com并且按下回车之后发生了什么？</p> <p>       <span style="color:#f33b45;"><strong> 1.首先会对url进行解析，分析所需要使用的传输协议和请求的资源路径，如果输入的url中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。</strong></span></p> <p><span style="color:#f33b45;"><strong>            如果没有问题，浏览器会检测url中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一个过程</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并没有失效，那么就直接使用，否则向服务器发起新的请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.下面是TCP建立连接的三次握手的过程，首先是客户端向服务器发送一个连接请求，服务端接收到请求后向客户端发送一个应答，客户端收到应答后也向服务器发送了一个应答，此时双方的连接就建立起来了。</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.当页面请求发送到服务器端后，服务器会返回一个html文件作为响应，浏览器接收到响应后，开始对html进行解析，开始页面的渲染过程。</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.浏览器首先会对html文件构建DOM树，根据解析到的css构建CSSOM树，如果遇到script标签，则判断是否含有defer或async属性，要不然script脚本的加载和执行会造成页面渲染的阻塞，</strong></span></p> <p><span style="color:#f33b45;"><strong>            当DOM树和CSSOM树建立好后，根据它们来建构渲染树，渲染树构建好后，会根据渲染树来进行布局，布局完成后，浏览器对页面进行绘制，这个时候整个页面就出来了</strong></span></p> <p>    176.http中的OPTIONS请求方法有什么作用？</p> <p><span style="color:#f33b45;"><strong>        OPTIONS会请求服务器返回该资源所支持的所有http请求方法，该方法会用*来代替资源名称向服务器发送OPTIONS请求，可以测试服务器功能是否正常。</strong></span></p> <p><span style="color:#f33b45;"><strong>        JS的XMLHTTPRequest对象进行CORS跨域资源共享时，对于复杂请求，就是使用OPTIONS方法发送预请求，以判断是否有对指定资源的访问权限</strong></span></p> <p>    177.怎么实现多个网站之间共享登录状态？</p> <p><span style="color:#f33b45;"><strong>        在多个网站之间共享登录状态指的就是单点登录。多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。</strong></span></p> <p><span style="color:#f33b45;"><strong>        我认为单点登录可以这样来实现，首先将用户信息的验证中心独立出来，作为一个单独的认证中心，该认证中心的作用是判断客户端发送的账号密码的正确性，</strong></span></p> <p><span style="color:#f33b45;"><strong>        然后向客户端返回对应的用户信息，并且返回一个由服务器端秘钥加密的登录信息的 token 给客户端，该token 具有一定的有效时限。</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个应用系统跳转到另一个应用系统时，通过 url 参数的方式来传递 token，然后转移到的应用站点发送给认证中心，认证中心对 token 进行解密后验证，</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果用户信息没有失效，则向客户端返回对应的用户信息，如果失效了则将页面重定向会单点登录页面。</strong></span></p> <p></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1711314791970189312"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(css,html,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> <span class="text-muted">海淀萌狗</span> <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> <span class="text-muted">Derek重名了</span> <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> <span class="text-muted">琪33</span> <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> <span class="text-muted">Q_w7742</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/34.htm" title="Java 并发包之线程池和原子计数" target="_blank">Java 并发包之线程池和原子计数</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/Java%E8%AE%A1%E6%95%B0/1.htm">Java计数</a><a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91%E5%8C%85/1.htm">并发包</a><a class="tag" taget="_blank" href="/search/java%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">java线程池</a> <div>对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C</div> </li> <li><a href="/article/161.htm" title="java编程思想 抽象类和接口" target="_blank">java编程思想 抽象类和接口</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">抽象类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a> <div>接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface; </div> </li> <li><a href="/article/288.htm" title="[房地产与大数据]房地产数据挖掘系统" target="_blank">[房地产与大数据]房地产数据挖掘系统</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>        随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb</div> </li> <li><a href="/article/415.htm" title="数组队列总结" target="_blank">数组队列总结</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84%E9%98%9F%E5%88%97/1.htm">数组队列</a> <div>      数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class</div> </li> <li><a href="/article/542.htm" title="Oracle存储过程无法编译的解决方法" target="_blank">Oracle存储过程无法编译的解决方法</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B%E3%80%80/1.htm">存储过程　</a> <div>今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN</div> </li> <li><a href="/article/669.htm" title="重装系统之后oracle恢复" target="_blank">重装系统之后oracle恢复</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl</div> </li> <li><a href="/article/796.htm" title="python学习二（ 一些基础语法）" target="_blank">python学习二（ 一些基础语法）</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/pthon/1.htm">pthon</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/1.htm">基础语法</a> <div>紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&</div> </li> <li><a href="/article/923.htm" title="svn 常用命令" target="_blank">svn 常用命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80/1.htm">版本回退</a> <div>1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio</div> </li> <li><a href="/article/1050.htm" title="某小公司面试归来" target="_blank">某小公司面试归来</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru</div> </li> <li><a href="/article/1177.htm" title="动态数组的存储速度比较 集合框架" target="_blank">动态数组的存储速度比较 集合框架</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a> <div>集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器</div> </li> <li><a href="/article/1304.htm" title="用JS实现一个JS对象，对象里有两个属性一个方法" target="_blank">用JS实现一个JS对象，对象里有两个属性一个方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js%E5%AF%B9%E8%B1%A1/1.htm">js对象</a> <div><html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){ </div> </li> <li><a href="/article/1431.htm" title="探索JUnit4扩展：使用Rule" target="_blank">探索JUnit4扩展：使用Rule</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a> <div>        在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n</div> </li> <li><a href="/article/1558.htm" title="[Gson一]非泛型POJO对象的反序列化" target="_blank">[Gson一]非泛型POJO对象的反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    </div> </li> <li><a href="/article/1685.htm" title="【Kakfa五】Kafka Producer和Consumer基本使用" target="_blank">【Kakfa五】Kafka Producer和Consumer基本使用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor</div> </li> <li><a href="/article/1812.htm" title="lsyncd实时同步搭建指南——取代rsync+inotify" target="_blank">lsyncd实时同步搭建指南——取代rsync+inotify</a> <span class="text-muted">ronin47</span> <div>1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify</div> </li> <li><a href="/article/1939.htm" title="java-9. 判断整数序列是不是二元查找树的后序遍历结果" target="_blank">java-9. 判断整数序列是不是二元查找树的后序遍历结果</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是</div> </li> <li><a href="/article/2066.htm" title="MySQL的sum函数返回的类型" target="_blank">MySQL的sum函数返回的类型</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows</div> </li> <li><a href="/article/2193.htm" title="java设计模式之单例模式" target="_blank">java设计模式之单例模式</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/java%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">java设计模式</a> <div> 在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ</div> </li> <li><a href="/article/2320.htm" title="javascript取当月最后一天" target="_blank">javascript取当月最后一天</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont</div> </li> <li><a href="/article/2447.htm" title="linux tune2fs命令详解" target="_blank">linux tune2fs命令详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tune2fs/1.htm">tune2fs</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E7%B3%BB%E7%BB%9F%E6%96%87%E4%BB%B6%E5%9D%97%E4%BF%A1%E6%81%AF/1.htm">查看系统文件块信息</a> <div>一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou</div> </li> <li><a href="/article/2574.htm" title="做有中国特色的程序员" target="_blank">做有中国特色的程序员</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>  从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有</div> </li> <li><a href="/article/2701.htm" title="Android：TextView属性大全" target="_blank">Android：TextView属性大全</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/textview/1.htm">textview</a> <div>android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输</div> </li> <li><a href="/article/2828.htm" title="tomcat虚拟目录安装及其配置" target="_blank">tomcat虚拟目录安装及其配置</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/tomcat%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E/1.htm">tomcat配置说明</a><a class="tag" taget="_blank" href="/search/tomca%E9%83%A8%E7%BD%B2web%E5%BA%94%E7%94%A8/1.htm">tomca部署web应用</a><a class="tag" taget="_blank" href="/search/tomcat%E8%99%9A%E6%8B%9F%E7%9B%AE%E5%BD%95%E5%AE%89%E8%A3%85/1.htm">tomcat虚拟目录安装</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp</div> </li> <li><a href="/article/2955.htm" title="浅谈：APP有哪些常被黑客利用的安全漏洞" target="_blank">浅谈：APP有哪些常被黑客利用的安全漏洞</a> <span class="text-muted">gg163</span> <a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a> <div>首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读</div> </li> <li><a href="/article/3082.htm" title="C#根据网址生成静态页面" target="_blank">C#根据网址生成静态页面</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a> <div>HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri</div> </li> <li><a href="/article/3209.htm" title="SVG 教程 （一）" target="_blank">SVG 教程 （一）</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量</div> </li> <li><a href="/article/3336.htm" title="一个简单的java栈" target="_blank">一个简单的java栈</a> <span class="text-muted">luyulong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%A0%88/1.htm">栈</a> <div> public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top </div> </li> <li><a href="/article/3463.htm" title="基础数据结构和算法八：Binary search" target="_blank">基础数据结构和算法八：Binary search</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Binary+search/1.htm">Binary search</a> <div>Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori</div> </li> <li><a href="/article/3590.htm" title="12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！" target="_blank">12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff)); </div> </li> <li><a href="/article/3717.htm" title="ITeye 7月技术图书有奖试读获奖名单公布" target="_blank">ITeye 7月技术图书有奖试读获奖名单公布</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a><a class="tag" taget="_blank" href="/search/%E8%AF%95%E8%AF%BB/1.htm">试读</a> <div>ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》 </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>