前端架构

前端是什么？ 工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效果，然后与后台进行各种数据交互。 目前的前端市场整体还是处于迅速发展期，市场对于前端的需求也一直比较大。市场对于中高级的前端工程师需求更加迫切，所以就算入了前端的门，也需要不断的提升自己，无论你是学院派，还是培训派，还是自学派，都应该具有强烈的学习意识。 目前入门前端的人群分类 1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。 优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。 缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。 2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。 优点：自学能力比较强，能够根据自己的兴趣规划学习内容。 缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。 门前端时的一些困境 1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表

理解前后端分离 目录 理解前后端分离 为什么要做前后端分离，它到底有什么好处？ 实现的一些表现 RESTful风格的API 为什么要做前后端分离，它到底有什么好处？ 前后端的分离也实现了前后端架构的分离，带来的好处有： 整个项目的开发权重往前移，实现真正的前后端解藕，动态资源和静态资源分离，提高了性能和扩展性。 前端静态化 前端有且仅有静态内容,再明确些,只有HTML/CSS/JS。 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。 前端内容的运行环境和引擎完全基于浏览器本身。 后端数据化 后端可以用任何语言,技术和平台实现。 遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。 统一API接口，接口完全可以共用。 提供的数据可以用于任何其他客户端(如IOS,安卓,PC,微信小程序等)。 通过一些代码重构，就可以大量复用接口，提升效率。 平台无关化 前端3大技术（HTML/CSS/JS）本身就是平台无关的。 后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现。 前后端交给不同的人来编写，明确划分职责，发现bug的时候可以快速定位。 vue.js等框架编写前端时，会比之前写jquery更简单快捷。 架构分离化 前端架构完全基于HTML/CSS的发展和JS框架的演变,由于前台是纯静态内容

JavaScript规范 目录 类型 对象 数组 字符串 函数 属性 变量 条件表达式和等号 块 注释 空白 逗号 分号 类型转换 命名约定 存取器 构造器 事件 模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离 使用jsHint 前端工具 类型 原始值 : 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。 string number boolean null undefined var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 复杂类型 : 相当于传引用 object array function var foo = [1, 2], bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 对象 使用字面值创建对象 // bad var item = new Object(); // good var item = {}; 不要使用保留字 reserved words 作为键 // bad var superman = { class: 'superhero', default: { clark: 'kent' }, private: true }; // good var

一. 关于babel babel是ES6+语法的编译器，用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法，使代码能够适用更多环境。 最初的babel使用起来是非常方便的，几乎仅使用少量的配置就可以使用，但随着工具的快速升级和代码架构的转变，babel已经裂变成非常多的部分，每个部分各司其职，这样做的好处是可以缩小生产环境的正式包的代码体积（因为可以按需引用）而加重了开发环境（开发阶段需要引入更多碎片化的插件），但劣势就是将其使用门槛提得非常高，对软件架构不熟悉的开发者难以使用。 比如babel官方网站在webpack配置的章节，提及了babe-loader,babel-core和babel-preset-env三个插件，而当开发者在webpack中实际进行配置时除了上述三个基本插件外，又会遇到babel-polyfill,babel-runtime,babel-plugin-transform-runtime等等一系列插件，或许通过查看插件说明能够理解插件的功能，但开发者却很难判断自己是否该使用这个功能或者什么时候使用。 二. 基本需求推演 我们从工具设计的角度，通过问题推演的方式来看看 babel 的变化。 在 ES6 标准推出时，浏览器还不能很好地支持，但 ES6 的许多特性和语法又很诱人，所以大家想了个办法，那就是用 ES6 编写代码，然后出包的时候拿个工具转换一下

完整代码已上传于Github中： https://github.com/Shadow1300/JavaEE 文末也将列出来。 一、首先了解一下作业要求 我们首先要对需求进行分析： 1）用户 ：老师、学生 2）功能 ：添加作业、添加学生、查询学生作业、作业提交 3）功能扩展完善 ： ①登录 ：由于存在添加学生这个功能，那我认为应该有一个登录功能，没有被授权的学生不能进入提交界面，否则添加学生的功能就失去了意义； ②查询作业要求 ：由于学生需要进行作业的提交，则应该有一个途径可以查看作业要求； ③查看学生 ：由于老师可以添加学生，那么也应该可以查看学生表以知已经添加了哪些学生了。 二、建表分析 不难分析出，此系统需要三个表： 1、学生表； ①学生id（主属性） ②学生姓名 ③自增id序号（主属性） 2、作业要求表； ①自增id序号（主属性） ②作业序号（主属性） ③作业要求内容 ④作业截止时间 3、提交作业情况表； ①自增id序号（主属性） ②学生i（(主属性）（外键引用student表中的student_id） ③作业id（主属性）（外键引用homework表中的homework_id） ④作业标题 ⑤作业内容 ⑥提交时间 ⑦作业截止时间（此属性为供老师参考学生是否晚交，扣分参考） 分析好需求和设计好表之后，我们先别着急着写代码，要对整个项目进行整体设计

