Kyanos-WebGO

HTML 5

		<!DOCTYPE HTML>
		<html>
		<head>
			<title>Kyanos</title>
		</head>
		<body>
                    express 1000%,
                    nest 100%,
                    egg 100%,
                    Spring 60%(@ not support)
                    Vue 90%(Vue3.2 not support)
                    Nuxt 90%(Nuxt3 not support)
                    React loading...,
                    King of NodeJs @XuYa
		</body>
		</html>

CSS 3


		:root {
			--my-var: 24, 144, 255;
		}

		.custom-bg-1 {
			background-color: rgba(var(--my-var), 0.5);
		}

		.custom-bg-2 {
			background-color: rgba(var(--my-var), 0.7);
		}

JavaScript

		 let n = 123;
		 n = 12.345;

		 
				ol.before('before');
				ol.after('after');

				let liFirst = document.createElement('li');
				liFirst.innerHTML = 'prepend';
				ol.prepend(liFirst);

				let liLast = document.createElement('li');
				liLast.innerHTML = 'append';
				ol.append(liLast);

JQuery


		<input type="text" value="" size="10" id="zzz" />
		<script>
			$("#zzz").off('blur').on('blur', function(){
				format_input_num(this);
			});
		</script>

Webpack

					
		const path = require('path');

		module.exports = {
			entry: './src/index.js',
		    	output: {
		    	        path: path.resolve(__dirname, 'dist'),
				filename: 'bundle.js'
			}
		};

Vue


		<template><div>{{ readersNumber }} {{ book.title }}</div></template>
		<script>
					import { ref, reactive } from 'vue'

					export default {
						setup() {
							const readersNumber = ref(0)
							const book = reactive({ title: 'Vue 3 Guide' })

							// expose to template
							return {
								readersNumber,
								book
							}
						}
					}
				</script>

React


					import React, { useState } from 'react';

					function Example() {
					  // 声明一个新的叫做count的 state(存储) 变量
					  const [count, setCount] = useState(0);
						return (
							<div>
					      <p>You clicked {count} times</p>
					      <button onClick={() => setCount(count + 1)}>
					        Click me
					      </button>
					    </div>
						);
					}

Angular

		import { Component } from '@angular/core';

				@Component({
					selector: 'app-root',
					template: `
						<h1>{{title}}</h1>
						<h2>My favorite hero is: {{myHero}}</h2>
						`
				})
				export class AppComponent {
					title = 'Tour of Heroes';
					myHero = 'Windstorm';
				}

NodeJs


		const http2 = require('http2');
		const fs = require('fs');

		const server = http2.createSecureServer({
			key: fs.readFileSync('localhost-privkey.pem'),
			cert: fs.readFileSync('localhost-cert.pem')
		});
		server.on('error', (err) => console.error(err));

		server.on('stream', (stream, headers) => {
			// stream is a Duplex
			stream.respond({
				'content-type': 'text/html; charset=utf-8',
				':status': 200
			});
			stream.end('<h1>Hello World</h1>');
		});

		server.listen(8443);

Sass


	$fontStack: Helvetica, sans-serif;
	$primaryColor: #333;

	body {
		font-family: $fontStack;
		color: $primaryColor;
	}