IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




十二月 03, 2015

什么是前端自动化

无法原谅某些人的无知以及对前端的偏见,我必须写下这篇文章

# 什么是前端自动化

前端自动化不是指自动生成代码,而是自动化构建。一般的小项目是不需要自动化构建的。但是总有一天你会写出拥有几十乃至上百文件的项目。这要是放到html里去加载,会消耗大量资源,而且还有很多包需要你去手动下载。这个时候前端自动化工具就应运而生了。


## nodejs

这是前端自动化的起源,它的出现足以让javascript统治前后端
———-
## npm
nodejs自带的包管理器,通过npm你可以下载前端流行的任何包,并且它包含以来管理,让你更专注于代码的编写。
———-
## gulp/grunt
这两个工具提供了以下主要功能:

– CSS 压缩
– 精简, 打包 Javascript
– 图片压缩, 合并
– Sass, less 处理
– Coffeescript 处理
– es6转换处理
– 发布前端应用

目前gulp有取代grunt的趋势,因为它写起来更简单
———-
## bower
npm是兼顾后端和前端的包管理器,bower是专注前端的包管理器,并且它的依赖管理比npm更强大。
———-

## webpack/browserify/AMD/CMD/requirejs/commonjs

如果你有使用过python或nodejs的经验,你会很容易理解这个工具。它们让javascript在浏览器中可以使用require,export这样的语句,比如以下这个webpack的实例:
a.js
“` javascript

module.exports = 'shit';

“`
b.js

document.write(require('./a.js'));//shit

———-

### 自动化测试

karma

———-
## mvc/mvvm/mvp
这三种是流行的项目设计模式
### mvc

– 视图(View):用户界面
– 控制器(Controller):业务逻辑
– 模型(Model):数据保存

### mvp

– MVP 模式将 Controller 改名为 Presenter,View与Model不发生联系。

### mvvm
mvvm采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular 和 Ember 都采用这种模式。

### 实例

– anaularjs,ember(成熟)
– backbone(祖先)
– react,vue(新秀)
———-
## yeoman

到了这里,在拥有了以上自动化的工具后,很多人会考虑一个问题,如何让它们共同工作,毕竟它们的文档都非常长,环境配置起来也非常麻烦,这时yeoman就来了。
yeoman的作用就是组织起来这些工具,并为你创建项目seed文件,也就是代码的基本组织方式。
例如,:
“` shell
yo angular
“`
就可以创建出:
.
|– Gruntfile.js
|– app
| |– 404.html
| |– favicon.ico
| |– images
| |– index.html
| |– robots.txt
| |– scripts
| |– styles
| `– views
|– bower.json
|– bower_components
| |– angular
| |– bootstrap-sass-official
| |– es5-shim
| |– jquery
| `– json3
|– node_modules
| |– grunt-autoprefixer
| |– grunt-usemin
| |– grunt-wiredep
| |– jasmine-core
| |– jshint-stylish
| `– karma
|– npm-debug.log
|– package.json
`– test
|– karma.conf.js
`– spec
———-

### sass/less

除了javascript在发展外,css也在发展,应运而生的是可以编程的css

### jade
随着nodejs的发展,产生了一套nodejs的html简写框架,这套框架同样适用于web前端

### stylus
同jade一样发展而来的css简写框架是stylus

### 总结
前端需求过高,工具链变化也越来越快,以上每一个工具都够研究半天,如果不学习是适应不了前端发展的潮流的。
如果你对前端的认知还停留在写html,写css,写动画的层面上,那说明你需要好好学习,才能除下你的偏见了呢。

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.