页面历史 克隆地址

一、前端技术入门

在使用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/

推荐浏览器 -- Google Chrome

下载地址：http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html

三、创建Butterfly工程

快速开始

1. 创建工程目录

2. 利用Git克隆butterfly.js : git clone https://github.com/yezhiming/butterfly，或者直接从https://github.com/yezhiming/butterfly下载butterfly.js。

3. 在工程目录下创建index.html index.js index.css。

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

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

 http-equiv="Content-Type" content="text/html; charset=utf-8">
 name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
 name="apple-mobile-web-app-capable" content="yes">
 name="apple-mobile-web-app-status-bar-style" content="black">
 http-equiv="Access-Control-Allow-Origin" content="*"/>
 http-equiv="X-Frame-Options" content="ALLOW-FROM">
 http-equiv="pragma" content="no-cache" />
 href="./ratchet/css/ratchet.min.css" rel="stylesheet"/>
 href="./butterfly/css/butterfly.css" rel="stylesheet"/>
 href="theme.css" rel="stylesheet"/>

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

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

• 引入butterfly样式库：

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

• 引入index.css：

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

• 引入theme.css：

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

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

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

 id="main" data-view="$StackView"> id="main-page" data-view="index"> class="bar bar-nav"> class="title">Butterfly class="content">  

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")
*需要注意的是中的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就可以看见该项目了。

五、创建新模块

模块层级规范

1. 大型模块建议通过独立文件夹封装。 
   

2. 子模块则直接创建在大模块文件夹内。
   

   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标签（超链接）详情模块 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 用于将页面与逻辑绑定

   data-view="demo/detail">Content

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

   
    id="demo-detial" data-view="demo/detial">
    id="header">
    class="icon icon-left-nav" data-action="back">
   详情信息
   
   
   Content
   
   
   

   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"}

##上传发布模块文件

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！