前端架构

写在前边 我大学呢，确实接过不少的外包，有的是跟着老师做的企业外包，后来就自己接外包，安卓、小程序、前端基本都有涉猎。 这个话题之前读者让小鹿写写，小鹿也一直没有写，那今天正好周末好好分享一下大学接过的外包项目，也希望能够给大学的你们提供一些思考和接项目的经验。 很多人说少接外包项目，接外包就是浪费时间；有的人说程序员接外包项目挣点钱也挺好的，都各自持有自己认为的观点。这件事，对于小鹿来说，希望下面的文章能够给你带来新的启发和收获。 一、第一次接外包 记得那大二上学期，大二寒假刚笼统的半懂不懂的啃完 Java，转过年来就开始选个方向深入学习，当时还没有了解太多的方向，只知道 Android 前几年挺火的，也接触过前端，感觉一般般，也不知道学哪些，一口气就和另一个伙伴选择了做安卓。 看了几天 Android 皮毛基础，感觉有界面还挺感兴趣的。然后有一天被老师叫去说接了一个十几万的项目，你们要不要打算练练手。 当时整个人懵掉了，就会点皮毛，完整的应用程序都没做过，难道直接让我们几个上手企业项目，您放心吗？和三四个刚刚自学完基础的同学，后台 Java 和 Android 两个方向的就这么就接了。 PS：当时学 Android 服务器都不知道是什么东西，更不知道前后台怎么传输的，只想通过这个项目也学习一下。 这个项目持续了半年

1.为什么会出现浏览器兼容问题？ 由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。 2.关于浏览器 1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN 3)浏览器大战 第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator大打出手。 第二次浏览器大战发生在20世纪。 4）浏览器内核及代表作品 浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。 3、聊聊主流浏览器 a、看看五大浏览器的内核 Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉） Gecko （壁虎） Presto （ 迅速的） Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核） Blink

　　　　　　　　　　　　　　　　　　　　　　　　　　　 　elementUI学习 elementUI入门：在ider里面安装 命令npm i element-ui -S 　　在使用之前引入JS核心文件 组件的学习：进去elementUI官网： https://element.eleme.cn/#/zh-CN Layout布局组件的学习：浏览 Layout 组件查看你想要的布局风格 点击显示代码 拷贝到你的模板里面 模板： <template> <div class="hello"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span=

1.模块化的分类 A.浏览器端的模块化 ​ 1).AMD(Asynchronous Module Definition,异步模块定义) ​ 代表产品为：Require.js ​ 2).CMD(Common Module Definition,通用模块定义) ​ 代表产品为：Sea.js B.服务器端的模块化 ​ 服务器端的模块化规范是使用CommonJS规范： ​ 1).使用require引入其他模块或者包 ​ 2).使用exports或者module.exports导出模块成员 ​ 3).一个文件就是一个模块，都拥有独立的作用域 C.ES6模块化 ​ ES6模块化规范中定义： ​ 1).每一个js文件都是独立的模块 ​ 2).导入模块成员使用import关键字 ​ 3).暴露模块成员使用export关键字 小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ​ ES6模块化是浏览器端和服务器端通用的规范. 2.在NodeJS中安装babel A.安装babel ​ 打开终端，输入命令： npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node ​ 安装完毕之后，再次输入命令安装： npm install --save @babel

TypeScript 1.可兼容JavaScript；相比js，加入了注释；添加一个完整的类结构，更好的面向对象； 2.Mac OS X环境搭建： 2.1.安装homebrew（套件管理器）官网： brew.sh : ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.2安装npm（nodejs包管理器）： brew install node 2.3.安装typescript(安装成功后，可以键入tsc测试)： npm install -g typescript tsc 3.IDE中新建typescript文件，添加watcher实现自动编译 也可以用命令的方式编译一个ts文件为js文件：终端目录下，tsc xx.ts，会生成同名js文件 4.TypeScript 7种 基础数据类型： Boolean： var isBone: boolean = false; //使用时要给个初始化的值 Number： var height: number = 6; String： var name: string = "bob"; Array： var list: number[] = [1, 2, 3]; // 或者 var list: Array<string>

