前端架构

前端面试问题汇总(一)

匆匆过客 提交于 2019-12-23 18:18:13
1、js闭包 闭包是一种特殊的对象。 它有两部分组成--执行上下文,以及在该执行上下文中创建的函数。当函数执行时,如果访问了执行上下文中变量对象的值,那么闭包就会产生。 function foo(){ var a = 20; var b = 30; function(){ return a+b; } bar(); } foo(); 2、JSON 什么是JSON JSON:JavaScript 对象表示法(JavaScript Object Notation)。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快,更易解析。 JSON - 转换为 JavaScript 对象 JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。 实例 <html> <body> <h2>在 JavaScript 中创建 JSON 对象</h2> <p> Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p> <script type=

SpringMVC工作原理

元气小坏坏 提交于 2019-12-22 12:30:28
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响应用户。 组件说明: 以下组件通常使用框架提供实现: DispatcherServlet:作为前端控制器

SpringMVC框架笔记01_SpringMVC的使用案例和架构组件_SpringMVC和Mybatis整合_接收参数

只谈情不闲聊 提交于 2019-12-22 06:50:09
目录 第1章:SpringMVC简介 1.1 什么是SpringMVC 1.2 SpringMVC的处理流程 第2章:SpringMVC入门程序 2.1 场景描述 2.2 步骤分析 2.3 步骤一:创建Web项目 2.4 步骤二:导入jar包 2.5 步骤三:在 web.xml 中配置DispatcherServlet前端控制器 2.6 步骤四:创建 springmvc.xml 配置文件 2.7 步骤五:新建一个商品POJO 2.8 步骤六:创建一个jsp页面 2.9 步骤七:创建商品的 Controller 2.9.1 传统方式:实现一个 Controller 接口 2.9.2 注解方式:添加一个 @Controller 注解 2.10 把 Controller 配置到 springmvc.xml 中 2.10.1 传统方式:实现一个 Controller 接口的方式的配置 2.10.2 注解方式:添加一个 @Controller 注解 第3章:SpringMVC的完整架构 3.1 框架结构 3.2 架构流程 3.3 组件说明 第4章:SpringMVC和Mybatis整合 4.1 整合的思路 4.2 整合的步骤 4.3 开始整合 4.3.1 创建数据库和表 4.3.2 创建工程 4.3.3 配置文件 4.3.4 持久层 4.3.4 实体类 4.3.5 业务层 4.3.6 表现层

架构设计:前后端分离之Web前端架构设计

蹲街弑〆低调 提交于 2019-12-21 04:29:49
  在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的。   在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通、协调以及管理成本相对较高,随着前端技术的发展,前端开发的工程量是越来越大,难度也是越来越高,因此前端工程的项目化,工程化和独立性越来越被人重视了,所以出现了大量的javascript MVC的富应用。如果javascript也能做到MVC模式,那么前端框架就可以抛弃异构语言的控制层,做到真正的独立。   要把传统的MVC的C层从前端剥离掉,我们首先要理解下MVC的C层即控制层到底做了什么样的事情,控制层的作用是模型层和视图层沟通的纽带,模型层进一步具体点就是数据层,视图层具体点就是数据展示给用户的方式,下面我们看看java的Web应用里,控制层和视图层是如何耦合的呢?做过java的web开发的人第一个反应就是页面里回嵌入大量java代码或者使用jsp的标签或者使用velocity

前后端分离后的前端时代,前端技术要会做哪些事?

牧云@^-^@ 提交于 2019-12-20 08:57:28
1,什么是前后端分离 1,什么是前后端分离,要区分前端和后端,需要有个明确的界限。一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了。 2,在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的“人格”可言。 3,前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器展示。 这个过程中,前端只提供页面模板或者写一些JavaScript脚本,有的甚至JS脚本都是后端来写,前端的作用只局限于切图和样式模板文件,这种角色就是传说中的“切图仔”。 这也是为什么行业内都觉得前端是一个很简单的工作,只要花个一周,学下HTML、CSS和PS的简单技巧就可以胜任的工作。 现在看来,那时候的前端就是一个打酱油的,发展前景很有限。那时候的JavaScript脚本也比较简单,一个jQuery就可以横扫天下,所以对于精通语言类代码的后端程序员来说,可以很快的上手JavaScript,对前端来说,发展空间就更小了。 2,前后端分离,不只是简单的代码的分离。 首先是要架构上分离解耦,逐渐摆脱前后端在架构上的依赖,前后端各司其职,分开部署在不同的服务器上,通过RESTful接口传递数据。减轻后端服务器的压力,后端服务器不再负责页面渲染,只负责输入数据,吞吐量提升了好几倍。 其次是逻辑分离,不分离的时候

我的web前端修炼之路从此开始

纵饮孤独 提交于 2019-12-19 23:41:25
  看过一篇文章,上面说过要想学习一门新技术,从什么时候开始都是不晚的。但对于一名大四的学生,只会一点简单的网页架构,只懂得HTML,CSS,JavaScript简单的一点皮毛,却怎么也说不过去。但也是这句话也给了自己一点安慰,不想在大学的最后一年再继续混下去,现在说什么从此我要奋发图强的话都是空谈,我了解自己,我也不敢保证我会不会一直坚持下去,但是现在我的感觉是我不想荒废自己,我不想毕业之后自己养不起自己,我不想毕业几年之后还要花父母的钱,我不想自己一个人在外地无目的的打拼,让家里的父母担心自己,但是以我现在的实力,这些都非常有可能发生   我是一名普通院校软件工程专业的学生,想走web前端开发这条路从大二就开始了,我喜欢自己设计页面,喜欢浏览那些炫酷的网站,还有很不想承认的是学校教的C,JAVA,数据结构,嵌入式之类的知识自己真的学不来,自己不是聪明的人,高中靠着死学考上了本科院校,阴差阳错了地选择了这门技术性特高的专业,真的是从负基础开始接编程,从一开始的没有兴趣到后来的自暴自弃,靠着考试前的啃书本顺利通过了每一门考试,在他们看来我也是一名爱学习的学生,但是真的需要自己动手编程的时候,自己真的就慌了,看着大些技术性大神解决了一个个技术性的难题,可我连他们写的是什么都看不懂,到了大四,大神们都得到了一个个大公司的实习offer,差一点的也开始准备考研了

