前端修罗场

【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React

⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

盒模型

https://www.cnblogs.com/chengzp/p/cssbox.html

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有两种标准的，一个是标准模型，一个是IE模型。

在标准模型中，盒模型的宽高 = 内容（content）的宽高，
IE模型中盒模型的宽高 = 内容(content)+填充(padding)+边框(border)的总宽高

css如何设置两种模型:

/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

js获取宽高

dom.offsetWidth/offsetHeight //最常用的，也是兼容最好的

边距重叠

边距重叠解决方案BFC(块级格式化上下文)

//原理

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

创建BFC

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

应用场景
1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直margin重叠

清除浮动

父级div定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}//zoom(IE转有属性)可解决ie6,ie7浮动问题

在结尾处添加空div标签clear:both

.clearfloat{clear:both}//添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

父级div定义height

父级div手动定义height，就解决了父级div无法自动获取到高度的问题

父级div定义overflow:hidden

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

父级div定义overflow:auto

必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

父级div也一起浮动

所有代码一起浮动，就变成了一个整体,会产生新的浮动问题。

父级div定义display:table: 将div属性变成表格
结尾处加br标签clear:both:父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both

Position

https://segmentfault.com/a/1190000013683068

inline-block中间会有空隙

内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列（2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等

间隙是由换行或者回车导致的。只要把标签写成一行或者标签直接没有空格，就不会出现间隙。但是这种方式是不太可靠。在父容器上使用font-size:0;可以消除间隙(把空格隐藏/去除)，对于Chrome, 其默认有最小字体大小限制，考虑到兼容性，需要取消字体大小限制。

.demo {font-size: 0;-webkit-text-size-adjust:none;}

层叠优先级

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

按照权重取最大(取权重最大值显示)去确定最后样式:

