/*
代码块注释
*/
// 模块导入
import {myMethod} from './method.js';
// 正则表达式
const code = /\d{3,6}/g;
// 直接量
const isMatch = false;
// 字符串
const username = 'Li lei';
const template = `字符串模板
你好, ${some}
欢迎使用本组件`;
// 数组
const randNumber = [13, 7, 11, 3, 9, 15.4, 17];
// 对象
const person = {
name:'Tony',
age:18,
doWork:function(){
},
doThing(){
}
};
// 类
class Animal {
constructor(name, url) {
super();
this.name = name;
this.url = url;
}
}
// 方法调用
console.log(person.name);
/**
* Represents person.
* @constructor
* @param {string} title - The title of the person.
* @param {string} author - The author of the person.
*/
class Person {
public name: string;
private age: number;
protected gender: string;
constructor(name: string, age: number, gender: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
sayHello(): void {
console.log(`hello, my name is ${this.name}, I'm ${this.age} years old`);
}
}
type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> };
class Student extends Person {
grade: number;
constructor(name: string, age: number, gender: string, grade: number) {
super(name, age, gender);
this.grade = grade;
}
study(): void {
console.log(`I'm studying in grade ${this.grade}`);
}
showGender(): void {
console.log(`My gender is ${this.gender}`); // 可以访问父类的protected属性
}
}
const person = new Person('Tom', 20, 'male');
console.log(person.name); // 可以访问public属性
console.log(person.age); // 报错，不能访问private属性
const student = new Student('Jerry', 18, 'male', 1);
console.log(student.gender); // 报错，不能访问protected属性
student.showGender(); // 可以访问protected属性
/*
代码块注释
*/
body{
--side-background-color: #fff;
--side-border-color: #f0f0f0;
}
.mod-panel .bd{
flex: 1;
overflow-y: auto;
}
.mod-panel .outer{
position: relative;
padding: 5px 10px 5px 60px;
counter-reset: lineNumber;
}
.mod-panel .outer::before{
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 100%;
background-color: var(--side-background-color);
border-right: 2px solid var(--side-border-color);
content: '';
}
@keyframes move {
50% {
left: 50%;
right: 49.95%;
}
100% {
left: 90%;
right: 9.7%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>测试网页</title>
<style>
body{
font-size: 15px;
}
</style>
<script>
let person = {
name:'Tom',
age:12
};
const template = `字符串模板
你好, ${some}
欢迎使用本组件`;
</script>
</head>
<body>
<article name="test">
<h1>文章标题</h1>
<section>
<p>这段文字是文章段落内容</p>
</section>
</article>
<!--这是一段注释。注释不会在浏览器中显示。-->
</body>
</html>
<div name="test">
<h1>文章标题</h1>
</div>
<!--这是一段注释。注释不会在浏览器中显示。-->
<?php
/*
PHP代码演示
*/
$name = "李雷";
$age = 30;
echo "你好{$name}，欢迎使用本组件";
echo number_format($age);
// 冒泡排序
function bubbleSort($arr) {
$len = count($arr);
// 这里比较N次
for($i = 0; $i< $len - 1; $i++) {
// 每次比较实际上都要-$i，因为每次比较结束后最后一个值就不用参与下次比较了
for($n = 0; $n < $len - 1 - $i; $n ++) {
if($arr[$n] > $arr[$n + 1]) {
$t = $arr[$n];
$arr[$n] = $arr[$n + 1];
$arr[$n + 1] = $t;
}
}
}
return $arr;
}
// 这个是计算毫秒耗时的方法
function execTime($microTime = 0) {
$microTime && var_dump(microtime(true)*1000 - $microTime);
return microtime(true)*1000;
}
bubbleSort($arr);
$time = execTime(100);
?>