- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章采用React编写小程序的Remax框架的编译流程解析(推荐)由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
Remax是蚂蚁开源的一个用React来开发小程序的框架,采用运行时无语法限制的方案。整体研究下来主要分为三大部分:运行时原理、模板渲染原理、编译流程;看了下现有大部分文章主要集中在Reamx的运行时和模板渲染原理上,而对整个React代码编译为小程序的流程介绍目前还没有看到,本文即是来补充这个空白。 关于模板渲染原理看这篇文章:http://www.zzvips.com/article/229724.html 关于remax运行时原理看这篇文章:http://www.zzvips.com/article/229723.html 关于React自定义渲染器看这篇文章:http://www.zzvips.com/article/229725.html 。
1、remax-runtime 运行时,提供自定义渲染器、宿主组件的包装、以及由React组件到小程序的App、Page、Component的配置生成器 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 自定义渲染器
export {
default
as render } from
'./render'
;
// 由app.js到小程序App构造器的配置处理
export {
default
as createAppConfig } from
'./createAppConfig'
;
// 由React到小程序Page页面构造器的一系列适配处理
export {
default
as createPageConfig } from
'./createPageConfig'
;
// 由React组件到小程序自定义组件Component构造器的一系列适配处理
export {
default
as createComponentConfig } from
'./createComponentConfig'
;
//
export {
default
as createNativeComponent } from
'./createNativeComponent'
;
// 生成宿主组件,比如小程序原生提供的View、Button、Canvas等
export {
default
as createHostComponent } from
'./createHostComponent'
;
export { createPortal } from
'./ReactPortal'
;
export { RuntimeOptions, PluginDriver } from
'@remax/framework-shared'
;
export * from
'./hooks'
;
import { ReactReconcilerInst } from
'./render'
;
export const unstable_batchedUpdates = ReactReconcilerInst.batchedUpdates;
export
default
{
unstable_batchedUpdates,
};
|
2、remax-wechat 小程序相关适配器 template模板相关,与模板相关的处理原则及原理可以看这个http://www.zzvips.com/article/145552.htm templates // 与渲染相关的模板 src/api 适配与微信小程序相关的各种全局api,有的进行了promisify化 。
1
2
3
4
5
6
7
8
9
|
import { promisify } from
'@remax/framework-shared'
;
declare const wx: WechatMiniprogram.Wx;
export const canIUse = wx.canIUse;
export const base64ToArrayBuffer = wx.base64ToArrayBuffer;
export const arrayBufferToBase64 = wx.arrayBufferToBase64;
export const getSystemInfoSync = wx.getSystemInfoSync;
export const getSystemInfo = promisify(wx.getSystemInfo);
|
src/types/config.ts 与小程序的Page、App相关配置内容的适配处理 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/** 页面配置文件 */
// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
export interface PageConfig {
/**
* 默认值:#000000
* 导航栏背景颜色,如 #000000
*/
navigationBarBackgroundColor?: string;
/**
* 默认值:white
* 导航栏标题颜色,仅支持 black / white
*/
navigationBarTextStyle?:
'black'
|
'white'
;
/** 全局配置文件 */
// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
export interface AppConfig {
/**
* 页面路径列表
*/
pages: string[];
/**
* 全局的默认窗口表现
*/
window?: {
/**
* 默认值:#000000
* 导航栏背景颜色,如 #000000
*/
navigationBarBackgroundColor?: string;
/**
* 默认值: white
* 导航栏标题颜色,仅支持 black / white
*/
navigationBarTextStyle?:
'white'
|
'black'
;
|
src/types/component.ts 微信内置组件相关的公共属性、事件等属性适配 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
import * as React from
'react'
;
/** 微信内置组件公共属性 */
// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
export interface BaseProps {
/** 自定义属性: 组件上触发的事件时,会发送给事件处理函数 */
readonly dataset?: DOMStringMap;
/** 组件的唯一标示: 保持整个页面唯一 */
id?: string;
/** 组件的样式类: 在对应的 WXSS 中定义的样式类 */
className?: string;
/** 组件的内联样式: 可以动态设置的内联样式 */
style?: React.CSSProperties;
/** 组件是否显示: 所有组件默认显示 */
hidden?: boolean;
/** 动画对象: 由`wx.createAnimation`创建 */
animation?: Array<Record<string, any>>;
// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
/** 点击时触发 */
onTap?: (event: TouchEvent) => void;
/** 点击时触发 */
onClick?: (event: TouchEvent) => void;
/** 手指触摸动作开始 */
onTouchStart?: (event: TouchEvent) => void;
|
src/hostComponents 针对微信小程序宿主组件的包装和适配;node.ts是将小程序相关属性适配到React的规范 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
export const alias = {
id:
'id'
,
className:
'class'
,
style:
'style'
,
animation:
'animation'
,
src:
'src'
,
loop:
'loop'
,
controls:
'controls'
,
poster:
'poster'
,
name:
'name'
,
author:
'author'
,
onError:
'binderror'
,
onPlay:
'bindplay'
,
onPause:
'bindpause'
,
onTimeUpdate:
'bindtimeupdate'
,
onEnded:
'bindended'
,
};
export const props = Object.values(alias);
|
各种组件也是利用createHostComponent生成 。
1
2
3
4
5
|
import * as React from
'react'
;
import { createHostComponent } from
'@remax/runtime'
;
// 微信已不再维护
export const Audio: React.ComponentType = createHostComponent(
'audio'
);
|
createHostComponent生成React的Element 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import * as React from
'react'
;
import { RuntimeOptions } from
'@remax/framework-shared'
;
export
default
function
createHostComponent<P = any>(name: string, component?: React.ComponentType<P>) {
if
(component) {
return
component;
}
const Component = React.forwardRef((props, ref: React.Ref<any>) => {
const { children = [] } = props;
let element = React.createElement(name, { ...props, ref }, children);
element = RuntimeOptions.get(
'pluginDriver'
).onCreateHostComponentElement(element) as React.DOMElement<any, any>;
return
element;
});
return
RuntimeOptions.get(
'pluginDriver'
).onCreateHostComponent(Component);
}
|
3、remax-macro 按照官方描述是基于babel-plugin-macros的宏;所谓宏是在编译时进行字符串的静态替换,而Javascript没有编译过程,babel实现宏的方式是在将代码编译为ast树之后,对ast语法树进行操作来替换原本的代码。详细文章可以看这里https://zhuanlan.zhihu.com/p/64346538; remax这里是利用macro来进行一些宏的替换,比如useAppEvent和usePageEvent等,替换为从remax/runtime中进行引入 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import { createMacro } from
'babel-plugin-macros'
;
import createHostComponentMacro from
'./createHostComponent'
;
import requirePluginComponentMacro from
'./requirePluginComponent'
;
import requirePluginMacro from
'./requirePlugin'
;
import usePageEventMacro from
'./usePageEvent'
;
import useAppEventMacro from
'./useAppEvent'
;
function
remax({ references, state }: { references: { [name: string]: NodePath[] }; state: any }) {
references.createHostComponent?.forEach(path => createHostComponentMacro(path, state));
references.requirePluginComponent?.forEach(path => requirePluginComponentMacro(path, state));
references.requirePlugin?.forEach(path => requirePluginMacro(path));
const importer = slash(state.file.opts.filename);
Store.appEvents.
delete
(importer);
Store.pageEvents.
delete
(importer);
references.useAppEvent?.forEach(path => useAppEventMacro(path, state));
references.usePageEvent?.forEach(path => usePageEventMacro(path, state));
}
export declare
function
createHostComponent<P = any>(
name: string,
props: Array<string | [string, string]>
): React.ComponentType<P>;
export declare
function
requirePluginComponent<P = any>(pluginName: string): React.ComponentType<P>;
export declare
function
requirePlugin<P = any>(pluginName: string): P;
export declare
function
usePageEvent(eventName: PageEventName, callback: (...params: any[]) => any): void;
export declare
function
useAppEvent(eventName: AppEventName, callback: (...params: any[]) => any): void;
export
default
createMacro(remax);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import * as t from
'@babel/types'
;
import { slash } from
'@remax/shared'
;
import { NodePath } from
'@babel/traverse'
;
import Store from
'@remax/build-store'
;
import insertImportDeclaration from
'./utils/insertImportDeclaration'
;
const PACKAGE_NAME =
'@remax/runtime'
;
const FUNCTION_NAME =
'useAppEvent'
;
function
getArguments(callExpression: NodePath<t.CallExpression>, importer: string) {
const args = callExpression.node.arguments;
const eventName = args[0] as t.StringLiteral;
const callback = args[1];
Store.appEvents.set(importer, Store.appEvents.get(importer)?.add(eventName.value) ??
new
Set([eventName.value]));
return
[eventName, callback];
}
export
default
function
useAppEvent(path: NodePath, state: any) {
const program = state.file.path;
const importer = slash(state.file.opts.filename);
const functionName = insertImportDeclaration(program, FUNCTION_NAME, PACKAGE_NAME);
const callExpression = path.findParent(p => t.isCallExpression(p)) as NodePath<t.CallExpression>;
const [eventName, callback] = getArguments(callExpression, importer);
callExpression.replaceWith(t.callExpression(t.identifier(functionName), [eventName, callback]));
}
|
个人感觉这个设计有些过于复杂,可能跟remax的设计有关,在remax/runtime中,useAppEvent实际从remax-framework-shared中导出; 不过也倒是让我学到了一种对代码修改的处理方式.
4、remax-cli remax的脚手架,整个remax工程,生成到小程序的编译流程也是在这里处理。 先来看一下一个作为Page的React文件是如何与小程序的原生Page构造器关联起来的。 假设原先页面代码是这个样子, 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import * as React from
'react'
;
import { View, Text, Image } from
'remax/wechat'
;
import styles from
'./index.css'
;
export
default
() => {
return
(
<View className={styles.app}>
<View className={styles.header}>
<Image
src=
"https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ"
className={styles.logo}
alt=
"logo"
/>
<View className={styles.text}>
编辑 <Text className={styles.path}>src/pages/index/index.js</Text>开始
</View>
</View>
</View>
);
};
|
这部分处理在remax-cli/src/build/entries/PageEntries.ts代码中,可以看到这里是对源码进行了修改,引入了runtime中的createPageConfig函数来对齐React组件与小程序原生Page需要的属性,同时调用原生的Page构造器来实例化页面.
1
2
3
4
5
6
7
8
9
10
11
12
|
import * as path from
'path'
;
import VirtualEntry from
'./VirtualEntry'
;
export
default
class PageEntry extends VirtualEntry {
outputSource() {
return
`
import { createPageConfig } from
'@remax/runtime'
;
import Entry from
'./${path.basename(this.filename)}'
;
Page(createPageConfig(Entry,
'${this.name}'
));
`;
}
}
|
createPageConfig来负责将React组件挂载到remax自定义的渲染容器中,同时对小程序Page的各个生命周期与remax提供的各种hook进行关联 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
export
default
function
createPageConfig(Page: React.ComponentType<any>, name: string) {
const app = getApp() as any;
const config: any = {
data: {
root: {
children: [],
},
modalRoot: {
children: [],
},
},
wrapperRef: React.createRef<any>(),
lifecycleCallback: {},
onLoad(
this
: any, query: any) {
const PageWrapper = createPageWrapper(Page, name);
this
.pageId = generatePageId();
this
.lifecycleCallback = {};
this
.data = {
// Page中定义的data实际是remax在内存中生成的一颗镜像树
root: {
children: [],
},
modalRoot: {
children: [],
},
};
this
.query = query;
// 生成自定义渲染器需要定义的容器
this
.container =
new
Container(
this
,
'root'
);
this
.modalContainer =
new
Container(
this
,
'modalRoot'
);
// 这里生成页面级别的React组件
const pageElement = React.createElement(PageWrapper, {
page:
this
,
query,
modalContainer:
this
.modalContainer,
ref:
this
.wrapperRef,
});
if
(app && app._mount) {
this
.element = createPortal(pageElement,
this
.container,
this
.pageId);
app._mount(
this
);
}
else
{
// 调用自定义渲染器进行渲染
this
.element = render(pageElement,
this
.container);
}
// 调用生命周期中的钩子函数
return
this
.callLifecycle(Lifecycle.load, query);
},
onUnload(
this
: any) {
this
.callLifecycle(Lifecycle.unload);
this
.unloaded =
true
;
this
.container.clearUpdate();
app._unmount(
this
);
},
|
Container是按照React自定义渲染规范定义的根容器,最终是在applyUpdate方法中调用小程序原生的setData方法来更新渲染视图 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
applyUpdate() {
if
(
this
.stopUpdate ||
this
.updateQueue.length === 0) {
return
;
}
const startTime =
new
Date().getTime();
if
(
typeof
this
.context.$spliceData ===
'function'
) {
let $batchedUpdates = (callback: () => void) => {
callback();
};
if
(
typeof
this
.context.$batchedUpdates ===
'function'
) {
$batchedUpdates =
this
.context.$batchedUpdates;
}
$batchedUpdates(() => {
this
.updateQueue.map((update, index) => {
let callback = undefined;
if
(index + 1 ===
this
.updateQueue.length) {
callback = () => {
nativeEffector.run();
/* istanbul ignore next */
if
(RuntimeOptions.get(
'debug'
)) {
console.log(`setData => 回调时间:${
new
Date().getTime() - startTime}ms`);
}
};
}
if
(update.type ===
'splice'
) {
this
.context.$spliceData(
{
[
this
.normalizeUpdatePath([...update.path,
'children'
])]: [
update.start,
update.deleteCount,
...update.items,
],
},
callback
);
}
if
(update.type ===
'set'
) {
this
.context.setData(
{
[
this
.normalizeUpdatePath([...update.path, update.name])]: update.value,
},
callback
);
}
});
});
this
.updateQueue = [];
return
;
}
const updatePayload =
this
.updateQueue.reduce<{ [key: string]: any }>((acc, update) => {
if
(update.node.isDeleted()) {
return
acc;
}
if
(update.type ===
'splice'
) {
acc[
this
.normalizeUpdatePath([...update.path,
'nodes'
, update.id.toString()])] = update.items[0] ||
null
;
if
(update.children) {
acc[
this
.normalizeUpdatePath([...update.path,
'children'
])] = (update.children || []).map(c => c.id);
}
}
else
{
acc[
this
.normalizeUpdatePath([...update.path, update.name])] = update.value;
}
return
acc;
}, {});
// 更新渲染视图
this
.context.setData(updatePayload, () => {
nativeEffector.run();
/* istanbul ignore next */
if
(RuntimeOptions.get(
'debug'
)) {
console.log(`setData => 回调时间:${
new
Date().getTime() - startTime}ms`, updatePayload);
}
});
this
.updateQueue = [];
}
|
而对于容器的更新是在render文件中的render方法进行的, 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function
getPublicRootInstance(container: ReactReconciler.FiberRoot) {
const containerFiber = container.current;
if
(!containerFiber.child) {
return
null
;
}
return
containerFiber.child.stateNode;
}
export
default
function
render(rootElement: React.ReactElement |
null
, container: Container | AppContainer) {
// Create a root Container if it doesnt exist
if
(!container._rootContainer) {
container._rootContainer = ReactReconcilerInst.createContainer(container,
false
,
false
);
}
ReactReconcilerInst.updateContainer(rootElement, container._rootContainer,
null
, () => {
// ignore
});
return
getPublicRootInstance(container._rootContainer);
}
|
另外这里渲染的组件,其实也是经过了createPageWrapper包装了一层,主要是为了处理一些forward-ref相关操作。 现在已经把页面级别的React组件与小程序原生Page关联起来了。 对于Component的处理与这个类似,可以看remax-cli/src/build/entries/ComponentEntry.ts文件 。
1
2
3
4
5
6
7
8
9
10
11
12
|
import * as path from
'path'
;
import VirtualEntry from
'./VirtualEntry'
;
export
default
class ComponentEntry extends VirtualEntry {
outputSource() {
return
`
import { createComponentConfig } from
'@remax/runtime'
;
import Entry from
'./${path.basename(this.filename)}'
;
Component(createComponentConfig(Entry));
`;
}
}
|
那么对于普通的组件,remax会把他们编译称为自定义组件,小程序的自定义组件是由json wxml wxss js组成,由React组件到这些文件的处理过程在remax-cli/src/build/webpack/plugins/ComponentAsset中处理,生成wxml、wxss和js文件 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
export
default
class ComponentAssetPlugin {
builder: Builder;
cache: SourceCache =
new
SourceCache();
constructor(builder: Builder) {
this
.builder = builder;
}
apply(compiler: Compiler) {
compiler.hooks.emit.tapAsync(PLUGIN_NAME, async (compilation, callback) => {
const { options, api } =
this
.builder;
const meta = api.getMeta();
const { entries } =
this
.builder.entryCollection;
await Promise.all(
Array.from(entries.values()).map(async component => {
if
(!(component
instanceof
ComponentEntry)) {
return
Promise.resolve();
}
const chunk = compilation.chunks.find(c => {
return
c.name === component.name;
});
const modules = [...getModules(chunk), component.filename];
let templatePromise;
if
(options.turboRenders) {
// turbo page
templatePromise = createTurboTemplate(
this
.builder.api, options, component, modules, meta, compilation);
}
else
{
templatePromise = createTemplate(component, options, meta, compilation,
this
.cache);
}
await Promise.all([
await templatePromise,
await createManifest(
this
.builder, component, compilation,
this
.cache),
]);
})
);
callback();
});
}
}
|
而Page的一系列文件在remax-cli/src/build/webpack/plugins/PageAsset中进行处理,同时在createMainifest中会分析Page与自定义组件之间的依赖关系,自动生成usingComponents的关联关系.
到此这篇关于采用React编写小程序的Remax框架的编译流程解析(推荐)的文章就介绍到这了,更多相关React编写小程序内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。
原文链接:https://www.cnblogs.com/dojo-lzz/archive/2021/04/21/14686861.html 。
最后此篇关于采用React编写小程序的Remax框架的编译流程解析(推荐)的文章就讲到这里了,如果你想了解更多关于采用React编写小程序的Remax框架的编译流程解析(推荐)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目? 在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易,但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything),但是 gcc 会发出错误。 #include #include #include using namespace
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库,其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时,我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET,但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
我正在(重新)学习编程,我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。 这个例子: #include #include #in
我有一个项目,必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法,以便 src/main/java 使用 jdk 1.4 编译,但
我想了解 PHP 编译过程是如何工作的。 假设我有一个名为funcs.php 的文件并且这个文件有三个函数,如果我include 或require 它,所有的在文件加载期间编译三个函数?或者源代码会被
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment),集成开发环境可以极大地方便我们程序员编写程序,但是配置起来
当我编写一些 Scala 代码时,在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义,但仍然显示了错误)。 scala> :paste // Ent
我正在编译一个 SCSS 文件,它似乎删除了我的评论。我可以使用什么命令来保留所有评论? >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
当您编译 grails war 时,我知道 .groovy 代码被编译为字节码类文件,但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗?安装在服务器上的
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么?谢谢! 文件:calcPi.c
我尝试使用 LD_PRELOAD 来 Hook sprintf function ,所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。 阅读documentation但仍然很难得到我想要的东西。 我需要它来监视文件夹 src/ 中的任何 *.coffee 文
我想使用定制waveformjs 。我发现this on SO但是,我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改,但是我不知道如何将其转换为 .js 文件。 最佳答案 为了
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我是一名优秀的程序员,十分优秀!