This repository has been archived by the owner on Apr 25, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 640
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
4,925 additions
and
5,448 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| --- | ||
| title: 内置组件 | ||
| --- | ||
|
|
||
| > 为了方便开发,提供了很多内置组件来进行调用,每一个组件都提供了接口可以定制化 | ||
| > | ||
| > 存放文件夹为`internal/utils` | ||
| 在应用启动(mooc.ts)周期注入组件实例 | ||
| ```ts | ||
| let component = new Map<string, any>() | ||
| .set("config", new ChromeConfigItems(NewFrontendGetConfig())) | ||
| .set("logger", logger); | ||
| ``` | ||
|
|
||
| ## 日志组件 | ||
| 方便采集日志,未来可以对一些严重的日志进行采集,分析bug出现情况 | ||
|
|
||
| #### 接口 | ||
| ```ts | ||
| export interface Logger { | ||
| Debug(...args: any[]): Logger; | ||
|
|
||
| Info(...args: any[]): Logger; | ||
|
|
||
| Warn(...args: any[]): Logger; | ||
|
|
||
| Error(...args: any[]): Logger; | ||
|
|
||
| Fatal(...args: any[]): Logger; | ||
| } | ||
| ``` | ||
| #### 实现 | ||
| ConsoleLog console处打印日志内容 | ||
|
|
||
| PageLog 会在窗口显示日志内容,并且根据等级不同会进行消息通知 | ||
|
|
||
| #### 使用 | ||
| ```ts | ||
| Application.App.log.Error("获取题目发生了一个错误", e); | ||
| ``` | ||
|
|
||
| ## 配置组件 | ||
| 应用配置,可以根据配置调整运行状态,也可作为一个存储组件使用,不过请勿存储较长内容 | ||
|
|
||
| Config为配置基础接口,主要存储和监听配置kv | ||
|
|
||
| ConfigItems具体配置项 | ||
| #### 接口 | ||
| ```ts | ||
| export interface Config { | ||
| GetConfig(key: string, defaultVal?: string): string | ||
|
|
||
| SetConfig(key: string, val: string): Promise<any> | ||
|
|
||
| ConfigList(): any | ||
|
|
||
| Watch(key: Array<string> | string, callback: ConfigWatchCallback): void | ||
| } | ||
|
|
||
| export interface ConfigItems extends Config { | ||
| SetNamespace(namespace: string): void | ||
|
|
||
| SetNamespaceConfig(namespace: string, key: string, val: string): Promise<any> | ||
|
|
||
| GetNamespaceConfig(namespace: string, key: string, defaultVal?: string): string | ||
|
|
||
| vtoken: string | ||
| rand_answer: boolean | ||
| auto: boolean | ||
| video_mute: boolean | ||
| answer_ignore: boolean | ||
| video_cdn: string | ||
| video_multiple: number | ||
| interval: number | ||
| topic_interval: number | ||
| super_mode: boolean | ||
| } | ||
| ``` | ||
| #### 实现 | ||
| ChromeConfigItems 具体配置项类,需要注入具体Config实例实现存储功能 | ||
|
|
||
| backendConfig 在扩展的后端环境使用 | ||
|
|
||
| frontendGetConfig 在扩展的前端环境使用 | ||
| #### 使用 | ||
|
|
||
| ```ts | ||
| new ChromeConfigItems(NewFrontendGetConfig()) | ||
| // 对于配置类的可以直接定义新的配置项 | ||
| Application.App.config.auto | ||
| Application.App.config.auto=false | ||
| // 更偏向于储存的可以直接使用自定义key,不过请注意,不要存储过长的内容 | ||
| Application.App.config.GetConfig("notify_tools_x") | ||
| Application.App.config.SetConfig("notify_tools_x", this.div.style.left); | ||
| ``` | ||
|
|
||
| #### 增减配置和关联配置面板 | ||
| 增减配置需要修改`config.ts:configDefaultValue`,`config.ts:ConfigItems`接口与实现 | ||
|
|
||
| 配置面板中:`views/popup.ts:popup:start:configs`,具体可看现有配置 | ||
|
|
||
| 如果发布油猴版本,请在对应的油猴版本中添加相应的配置 | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| title: 平台开发 | ||
| --- | ||
|
|
||
| > 为了方便开发,抽象了平台的流程,只需要专注于功能的实现 | ||
| ## 开始 | ||
| 创建新的平台应该遵循现有规则,在`mooc`文件夹下创建以平台为命名规则的文件夹 | ||
|
|
||
| 且有文件`mooc/[platform]/platform.ts`,实现`MoocFactory`接口的类,用于通过页面信息来创建对应的具体`Mooc`对象,如果不符合规则返回`null`,对应`构建实例(mooc/[platform]/platform.ts)`生命周期 | ||
|
|
||
| 需要在`/build/cxmooc-tools/manifest.json`文件和`/src/config.ts`中添加对应的URL规则 | ||
|
|
||
| 如果你需要开发油猴脚本,那么你需要在`/src/tampermonkey`目录中添加对应的油猴文件,且在`webpack.tampermonkey.js`和`internal/pack-crx.ts:43`中添加对应配置,具体请参考现有平台 | ||
|
|
||
|
|
||
| ## 实现Mooc接口 | ||
| 还在优化中,具体请看已有平台 | ||
|
|
||
| #### 接口定义 | ||
| ```ts | ||
| export interface Mooc { | ||
| Init(): void | ||
| // TODO: 实现各种流程流转 | ||
| // Start() | ||
| // Stop() | ||
| // OnFinished() | ||
| // Next() | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| --- | ||
| title: 题库和答题功能 | ||
| --- | ||
|
|
||
| > 扩展抽象了题库,方便切换或者增加题库使用 | ||
| > | ||
| > 源码请看`internal/app/question.ts`和`internal/app/topic.ts` | ||
| > ps:这个模块其实挺乱的...想优化 | ||
| ## 题库接口 | ||
| 题库的接口 | ||
| ```ts | ||
| // 题库操作具体实现 | ||
| export interface QuestionBankFacade { | ||
| ClearQuestion(): void | ||
|
|
||
| AddQuestion(q: Question): void | ||
|
|
||
| Answer(callback: (status: QuestionStatus) => void): void | ||
|
|
||
| Push(callback: (status: QuestionStatus) => void): void | ||
|
|
||
| CheckCourse(): Promise<number> | ||
| } | ||
| // 题库存储具体实现 | ||
| export interface QuestionBank { | ||
| Answer(topic: Topic[], resolve: QuestionBankCallback): void; | ||
|
|
||
| Push(answer: Answer[]): Promise<QuestionStatus>; | ||
|
|
||
| SetInfo(info: QuestionInfo): void; | ||
|
|
||
| CheckCourse?(info?: QuestionInfo[]): Promise<number>; | ||
| } | ||
| ``` | ||
| #### 实现 | ||
| ToolsQuestionBankFacade 扩展自带题库 | ||
|
|
||
| #### 使用 | ||
| ```ts | ||
| let topic = new ExamTopic(context, new ToolsQuestionBankFacade("cx", taskinfo)); | ||
| ``` | ||
|
|
||
| ## 答题接口 | ||
| 如果是利用现在的题库,开发者只需要专注实现下列接口,具体可参考现有平台 | ||
| ```ts | ||
| // 选项 | ||
| export interface Options { | ||
| Random(): TopicStatus; | ||
| Fill(s: Answer): Promise<TopicStatus>; | ||
| Correct(): Answer | ||
| } | ||
| // 题目,继承了选项接口 | ||
| export interface Question extends Options { | ||
| GetType(): TopicType; | ||
| GetTopic(): string; | ||
| SetStatus(status: TopicStatus): void; | ||
| } | ||
| // 查询任务中的题目,返回Question数组 | ||
| export interface QueryQuestions { | ||
| QueryQuestions(): Question[]; | ||
| } | ||
| // 题目任务点 | ||
| export abstract class Topic { | ||
| public abstract Init(): Promise<any>; | ||
| public abstract Submit(): Promise<any>; | ||
| } | ||
| ``` | ||
| #### 使用 | ||
| ```ts | ||
| let topic = new ExamTopic(context, new ToolsQuestionBankFacade("cx", taskinfo)); | ||
|
|
||
| ``` |
Oops, something went wrong.