前端架构

引言 本文会详细的讲解什么是混合App开发、混合App开发概念、原理、区别、为什么要学习混合App、混合App开发的几种方式以及具体的环境配置和踩坑指南等干货十足。 1-什么是混合移动App开发 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发 苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东 前端移动 App（Application）开发技术，去开发手机端的应用程序； 前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的独有的技术进行移动App开发体验； 什么是移动App开发：通俗的理解，就是把开发Web网站的技 （HTML+CSS+JS），通过某种方式，移植到移动App开发上进行使用，这种利用Web开发技术进行移动端开发体验的方式，叫做混合移动App开发！ 关于移动App开发，需要知道的几个概念： 原生开发：它的英文单词是（NativeApp）,指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式； 混合开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS

阅读目录 简而言之 组成部分 没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于 可以装B了 有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。 MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。 MVVM 的核心是 ViewModel 层 ，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示： MVVM模式 MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中

1. 跨标签⻚通讯 不同标签⻚间的通讯，本质原理就是去运⽤⼀ 些可以 共享的中间介质 ，因此⽐较常⽤的有以下⽅法: 通过 ⽗⻚⾯ window.open() 和⼦⻚⾯ postMessage 　　异步下， 通过 window.open('about: blank') 和 tab.location.href = '*' 设置同域下 共享的 localStorage 与 监听 window.onstorage 　　重复写⼊相同的值⽆法触发 　　会受到浏览器隐身模式等的限制 设置共享 cookie 与不断轮询脏检查( setInterval ) 借助服务端或者中间层实现 2. 浏览器架构 ⽤户界⾯ 主进程内核 　　渲染引擎 　　JS 引 擎 　　　　执⾏栈 事件触发线程 　　消息队列 　　　　微任务 　　　　宏任务 ⽹络异步线程 定时器线程 3.浏览器下事件循环(Event Loop) 事件循环是指: 执⾏⼀个宏任务，然后执⾏清空微任务列表，循环再执⾏宏任务，再清微任务列表 微任务 microtask(jobs): promise / ajax / Object.observe (该⽅法已废弃) 宏 任 务 macrotask(task): setTimout / script / IO / UI Rendering 4.从输 ⼊ url 到展示的过程 DNS 解 析 TCP 三次握⼿

作者：猿码道 链接：https://www.jianshu.com/p/c81008b68350 1. 前言 　　随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 　　然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接 工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 　　本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。 2. 为何要分离 　　参考两篇文章《Web 研发模式的演变》、《Web应用的组件化开发》, 目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示： 　　代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是： 　　

先说项目开发过程中团队人员的分工协作。 　　 一、人员安排 　　毕业至今的大部分项目都是独立完成，虽然也有和其他同事协作的时候，但自认为对团队协作的了解和认知都还有所欠缺。很清楚团队协作的重要性，但尚未有很好的机会在相对成熟的团队中锻炼实践。 　　先抛开 软件开发 团队中人员的具体安排不讲，单纯的看软件开发工作的分工。在上面设想的开发架构中，宏观上可将一个项目划分为前端、程序、 数据库 三个模块。由此可推导出团队中需要的成员：美工、程序员和项目经理。 　　认为理想的软件开发团队由四个专业技能过硬的成员组成：一个美工，熟悉UI的设计并具备将效果图转换成前端页面的能力，也就是得同时精通PhotoShop、HTML、CSS、jQuery等前端知识；一个程序员，熟练掌握代码的编写重构；一个项目经理，具备 需求分析 的能力、数据库设计维护的能力、架构设计的能力、程序编写的能力、前端样式脚本编写的能力，最重要的是对业务流程有精准的把握；一个部门经理，和前三位不一样，部门经理只具备领导能力即可，他是兼职，不需要把全部时间投入到团队中。 　　大部分中小型项目可以由这样的四人团队完成，可如果项目较大，已经大大超出了四个人可完成的工作量，可以再加一个前端开发人员。也就是说两个前端开发者，一个负责UI设计，做出完整的效果图，这个人的设计功底应该比较强；一个负责将效果图转换成页面，并完成样式、脚本等的编写

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的 数据双向绑定 。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 1、为什么会出现 MVVM 呢？ 我接触MVVM 是在2015年，可以说2015年是MVVM 最火热的一年，而在这之前，我所知道的就是MVC, MVC 大约是在5年前，也就是2011年的时候接触的，那时候刚学编程语言，学的Java，而Java 中经典的 SSH 框架就用来构建一个标准的MVC 框架。说实话，MVC 用了这么多年，但始终没有很深刻的理解，只停留在用的层面， 一直到接触 Vue.js 之后，研究了MVVM 架构思想，然后再回头看 MVC ，才有一种豁然开朗的感觉~ MVC 即 Model-View-Controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的Web

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！ 前端还是一个年轻的行业，所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。 前端开发知识点： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他： 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力 作为一名前端工程师，无论工作年头长短都应该掌握的知识点： 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。 4

