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
- 参数说明：
- 第三方库说明
- 项目结构
打包工具 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 每个动作的对象
}