前端架构

前后端分离后的前端时代

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

2015年最全的移动WEB前端UI框架

☆樱花仙子☆ 提交于 2019-12-04 01:25:49
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动 WEB开发 的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。 Amaze UI Amaze UI是一个轻量级(所有CSS和JS gzip后100kB左右)、Mobile first的前端框架, 基于开源社区流行前端框架编写。 Amaze UI Github地址: https://github.com/amazeui/amazeui Amaze UI官网: http://amazeui.org/ Frozen UI Frozen UI 是一个简单易用,轻量快捷,为移动端服务的前端框架,专注于移动web的UI框架,基于腾讯手机QQ规范。 Frozen UI Github地址: http://frozenui.github.io/ SUI SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI

前端架构

穿精又带淫゛_ 提交于 2019-12-03 20:17:01
function _f(o) { console.log("调用call:" + o); } class Ajax { constructor(host) { this.host = host; } get(api) { console.log(this.host + api); } func(o) { _f.call(this, o); } } //Object.assign 方法向类添加多个方法 Object.assign(Ajax.prototype, { post(api) { console.log(this.host + api); } }); var ajax = new Ajax("http://microsoft-zh.com.cn"); ajax.get("/api/open/user.get"); ajax.post("/api/open/user.login"); ajax.func("调用"); class utils { //静态方法 static print(x) { console.log(x); } } utils.print(1); /*立即执行*/ //方式一 (function () { console.log('Welcome to the Internet.'); })(); //方法二 (() => { console.log(

前端架构:MVC以及MVVM MVP介绍

陌路散爱 提交于 2019-12-03 18:03:44
前端架构:MVC以及MVVM MVP介绍 1、mvc   Model-View-Controller(模型-视图-控制器):用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑.它强制性的使应用程序的输入、处理和输出分开。最典型的MVC就是 JSP +servlet+javabean 的模式。 2、MVP   Model-View-Presenter:是从经典的模式MVC演变而来,它们的基本思想有相通的地方: Controller/Presenter负责逻辑的处理 , Model提供数据 , View负责显示 。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller。 3、MVVM   Model-View-ViewModel:和MVC模式一样,主要目的是 分离视图(View )和 模型(Model) ;在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者 (JS+HTML) 与后台代码开发者分离的模式(asp,asp

前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析,Web Worker 实战

[亡魂溺海] 提交于 2019-12-03 15:20:19
前端每周清单 专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。 新闻热点 国内国外,前端最新动态 iOS 11.3 与 macOS 10.13.4 即将包含 Service Workers : 本周,Safari Technology Preview 48 版本发布,其引入了包括密码自动填充机制变更、启用 Storage Access API 等一系列特性。更值得一提的是,这也意味着 iOS 11.3 与 macOS 10.13.4 即将包含 Service Workers,从而允许开发者利用后台脚本提供更强大的可离线使用的 Web 应用;此外,iOS 11.3 还允许将 Web Apps 添加到屏幕桌面,并且支持 Manifest 文件,更多 PWA 相关资料参考 这里 。 Parcel v1.5.0 发布 : 虽然发布不久,但是 Parcel 已然在 Github 上获取了超 17000 的点赞,并且在 npm 上有超百万的下载量与数十位来自各地的贡献者。Parcel v1.5.0 是发布以来的重量级更新,其引入了 JavaScript Source Map,WebAssembly 支持,Rust 与

前后端分离是什么操作

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

前端基础-HTML

匆匆过客 提交于 2019-12-03 14:32:53
HTML:   超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。   本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)   网页文件的扩展名:.html或.htm HTML不是什么:   HTML是一种标记语言(markup language),它不是一种编程语言。   HTML使用标签来描述网页。 HTML架构格式   1.<!DOCTYPE html>声明为HTML5文档。   2.<html>、</html>是文档的开始标记和结束标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。   3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会再浏览器的文档窗口显示。包含了文档的元(meta)数据。   4.<title>、</title>定义了网页标题,在浏览器标题栏显示。   5.<body>、</body>之间的文本是可见的网页主体内容。   注:   1.<html lang="en">"代表英文 <html lang="zh-CH">代表中文。   2.对于中文网页需要在head中加入 <meta charset="utf-8"> 声明编码,否则会出现乱码

