现代化前端开发
在前端产品日益复杂的今天.国内外,越来越多的前端攻城狮已经不满足jquery+html式的开发WEB网页了.前端技术也越来越具有广度和深度.今天就给大家讲讲我对现代化前端开发的一点点理解.
- 自动化工具
- 框架类库
- PC端功能开发
- 移动端开发
- WEB网页开发
自动化工具
CSS预处理框器
- less
- Sass
- Stylus
JS自动化工具
- node
- npm
- bower
- karma
- yo/yeman
- grunt/gulp
CSS预处理框器
CSS预处理框器,它允许前端工程师使用类似于js的语法,对css进行编辑管理。通过定义变量,函数,min等功能.提供更有利于维护,管理的css编辑方式.
less处理器
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.
less 是轻量级css预处理框架.适合所有项目.支持引入less.js 和 后台node less 编译等方式使用.
less学习地址
Sass处理器
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
SASS是Ruby语言写的.必须安装Ruby.相对于less来说偏重量级,不过功能也相对丰富点.
Sass学习地址
JS自动化
解决问题
JS自动化是指专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的解决方案,使前端开发更专注于业务逻辑。我自己的理解
node npm 模块 (基础)
npm 属于nodejs模块.nodejs 包管理器.nodejs社区大部分模块都是通过npm 模块加载到本地.
主要指令 : npm install(安装指令) -g(全局) [package包名]
配置文件 : package.json
node bower模块(基础)
nodejs 前端资源管理器.类似于java 中 maven的存在 .管理前端js 框架依赖问题
主要指令 : bower install(安装指令) [js框架名称]
配置文件 : bower.json
node grunt/gulp 模块
nodejs工程项目任务管理器.主要用于管理项目(包含测试 合并 压缩 编译 等等).
主要指令 : grunt / gulp(推荐使用)
配置文件 : Gruntfile.js/Gulpfile.js
node YO模块
Yeoman构建的命令行工具.配置项目模型
主要指令 : yo [项目类型 , 例如 : angular]
node karma模块
karma构建js单元测试.
主要指令 : karma start [karma.conf.js路径]
依赖 : jasmine 一种端对端 / 单元测试 js类库(常用)
框架类库
由于js框架涉及知识点很庞大,我这主要简单介绍下.
- JS框架
- jquery
- 属于初学者必学,适合所有前端开发
- backbone
- 适合研究.单页面开发利器
- underscore
- Underscore.js是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分.
- react
- facebook开发的前端v层框架.适合所有页面.目前中文资料奇缺,适合研究.
- angular
- 单页面神器.MVVM模式.对IE兼容差.不适合普通网站,适合单页面的curd操作的后台以及端界面开发 移动界面开发.适合深入研究.
- Ember
- MVVM模式,与angular同类产品.不过在使用热度上不如angular
- avalon
- 司徒正美大神开发的一套类angular框架是,适合国内IE浏览器.
- CSS框架
- nec 网易的css规范 适合新手入门
- bootstrap 最流行的响应式框架
- foundation 移动端框架
- onsenui 基于angular的移动端ui框架
- 模块加载器
- require
- AMD规范实现
- seajs
- COMMONJS规范实现
- browserify
- 类nodejs开发风格
端技术
nodejs
node-webkit
移动端
- PhoneGap
- 简单来说就是通过js方式开发移动端应用.
- Cordova
- 基于PhoneGap.类似 webkit 与 Chrome的关系
现在最常用的移动端开发
- 基于PhoneGap.类似 webkit 与 Chrome的关系
- html5+plus
- js 调用原生应用 可跨平台
- Native.js
- js调用原生应用,不可跨平台 代码写2套