Yeoman 学习笔记
yoeman 简介：http://www.infoq.com/cn/news/2012/09/yeoman
yeoman 官网： http://yeoman.io/
yeoman 是快速创建骨架应用程序的WEB前端工具，实际由 yo, grunt, bower 三个组建而成。
Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
简单来说就是 Yo 是配置 Grunt 的 task 的工具，Grunt 是一个部署、预览和测试前端项目的工具，而 Bower 是一个包的管理工具，可以下载 jquery, backbone 等库。
PS: 要运行 yeoman 首先需要配置环境，配置好 node.js 、git 环境。
下面开始写一个 todo-list demo 作为例子
一、首先安装 yo，这会自动安装 grunt, bower
npm install -g yonpm install -g generator-webapp
PS: yo 是命令开头，webapp 是 另外一个参数. yo 可以生成其他各种应用配置。如 backbone, angularjs等，前提首先安装 generator-backbone，即
yo webapp
此时可以看到
webapp 默认带有 Sass 版的 bootstrap库，等到下载完毕后可以看到以下文件：
app 为项目主目录，是部署的根目录
node_modules 为 nodejs的包文件
test 为测试目录，专门用于单元测试，用的是 mocha 来测试
Gruntfile.js 是配置 grunt 自动化任务的配置文件，具体配置可以参考下 Grunt官网
二、添加JS库，这里添加 backbone，bower 会自动下载 underscore.
bower install backbone
三、运行
grunt server
它将运行应用，并监控文件的变化，一旦有改变，就会自动刷新浏览器。
文件又这几个，用的是
- HTML5 Boilerplate 模板（默认）
- RequireJS （可选）
四、开始写应用
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap-2.3.2.min.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div class="container">
<div class="todo-container">
<div class="header">
<h2>Todo List</h2>
<div class="todo-input">
<div class="controls">
<input type="text" placeholder="Enter to save" class="todo-input-text" autofocus>
</div>
</div>
</div>
<div class="content">
<div class="todo-item-list todo-undone-list clearfix">
<p>Things to do:</p>
</div>
<div class="todo-item-list todo-done-list clearfix">
<p>Done Things:</p>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
<script type="text/template" id="todo-input-template">
</script>
<script type="text/template" id="todo-item-template">
<span class="order"><%= order%></span>
<a href="javascript:void(0);" class="done-<%= done%>">
<b><%= title%></b>
<button title="删除" class="btn btn-mini pull-right todo-item-remove"><i class="icon-remove"></i></button>
<% if (done) { %>
<button title="撤销" class="btn btn-mini pull-right todo-item-undone"><i class="icon-repeat"></i></button>
<% } else { %>
<button title="完成" class="btn btn-mini pull-right todo-item-done"><i class="icon-ok"></i></button>
<% } %>
</a>
</script>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
</body>
</html>
main.coffee
require.config
baseUrl : './scripts/'
shim :
underscore :
exports : '_'
backbone :
deps : [
'underscore'
'jquery'
]
exports : 'Backbone'
backboneLocalStorage :
deps : [
'backbone'
]
app :
deps : [
'underscore'
'jquery'
'backbone'
]
paths :
jquery : '../bower_components/jquery/jquery'
underscore : '../bower_components/underscore/underscore'
backbone : '../bower_components/backbone/backbone'
backboneLocalStorage: '../bower_components/backbone/examples/backbone.localStorage'
require ['app'], (app) ->
app.init()
app.coffee
define 'app', ['jquery', 'underscore', 'backbone', 'backboneLocalStorage'], ($, _, Backbone) ->
TodoModel = Backbone.Model.extend
defaults : () ->
title : 'Untitle',
done : false,
order : Todos.length+1
initialize : () ->
this.save()
TodoList = Backbone.Collection.extend
model : TodoModel
localStorage : new Backbone.LocalStorage 'todos-backbone'
done : () ->
this.where done : true
Todos = new TodoList # todo 集合
TodoView = Backbone.View.extend
tagName : 'div' # 外容器
template : _.template $('#todo-item-template').html() # 模板HTML
# 初始化，坚听对象
initialize : () ->
this.listenTo this.model, 'change', this.render
this.listenTo this.model, 'destroy', this.remove
# 事件绑定
events :
'click button.todo-item-done' : 'done'
'click button.todo-item-remove' : 'clear'
'click button.todo-item-undone' : 'undone'
done : () ->
if this.model.get('done') == false # 本身是未完成状态的
this.model.set done : true
this.remove()
undone : () ->
if this.model.get('done') == true # 本身是完成状态的
this.model.set done : false
this.remove()
clear : () ->
this.model.destroy()
render : () ->
this.$el.html this.template this.model.toJSON()
return this
AppView = Backbone.View.extend
# 初始化保存DOM对象
initialize : () ->
this.$input = this.$('.todo-input-text').focus()
this.$todoList = this.$('.todo-undone-list')
this.$todoDoneList = this.$('.todo-done-list')
this.listenTo Todos, 'add', this.addOne
this.listenTo Todos, 'change:done', this.addOne
Todos.fetch()
events :
'keypress input.todo-input-text' : 'createOnEnter'
# Enter 时保存
createOnEnter : (e) ->
if e.keyCode != 13
return
if !this.$input.val()
return;
Todos.create title: this.$input.val()
this.$input.val('')
addOne : (todo) ->
view = new TodoView model : todo
if todo.get('done')
# 已经完成的加入已完成列表
this.$todoDoneList.append(view.render().el);
else
# 未完成的加入未完成列表
this.$todoList.append(view.render().el);
# Todos.each (todo) ->
todo.save()
App = new AppView el : $('.todo-container') # 主应用UI
return init : () ->
Backbone.history.start()
main.css
.todo-container {
margin: 50px auto 0 auto;
width: 300px;
}
.todo-item-list {
margin-top: 20px;
}
.todo-item-list > div {
float: left;
width: 90%;
margin-top: 10px;
padding-left: 5%;
}
.todo-item-list > div a:hover {
text-decoration: none;
}
.todo-item-list > div button {
margin: 0 3px;
}
.todo-item-list > div span.order {
margin-right: 10px;
color: #B6B6B6;
font-style: italic;
}
.todo-item-list > p {
font-weight: bold;
margin-top: 1em;
}
效果图
补充：
这里用的是 coffeescript，yeoman会自动转成js。关于todo-list，可以上官网参考下，我这里简化了部分代码。
Yeoman 学习笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- android自定义控件一站式入门
自定义控件 Android系统提供了一系列UI相关的类来帮助我们构造app的界面,以及完成交互的处理. 一般的,所有可以在窗口中被展示的UI对象类型,最终都是继承自View的类,这包括展示最终内容的非 ...
- ASP.NET Core HTTP 管道中的那些事儿
前言 马上2016年就要过去了,时间可是真快啊. 上次写完 Identity 系列之后,反响还不错,所以本来打算写一个 ASP.NET Core 中间件系列的,但是中间遇到了很多事情.首先是 NPOI ...
- iOS可视化动态绘制八种排序过程
前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...
- nginx+php的使用
原文来自:windows下配置nginx+php环境 按照他的步骤走,亲测可用! 但是这里他后面说的根目录可能有些人有点懵. 其实在设置的时候就设置了: 网站根目录就是www这个目录,如果没创建请自行 ...
- 23种设计模式--单例模式-Singleton
一.单例模式的介绍 单例模式简单说就是掌握系统的至高点,在程序中只实例化一次,这样就是单例模式,在系统比如说你是该系统的登录的第多少人,还有数据库的连接池等地方会使用,单例模式是最简单,最常用的模式之 ...
- 初步认识TDD
TDD,测试驱动开发(Test Driven Development)是极限编程中倡导的程序开发方法,以其倡导先写测试程序,然后编码实现其功能得名.本文将对TDD有一个较为系统的认识. 基础属性 ...
- JavaScript 常量定义
相信同学们在看见这个标题的时候就一脸懵逼了,什么?JS能常量定义?别逗我好吗?确切的说,JS当中确实没有常量(ES6中好像有了常量定义的关键字),但是深入一下我们可以发现JS很多不为人知的性质,好好利 ...
- java中Action层、Service层和Dao层的功能区分
Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- SAP CRM 性能小技巧
导言 本页面打算收集SAP CRM实施中可以用于避免性能问题的注意事项,重要的事项会由图标标识. 如果你有其他的技巧想要说出来,别犹豫! 性能注意事项 通用 缓存读取类访问,特别是在性能关键的地方,比 ...