用vue-cli构建vue 2.x项目 环境要求 构建项目 环境要求 1. 检查是否安装node.js运行环境 //终端输入 node -v 2. 检查是否安装npm和cnpm包管理程序 //终端输入 npm -v cnpm -v // 淘宝镜像专用通道 3. 检查是否安装webpack构建工具 //终端输入 webpack -v 4. 检查是否安装vue-cli手脚架 //终端输入，这里是大写的"V" vue -V 确定以上环境都没问题后，那么我们就往前走，构建项目开始。 构建项目 第一步：直接在code目录（本人代码项目习惯）右键选择Git Bash Here(本着已安装git) 你们看着办 第二步：在终端开始安装命令 //终端输入,"project"是项目名称,大家随意，不要中文就行 vue init webpack project Administrator/d/code $ vue init webpack project--------------------- 安装项目命令 ? Project name (project) --------------------- 项目名称 ? Project name project ? Project description (A Vue.js project)--------------------- 项目描述 ?

转自： 平凡希 老师 https://www.cnblogs.com/xiaoxi/ SpringMVC的工作原理图： SpringMVC流程 1、 用户发送请求至前端控制器DispatcherServlet。 2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 4、 DispatcherServlet调用HandlerAdapter处理器适配器。 5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 6、 Controller执行完成返回ModelAndView。 7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 9、 ViewReslover解析后返回具体View。 10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 11、 DispatcherServlet响应用户。 组件说明：

面试有几点需注意： 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。 细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。 回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )） 资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。 前端开发知识点： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack CSS基本功：布局、盒子模型、选择器优先级 HTML5、CSS3、Flexbox JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他： 移动端、响应式、自动化构建、HTTP、离线存储、 WEB安全、优化、重构 团队协作、可维护

一、 背景 魔法校是tob起家，众所周知tob业务很容易做成巨石应用，近两年来魔法校飞速发展，我们的某个主要的前端项目遇到了瓶颈，那就是项目太大了。 为了减少耦合度加快打包速度，我们选择将一些功能提出来新建项目，然后通过iframe的方式引入到主项目中去。 虽然项目体积大的问题得到了解决，但用户体验却随之下降。 因为每次用户切换到iframe的tab时不管优化的再好总要有一瞬间的白屏，整个系统使用起来没有连贯性，而且在iframe里切换页面浏览器的地址栏url并不会变化，给人的感觉就是两个系统。 业务的快速发展迫使我们去寻找一种新的方式-微前端。 二、微前端的基本概念 1、什么是微前端 微前端是近两年比较火的一个概念，这个术语最初来自 2016 年的 ThoughtWorks 技术雷达，它将微服务的概念扩展到了前端领域。 目前的趋势是构建一个功能丰富且强大的前端应用，即单页面应用(SPA)。 前端层通常由一个单独的团队开发，随着时间的推移，会变得越来越庞大而难以维护。 这就是传说中的前端巨无霸Frontend Monolith。 微前端背后的理念是将一个网站或者 Web App 当成特性的组合体，每个特性都由一个独立的团队负责。 每个团队都有擅长的特定业务领域或是它关心的任务。 这里，一个团队是跨职能的，它可以端到端，从数据库到用户界面完整的开发它所负责的功能。 然而

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/fPNMaeNYgU3eJsh0SLMRRg 作者：孔垂亮 【前端科普系列】往期精彩内容： 《前端科普系列（1）：前端简史》 主要介绍 web 前端发展的历史、大事件。 本文为系列文章（2），主要介绍 Node.js 的前世今生、核心科技以及背后的故事。 一、关于 Node.js 1.Node.js 是什么 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 按照 Node.js官网 的解释非常简单： Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。 那我们该怎么理解这句话呢？ Node.js 不是 JavaScript 的应用、也不是一种框架、更不是一门语言。它是一个 JavaScript 的运行环境，就和浏览器是一个 JavaScript 运行环境一样。 它是构建在 Chrome’s V8 这个著名的 JavaScript 引擎之上的。 这里不得不聊聊 Chrome & V8。 2.Node.js 诞生的背景 2008年， Google 开发了 Google 地图，但 Google 地图那时是安卓的原生应用。为了进一步扩展 Google