第2天学JavaScript
项目/代码优化迭代重构
实现，正确性
简洁简明易懂，可读性，注释，结构清晰，去掉冗余代码
风格统一，代码规范，设计模式，可扩展性，封装，模块化
架构优化，性能优化
case1：Left-pad事件是什么事件？
待整理补充
case2：交通灯状态切换
初版代码
不及格.js
const traffic = document.getElementById('traffic');
(function reset()){
traffic.className = 's1';
setTimeout(function() {
traffic.className = 's2';
setTimeout(function(){
traffic.className = 's3';
setTimeout(function(){
traffic.className = 's4';
setTimeout(function(){
traffic.className = 's5';
setTimeout(reset, 1000)
}, 1000)
}, 1000)
}, 1000)
}, 1000);
})();
版本1.1
数据封装-数据抽象 version1.js
const traffic = document.getElementById('traffic');
const stateList = [
{state: 'wait', last:1000},
{state: 'stop', last:3000},
{state: 'pass', last:3000},
];
function start(traffic, stateList) {
function applyState(StateIdx) {
const {state, last} = stateList[stateIdx];
traffic.className = state;
setTimeout(() => {
applyState((stateIdx + 1) % stateList.length);
}, last)
}
applyState(0);
}
start(traffic, stateList);
版本1.2
version2.js
const traffic = document.getElementById('traffic');
function polll(...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 = poil(SetState.bind(null, 'wait),
SetState.bind(null, 'stop),
SetState.bind(null, 'pass));
setInterval(trafficStatePoll, 2000);
版本1.3
const traffic = document.getElementById('traffic');
function wait(time){
return new Promise(resolve => setTimeout(resolve, time));
}
function setState(state){
traffic.className = status;
}
async function start(){
//noprotect
while(1){
setState('wait');
await wait(1000);
setState('stop');
await wait(3000);
setState('pass');
await wait(3000);
}
}
start();
发布版和小结
还有更复杂的方法。
这次课程是强代码教学，在实际开发项目中体会和学习掌握程序优化。 但就我本身学习习惯，一个程序经过4次迭代重构，每一次的演进很精彩，但时间被拉长，过长的时间分散掉注意力，如果控制在3次及以内，或者预告迭代版本数量，可能更能提升体验。好处就是有时间回顾一下没有掌握的知识点，有机会相对自由地分配精力。
case3：判断是否是4的幂
版本1
function isPowerOfFour(num){
num = parseInt(num);
while(num > 1){
if(num % 4) return false;
num /=4;
}
return true;
}
版本1.1
function isPowerOfFour(num){
num = parseInt(num);
return num > 0 && (num & (num - 1)) === 0 && (num & 0xAAAAAAAA) === 0;
}
版本1.2 正则表达式
function isPowerOfFour(num){
num = parseInt(num).toString(2);
return /^(?:00)*$/.test(num);
}发布版和小结
还有没有想到更好的方法？ 我很喜欢这样开放式的鼓励。
但感觉两个案例就需要静下来消化一下了，但讲师已经马上进入下一个案例的分析了。 课程上到这里，就有一点吃力了，我的上课状态进入第二阶段，情绪稍有低落。 接下来就是对我专注力的挑战了。
case4：洗牌算法：正确性
版本1
const cards = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function shuffle(cards) {
return [...cards].sort(() => Math.random() > 0.5 ? -1: 1);
}
const result = Array(10).fill(0);
for(let i = 0; i < 10000; i++) {
const c = shuffle(cards);
for(let j = 0; j < 10; j++) {
result[j] += c[j];
}
}
console.log(result);版本1.2 OK版
数学归纳法
const cards = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function shuffle(cards) {
const c = [...cards];
for(let i = c; i > 0; i--) {
const pIdx = Math.floor(Math.random()*i);
[c[pIdx], c[i-1] = [c[i-1], c[pIdx]];
}
return c;
}
const result = Array(10),fill(0);
for(let i=0; i<10000; i++) {
const c= shuffle(cards);
for(let j=0; j<10; j++) {
result[j] += c[j];
}
}
console.log(shuffle(cards));
console.log(result)版本1.3 生成器版
1000张
const cards = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function draw(cards) {
const c = [...cards];
for(let i = c.length; i > 0; i--) {
const pIdx = Math.floor(Math.random()*i);
[c[pIdx], c[i-1] = [c[i-1], c[pIdx]];
yield c[i-1];
}
}
const result = draw(cards);
console.log([...result])项目小结
力不从心。 我习惯实现代码，是练习也是检验自己的掌握情况。 虽然讲师用心准备好代码，系统细化知识点，但以我的速度还是没有办法即时运行调试通过demo代码， 成就感较低，动力受挫。希望有简化案例，5分钟随堂案例实现，以提升积极性和参与感。
红包生成器
版本1 PPT版（红包金额均匀）
.js 挑选出最大的一块进行切分
function generate(amout, count){
let ret = [amount];
while(count > 1){
let cake = Math.max(...ret),
idx = ret.indexOf(cake),
part = 1 + Math.floor((cake / 2)* Math.random(1)),
rest = cake - part;
ret.splice(idx, 1, part, rest);
count--;
}
return ret;
}
const amountEl = document.getElementById('amount');
const countEl = document.getElemnetById('count')
const generateBtn = document.getElemnetById('generateBtn')
const resultEl = document.getElemnetById('result')error：点击随机生成按钮未显示结果
.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <h2>红包生成器</h2> <div id="setting"> <div><label>红包金额：<input id="amount" value=100.00></input></label></div> <div><label>红包金额：<input id="amount" value=100.00></input></label></div> <div><button id="generateBtn">随机生成</button></div> </div> <url id="result"></ul> </body> </html>
版本1.2 随机生成n个切割位置（金额随机）
const cards = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function draw(cards) {
const c = [...cards];
for(let i = c.length; i > 0; i--) {
const pIdx = Math.floor(Math.random()*i);
[c[pIdx], c[i-1] = [c[i-1], c[pIdx]];
yield c[i-1];
}
}
function generate(amout, count){
if(count <= 1) return [amount];
const cards = Array(amount - 1).fill(0).map((_, i) => i + 1);
const pick = draw(cards);
const result = [];
for(let i = 0; i< count; i++) {
result.push(pick.next().value);
}
result.sort((a, b) => a- b);
for(let i = count - 1; i > 0; i--) {
result[i] = result[i] - result[i-1];
}
return result;
}
作者：林泉
链接：https://juejin.cn/post/7009723723099930655
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
