这周用 jquery 写了个 geneTable 方法，只要传入表头和表内容数据，自动生动 table 的 html 代码；之后接触 React，用 React 写了个 Table 组件，也是实现同样的功能。
用react写的一个表格 代码如下
一、Jquery 写 geneTable 方法
1. 数据类型
之前了解过数据类型有五种基本的数据类型和一种复杂的数据类型。
1）基本数据类型
- string 字符串 用‘’包裹
- number 数字
- undefined 未定义
- null 空
- boolean 布尔
2） 复杂数据类型
- 数组 Array，写方括弧 [ ] 里，如：
var arr = [ 1, 'aa', true ]，获取数组第一个值arr[0]，获取数组里面第三个值arr[2]； - 对象字面量 ，写在花括弧 { } 里，键值对的形式 （键值对 key: value，多个键值对 key: value, key2: value2, key3: value3），如：
var obj = { name: 'bob', age: 23 }，获取 name 的值：obj.name。
var thead = [ '姓名', '年龄', '性别' ]; // 数组
var tbody = [
{ name:'bob', age:23, sex:'male' },
{ name:'bob', age:23, sex:'male' },
{ name:'bob', age:23, sex:'male' },
]
- Date 日期
new Date().toLocaleTimeString() 打印当地时间格式
2. for 循环
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
for 循环是对数组进行循环，能够获取数组中的每一项。
3. 多行字符串
` 符号是 tab 键上面那个键，有两个用途：
- 可以换行写字符串；
- 可以直接在字符串里打印变量的值
`<tr>
<td>${tbody[i].name}</td>
<td>${tbody[i].age}</td>
<td>${tbody[i].sex}</td>
</tr>`
4. jquery 写 geneTable 方法，自动生成表格
（写了八遍，第八遍才没有报错，一口气写出来了）
append();的方法 ，是 jquery 提供的方法，用于将一段 html 代码追加到已知 dom 节点对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery 写 table 组件</title>
</head>
<body>
<div class="container"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
function geneTable(thead, tbody) {
var $table = $(' <table class= "table table-bordered"></table>');
var $thead = $('<thead></thead>');
var $tr = $('<tr></tr>');
for (var i = 0; i < thead.length; i++) {
var $th = $(`<th>${thead[i]}</th>`);
$tr.append($th);
}
$thead.append($tr);
var $tbody = $('<tbody></tbody>');
for (var i = 0; i < thead.length; i++) {
var $tr2 = $(`<tr>
<td>${tbody[i].name}</td>
<td>${tbody[i].age}</td>
<td>${tbody[i].sex}</td>
</tr>`);
$tbody.append($tr2);
}
$table.append($thead);
$table.append($tbody);
$('.container').append($table);
}
var thead = ['姓名', '年龄', '性别']
var tbody = [
{ name: 'bob', age: 23, sex: 'male' },
{ name: 'bob', age: 23, sex: 'male' },
{ name: 'bob', age: 23, sex: 'male' },
]
geneTable(thead, tbody);
</script>
</body>
</html>
二、React
react 是一个 js 库，react 核心思想是所有东西都用 js 写，html 在 js 里面写，css 在 js 里面写。
1. 导入 react.js 文件
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>这个文件主要 ES6 语法转译成 ES5 。
2. ReactDom 和 render
ReactDOM 是这个 react-dom.min.js 文件提供的对象；
ReactDOM.render() 将我们自己写的节点对象添加到 body 里面去。
<div id="example"> </div>
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
- 第一个参数是元素，就是我们自己定义的 节点对象 (这里就是
<h1>Hello, world!</h1>) - 第二个参数 js 选择器选中的 html 标签（这里就是
document.getElementById('example')）
3. elements 和 components
elements 元素：在 js 里写的 html 标签都叫做元素，包含 html 原生标签和我们自定义的标签。
components 组件：可以在 js 中自定义 html 标签，组件返回的一定是元素。
<div id="example"> </div>
<script type="text/babel">
function Table (params) {
return (
<table >
</table>
)
}
ReactDOM.render( <Table></Table>, document.getElementById( 'example' ));
</script>
这就是我们自己定义一个 Table 组件，定义 Table 组件时一定返回元素 <table></table>，调用组件写法和原生 html 元素一样，写在尖括号里：<Table></Table>。
4.JSX
JSX = js + html 在 js 里写 html 代码 ，像上面的<h1>Hello, world!</h1> 、<table > </table> 都是JSX。
JSX 里写 js 都放在花括弧里 { }；
// jsx 里写变量
<h1>hello { name }</h1>
// jsx 里调用方法
<h1>hello { formatName(name) }</h1>
// jsx 里循环数组
<tr>
{
thead.map(item => {
return (<th>${item}</th>)
})
}
</tr>
5. 数组的 map() 方法
var arr = [ 1, 2, 3 ];
arr.map(item => {
return item * item;
})
// [ 1, 4, 9 ]
map 方法是 es6 的方法，参数是一个函数，函数的参数是数组里的每一项，函数最终返回值会替换数组中的该项。
6. 使用 React 写的 Table 组件
（练习了 6 遍，才算把上面的概念都搞清楚，搞明白）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>React</title>
</head>
<body>
<div class="container" id="root"></div>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script type="text/babel">
function Table (params) {
return (
<table className="table table-bordered">
<thead>
<tr>
{params.thead.map(
item=>{
return (
<th>{item}</th>
)
}
)}
</tr>
</thead>
<tbody>
{
params.tbody.map(item=>{
return(
<tr>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.sex}</td>
</tr>
)
})
}
</tbody>
</table>
)
}
var thead = ['姓名', '年龄', '性别']
var tbody = [
{ name:'bob', age:23, sex:'male'},
{ name:'bob', age:23, sex:'male'},
{ name:'bob', age:23, sex:'male'},
]
ReactDOM.render( <Table thead={thead} tbody= {tbody}></Table>, document.getElementById( 'root' ));
</script>
</body>
</html>
网友评论