热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【技术干货】那些年我追过的前端技术

本文作者:上海驻云Web前端工程师著名2.5次元患者黄志彪(头像与真人一模一样)​说到前端开发,大家都知道无非就是HTML、JAVASC
本文作者:上海驻云Web前端工程师 著名2.5次元患者 黄志彪 (头像与真人一模一样)
说到前端开发,大家都知道无非就是HTML、Javascript、CSS这一套技术体系。虽然这套技术体系本身并不是很复杂,但是现在变得很牛逼了有木有哇?!让人一下子觉得它变得高大上了有木有哇?!今天就来跟大家吧唧一下我那跨了几个时代的前端之旅。
 
 
 
一:刀耕火种的时代

 
路人甲:纳尼,都回到刀耕火种的时代了?你别吓我,你多大?  
 
 
 
我大学毕业刚进入企业工作的时候前后端还没有分离(我年纪够大了吧),我们做项目的时候是按功能来划分,所以在开发的时候通常一个功能要把前端的页面和后端的业务逻辑代码都写了(尼玛,累死宝宝了),而且公司还没有设计师(要不要这么坑啊)。

 
页面基本上都是HTML代码,有时候会插入一些Javascript代码用作客户端校验这些基础功能。CSS也用的不多,只是用做简单的布局定位,大部分的布局都是用Table来做的(是你太OUT了吧大叔!!!)。那个时候手机端的页面开发还有用WML+WMLScript(尼玛,这都是啥啊)开发的。在这个时候,前端表现的并不突出,即使有些简单的逻辑也是用document.getElementById来解决的,(哎哟,多简单啊,不是挺好么?)。随着模块化的呼声越来越高(没办法,领导要求),前端的逻辑代码开始抽象出来放到一个JS文件夹中,根据页面的需求在页面中引入不同的js文件,而针对于页面通常用frameset和iframe这两个标签来实现模块划分。还有一个更坑的就是一些特效,那个时候我们的一些特效都得用ActionScript来跟Javascript合作才能完成(尼玛,累死宝宝了)。就这样,我一开始就在这水深火热的年代倒腾着。
 
 
 
路人甲:是你技术不好吧大叔!!!
我:不要说出来嘛,真是的,多不好意思。
 
 
 
二:铁器时代
 
 
路人甲:尼玛,都来到铁器时代了,又学导演玩起了穿越么?!
 
 
 
随着时代的发展,在我研究了无数先驱们光荣牺牲看动漫的时光而写的示例下,我终于踏上我前端开发的一个新时代:铁器时代。我的这个时代到来的重要标志是对Jquery和ExtJS这两大Javascript框架的运用和HTML5、CSS3的学习及应用。这个时候我写的代码前后端还是黏在一起的,舍不得分开(是你太Low了吧大叔!!!)。
 
 
But,前端已经越来越重了,我负责的各种特效已经开始用上了我们的利器-Jquery来封装组件(哎,人家早用上了)。Javascript组件的这次运用是我前端开发生涯中的一次重大转折。
 
 
 
为什么呢?为什么呢?为什么呢?(重要的事情说三遍) 
 
 
 
Because 通过这次的体验,我终于深刻的了解到Javascript组件化开发带来的好处,在以后的开发过程中,我开始习惯组件化模块化开发。再后来,由于要用到服务器推送技术,我又接触了到了DWR框架 。随着一系列前端技术的运用,我们项目的前端代码越来越重,各种特效,各种样式,各种交互都自成了一套体系(你以为在练武啊)。
 
 
三:现代文明
 
 
 
路人甲:尼玛,就回到现代文明了,穿越的太快了吧
 
 
 
我前端开发的现代文明阶段是以接触和学习RESTFUL协议开始的。RESTFUL是轻量级WEB服务,发挥HTTP协议的原生的GET、PUT、POST、DELETE方法,在我们后来的项目中占据了主导地位。而我真正踏上这个阶段却是以学习和使用NodeJS及AngularJS开始的。AngularJS实现了前端的MVC开发模式,Wait,准确来说是MVVM开发模式,它将前端的HTML作为View层并与数据Model层分离,然后实现了View和Model的双向绑定,在Javascript代码中它又实现了模块间依赖注入的功能。在学习了AngularJS框架以后,我又开始学习项目构建编译工具-Grunt,Gulp、第三方依赖包管理工具-Bower、项目版本控制工具-Git、CSS框架-Sass,Less、前端UI组件库-Bootstrap,Foundation、Javascript框架-Backbone、ReactJS、RequireJS这一系列的前端技术(尼玛,这么多,吓死宝宝了)。

 
这还不算完,做为一个合格的前端工程师,你不仅要会这些通用的前端框架和技术,你还得会移动端的技术和Web App开发技术(要不要这么狠)。随着技术的更新,Hybrid App未来将会越来越受欢迎。Hybrid App在当前发展受阻的原因最主要的还是卡顿和特效的问题。But,随着技术的不断发展和更新,现在HTML5+CSS3已经解决了特效问题,剩下的卡顿问题相信在不久的将来也会消失。现如今Hybrid App又有哪些值得推荐的框架呢?
 
 
 
