本文章原创作者是差不多先生,非常不错的文章,情不自禁就转载了,好文章要大家分享。
五、常用工具
前端开发是最简单的,只需要一个文本编辑器以及一个浏览器就OK了。但是工具更能为我们提供无数的便利,提高我们的开发效率和开发质量。下面跟大家分享一些前端常用工具:
一、开发IDE
- HBuilder
- 新手入门最好用的 IDE,基于 eclipse 深度封装,全中文界面,完善的代码自动补全,HTML+CSS+JQ+JS,支持 emmet 输入,满足新手的大部分应用。
优点:傻瓜化安装,全中文,出色的智能提示;
缺点:没有社区支持,代码补全有点老旧,对预处理器支持不太好;
- WebStorm
- 全能之选,大多数人当前的使用选择,包括我,WebStorm 可以实现针对 JavaScript、TypeScript、stylesheet 语言和其他最流行框架的智能代码补全、实时错误检测、以及强大的导航和重构功能。
可以说 WebStorm 几乎拥有所有你期待的功能。使用 WebStorm 尽量不要使用汉化包,容易出现错误。
- Microsoft Visual Studio 2017
- Microsoft Visual Studio 2017 用于.net 开发,但是同样可以作为一款前端开发软件,在我之前的公司就使用它作为开发IDE,它能够快速导航、编写并修复你的代码,实现轻松调试和诊断,根据你的喜好进行扩展和自定义,并实现有效协作,ASP开发首选。
- notepad++
- 非常小巧的一款 IDE,适合用作前端代码编写,但是扩展功能有限,如果设计复杂部分,不推荐使用。
- sulimeText3
- 非常小巧,启动速度特别快,基本替代了对文本文档的使用,虽然是闭源软件,但是有着丰富的第三方支持,能够满足各种各样的扩展。
并且最好用的地方在于可以通过本地 node 进行编译,如果把前端比作LOL,项目比作排位赛。
二、其他类工具
- WebPack
- WebPack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
- gulp
- Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。
- SVN
- SVN是Subversion的简称,是一个开放源代码的版本控制系统,当前使用最广泛的版本控制之一,一般项目开发团队之间都使用SVN进行配合开发。
- Git
- Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。
- NPM
- NPM 是随同 NodeJS 一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
(1) 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
(2) 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
(3) 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。
- FIS
- FIS , 前端工程构建工具,解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题
- grunt
- JavaScript 世界的构建工具,自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
- Firebug
- Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还很强大,比如html,css,dom的查看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。
- YSlow
- YSlow 是 Yahoo 发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
- JSLint
- JSLint,一个用于提升你所编写的代码质量的工具,它是一个JavaScript验证工具(非开源),可以扫描 JavaScript 源代码来查找问题。
如果 JSLint 发现一 个问题,JSLint 就会显示描述这个问题的消息,并指出错误在源代码中的大致位置。
有些编码风格约定可能导致未预见的行为或错误,JSLint 除了能指 出这些不合理的约定,还能标志出结构方面的问题。
- sass
- 官网介绍:世界上最成熟、最稳定、最强大的专业级CSS扩展语言!Sass 完全兼容所有版本的 CSS。我们对此严格把控,所以你可以无缝地使用任何可用的 CSS库。
- Less
- Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。它可以运行在 Node 或浏览器端。
- PxCook markman
- 这两款都是用于标注的小工具,用于和UI配合。
前端等级划分
对于前端等级我有一套娱乐性的划分,供大家参考。把前端比作LOL,每个项目就是一场排位赛。
LV1:萌新-未入门
肯定就是1-29级的玩家:没法参加排位赛,无法开展项目。
这部分玩家刚开始接触前端,或者对于 CSS 不够熟练,或者对 JS 知道的还不够,所掌握的东西还没有办法独立完成一个完整的页面,让他们去看一个完整的项目,他们就会感觉,这是啥,这又是啥。
LV2:入门-青铜(初级)
这部分玩家具备一定的基础能力,能够自己完成一些简单的页面,但是对于一些比较复杂的逻辑不能理解通透,或者对于某些特定样式不能完成,遇到问题比较多的时候都束手无策,比较喜欢直接询问别人如何解决,代码质量较渣,这些玩家在项目中往往会给你分配一些比较简单的页面。
LV3:进阶-白银(初级)
这部分玩家已经掌握了一定的进阶技术,能够在一个项目中承担各种任务,也能够自己解决一些比较常见的问题,有了一定的项目经验,能够总结出遇到的问题,避免各种简单的错误,书写的代码可供阅读,这类玩家在项目中能够胜任大多数的开发工作。
LV4:崛起-黄金(中级)
此类玩家已经具有相当的经验,已经成长为能独挡一面的大将,具备相当的学习能力,遇到问题都能自己独立快速解决,代码内容都是经过优化,不存在过多的代码冗余。
工作之余能够选择合适的新技术来扩充自己,以迎接下一阶段的挑战。这部分玩家在项目中挑起大梁,在完成自己工作的同时也帮助其他人解决问题。
LV5:成熟-铂金(高级)
前端项目中 leader,拿到一个项目知道应该如何选择合适的技术框架,应当如何针对项目进行项目规划。
精通组件式的开发,高效率,对前端各种技术都有自己的认知,对于后台技术也有所了解,从项目的前期设计到后期维护方案都参与,在项目中属于整个项目的前端负责人。
LV6:蜕变-钻石
掌握了前端底层的精髓,能够基于底层编写自己所需的所有东西,对前端的认识已经达到入微境界。
这类人一般已经不在直接编写项目代码了,他们的工作更多的是让别人更方便的工作,各类框架就是出自于他们之手。
LV7:登顶-大师
大师级的人物,在专业内具有相当的权威,各个书店都能买到他们的作品,他们左右着技术的走向。
LV8:封神-王者
他们的名字流传于每个互联网的角落,他们在全球技术圈都具有相当的影响力,他们正在改变未来。
附(常用命名单词列表)
- wrapper 页面外围控制整体布局宽度
- container或#content 容器,用于最外层
- layout 布局
- head, #header 页头部分
- foot, #footer 页脚部分
- nav 主导航
- subnav 二级导航
- menu 菜单
- submenu 子菜单
- sideBar 侧栏
- sidebar_a, #sidebar_b 左边栏或右边栏
- main 页面主体
- tag 标签
- msg /message 提示信息
- tips 小技巧
- vote 投票
- friendlink 友情连接
- title 标题
- summary 摘要
- loginbar 登录条
- searchInput 搜索输入框
- hot 热门热点
- search 搜索
- search_output 搜索输出和搜索结果相似
- searchBar 搜索条
- search_results 搜索结果
- copyright 版权信息
- branding 商标
- logo 网站LOGO标志
- siteinfo 网站信息
- siteinfoLegal 法律声明
- siteinfoCredits 信誉
- joinus 加入我们
- partner 合作伙伴
- service 服务
- regsiter 注册
- arr/arrow 箭头
- guild 指南
- sitemap 网站地图
- list 列表
- homepage 首页
- subpage 二级页面子页面
- tool, #toolbar 工具条
- drop 下拉
- dorpmenu 下拉菜单
- status 状态
- scroll 滚动
- .tab 标签页
- .left .right .center 居左、中、右
- .news 新闻
- .download 下载
- .banner 广告条(顶部广告条)
- 电子贸易相关
- .products 产品
- .products_prices 产品价格
- .products_description 产品描述
- .products_review 产品评论
- .editor_review 编辑评论
- .news_release 最新产品
- .publisher 生产商
- .screenshot 缩略图
- .faqs 常见问题
- .keyword 关键词
- .blog 博客
- .forum 论坛
- CSS文件命名 说明
- master.css,style.css 主要的
- module.css 模块
- base.css 基本共用
- layout.css 布局,版面
- themes.css 主题
- columns.css 专栏
- font.css 文字、字体
- forms.css 表单
- mend.css 补丁
- print.css 打印
![在这里插入图片描述](https://img-blog.csdn.net/20180917211023707?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA3NjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)