HTML5 Butterfly使用指南

来源：互联网发布：软件耦合编辑：程序博客网时间：2024/05/05 15:03

一、前端技术入门

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

HTML

http://www.w3school.com.cn/html/

HTML5

http://www.w3school.com.cn/html5/index.asp http://www.w3.org/TR/html51/

JavaScript

http://www.w3school.com.cn/js/index.asp

CSS & CSS3

http://www.w3school.com.cn/css/index.asp http://css3generator.com/

http://www.w3school.com.cn/css3/index.asp

jQuery.js

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

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 pageapp.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 textinput {//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"  }

##上传发布模块文件

登录变色龙平台 https://bsl.foreveross.com/bsl-web
选择模块管理 https://bsl.foreveross.com/bsl-web/cube/mam/widget/list-view
点击新增模块 https://bsl.foreveross.com/bsl-web/cube/mam/widget/add-view
全选模块文件夹内所有文件并压缩，需要zip压缩包格式。切勿包含二级目录结构，上传。
上传完成

0 0

HTML5 Butterfly使用指南

页面历史
克隆地址

一、前端技术入门

HTML

HTML5

JavaScript

CSS & CSS3

jQuery.js

Require.js

Backbone.js

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

基础环境配置

安装Git Bash

安装Node.js

开发工具准备

开发编辑工具 -- Sublime Text 3

推荐浏览器 -- Google Chrome

三、创建Butterfly工程

快速开始

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

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

在根目录下创建package.json

在根目录下创建server.js

五、创建新模块

模块层级规范

模块之间的跳转

新模块的组成

六、目录说明与规范

七、发布Butterfly应用和模块

HTML5 Butterfly使用指南

页面历史克隆地址

一、前端技术入门

HTML

HTML5

JavaScript

CSS & CSS3

jQuery.js

Require.js

Backbone.js

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

基础环境配置

安装Git Bash

安装Node.js

开发工具准备

开发编辑工具 -- Sublime Text 3

推荐浏览器 -- Google Chrome

三、创建Butterfly工程

快速开始

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

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

在根目录下创建package.json

在根目录下创建server.js

五、创建新模块

模块层级规范

模块之间的跳转

新模块的组成

六、目录说明与规范

七、发布Butterfly应用和模块

页面历史
克隆地址

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