Jquery-mobile-ui相信大家都用过,这是很早的一个移动端UI框架,如果想要轻量和更加灵活的开发前端代码,你可以用这套UI加上自己用Jquery来封装一套类似AngularJS机制的框架。在这里我学习了IONIC+PhoneGap开发,IONIC这套框架基于AngularJS,开发的应用可以实现跨平台打包,可以发布到IOS、Android、WP任何一个平台,而且使用phoneGap插件可以允许你调用移动设备相关功能,使得Native App又向前迈了一大步。
 
 
 
当前的Javascript除了给浏览器端和移动端带来了变革,也给桌面端开发带来了新的希望。它大大降低了桌面应用程序界面的开发门槛,提高了应用程序的用户体验度。在这里我给大家推荐两个Web App开发框架-NW(node-webkit)、Electron(Atom Shell)。NW和Electron都支持Window7及以上版本、Mac OS和Linux系统,But NW还支持Window XP系统,只是开发起来有点坑,如果不考虑Window XP的话,那果断选择Electron。
 
 
 
总结:
前端作为产品第一眼展示给用户的一个窗口,其地位已经相当重要。随着Javascript这几年的快速发展迅速占领了Web、Web App、Mobile一大片领地,大有一枪头全搞定的意思。未来随着技术的更新和设备的发展,相信前端发展前景会越来越好,但是前端技术更新也会很快,这就意味着我们程序猿就要不断的增长自己的知识。
 
 
 
路人甲:你zi shi多你牛逼!你丫在城里真会玩!俺农村人营养跟不上!
我:请不要在意那些细节!!!

好啦~~~本文到这里也就结束啦~如果还希望了解更多相关知识的话,就赶紧关注我们吧~

推荐阅读
  • 用NAN写一个nodejs的c++扩大
    NAN引见NAN的全称为NativeAbstractionforNode.js,其表现上是一个Node.js包。装置后,就获得一堆C++头文件,内里是一堆宏。它主要为Node.js ... [详细]
  • 于2012年3月份开始接触OpenStack项目,刚开始之处主要是与同事合作共同部署公司内部的云平台,使得公司内部服务器能更好的得到资源利用。在部署的过程中遇到各种从未遇到过的问题 ... [详细]
  • 业务:Payments&Risk大数据/AI/数据可视化时间要求:至少实习6个月,每周5天,入职时间4-5月 ... [详细]
  • 本文总结了Java中日期格式化的常用方法,并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库,可以实现日期的格式化和显示。在页面中添加相应的标签库引用后,可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 1223  drf引入以及restful规范
    [toc]前后台的数据交互前台安装axios插件,进行与后台的数据交互安装axios,并在main.js中设置params传递拼接参数data携带数据包参数headers中发送头部 ... [详细]
  • 背景后端使用Nginx并更改本地host文件,起本地服务。将aaa.bbbb.com代理至本地IP地址(10.26.36.156)。使用$.ajax调用后端restful接口,要求 ... [详细]
  • 【node.js】关于node.js,如何解决npm should be run outside of the Node.js REPL, in your normal shell报错?
    问题描述前言,安装node方式采用的是安装包解压的报如下错误:npmshouldberunoutsideoftheNode.jsREPL,inyournormals ... [详细]
  • 用Python手把手教你搭建一个web框架-flask微框架!
    在之前的文章当中,小编已经教过大家怎么搭建一个Django框架,今天我们来探索另外的一种框架的搭建,这个框架就是web框架-flask微框架啦!首先我们带着以下的几个问题来阅读本文:1、flask ... [详细]
  • 接口没获取到就被使用_如何使用 ThinkJS 优雅的编写 RESTful API
    RESTful是目前比较主流的一种用来设计和编排服务端API的一种规范。在RESTfulAPI中,所有的接口操作都被认为是对资源的CRUD,使用URI来 ... [详细]
author-avatar
liuliyu2000_867
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有