前端架构

目录 一、项目概述 1.1 项目背景 1.2 编写目的 1.3 项目文档 1.4 项目源码 1.5 项目成果 二、个人工作总结 1.1 工作概览 1.1.1 作为项目组组长 1.1.2 作为项目组成员 1.2 工作详述 1.2.1 选择前端技术路线 1.2.2 确立前端界面风格 1.2.3 绘制界面原型 1.2.4 编写前端框架代码 1.2.5 实现播放器功能 1.2.6 履行组长职责 三、项目总结 3.1 项目立意 3.2 技术路线 3.2.1 整体技术路线 3.2.2 前端技术路线 3.2.3 后端技术路线 3.3 实现情况 3.4 项目收获 四、课程建议 一、项目概述 1.1 项目背景 音乐是一门艺术，是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐，然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式，开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰，也可形容羞怯的人，本团队旨在通过此平台增强人们对音乐的交流，同时拉近人与人之间的距离。 1.2 编写目的 此文档为本人作为该项目成员的个人工作总结，用于记录在开发过程中的经验、感悟以及对该课程的意见和建议，望今后的其他项目能以此为鉴。 1.3 项目文档

本系列文章讲什么内容？ 本系列文章主要介绍如何在现代前端生态下，创建一个工业级别的库。近几年来，前端工程化、模块化、组件化的大潮铺天盖地而来，在解决以往的架构痛点之余，却又产生了信息过载的问题；我希望通过分享自己的经验，帮助大家少踩坑多出活。 为什么需要开发一个前端库呢？ 在项目开发过程中，总有一些功能是相同或类似的，如果你只是单纯地复制粘贴这部分代码，那么恭喜你，假以时日，需求一改，你就只能自尝苦果了。 你说，这还不简单，抽成公共方法公用不就好了吗？对的没错，但请把视野再放广一点：在工作中，我们很可能参与到不同项目的开发，这些项目分别放置在不同的代码仓库里，这样的话很遗憾，你写的公共方法还是没法 公用 ；再者，目前流行的微服务/微前端，本来就是把一个大项目分拆成更小的粒度来开发、存储和部署，你写的公共方法又怎么在这微前端架构中公用呢？ 因此，我们可以考虑把一些重用价值较高的代码段，抽象出来形成一个库，这样我们既可以在项目组内随意使用，也可以跨项目组进行输出，甚至是给开源社区添砖加瓦。 什么样的代码适合做成库呢？ 基于前端组件化这一思想，我认为只要一个功能的内部逻辑稳定，对外又能够提供明确接口，那么这个功能就可以做成一个库。 库的形式是多种多样的，可以是一个 function ，可以是一个 class ，可以是一个 UI 组件，可以是一整个页面

前言 在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物 构建一个库与构建一个一般应用最大的不同点在于 构建完成后输出的产物 。 一般应用构建完成后会输出： 一个 html 文件 一个 js 入口 chunk 、若干子 chunk 若干 css 文件 若干其它资源，如图片、字体文件等 虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。 一个库构建完成后会输出： 一个 CommonJS 格式的 js 文件 一个未压缩的 UMD 格式的 js 文件 一个已压缩的 UMD 格式的 js 文件 可能包括若干的 css 文件 可能包括若干的其它资源文件 库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件

1. 全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?_ biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=0324iTRH12WbXL5VDxXnEhH8&key=710a5d99946419d938a0ffc16a3c72118eefbe33f3f8312ed218bccbde126b60e818c8eb1068a9b07bdc8116a077b911&ascene=0&uin=NDIzMjM3MDk1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.10.5+build(14F27)&version=11000006&pass ticket=xdp3crkTJPuOH6ggUMKnwvfDGKEnMUvwC5V%2FdxlW%2FKdNO9R8zI1xsDFSR4ZJECUU 仔细的对比了一遍，感谢tim yang和庆丰校长的整理，非常严谨，比我讲的要好，另外感谢霍老板封我是StuQ明星讲师[呲牙][呲牙] 1.1. 主要内容 Why Node.js ？ 历史 槽点 架构平衡和选择 企业级 我眼中的Node.js核心 快速开发实践

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=0324iTRH12WbXL5VDxXnEhH8&key=710a5d99946419d938a0ffc16a3c72118eefbe33f3f8312ed218bccbde126b60e818c8eb1068a9b07bdc8116a077b911&ascene=0&uin=NDIzMjM3MDk1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.10.5+build(14F27)&version=11000006&pass_ticket=xdp3crkTJPuOH6ggUMKnwvfDGKEnMUvwC5V%2FdxlW%2FKdNO9R8zI1xsDFSR4ZJECUU 仔细的对比了一遍，感谢tim yang和庆丰校长的整理，非常严谨，比我讲的要好，另外感谢霍老板封我是StuQ明星讲师[呲牙][呲牙] 持续更新版本 仓库地址 https://github.com/i5ting/nodejs-fullstack 在线阅读 http:/