!importrant >内联>ID派生选择器(#id h1)> id(100)> class(10)>标签(1)>继承(0.5)

怎样覆盖 `!important`

很简单，只需再添加一条带 !important 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面,总之，最后定义一条规则比胜）。

或者使用相同的选择器，但是置于已有的样式之后;

或干脆改写原来的规则，以避免使用 !important。

HTTP:地址栏输入url到显示页面的步骤

基本流程：

a. 域名解析

b. 发起TCP的3次握手（TCP连接理论上不会自动断开）

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

在浏览器地址栏输入URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
- 如果资源未缓存，发起新请求
- 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
- 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
  - HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
  - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析URL获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip地址，过程如下：
- 浏览器缓存
- 本机缓存
- hosts文件
- 路由器缓存
- ISP DNS缓存
- DNS递归查询（可能存在负载均衡导致每次IP不一样）
端口建立TCP链接，三次握手
TCP链接建立后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应，然后根据情况选择**关闭TCP连接或者保留重用，关闭TCP连接的四次握手
浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
构建DOM树：
解析过程中遇到图片、样式表、js文件，启动下载
构建CSSOM树：
根据DOM树和CSSOM树构建渲染树
js解析
显示页面

数据类型

基本类型：数字（number）、字符串（string）、布尔值（boolean）、null、undefined、Symbol
引用（对象）类型：function、array、object 对象是可变的，即值是可以修改的;对象的比较并非值得比较
undefined表示系统级的、出乎意料的或类似错误的值的空缺；表示缺少值，此处应该有值，但没有定义
null表示程序级的、正常的或在意料之中的值的空缺；一般多使用null。

null表示没有对象，即该处不应该有值

1）作为函数的参数，表示该函数的参数不是对象

2）作为对象原型链的终点

undefined表示缺少值，即此处应该有值，但没有定义

1）定义了形参，没有传实参，显示undefined

2）对象属性名不存在时，显示undefined

3）函数没有写返回值，即没有写return，拿到的是undefined

4）写了return，但没有赋值，拿到的是undefined

null和undefined转换成number数据类型

null 默认转成 0

undefined 默认转成 NaN
```
typeof null         // object (因为一些以前的原因而不是'null')
typeof undefined    // undefined
null === undefined  // false
null  == undefined  // true
null === null  // true
null == null  // true
!null //true
isNaN(1 + null)  // false
isNaN(1 + undefined)  // true
```
Symbol:它的功能类似于一种标识唯一性的ID。通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例：
```
let s1 = Symbol()
```
每个Symbol实例都是唯一的。因此，当你比较两个Symbol实例的时候，将总会返回false.

应用场景：
1. 使用Symbol来作为对象属性名(key)
 
 注意：Symbol类型的key是不能通过Object.keys()或者for...in来枚举的，它未被包含在对象自身的属性名集合(property names)之中，所以，利用该特性，我们可以**把一些不需要对外操作和访问的属性使用Symbol来定义。**当使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外
2. 使用Symbol来替代常量
```
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()
```
3. 使用Symbol定义类的私有属性/方法:私有化内部属性/方法
4. 注册和获取全局Symbol
 
 通常情况下，我们在一个浏览器窗口中（window），使用Symbol()函数来定义和Symbol实例就足够了。但是，如果你的应用涉及到多个window（最典型的就是页面中使用了</code>），并需要这些window中使用的某些Symbol是同一个，那就不能使用<code>Symbol()</code>函数了，因为用它在不同window中创建的Symbol实例总是唯一的，而我们需要的是在所有这些window环境下保持一个共享的Symbol。这种情况下，我们就需要使用另一个API来创建或获取Symbol，那就是<code>Symbol.for()</code>，它可以注册或获取一个window间全局的Symbol实例： <pre><code class="prism language-js">let gs1 = Symbol.for('global_symbol_1') //注册一个全局Symbol let gs2 = Symbol.for('global_symbol_1') //获取全局Symbol gs1 === gs2 // true </code></pre> </li> </ol> </li> </ul> <h1>实现深复制的三种方法</h1> <ul> <li> <h3>使用递归实现</h3> <pre><code class="prism language-js">//使用递归的方式实现数组、对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "object") { for (key in obj) { if (obj.hasOwnProperty(key)) { if (obj[key] && typeof obj[key] === "object") { objClone[key] = deepClone1(obj[key]); } else { objClone[key] = obj[key]; } } } } return objClone; } </code></pre> </li> <li> <h3>通过 JSON 对象实现深拷贝</h3> <pre><code class="prism language-js">//通过js的内置对象JSON来进行数组对象的深拷贝 function deepClone2(obj) { var _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone; } </code></pre> </li> <li> <h3>通过jQuery的extend方法实现深拷贝</h3> <pre><code class="prism language-js">var array = [1,2,3,4]; var newArray = $.extend(true,[],array); </code></pre> </li> <li> <h3>lodash函数库实现深拷贝</h3> <pre><code>lodash.cloneDeep()实现深拷贝 </code></pre> </li> <li> <h3>Object.assign()拷贝</h3> <pre><code>当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。 </code></pre> </li> </ul> <h1>JQuery 获取ID元素与JS获取的区别</h1> <ul> <li>KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id")获取的对象其实是一个数…(“#id”)[0]，这样两个就相等了。</li> </ul> <h1>vue中组件通信方式</h1> <ul> <li> <h3>父组件向子组件传值:</h3> 父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed </li> <li> <h3>子组件向父组件传值: 通过事件形式$emit: 子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件</h3> </li> <li> 通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级 </li> <li> Vuex: Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。 vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。 </li> </ul> <h2>总结</h2> <ul> <li> 父子通信： <blockquote> 父向子传递数据是通过 props，子向父是通过 events**（<code>$emit</code>）**；通过父链 / 子链也可以通信（<code>$parent</code> / <code>$children</code>）；ref 也可以访问组件实例；provide / inject API；<code>$attrs/$listeners</code> </blockquote> </li> <li> 兄弟通信：Bus；Vuex </li> <li> 跨级通信：Bus；Vuex；provide / inject API、<code>$attrs/$listeners</code> </li> </ul> <h1>同源策略</h1> <blockquote> 如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 </blockquote> <h2>跨域的解决方法</h2> <h2>https://www.cnblogs.com/laixiangran/p/9064769.html</h2> <ul> <li> <h3>CORS（跨域资源共享）: 是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。</h3> 整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。 浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。 <ul> <li>简单请求：浏览器直接发出CORS请求，在头信息中添加一个Origin字段，用来说明请求来自哪个源，服务器根据这个值，决定是否同意这次请求。</li> </ul> 如果服务器不许可，则返回的信息中不会包含Access-Control-Allow-Origin字段，这个错误需要onerror捕获，返回的状态码可能为200； 如果服务器许可，则服务器返回的响应中会多出Access-Control-字段； CORS默认不发送cookie，需要发送cookies，则需要服务器指定Access-Control-Allow-Credentials字段，需要在ajax请求中打开withCredentials属性； <ul> <li>非简单请求/复杂请求：请求方法是PUT或DELETE，Content-Type字段类型是application/json。</li> </ul> **会在正式通信前，增加一次OPTIONS查询请求，预检请求（目的就是为了判断实际发送的请求是否是安全的）****。**询问服务器，网页所在域名是否在服务器的许可名单中，以及可以使用那些HTTP动词和头信息字段，只有得到肯定答复，浏览器才会发出正式XMLHTTPRequest请求，否则会报错 服务器通过预检请求，以后每次浏览器正常CORS请求，都会和简单请求一样，会有一个Origin字段，服务器的回应也会有yieldAccess-Control-Allow-Origin头信息字段 </li> <li> <h3>JSONP 跨域: 借助script标签能跨域的原理。流量器告诉服务端一个回调函数的名称，服务端在返回的script里面调用这个回调函数，同时传进客户端需要的数据，这个返回的代码就能在浏览器上执行了。</h3> JSONP和CORS比较，缺点是支持是get类型。优点是兼容老版本浏览器。 </li> <li> <h3>图像 Ping 跨域</h3> </li> <li> <h3>服务器代理</h3> </li> <li> <h3>document.domain =“父域”：子域跨父域</h3> </li> <li> <h3>window.name 跨域</h3> </li> <li> <h3>location.hash 跨域</h3> </li> <li> <h3>postMessage 跨域：父窗口向子iframe传消息</h3> </li> </ul> <h1>进程线程</h1> <ul> <li>进程：是执行中一段程序，即一旦程序被载入到内存中并准备执行，它就是一个进程。进程是表示资源分配的的基本概念，又是调度运行的基本单位，是系统中的并发执行的单位。</li> <li>线程：单个进程中执行中每个任务就是一个线程。</li> <li>一个线程只能属于一个进程，但是一个进程可以拥有多个线程。多线程处理就是允许一个进程中在同一时刻执行多个任务</li> <li>线程没有地址空间，线程包含在进程的地址空间中</li> <li>父和子进程使用进程间通信机制</li> <li>进程内的任何线程都被看做是同位体，且处于相同的级别。不管是哪个线程创建了哪一个线程，进程内的任何线程都可以销毁、挂起、恢复和更改其它线程的优先权。</li> <li>子进程不对任何其他子进程施加控制，进程的线程可以对同一进程的其它线程施加控制。</li> </ul> <h1>状态码</h1> HTTP状态码共分为5种类型： <table> <thead> <tr> <th>1**</th> <th>信息，服务器收到请求，需要请求者继续执行操作</th> </tr> </thead> <tbody> <tr> <td>2**</td> <td>成功，操作被成功接收并处理</td> </tr> <tr> <td>3**</td> <td>重定向，需要进一步的操作以完成请求</td> </tr> <tr> <td>4**</td> <td>客户端错误，请求包含语法错误或无法完成请求</td> </tr> <tr> <td>5**</td> <td>服务器错误，服务器在处理请求的过程中发生了错误</td> </tr> </tbody> </table> 常见的HTTP状态码： <ul> <li>200 - 请求成功</li> <li>301 - 资源（网页等）被永久转移到其它URL</li> <li>302- 资源只是临时被移动。客户端应继续使用原有URI</li> <li>304- 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。</li> <li>404 - 请求的资源（网页等）不存在</li> <li>500 - 内部服务器错误</li> <li>502- 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应</li> </ul> <h1>前端缓存</h1> cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。 cookie的缺点主要集中于安全性和隐私保护。 localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同 localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽 localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡 localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 <h1>白屏之前的步骤优化</h1> 发生的原因基本可以归结为网速&静态资源 1、css文件加载需要一些时间，在加载的过程中页面是空白的。解决：可以考虑将css代码前置和内联。 2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。 3、首屏内联js的执行会阻塞页面的渲染。解决：尽量不在首屏html代码中放置内联脚本。 根本原因是客户端渲染的无力，因此最简单的方法是在服务器端，使用模板引擎渲染所有页面。同时: 1减少文件加载体积，如html压缩，js压缩 2加快js执行速度比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西 3提供一些友好的交互，比如提供一些假的滚动条 4使用本地存储处理静态文件。 <h1>vue首屏性能优化，解决页面加载时间过长（白屏）方法</h1> <ul> <li> <h2>路由懒加载</h2> 在 router.js文件中，原来的静态引用方式，如： <pre><code class="prism language-js">import ShowBlogs from '@/components/ShowBlogs' routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ] </code></pre> 改为： <pre><code class="prism language-js"> routes:[ path: 'Blogs', name: 'ShowBlogs', component: () => import('./components/ShowBlogs.vue') ] </code></pre> 如果是在 vuecli 3中，我们还需要多做一步工作 因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能，在 vue.config.js中设置: <img src="http://img.e-com-net.com/image/info8/99a43ac3717e44e0966480325c2315ef.jpg" alt="img" width="0" height="0"> </li> <li> <h2>ui框架按需加载</h2> 在 .babelrc / babel.config.js文件中添加（ vue-cli 3要先安装 babel-plugin-component)： <pre><code class="prism language-js">plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] </code></pre> </li> <li> <h2>gzip压缩</h2> 安装 compression-webpack-plugin </li> </ul> <pre><code class="prism language-js">cnpm i compression-webpack-plugin -D </code></pre> 在 vue.congig.js中引入并修改 webpack配置: <pre><code class="prism language-js">const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production' return { plugins: [new CompressionPlugin({ test: /\.js$|\.html$|\.css/, //匹配文件名 threshold: 10240, //对超过10k的数据进行压缩 deleteOriginalAssets: false //是否删除原文件 })] } } </code></pre> 在服务器我们也要做相应的配置 如果发送请求的浏览器支持 gzip，就发送给它 gzip格式的文件。 https://segmentfault.com/a/1190000020383064 https://segmentfault.com/a/1190000019499007 <h1>Vue 响应式原理</h1> <h2>数据劫持</h2> <blockquote> 数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。 </blockquote> vue中通过<code>observe</code>方法实现所有的数据属性的劫持. <ul> <li>vue在实例化的时候会将data数据中的属性都做数据劫持。</li> <li>如果是对象，也会迭代本身属性将全部属性都实现数据劫持</li> <li>当赋值的时候，如果是<code>newVal</code>是对象，也会去迭代<code>newVal</code>的属性实现全部属性的数据劫持</li> </ul> <code>Array对象</code>是没有办法通过上述方法实现数据劫持的: vue中实现的方法实际是对数组的属性重写，重写过后的方法不仅能实现原有的功能，还能发布消息给订阅者。 如果要更新 <code>Array</code> 某个索引对应的值得时候，要用Vue.set方式实现 Vue.set是对数据进行拦截,实际就是数据劫持处理，并发布一次消息 <h1>手写bind</h1> <pre><code class="prism language-js">//context为需要被绑定上的对象，arguments是参数 Function.prototype.bind = function(context){ var self = this; //this => Function return function(){ return self.apply(context,arguments) } } </code></pre> <h1>http与https区别</h1> <ul> <li>https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。</li> <li>http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。</li> <li>http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。</li> <li>http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。</li> </ul> <h2>HTTPS 连接过程</h2> 服务器发送它的证书给浏览器，浏览器确认证书正确，并检查证书中对应的主机名是否正确，如果正确则双方加密数据后发给对方，对方再进行加密，保证数据是不透明的。 非对称加密算法：加密用密钥，解密用公钥，公钥是公开的，密钥是不会传播的。常见的算法如:RSA。 <h1>SSL原理</h1> <a href="http://img.e-com-net.com/image/info8/3953a4be74604237856123d83191d025.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3953a4be74604237856123d83191d025.jpg" alt="【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React_第3张图片" width="650" height="494" style="border:1px solid black;"></a> <h1>es6之扩展/剩余运算符三个点（…）</h1> <ul> <li>对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中</li> </ul> <h1>前端跨脚本攻击攻击xss</h1> XSS也称为跨脚本攻击，是一种恶意脚本，可以获取用户得cookie、token、session. 分为存储性（持久型）、反射型（非持久型）、基于DOM <ul> <li>尽量少使用<code>appenChid</code>、<code>innerHTML</code>、<code>outerHTML</code>等标签，而使用<code>innerText</code>、<code>textContent</code>、<code>setAttribute</code></li> <li>前端过滤:url: 可以使用<code>encodeURIComponent</code> 进行转义</li> <li>通过 Content-Security-PolicyHTTP头来开启CSP:</li> <li>通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。如果 Cookie 不想被客户端 JavaScript 脚本调用，那么就应该为其设置 HttpOnly 标记。</li> </ul> <h1>CSRF跨站请求伪造</h1> CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器. 由于同源策略，跨域的Ajax请求不会带上Cookie，然而script/iframe/img等标签却是支持跨域的。所以在请求的时候是会带上cookie的。 <ul> <li> Get 请求不对数据进行修改/写 </li> <li> 不让第三方网站访问到用户Cookie </li> <li> 阻止第三方网站请求接口 </li> <li> 请求时附带验证信息，如验证码或Token,可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token。 </li> <li> XSS是利用用户对指定网站的信任 </li> <li> CSRF是利用网站对用户的信任 </li> </ul> <h1>call apply bind区别</h1> <ul> <li>call、apply、bind的作用是改变函数运行时this的指向</li> <li>call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。</li> <li>apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。</li> <li>bind和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。bind返回对应函数, 便于稍后调用； apply, call则是立即调用。</li> <li>箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象</li> </ul> <h1>++1 和i++哪个效率高</h1> ++i的效率高些，++i在运算过程中不产生临时对象，返回的就是i,是个左值，类似++i=1这样的表达式是合法的，而i++在运算的过程中会产生临时对象，返回的是零时对象的值，是个右值,像i++=1这样的表达式是非法的. 对于内置类型，单独的i++和++i语句，现在的编译器基本上都会优化成++i,所以就没什么区别了 <h1>webpack热更新 HMR</h1> 为 Webpack 开发环境开启热更新，要做两件事： <ul> <li>使用 <code>HotModuleReplacementPlugin</code> 插件</li> <li>打开 <code>webpack-dev-server</code> 的热更新开关</li> </ul> 每次 compiler 的 ‘done’ 钩子函数被调用的时候就会要求客户端去检查模块更新，如果客户端不支持 HMR，那么就会全局加载。通过 webpack-dev-server 提供的 websocket 服务端代码通知 websocket 客户端发送的 ok 和 warning 信息的时候会要求更新。如果支持 HMR 的情况下就会要求检查更新，同时发送过来的还有服务器端本次编译的 compilation 的 hash 值。如果不支持 HMR，那么要求刷新页面。如果 ok 则调用reloadApp方法，而 reloadApp 方法判断如果开启了 HMR 模式，通过hotEmitter 执行webpackHotUpdate方法，如果不是 Hotupdate 那么直接 reload刷新网页。所以"webpack/hot/only-dev-server"的文件内容就是检查哪些模块更新了（通过 webpackHotUpdate 事件完成，而该事件依赖于compilation的 hash 值），其中哪些模块更新成功，而哪些模块由于某种原因没有更新成功。 <h1>sass less</h1> <h1>事件流，冒泡捕获</h1> 从页面中接收事件的顺序称为事件流. IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。 Netscape Communicator团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预期目标之前捕获它。 “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。 先捕获，后冒泡 事件流比较典型应用是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理一类型的所有事件。 <h1>强缓存，协商缓存</h1> <ul> <li> <h3>强缓存：强缓存是利用http的返回头中的<code>Expires</code>或者<code>Cache-Control</code>两个字段来控制的，用来表示资源的缓存时间。</h3> Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。 </li> <li> <h3>协商缓存：协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。</h3> 这主要涉及到下面两组header字段，这两组搭档都是<code>成对</code>出现的，即第一次请求的响应头带上某个字段**（<code>Last-Modified</code>或者<code>Etag</code>）**，则后续请求则会带上对应的请求字段（<code>If-Modified-Since</code>或者<code>If-None-Match</code>），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。Etag/If-None-Match返回的是一个校验码。ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。 </li> </ul> <h1>装饰者模式</h1> 装饰模式指的是在不必改变原类文件和使用继承的情况下，**动态地扩展一个对象的功能。**它是通过创建一个包装对象，也就是装饰来包裹真实的对象。 适用场景：当遇到新的功能或需求需要对原来的操作做出更改时，若原来的操作比较复杂，可以把原来的操作原封不动地放在装饰者中，然后再添加新功能。 <pre><code class="prism language-js">function Person() { } Person.prototype.sayHello = function() { console.log('Hello, Alice!'); }; function Decorator(param) { this.person = param; } Decorator.prototype.sayHello = function() { this.person.sayHello(); console.log('Hello, Bruce!'); }; new Decorator(new Person()).sayHello(); </code></pre> <h1>WebView调用Android本地组件</h1> webview有两个方法：setWebChromeClient 和 setWebClient setWebClient：主要处理解析，渲染网页等浏览器做的事情 setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等 WebViewClient就是帮助WebView处理各种通知、请求事件的。 <h1>响应式布局</h1> <h1>普通函数和箭头函数区别</h1> <ul> <li> 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数是匿名函数，不能作为构造函数，不能使用new </li> <li> <h3>箭头函数不绑定arguments，取而代之用rest参数…解决</h3> </li> <li> <h3>箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值</h3> </li> <li> <h3>箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。</h3> </li> <li> <h3>箭头函数没有原型属性</h3> </li> <li> <h3>箭头函数不能当做Generator函数,不能使用yield关键字</h3> 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply() 普通函数的this指向调用它的那个对象 </li> </ul> <h1>原型与原型链</h1> <h2>原型prototype</h2> 每个函数都有一个 prototype 属性，每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。 <ul> <li> proto：每一个JavaScript对象(除了 null )都具有的一个属性，叫proto，这个属性会指向该对象的原型。 </li> <li> constructor：每个原型都有一个 constructor 属性指向关联的构造函数，实例原型指向构造函数 </li> </ul> 使用原型的好处就是，可以让所有对象实例共享它包含的属性和方法。即不用在构造函数中定义对象实例的属性和方法，而是直接把这些信息添加到原型对象上面。 使用hasOwnProperty()方法可以检查一个属性是存在于实例中，还是存在原型中？只在给定属性存在于对象实例中时，才会返回true。 <h2>原型链</h2> JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。 <h1>MVVM</h1> Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发。MVVM 源自于经典的 Model–View–Controller（MVC）模式，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。 <img src="http://img.e-com-net.com/image/info8/710ff5aebe7b45b4a2ca977f07f1ed90.jpg" alt="img" width="0" height="0"> <h1>iframe优缺点</h1> <ul> <li> 优点 1.iframe能够原封不动的把嵌入的网页展现出来。 2.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决 </li> <li> 缺点 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。 iframe框架页面会增加服务器的http请求，对于大型网站是不可取的 </li> </ul> <h1>JS数组slice()和splice()的区别</h1> <ul> <li>**slice()定义：从已有的数组中返回你选择的某段数组元素；：**start可以为负数，此时它规定从数组尾部开始算起的位置。也就是-1 ，指最后一个元素，</li> <li>slice()方法不会修改数组本身，而是返回所选取范围的数组元素</li> <li>如果想删除数组中的某一个元素，需要使用splice()。splice()定义：从数组中添加或删除元素，然后返回被删除的数组元素。splice()方法会改变原始数组</li> <li>splice()语法：arrayObject.splice(index,howmany,item1,…,itemX).howmany表示删除的元素数量，如果为0，则表示不删除数组元素</li> </ul> <h1>defineproperty 与 proxy的区别</h1> <ul> <li>Object.defineProperty() 无法监控到数组下标的变化</li> <li>proxy可以劫持整个对象，并返回一个新对象,有13种劫持操作,Proxy是es6提供的，兼容性不好,无法用polyfill磨平</li> <li>proxy在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写,我们可以这样认为,Proxy是<code>Object.defineProperty</code>的全方位加强版.</li> </ul> <h1>懒加载和预加载</h1> <ul> <li> 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式 </li> <li> 懒加载原理：首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。 </li> <li> 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 </li> </ul> <h1>解决setTimeout中的this指向问题</h1> 在setInterval和setTimeout中传入函数时，函数中的this会指向window对象。 <h4>解决办法：</h4> 推荐用下面两种写法： <ul> <li> 将bind换成call,apply也会导致立即执行，延迟效果会失效 <pre><code class="prism language-js">window.setTimeout(this.declare.bind(this), 2000); </code></pre> </li> <li> 使用es6中的箭头函数，因为在箭头函数中this是固定的.箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域 </li> </ul> <h1>对象字面量vs构造函数创建对象对比</h1> <ul> <li>字面量的优势 <ol> <li>它的代码量更少，更易读；</li> <li>它可以强调对象就是一个简单的可变的散列表，而不必一定派生自某个类</li> <li>对象字面量运行速度更快，因为它们可以在解析的时候被优化,它们不需要"作用域解析(scope resolution)"；因为存在我们创建了一个同名的构造函数Object()的可能，当我们调用Object()的时候，解析器需要顺着作用域链从当前作用域开始查找，如果在当前作用域找到了名为Object()的函数就执行，如果没找到，就继续顺着作用域链往上照，直到找到全局Object()构造函数为止</li> <li>Object()构造函数可以接收参数，通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数，并返回另外一个对象实例，而这往往不是你想要的。Object()构造函数的这种特性会导致一些意想不到的结果，特别是当参数不确定的时候</li> </ol> </li> <li></li> </ul> <h1>Content-Type</h1> 互联网媒体类型,在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。 <ul> <li>application/x-www-form-urlencoded</li> </ul> HTTP会将请求参数用key1=val1&key2=val2的方式进行组织，并放到请求实体里面，注意如果是中文或特殊字符如"/“、”,“、“:” 等会自动进行URL转码。不支持文件，一般用于表单提交。 <ul> <li>multipart/form-data</li> </ul> 与application/x-www-form-urlencoded不同，这是一个多部分多媒体类型。首先生成了一个 boundary 用于分割不同的字段，在请求实体里每个参数以------boundary开始，然后是附加信息和参数名，然后是空行，最后是参数内容。多个参数将会有多个boundary块。如果参数是文件会有特别的文件域。最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型。 <ul> <li>application/json</li> </ul> 以“键-值”对的方式组织的数据。这个使用这个类型，需要参数本身就是json格式的数据，参数会被直接放到请求实体里，不进行任何处理。服务端/客户端会按json格式解析数据（约定好的情况下）。 <ul> <li>application/xml 和 text/xml</li> </ul> 与application/json类似，这里用的是xml格式的数据，text/xml的话，将忽略xml数据里的编码格式。 <h1>vue-router</h1> <h2>两种模式</h2> <ol> <li>hash —— 即地址栏 URL 中的 # 符号：它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。</li> <li>history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。hash 模式和 history 模式都属于浏览器自身的特性，</li> </ol> <h2>钩子函数</h2> <ol> <li>**全局钩子：主要包括<code>beforeEach</code>（前置守卫）和<code>aftrEach</code>（后置钩子）,一般用来判断权限,**以及以及页面丢失时候需要执行的操作</li> <li>单个路由里面的钩子：主要用于写某个指定路由跳转时需要执行的逻辑</li> <li>组件路由：主要包括 <code>beforeRouteEnter</code>和<code>beforeRouteUpdate </code>,<code>beforeRouteLeave</code>,这几个钩子是路由导航守卫，都是写在组件里面</li> </ol> <h1>vuex的原理</h1> Vuex：可以理解为Vue的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 <ul> <li>State：数据仓库。代表数据的唯一来源，一般Vuex所有的数据都会存储在State中。State本身是一种json对象。</li> <li>getter：用来获取数据的。</li> <li>Mutation：用来修改数据的。通过commit Mutation修改。Mutation里面的操作要同步的方式。</li> <li>Action：用来提交Mutation的。可以进行异步操作。</li> </ul> <ol> <li>State由Mutations驱动变化</li> <li>通过Actions与后端交互</li> <li>通过State渲染前端</li> <li>前端触发Actions来提交Mutations</li> </ol> <h1>闭包</h1> 闭包可以理解为“定义在一个函数内部的函数”，本质上，闭包是将函数内部和外部连接起来的一座桥梁。 父函数内部定义的子函数，如果没有引用父函数作用域中的变量，那么这个子函数不是闭包。也就是说，闭包是由函数和它所在的环境构成的，缺一不可。 闭包会让函数中的变量都被保存在内存中，内存消耗大，所以不能滥用闭包，可以在不使用该变量的时候将其delete <h1>Promise</h1> 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 在JavaScript的世界中，所有代码都是**单线程执行的。**由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现.异步操作会在将来的某个时间点触发一个函数调用. 避免回调地域问题（嵌套层次深）。 promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了. <ul> <li>resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；</li> <li>reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）</li> </ul> promise有三个状态： 1、pending[待定]初始状态 2、fulfilled[实现]操作成功 3、rejected[被否决]操作失败 Promise对象的状态改变，只有两种可能： 从pending变为fulfilled 从pending变为rejected。 这两种情况只要发生，状态就凝固了，不会再变了。 <a href="http://img.e-com-net.com/image/info8/19a07c4e55f54d8e8342ace6f591de60.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/19a07c4e55f54d8e8342ace6f591de60.jpg" alt="【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React_第4张图片" width="512" height="280" style="border:1px solid black;"></a> Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。 <pre><code class="prism language-js">job1.then(job2).then(job3).catch(handleError);//其中，job1、job2和job3都是Promise对象。 </code></pre> <h1>Object.toString和Object.prototype.toString的区别</h1> <code>Object构造函数</code>本身没有<code>toString</code>方法。 依照原型链关系，<code>Object构造函数</code>的上游原型链是<code>Function.prototype</code>。调用<code>Object.toString.call(param)</code>本质上是调用<code>Function.prototype.toString.call(param)</code>， 原型链终端Object.prototype对象上的toString()确实可以被继承下来,可以用来判断数据类型, 但是并不能满足所有的需求,作为子代的包装类和数组就重写了自己的toString(), 因此当我们调用toString()时,会调用自身原型上重写的toString()，重写后的toString()可以把对象转换成字符串,还可以把number类型的数值转换成不同进制的数。当我们需要知道一个变量或值是什么类型的话就可以通/过调用Object.prototype.toString() 来实现需要用到call(). <ul> <li>Object.toString()是Object构造函数上的方法，返回的是对应的函数</li> <li>Object.prototype.toString()是Object原型对象上的方法，返回的是代表该对象的字符串</li> </ul> <pre><code class="prism language-js">var obj = {}; Object.toString(obj);//"function Object() { [native code] }" Object.prototype.toString.call(obj);//"[object Object]" </code></pre> <ul> <li> 为什么Array、String、Number、Boolean等不能直接调用toString() <pre><code>因为Array、String、Number、Boolean、RegExp、Date等类型都重写了toString(),如果直接调用则因为自身的原型对象上已有toString()方法,就不会调用到Object原型对象上的toString()方法了。 </code></pre> </li> </ul> <h1>实现弹幕</h1> 播放时，设置其<code>translateX</code>和<code>transform</code>。 暂停时，把当前的位置写为<code>translateX</code>，<code>transform</code>为0，这个时候弹幕就保持在那个位置不动了。 再次播放时，重新设置translateX和transform，当然，transform-duration肯定是依据弹幕长度，当前位置和终点位置(播放器宽度)计算出来的。 播放和暂停的逻辑全都由js处理。 弹幕到位了以后，dom会被移除。 再加上<code>will-change</code>的GPU加速 B站另外还做了一个操作就是复用dom，弹幕走到头以后不会移除，而是在有下一个新弹幕的时候把原来的dom节点复用，修改style，使其重新播放一次，这个也是性能提高的一个处理办法 https://blog.csdn.net/qq2712193/article/details/51725705 <h1>含对象的数组怎么排序</h1> <pre><code class="prism language-js">var str=[ {name:"a",age:50}, {name:"b",age:20}, {name:"c",age:40}, {name:"d",age:30}, ]; function compare(key){ return function(value1,value2){ var val1=value1[key]; var val2=value2[key]; return val1-val2; } } str.sort(compare('age')); console.log(str); </code></pre> <h1>请求报文&响应报文</h1> <ul> <li>请求报文：请求行：请求方法，HTTP协议版本；请求头部：Content-Type；空行；请求体</li> <li>响应报文：状态行：状态码；响应头部；空行；响应体；</li> </ul> <h1>引入css方式</h1> <ul> <li> <h3>行内式</h3> 通过html属性style实现 </li> <li> <h3>嵌入式</h3> 在style标签中写css样式，在body中引用 </li> <li> <h3>链接式</h3> 1.一般都使用这种方式，在桌面上新建一个css文件：test.css，内容为一个css样式 <ol start="2"> <li>在test.html引入test.css文件</li> </ol> </li> </ul> <h3>导入式</h3> @import(url(demo.css)) 1.基本不使用，因为页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。 <h1>深拷贝及实现深拷贝的三种方法</h1> <ul> <li> 递归 <pre><code class="prism language-js">//使用递归实现深拷贝函数 function deepClone(obj) { var objClone = Array.isArray(obj) ? [] : {} if (obj && typeof obj === 'object') { for (key in obj) { if (obj.hasOwnProperty(key)) { //判断obj的子元素是否为object对象，如果是则就递归拷贝 if (obj[key] && typeof obj[key] === 'object') { objClone[key] = deepClone(obj[key]) } else { //如果不为对象就直接拷贝 objClone[key] = obj[key] }}}} return objClone } </code></pre> </li> <li> <code>obj1 = JSON.stringify(obj) + JSON.parse(obj1)</code> </li> <li> Jquery: <code> $.extend(true,[],object)</code> </li> <li> 第三方函数库 lodsh </li> </ul> <h1>数组和链表的区别</h1> 不同：链表是链式的存储结构；数组是顺序的存储结构。 链表通过指针来连接元素与元素，数组则是把所有元素按次序依次存储。 链表的插入删除元素相对数组较为简单，不需要移动元素，且较为容易实现长度扩充，但是寻找某个元素较为困难； 数组寻找某个元素较为简单，但插入与删除比较复杂，由于最大长度需要再编程一开始时指定，故当达到最大长度时，扩充长度不如链表方便。 (1) 从逻辑结构角度来看 <ul> <li>数组必须事先定义固定的长度（元素个数），不能适应数据动态地增减的情况。当数据增加时，可能超出原先定义的元素个数；当数据减少时，造成内存浪费。</li> <li>链表动态地进行存储分配，可以适应数据动态地增减的情况，且可以方便地插入、删除数据项。（数组中插入、删除数据项时，需要移动其它数据项）</li> </ul> (2) 从内存存储角度来看 <ul> <li> (静态)数组从栈中分配空间, 对于程序员方便快速,但自由度小。 </li> <li> 链表从堆中分配空间, 自由度大但申请管理比较麻烦. </li> </ul> <h1>Array.push原理</h1> <ul> <li> 逐个复制元素 </li> <li> 修改数组长度 <pre><code class="prism language-js">function ArrayPush () { var n = TO_UNIT32(this.length); var m = %_ArgumentsLength(); for (var i = 0; i < m; i++) { // 逐个复制元素 this[i + n ] = %_Arguments(i); } this.length = n + m; // 修改数组的length return this.length; } </code></pre> </li> </ul> <h1>关系型数据库 & 非关系型数据库区别</h1> <ul> <li>1.成本：Nosql数据库简单易部署，基本都是开源软件，不需要像使用Oracle那样花费大量成本购买使用，相比关系型数据库价格便宜。</li> <li>2.查询速度：Nosql数据库将数据存储于缓存之中，而且不需要经过SQL层的解析，关系型数据库将数据存储在硬盘中，自然查询速度远不及Nosql数据库。</li> <li>3.存储数据的格式：Nosql的存储格式是key,value形式、文档形式、图片形式等等，所以可以存储基础类型以及对象或者是集合等各种格式，而数据库则只支持基础类型。</li> <li>4.扩展性：关系型数据库有类似join这样的多表查询机制的限制导致扩展很艰难。Nosql基于键值对，数据之间没有耦合性，所以非常容易水平扩展。</li> <li>5.持久存储：Nosql不使用于持久存储，海量数据的持久存储，还是需要关系型数据库</li> <li>6.数据一致性：非关系型数据库一般强调的是数据最终一致性，不像关系型数据库一样强调数据的强一致性，从非关系型数据库中读到的有可能还是处于一个中间态的数据，Nosql不提供对事务的处理。</li> </ul> <h1>数据可脏读、幻读、不可重复读</h1> <ul> <li>脏读: 读取未提交数据.A事务读取B事务尚未提交的数据，此时如果B事务发生错误并执行回滚操作，那么A事务读取到的数据就是脏数据。就好像原本的数据比较干净、纯粹，此时由于B事务更改了它，这个数据变得不再纯粹。这种情况常发生于转账与取款操作中</li> <li>幻读：前后多次读取，数据总量不一致。事务A在执行读取操作，需要两次统计数据的总量，前一次查询数据总量后，此时事务B执行了新增数据的操作并提交后，这个时候事务A读取的数据总量和之前统计的不一样，就像产生了幻觉一样，平白无故的多了几条数据，成为幻读。读取了其他事务新增的数据。</li> <li>不可重复读：前后多次读取，数据内容不一致。不可重复读是读取了其他事务更改的数据</li> </ul> <h1>一个数组很多数，找出/判断两个数相加等于10</h1> <pre><code class="prism language-java">public static void findSumNum(int[] a,int sum){ Arrays.sort(a); int i=0,j=a.length-1; while(i<=j){ if(a[i]+a[j]<sum) i++; else if(a[i]+a[j]>sum) j--; else { System.out.println(a[i]+","+a[j]); i++; } } } </code></pre> <h1>数组去重</h1> <pre><code class="prism language-js">if (!Array.prototype.unique) { Array.prototype.unique = function () { var hash = {}, result = [], type = '', item; for (var i = 0; i < this.length; i++) { item = this[i]; type = Object.prototype.toString.call(item); if ( !hash[item + type] ) { hash[item + type] = true; result.push(item); } } return result; }; } </code></pre> <h1>后代选择器，子选择器，相邻兄弟选择器</h1> <ul> <li>后代选择器（包含子选择器，且包含子选择器的子孙选择器）： <code>p em</code></li> <li>子选择器（父选择器的一级子元素）： <code>h1 > strong</code></li> <li>相邻兄弟选择器： <code>h1+p</code></li> </ul> <h1>sessionID</h1> session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。 当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识------------称为session id，如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。 保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发挥给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。 经常被使用的一种技术叫做URL重写，就是把session id直接附加在URL路径的后面。还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把session id传递回服务器。 <h1>SQL：Drop、truncate、delete</h1> <ul> <li> 当你不再需要该表时，用 drop； </li> <li> 当你仍要保留该表，但要删除所有记录时，用 truncate； </li> <li> 当你要删除部分记录时（always with a WHERE clause), 用 delete. </li> </ul> <h1>前端怎么做到一个屏幕分辨率的自适应</h1> https://www.cnblogs.com/HCJJ/p/6408363.html <ul> <li> em:是一种相对单位，它相对于父元素的字体大小。浏览器默认的字体大小是16px，因此 1em 也就等于 16px。 </li> <li> rem是一种相对单位，它相对于根元素 <code>html</code> 的字体大小。 REM会让页面根据不同的显示设备进行适配缩放，那么必然就会有一个标准页面尺寸，就目前而言，整个前端开发界使用最多的标准页面尺寸则是根据iphone4或者 iPhone5为依据的 <code>640px*1366px</code> ,也有以iphone6为基准的750px。这个标准的页面尺寸，我们可以将其定义为1,如果当前的显示设备尺寸小于标准页面尺寸（640px或者750px）那么便让页面尺寸缩小，使其小于1。而当显示设备尺寸大于标准页面尺寸，我们即可以做一些其它的适配，也可以将页面整个居中显示在显示设备中然后不进行任何缩放操作。 实际上rem布局与px布局并没有什么本质的区别，这个我们可以代入实例去理解，比如现在 <code>html</code> 的 <code>font-size</code>的大小是100px，即 1rem = 100px,如果现在页面中要放入一个200*200的盒子，那么按照等比关系： <pre><code class="prism language-css">div{ width:2rem; height:2rem; background:gray; } </code></pre> REM 实现的页面缩放适配原理， rem 是依据 <code>html</code>标记的 <code>font-size</code> 大小的相对单位，对于使用rem为单位的页面，在被载入到显示设备显示的时候，会根据显示设备的尺寸，然后对应的修改html标签的font-size值，这样便可以一处修改，整个页面内容都会发生改变，即实现根据设备尺寸进行缩放的效果。 REM方式进行移动端布局的原理都是相同的，但是不同的在与对于设备尺寸的检测上，就目前而言分为两种，一种是通过CSS meida查询，另一种则是通过JS检测。 <ol> <li> CSS Media <pre><code class="prism language-css">@media screen and (min-width:320px) and (max-width:359px) { html { font-size: 50px; } } @media screen and (min-width:360px) and (max-width:374px) { html { font-size: 56.25px; } } @media screen and (min-width:375px) and (max-width:383px) { html { font-size: 58.59375px; } } @media screen and (min-width:384px) and (max-width:399px) { html { font-size: 60px; } } @media screen and (min-width:400px) and (max-width:413px) { html { font-size: 62.5px; } } @media screen and (min-width:414px) and (max-width:431px) { html { font-size: 64.6875px; } } @media screen and (min-width:432px) and (max-width:479px) { html { font-size: 67.5px; } } @media screen and (min-width:480px) and (max-width:539px) { html { font-size: 75px; } } @media screen and (min-width:540px) and (max-width:639px) { html { font-size: 84.375px; } } @media screen and (min-width:640px) { html { font-size: 100px; } body { max-width: 640px !important; margin: 0px auto !important; } } </code></pre> 响应式REM布局的优点在于可以根据设计稿的特点，自定义的对某些设备进行单独适配，而缺点是检测规则固定不可变，这一点相比于“JS自动换算”更为明显。 </li> <li> JS检测 <pre><code class="prism language-js">(function(win,doc){ var timer = null, html = doc.documentElement, baseWidth = html.dataset.basewidth*1 || 640, metaEl = document.querySelector('meta[name="viewport"]'), event = 'onorientationchange' in win ? 'onorientationchange' : 'resize'; if(!metaEl){ metaEl = document.createElement('meta'); metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0'); html.firstElementChild.appendChild(metaEl); } function layoutCalc(){ var width = html.getBoundingClientRect().width, ratio = width / baseWidth * 100, devicePixelRatio = window.devicePixelRatio, rem = ratio < 100 ? ratio < 50 ? 50 : ratio : 100; if(!/\.\d+/.test(devicePixelRatio.toString())){ html.dataset.dpr = devicePixelRatio; } html.style.fontSize = rem + 'px'; } win.addEventListener(event,function(){ clearTimeout(timer); timer = setTimeout(layoutCalc,300); },false); win.addEventListener('pageShow',function(e){ if(e.persisted){ clearTimeout(timer); timer = setTimeout(layoutCalc,300); } },false); layoutCalc(); }(window,document)); </code></pre> 自定义基准页面尺寸:通过为 html 标签添加 <code>data-basewidth</code> 属性来自定义指定基准页面的尺寸。 <pre><code class="prism language-html"><html data-basewidth="750" > </html> </code></pre> 定义页面内容的字体大小:对于一些符合标准的dpr(设备像素比https://blog.csdn.net/a419419/article/details/79295799)值（只要是整数，例如：1,2,3），都会为 <code>html</code> 标签再附加一个 <code>data-dpr</code> 属性，然后开发者便可以根据这个属性为条件，实现在不同dpr情况下，对内容字体的大小的调整 <pre><code class="prism language-css">html[data-dpr="1"] .dpr-text{ font-size:12px; } html[data-dpr="2"] .dpr-text{ font-size:24px; } html[data-dpr="3"] .dpr-text{ font-size:36px; } </code></pre> <pre><code class="prism language-html"><p class="dpr-text">测试文字</p> </code></pre> 相比“响应式方式”JS自动换算无需添加规则，适合于各类型的显示设备。 </li> </ol> </li> <li> vh/vw都是相对于视口的单位，浏览器视口的区域就是通过 <code>window.innerWidth</code>以及 <code>window.innerHeigth</code> 度量得到的范围。浏览器会将整个视口的宽度或者高度划分为100等份，因此1vw或者1wh就是相对视口宽度或者高度的1%。例如浏览器视口的宽度是1920，那么 1920/100 每等份即19.2px。 </li> </ul> <h1>一行三列排版</h1> <h1>contain & cover</h1> <ul> <li>contain: 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。</li> <li>cover: 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。</li> </ul> <h1>Vue watch,computed和method区别</h1> <ul> <li> computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数，则 <code>this</code> 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。 </li> <li> methods: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 <code>this</code> 自动绑定为 Vue 实例。注意，不应该使用箭头函数来定义 method 函数 (例如 <code>plus: () => this.a++</code>)。理由是箭头函数绑定了父级作用域的上下文，所以 <code>this</code> 将不会按照期望指向 Vue 实例，<code>this.a</code> 将是 undefined。 </li> <li> watch: 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 <code>$watch()</code>，遍历 watch 对象的每一个属性。注意，不应该使用箭头函数来定义 watcher 函数 (例如 <code>searchQuery: newValue => this.updateAutocomplete(newValue)</code>)。理由是箭头函数绑定了父级作用域的上下文，所以 <code>this</code> 将不会按照期望指向 Vue 实例，<code>this.updateAutocomplete</code> 将是 undefined。 </li> </ul> 能使用watch属性的场景基本上都可以使用computed属性，而且computed属性开销小，性能高，因此能使用computed就尽量使用computed属性.当执行异步操作的时候你可能就必须用watch而不是computed了 <h1>Vue不能检测到对象属性的添加或删除：三种解决方法</h1> <ul> <li>方案一：利用Vue.set(object,key,value)</li> <li>方案二：利用this.$set(this.object,key,value)</li> <li>方案三：利用Object.assign({},this.obj)</li> </ul> <h1>手写找出数组重复最多的元素</h1> <pre><code class="prism language-js">function findNum(a){ 　　var result = [0,0]; 　　for (var i = 0; i < a.length; i++) { 　　　　for (var j = 0,count = 0; j < a.length; j++) { 　　　　　　if (a[i]==a[j]) { 　　　　　　++count; 　　　　　　}; 　　　　}; 　　　　if(count>result[0]) { 　　　　　　result[0] = count; 　　　　　　result[1] = a[i]; 　　　　}else if(count==result[0]&&result[1]<a[i]) { 　　　　　　result[1] = a[i]; 　　　　} 　　} 　　alert("数"+result[1]+"重复了最多次，为"+result[0]); } var arr = [2,2,3,3,3,4,4,4,4,4,4,4,4,43,3]; findNum(arr); </code></pre> <h1>Document.write()与innerHtml()区别</h1> <ul> <li>document.write是直接将内容写入页面的内容流，会导致页面全部重绘</li> <li>innerHTML将内容写入某个DOM节点，不会导致页面全部重绘</li> </ul> <h1>实现http长连接</h1> <ul> <li>先创建http请求方法，如图</li> <li>然后设置请求地址</li> <li>在然后需要设置下请求参数的编码格式一般设置成utf8</li> <li>然后就开始设置长连接了，这个主要是再header中设置Connection=keep-alive</li> <li>如果需要设置长连接的有效时间就在添加Keep-Alive:timeout=60</li> <li>完成长连接的header设置后就开始设置请求参数了</li> <li>最后就是执行者http的长连接请求了</li> </ul> 在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（如JavaScript文件、图像文件、CSS文件等），每遇到这样一个Web资源，浏览器就会重新建立一个HTTP会话。 而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码： <pre><code>Connection:keep-alive </code></pre> 在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。 HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。 https://www.cnblogs.com/blogtech/p/10981606.html <h1>Websocket</h1> 允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 <pre><code class="prism language-js">var Socket = new WebSocket(url, [protocol] ); </code></pre> <h1>etag标签(实体标签)</h1> ETag是HTTP1.1中才加入的一个属性，用来帮助服务器控制Web端的缓存验证。 的原理是这样的，当浏览器请求服务器的某项资源(A)时, 服务器根据A算出一个哈希值(3f80f-1b6-3e1cb03b)并通过 ETag 返回给浏览器，浏览器把"3f80f-1b6-3e1cb03b" 和 A 同时缓存在本地，当下次再次向服务器请求A时，会通过类似 <code>If-None-Match: "3f80f-1b6-3e1cb03b"</code> 的请求头把ETag发送给服务器，服务器再次计算A的哈希值并和浏览器返回的值做比较，如果发现A发生了变化就把A返回给浏览器(200)，如果发现A没有变化就给浏览器返回一个304未修改。这样通过控制浏览器端的缓存，可以节省服务器的带宽，因为服务器不需要每次都把全量数据返回给客户端。 ETag`HTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖（“空中碰撞”）。 如果给定URL中的资源更改，则一定要生成新的Etag值。因此Etags类似于指纹，也可能被某些服务器用于跟踪。比较etags能快速确定此资源是否变化，但也可能被跟踪服务器永久存留。 <h1>css动画 transform，transition ，animation</h1> <ul> <li> transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix. transform常常配合transition和animation使用 </li> <li> transition样式过渡，从一种效果逐渐改变为另一种效果。transition是一个合写属性： <pre><code class="prism language-css">transition:transition-property transition-duration transition-timing-function transition-delay//从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间 </code></pre> </li> <li> animation动画由@keyframes来描述每一帧的样式 <pre><code class="prism language-css">div{ 　　animation:myAnimation 5s infinite } @keyframes myAnimation { 　　0%{left:0;transform:rotate(0);} 　　100%{left:200px;transform:rotate(180deg);} } </code></pre> （1）transform仅描述元素的静态样式，常常配合transition和animation使用 （2）transition通常和hover等事件配合使用，animation是自发的，立即播放 （3）animation可设置循环次数 （4）animation可设置每一帧的样式和时间，transition只能设置头尾 （5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果 <pre><code class="prism language-js">/*css:*/ div{ width:100px; height:100px; transition:all 1s; } //js divEle.onclick = function(){ divEle.style.width = "200px"; divEle.style.height = "200px"; } </code></pre> </li> </ul> <h1>浏览器兼容性问题与解决方案</h1> https://blog.csdn.net/weixin_38536027/article/details/79375411 <h1>typeof 类型判断</h1> <ul> <li> 使用typeof()或者typeof进行基本数据类型检测,null是Null类型，属于基本类型，但是typeof null 返回的是字符串’object’； <pre><code class="prism language-js"> console.log(typeof undefined);//未定义undefined console.log(typeof null);//空值，对象类型 </code></pre> </li> <li> 引用类型只能使用 instanceof,基本数据类型无法使用instanceof 进行检测数据类型，因为基本数据类型使用instanceof进行检测，结果都是返回false </li> </ul> <h1>css中什么属性让字体更清晰</h1> <ul> <li> <h3>-webkit-font-smoothing</h3> </li> </ul> 将-webkit-font-smoothing设置为antialiased，变得非常平滑，效果非常不错。 其默认可以支持6个值（如图），暂时我能看到效果的就是三个： none（用于小像素文本） | subpixel-antialiased(默认) | antialiased（反锯齿） <h1>this的指向问题</h1> <ul> <li> <h5>在全局作用域中，this的指向是window对象</h5> </li> <li> <h5>ES5函数中this的指向:</h5> <pre><code>在`非严格模式`下,函数中的this指向window对象，因为此时函数fn是window的一个属性，所以运行fn时，fn中的this指向window。其实this的指向就是指向函数的`运行时`环境。 </code></pre> <pre><code>在`严格模式`下，若不使用window调用函数，函数中的this指向undefined；使用window调用时，指向的时window对象。 </code></pre> </li> </ul> <pre><code class="prism language-js">var fn = function () { 'use strict' console.log(this); console.log(this === window) } fn(); //undfined //false window.fn(); //Window对象 //true </code></pre> <pre><code>在`严格模式`下有一种例外的情况，就是在定时器中的this，此时无论使用window调用还是不使用window调用，this都指向window。 </code></pre> <ul> <li> <h5>在ES6中箭头函数this的指向:在ES6中箭头函数this的指向取决于<code>定义时</code>环境中的this指向一致</h5> <pre><code class="prism language-js">var fun = () => { console.log(this); console.log(this === window); } fun(); //Window对象 //true //定义箭头函数时,就是这个过程：()=>{...}所在的环境是window，所以运行fun()时，箭头函数内部的this指向window </code></pre> <pre><code class="prism language-js">var obj = { name:'Jay', age:25, fn:()=>{console.log(this)}, fun:function(){ console.log(this) } }; //在定义fn时，fn内部this的指向就是定义obj对象时所在的环境，obj所在的环境是window，所以调用obj.fn()时，返回的this就是Window对象 obj.fn(); //Window对象 obj.fun();//{name: "Jay", age: 25, fn: ƒ, fun: ƒ} </code></pre> <ul> <li> <h5>在DOM事件中的this指向</h5> <pre><code>DOM事件处理函数中this的指向是触发该事件的对象 </code></pre> </li> </ul> </li> </ul> <pre><code class="prism language-js"><div id='app'>App</div> <script> var $id = document.querySelector('#app'); $id.onclick = function () { console.log(this); } </script> //当点击App时，console.log(this),打印出来的值时 <div id='app'>App</div> </code></pre> <ul> <li> <h5>构造函数中的this指向</h5> 构造函数中的this的指向是通过构造函数所创建出的对象实例 <pre><code class="prism language-js">function Person (){ this.name = 'Jay', this.age = 25; console.log(this); } var p1 = new Person(); //Person {name: "Jay", age: 25} </code></pre> <h5>改变this的指向</h5> 可以使用call()、apply()、bind()改变函数内部this的指向（ES6中的箭头函数除外）。其中call()和apply()在传入要绑定的this指向时，立即执行。bind()在传入要绑定的this指向时，并不执行，需要再次调用才会执行。 使用bind()改变this的指向 <pre><code class="prism language-js"> var obj = { name:'Jay', age:25 }; function fn(){ console.log(this===obj); console.log(this); } //fn.bind(obj);不会立即执行，需要再次调用才会执行。 var fn1 = fn.bind(obj); fn1(); //true //{name: "Jay", age: 25} </code></pre> 需要注意的是，当使用call()、apply()、bind()改变函数内部this的指向时,如果传入的不是一个对象，会调用相对的构造函数，进行隐式类型装换。 <pre><code class="prism language-js">function fn(){ console.log(typeof this === 'object'); console.log(this); } fn.apply('I am a string'); //true //String{"I am a string"} </code></pre> </li> </ul> <h1>CSS行内和块状元素的区别？</h1> HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-block;转换为行内块状元素 行内元素特征： (1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行 块状元素特征： (1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起，默认排列方式为从上至下 行内块状元素特征： (1)不自动换行 (2)能够识别宽高 (3)默认排列方式为从左到右 <h1>scrollHeight、scrollTop、clientHeight、offsetHeight区别</h1> <ul> <li>scrollHeight：返回当前整个元素的高度（包括带滚动条的隐蔽的地方）</li> <li>scrollTop：clientHeight的顶部到scrollHeight顶部的高度</li> <li>offsetTop ：指当前元素距离上方或上层元素的距离</li> <li>clientHeight：返回当前元素在页面上的可视高度（包括padding；不包括border、margin、滚动条高度）</li> <li>offsetHeight：返回当前元素在页面上的可视高度（包括padding、border、滚动条高度；不包括margin）</li> </ul> <h1>对HTML语义化标签的理解</h1> HTML标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有div,span等。 <ul> <li>为什么要进行语义化？ 　　1，现在的开发基本上都是一个团队合作进行开发。这种情况下，我们写的代码不仅要让我们自己能看懂，而且也应该让别人也容易理解和阅读，要保证代码的可维护性，这一点很重要。但是在实际开发中，由于HTML的灵活性，以及CSS的强大，以至于实现同一种界面样式，不同的人写出来的代码可能实现方式都不太一样。实现糟糕的，可能全是div套div，这样的代码到时候维护的话可能就是一场灾难。这一点，个人觉得是最主要的因素。 　　2，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息 　　3，考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等。</li> <li>使用HTML语义化好处 html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析； 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的； 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO； 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1604433518270644224"></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/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断</a> 尐尐呅 <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div> </li> <li><a href="/article/1835485681187647488.htm" title="【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面" target="_blank">【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面</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%8D%8E%E4%B8%BAod/1.htm">华为od</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>最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获</div> </li> <li><a href="/article/1835428821877223424.htm" title="计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）" target="_blank">计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）</a> java毕设程序源码王哥 <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发</div> </li> <li><a href="/article/1835423399606841344.htm" title="ERP企业资源规划系统" target="_blank">ERP企业资源规划系统</a> 点滴~ <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2%E7%94%B5%E5%95%86/1.htm">教育电商</a> <div>ERP企业资源规划系统ERP（EnterpriseResourcePlanning）企业资源规划系统是一种综合性的管理信息系统，旨在通过信息技术手段实现对企业内部资源的全面规划、管理和控制。以下是对ERP企业资源规划系统的详细解析：一、定义与核心思想ERP系统建立在信息技术基础上，以系统化的管理思想，为企业决策层及员工提供决策运行手段的管理平台。它不仅仅是一个软件，更重要的是一个管理思想，实现了企</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835408449098313728.htm" title="淘宝网优惠券，你的购物神器，你知道吗？" target="_blank">淘宝网优惠券，你的购物神器，你知道吗？</a> 氧惠超好用 <div>淘宝网作为中国最大的综合性网络零售平台，吸引了无数消费者的目光。在淘宝网上，我们不仅可以找到丰富多样的商品，还可以通过各种促销活动享受到购物的乐趣。其中，淘宝网优惠券就是一项备受消费者喜爱的福利。那么，淘宝网优惠券究竟有何魅力，能够让我们在购物时更加得心应手呢？淘宝网优惠券作为一种促销手段，为消费者提供了实实在在的购物优惠。无论是店铺优惠券、平台优惠券还是特定商品优惠券，都能在一定程度上降低购物成</div> </li> <li><a href="/article/1835378698665160704.htm" title="设计好了产品组合，获客没你想得那么难" target="_blank">设计好了产品组合，获客没你想得那么难</a> 老姜观察 <div>放眼望去，财富管理公司的综合服务已经成为大势所趋。所谓的综合服务，其实就是财富管理公司的产品组合逐渐丰富和完善。然而，在对客户进行综合服务的过程中，财富管理公司常常会面对各种问题。例如：如何评估公司是否应当开展一项服务或者产品？如何定义一项服务（产品）的考核指标？如何配置资源投入不同的产品线？以保险为例，财富管理公司经常需要考虑的问题有：我是否要导入保险业务？如何考核这项业务的发展？我应该投入多少</div> </li> <li><a href="/article/1835355667586707456.htm" title="安全演练有保障，专项督查促改进——记公道中学校园安全（化学实验）系列活动" target="_blank">安全演练有保障，专项督查促改进——记公道中学校园安全（化学实验）系列活动</a> 公中盛传云 <div>近期，公道中学为了全面贯彻落实“预防为主，安全第一，综合治理”的安全工作方针，学校按照安全工作方针的要求，通过多种途径开展了以“预防演练为主，人防物防技防相结合”的主题的安全教育系列活动。11月8日，在学校校务会议上，学校党总支书记李兆兵强调，学校必须采取有力措施，不断增强教师综治安全防范意识，落实学校安全工作责任制，切实保障教师和学生的安全坚决杜绝意外事故的发生，确保校园平安稳定、教育教学工作顺</div> </li> <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/1835343686234370048.htm" title="第九章肿瘤放射治疗" target="_blank">第九章肿瘤放射治疗</a> 晨翕 <div>放射物理学：主要研究各种放射源的性能特点、治疗剂量学、质量控制、质量保证及辐射防护等放射生物学：主要研究机体正常组织和肿瘤组织对射线对反应及如何人为地改变这些反应对质和量。放射技术学：主要研究具体运用各种放射源及设备治疗肿瘤患者，包括射野设置、体位固定、定位、摆位操作等技术实施。临床放射肿瘤学：在临床肿瘤学的基础上，研究肿瘤放射治疗的适应证，根据病理、分期、预后确定治疗策略，综合运用放射物理、放射</div> </li> <li><a href="/article/1835329170654195712.htm" title="公道中学举行校园安全目标责任书签订仪式" target="_blank">公道中学举行校园安全目标责任书签订仪式</a> 公中盛传云 <div>图片发自App为认真做好学校校园安全管理工作,切实将安全抓实抓细，真正落实到位，责任到人，形成齐抓共管的局面。公道中学在毓贤楼多功能教室举行了2018-2019学年校园安全目标责任书签订仪式。公道中学全体教职工近150人参加签订仪式。图片发自App会议开始，公道中学校长助理盛传云传达了《扬州市邗江区教育系统社会治安综合治理暨平安校园建设责任书》的精神及近期有关上级教育主管部门下发有关食品安全、交通</div> </li> <li><a href="/article/1835327252280209408.htm" title="演说：孩子嘴巴笨不会说话，如何提升自己的口才？#吴守立冬令营" target="_blank">演说：孩子嘴巴笨不会说话，如何提升自己的口才？#吴守立冬令营</a> 吴守立国学智慧 <div>关键词：少年领袖演说班国学吴守立国学天第书院论语吴守立在现代社会，口才已是一个人综合素质和综合能力的具体体现，二十一世纪是“表达世纪”，要想在这个“表达世纪”里成人成才，“会说”“会写”必不可少，随着新课改、升学对孩子表达能力提出更高的要求，口才将是我们每个人必修课和基本功。然而，孩子嘴巴笨不会说话，如何提升自己的口才？天第书院为大家介绍以下几种方法。1、父母做孩子最佳的倾听者和沟通者在孩子天性中</div> </li> <li><a href="/article/1835326103993020416.htm" title="教师资格考试中学《教育知识与能力》知识点｜高频考点汇总" target="_blank">教师资格考试中学《教育知识与能力》知识点｜高频考点汇总</a> 小山丘 <div>温馨提示：更多汇总详情留言小编哦！！！认知过程之易混知识点剖析社会中心课程论情绪——重要考点皮亚杰教你带孩子斯金纳强化规律你的心理足够强大吗?教育心理学的效应德育有规律常考人物思想之夸美纽斯中学常考教学原则孔子及《论语》中的重要教育思想教育学创立阶段人物之赫尔巴特学习策略分类知识点梳理教师资格证辨析题作答思路综合课程的类型班杜拉的学习理论马斯洛需要层次理论记忆类型的四大分类柏拉图和他的《理想国》感</div> </li> <li><a href="/article/1835303809182691328.htm" title="一日一神兽（第一集）" target="_blank">一日一神兽（第一集）</a> yrfrds <div>今年我的神兽会是什么呢？唉，别胡思乱想了，根本没有神兽，可是我睁眼一看，看见了一只梅花鹿，外部特点是：一大部分树木梅花鹿的部分背上长一对翅膀。属性是综合属性，这不可能的吧？我又揉了揉了眼睛，一看还是那只神兽哇，居然用神兽了，我找找东西，看看哪一块部分适合收他，找了一会儿，我找到了嗯，一个小方块儿我觉得这个很适合她我说收她被吸到了方块儿哩哈哈，我竟然用神兽了哈哈，现在我无人能敌了上完学校下午放学的时</div> </li> <li><a href="/article/1835266404060852224.htm" title="机电综合管理系统架构" target="_blank">机电综合管理系统架构</a> 小熊coder <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E8%BD%BD%E7%B3%BB%E7%BB%9F/1.htm">机载系统</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a> <div>文章目录一、机电综合管理系统架构1.系统概述2.架构层次3.核心组件二、余度管理1.余度概述2.硬件冗余3.软件冗余4.通信冗余三、总线架构1.MIL-STD-1553B总线2.ARINC429总线3.ARINC629总线4.AFDX/ARINC664总线四、未来发展趋势1.分布式架构2.高速网络3.智能化与自动化结语机电综合管理系统（ElectromechanicalManagementSyst</div> </li> <li><a href="/article/1835238039471878144.htm" title="拼多多返利app叫什么名字?拼多多返利靠前的5个软件大全" target="_blank">拼多多返利app叫什么名字?拼多多返利靠前的5个软件大全</a> 小小编007 <div>拼多多返利app指的是拼多多购物平台的返现或折扣应用。这些应用通过提供优惠券、折扣、返现等方式吸引消费者，增加购物体验的实惠性。在拼多多平台上，有很多返利软件，其中排名前五的软件分别是：1.果冻宝盒果冻宝盒是一个综合导购返利软件，覆盖了淘宝，拼多多、京东、抖音等各大电商平台的商品优惠券和返利服务。还有话费充值，汽车加油，电影票，外卖红包，视频会员充值等各种低折扣生活娱乐权益。果冻宝盒相比其它同行，</div> </li> <li><a href="/article/1835221485564817408.htm" title="【0220读书笔记】面对压力怎么办" target="_blank">【0220读书笔记】面对压力怎么办</a> 正本 <div>人生每一天都是现场直播，所谓的人前显赫，不过是以往的极致积累付出所换来的。今天看到江南春谈到他过往的创业史，也并不是一帆风顺，顺风顺雨的。恰恰相反，在他创业的道路上，每一步都是如履薄冰，都是受宠若惊，竞争对手也会层出不穷，虎视眈眈向其发起挑战。001.量力而行与全力以赴在创业初期，我们的态度就应当是敢想敢做，全力以赴，因为不拼就不会有机会。当我们进入经营时期时，就要综合评判，尽自己所能去行事，万不</div> </li> <li><a href="/article/1835219574539251712.htm" title="日运势 | 2023年10月22日九月初八·平" target="_blank">日运势 | 2023年10月22日九月初八·平</a> 禅如易 <div>日运势|2023年10月22日九月初八·平平者，乃绳纠齐一义、平常之谓。宜行船收捕治邪瘟治病除灾行嫁与平台道途及场屋地基，修造泥饰墙壁等，若遇伐日及逢金禽宜出兵除贼等。图片图片生肖鼠图片综合运势★★★★生肖鼠的朋友进入运势多表现不错，某事顺心。在工作和生活中会出现一些好的机缘，而且而且遇事多有贵人相助，建议多多做自己力所能及的事情。事业运势★★★★事业平顺发展。机会比较好，应好好掌握，多做多成，今</div> </li> <li><a href="/article/1835198220704247808.htm" title="最新手机赚钱软件有哪些，分享刚刚上线的十款手机赚钱软件" target="_blank">最新手机赚钱软件有哪些，分享刚刚上线的十款手机赚钱软件</a> 好项目高省 <div>手机赚钱最快的软件，今天分享几款手机快速赚钱的方法，零投资宝藏级别app，这几款只要你认真做，就会让你实现财富自由！推荐高省app，高省是一款综合优惠劵导购平台+本地生活优惠平台，手机各大应用商店搜索高省即可下载使用登录邀请码887766，我们常见的好物分享群，薅羊毛群，捡漏群，内部优惠劵群，以及抖音主播推广的团购劵都是这种赚钱方式，在高省可获取到各大网购平台的内部优惠劵，本地生活团购劵，我们自己</div> </li> <li><a href="/article/1835193264798527488.htm" title="家校共育转化待优生的途径的研究" target="_blank">家校共育转化待优生的途径的研究</a> 冰皮石榴 <div>家校共育转化待优生的途径的研究“没有最好，只有更好”。从广义来说，我们每个尚没有挖掘出巨大潜力的个体都是待优生，这里我们只针对陕隘意义的待优生，每个学校、每个班级几乎都会有待优生的身影。待优生是指思想上、行为上、学习上暂时落后于一般学生的那些学生，他们不是生而落后。待优生的产生是家庭教育、学校教育、社会教育和待优生自身等多方面因素综合作用的结果。“孩子没有问题，如果孩子有问题，那一定是父母的问题”</div> </li> <li><a href="/article/1835192533358047232.htm" title="安卓玩机搞机技巧综合资源----安卓机型使用ADB指令无需root 卸载禁用当前机型各种软件app" target="_blank">安卓玩机搞机技巧综合资源----安卓机型使用ADB指令无需root 卸载禁用当前机型各种软件app</a> 安卓机器 <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93%E7%8E%A9%E6%9C%BA%E6%90%9E%E6%9C%BA%E6%8A%80%E5%B7%A7%E7%BB%BC%E5%90%88%E8%B5%84%E6%BA%90/1.htm">安卓玩机搞机技巧综合资源</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在前面的博文我有分享过如何使用adb来卸载禁用有些系统自带的软件。今天将详细的步骤来讲解。在操作前需要注意。不要禁用或者卸载有些系统应用如应用商店和系统更新等。否则系统严重会导致不开机。在做未有把握操作之前，最好先备份数据。如果遇到卡logo问题，极端情况下可能要在Recovery界面清除数据才能启动系统或者线刷来救砖。前期工作1----下载adb环境工具｛https://dl.google.co</div> </li> <li><a href="/article/1835170527573012480.htm" title="在职四战考研3day" target="_blank">在职四战考研3day</a> MM加油女孩 <div>今日已完成考研任务：与教务处老师联系，学习怎么正确使用书籍；看333教育综合大纲；日总结：下午下班后与教务处老师联系，老师跟我讲了资料的正确使用方式，心里也有了大概的思路——根据老师提供的教材，我第一轮需要用到的资料就是一本通+网课，书籍只作为辅助对象，倘若网课里的内容听懂了，老师说书籍就可以不看了。第二轮复习：就是网课+自己构建思维导图，并尝试做333教育综合的主观题；第三轮复习：背诵客观题起码</div> </li> <li><a href="/article/1835152531081228288.htm" title="含光热电站、有机有机朗肯循环、P2G的综合能源优化调度（Matlab代码实现）" target="_blank">含光热电站、有机有机朗肯循环、P2G的综合能源优化调度（Matlab代码实现）</a> 冒泡芳 <a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>‍个人主页：研学社的博客欢迎来到本博客❤️❤️博主优势：博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。⛳️座右铭：行百里者，半于九十。本文目录如下：目录1概述2运行结果3参考文献4Matlab代码实现1概述光热发电(concentratingsolarpower，CSP）是一种新型可再生能源发电技术，具有低碳发电和高效储能的优势，但当前光热电站常充当单一发电源进行能源供应，其供能潜力未得到充分</div> </li> <li><a href="/article/1835141314119823360.htm" title="【物联网技术大作业】设计一个智能家居的应用场景" target="_blank">【物联网技术大作业】设计一个智能家居的应用场景</a> Dream_Chaser～ <a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E5%A4%8D%E4%B9%A0/1.htm">期末复习</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%AE%B6%E5%B1%85/1.htm">智能家居</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91%E6%8A%80%E6%9C%AF/1.htm">物联网技术</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">期末大作业</a> <div>前言：本人的物联网技术的期末大作业，希望对你有帮助。目录大作业设计题（1）智能家居的概述。（2）介绍智能家居应用。要求至少5个方面的应用，包括每个应用所采用的设备，性能，功能。（3）画出智能家居应用图，并设计使用。大作业设计题设计一个智能家居的应用场景。要求：（1）智能家居的概述。答：智能家居，又称为智能住宅或家庭自动化，是指运用综合布线、网络通信、安全防范、自动控制及音视频等技术，将家居设施集成</div> </li> <li><a href="/article/1835140683665600512.htm" title="Quartus sdc UI界面设置（二）" target="_blank">Quartus sdc UI界面设置（二）</a> 落雨无风 <a class="tag" taget="_blank" href="/search/IC%E8%AE%BE%E8%AE%A1/1.htm">IC设计</a><a class="tag" taget="_blank" href="/search/fpga/1.htm">fpga</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>Quartussdc设置根据一配置quartus综合简单流程（一）上次文章中，说了自己写sdc需要配置的分类点，这次将说明在UI界面配置sdc。1.在Quartus软件中，导入verilog设计之后，打开Tools/TimeQuestTimingAnalyzer界面大致分为上下两部分，上半部分左侧显示Report、Tasks，右侧显示欢迎界面；下半部分显示Console和History，此处缺图，</div> </li> <li><a href="/article/1835125289584259072.htm" title="解锁企业潜能，Vatee万腾平台引领智能新纪元" target="_blank">解锁企业潜能，Vatee万腾平台引领智能新纪元</a> 自媒体经济说 <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a> <div>在数字化转型的浪潮中，企业正站在一个前所未有的十字路口，面对着前所未有的机遇与挑战。解锁企业内在潜能，实现跨越式发展，已成为众多企业的共同追求。而Vatee万腾平台，作为智能科技的先锋，正以其强大的智能赋能能力，引领企业步入一个全新的智能纪元。Vatee万腾平台，是一个集成了人工智能、大数据、云计算等前沿技术的综合性智能服务平台。它不仅仅是一个技术工具，更是企业转型升级的加速器，能够深入企业运营的</div> </li> <li><a href="/article/1835103360517238784.htm" title="2024上半年软考系统架构设计师-综合知识选择题及答案" target="_blank">2024上半年软考系统架构设计师-综合知识选择题及答案</a> 不对法 <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a> <div>1.操作系统先来先服务调度算法2.操作系统多道程序设计，利用率3.操作系统状态流转错误的，执行态到运行态4.数据库2NF每一个非主属性完全依赖主键5.数据库笛卡尔积m*n6.数据库不属于事务的特点，并发性7.数据库交集表达式R-(R-S)8.数据库反规范化属于逻辑设计9.网络没有加密功能，物理层10.网络二层交换机数据，数据链路层11.知识产权专利法是否属于民法12.知识产权商标不属于，其他几个是</div> </li> <li><a href="/article/1835099327492616192.htm" title="JavaScript 基础 - 第13天" target="_blank">JavaScript 基础 - 第13天</a> +码农快讯+ <a class="tag" taget="_blank" href="/search/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">JavaScript学习笔记</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基础-第13天深入对象创建对象三种方式构造函数new实例化过程实例成员&静态成员实例成员静态成员一切皆对象内置构造函数ObjectArrayStringNumberJavaScript基础-第13天了解面向对象编程的基础概念及构造函数的作用，体会JavaScript一切皆对象的语言特征，掌握常见的对象属性和方法的使用。深入对象内置构造函数综合案例深入对象了解面向对象的基</div> </li> <li><a href="/article/1835089370034565120.htm" title="企业如何构建有效的数据泄露防护安全体系" target="_blank">企业如何构建有效的数据泄露防护安全体系</a> 亿林数据 <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>在当今数字化时代，企业数据已成为核心资产，其安全性直接关系到企业的竞争力、客户信任度以及法律合规性。数据泄露事件频发，不仅会导致经济损失，还可能损害企业声誉和客户关系。因此，构建有效的数据泄露防护安全体系已成为企业不可或缺的重要任务。一、明确数据泄露防护的重要性数据泄露防护不仅是技术层面的挑战，更是企业管理、员工意识以及法律合规的综合体现。数据泄露可能导致知识产权流失、客户信任度下降、法律制裁和巨</div> </li> <li><a href="/article/1835085840603246592.htm" title="【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】" target="_blank">【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】</a> 冷风扇666 <a class="tag" taget="_blank" href="/search/%E5%A4%87%E6%88%98-%E8%BD%AF%E8%80%83/1.htm">备战-软考</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>经过前十天的学习，我们已经了解了软件工程生命周期模型、需求分析与管理方法，以及软件设计与架构的核心内容。为了巩固这些知识点，今天我们将进行一个综合练习。前十天学习内容回顾第1-3天：软件工程概述学习了软件生命周期模型（如瀑布模型、迭代模型、敏捷模型等）、软件工程原则（如开闭原则、单一职责原则等），以及常用的工程方法。第4-6天：需求分析与管理需求分析与管理是软件开发的关键环节之一。我们掌握了需求获</div> </li> <li><a href="/article/87.htm" title="面向对象面向过程" target="_blank">面向对象面向过程</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>面向对象：把要完成的一件事，通过对象间的协作实现。面向过程：把要完成的一件事，通过循序依次调用各个模块实现。我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian</div> </li> <li><a href="/article/214.htm" title="Java Hotspot: Remove the Permanent Generation" target="_blank">Java Hotspot: Remove the Permanent Generation</a> bookjovi <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>  openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122   JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/</div> </li> <li><a href="/article/341.htm" title="正则表达式向前查找向后查找,环绕或零宽断言" target="_blank">正则表达式向前查找向后查找,环绕或零宽断言</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。     对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的</div> </li> <li><a href="/article/468.htm" title="BaseDao" target="_blank">BaseDao</a> 171815164 <a class="tag" taget="_blank" href="/search/seda/1.htm">seda</a> <div> import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn</div> </li> <li><a href="/article/595.htm" title="Ant标签详解--Java命令" target="_blank">Ant标签详解--Java命令</a> g21121 <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>        这一篇主要介绍与java相关标签的使用         终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。           1</div> </li> <li><a href="/article/722.htm" title="[简单]代码片段_电梯数字排列" target="_blank">[简单]代码片段_电梯数字排列</a> 53873039oycg <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div>       今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下:       import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S</div> </li> <li><a href="/article/849.htm" title="Hessian原理" target="_blank">Hessian原理</a> 云端月影 <a class="tag" taget="_blank" href="/search/hessian%E5%8E%9F%E7%90%86/1.htm">hessian原理</a> <div>Hessian 原理分析一．      远程通讯协议的基本原理网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协</div> </li> <li><a href="/article/976.htm" title="区分Activity的四种加载模式----以及Intent的setFlags" target="_blank">区分Activity的四种加载模式----以及Intent的setFlags</a> aijuans <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>  在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop</div> </li> <li><a href="/article/1103.htm" title="hibernate几个核心API及其查询分析" target="_blank">hibernate几个核心API及其查询分析</a> antonyup_2006 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a> <div>(一)  org.hibernate.cfg.Configuration类         读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.)         Configuration co</div> </li> <li><a href="/article/1230.htm" title="PL/SQL的流程控制" target="_blank">PL/SQL的流程控制</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%BC%96%E7%A8%8B/1.htm">PL/SQL编程</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF%E6%8E%A7%E5%88%B6/1.htm">循环控制</a> <div>PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有   流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop </div> </li> <li><a href="/article/1357.htm" title="强大的Mockito测试框架" target="_blank">强大的Mockito测试框架</a> bijian1013 <a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.自动生成Mock类        在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类  &nbs</div> </li> <li><a href="/article/1484.htm" title="精通Oracle10编程SQL(11)开发子程序" target="_blank">精通Oracle10编程SQL(11)开发子程序</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E</div> </li> <li><a href="/article/1611.htm" title="【EhCache一】EhCache版Hello World" target="_blank">【EhCache一】EhCache版Hello World</a> bit1129 <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍   环境准备 1.新建Maven项目   2.添加EhCache的Maven依赖 <dependency> <groupId>ne</div> </li> <li><a href="/article/1738.htm" title="学习EJB3基础知识笔记" target="_blank">学习EJB3基础知识笔记</a> 白糖_ <a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/ejb/1.htm">ejb</a> <div>最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。   EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基</div> </li> <li><a href="/article/1865.htm" title="angular.bootstrap" target="_blank">angular.bootstrap</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular%E4%B8%AD%E6%96%87api/1.htm">angular中文api</a> <div>angular.bootstrap 描述：     手动初始化angular。     这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。   使用方法：     angular .</div> </li> <li><a href="/article/1992.htm" title="java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数" target="_blank">java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl</div> </li> <li><a href="/article/2119.htm" title="天使还是魔鬼？都是我们制造" target="_blank">天使还是魔鬼？都是我们制造</a> ducklsl <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a><a class="tag" taget="_blank" href="/search/%E6%83%85%E6%84%9F/1.htm">情感</a> <div>----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！     从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！     自己挑了两部先看了看，但是发现看完之后，心里久久不能平</div> </li> <li><a href="/article/2246.htm" title="[机器智能与生物]研究生物智能的问题" target="_blank">[机器智能与生物]研究生物智能的问题</a> comsci <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div>       我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别....       但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把</div> </li> <li><a href="/article/2373.htm" title="获取Android Device的信息" target="_blank">获取Android Device的信息</a> dai_lm <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div> String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph</div> </li> <li><a href="/article/2500.htm" title="最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现" target="_blank">最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现</a> datamachine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8C%B9%E9%85%8D/1.htm">字符串匹配</a> <div>原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2627.htm" title="小学5年级英语单词背诵第一课" target="_blank">小学5年级英语单词背诵第一课</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>long 长的 show 给...看，出示 mouth 口，嘴 write 写   use 用，使用 take 拿，带来 hand 手 clever 聪明的   often 经常 wash 洗 slow 慢的 house 房子   water 水 clean 清洁的 supper 晚餐 out 在外   face 脸，</div> </li> <li><a href="/article/2754.htm" title="macvim的使用实战" target="_blank">macvim的使用实战</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳   1. 下载macvim https://code.google.com/p/macvim/   2. 了解macvim :h               vim的使用帮助信息 :h macvim  </div> </li> <li><a href="/article/2881.htm" title="java二分法查找" target="_blank">java二分法查找</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%B3%95%E6%9F%A5%E6%89%BE/1.htm">java二分法查找</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%B3%95/1.htm">二分法</a><a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%B3%95/1.htm">java二分法</a> <div>java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/</div> </li> <li><a href="/article/3008.htm" title="Spring Cache注解+Memcached" target="_blank">Spring Cache注解+Memcached</a> hanqunfeng <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>Spring3.1 Cache注解  依赖jar包：  <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s</div> </li> <li><a href="/article/3135.htm" title="apache commons io包快速入门" target="_blank">apache commons io包快速入门</a> jackyrong <a class="tag" taget="_blank" href="/search/apache+commons/1.htm">apache commons</a> <div>原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html   Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍：   1）  工具类   2</div> </li> <li><a href="/article/3262.htm" title="如何学习编程" target="_blank">如何学习编程</a> lampcy <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><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> <div>首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有</div> </li> <li><a href="/article/3389.htm" title="架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy" target="_blank">架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy</a> nannan408 <a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a> <div>1.前言。    如题。 2.描述。    @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp</div> </li> <li><a href="/article/3516.htm" title="Spring4+quartz2的配置和代码方式调度" target="_blank">Spring4+quartz2的配置和代码方式调度</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/quartz2.x/1.htm">quartz2.x</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1/1.htm">定时任务</a> <div>前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API……   quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发</div> </li> <li><a href="/article/3643.htm" title="Hibernate入门" target="_blank">Hibernate入门</a> tntxia <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>  前言   使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。   Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。   如</div> </li> <li><a href="/article/3770.htm" title="Math类" target="_blank">Math类</a> xiaoxing598 <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round</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>

【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React

盒模型

边距重叠解决方案BFC(块级格式化上下文)

清除浮动

父级div定义伪类：after和zoom

在结尾处添加空div标签clear:both

父级div定义height

父级div定义overflow:hidden

父级div定义overflow:auto

父级div也一起浮动

父级div定义display:table: 将div属性变成表格

结尾处加br标签clear:both:父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both

Position

inline-block中间会有空隙

层叠优先级

怎样覆盖 !important

HTTP:地址栏输入url到显示页面的步骤

基本流程：

数据类型

使用Symbol来作为对象属性名(key)

使用Symbol来替代常量

使用Symbol定义类的私有属性/方法:私有化内部属性/方法

注册和获取全局Symbol

怎样覆盖 `!important`