第4节:ReactNative必备的语言基础知识

[TOC]

ReactNative必备的语言基础知识

参考文章:

ReactNative的语法基础要求JS,JSX,ES6.其中ES6是这三种语法的核心。系统学习ES6的语法是ReactNative编程的基本要求。

下面记录ES6的典型语法的示例,以方便编程中的随时查用。

一、关键字

参考文章:极客学院 ECMAScript 6 let 和 const 命令

关键字 用途 作用域
const 声明常量,不可修改
var 声明变量
let 声明变量 let 声明的变量只在它所在的代码块有效 for 循环的计数器,就很合适使用 let 命令。

二、变量的解构赋值

参考文章:

对变量复制时,当等号左边定义的变量和等号右边的赋值形式一致时,能够对变量自动赋值;

1
2
3
4
5
6
7
8
let {a, b} = {a:"x", b:"y"};
//a = x, b = y;

let [a, b] = [0, 1, 2, 3];
//a=0, b = 1;

let [a, ...b] = [0, 1, 2, 3];
//a=0, b = [1,2,3];

常见于:

  • style的解构赋值

三、Generator函数

参考文章:极客学院 ECMAScript 6 Generator 函数

通过在函数名前添加 * 和在方法中添加 yield 关键字来定义,控制函数的顺序执行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 设有如下函数
function *genFun() {
yield 'Lily';
yield 'Json';
return 'Niu';
}


// 则以下第一种调用的写法及结果如下:
let gen = genFun();
genFun().next();//{value: 'Lily', done: false}
genFun().next();//{value: 'Json', done: false}
genFun().next();//{value: 'Niu', done: true}

// 则以下第二种调用的写法及结果如下:
for (i of gen) { //使用for of 语句来遍历
console.log(i);
}
//return后的元素,不会被遍历到
Lily
Json

四、Promise对象

参考文章:极客学院 ECMAScript 6 Promise 对象

通过定义Promise和关键字then的结合,可以方便实现函数的成功回调和失败回调。

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
1)定义
var prom = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('download success')
resolve('success');
}, 1000);
});

prom.then((flag) => {
console.log('success block:' + flag);
}, (error) => {
console.log('failure block:' + error);
})

(2)async关键字和Promise实例相结合,实现多个异步线程的顺序执行;
async function foo() {
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 5000);
});

console.log('await function completed');
}
foo();
//打印消息会在5s后resolve回调执行后,才执行;

UI2Code

[TOC]

背景

设计稿转代码

参考文档:如何将设计稿转成高度可维护的代码?

https://www.figma.com/community/plugin/1329812760871373657/codia-ai-design-screenshot-to-editable-figma-design

一、UI2Code 工具汇总

对于设计稿转代码的需求,在线产品设计工具 Pixso 提供了 以下3款设计插件:

插件 官网 代码水平 前端 App Flutter 备注
1 Pixso to code https://pixso.cn/app 初级 Tailwind、HTML SwiftUI flutter 当前页直接可用
2 Code.fun https://code.fun/ 中级 H5、小程序等 需转网站
3 coDesign https://codesign.qq.com/ 初? H5、? Code.fun翻版

与以往传统的从设计软件中导出 HTML 不同,CodeFun 插件不仅可以智能分析页面布局,生成非绝对高宽的 Flexbox 代码,而且还可以识别循环列表、九宫格、等比例分配等多种业务场景。

CodeFun 生成的代码简短可读,语义化程度高,基本上可以达到中级工程师的水准,实测研发效率至少提升 500%。

image-20240317205429507

image-20240317215437611

二、UI2Code 代码提取

1、Pixso to code

image-20240317214414634

2、Code.fun

1、在Pixso上无法直接使用 Code.fun 将本应用中的设计稿转成代码。所以需要先将其上传到对应网站中

image-20240317212302534

2、上传后,你将需要到所上传的指定位置查看设计稿及转码。进入指定页面的代码查看方法如下:

image-20240317213146616

3、coDesign

详见:codesign官网:智能生成页面代码

三、UI2Code 代码提取的验证

提取的代码可在下述在线网站中进行验证。

详见:OnlineCoding在线编码

End

