前端架构

前端介绍　 　　前端前端即网站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的网页。软件开发架构中有C/S架构与B/S架构之分.其实都是/C/S架构,也就是客服端client与服务端server.也就是说b/s架构也是c/s架构. 　　浏览器工作方式: 对浏览器输入网址--->向服务端发送请求--->服务器接收请求并查询浏览器想要的地址返回给浏览器--->浏览器将数据通过前端处理展示在页面 HTTP协议 　 　超文本传输协议,HTTP是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。客服端与服务端数据交互要遵循的协议. 这个协议规定了数据格式. http协议的四大特性 　　1) 基于请求响应 　　2)基于TCP/IP协议之上的应用层的协议 　　3)无状态 (客户端无法保存用户状态) 　　4)无连接 (请求一次相应一次, 之后立马断开,两者不再有关系) 　　基于第四特性补充知识点: websocket是HTTP协议下的一个补丁,支持长连接. 　　　　　　　　　　　　　URL:统一资源定位符(网址) 　　请求数据格式: 　　　　　　　　1)请求首行(标记户同html的版本,声明请求方式!) 　　　　　　　　2)请求首(放置一些k, v键值对) 　　　　　　　　(/r/n) 　　　　　　　　3)请求体

什么是前端?什么是后端? # 任何与用户直接打交道的操作界面都可以称之为前端,前端跟python没有任何关系 比如:电脑界面,手机界面,平板界面 # 暂时先理解成 幕后操作者(不直接与用户打交道) 为什么要学前端? 因为全栈开发工程师就是同时懂前端和后端 1.信心满满 老子一定能学会 凭啥学不会 2.哎呦卧槽 好像有点难 可能学不会 3.我靠 怎么还不毕业 老子要出去挣大钱 4.卧槽 怎么毕业了 我啥都不会 来老男孩学习的心路历程 软件开发架构(c/s, b/s) Web服务的本质: # 浏览器中敲入网址回车发送了几件事? 1.浏览器朝服务端发送请求; 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议(*****) 超文本传输协议 规定了浏览器与服务端之间消息传输的数据格式 四大特性: # 1.基于请求--响应 # 2.基于TCP/IP之上的作用于应用层的协议 # 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) # 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) # websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求与响应 # 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) 请求体

前端 跟python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面,手机界面,平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 为什么要学前端 因为你们是全栈开发工程师 前端的学习流程 软件开发架构 c/s b/s Web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器向服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议 ​ 超文本传输协议 ​ 规定了浏览器与服务端之间消息传输的数据格式 ​ 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) ​ 请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) ​ 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码

作者 | 黄子毅（紫益） 阿里前端技术专家 导读 ：前端开发者是最早享受到 “Serverless” 好处的群体，因为浏览器就是一个开箱即用、甚至无需为计算付费的环境！Serverless 把前端开发体验带入了后端，利用 FaaS 与 BaaS 打造一套开箱即用的后端开发环境。本文作者将从前端角度出发，为你讲述 Serverless 带来的收益及挑战。 引言 Serverless 是一种 “无服务器架构”，让用户无需关心程序运行环境、资源及数量，只要将精力 Focus 到业务逻辑上的技术。 现在公司已经实现 DevOps 化，正在向 Serverless 迈进，而为什么前端要关注 Serverless？ 对业务前端同学： 会改变前后端接口定义规范； 一定会改变前后端联调方式，让前端参与服务器逻辑开发，甚至 Node Java 混部； 大大降低 Nodejs 服务器维护门槛，只要会写 JS 代码就可以维护 Node 服务，无需学习 DevOps 相关知识。 对一个自由开发者： 未来服务器部署更弹性，更省钱； 部署速度更快，更不易出错。 前端框架总是带入后端思维，而 Serverless 则是把前端思维带入了后端运维。 前端开发者其实是最早享受到 “Serverless” 好处的群体。他们不需要拥有自己的服务，甚至不需要自己的浏览器，就可以让自己的 JS 代码均匀

