专栏首页大愚Talkphp工程狮感知的前端工作流程

php工程狮感知的前端工作流程

这个时代不懂点前端知识,真的没有办法生存。就算不会写,也得了解它的原理吧!

最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。

本文主要说的是 JavaScript 工作流程


目前前端真的该叫大前端,其越来越细化,越来越复杂。在这种背景下,诞生了很多工具很多前端工作流程。比如热门的:

  • react
  • vue
  • webpack
  • babel
  • gulp
  • node.js
  • npm
  • nvm
  • angular
  • bower … …

如果继续写,估计光这个,字数久能够达到1000+ 这里边有的是前端js框架,有的是一些开发工具,但他们种类这么多,各自能够解决什么问题?互相之间有什么联系?是不是一个项目就必须用上这么多东西?使用时候,如何相互配合?

带着这些疑问,作为一个后端程序员,进行了系列调查,要把我的成果分享出来(可能错误百出)。 首先前端开发的三大基础:

  • html 这个是最基础的,被称为:超文本标记语言。什么意思?简单来说就是描述一个页面的结构,比如:页面的头部,页面的内容,页面的尾部。也就说,它控制一个页面的结构。浏览器会按照它定义的结构来进行解析,显示不同内容。
  • css 我们对美的追求是无止境的,光有结构,看起来没有色彩,有些地方不突出。就像衣服:原始人用树叶、兽皮,随着进步,我们穿丝绸、破洞牛仔,搭配丝巾、手表等等,所以就是用来控制html的样式,让它变的更好看。
  • JavaScript 这是本文主要阐述的地方,有了html+css,显然还不能满足我们的追求,会html、css的人不能叫做前端工程师、更不能叫程序媛。但是如果你会了 JavaScript,江湖就有你的依稀之地,这也是本文主要介绍的部分。

目前我们很多时候常说的前端工程师,其实主要指的就是其 js工程师。在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。

功能越强大,责任也越多。现在 js(后面全部使用简称,字太多,不想写)使用的越来越多,早期 js 仅仅用来做一些简单的交互,随着现在移动互联网的发展,各项硬件设备的性能提升。项目越来越复杂,效果越来越酷炫。js 做的事情也更多。

当然今天不讲这么多发展历史(关键是我也没理清呀),总的来说就是 js 开发工作原来比较简单,大家随便写写久搞定工作了,但是现在工作的复杂度越来越高,像以前那么任性的工作,开发麻烦、维护麻烦。还好具备程序员三大美德人,开始构建一些工具。

Perl语言的发明人Larry Wall说,好的程序员有3种美德: 懒惰、急躁和傲慢(Laziness, Impatience and hubris)。

懒惰: 是这样一种品质,它使得你花大力气去避免消耗过多的精力。它敦促你写出节省体力的程序,同时别人也能利用它们。为此你会写出完善的文档,以免别人问你太多问题。 急躁: 是这样一种愤怒——当你发现计算机懒洋洋地不给出结果。于是你写出更优秀的代码,能尽快真正的解决问题。至少看上去是这样 傲慢: 极度的自信,使你有信心写出(或维护)别人挑不出毛病的程序

先是大家感觉js代码复用是个问题,我们想用别人写的某个功能,只能网上去翻别人写的源码,拷贝下来。后段语言都有自己的包管理工具,比如:java的maven,python的pip,php的composer等。于是在历史的使命召唤中,npm诞生了,js的包管理工具。 比如以前要使用 jquery,你的到官网去下载,现在 npm install jquery 就可以了。

npm是运行在node的环境上,它们的关系又是另外一个话题,这里按下暂且不表。 像 react、vue都可以通过npm来安装。

包管理的问题解决了,接下来又有另外一个问题,由于 js 是 Brendan Eich 这大哥花了 10 天时间设计的(牛人就是这么屌)。虽然如今广泛应用,也由于时间紧导致留下了很多设计缺陷。

伴随了 ES6 的发布,js越来越规范了,我们程序员肯定都想用好用的简洁的语法来完成任务,好早点下班回家打lol呀。可惜呀,世界上成百上千万的网站,不可能一下子全部升级,浏览器也不可能立马就支持最新语法,怎么办?babel 诞生了,它牛逼在那里?让你可以用es6的语法写代码,然后在现在的环境下可以运行(在这里请自行忽略ie9以下浏览器)。