随着互联网进几年来的高速发展，web前端这一门技术和对应的行业岗位就应运而生。Web前端主要就是网站的页面展现以及动态交互部分，比如大家逛淘宝所看到的页面就是web前端所做的。 Web前端是当下互联网时代下最流行的技术之一，在大部分的软件产品的研发中，Web前端扮演着非常重要的角色。几乎所有的用户终端产品与视觉效果和交互有关的部分，都属于前端开发工程师所要涉及的专业领域。 从具体的角度上看，Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具，将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，进而去处理视觉和交互的相关问题。 在掌握基础模块的基础上，Web前端工程师还必须进一步将技能层次化、系统化，从而能够视线页面架构、移动页面开发等等任务。不仅新人小白需要努力，就连已经入职0~3年的前端开发工程师，也需要不断学习了解前端高阶知识和技能，不断修炼自身武功。 在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳，现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端

　　最近观看了《 前端跳槽面试必备技巧 》，视频出举出了很多实用技巧，特在此记录。 　　视频开头给出了面试的定义：面试是测查和评价人员能力素质的一种考试活动。具体地说，面试是一种经过组织者精心设计，在特定场景下，以考官对考生的面对面交谈与观察为主要手段，由表及里测评考生的知识、能力、经验等有关素质的一种考试活动。 一、面试准备 　　在面试前，对公司的情况、技术栈、企业文化、要求的知识点等都得做足够的了解和准备。 1）职位描述（JD）分析 　　对公司的分析，快速判断这个岗位是否与自己匹配，以及自己是否能Hold住该岗位。通过这样的分析能快速决定是否要去面这个岗位，再有针对性的做技术准备，包括知识内容、准备程度等。 　　以京东金融的前端招聘信息为例，通过职位描述和任职要求（如下所列）来分析要求的知识点和技术栈。 职位描述： 1、负责京东金融企业业务PC端和移动端相关的前端开发工作； 2、负责企业金融App H5开发，完成前端界面与后端交互开发； 3、负责与后端工程师沟通协作、调试数据接口； 4、负责京东金融前端组件库的建立； 5、负责对现有系统的优化与重构。 任职要求： 1、3年以上相关工作经验，精通HTML5特性，了解HTML5最新规范，能够熟练运用HTML5特性构建移动端的WebApp； 2、熟悉当前流行的JavaScript类库，熟悉JavaScript面向对象编程方法； 3

为什么要了解这个知识 因为笔者参与了学校的一个服务外包项目，我们选用的技术栈是springboot+vue的；又要考虑前后端分离，所谓适应时代的步伐。然而笔者是个菜鸡，所有笔者查看了一些博客，并将其进行总结。 那什么是前后端分离呢？ 传统的web应用开发中，大多数将浏览器当做前后端的分界线。浏览器中为用户进行页面展示的部分称为前端。而将运行在服务器上，为前端提供业务逻辑和数据准备的所有代码称为后端。 前后端分离 前后端分离并不只是开发模式，而是web应用的一种架构模式。开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署。 简单来说，前后端分离就是把数据操作和显示分离出来，前端专注做数据显示（可通过文字，图片，或者图标等让数据形象直观的显示出来），后端专注于做数据的操作，前端把数据开放给后端，后端对数据进行修改，后端提供接口给前端调用，来开发对数据的操作。 前后端分离大概可以从四个方面来理解 1、交互形式 在前后端分离架构中后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。 2、代码组织方式 前后端分离代码组织方式有两种。 半分离：前后端共用一个代码库，但是代码分别存放在两个工程中