服务器端渲染与Nuxt.js

那年仲夏 提交于 2019-12-03 07:55:08
本文转载于: 猿2048 网站➪ https://www.mk2048.com/blog/blog.php?id=hca02aakaa 从前端发展史来看服务器端渲染 前段时间在知乎上看到一篇提问,说的是为什么现在又开始流行服务器端渲染html了。整理了网上一些评论,结合自己的想法,整理出了一段前端发展史。 早在1989年,HTML的诞生是一个物理学家为了方便学术文档的分享而创造,这个也是前端起始的时间。后来,CSS和Javascript加入前端行列,用来渲染页面样式和处理页面动效逻辑,前端三剑客成立。刚开始的前端程序员,其实就是做切图写样式(CSS)和做页面特效(JS)等一切基础的工作,处于程序员鄙视链的底层。 随着互联网发展与技术进步,静态页面已经远不能满足产品需求,页面上要根据逻辑产生动态的数据,这时,便迎来PHP,JSP等为代表的web1.0时代。此时的服务器渲染,是以“文档”为核心思想。服务器端的逻辑是把HTML,CSS和JS当做一个静态文件,对“文档”而言不存在“指令”和“数据”的区别,一切都是数据。所以我们可以看到服务器渲染,GET就是请求一个文件,而web 1.0时代的诸多服务端框架最基础的组件之一就是文档模版,比如asp, JSP之类,核心设计理念就是HTML文件里放占位符然后由服务端逻辑替换成实际数据后一股脑返回。很多中小型项目,不分前端后端

写给前端的区块链开发入门指南:零基础开发基于以太坊智能合约的 ICO DApp

独自空忆成欢 提交于 2019-12-03 07:35:12
本文转载于: 猿2048 网站➭ https://www.mk2048.com/blog/blog.php?id=h22h20jbjb 张泉灵说,时代抛弃我们的时候连声再见都不会说,马云说对于新兴事物,绝大多数人是看不见、看不起、看不懂、来不及。自从学完 Coursera 上的 Crypto Currency 课程,搞懂区块链技术的本质后,对区块链的的所谓信仰变成了强有力的逻辑支撑,不管你看没看见,区块链正在吞噬整个世界!不甘平庸的工程师肯定会问,怎么在区块链技术和行业崛起的时候参与进去获取更大的成长?如果你选择参与,而不是旁观,真诚的邀请你在成为区块链应用研发工程师的路上和我同行。 前端工程师学习区块链应用开发的 WHY、HOW、WHAT 可以用下图来概括,如果你同意我的观点,还犹豫什么?赶紧动手吧! 为什么要选择区块链开发? 未来已来,只是尚未流行!区块链技术的爆炸式发展引起了很多人的注意,相信看到这篇小册的你早就听说过比特币、ICO,甚至购买过区块链资产。 区块链是个天然和钱离得很近的领域,离钱越近就越容易赚到钱 ,尽早开始准备并在区块链领域站稳脚跟的人将能享受到行业崛起的巨大红利,就像四年前的微信公众号,两年前的知识付费,一年前的微信小程序。 然而,从对身边同学的观察来看,前端工程师很容易产生区块链是底层技术、离前端很远的错觉

12、前端知识点--MVVM模式

六眼飞鱼酱① 提交于 2019-12-03 04:52:19
1、MVVM与MVC的区别是什么? 在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的,mvc的所有通信都是单向的。而MVVM在概念上是真正将页面与数据逻辑分离的模式并且可以实现数据双向绑定。 2、什么是VM? vm就是由View抽象出来的数据模型,需要注意的是在开发中不在在vm在写与数据不相关的其他东西,比如一些方法等。 3、MVVM和代码怎么对应的? MVVM就是由Model、View、VM三部分组成。Model对应了将获取数据,处理数据成能够供VM使用的逻辑部分,而View对应的是数据展示,数据绑定部分,VM则是抽象的数据模型对象。 4、有哪些框架使用了MVVM模型? 使用MVVM模式的前端框架有很多,比如AngularJS、avalon、emberjs、knockoutjs、winjs、react、riverts、way、vue、regular、drop等框架 5、MVC、MVP、MVVM使用场景? 要想了解它们的使用场景,首先应该了解它们的优缺点。 MVC的优缺点: 优点: