梁美英 / programming · Commits

Commit 3fd5966ffce4ba4ca6abde8ad5b488cb5947662a

Authored by ykxie
1 parent 996788b5

read me

Inline Side-by-side
Showing 1 changed file with 163 additions and 0 deletions
README.md
  View file @3fd5966
1 1 # Programming
2 2 互动式编程
  3 +
  4 +启动项目：
  5 +
  6 +node版本7.x
  7 +
  8 +全局安装http-server
  9 +```
  10 +npm install -g http-server
  11 +```
  12 +到项目文件夹下
  13 +使用命令：
  14 +
  15 +```
  16 +http-server -p 8010
  17 +```
  18 +
  19 +
  20 +```javascript
  21 +// 单文件(录制)
  22 +http://127.0.0.1:8010/src/index.html?languageid=35&userId=826920&role=0
  23 +
  24 +// 单文件(回放)
  25 +http://127.0.0.1:8010/src/player.html?codeReplayId=286636&role=0&userId=285836&languageid=10
  26 +
  27 +// 多文件(录制)
  28 +http://127.0.0.1:8010/src/v1.1/index.html?languageid=35&userId=826920&role=0
  29 +// 多文件(回放)
  30 +http://127.0.0.1:8010/src/v1.1/player.html?codeReplayId=285834&role=0&userId=285836&languageid=10
  31 +
  32 +```
  33 +
  34 +1. 参数说明：
  35 +2. 第三方库说明
  36 +3. 项目结构
  37 +
  38 +
  39 +### 打包工具 gulp
  40 +
  41 +```
  42 +gulp（编译 sass 文件）
  43 +
  44 +gulp copyfile（拷贝文件到dist）
  45 +
  46 +gulp deploy（部署，现在没有使用到线上）
  47 +
  48 +```
  49 +
  50 +
  51 +
  52 +### 参数说明：
  53 +// 多文件在v1.1文件夹下，但文件路径没有v1.1
  54 +
  55 +```javascript
  56 +// 录制参数：
  57 +languageid // 语言id
  58 +userId // 用户id
  59 +role // 角色：0:老师，1学生
  60 +
  61 +// 播放参数：
  62 +codeReplayId // 播放课程的代码id
  63 +languageid // 语言id
  64 +userId // 用户id
  65 +role // 角色：0:老师，1学生
  66 +```
  67 +
  68 +
  69 +
  70 +参数说明：
  71 +// 多文件在v1.1文件夹下，但文件路径没有v1.1
  72 +
  73 +```javascript
  74 +// 录制参数：
  75 +languageid // 语言id
  76 +userId // 用户id
  77 +role // 角色：0:老师，1学生
  78 +
  79 +// 播放参数：
  80 +codeReplayId // 播放课程的代码id
  81 +languageid // 语言id
  82 +userId // 用户id
  83 +role // 角色：0:老师，1学生
  84 +```
  85 +
  86 +### 第三方库说明
  87 +
  88 +
  89 +```javascript
  90 +// 第三方库
  91 +1、jquery（jquery-1.7.1）
  92 +2、bootstrap
  93 +3、codemirror（编辑器基础库）
  94 +4、ztree（用于创建多文件目录结构）
  95 +5、emmet.js（用与前端的自动补全）
  96 +6、ladda（按钮提示）
  97 +
  98 +// 我们项目自写的插件
  99 +7、Hourglass.js（计时器插件）
  100 +8、Myna.js（录音）
  101 +9、jquery.audioPlayer（播放音频的jquery插件（商艳涛写的有问题可以找涛哥））
  102 +10、
  103 +
  104 +```
  105 +
  106 +### 项目结构
  107 +注：由于但文件已经不用以后所有的项目都是多文件录制，所以这里只说明多文件的项目架构，但文件的入口在src/js/gbreplayer.js下。
  108 +
  109 +多文件的html入口在v1.1中，js在gxb-ide中，
  110 +
  111 +```javascript
  112 +// Ide.js
  113 +// 入口文件，初始化一个GxbIde对象，初始化ide下面的几个对象
  114 +GxbIde = function(){
  115 + this.codingEditer = CodingEditer; // 编辑器
  116 + this.dir = Dir; // 目录
  117 + this.toolBox = ToolBox; // 工具
  118 + this.init.apply(this, arguments); // 绑定this
  119 +}
  120 +// 初始化一个ide
  121 +var ide = new GxbIde({
  122 + el: '#folder',
  123 + role: _role,
  124 + isPlayPage: 1,
  125 + languageid: parseInt(_languageid)
  126 +});
  127 +
  128 +// CodingEditer.js
  129 +是初始化编辑器，
  130 +
  131 +// Dir.js
  132 +初始化文件目录结构，
  133 +
  134 +// Iterm.js
  135 +编译控制台和web预览区，
  136 +
  137 +// ToolBox.js
  138 +工具栏控制录制，预览，保存等功能
  139 +
  140 +// src/js/recorder/Maya.js
  141 +录音和上传音频文件的地方
  142 +// ToolBox.js
  143 +HZRecorder.get(function(rec) {
  144 + recorder = rec;
  145 + recorder.start();
  146 +});
  147 +
  148 +// 两个重要的函数
  149 +
  150 +// 初始化播放队列
  151 +function changeValueCallback(record, replay_type, offset) {
  152 + // record 存放老师动作的数组对象
  153 + // replay_type 播放速度
  154 + // offset 播放间隔（暂时没有到）
  155 +}
  156 +
  157 +// 往编辑器里插入代码
  158 +function processChangeObject(playbackcm, obj) {
  159 + // playbackcm 编辑器对象
  160 + // obj 每个动作的对象
  161 +}
  162 +
  163 +```
  164 +
  165 +
... ...