奇舞学院JS01—如何写好原生JS

最新推荐文章于 2024-04-04 03:22:29 发布

96QLY

最新推荐文章于 2024-04-04 03:22:29 发布

阅读量167

点赞数

分类专栏： web前端奇舞学院文章标签：前端奇舞学院 HTML CSS JS

web前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

奇舞学院

1 篇文章 0 订阅

订阅专栏

1、交通灯实例

<!DOCTYPE html>
<html>
<head>
	<title>js04-1</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="js04-1.css">
	<script type="text/javascript" src="js04-1.js"></script>
</head>
<body>
	<ul id="traffic" class="wait">
		<li><span></span></li>
		<li><span></span></li>
		<li><span></span></li>
	</ul>
</body>
</html>

#traffic > li{
	display: block;
}

#traffic span{
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: gray;
	margin: 5px;
	border-radius: 50%;
}

#traffic.stop li:nth-child(1) span{
	background-color: #a00;
}

#traffic.wait li:nth-child(2) span{
	background-color: #aa0;
}

#traffic.pass li:nth-child(3) span{
	background-color: #0a0;
}

 // example01
 // const traffic = document.getElementById('traffic');

 // (function reset() {
 // 	traffic.className = 'wait';

 // 	setTimeout(function(){
 // 		traffic.className = 'stop';
 // 		setTimeout(function(){
 // 			traffic.className = 'pass';
 // 			setTimeout(reset,2000);
 // 		},2000);
 // 	},2000);
 // })();

 // example02
//  const traffic = document.getElementById('traffic');

//  var stateList = ['wait' , 'stop' , 'pass'];

// var currentStateIndex = 0;

// setInterval(function(){
// 	var state = stateList[currentStateIndex];
// 	traffic.className = state;
// 	currentStateIndex = (currentStateIndex + 1) % stateList.length;
// },2000);


 // example03
// // 数据抽象，过程抽象（如开门、开窗、的“开”可抽化为open（））函数式编程
// const traffic = document.getElementById('traffic');

// function poll(...fnList){
// 	// 轮流/循环的调用传入的函数
// 	let stateIndex = 0;

// 	return function(...args){
// 		let fn = fnList[stateIndex++ % fnList.length];
// 		return fn.apply(this,args);
// 	}
// }

// function setState(state){
// 	traffic.className = state;
// }

// let trafficStatePoll = poll(setState.bind(null,'wait'),
// 							setState.bind(null,'stop'),
// 							setState.bind(null,'pass'));
// setInterval(trafficStatePoll,2000);


 // example05
const traffic = document.getElementById('traffic');

function wait(time){
	return new Promise(resolve => setTimeout(resolve, time));
}

function setState(state){
	traffic.className = state;
}

function reset(){
	Promise.resolve()
	.then(setState.bind(null,'wait'))
	.then(wait.bind(null,1000))
	.then(setState.bind(null,'stop'))
	.then(wait.bind(null,'2000'))
	.then(setState.bind(null,'pass'))
	.then(wait.bind(null,3000))
	.then(reset);
}

reset();

2、数据求和问题:检测一个程序员的代码效率意识，追求一个算法的最高效率

算法学习/刷题网站 leetcode

网址： https://leetcode-cn.com/problemset/all/

 // version01 复杂度o（N^2）双重循环
 // let list = [11, 4, 9, 3, -1, -3, 6, 7, 9, 13, 8];

 // function map(list) {
 // 	let ret = [], len = list.length;

 // 	for (var i = 0; i < len; i++) {
 // 		for (var j = i + 1; j < len; j++) {
 // 			if (list[i] + list[j] == 10) {
 // 				ret.push([list[i], list[j]]);
 // 			}
 // 		}
 // 	}
 // 	return ret;
 // }

 // console.log(JSON.stringify(map(list)));

 // verson02 时间复杂度为 o(n*logn)+o(n) 先排序再遍历
 let list = [11, 4, 9, 3, -1, -3, 6, 7, 9, 13, 8];

 function map(list){
 	let ret = [];
 	list = list.sort((a,b)=>a-b);

 	for (var i = 0; j = list.length - 1; i < j) {
 		let a = list[i], b = list[j];
 		if (a + b === 10) {
 			ret.push([a,b]);
 			i++;
 			j--;
 		}else if (a + b < 10) {
 			i++;
 		}else{
 			j--;
 		}
 	}
 	return ret;
 }
 console.log(JSON.stringify(map(list)));

3、总结

1、合理分工

2、API设计合理，好的通用性、一定的抽象度、一定的拓展性

3、合适的算法，更高的效率

96QLY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
奇舞学院JS01—如何写好原生JS

1、交通灯实例&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;js04-1&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type="text/css" href=&qu
复制链接

扫一扫