在你用es6写完代码后,用它转码一下,可以得到es5的代码。不信?来个例子:

// 转码前input.map(item => item + 1);// 转码后input.map(function (item) {  return item + 1;
});

上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。

另外 babel 其实也是用js写的一个工具,所以它还是可以通过 npm install babel-cli 来安装。

关于它怎么用,自己看官方文档。

好。到目前为止,解决了两个大问题。接着看前端还有什么问题?那么在开发中还有什么问题需要解决?合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等这些都是开发中的重复性任务,以前这些任务都需要单独人工解决,然后为了提高效率,早点下班,就有了:Gulp Grunt这些task runner。推荐使用gulp来自动化的执行这些任务。

那么到了这里,是不是就截止了?还没有,现在的基本都讲究什么前后端分离,也就是变成了web app的方式,那么就要求页面重新加载要变少,用户交互要变多,也就导致一个页面上js越来越多。这么多的js怎么管理?如何提高浏览器的加在速度?能否将css img html 字体这些资源也当成模块来处理?在这些问题下,产生了很多模块打包工具,毫无疑问:webpack是最耀眼的,也是用起来最爽的。

所以模块打包的问题也解决了,另外说一句,gulp的部分功能可能通过webpack的插件也能解决,但并不意味着不再需要它,一般来说gulp运行在webpack之后。

再次声明,上面所有介绍的东西,都可以通过npm来安装获得。所以说到底它们都是用js写的一个工具。

ok,那么工具基本介绍完了,到底页面怎么呈现给用户?后台传过来的数据怎么绑定到dom里边去?如果向后台发起请求获得数据?等等,这些需要一个js业务框架来完成。所以react、vue就是来解决这些问题的

最后

至此前端的一个工作结构介绍至此结束。再瞎逼逼两句,学习是一件持续的事情,在学习某个新东西前,先要对它是干吗的,它解决一个什么样的问题有个认识,然后面对知识你才能在自己的脑海中建立一个体系。

参考了很多资料,贴在这里供参考:

  • [1] 我们为什么需要Webpack?
  • [2] Vue 对比其他框架
  • [3] Webpack、Browserify和Gulp三者之间到底是怎样的关系?
  • [4] Babel-转码器
  • [5] 用自动化构建工具增强你的工作流程!

本文分享自微信公众号 - 大愚Talk(dayuTalk),作者:大愚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-04-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高并发架构的TCP知识介绍

    做为一个有追求的程序员,不能只满足增删改查,我们要对系统全方面无死角掌控。掌握了这些基本的网络知识后,相信一方面日常排错中会事半功倍,另一方面日常架构中不得不考...

    大愚
  • 线上大量CLOSE_WAIT原因排查

    近日遇到一个线上服务 socket 资源被不断打满的情况。通过各种工具分析线上问题,定位到问题代码。这里对该问题发现、修复过程进行一下复盘总结。

    大愚
  • coder,你会设计交易系统吗(实干篇)?

    通过 上篇文章 的分析,我们已经明确了这个系统要干些什么。接下来的都是实打实的干货。这些内容认真阅读掌握后,相信你能够以此为基础设计一个维护性好、扩展性好的交易...

    大愚
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 20140921遇到的问题-----JAVA----JS------jquery-1.11.1.min.js找不到的原因和解决办法

    当我把项目发布到tomcat服务器上面去,运行某个jsp页面的时候,发现功能没有实现 有没有报错,说明代码没有问题,那就找引入的文件是否正常导入了。这里有可能一...

    wust小吴
  • 400% 的飞跃-web 页面加载速度优化实战

    一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站。 为啥捏? 看图

    前端博客 : alili.tech
  • Easyui datagrid 修改分页组件的分页提示信息为中文

    直接引入中文locale目录下的easyui-lang-zh_CN.js,引入时注意js的引入顺序,避免js直接的相互影响,比如后面引入的js覆盖前面引入的js

    授客
  • 利用 three.js 开发微信小游戏的尝试

    这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。

    bering
  • 腾讯云独家详解小程序多人视频通话

    在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Dem...

    腾讯视频云终端团队
  • 【专业技术】揭秘安卓浏览器如何注入javascript脚本

    Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券