HTML5 Butterfly使用指南_butterfly.js-CSDN博客

一、前端技术入门

在使用Butterfly框架之前需要具备基本的网页开发技术，以下罗列的都是开发WebAPP过程中必须掌握的核心技术。

Require.js

Require.js是一个javascript模块异步载入框架，在实际应用非常有用。 Require.js官网：http://requirejs.org/docs/api.html github上的例子：https://github.com/jrburke/requirejs

Backbone.js

Backbone.js是一个前端轻量级MVC框架，可以快速构建强大的WebAPP。
我们需要掌握以下三点内容
事件 Event http://backbonejs.org/#Events
视图 View http://backbonejs.org/#View
路由 Router http://backbonejs.org/#Router

二、Butterfly应用开发环境配置指南

基础环境配置

安装配置Node.js、 Windows环境需配置git bash

注：以下给出的参考教程仅供参考，如一一列出，则篇幅会显得累赘，读者可根据自己下载的版本自行搜索教程,不便之处敬请原谅。

安装Git Bash

下载地址：https://msysgit.github.io/
安装教程可参考：http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

安装Node.js

1.下载地址:http://nodejs.org/download/
以windows，下载msi版本为例，
2.安装,双击运行，即可在程序的引导下完成安装。
3.测试安装结果命令(git bash或cmd):
node -v
如果输出版本号即表示安装完成。

开发工具准备

开发编辑工具 -- Sublime Text 3

下载地址：http://www.sublimetext.com/3
第三方插件安装，参考：http://dearb.me/archive/2013-10-29/sublime-text-packages-for-front-end-development/

三、创建Butterfly工程

快速开始

创建工程目录
利用Git克隆butterfly.js : git clone https://github.com/yezhiming/butterfly，或者直接从https://github.com/yezhiming/butterfly下载butterfly.js。
在工程目录下创建index.html index.js index.css。

myproject
┣butterfly
┣ratchet
┗main
┣index.html
┣index.css
┗index.js

其中index.html作为 butterfly 工程的入口，其内容如下：

<!DOCTYPE html>
<html>
<head>
<title>Butterfly</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<meta http-equiv="X-Frame-Options" content="ALLOW-FROM">
<meta http-equiv="pragma" content="no-cache" />
<link href="./ratchet/css/ratchet.min.css" rel="stylesheet"/>
<link href="./butterfly/css/butterfly.css" rel="stylesheet"/>
<link href="theme.css" rel="stylesheet"/>
<script type="text/javascript" src="./butterfly/js/require.js" data-main="../butterfly/js/butterfly-amd"></script>
</head>

<body>
<!-- body -->
</body>
</html>

加载ratchetUI库，具体可以参考 ratchet 官方文档：

<link href="./ratchet/css/ratchet.min.css" rel="stylesheet"/>

引入butterfly样式库：

<link href="./butterfly/css/butterfly.css" rel="stylesheet"/>

引入index.css：

<link href="./index.css" rel="stylesheet"/>

引入theme.css：

<link href="./theme.css" rel="stylesheet"/>

butterfly.js遵循AMD规范，并利用require.js来管理工程所依赖的模块，加载require.js：

<script type="text/javascript" src="./butterfly/js/require.js" data-main="../butterfly/js/butterfly-amd"></script>

通过data-view="index"来加载index.js：

<body>
  <div id="main" data-view="$StackView">
    <div id="main-page" data-view="index">
      <header class="bar bar-nav">
        <h1 class="title">Butterfly</h1>
      </header>
      <div class="content">  
      </div>
    </div>
  </div>
</body>

data-view的参数为需要引入js文件的路径，在这里因为index.html和index.js处于同一个目录，所以data-view="index"就指向index.js。例如文件目录如下：

myproject
┣index.html
┣js
┃ ┗index.js
┗index.css

则data-view的值应该为"js/index" (data-view="js/index")
*需要注意的是<div id="main" data-view="$StackView">中的data-view="$StackView"是框架必须参数。

3. 需要对`index.js`进行修改：

在index.js添加以下代码：