先来看个大纲 整个系列包含三个部分，即构建Web应用程序或页面要用的最基本的三部分： HTML 、 CSS 和 JavaScript 。 HTML部分 HTML语义：只用 div 和 span 是不是就够了？ HTML语义：一篇wiki文章究竟会用到哪些语义元素？ 文档元信息：你知道 head 里一共能写哪几种标签吗？ 链接：除了 a 标签，还有标签叫链接？ 嵌入型元素：怎么 link 一个CSS要用 href ，而引入JS要用 src 呢？ HTML标签：标签总结 HTML语言： dtd 到底是什么？ ARIA：可访问性不止是给盲人用户的特性 初看了一下提纲中的八个部分。细思了一下，原本自以为相对了解HTML的我，有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。 HTML语义化 早期的前端开发者都会比较在意和注重这方面。随着时代的迁移，其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到 div 这样的标签元素。但事实上，像 div 和 span 这样的标签元素是没有任何语义化的，他们仅仅是只被运用于布局上。而且在任何浏览器中，都无法使用键盘让其获得焦点，另外也可访问性API也无法进行任何通信。事实上，构建一个具有语义化的页面或应用程序，我们除了使用具有语义化的HTML标签之外，还需要在结构做一些考量，比如说， header 、 footer 、

Vue-cli是Vue的脚手架工具 可以进行目录结构、本地调试、代码部署、热加载、单元测试 1、MVVM框架 View —— ViewModel —— Model （视图） （ 通讯 ） （数据） “DOM” “观察者vue实例” “Javascript” 注意：交互为双向的 特点： （1）针对具有复杂交互逻辑的前端应用； （2）提供基础的架构抽象； （3）通过Ajax数据持久化，保证前端用户体验。 2、什么是Vue.js 它是一个轻量级MVVM框架， 属于“数据驱动+组件化”的前端开发 Vuejs VS Angular+React （1）Vue.js耿轻量，gzip后大小只有20k+ （2）Vue.js更易上手，学习曲线平稳 （3）吸取两家之长，借鉴了angular的指令（如v-show）和react的组件化 3、vue.js核心思想 （1）数据驱动 DOM是数据的一种自然映射 扩展——数据响应原理 数据（model）改变驱动视图（view）自动更新 （2）组件化 扩展HTML元素，封装可重用的代码 扩展——组件设计原则 a、页面上每个独立的可视/可交互区域视为一个组件 b、每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护 c、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面 4、vue-cli脚手架 https://github.com/vue.js

在如今的SpringBoot微服务项目中，前后端分离已成为业界标准使用方式，通过使用nginx等代理方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多个客户展现端，例如：web端，安卓app，IOSapp，微信小程序等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 image 上图是简单的分布式微服务开发及前后端分离的示意图。展现层也就是所谓的前端（客户可直观看到的），比如电商项目前端包含：app（安卓和IOS）、微信小程序、PC商城、Web后台。后端是整个项目的核心，也就是系列项目中讲的内容，后端用Springboot+Dubbo实现分布式开发微服务落地，服务实现层的每一个服务都是一个独立部署的应用，并提供服务（Dubbo的提供者），接口层根据前端的请求，然后找对应的服务提供者消费服务。 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，各自有各自的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。前端（Web项目）分离处理，都是从原先的JSP转成了Html静态页面。 Web项目部署容器的选取 目前常用的部署Web项目的容器用Tomcat

总结 : 　　这是我第五次面试了 , 感觉这是一次很无语的面试了 , 从北京最北边区最南边 , 来回路上就得五个小时 , 提前跟人事还确认了一下 , 招的是 java 开发后端 , 去了让我们填了一个资料表 , 还问清楚了是后端 , 然后就是来了好多人啊 , 提前也没准备估计是 , 完了就等呗 , 七个人一波 , 等了半个多小时 , 让前端的区另外一处 , 后端的去面试 , 一进去问会不会架构 , 懵了 , 不是招初级么 , 咋问架构 , 完了我们七个人一片冷场 , 后来又问设计过数据库没 , 又冷场 , 没有自我介绍 , 没有技术问 ; 完了又问会不会前端 , 多少会点吧都 , 又问前端掌握的如何 , 熟练么 , 用过什么前端框架 , 等等 ; 就有两个以前干过前端吧 , 就说你两留下 , 其他几位可以走了 , 无奈了就 ; 后来出来都有些生气 , 毕竟那么远过去 , 哎 , 后来想想 , 即使面试过了 , 可能也不会在这样的公司呆吧 , 人事 , 技术人员 , 还有领导 , 都在一起 , 领导那办公室还是透明玻璃 , 这样的环境感觉也太压抑了 . 　　后来回来想了想,估计有点烦躁了吧,再如何也不能评判人家公司吧,还是自己不够优秀吧,没有那么想象中得努力,欠缺得还是有点多吧,也给我敲响了警钟,得给自己制定一个复习得计划,把以前得东西学习一下,把一些公司需求的技术等整理一下

前言 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦， 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。 名词解释： 在互联网架构中， web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。 一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。 术业有专攻（开发人员分离） 以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。 大中型公司需要专业人才，小公司需要全才