水袖茶花凉hx

前端面试常见问题整理（html+css+js篇）

前端面试题

HTML

对 WEB 标准以及 W3C 的理解与认识
- Web 标准由万维网联盟（W3C）组织制定的，它不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构层（html）、表现层（css）和行为层（js），web 标准一般是将该三部分独立分开，使其更具有模块化。
- W3C 代码规范：
1. 结构要求：标签字母要小写，标签要闭合，标签不允许随意嵌套
2. 对于 css 和 js：
  - (1) 尽量使用外链 css 样式表和 js 脚本。提高页面渲染速度和用户体验
  - (2) 样式尽量少用行间样式表，使结构与表现分离，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
  - (3) 不需要变动页面内容，提高网站易用性
xhtml 和 html 有什么区别
- HTML 是一种基本的 WEB 网页设计语言
- XHTML 是一个基于 XML 的置标语言
- 最主要的不同，XHTML 更为严格
  - XHTML 元素必须被正确地嵌套；
  - XHTML 元素必须被关闭；
  - 标签名必须用小写字母；
  - XHTML 文档必须拥有根元素。
什么是语义化的 HTML?
- 直观的认识标签，对于搜索引擎的抓取有好处
你如何理解 HTML 结构的语义化？
- 语义化的 HTML 是最新的 HTML5 提出的理论，也就是通过一些有具体含义的标签来代替之前用 class 名或者 ID 来赋予意义的标签。如用替代一眼就知道里面要写的就是导航菜单
Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
- 区别：严格模式是浏览器根据规范去显示页面；混杂模式是以一种向后兼容的方式去显示
- 意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）
- 触发：浏览器根据 doctype 是否存在和使用的是那种 DTD(文档类型定义)来决定。
说说 HTML 中</code>和<code><h1></code>、<code></code>和<code></code>各有哪些不同? <ul> <li>主要区别是语义不同</li> <li><code><title></code>针对浏览器，<code><h1></code>表示页面内容标题，搜索引擎更重视<code><h1></code></li> <li><code></code>仅表示视觉上加粗，<code></code>表示语气强调+样式加粗 <ul> <li>读屏软件阅读文字时会对<code></code>加强语气, 而会忽略<code></code>;</li> <li>搜索引擎亦会加大<code></code>内容的权重</li> </ul> </li> </ul> </li> <li> img 标签上 title 与 alt 属性的区别是什么? <ul> <li>alt 属性是替换文本，图片不能正常显示时用 alt 中的文本替代</li> <li>title 属性是用于提供信息，当鼠标放在图片上时显示的信息</li> </ul> </li> <li> <code></code>与<code></code>的异同 <ul> <li>strong:粗体强调标签，强调，表示内容的重要性</li> <li>em:斜体强调标签，更强烈强调，表示内容的强调点</li> </ul> </li> <li> 简述一下 src 与 href 的区别 <ul> <li>src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。</li> <li>src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；</li> <li>href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。</li> </ul> </li> <li> iframe 有那些缺点 </li> </ol> <ul> <li>iframe 会阻塞主页面的 onload 事件；</li> <li>iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。</li> <li>使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript</li> <li>动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。</li> </ul> <ol start="11"> <li>知道的网页制作会用到的图片格式有哪些</li> </ol> <ul> <li>png-8，png-24，jpeg，gif，svg，Webp(面试官希望听到,谷歌 google 开发的一种旨在加快图片加载速度的图片格式,在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%)</li> </ul> <h2>CSS</h2> <ol> <li>css 的基本语句构成</li> </ol> <ul> <li> 选择器{属性 1:值 1;属性 2:值 2;……} 2.CSS 有哪些选择器？ </li> <li> 标签/HTML 选择器（用 HTML 标签申明） </li> <li> id 选择器（用 DOM 的 ID 申明） </li> <li> 类选择器（用一个样式类名申明） </li> <li> 属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了） </li> <li> 除了前 3 种基本选择器，还有一些扩展选择器，包括 <ul> <li>后代选择器（利用空格间隔，比如 div .a{ }）</li> <li>群组选择器（利用逗号间隔，比如 p,div,#a{ }）</li> </ul> </li> </ul> <ol start="3"> <li>弹性布局的理解？及其对应的 css 定义</li> </ol> <ul> <li>容器会根据布局的需要，调整内容尺寸顺序来更好地填充可用空间。当容器尺寸变化时，其中内容也会动态调整。弹性盒布局是与方向无关的。</li> <li>图例 <blockquote> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVq2yCnG-1574831710993)(./assets/flex.png)] </blockquote> </li> </ul> <ol start="4"> <li>background-size 有哪四种值类型</li> </ol> <ul> <li>图片宽和高</li> <li>图片相对背景定位的百分比</li> <li>图片缩放成完全覆盖背景定位区域的最小大小</li> <li>图片缩放成适合覆盖背景定位区域的最小大小</li> </ul> <ol start="5"> <li>有哪项方式可以对一个 DOM 设置它的 CSS 样式</li> </ol> <pre><code class="prism language-js">/* 1.直接设置style属性 */ element.style.height = "100px"; /* 2.直接设置属性 */ element.setAttribute("height", "100px"); /* 3.使用setAttribute设置style属性 */ element.setAttribute("style", "height: 100px !important"); /* 4.使用setProperty设置属性，通过第三个参数设置important */ element.style.setProperty("height", "300px", "important"); /* 5.设置cssText */ element.style.cssText += "height: 100px !important"; </code></pre> <ol start="6"> <li>CSS 引入的方式有哪些?</li> </ol> <ul> <li>CSS 与 HTML 文档结合的 4 中方法： <ol> <li>使用<code><link></code>元素链接到外部的样式文件</li> <li>在<code><head></code>元素中使用"style"元素来指定</li> <li>使用 CSS <code>@import</code>标记来导入样式表单</li> <li>在<code><body></code>内部的元素中使用<code>style</code>属性来定义样式</li> </ol> </li> </ul> <ol start="7"> <li><code>link</code>和<code>@import</code>的区别是?</li> </ol> <ul> <li>本质上，这两种方式都是为了加载 CSS 文件，但还是存在着细微的差别。 <ol> <li>老祖宗的差别。link 属于 XHTML 标签，而@import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS 了。</li> <li>加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。</li> <li>兼容性的差别。由于@import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。</li> <li>使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。</li> </ol> </li> </ul> <ol start="8"> <li>CSS 引入的方式有哪些? <ul> <li>外部样式表，引入一个外部 css 文件</li> <li>内部样式表，将 css 代码放在标签内部</li> <li>内联样式，将 css 样式直接定义在 HTML 元素内部</li> </ul> </li> <li>行内元素有哪些？块级元素有哪些？空(void)元素有那些？ <ul> <li>行内元素：a、b、span、img、input、strong、select、label、em、button、textarea</li> <li>块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote</li> <li>空元素：即系没有内容的 HTML 元素，例如：br、meta、hr、link、input、img</li> </ul> </li> <li>行内元素有哪些?块级元素有哪些?CSS 的盒模型? <ul> <li>块级元素：div p h1 h2 h3 h4 form ul</li> <li>行内元素: a b br i span input select</li> <li>css 盒模型:内容，border，margin，padding</li> </ul> </li> <li>行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？ <ul> <li>块级元素(block)特性： <ul> <li>总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;</li> <li>宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;</li> </ul> </li> <li>内联元素(inline)特性： <ul> <li>和相邻的内联元素在同一行;</li> <li>宽度(width)、高度(height)、内边距和外边距的 top/bottom 都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的）。</li> </ul> </li> </ul> </li> <li>盒子模型 <ul> <li>盒子模型包括四部分：内容（content）、填充（padding）、边框（border）、边界（margin）</li> <li>盒子模型可以分为两种：IE 盒子模型和 W3C 标准盒子模型</li> <li>区别：两者对于 width 的计算方式不同，前者 width=border+padding+内容宽度，后者 width=内容宽度。</li> </ul> </li> <li>什么是盒子模型？ <ul> <li>在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4 个部分一起构成了 css 中元素的盒模型。</li> </ul> </li> <li>CSS 的盒模型 <ul> <li>网页设计中的每个元素都是长方形的盒子</li> <li>Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。盒子本身的大小是这样计算的： <ul> <li>width(即 MSIE 中的 offsetWidth)：width + padding-left + padding-right + border-left + border-right</li> <li>height(即 MSIE 中的 offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom</li> </ul> </li> </ul> </li> <li>什么是外边距重叠？重叠的结果是什么？ <ul> <li>外边距重叠就是 margin-collapse,在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。</li> <li>折叠结果遵循下列计算规则： <ul> <li>两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。</li> <li>两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。</li> <li>两个外边距一正一负时，折叠结果是两者的相加的和。</li> </ul> </li> </ul> </li> <li>position 包含几种属性？absolute 和 relative 的区别？ <ul> <li>static：默认状态、没有定位、正常流</li> <li>inherit：从父元素集成 position 属性的值</li> <li>fixed：生成绝对定位的元素（相对于浏览器窗口进行定位）</li> <li>absolute：生成绝对定位的元素（相位与 static 定位以外的第一个父元素定位）</li> <li>relative：生成相对定位的元素（相对于其正常位置定位）</li> <li>absolute 和 relative 区别：父元素的 padding 对 relative 的子元素布局有影响，absolute 的子元素不受影响</li> </ul> </li> <li>display:none 与 visibility:hidden 的区别是什么？ <ul> <li>display : 隐藏对应的元素但不挤占该元素原来的空间。</li> <li>visibility: 隐藏对应的元素并且挤占该元素原来的空间。</li> </ul> </li> <li>列出 display 的值，说明他们的作用？</li> </ol> <ul> <li>block 象块类型元素一样显示。</li> <li>none 缺省值。象行内元素类型一样显示。</li> <li>inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。</li> <li>list-item 象块类型元素一样显示，并添加样式列表标记。</li> </ul> <ol start="19"> <li>CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？</li> </ol> <ul> <li>最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden</li> <li>技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000</li> </ul> <ol start="20"> <li>CSS 选择符有哪些?</li> </ol> <ul> <li> CSS 选择符主要有以下 10 类： <ol> <li>通配选择符：*{margin:0px;}</li> <li>类型选择符：a{text-decoration:none;}</li> <li>属性选择符：input[type=“button”]{padding:5px;}</li> <li>包含选择符：div.code a{text-decoration:none;}</li> <li>子对象选择符：ul.test>li{font-size:14px;}</li> <li>ID 选择符：#test {color:red;}</li> <li>类选择符：.test{color:red;}</li> <li>选择符分组：body,ul,li{margin:0px;}</li> <li>伪类及伪对象选择符：div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}</li> <li>相邻选择符：li+li{font-weight:bold;}</li> </ol> </li> </ul> <ol start="21"> <li>CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important 哪个优先级高?</li> </ol> <ul> <li>标签选择符类选择符 id 选择符</li> <li>Class，伪类 A 标签，列表 UL LI DL DD DT 可继承</li> <li>Id>class>标签选择</li> <li>important 优先级高于内联优先级</li> </ul> <ol start="22"> <li>什么是 css Hack？ie6、ie7、ie8 的 hack 分别是什么？</li> </ol> <ul> <li>针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。</li> <li>background-color:red\9; /all ie/</li> <li>background-color:yellow; /ie8/</li> <li>+background-color:pink; /ie7/</li> <li>_background-color:orange; /ie6/</li> <li>:root #test { background-color:purple\9; } /ie9/</li> </ul> <ol start="23"> <li>IE 浏览器 Hack 一般分为几种？</li> </ol> <ul> <li> IE 浏览器 Hack 一般又分为三种，条件 Hack、属性级 Hack、选择符 Hack <ol> <li>条件 Hack</li> </ol> <pre><code class="prism language-html"> </code></pre> <ol start="2"> <li>属性 Hack</li> </ol> <pre><code class="prism language-html">.test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ } </code></pre> <ol start="3"> <li>选择符 Hack</li> </ol> <pre><code class="prism language-html">* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;}/* For IE7 */ </code></pre> <ol start="4"> <li>css Hack</li> </ol> <pre><code class="prism language-css"><![endif]-->_marging\\ie6+margin\\ie7marging: 0 auto \9 所有Ie Margin \0 \\IE8; </code></pre> </li> </ul> <ol start="24"> <li>你知道哪些 CSS Hack 技巧？分别有什么用？</li> </ol> <ul> <li>IE6：_属性名前缀</li> <li>IE7：+属性名前缀</li> <li>IE789: \9 后缀</li> <li>IE7 以下：zoom:1；能解决不少页面错乱的问题；</li> </ul> <ol start="25"> <li>优先级算法如何计算？</li> </ol> <ul> <li>重要性和来源的优先级排序从低到高是： <ol> <li>浏览器默认样式</li> <li>用户在浏览器中定义的普通样式（normal 规则，不带 important 规则）</li> <li>开发人员定义的普通样式（ normal 规则，不带 important 规则）</li> <li>开发人员定义特殊样式（带 important 规则）</li> <li>用户在浏览器中定义特殊样式（带 important 规则）</li> </ol> </li> </ul> <ol start="26"> <li>CSS 行内样式与 important 谁的优先级高？如果行内样式和外部样式同时定义了 important, 谁的优先级高？</li> </ol> <ul> <li>important 优先级高于 important；如果行内样式和外部样式同时定义了 important，那么行内样式的 important 的优先级高；</li> </ul> <ol start="27"> <li>float 布局有哪些缺点？是否有替代 float 的实现方案？如果有，请说说你的实现方法。</li> </ol> <ul> <li>float 不能自由控制对齐方式和换行；需要强制清除浮动，否则后面的内容会错乱；替代 float 的方案主要用：给子元素<code>display:inline-bolck;</code></li> </ul> <ol start="28"> <li>清除浮动的几种方式，各自的优缺点 <ol> <li>使用空标签清除浮动 <code>clear:both</code>（理论上能清除任何标签，但增加无意义的标签）</li> <li>使用 <code>overflow:auto</code>（空标签元素清除浮动而不得不增加无意代码的弊端,使用 zoom:1 用于兼容 IE）</li> <li>使用 afert 伪元素清除浮动(用于非 IE 浏览器)</li> </ol> </li> <li>如何垂直居中一个浮动元素？</li> </ol> <pre><code class="prism language-css">/* 方法一：已知元素的高宽 */ #div1 { background-color: #6699ff; width: 200px; height: 200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top: -100px; //二分之一的height，width margin-left: -100px; } /* 方法二:未知元素的高宽 */ #div1 { width: 200px; height: 200px; background-color: #6699ff; margin: auto; position: absolute; //父元素需要相对定位 left: 0; top: 0; right: 0; bottom: 0; } /* 垂直居中一个<img> */ #container /*<img>的容器设置如下 */ { display: table-cell; text-align: center; vertical-align: middle; } </code></pre> <ol start="30"> <li>如何居中 div？如何居中一个浮动元素？</li> </ol> <pre><code class="prism language-css">/* 居中div:给div设置一个宽度，然后添加margin:0 auto; */ div { width: 200px; margin: 0 auto; } /* 居中一个浮动元素 */ div { width: 500px; height: 500px; magin: -250px 0 0 -250px; position: relative; left: 50%; top: 50%; } </code></pre> <ol start="31"> <li>写出几种 IE6 BUG 的解决方法 <ol> <li>双边距 BUG float 引起的使用 display</li> <li>像素问题使用 float 引起的使用 dislpay:inline -3px</li> <li>超链接 hover 点击后失效使用正确的书写顺序 link visited hover active</li> <li>IE z-index 问题给父级添加 position:relative</li> <li>Png 透明使用 js 代码改</li> <li>Min-height 最小高度 !Important 解决’</li> <li>select 在 ie6 下遮盖使用 iframe 嵌套</li> <li>不能定义 1px 左右的宽度容器(IE6 默认的行高造成的，使用 over:hidden;zoom:0.08;line-height:1px;)</li> <li>IE6 不支持!important</li> </ol> </li> <li>超链接访问过后 hover 样式就不出现的问题是什么？如何解决？</li> </ol> <ul> <li>被点击访问过的超链接样式不在具有 hover 和 active 了</li> <li>解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）</li> </ul> <ol start="33"> <li>px 和 em 的区别</li> </ol> <ul> <li>px 和 em 都是长度单位</li> <li>px 的值是固定的，指定是多少就是多少，计算比较容易。</li> <li>em 的值不是固定的，并且 em 会继承父级元素的字体大小。</li> <li>浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px</li> </ul> <ol start="34"> <li>div+css 的布局较 table 布局有什么优点？</li> </ol> <ul> <li>改版的时候更方便只要改 css 文件。</li> <li>页面加载速度更快、结构化清晰、页面显示简洁。</li> <li>表现与结构相分离。</li> <li>易于优化（seo）搜索引擎更友好，排名更容易靠前。</li> </ul> <ol start="35"> <li>css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？</li> </ol> <ul> <li>垂直方向：line-height</li> <li>水平方向：letter-spacing</li> </ul> <ol start="36"> <li>在同一个 CSS 文件中定义的两个类<code>.a{color:blue;}</code> 和<code>.b{color:red;}</code>,如果把它们同时应用到同一元素上，他们会怎么显示？为什么？</li> </ol> <ul> <li>页面上怎么显示取决于在 css 文件中定义的先后位置，后定义的样式会覆盖前面定义的样式；所以： <ul> <li>1. 如果.b 在.a 后面，则.b 的 color 会覆盖.a, 显示为 red;</li> <li>2. 如果.a 在.b 后面，则.a 的 color 会覆盖.b, 显示为 blue;</li> </ul> </li> </ul> <ol start="37"> <li>CSS 哪些属性可以继承? <ol> <li>文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing</li> <li>列表相关：list-style-image、list-style-position、list-style-type、list-style</li> <li>颜色相关:color 4.透明度：opacity(opacity 的继承有问题，子元素会继承祖元素的 opacity，但是无法更改。)</li> </ol> </li> <li>Sass、LESS 是什么？大家为什么要使用他们？</li> </ol> <ul> <li>CSS 预处理器,是 CSS 上的一种抽象层,他们是一种特殊的语法/语言编译成 CSS。</li> <li>结构清晰，便于扩展。（可以方便地屏蔽浏览器私有语法差异。可以封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。）</li> </ul> <ol start="39"> <li>描述一个“reset”的 CSS 文件并如何使用它。知道 Normalize.css 吗？你了解他们的不同之处？</li> </ol> <ul> <li>重置样式非常多的 css 样式</li> <li>不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。</li> <li>Normalize.css 是一种 CSS reset 的替代方案。它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。</li> <li>Normalize 没有重置所有的样式风格，他仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。</li> </ul> <ol start="40"> <li>描述 css reset 的作用和用途</li> </ol> <ul> <li></li> </ul> <ul> <li>重置浏览器的 css 默认属性，浏览器的种类不同，样式不同，通过重置让他们统一</li> </ul> <ol start="41"> <li>解释 css sprites（精灵图）如何使用</li> </ol> <ul> <li>把一堆小的图片整合到一张大的图片上的好处有以下几点： <ol> <li>减少了图片个数，这样减小了对服务器的请求。</li> <li>整个图片的变小了，使得图片下载速度更快。</li> <li>不用使用 javascript 代码，而是使用纯 CSS 就可以。</li> </ol> </li> </ul> <ol start="42"> <li>请用 Css 写一个简单的幻灯片效果页面</li> </ol> <pre><code class="prism language-css">div .ani { width: 480px; height: 320px; margin: 50px auto; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 1); background-size: cover; background-position: center; -webkit-animation-name: "loops"; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes "loops" { 0% { background: url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; } 25% { background: url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; } 50% { background: url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; } 75% { background: url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; } 100% { background: url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } } </code></pre> <h2>HTML5</h2> <ol> <li>HTML5 废弃了哪些 HTML4 标签？</li> </ol> <ul> <li>Frame，frameset，noframe，applet，big，center，basefront</li> </ul> <ol start="2"> <li>HTML5 和 CSS3 各有哪些新特性？</li> </ol> <ul> <li>增加更多的语义化标签： <code><header></header> <footer></footer><article></article><aside></aside><nav></nav><section></section></code>…</li> <li>全新的<code><video/></code>标签，支持播放多种视频格式</li> <li>增加 canvas API 接口，增加更多的 JS API 支持 web sokect</li> </ul> <ol start="3"> <li>HTML5 标准提供了哪些新的 API？</li> </ol> <ul> <li>HTML5 提供的应用程序 API 主要有：Media API，Text Track API，Application Cache API，User Interaction，Data Transfer API，Command API，Constraint Validation API，History API</li> </ul> <ol start="4"> <li>HTML5 应用程序缓存和浏览器缓存有什么区别？</li> </ol> <ul> <li>应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html manifest="”example.appcache”"></html> </code></pre> <ul> <li>与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。</li> </ul> <ol start="5"> <li>HTML5 存储类型有什么区别？</li> </ol> <ul> <li>HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。- HTML5 提供了下面两种本地存储方案： <ul> <li>localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。</li> <li>sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储</li> </ul> </li> </ul> <ol start="6"> <li>HTML5 有哪些新增的表单元素？</li> </ol> <ul> <li>Datalist，datetime，output，keygen，date，month，week，time，color，number，range，email，url</li> </ul> <ol start="7"> <li>HTML5 Canvas 元素有什么用？</li> </ol> <ul> <li>Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作</li> </ul> <pre><code class="prism language-html"><canvas id="”canvas1″" width="”300″" height="”100″"></canvas> </code></pre> <ol start="8"> <li>请描述一下 cookies，sessionStorage 和 localStorage 的区别？</li> </ol> <ul> <li>sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。</li> <li>web storage 和 cookie 的区别： <ul> <li>区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了宽带，另外 cookie 还需要指定作用域，不可以跨域调用。</li> </ul> </li> <li>除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在，而 Web Storage 仅仅是为了在本地“存储”数据而生。</li> </ul> <h2>CSS3</h2> <ol> <li>CSS3 有哪些新特性?</li> </ol> <ul> <li>圆角（<code>border-radius:8px</code>）</li> <li>阴影（<code>box-shadow:10px</code>）</li> <li>对文字加特效（<code>text-shadow</code>）</li> <li>线性渐变（<code>gradient</code>）</li> <li>旋转（<code>transform</code>）<pre><code class="prism language-css"> transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);  </code></pre> </li> </ul> <ol start="2"> <li>rgba()和 opacity 的透明效果有什么不同?</li> </ol> <ul> <li>rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）</li> </ul> <ol start="3"> <li>CSS3 中的 transform 属性和 transition 属性？</li> </ol> <ul> <li>transform：使元素变形,配合 rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用</li> <li>transition：设置元素由样式一变为样式二所需要的一些变化效果。语法：<code>transition: property duration timing-function delay;</code></li> </ul> <h2>JavaScript</h2> <ol> <li>JavaScript 是一门什么样的语言，它有哪些特点？</li> </ol> <ul> <li>一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。</li> <li>Js 具有简单性，动态性，跨平台型，安全性。</li> </ul> <ol start="2"> <li>document load 和 document ready 的区别</li> </ol> <ul> <li>document.onload 是在结构和样式加载完才执行 js</li> <li>document.ready 原生种没有这个方法，jquery 中有 <code>$().ready(function)</code></li> </ul> <ol start="3"> <li>"“和”="的不同</li> </ol> <ul> <li>"=="会自动转换类型，比较的是数值</li> <li>"==="比较的是数值类型和数值</li> </ul> <ol start="4"> <li>javascript 的 typeof 返回哪些数据类型</li> </ol> <ul> <li>Object（<code>typeof null;//Object</code>） number function boolean underfind</li> </ul> <ol start="5"> <li>form 中的 input 有哪些类型？</li> </ol> <ul> <li>text:文本框，password:密码框，radio:单选按钮，checkbox:复选框，file:文件选择域，hidden:隐藏域，button:按钮，reset:重置按钮，submit:表单提交按钮</li> </ul> <ol start="6"> <li>javaScript 的 2 种变量范围有什么不同？</li> </ol> <ul> <li>全局变量：当前页面内有效</li> <li>局部变量：方法内有效</li> </ul> <ol start="7"> <li>form 中的 input 可以设置为 readonly 和 disable，请问两者有什么区别?</li> </ol> <ul> <li>readonly 不可编辑，但可以选择和复制；值可以传递到后台</li> <li>disabled 不能编辑，不能复制，不能选择；值不可以传递到后台</li> </ul> <ol start="8"> <li>js 中的 3 种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？</li> </ol> <ul> <li>Alert confirm prompt</li> </ul> <ol start="9"> <li>列举 javaScript 的 3 种主要数据类型，2 种复合数据类型和 2 种特殊数据类型。</li> </ol> <ul> <li>主要数据类型：string, boolean, number</li> <li>复合数据类型：function, object</li> </ul> <ol start="10"> <li>程序中捕获异常的方法</li> </ol> <ul> <li>window.error</li> <li>try{}catch(){}finally{}</li> </ul> <ol start="11"> <li>浏览器的对象模型</li> </ol> <ul> <li>Window：顶级对象</li> <li>History：当用户浏览网页时，浏览器保存了一个最近所访问网页的 url 列表。这个列表就是用 history 对象表示。</li> <li>Location：表示当前打开的窗口或框架的 URL 信息。</li> <li>Navigator：表示浏览器的信息及 js 运行的环境</li> <li>Screen：用于显示网页的显示器的大小和颜色</li> </ul> <ol start="12"> <li>javascript 的常用对象有哪些?</li> </ol> <ul> <li>String, Math, Date 和 Array 对象</li> </ul> <ol start="13"> <li>innerHTML，innerText，outerHTML，innerText 的区别？</li> </ol> <ul> <li>innerHTML 是符合 W3C 标准的属性，而 innerText、outerText、outerHTML 只适用于 IE 浏览器</li> <li>innerHTML 设置或获取位于对象起始和结束标签内的 HTML</li> <li>outerHTML 设置或获取对象及其内容的 HTML 形式</li> <li>innerText 设置或获取位于对象起始和结束标签内的文本</li> <li>outerText 设置(包括标签)或获取(不包括标签)对象的文本</li> </ul> <ol start="14"> <li>超链接的属性 target 的可选值：_blank, _parent, _self, _top 和框架名称有什么区别？</li> </ol> <ul> <li>_blank 浏览器会另开一个新窗口显示链接</li> <li>_self 在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。</li> <li>_parent 将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self 参数一样。</li> <li>_top 在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架</li> </ul> <ol start="15"> <li>添加插入替换删除到某个接点的方法，怎样创建和查找节点？</li> </ol> <ul> <li>obj.appendChild()</li> <li>obj.innersetBefore insertBefore() //插入</li> <li>obj.replaceChild</li> <li>obj.removeChild <ol> <li>创建新节点</li> </ol> <ul> <li>createDocumentFragment() //创建一个 DOM 片段</li> <li>createElement() //创建一个具体的元素</li> <li>createTextNode() //创建一个文本节点</li> </ul> <ol start="2"> <li>查找</li> </ol> <ul> <li>getElementsByTagName() //通过标签名称</li> <li>getElementsByName() //通过元素的 Name 属性的值</li> <li>getElementById() //通过元素 Id，唯一性</li> </ul> </li> </ul> <ol start="16"> <li>javascript 怎样选中一个 checkbox，怎样设置它无效？</li> </ol> <ul> <li><code>document.all.cb1[0].disabled = true;</code></li> </ul> <ol start="17"> <li>b 继承 a 的方法</li> </ol> <pre><code class="prism language-javascript"> function A(name){ this.name = name; this.sayHello = function(){ alert(this.name+” say Hello!”); }; } function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){ alert(this.id==ID) }; } </code></pre> <ol start="18"> <li>split() join() 的区别</li> </ol> <ul> <li>前者是切割成数组的形式，后者是将数组转换成字符串</li> </ul> <ol start="19"> <li>call、apply、bind 的区别</li> </ol> <ul> <li>call 和 apply 这两个方法都可以改变一个函数的上下文对象，只是接受参数的方式不一样，调用时会直接触发函数。 <ul> <li>call 接收的是逗号分隔的参数。</li> <li>apply 接收的是参数列表。</li> </ul> </li> <li>bind 也可以改变函数的上下文对象，接收的是逗号分隔的参数，但是不会立刻触发函数，只会创建一个新的函数，在调用时设置 this 关键字为提供的值</li> </ul> <ol start="20"> <li>javascript 中 callee 和 caller 的作用?</li> </ol> <ul> <li>caller 是返回一个对函数的引用，该函数调用了当前函数；</li> <li>callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文。</li> </ul> <ol start="21"> <li>数组方法 pop() push() unshift() shift()</li> </ol> <ul> <li>push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除</li> </ul> <ol start="22"> <li>例举 3 种强制类型转换和 2 种隐式类型转换?</li> </ol> <ul> <li>强制（parseInt,parseFloat,number）</li> <li>隐式（== ===）</li> </ul> <ol start="23"> <li>事件绑定和普通事件有什么区别</li> </ol> <ul> <li>普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。</li> </ul> <ol start="24"> <li>JS 和 JAVA 的作用域有什么区别</li> </ol> <ul> <li>java 是块级作用域，js 是函数作用域，没有块级作用域。</li> </ul> <ol start="25"> <li><code>foo = foo||bar</code> ，这行代码是什么意思？为什么要这样写？</li> </ol> <pre><code class="prism language-javaScript"> if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。 </code></pre> <ul> <li>短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。</li> </ul> <ol start="26"> <li>JS 继承与原型问题</li> </ol> <ul> <li> Js 所有的函数都有一个 prototype 属性，这个属性引用了一个对象，即原型对象，也简称原型。每一个对象都有原型，在浏览器中它体现在一个隐藏的 proto 属性上。当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找。这样逐级查找，一直找到了要找的方法。这些查找的原型构成了该对象的原型链条。原型最后指向的是 null。我们说的原型继承，就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性 27.同源策略 </li> <li> 同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源 </li> <li> 同源策略 SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，其初衷是为了浏览器的安全性，通过以下三种限制，保证浏览器不易受到 XSS、CSFR 等攻击。 </li> <li> 同源策略限制了以下行为： <ul> <li>（1）Cookie、LocalStorage 和 IndexDB 无法读取</li> <li>（2）DOM 和 Js 对象无法获得</li> <li>（3）AJAX 请求不能发送</li> </ul> </li> </ul> <ol start="28"> <li>事件委托</li> </ol> <ul> <li>让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行<code>event.target</code></li> </ul> <ol start="29"> <li>javascript 的本地对象，内置对象和宿主对象</li> </ol> <ul> <li>本地对象为 array obj regexp 等可以 new 实例化</li> <li>内置对象为 gload Math 等不可以实例化的</li> <li>宿主对象为浏览器自带的 document,window 等</li> </ul> <ol start="30"> <li>什么是伪数组？如何将伪数组转化为标准数组？</li> </ol> <ul> <li>伪数组(类数组):无法直接调用数组方法或期望 length 属性有什么特殊的行为,不具有数组的 push,pop 等方法,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数</li> <li>转换方法<code>Array.prototype.slice.call(伪数组)</code></li> </ul> <ol start="31"> <li>当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？</li> </ol> <ul> <li>直接在 DOM 里绑定事件：<code><div onclick=”test()”></div></code></li> <li>在 JS 里通过 onclick 绑定：<code>xxx.onclick = test</code></li> <li>通过事件添加进行绑定：<code>addEventListener(xxx, ‘click’, test)</code></li> </ul> <ol start="32"> <li>ES6</li> </ol> <ul> <li>es6 是一个新的标准，它包含了许多新的语言特性和库，是 JS 最实质性的一次升级。他还引入 module 模块的概念</li> <li>阮一峰 ES6 入门https://es6.ruanyifeng.com/</li> </ul> <ol start="33"> <li>如何实现一个对页面某个节点的拖曳？</li> </ol> <ul> <li>onmousedown 控制节点扩展的属性 droping 为 true(表示可以移动节点了)</li> <li>onmousemove 控制节点的位置(判断是否可以移动如果是就移动)</li> <li>ommouseup 控制节点的扩展属性为 false(表示不能移动节点了)</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <title>演示</title> <style type="text/css"></style> </head> <body> <div id="dropDiv"> 我可以拖动 </div> <script type="text/javascript"> function dropDivFun(Element) { //设置节点的定位为fixed Element.style.position = "fixed"; //获取事件对象函数方便获取事件的clientX function getEvent() { if (event) { e = event; } else if (window.event) { e = window.event; } else { e = arguments.callee.arguments[0]; } return e; } //添加mousedown事件 Element.addEventListener("mousedown", function() { var e = getEvent(); if (!Element.droping) { //设置droping为true并记录初始的位置 Element.droping = true; Element.start_x = e.clientX - Element.offsetLeft; Element.start_y = e.clientY - Element.offsetTop; } }); Element.addEventListener("mousemove", function() { var e = getEvent(); //移动节点 if (Element.droping) { Element.style.left = e.clientX - Element.start_x + "px"; Element.style.top = e.clientY - Element.start_y + "px"; } }); Element.addEventListener("mouseup", function() { if (Element.droping) { //设置droping为false并释放初始的变量 Element.droping = false; Element.start_x = null; Element.start_y = null; } }); } //为节点添加drop事件 dropDivFun(document.getElementById("dropDiv")); </script> </body> </html> </code></pre> <ol start="34"> <li>如何阻止冒泡事件和默认事件?</li> </ol> <ul> <li>阻止冒泡事件：</li> </ul> <pre><code class="prism language-js">function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } } </code></pre> <ul> <li>阻止默认行为</li> </ul> <pre><code class="prism language-js">function stopDefault(e) { if (e && e.preventDefault) { e.preventDefalut(); } else { window.event.returnValue = false; } } </code></pre> <ol start="35"> <li>JavaScript 的数据类型都有什么？</li> </ol> <ul> <li>基本数据类型：String,boolean,Number,Undefined, Null</li> <li>引用数据类型：Object(Array,Date,RegExp,Function)</li> <li>ES6 新增数据类型：Symbol</li> </ul> <ol start="36"> <li>数组去重的方法</li> </ol> <pre><code class="prism language-js">function func(arr) { let newArr = [...new Set(arr)]; return newArr; } </code></pre> <ol start="37"> <li>统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数</li> </ol> <pre><code class="prism language-js">s='abananbaacnncn' [...s].reduce((res, c) => { res[c]?res[c]++:res[c]=1; return res }, {}) </code></pre> <ol start="38"> <li>实现对该数组的倒排</li> </ol> <pre><code class="prism language-js">var reverse = function(str) { var stack = []; //生成一个栈 for (var len = str.length, i = len; i >= 0; i--) { stack.push(str[i]); } return join(""); }; var reverse = function(arr) { return arr.reverse(); }; var result = numberArray.sort(function(a, b) { return b - a; }); </code></pre> <ol start="39"> <li>写一个 function，清除字符串前后的空格。（兼容所有浏览器）</li> </ol> <pre><code class="prism language-js">function trim(str) { if (str && typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g, ""); //去除前后空白符 } } </code></pre> <ol start="40"> <li>实现函数 clone，可对 JavaScript 中的 5 种主要的数据类型（Number、String、Object、Array、Boolean）进行值复制。</li> </ol> <pre><code class="prism language-js">function clone(obj) { var o; switch (typeof obj) { case "undefined": break; case "string": o = obj + ""; break; case "number": o = obj - 0; break; case "boolean": o = obj; break; case "object": // object 分为两种情况对象（Object）或数组（Array） if (obj === null) { o = null; } else { if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { o = []; for (var i = 0; i < obj.length; i++) { o.push(clone(obj[i])); } } else { o = {}; for (var k in obj) { o[k] = clone(obj[k]); } } } break; default: o = obj; break; } return o; } </code></pre> <ol start="41"> <li>已知 ID 的 Input 输入框，如何获取这个输入框的输入值？</li> </ol> <ul> <li><code>document.getElementById(“ID”).value</code></li> </ul> <ol start="42"> <li>设置一个 ID 为 DIV 的 html 内容为 xxxx，字体颜色设置为黑色</li> </ol> <pre><code class="prism language-js">var dom = document.getElementById(“ID”); dom.innerHTML = “xxxx” dom.style.color = “#000” var dom = document.getElementById(“ID”); dom.innerHTML = “xxxx” dom.style.color = “#000” </code></pre> <ol start="43"> <li>y 和 z 的值</li> </ol> <pre><code class="prism language-js">var x = 1; var y = 0; var z = 0; function add(n) { n = n + 1; } y = add(x); function add(n) { n = n + 3; } z = add(x); //都为undefined，因为没有返回值 </code></pre> <ol start="44"> <li>写出函数 DateDemo 的返回结果，系统时间假定为今天</li> </ol> <pre><code class="prism language-js">function DateDemo() { var d, s = "今天日期是："; d = new Date(); s += d.getMonth() + "/"; s += d.getDate() + "/"; s += d.getYear(); return s; //今天的日期是:日/月/年（当前日期的年月日数字） } </code></pre> <ol start="45"> <li>运行结果</li> </ol> <pre><code class="prism language-js">for (i = 0, j = 0; i < 10, j < 6; i++, j++) { k = i + j; } //10 i=5 j=5结束 </code></pre> <ol start="46"> <li>运行结果</li> </ol> <pre><code class="prism language-js">function hi() { var a; alert(a);//undefined } function hi() { var a = null; alert(a);//null } </code></pre> <h2>Ajax 与 json</h2> <ol> <li>ajax 请求的时候 get 和 post 方式的区别</li> </ol> <ul> <li>GET 请求只能 URL 编码，而 POST 支持多种编码方式</li> <li>GET 请求只接受 ASCII 字符的参数，而 POST 则没有限制</li> <li>GET 请求的参数通过 URL 传送，而 POST 放在 Request Body 中</li> <li>GET 相对于 POST 更不安全，因为参数直接暴露在 URL 中</li> <li>GET 请求会被浏览器主动缓存，而 POST 不会（除非自己手动设置）</li> <li>GET 请求在 URL 传参有长度限制，而 POST 则没有限制</li> <li>GET 产生的 URL 地址可以被收藏，而 POST 不可以</li> <li>GET 请求的参数会被完整的保留在浏览器的历史记录里,POST 的参数不会</li> <li>GET 在浏览器回退时是无害的，而 POST 会再次提交请求</li> <li>GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包 <ul> <li>对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）；</li> <li>而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。</li> </ul> </li> </ul> <ol start="2"> <li>什么是 Ajax 和 JSON，它们的优缺点</li> </ol> <ul> <li>Ajax Ajax 是基于 HTTP 请求和 JS 语法的异步刷新技术，用于在 Web 页面中实现异步数据交互。 <ul> <li>实现思路 <ol> <li>获得 XMLHttpRequest 对象;</li> <li>注册回调函数 xhr.onreadystatechange=callback;</li> <li>设置和服务器端的链接信息 xhr.open(请求方式 get/post,url,设置异步或同步方式交互 true/false);</li> <li>发送数据开始交互。xhr.send(null);</li> <li>接受服务器端传回来的响应数据</li> </ol> </li> <li>实现代码</li> </ul> <pre><code class="prism language-js">var httpRequest; //请求对象 // 1.创建XMLHttpRequest对象 function getXMLHttpRequest() { if (window.XMLHttpRequest) { httpRequest = new XMLHttpRequest(); } else { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE低版本 } } function test() { getXMLHttpRequest(); // 2.指定获取数据的方式(常用POST和GET)和路径 true异步 false同步 httpRequest.open("GET", "data.txt", false); // 3.接受服务器端传回来的数据 httpRequest.onreadystatechange = function() { /* XMLHttpRequest的 readyState对象状态值，从0到4发生变化： 0 = （未初始化）请求未初始化（还没有调用open()方法） 1 = （加载）服务器连接已建立，正在加载（已调用send()方法，正在改善请求） 2 = （加载完成）请求已接收（send()方法完成，已全部响应内容） 3 = （交互）请求处理中（正在解析响应内容） 4 = （完成）请求已完成，且响应已就绪（响应内容解析完成） */ /* status是请求后的状态码 */ if (httpRequest.readyState == 4 && httpRequest.status == 200) { let m = httpRequest.responseText; //获得响应的文本型数据 console.log(m); } }; //4.发送请求 httpRequest.send(); } </code></pre> <ul> <li>优缺点 <ul> <li>优点 <ol> <li>无刷新更新局部数据</li> <li>异步与服务器通信</li> <li>提高用户体验</li> </ol> </li> <li>缺点 <ol> <li>跨域问题限制</li> <li>对搜索引擎支持较弱</li> <li>造成请求数增多</li> <li>AJAX 干掉了 Back 和 History 功能，即对浏览器机制的破坏，实现前进后退成本大。</li> </ol> </li> </ul> </li> </ul> </li> <li>JSON <ul> <li>JSON 是一种轻量级的数据交换格式，ECMA 的一个子集。</li> <li>解析 JSON <ul> <li><code>JSON.parse(string)</code> ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。</li> <li><code>JSON.stringify(obj)</code> ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。</li> </ul> </li> <li>优点 <ol> <li>数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小</li> <li>易于解析, 客户端 javascript 可通过 eval()进行 JSON 数据的读取搜索</li> <li>支持多种服务端语言, 包括 ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, php, Python, Ruby 等语言, 便于服务端解析</li> <li>轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）</li> </ol> </li> </ul> </li> </ul> <ol start="3"> <li>解释 jsonp 的原理，以及为什么不是真正的 ajax</li> </ol> <ul> <li>Ajax 的核心是通过 XMLHttpRequest 获取数据，而 JSONP 的核心则是动态添加<code><script></code>标签来调用服务器提供的 js 文件。</li> </ul> <ol start="4"> <li>post 和 put 方式的区别</li> </ol> <ul> <li>PUT 请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以 PUT 用来改资源）</li> <li>Post 请求：后一个请求不会把第一个请求覆盖掉。（所以 Post 用来增资源）</li> </ul> <h2>闭包与关键字 this</h2> <ol> <li>闭包是什么，有什么特性，对页面有什么影响</li> </ol> <ul> <li>闭包就是能够读取其他函数内部变量的函数。</li> <li>闭包的特性： <ol> <li>封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；</li> <li>持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。</li> </ol> </li> <li>优点：减少全局变量、减少传递函数的参数量、封装；</li> <li>缺点：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.</li> </ul> <ol start="2"> <li>js 中 this 的工作原理</li> </ol> <ul> <li>this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。但是有一个总原则，那就是 this 指的是调用函数的那个对象。this 一般情况下：是全局对象 Global/Window <ul> <li>全局范围内：指向全局对象；</li> <li>函数调用：指向全局对象</li> <li>方法调用：this 指向 test 对象</li> <li>调用构造函数：this 指向新创建的对象</li> <li>显示的设置 this：使用 call 或者 apply 方法时，this 指向第一个参数</li> </ul> </li> </ul> <h2>性能优化</h2> <ol> <li>知道哪些性能优化的方法？</li> </ol> <ul> <li>减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存，图片服务器。</li> <li>前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数</li> <li>用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。</li> <li>当需要设置的样式很多时设置 className 而不是直接操作 style。</li> <li>少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。</li> <li>避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。</li> <li>图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。</li> <li>避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。</li> </ul> <h2>其他</h2> <ol> <li>什么叫优雅降级和渐进增强？</li> </ol> <ul> <li>渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</li> <li>优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带</li> </ul> <ol start="2"> <li>浏览器的内核分别是什么?</li> </ol> <ul> <li>IE: trident 内核</li> <li>Firefox：gecko 内核</li> <li>Safari：webkit 内核</li> <li>Opera：以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核</li> <li>Chrome：Blink(基于 webkit，Google 与 Opera Software 共同开发)</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1276063936512278528"></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">  <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>  <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>  <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">你可能感兴趣的:(前端面试)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> 因为奋斗超太帅啦 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/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>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1834657327760896000.htm" title="2019年面试遇到的笔试题" target="_blank">2019年面试遇到的笔试题</a> 程序猿阿峰 <div>前端面试，肯定是少不了笔试题，果然，今天去面试就遇到的笔试题，慌了一批。回来赶紧整理了一下一、css3的常用的新特性？flex布局和传统布局有什么区别？css3的新特性那就多啦，简单的列举了几个：过渡transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)动画animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认</div> </li> <li><a href="/article/1834360380466491392.htm" title="最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求" target="_blank">最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求</a> 2401_84433769 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>自学几个月前端，为什么感觉什么都没学到？？这种现象在很多的初学者和自学前端的同学中是比较的常见的。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。这就会给人一个错误的信息就是，我把资料上的学</div> </li> <li><a href="/article/1834074221496594432.htm" title="如何将html模板资源转为vuecli项目，2024阿里巴巴前端面试真题解析" target="_blank">如何将html模板资源转为vuecli项目，2024阿里巴巴前端面试真题解析</a> m0_60607971 <a class="tag" taget="_blank" href="/search/2024%E5%B9%B4%E7%A8%8B%E5%BA%8F%E5%91%98%E5%AD%A6%E4%B9%A0/1.htm">2024年程序员学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>这里要注意一下。有些js是作者用于业务逻辑写的，有些js则是引入的成熟的第三方的js文件。如果直接也在vue中script处import这些js的话，是有各种问题的（最好别这么干）本人是前端小白，没法知道哪些是作者写的，哪些是引用的怎么办例如上图的这些。一般来说说可以看下具体js文件的内容。如果是压缩成一行的，基本上就是第三方的js库。这些第三方的库一般可以通过npminstallxxxx来进行安</div> </li> <li><a href="/article/1833871509874110464.htm" title="前端面试：CSS优化、提高性能的方法有哪些？" target="_blank">前端面试：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/css/1.htm">css</a> <div>在前端开发中，CSS优化和提高性能是确保网页快速加载和流畅运行的重要环节。以下是一些有效的方法：减少CSS文件大小：压缩CSS：使用工具（如CSSNano或CleanCSS）压缩CSS文件，去除空格、注释和不必要的字符。合并文件：将多个CSS文件合并为一个文件，减少HTTP请求次数。使用CSS预处理器：使用Sass、Less等预处理器，可以更好地组织和管理CSS代码，减少冗余，提高可维护性。避免使</div> </li> <li><a href="/article/1833610654443991040.htm" title="大前端面试题集锦——HTML篇" target="_blank">大前端面试题集锦——HTML篇</a> Midshar.top <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得</div> </li> <li><a href="/article/1833609898324226048.htm" title="高频面试题：ReactNative前端面试频率较高的面试题和答案（十六）" target="_blank">高频面试题：ReactNative前端面试频率较高的面试题和答案（十六）</a> 夲奋亻Jay <a class="tag" taget="_blank" href="/search/%E9%AB%98%E9%A2%91%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">高频面试题</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E7%AB%AF/1.htm">跨端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>ReactNative是一个由Facebook开发的框架，它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案：ReactNative是什么？答案：ReactNative是一个基于React构建的框架，允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同？答案：React</div> </li> <li><a href="/article/1833605109578297344.htm" title="前端技能树，面试复习第 54 天—— 手写代码：情景题" target="_blank">前端技能树，面试复习第 54 天—— 手写代码：情景题</a> 编程轨迹_ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">前端面试复习笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E5%86%99%E9%A2%98/1.htm">手写题</a><a class="tag" taget="_blank" href="/search/%E7%9C%9F%E9%A2%98/1.htm">真题</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E9%A2%98/1.htm">场景题</a> <div>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏：《前端面试复习笔记》（点击订阅）。1.循环打印红黄绿下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次；如何让三个灯不断交替重复亮灯？</div> </li> <li><a href="/article/1833450783916519424.htm" title="前端面试题（附答案）持续更新中……" target="_blank">前端面试题（附答案）持续更新中……</a> 卖家导航 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>块标签：div、h1~h6、ul、li、table、p、br、form。特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行行标签：span、a、img、textarea、select、option、input。特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。5.清除浮动⭐⭐⭐父级div定义overflow:hidden结尾处加空div标签c</div> </li> <li><a href="/article/1833268382229688320.htm" title="2023前端面试时遇到的面试题" target="_blank">2023前端面试时遇到的面试题</a> No regrets, no return <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>2023前端面试时遇到的面试题1.数组有哪些方法push、pop、unshift、shift、join、forEach、filter、map、find…2.filter和some返回的分别是一个什么filter返回的是一个数组，some返回的是一个布尔值3.es6新增了哪些方法let和cconst、模板字符串（）、扩展运算符、for…of、解构、箭头函数、symbol数据类型、Set和Map方法等</div> </li> <li><a href="/article/1833252619339001856.htm" title="【Uniapp】前端面试题" target="_blank">【Uniapp】前端面试题</a> 菜鸟una <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%96%87%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端八股文面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Uniapp部分文章目录Uniapp部分1.Uniapp的页面生命周期和Vue的生命周期有何区别？1）Vue的生命周期2）Uniapp的页面生命周期3）区别2.Uniapp的rpx转换px的公式？3.Uniapp的tabbar自定义，怎么实现突起home标？1）配置自定义tabBar2）创建自定义tabBar组件3）突出显示“home”标4.Uniapp的tabbar自定义，怎么实现隐藏原生tab</div> </li> <li><a href="/article/1832864040397926400.htm" title="【前端面试】标记、绘画视频的某一帧" target="_blank">【前端面试】标记、绘画视频的某一帧</a> 贾明恣 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a> <div>搜寻三方库在前端开发中，Canvas是一个强大的工具，可以用来创建图形、动画和各种视觉效果。为了简化和增强Canvas的使用，社区中出现了许多库。以下是一些主流的Canvas库及其特性和性能对比：Fabric.js：概述：Fabric.js是一个基于对象的Canvas库，提供了丰富的API来操作和管理Canvas元素。它特别适合处理交互式和可编辑的图形应用，如在线图像编辑器、绘图工具等。优点：面向</div> </li> <li><a href="/article/1832864041685577728.htm" title="【前端面试】深入回答http状态码" target="_blank">【前端面试】深入回答http状态码</a> 贾明恣 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>HTTP状态码是服务器在响应HTTP请求时返回的三位数代码，这些代码用于表示请求的结果。状态码分为五个类别，每个类别都有不同的含义：1xx（信息性状态码）：表示服务器接收到请求，并需要请求者继续执行操作。100Continue：表明服务器已接收到请求的一部分，要求客户端继续发送请求。如果服务器在接收到包含Expect:100-continue的请求后，没有准备好接收请求体，或者服务器配置不允许发送</div> </li> <li><a href="/article/1832863914082267136.htm" title="【前端面试】事件监听机制&React 的事件系统实现" target="_blank">【前端面试】事件监听机制&React 的事件系统实现</a> 贾明恣 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>目的React实现了自己的事件系统，主要是为了解决以下几个问题：跨浏览器兼容性：不同的浏览器在处理DOM事件时有不同的实现，React的事件系统抽象了这些差异，提供了一致的API给开发者使用。性能优化：React可以对事件进行池化（Pooling），这意味着事件对象可以在事件处理过程中被重用，减少了内存分配和垃圾回收的开销。合成事件（SyntheticEvents）：React使用合成事件来封装所</div> </li> <li><a href="/article/1832621352692051968.htm" title="JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ?" target="_blank">JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ?</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>刷了面试题之后才知道自己的知识是多么薄弱，这题我连Map和WeakMap是什么都不知道参考答案在JavaScript中，Map和WeakMap都是键值对的集合，但它们有几个重要的区别：1.键类型：Map对象的键可以是任何类型,包括基本数据类型和对象类型，而WeakMap对象的键必须是对象类型。2.垃圾回收：Map对象中的键和值都会被常规垃圾回收机制回收，而WeakMap中的键是弱引用，即在对象被垃</div> </li> <li><a href="/article/1832424300590755840.htm" title="2024最新前端面试真题-超详细答题思路解析（持续更新ing）" target="_blank">2024最新前端面试真题-超详细答题思路解析（持续更新ing）</a> 我的E样人生 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>为了更加高效的准备面试，所以面试题都来源于牛客网真题，让面试题更符合实际。1cookie，sessionStorage，localStorage的区别（1）考察点分析存储机制：了解每种存储方式的实现原理和数据存储方式。生命周期：掌握每种存储方式的数据存储时长和生命周期管理。作用域：理解每种存储方式的数据访问范围和作用域限制。（2）最终答案Cookie：存储机制：以文本形式存储在客户端浏览器中，通过</div> </li> <li><a href="/article/1832422786732224512.htm" title="Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动" target="_blank">Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动</a> 2401_84617681 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader:rules="rules"label-width="150px">定</div> </li> <li><a href="/article/1832415222267211776.htm" title="面试php项目中遇到的难点,前端面试被问到项目中的难点有哪些？" target="_blank">面试php项目中遇到的难点,前端面试被问到项目中的难点有哪些？</a> weixin_39966130 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95php%E9%A1%B9%E7%9B%AE%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%9A%BE%E7%82%B9/1.htm">面试php项目中遇到的难点</a> <div>在每个前端求职者的面试过程中，一定都有过被面试官问到项目中的难点，而答不上来的情况。为了让大家在前端面试前准备得更加充足，小编准备了一些易被忽视且难度较高的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作。1.流式布局如何实现，响应式布局如何实现？流式布局：也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景</div> </li> <li><a href="/article/1832353445194067968.htm" title="前端面试遇到的问题记录（实习）" target="_blank">前端面试遇到的问题记录（实习）</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>一、vue2和vue3的区别Vue2和Vue3之间存在一些重要的区别，这些差异主要体现在架构、API、性能优化和开发体验等方面。以下是Vue2和Vue3的主要区别：数据绑定原理:Vue2使用ES5的Object.defineProperty方法来劫持数据变化。Vue3则使用了ES6的ProxyAPI来代理数据，这样可以更高效地监听整个对象和数组的变化。支持碎片(Fragments):Vue2不支持</div> </li> <li><a href="/article/1832345612239073280.htm" title="前端面试题系列之-数据结构及算法篇" target="_blank">前端面试题系列之-数据结构及算法篇</a> wowoqu <div>排序算法篇一、冒泡排序冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。算法描述比较相邻的元素。如果第一个比第二个大，就交换它们两个；对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这</div> </li> <li><a href="/article/1831717080584515584.htm" title="Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级" target="_blank">Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级</a> 2401_84433769 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>结尾正式学习前端大概3年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】取消盒子的</div> </li> <li><a href="/article/1831715945849122816.htm" title="2024年前端真实面试题集合（前端面试关注我就够了）" target="_blank">2024年前端真实面试题集合（前端面试关注我就够了）</a> 泛微集团小王 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>前言：从2024年1月初到2月底为止，由本人伪装其他经验段去面试收集的来。面试城市在昆明、贵阳。前后一共差不多20家。其中三家大公司，其他都是中小型公司。拿到的offer薪酬也不是很理想，有几个规模比较大，比较理想的公司也是平薪甚至降薪拿到的offer，当然跟我本人自身的三脚猫功夫有关。整体大环境不是很友好，特别卷，各位靓仔靓女简历里的项目尽量不要带有电商系统，后台管理系统的字眼，很多hr，面试官</div> </li> <li><a href="/article/1831107088252760064.htm" title="手写Promise（前端面试题）第二篇 ·实例方法与静态方法" target="_blank">手写Promise（前端面试题）第二篇 ·实例方法与静态方法</a> DT—— <a class="tag" taget="_blank" href="/search/%E6%89%8B%E5%86%99promise/1.htm">手写promise</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><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>目录1.实例方法catch2.finally方法3.MyPromise.resolve()4.MyPromise.reject()5.MyPromise.race()6.MyPromise.all()7.MyPromise.allSettled()8.MyPromise.any()总结1.实例方法catch在promise中，每一个promise实例都有一个catch方法，该方法接收一个回调函数，</div> </li> <li><a href="/article/1831107087317430272.htm" title="手写Promise.all() 方法(前端面试真题）" target="_blank">手写Promise.all() 方法(前端面试真题）</a> DT—— <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/%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><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>文章目录promise简介第一版第二版小结promise简介Promise是JavaScript在ES6中引入的一种用于异步计算的对象。它代表了一个可能现在还没有结果，但将来某个时刻会有结果的值。Promise的主要目的是提供一个更合理、更强大的方式来处理异步操作。状态：一个Promise对象有三种状态：Pending（等待中）：初始状态，既不是成功，也不是失败状态。Fulfilled（已成功）：</div> </li> <li><a href="/article/1830922933049061376.htm" title="2024前端面试题-篇章二" target="_blank">2024前端面试题-篇章二</a> 蕉君桑 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>几种实现css绝对居中(水平、垂直居中)的方法方法有很多需要的自己再去探索1.flex+margin:auto.test{display:flex;width:600px;height:400px;background-color:rgb(39,203,170);.item{width:100px;height:100px;background-color:skyblue;border:1pxso</div> </li> <li><a href="/article/1830921167842668544.htm" title="前端面试题每日一学_3" target="_blank">前端面试题每日一学_3</a> 努力的小朱同学 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%AF%8F%E6%97%A5%E4%B8%80%E5%AD%A6/1.htm">前端每日一学</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>今日一题：下面的JS代码执行的结果是什么？consta=Boolean()console.log(a);constb=Boolean(null);console.log(b);constc=Boolean(NaN);console.log(c);constd=Boolean('false');console.log(d);conste=Boolean({});console.log(e);cons</div> </li> <li><a href="/article/1830703018279006208.htm" title="第 35 题：如何实现字符串反序？" target="_blank">第 35 题：如何实现字符串反序？</a> Noxus丶SJ <div>利用数组的reverse实现letarr='abcdefg';letres=[...arr].reverse().join('');console.log(res);//gfedcba文章的内容/灵感都从下方内容中借鉴【持续维护/更新500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues【大数据可视化图表插件】https</div> </li> <li><a href="/article/1830680156260364288.htm" title="【前端面试】rpc协议" target="_blank">【前端面试】rpc协议</a> 贾明恣 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a> <div>rpc的概念RPC（RemoteProcedureCall，远程过程调用）是一种计算机通信协议，它允许一个程序（客户端）通过网络向另一个程序（服务器）请求服务，使得开发者可以像调用本地函数一样调用远程服务器上的函数或方法。RPC的主要特点包括：透明性：调用远程过程就像调用本地过程一样，对调用者来说，两者没有区别。位置无关性：调用者不需要知道服务的物理位置，也不需要了解服务是如何实现的。协议无关性：</div> </li> <li><a href="/article/1830672968469016576.htm" title="【前端面试】React深度学习（下）" target="_blank">【前端面试】React深度学习（下）</a> 贾明恣 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E4%B8%93%E6%A0%8F/1.htm">前端面试专栏</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>render阶段：构建Fiber树Fiber节点是如何被创建并构建Fiber树的render阶段的工作可以分为“递”阶段和“归”阶段。“递”阶段会执行beginWork:根据传入的Fiber节点创建子Fiber节点，并将这两个Fiber节点连接起来。当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。“归”阶段会执行completeWorkbeginWorkcurrent：当前组件对应的F</div> </li> <li><a href="/article/1829380193148563456.htm" title="2024React前端面试题" target="_blank">2024React前端面试题</a> 司宁 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.Diff算法Diff算法比较过程第一步：patch函数中对新老节点进行比较如果新节点不存在就销毁老节点如果老节点不存在，直接创建新的节点当两个节点是相同节点的时候，进入patctVnode的过程，比较两个节点的内部第二步：patchVnode函数比较两个虚拟节点内部如果两个虚拟节点完全相同，返回当前vnode的children不是textNode，再分成三种情况-有新children，没有旧c</div> </li> <li><a href="/article/40.htm" title="java线程Thread和Runnable区别和联系" target="_blank">java线程Thread和Runnable区别和联系</a> zx_code <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a> <div>我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(</div> </li> <li><a href="/article/167.htm" title="【转】JSON与XML的区别比较" target="_blank">【转】JSON与XML的区别比较</a> 丁_新 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标</div> </li> <li><a href="/article/294.htm" title="c++ 实现五种基础的排序算法" target="_blank">c++ 实现五种基础的排序算法</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>#include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排</div> </li> <li><a href="/article/421.htm" title="我的软件" target="_blank">我的软件</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E8%BD%AF%E4%BB%B6/1.htm">我的软件</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E4%B9%90%E7%B1%BB/1.htm">音乐类</a><a class="tag" taget="_blank" href="/search/%E5%A8%B1%E4%B9%90/1.htm">娱乐</a><a class="tag" taget="_blank" href="/search/%E6%94%BE%E6%9D%BE/1.htm">放松</a> <div> 这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、</div> </li> <li><a href="/article/548.htm" title="linux awk命令详解" target="_blank">linux awk命令详解</a> 被触发 <a class="tag" taget="_blank" href="/search/linux+awk/1.htm">linux awk</a> <div>awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val</div> </li> <li><a href="/article/675.htm" title="各种语言比较" target="_blank">各种语言比较</a> _wy_ <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a> <div> Java Ruby PHP 擅长领域 </div> </li> <li><a href="/article/802.htm" title="oracle 中数据类型为clob的编辑" target="_blank">oracle 中数据类型为clob的编辑</a> 知了ing <a class="tag" taget="_blank" href="/search/oracle+clob/1.htm">oracle clob</a> <div>public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db</div> </li> <li><a href="/article/929.htm" title="分布式服务框架 Zookeeper -- 管理分布式环境中的数据" target="_blank">分布式服务框架 Zookeeper -- 管理分布式环境中的数据</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两</div> </li> <li><a href="/article/1056.htm" title="tomcat数据源" target="_blank">tomcat数据源</a> alafqq <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。没有使用JNDI时我用要这样连接数据库： 03. Class.forName("com.mysql.jdbc.Driver"); 04. conn</div> </li> <li><a href="/article/1183.htm" title="遍历的方法" target="_blank">遍历的方法</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E9%81%8D%E5%8E%86/1.htm">遍历</a> <div> 遍历在java的泛</div> </li> <li><a href="/article/1310.htm" title="linux查看硬件信息的命令" target="_blank">linux查看硬件信息的命令</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux查看硬件信息的命令一.查看CPU： cat /proc/cpuinfo 二.查看内存： free 三.查看硬盘： df linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能</div> </li> <li><a href="/article/1437.htm" title="java常见的ClassNotFoundException" target="_blank">java常见的ClassNotFoundException</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization </div> </li> <li><a href="/article/1564.htm" title="【Gson五】日期对象的序列化和反序列化" target="_blank">【Gson五】日期对象的序列化和反序列化</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">反序列化</a> <div>对日期类型的数据进行序列化和反序列化时，需要考虑如下问题： 1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals 默认序列化和反序列化 import com</div> </li> <li><a href="/article/1691.htm" title="【Spark八十六】Spark Streaming之DStream vs. InputDStream" target="_blank">【Spark八十六】Spark Streaming之DStream vs. InputDStream</a> bit1129 <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div> 1. DStream的类说明文档： /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st</div> </li> <li><a href="/article/1818.htm" title="通过nginx获取header信息" target="_blank">通过nginx获取header信息</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+header/1.htm">nginx header</a> <div>1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") { set $all_cookie $1; } 变量$all_cookie就获得了cookie的值，可以用于运算了 </div> </li> <li><a href="/article/1945.htm" title="java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999" target="_blank">java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串</div> </li> <li><a href="/article/2072.htm" title="Netty源码学习-ReplayingDecoder" target="_blank">Netty源码学习-ReplayingDecoder</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH</div> </li> <li><a href="/article/2199.htm" title="js特殊字符过滤" target="_blank">js特殊字符过滤</a> cngolon <a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6/1.htm">js特殊字符</a><a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E8%BF%87%E6%BB%A4/1.htm">js特殊字符过滤</a> <div>1.js中用正则表达式过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"</div> </li> <li><a href="/article/2326.htm" title="hibernate使用sql查询" target="_blank">hibernate使用sql查询</a> ctrain <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa</div> </li> <li><a href="/article/2453.htm" title="linux shell脚本中切换用户执行命令方法" target="_blank">linux shell脚本中切换用户执行命令方法</a> daizj <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a><a class="tag" taget="_blank" href="/search/%E5%88%87%E6%8D%A2%E7%94%A8%E6%88%B7/1.htm">切换用户</a> <div>经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下： 1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" </div> </li> <li><a href="/article/2580.htm" title="好的代码里只要一个 return 语句" target="_blank">好的代码里只要一个 return 语句</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/return/1.htm">return</a> <div>别再这样写了：public boolean foo() { if (true) { return true; } else { return false; </div> </li> <li><a href="/article/2707.htm" title="Android动画效果学习" target="_blank">Android动画效果学习</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、透明动画效果方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals</div> </li> <li><a href="/article/2834.htm" title="linux复习笔记之bash shell (4)管道命令" target="_blank">linux复习笔记之bash shell (4)管道命令</a> eksliang <a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4%E6%B1%87%E6%80%BB/1.htm">linux管道命令汇总</a><a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux管道命令</a><a class="tag" taget="_blank" href="/search/linux%E5%B8%B8%E7%94%A8%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux常用管道命令</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2105461 bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？答：非常的经典的一句话，记住了，何为管</div> </li> <li><a href="/article/2961.htm" title="Android系统中自定义按键的短按、双击、长按事件" target="_blank">Android系统中自定义按键的短按、双击、长按事件</a> gqdy365 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在项目中碰到这样的问题：由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住； </div> </li> <li><a href="/article/3088.htm" title="asp.net获取站点根目录下子目录的名称" target="_blank">asp.net获取站点根目录下子目录的名称</a> hvt <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><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a> <div>使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" /> 那么在页面上显示根目录子文件夹的代码如下： string[] m_sub</div> </li> <li><a href="/article/3215.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> justjavac <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。写道程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可</div> </li> <li><a href="/article/3342.htm" title="c++编程随记" target="_blank">c++编程随记</a> lx.asymmetric <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div> 为了字体更好看，改变了格式…… &&运算符： #include<iostream> using namespace std; int main(){ int a=-1,b=4,k; k=(++a<0)&&!(b--</div> </li> <li><a href="/article/3469.htm" title="linux标准IO缓冲机制研究" target="_blank">linux标准IO缓冲机制研究</a> 音频数据 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，</div> </li> <li><a href="/article/3596.htm" title="随想生活" target="_blank">随想生活</a> 暗黑小菠萝 <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我</div> </li> <li><a href="/article/3723.htm" title="我认为POJO是一个错误的概念" target="_blank">我认为POJO是一个错误的概念</a> windshome <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1/1.htm">设计</a> <div> 这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。 &</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>