链接：https://www.zhihu.com/question/41466747/answer/91084888 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性； 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容，border ,margin，padding 5

一，MVC 1.什么是mvc mvc是一种设计模式，帮助使用者更好搭建和编写项目,在b/s,c/s架构中经常使用，mvc表示全称为Model-View-controller,即模型-视图-控制三层结构，三层每层负责不同的功能，其中，model层用于封装简单的javaBean和复杂的javaBean,包括业务层，甚至dao层，只要是个javabean都属于model（注意不要狭义的以为，java仅仅只是pojo对象，他也可以是一个包含复杂逻辑的service），pojo对象的代码都是包含的，视图层主要是页面，用于返回给用户的，直观的一种可视化的界面，比如jsp,html, ,包扩c/s的等，而Controller主要到控制，并且和用户交流的作用，比如，如果你要登陆，那么控制层就会返回一个登陆的页面给你，当你提交页面后，控制层就会调用model的业务 逻辑方法来验证你的输入是否正确。这就是一个mvc简单的调用过程 2.SpringMVC SpringMVC是整个spring中的一个很小的组成，准确的说他是spring WEB这个模块的下一个子模块，Spring WEB中除了有springMVC还有struts2,webWork等MVC框架。 下面，我们来看下SpringMVC的一个结构图，熟悉struts2的人，应该会很熟悉这个图 首先解释下各个名词的意思以及这个流程的是 怎样的 1

docker docker的概念在这里就不在累述，大家google一下都能得到很详细的描述。 借着这次项目需要自己利用docker部署各环境，记录一下docker学习和部署的相关过程。 概念 linux容器与虚拟机的对比 方案 资源占用 冗余步骤 启动 体积 虚拟机 多(独占一部分内存和硬盘空间) 多(完整操作系统，系统级别操作无法跳过) 慢(mins) - linux容器 少(只占用少量资源，多个容器可共享资源) - 快(容器中的应用=进程) 小 docker属于linux容器的一种封装（虽然我并没有深入了解linux容器）。 docker的主要用途有（源阮一峰大大博客） 提供一次性的环境 提供弹性的云服务 组建微服务架构 虽然我在用到的过程中并没有体会到上述好处，但不得不说docker真的是个很方便，也很值得学习的东西 重点 docker有几个非常重要的概念 images 、 container 、 Dockerfile images docker把应用程序和依赖打包到images文件里面，通过这个文件就可以生成一个docker 容器。 简单来说，就是把项目的源文件进行打包制作成一个镜像文件 container 利用 docker run 的命令来生成该对应镜像的容器，容器很像一个小型的服务器 Dockerfile 用来配置image的文本文件

对于千万级的注册用户的门户项目是前端这块是怎么去实现的，自己在平常的工作中总结了一些经验，也是在不断的挫折中，不断演练的，希望总结出来给大家参考下，和大家一起探讨，一起进步。 一、门户设计一般会遇到哪些难点 （一）、首页打开时间太慢了 在开发一个门户到生产上线后，首页响应时间是检验门户整个系统架构以及开发的重要的一项指标，有时候我们发现在公司测试发现速度都挺快的，怎么到生产首页打开就慢了呢？ （二）、页面加载不流畅，总感觉看着不舒服 因为门户一般都是偏向于内容和图片类资源比较多，但是我们打开自己的网页，有时候总感觉加载并不是按照我们期望的那样加载得到，顺其自然，总感觉看起来怪怪的。 （三）、希望用户缓存的地方未进行缓存 很多静态的前端资源，其实在系统未进行更新时候，第一次加载之后，希望缓存到用户的本地，但是因为缓存策略没搞好，经常未进行有效的缓存。 （四）、页面的头部尾部经常需要被第三方嵌入 因为作为一个比较大的门户站点，可能会让很多小的服务接入进来，但是头部和尾部因为是需要保持风格统一，所以经常需要被第三方进行嵌入。 （五）、代码没有进行有效的压缩，导致被窃取 因为作为门户站点，前端如果不进行加密的话，代码很容易被别人进行抄袭伪造，而且还很容易清楚里面的业务逻辑，从而很容易仿造和进行攻击。 （六）、增量静态资源发布 经常门户线上环境需要增加一点小功能

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的 前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。 目录 1.面试注意 2.HTML 2.1 Doctype作用？标准模式与兼容模式各有什区别？ 2.2 HTML5 为什么只需要写 !DOCTYPE HTML？ 2.3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 2.4 页面导入样式时，使用link和@import有什么区别？ 2.5 介绍一下你对浏览器内核的理解？ 2.6 常见的浏览器内核有哪些？ 2.7 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 2.8 简述一下你对HTML语义化的理解？ 2.9 HTML5的离线储存怎么使用，工作原理能不能解释一下？ 2.10 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ 2