Programming

互动式编程

启动项目：

node版本7.x

全局安装http-server

npm install -g http-server

到项目文件夹下 使用命令：

http-server -p 8010

// 单文件(录制)
http://127.0.0.1:8010/src/index.html?languageid=35&userId=826920&role=0

// 单文件(回放)
http://127.0.0.1:8010/src/player.html?codeReplayId=286636&role=0&userId=285836&languageid=10

// 多文件(录制)
http://127.0.0.1:8010/src/v1.1/index.html?languageid=35&userId=826920&role=0
// 多文件(回放)
http://127.0.0.1:8010/src/v1.1/player.html?codeReplayId=285834&role=0&userId=285836&languageid=10

1. 参数说明：
2. 第三方库说明
3. 项目结构

打包工具 gulp

gulp（编译 sass 文件）

gulp copyfile（拷贝文件到dist）

gulp deploy（部署，现在没有使用到线上）

参数说明：

// 多文件在v1.1文件夹下，但文件路径没有v1.1

// 录制参数：
languageid   // 语言id
userId       // 用户id
role         // 角色：0:老师，1学生

// 播放参数：
codeReplayId    // 播放课程的代码id
languageid      // 语言id
userId          // 用户id
role            // 角色：0:老师，1学生

参数说明： // 多文件在v1.1文件夹下，但文件路径没有v1.1

// 录制参数：
languageid   // 语言id
userId       // 用户id
role         // 角色：0:老师，1学生

// 播放参数：
codeReplayId    // 播放课程的代码id
languageid      // 语言id
userId          // 用户id
role            // 角色：0:老师，1学生

第三方库说明

// 第三方库
1、jquery（jquery-1.7.1）
2、bootstrap
3、codemirror（编辑器基础库）
4、ztree（用于创建多文件目录结构）
5、emmet.js（用与前端的自动补全）
6、ladda（按钮提示）

// 我们项目自写的插件
7、Hourglass.js（计时器插件）
8、Myna.js（录音）
9、jquery.audioPlayer（播放音频的jquery插件（商艳涛写的有问题可以找涛哥））
10、

项目结构

注：由于但文件已经不用以后所有的项目都是多文件录制，所以这里只说明多文件的项目架构，但文件的入口在src/js/gbreplayer.js下。

多文件的html入口在v1.1中，js在gxb-ide中，

// Ide.js
// 入口文件，初始化一个GxbIde对象，初始化ide下面的几个对象
GxbIde = function(){
    this.codingEditer = CodingEditer;   // 编辑器
    this.dir = Dir;                     // 目录
    this.toolBox = ToolBox;             // 工具
    this.init.apply(this, arguments);   // 绑定this
}
// 初始化一个ide
var ide = new GxbIde({
    el: '#folder',
    role: _role,
    isPlayPage: 1,
    languageid: parseInt(_languageid)
});

// CodingEditer.js
是初始化编辑器，

// Dir.js
初始化文件目录结构，

// Iterm.js
编译控制台和web预览区，

// ToolBox.js
工具栏控制录制，预览，保存等功能

// src/js/recorder/Maya.js
录音和上传音频文件的地方
// ToolBox.js
HZRecorder.get(function(rec) {
    recorder = rec;
    recorder.start();
});

// 两个重要的函数

// 初始化播放队列
function changeValueCallback(record, replay_type, offset) {
    // record 存放老师动作的数组对象
    // replay_type 播放速度
    // offset 播放间隔（暂时没有到）
}

// 往编辑器里插入代码
function processChangeObject(playbackcm, obj) {
    // playbackcm 编辑器对象
    // obj 每个动作的对象
}