嗯！直接叫做 前端周刊 好了，简单明了，推荐本周 精彩博文 给大家~ 欢迎关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com。 【行业资讯】 1、 2014年CSS报告——考察如何使用CSS CSS主要是将一个HTML结构变成一个正确显示的页面。CSS是一种允满怪癖和有很多不可预测的行为的语言，因此，通常情况之下，开发人员（后端程序开发人员）最讨讨厌使用他来做任务。 2、 2015年移动APP设计趋势展望 App Store和Google Play里的app多如牛毛。很难说未来的趋势是什么，不过显然我们可以轻易选出当下的5种趋势并加以分析。 3、 设计师专属！有哪些强大好用、鲜为人知的CHROME插件？ 提高工作效率好帮手！今天贝尼同学将自己的私人珍藏分享出来，从配色方案到搜图搜资源，都有超方便的Chrome插件能帮设计师们事半功倍搞定工作，最后还有小编呕血推荐的一款超方便的免费科学上网插件（你懂的），千万低调地马克呦！ 4、 为什么说微信推出朋友圈广告不会步微博后尘？ 这几天微信朋友圈广告浮出水面，朋友圈都被各类仿微信广告刷屏了，互联网圈内也开始有了微信是否会步微博后尘的争论，我想谈谈自己的观点。 5、 商业生态战 | 雷军15分钟敲定的投资，难道只因它在做大火的H5？ 2014年11月，白鹭引擎(下称白鹭)获得顺为资本千万美元融资。协议签订前

大多数野生程序员最棘手的问题就是如何依靠技术解决温饱，通俗来讲就是技术折现的问题。 如果是单纯出于兴趣，或者只是为了突击某一阶段或者某一项目技术壁垒，不跟就业挂钩的自学倒也是无关痛痒。但是当上岗成为自学的终极目标和结果时，一切都就另当别论了。 前端自学者存在的学习误区： 1、所学东西可能已过时 奉为经典的东西可能已经过时，或者已经有了更好的替代者，而你获取信息的渠道有限，消息滞后，导致学习的内容也相对滞后。 2、学习方法盲目。 看书看不懂就找视频类教程学习，觉得教程跟自己的口味不符就另寻他法，因为自己缺少对资源的辨识能力，总是在没有清晰规划学习线路的情况就盲目学习，导致无效学习时间过长而收获寥寥。 3、只有理论，缺乏真实项目锻炼。 对技术的理解停留在理论层次，而缺乏真实企业项目的历练，如果没有相关实习或工作经历，对前端岗位具体的责任划分和工作流程了解不充分。 自学前端需要掌握哪些技能，才能去工作？ 所以，自学前端需要达到什么水平才能去工作？我结合了知识点和现在前端主流岗位需求，列举了一些，希望对大家的学习有帮助~ PC端网站布局：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，图片整合，表格，CSS属性与滤镜等。 HTML5+CSS3基础：HTML5新增的元素与属性，表单域增强元素

MVC，MVP和MVVM都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。 要了解MVC、MVP和MVVM，就要知道它们的相同点和不同点。不同部分是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分则是MV(Model-View)。 Model&View 这里有一个可以对数值进行加减操作的组件：上面显示数值，两个按钮可以对数值进行加减操作，操作后的数值会更新显示。 我们将依照这个“栗子”，尝试用JavaScript实现简单的具有MVC/MVP/MVVM模式的Web应用。 Model Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。这里我们把需要用到的数值变量封装在Model中，并定义了add、sub、getVal三种操作数值方法。 var myapp = {}; // 创建这个应用对象 myapp.Model = function() { var val = 0; // 需要操作的数据 /* 操作数据的方法 */ this.add = function(v) { if (val < 100) val += v; }; this

一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。 注：【在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。】 一般只有Web服务器才能被外网访问，应用服务器只能内网访问。 二、为什么前后端分离 一般公司后端开发人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。 而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器

一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。 注：【在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。】 一般只有Web服务器才能被外网访问，应用服务器只能内网访问。 二、为什么前后端分离 一般公司后端开发人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。 而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器

web前端的定义 ：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。 Web前端的分类 ：前端设计和前端架构。 HTML结构语言：超文本标记语言。 通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。 特点：通过浏览器来解析、文件名为html或htm。 2. CSS样式语言（样式表）：实现表现与结构分离的样式设计语言。 控制网页的视觉表现及简单交互。通过浏览器来解析，文件名为css。 3. DW编码软件（dreamwaver） 两大主要功能：网页编程和管理网站。推荐版本：CS6/CC。 相关资源：1.HTML参考手册+CSS参考手册 2.DW软件安装 3.多款浏览器 网站的结构 网站是存放在服务器上的一个文件夹（根目录），是网站所有文件的集合。 网站中的各种文件按照文件类型或功用分门别类的整理存放。 文件的命名规则 网站中的所有文件命名全部用英文字母、数字、下划线、连字符的组合，其中不得包含汉字、空格和特殊字符。 尽量采用语义明确简单地英文单词命名。 常见命名 文件/文件夹 常见命名 静态首页文件 index/default 图片文件夹 img/images 样式表文件夹 css/styles 脚本文件夹 js/scripts 字体文件夹 fonts 模板文件夹 templets 媒体文件夹