WebStorm

[TOC]

本章介绍

一、注册码/破解

注册码获取:

进入http://idea.lanyus.com进行获取。

二、代码格式化

三、WebStorm好用的工具

1、WebStorm文档注释技巧

  • 1、Webstorm设置 -> Live Template -> JavaScript -> 右上角“+

文档注释技巧

  • 2、文档注释技巧2_模板的编辑
1
2
3
4
5
6
7
8
9
10
11
/**
* $FileName$
*
* @Description: $FileDesc$
*
* @author ciyouzen
* @email dvlproad@163.com
* @date $date$ $time$
*
* Copyright (c) dvlproad. All rights reserved.
*/

文档注释技巧2_模板的编辑

①、设置模板内容中的变量定义

文档注释技巧2_模板的编辑2_Edit Variables

②、勾选你选将该模板应用到的编程语言/地方

勾选你选将该模板应用到的编程语言/地方

四、WebStorm快捷键

五、更多好用WebStorm插件推荐

WebStorm

[TOC]

一、注册码/破解

二、代码格式化

image-20220318221847396

image-20220317154211932

三、VSCode好用的工具

1、koroFileHeader(vscode文件头部注释插件)

1、安装

image-20220413163004512

2、配置

image-20220413160825547

初始值为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"diffEditor.ignoreTrimWhitespace": true,
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"workbench.colorTheme": "Visual Studio Dark",
"eslint.alwaysShowStatus": true,
"dart.debugExternalLibraries": false,
"dart.debugSdkLibraries": false,
"dart.debugExternalPackageLibraries": false,
"dart.flutterSdkPath": "/Applications/flutter",
"editor.formatOnSave": true
}

在json后面加上以下内容:

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
// "editor.fontSize": 20,
// "files.autoSave": "onFocusChange",
// "editor.formatOnPaste": true,
// "workbench.colorTheme": "Solarized Light",
// "[vue]": {
// "editor.defaultFormatter": "octref.vetur"
// },
// "[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"fileheader.customMade": {
"Author": "dvlproad",
"Date": "Do not edit",
"LastEditors": "填入自己的名字",
"LastEditTime": "Do not edit",
"Description": "",
"FilePath": "Do not edit",
},
"fileheader.cursorMode": {
"description": "",
"event": "",
"param": "",
"return": ""
},
"fileheader.configObj": {
"prohibitAutoAdd": [
"json",
"md",
], // 禁止.json .md文件,自动添加头部注释
},

3、如何使用

文件头部添加注释:

快捷键:ctrl+alt+i
功能:保存文件的时候,自动更新最后的编辑时间和编辑人
在光标处添加函数注释:

快捷键:ctrl+alt+t
功能在光标处自动生成一个注释模板
效果

1
2
3
4
5
6
7
8
/*
* @Author: dvlproad
* @Date: 2022-04-13 10:17:11
* @LastEditors: 填入自己的名字
* @LastEditTime: 2022-04-13 16:26:54
* @Description:
* @FilePath: /wish/Users/qian/Project/flutter_effect_kit/lib/src/hud/loading_util.dart
*/

2、GitLens(VsCode中好用的git源代码管理插件:每一行代码旁边都有日志)

四、VSCode快捷键

VSCode快捷键1_前进后退

VSCode快捷键1_前进后退

五、更多好用VSCODE 插件推荐(2023版)

OnlineCoding在线编码

[TOC]

一、在线编码网站

https://codepen.io/ 支持 js 、html、vue、flutter 等
https://jsfiddle.net/ 支持 js 、html
https://jsbin.com/ 支持 js 、html
https://babeljs.io/repl 支持 js 以及各种高级语法、带 console
https://codesandbox.io/ 支持 vue、angular、react、nest.js、svelte 等
https://stackblitz.com/ 支持 angular、react、ionic、svelte 等
https://dartpad.dev/
国内版:https://dartpad.cn/
支持flutter

二、Codepen.io

参考文章:

语言 模版 编辑器入口
Flutter https://codepen.io/topic/flutter/templates https://codepen.io/pen/editor/flutter
Vue https://codepen.io/topic/vue/templates https://codepen.io/pen/editor/vue