传奇手游176版本,三端传奇手游找服网站

1.js的防抖和节流

函数防抖

函数防抖原理（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

一起来实现个简单的debounce~

防抖debounce代码：

// 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。

函数节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

函数节流主要有两种实现方法：时间戳和定时器。接下来分别用两种方法实现throttle~

节流throttle代码（时间戳）：

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

当高频事件触发时，第一次会立即执行（给scroll事件绑定函数与真正触发事件的间隔一般大于delay，如果你非要在网页加载1000毫秒以内就去滚动网页的话，我也没办法o(╥﹏╥)o），而后再怎么频繁地触发事件，也都是每delay时间才执行一次。而当最后一次事件触发完毕后，事件也不会再被执行了（最后一次触发事件与倒数第二次触发事件的间隔小于delay，为什么小于呢？因为大于就不叫高频了呀(??)）。

节流throttle代码（定时器）：

// 节流throttle代码（定时器）：
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

当触发事件的时候，我们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到delay时间后，定时器执行执行函数，并且清空定时器，这样就可以设置下个定时器。当第一次触发事件时，不会立即执行函数，而是在delay秒后才执行。而后再怎么频繁触发事件，也都是每delay时间才执行一次。当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。

节流中用时间戳或定时器都是可以的。更精确地，可以用时间戳+定时器，当第一次触发事件时马上执行事件处理函数，最后一次触发事件后也还会执行一次事件处理函数。

节流throttle代码（时间戳+定时器）：

// 节流throttle代码（时间戳+定时器）：
var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));

在节流函数内部使用开始时间startTime、当前时间curTime与delay来计算剩余时间remaining，当remaining<=0时表示该执行事件处理函数了（保证了第一次触发事件就能立即执行事件处理函数和每隔delay时间执行一次事件处理函数）。如果还没到时间的话就设定在remaining时间后再触发（保证了最后一次触发事件后还能再执行一次事件处理函数）。当然在remaining这段时间中如果又一次触发事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态。

总结

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

2.flex布局你知道哪些

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
Webkit 内核的浏览器，必须加上-webkit前缀。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

(flex地址)http://08643.cn/p/bd943a3cae78

3.sass如何编译成css的

sass提供四种编译选项

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

4.js的跨域问题

在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：

1.Cookie、LocalStorage和IndexDB无法读??；

2.DOM无法获得；

3.AJAX请求不能发送。

跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

跨域问题的解决：

1.jsonp

可跨域的html标签
利用<script>标签实现跨域

jsonp的缺点
没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求.

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。

2.跨域资源共享（CORS）

CORS是HTML5标准中定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。浏览器中的报错：

5. json和jsonp， ajax的区别

json返回的是一段数据，jsonp返回的是一个 js脚本
jsonp是通过创建script标签指定数据的路径与回调函数进行数据操作返回的是一个js脚本是一个函数的执行

ajax本身不支持跨域修改头信息后支持跨域
jsonp支持跨域
ajax支持get与post的请求 jsonp支持get请求
ajax是通过xmlhttpRequest实现的 jsonp是通过动态创建的 script标签实现的

6.react的路由有哪些

我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式：

1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式

2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径

3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化

4、NativeRouter：经常配合ReactNative使用，多用于移动端

5、StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用

7.redux的工作原理

View在Redux会派发一个Action， Action通过Store的Dispatch方法派发给Store, Store接收到Action 连同之前State 一同传给Reducer Reducer会返回一个新的数据给Store Store然后去改变自己的State 这个是Redux的标准流程

8. 原型和原型链之前的关系

每一个由构造函数new出来的实例对象都带有一个_proto属性，该属性指向创建他的构造函数的protoType对象，而prototype是实例，也有自己的_proto属性指向他的原型对象，当访问一个对象的属性时，如果这个内部不存在这个属性那它就会去prototype里去找这个属性，所有这个属性又会有自己的prototype这个过程就是原型链

9.CSS水平垂直居中的几种方式

［地址］http://08643.cn/p/7fe3d0aacb1a

10.对MVVM的理解

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

10.对MVC的理解

MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC 被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，主要提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。主要使用的技术：数据模型：实体类（JavaBean），数据访问：JDBC，Hibernate等。

View（视图）：负责进行模型的展示，一般就是我们见到的用户界面，比如JSP，Html等

Controller（控制器）：接收用户请求，委托给模型进行处理（状态改变），处理完毕后把返回的模型数据返回给视图，由视图负责展示。主要使用的技术：servlet，Struts中的Action类等。

MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

面试过程中遇到的问题记录

面试过程中遇到的问题记录

1.js的防抖和节流

函数防抖

函数节流

2.flex布局你知道哪些

3.sass如何编译成css的

4.js的跨域问题

跨域问题的解决：

1.jsonp

2.跨域资源共享（CORS）

5. json和jsonp， ajax的区别

6.react的路由有哪些

7.redux的工作原理

8. 原型和原型链之前的关系

9.CSS水平垂直居中的几种方式

10.对MVVM的理解

10.对MVC的理解

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

面试过程中遇到的问题记录

1.js的防抖和节流

函数防抖

函数节流

2.flex布局你知道哪些

3.sass如何编译 成css的

4.js的 跨域问题

跨域问题的解决：

1.jsonp

2.跨域资源共享（CORS）

5. json和jsonp， ajax的区别

6.react的路由有哪些

7.redux的工作原理

8. 原型和原型链之前的关系

9.CSS水平垂直居中的几种方式

10.对MVVM的理解

10.对MVC的理解

3.sass如何编译成css的

4.js的跨域问题