在使用Butterfly框架之前需要具备基本的网页开发技术,以下罗列的都是开发WebAPP过程中必须掌握的核心技术。
http://www.w3school.com.cn/html/
http://www.w3school.com.cn/html5/index.asp http://www.w3.org/TR/html51/
http://www.w3school.com.cn/js/index.asp
http://www.w3school.com.cn/css/index.asp http://css3generator.com/
http://www.w3school.com.cn/css3/index.asp
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
Require.js是一个javascript模块异步载入框架,在实际应用非常有用。 Require.js官网:http://requirejs.org/docs/api.html github上的例子:https://github.com/jrburke/requirejs
Backbone.js是一个前端轻量级MVC框架,可以快速构建强大的WebAPP。
我们需要掌握以下三点内容
事件 Event
http://backbonejs.org/#Events
视图 View
http://backbonejs.org/#View
路由 Router
http://backbonejs.org/#Router
安装配置Node.js、 Windows环境需配置git bash
注:以下给出的参考教程仅供参考,如一一列出,则篇幅会显得累赘,读者可根据自己下载的版本自行搜索教程,不便之处敬请原谅。
下载地址 :https://msysgit.github.io/
安装教程可参考:http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html
node -v
下载地址:http://www.sublimetext.com/3
第三方插件安装,参考:http://dearb.me/archive/2013-10-29/sublime-text-packages-for-front-end-development/
下载地址:http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html
利用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>
ratchet
UI库,具体可以参考 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"
是框架必须参数。
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');
}
});
});
{
"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"
}
}
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应用应当由若干独立的子模块构成,当完成项目的开发后,需要将模块打包上传到变色龙平台。 ##编写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"
}
##上传发布模块文件