前端工程师2023版
核心代码，注释必读
// download：3w ukoou com
前端工程师如何正确理解前后端分离
前后端分离开发是当前非常热门的技术方向，可以说是互联网项目开发的标配，如果你还不懂前后端分离，那肯定就 out 了。一直以来很多读者都在问我同一个问题：到底什么是前后端分离啊？有这种疑惑的读者不在少数，所以今天就写一篇文章来给大家说说什么是前后端分离。
顾名思义，前后端分离就是把一个应用的前端代码和后端代码分开来写，为什么要这样做呢？先说说不分开会有什么问题，在传统的 Java Web 开发模式中，前端页面使用 JSP，而 JSP 代码的开发往往不是完全由后端程序猿来完成的。
JSP 页面的开发步骤是首先需要前端程序猿完成 HTML 代码，然后交给后端程序猿转为 JSP 再进行开发，后端如果遇到页面问题，就需要找前端来解决，但是此时前端看到的代码已经不是他之前写的 HTML 了，是混合了一大堆标签的 JSP 代码，而前端又不懂 JSP，场面就非常尴尬。
后端：你写的页面有问题啊，不显示数据。
前端：不可能，我这边都是好的。
后端：你自己来看啊。
前端：你写的这是什么玩意？我给你的代码不是这样的。
后端：我得把你的代码加到 JSP 里啊。
前端：我又不懂 JSP 啊，你再把代码摘出来吧，我帮你看看问题。
后端：......
这样就导致开发效率极低，后端需要等待前端的 HTML 代码完成之后，再整合成 JSP，而且出错率较高，遇到 Bug 解决起来也很麻烦，需要双方协同处理，这就给开发带来了很大的问题，怎么解决呢？
可以采用前后端分离的开发模式，前后端程序猿只需要提前约定好接口文档（参数、数据类型），然后并行开发即可，最后完成前后端集成，遇到问题同步修改即可，真正实现了前后端应用的解耦合，可以极大地提升开发效率。
说直白点前后端分离就是把原来的一个应用，拆分成两个应用，一个纯前端应用，专门负责数据展示和用户交互，一个纯后端应用，专门负责提供数据处理接口，前端 HTML 页面通过 Ajax 调用后端 RESTful API 接口进行数据交互。
这么说不形象，通过下面这两张图带你了解前后端分离和传统单体应用的区别，单体应用的结构是这样的。
前后端代码分离是百分百正确，而且是现在的主流，但是要不要分家（分成两个团队，一个前端，一个后端）则是值得商榷的。因为每次前后端撕逼和联调都是效率的瓶颈
请区别对待前后端代码「分离」，和前后端人员「分家」。如果你司已经把前后端「分家」了，那么基本上前后端代码也是「分离」的。但是如果你司没有让前后端「分家」，那么前后端代码可能是「分离」的，也可能是「不分离」的，如何判定前文已经说了。
前后端分家的对立面并不是，而是 Web 开发。未来的趋势是大前端，也就是我上面说到的 groovy 的例子。
慕ke前端工程师事件系统的处理
事件系统是前端之中，极为核心的一个部分，因此，我们必须对其种种问题进行一个个的处理。先抛开强大的jquery的事件处理，倘若我们要写出一个对于事件系统的处理，并将其投入使用，那么我们至少应当解决如下的几个问题。
- 不同浏览器对于事件系统的API支持的问题
- IE的this指向问题
- 事件对象的差异性问题
- IE执行回调的顺序问题
那么，慕课网前端工程师既然整理好了问题，我们现在就可以开始去解决那些问题。
对于不同浏览器API的支持问题：
我们采用条件判断来进行简单地实现就好
function addEvent(target,eventName,callback,useCapture){
if(target.addEventListener){ //w3c方法优先
target.addEventListener(eventName,callback,useCapture);
}else if(target.attachEvent){ //然后采用ie下方法
target.attachEvent("on"+eventName,callback);
}else{ //最后在考虑使用onXXX形式
target["on"+eventName] = callback;
}
//返回回调函数，方便用于事件解绑
return callback;
}
function removeEvent(target,eventName,callback,useCapture) {
if (target.removeEventListener) {
target.removeEventListener(eventName, callback, useCapture);
} else if (target.detachEvent) {
target.detachEvent("on" + eventName, callback);
} else { //onXXX的形式直接将其设置为null即可
target["on" + eventName] = null;
}
}
这样，对于问题1，可以说算是解决了，而这样的一个事件注册函数，对于对事件系统简易需求的页面，已经很是足够了。不过既然提出了那些问题，那么就一一来进行解决吧。
对于ie下this指向的问题：
说点题外话，关于this的指向，其实很简单的来说，就是是谁调用的，this就指向谁。比较笼统的总结一下，日常this的指向就两种情况，对象中的this，那么就指向其对应的对象，普通函数中的this，就指向window。然而attachEvent的this指向，却是指向window的，因此，我们不得不对其进行修改。实现方式很简单，使用call或者apply，对于this指向进行修改就可以了。因此，上面的代码可以修改如下。
function addEvent(target,eventName,callback,useCapture){
if(target.addEventListener){ //w3c方法优先
target.addEventListener(eventName,handler,useCapture);
}else if(target.attachEvent){ //然后采用ie下方法
target.attachEvent("on"+eventName,handler);
}else{ //最后在考虑使用onXXX形式
target["on"+eventName] = handler;
}
//增加handler函数，在其中对于this指向进行改变，同时，采用handler处理函数来进行事件回调
function handler(){
callback.call(target);
}
//返回回调函数，方便用于事件解绑
return handler;
}
function removeEvent(target,eventName,callback,useCapture) {
if (target.removeEventListener) {
target.removeEventListener(eventName, callback, useCapture);
} else if (target.detachEvent) {
target.detachEvent("on" + eventName, callback);
} else { //onXXX的形式直接将其设置为null即可
target["on" + eventName] = null;
}
}
