现代化前端开发

---

现代化前端开发

在前端产品日益复杂的今天.国内外,越来越多的前端攻城狮已经不满足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的关系
    现在最常用的移动端开发
• html5+plus
  
  • js 调用原生应用 可跨平台
• Native.js
  
  • js调用原生应用,不可跨平台 代码写2套