zoukankan      html  css  js  c++  java
  • WEB前端演化

    VUE前世今身

    vue的作者尤雨溪(Evan You),无锡人,复旦附中,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,现任职于纽约Google Creative Lab。同时还加盟阿里巴巴Weex团队,作为技术顾问。2015年的时候花了两天时间,打造了一个HTML5版的Clear。再某群讨论的时候,说vue是他2014年的时候花了三天时间搭的框架。现在经过版本迭代官方现在2.x版本了。vue-cli已经到3.0版本了。

    vue属于渐进式前端框架,这样你可以再现有的成品项目直接使用,也可以依托vue成熟的体系,讲vuex,vue-router,core之类的都应用进去。

    前端思想变化

    几年前,前端俗称切图仔。主要就是html+css+js。把设计给的效果图写成代码,调试好浏览器兼容性(那时候万恶的IE6啊,现在依然是万恶的IE啊),然后丢给后端,后端将PHP,JSP各种后端语言做嵌套。基本上不存在什么逻辑上问题,基本上就是写什么,显什么。不停的在设置这里多大,多高,多宽,什么颜色等等

    后来有了JQ,可以方便的操作各种DOM,各种特效满天飞的东东如雨后春笋啊。前端开始分离层级了。有专门切图的和比较高级的专门写动效,插件的。普通前端写各种炫酷特效,只要去网站上现成的jq贴上去,ok,妥妥的。这时候,dom和里面的元素更好更容易的链接起来了。JQ可以说是一家独大的引领了一个前端时代啊。

    随着最近几年更新,HTML+CSS+JS这三剑客也都各种鸟枪换炮。HTML=>HTML5 CSS=>CSS3 JS的es2,3=>es6。各种新技术层出不穷,浏览器大有想要统治一切的野心。谷歌就开发了云操作系统,所有的应用程序软件都可以在浏览器实现,虽然现在没有占据多少市场份额,但是对应的技术却…… 在浏览器上做网游、创作软件、各种3D、vr等等都可以再浏览器实现了(扯远了)

    这时候三大前端框架火起来了,angular、react、vue。现在的前端框架思想变成MVVM架构。分离的更加彻底。其实类似于当初需要操作dom的部分,也不需要操心了。

    演化过程:显示什么就是什么 =》 告诉你改啥就改啥 =》 你自己看着我,我改你自己跟着改。

    angular、react、vue

    三大框架比较,扒一段。不过这个都是去年的,现在其实中间界限已经越来越模糊了。

    React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。它有以下的特性:1.声明式设计:React采用声明范式,可以轻松描述应用。2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。3.灵活:React可以与已知的库或框架很好地配合。优点:1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。6.兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点:React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

    Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。它有以下的特性:1.轻量级的框架2.双向数据绑定3.指令4.插件化优点:1. 简单:官方文档很清晰,比 Angular 简单易学。2. 快速:异步批处理方式更新 DOM。3. 组合:用解耦的、可复用的组件组合你的应用程序。4. 紧凑:~18kb min+gzip,且无依赖。5. 强大:表达式 无需声明依赖的可推导属性 (computed properties)。6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。缺点:1. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。2. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。3. 不支持IE8

    Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。它有以下的特性:1.良好的应用程序结构2.双向数据绑定3.指令4.HTML模板5.可嵌入、注入和测试优点:1. 模板功能强大丰富,自带了极其丰富的angular指令。2. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;3. 自定义指令,自定义指令后可以在项目中多次使用。4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。5. angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。缺点:1. angular 入门很容易 但深入后概念很多, 学习中较难理解.2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.5. DI 依赖注入 如果代码压缩需要显示声明.

    vue组件化

    现在前端框架允许你将页面拆分成一个一个组件,每个组件都单独写你自己的html css js。

    写后端程序的有没有很熟悉。没错,前端也进入了可以拆分组件,面向对象的时代。当年后端程序员难道前端切好的图时候干的第一件事儿是啥,就是拆分,头部,尾部,侧边栏等等。现在这些都可以在前端做了。

    前后端的关系

    自动nodejs的出现,使用js脚本语言,也可以进行后端的搭建编写。便有人讲,前端一统天下了。曾经也和朋友讨论过这个问题,其实nodejs虽然使用js编写了服务端脚本,其实已经是后端内容了,只是语言不同而已。

    再加上api思想的崛起,其实是前后端都变的专注。后端逐渐演变成一个数据中心,通过资源化、接口化的思想向外提供数据,在提供数据的同时,也根据项目的体量更加专注的去处理高并发、高性能的应对方案,分布式、负载均衡、虚拟化、微服务、消息阵列等等为后端提出更高的要求。前端拿到后端的数据之后,处理web端,APP端,小程序,移动端等多端的呈现问题,逐步演化出了更多新的岗位类型。在技术进步的时代,其实更加细分了职位需求。

    文末

    仅作思想上的理解,欢迎大牛大神来喷,无脑乱骂就请高抬贵足移步他处。

    前端发展至今,对前端行业内的人员提出更高的需求。前端纷纷表示天天出新的技术已经学不过来了。

    有人在群里面p了一张vue出4.0的消息,就让前端准备刷碗回家卖猪肉了。尤大神亲自辟谣

    前段路上任重道远,且行且珍惜啊

  • 相关阅读:
    博客开通第77天
    guzzlephp使用教程
    Mac下php70memcache安装
    opcache开启和关闭
    php的getimagesize方法详解
    Yii2框架解剖
    AES加密:PHP与Java互通问题
    公司网页监控到的各种不能识别的浏览器userAgent,都是些什么啊
    document.write
    js模版引擎v6注解
  • 原文地址:https://www.cnblogs.com/xietianjiao/p/12356815.html
Copyright © 2011-2022 走看看