传统的DOM是如何进行渲染的

喜你入骨 提交于 2019-12-19 21:05:22
在这篇文章里,DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。在Chrome中,这个渲染好的DOM,就是在开发者工具中元素这个tab中,递归的展开之后得到的整个文档。 DOM渲染的演化过程,大致可以分为可以分为三个阶段: 纯后端渲染 纯前端渲染 服务端的js渲染结合前端渲染 下面我们分阶段来做一下说明。 第一个阶段是纯后端渲染。采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM)。当然,这里是“基本”一致,因为实际操作中,页面或多或少还是会带有一些js代码,并且在浏览器端中运行这些js代码来对DOM进行的渲染,不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器。这种渲染的逻辑如下图所示 纯后端的渲染的整体的结构是最简单的,把全部的逻辑都交给后端来完成。这样的优点在于返回的HTTP Response是包含着全部页面内容的,相对来说页面的主体DOM结构都会在这个响应中返回,可以让用户更快的看到页面的主体部分,而这样的响应对于浏览器爬虫来说也更有好,对SEO更有帮助

前端工程化,组件化,模块化,层次化

╄→尐↘猪︶ㄣ 提交于 2019-12-19 09:47:06
个人认为:前端发展的导向是前端工程化,智能化,模块化,组件化,层次化。 一个项目的开发逐渐在人工智能+物联网的时代,走向以下的五化 原因: Web前端页面的开发必然与DOM进行交互操作,前端框架的一次次更新,是从满足目前的业务需求到提升效率的阶段,慢慢走向改善性能的阶段(开发和部署环境优化,代码优化,网站性能优化,数据优化,页面优化等等)。 1.前端工程化。 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同,质量开发。 具体是: a.Node服务,提供数据代理,路由,服务器渲染。 b.Web应用开发,专注于web交互体验。 c.前端运维:构建,测试,部署,监控。 2.前端模块化(页面模块化开发+基础模块化)。 (1)基础模块化: A. CommonJS————同步加载、服务器端的模块化规范,采用案列:Node.js 实现原理: 一个单独的文件就是一个模块; 加载模块采用同步方式,加载完成后才能执行后面的操作; 加载模块使用require方法,该方法读取一个文件并执行,最后返回内部的exports对象; 特点: 比较适合运用于服务器的编程,加载模块文件通常都存在本地磁盘,加载过程无延迟,无需异步加载 B. AMD————异步加载,采用案例:require.js 实现原理: 异步模块定义,通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性;

2017前端大厂踩坑经验

不羁的心 提交于 2019-12-18 09:48:25
不得不说今年的前端无疑超越了两年前java的火爆,但是同样应聘人数增加后,应聘要求也随之大幅度上升,在不是那个切切图,做做ui就能说自己是前端开发工程师了,而如今微信小程序的推出,无疑是让风口浪尖上的前端更上一个层次,好了废话不多说,简单讲下个人的面试经历和面试考点吧 本人目前大四,于大三下学期开始参加暑期实习生的春招,一步一坑直至最近终于斩获一份还不错的offer,虽然不是BAT级别的,但是很不错的一家做微信平台开发的公司 2016.3-7月(大三下,暑期实习要求较简单,就不罗列考点了) 腾讯 当初报腾讯的时候,确实是头脑发热,因为考虑到自身从大二实习,有一年工作经验,比赛获奖也不少,所以很是膨胀,腾讯的笔试没有通过,硬是去霸面了,惨淡的以一面被拒收场。 腾讯在对待霸面上还是很仁慈的,那天早上我早早的就去霸面,HR也很耐心的接待了我,在看到我简历还算不错的情况下,很快安排我一面了,最后直接跪死在算法上,用了一个N^2的算法,结果面试还是很好的提醒我算法,数据结构是硬伤要好好加油,然后,就没有然后了。。。。。 阿里三面 在腾讯结束不久后,又立马开始了阿里的暑期校招,很幸运的是当时过了笔试,于是兴冲冲的去参加面试,这里要说明的是,阿里应该不接受霸面,每次面试都有相应通关卡。 一面:面试官在看到我众多的项目跟过奖之后对我印象还不错,在问及后台的时候,我说我后台接触php较多

node.js-4

自作多情 提交于 2019-12-18 03:27:34
前段异步流程工具 1.promise 2.Generator函数 3.Async函数 4.Node.js提供的 nextTick 5.第三方的async.js async.js 1.async函数式是由es6提供的 2.async函数的底层其实就是generator函数 3.async函数需要和关键字 await搭配使用 4.async也是promise,也可以调用.then 格式: const asyncFn = async () => { await 任务 } var obj = { async aa () { await 任务 } } 例 const asyncFn = async () => { // const request = await '任务一' // console.log(' 任务2 ') // console.log( request ) // } // asyncFn() // console.log( '主线程任务' ) 注意:只有await后面的任务顺利执行完成,那么下面的人物才会去执行,如果await后面的任务执行不顺利,那么下面的任务就会执行不顺利 使用场景:先进行数据请求,得到数据后,然后再去操作这个数据,我们的async就是首选 4.async也是promise,也可以调用.then Node.js提供的两个方法 nextTick