define(['butterfly/view'], function(View){
  return View.extend({
    render: function(){
      console.log('index.html render');
      },
      onShow: function(){
        console.log('index.html onShow');
      }
      });
      });

四、Node搭建服务器运行项目

在根目录下创建package.json

{
  "name": "chameleon-exhibition",
  "description": "Chameleon Exhibition, Production Showcase for Chameleon Platform",
  "version": "0.0.1",
  "author": {
    "name": "Justin Yip",
    "email": "justin.yip@foxmail.com"
  },
  "homepage": "https://bsl.foreveross.com",
  "repository": {
    "type": "git",
    "url": "https://git.oschina.net/chameleon/exhibiton-web.git"
  },
  "dependencies": {
  },
  "devDependencies": {
    "express": "*",
    "http-proxy": "*",
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-stylus": "~0.7.0",
    "grunt-bower-task": "~0.3.4",
    "grunt-contrib-concat": "~0.3.0"
  }
}

在根目录下创建server.js

var express = require('express');
var path = require('path');
var fs = require('fs');

//创建express实例
var app = express();

app.use(express.static(path.resolve('.')));

//index page
app.get('/', function(req, res) {
  res.redirect('/index.html');
});

app.listen(process.env.PORT || 3000);

console.log('Butterfly Project, Show Time!');

在git bash/cmd输入npm install安装依赖的包
安装完之后，运行node server.js
然后在浏览器输入localhost:3000就可以看见该项目了。

五、创建新模块

模块层级规范

大型模块建议通过独立文件夹封装。
子模块则直接创建在大模块文件夹内。

myproject
┣index.html
┣module-a
┃ ┗a.js
┃ ┗a.html
┃ ┗a.css
┃ ┗sub-module.js
┃ ┗sub-module.html
┃ ┗sub-module.css
┗index.css

模块之间的跳转

模块之间的跳转有四种方式：
① 通过a标签（超链接）
② 在地址栏输入网址
③ 代码实现

以下是main模块与demo模块之间的跳转示例 1. 通过a标签（超链接）<a href="../demo/detial.html">详情模块</a> 2. 在地址栏输入网址http://localhost:3000/index.html#module.html 3. 代码实现butterfly.navigate("#detial.html");

新模块的组成

在新建的模块中主要分为三个文件，detial.html、detial.css和detial.js文件。
detail.html 视图界面
1. 模块html页面中必须包含 属性:data-view 用于将页面与逻辑绑定

  <div data-view="demo/detail">
    Content
  </div>

标识属性:data-action="back" 用于绑定返回上一级模块

<!--demo/detial.html-->
<div id="demo-detial" data-view="demo/detial">
<div id="header">
<a class="icon icon-left-nav" data-action="back"></a>
<label>详情信息</label>
</div>
<div>
Content
</div>
</div>

detial.js 业务逻辑

<!--demo/detial.js-->
//引入所需要的文件，这里举例的是引入demo/detial.css文件的方法
define(['butterfly/view','css!demo/detial'], function(View) {

return View.extend({
name: null,//在这定义全局变量
events: {
  //这里写绑定的事件及调用的方法
  "click a[data-action='back']": "goback"
  },

  render: function() {
    console.log('exhibition/index.html render');
    },
  onShow: function() {
    console.log('exhibition/index.html onShow');
  },
  //自定义的方法
  goback: function() {
    window.history.back();
  },
});
});

demo/detial.css

something css text
input {
//xxxx
}

div {
//xxxx
}

六、目录说明与规范

七、发布Butterfly应用和模块

Butterfly应用应当由若干独立的子模块构成,当完成项目的开发后，需要将模块打包上传到变色龙平台。 ##编写package.json模块描述文件编写包描述文件并放置与模块目录内，以下字段缺一不可以

identifier 模块唯一标识

name 模块名

releaseNote 更新日志

description 模块描述

version 版本号

build 构建号

hidden 是否隐藏

dependencies 是否依赖其他模块

  {
    "dependencies": {},
    "hidden": false,
    "description": "",
    "name": "推送演示",
    "releaseNote": "推送演示模块",
    "build": 1,
    "identifier": "com.foss.xxxx",
    "version": "1.0.0"
  }