如何提高JavaScript开发效率-半个月学习总结反思
编程思维
1.动手前 的思考
学习了半个月的html css和js jquery,发现很多时候,自己写的代码杂乱无章,思维混乱,的同时,编写代码的效率低下,bug频出.修改bug让自己本来不富裕的时间变得更加稀少.所以我发现,当面对一个新的需求的时候,最重要的并不是立马动手去敲键盘,而是思考如何抽象问题,把解决方案逐步列出,列出后思考每一步需要用到的技术点是否满足解决需求,可能存在什么问题,这些思考可能会占用一部分时间,但是对编程思维的养成至关重要.如果每次敲代码只为了解决需求,而不追求提升那么代码只会敲得越来越慢.
2.备注的重要性
第二点,对于编程思维来说,最重要的不是语法或者技术点,而是抽象问题后,快速逐步解决问题的能力.很多时候,写到最后一步,就忘记了一开始的思路是什么,这对于逻辑来说是最可怕的.所以,一定要加备注,当你回头查看逻辑时,会更容易且高效
3.快速解决问题
当遇到问题不能解决,我们把问题分成两种:
第一种:这个问题不解决后面的代码不能解决业务需求
第二种:这个问题不解决,后面的代码可以解决业务需求
那么面对第一种情况,尤为重要,我们分两类讨论,第一类是技术性问题,知识点,语法,这类问题,迅速百度一下就可以解决切莫深挖,当这个需求解决后在处理技术上的问题,没背过的背过没记住的记住.第二类:逻辑上或bug问题,这类问题如果当下不能迅速解决,最好的方式是尝试绕过此种方法,因为抛开技术性问题不谈,这类方法肯定是不让你这么 用.如果绕不开,心态不要蹦沙卡拉,换个昨天的bug冷静一下.
那么第二种情况:这个问题很简单,不管是技术性问题还是逻辑问题,在你解决这个需求后大概率自己就知道问题在哪里了.所以要先做的是跳过问题继续解决需求,而不是在问题出消耗时间.当最终的需求实现后,复盘检查问题
4需求解决后的优化
需求解决后,查看代码是否优雅,是否有大量重复代码,是否有多余代码,整理清除.
问题解决,前面搁置的问题,时间允许可以耐心逐一解决,但是要分先后,技术性问题优先级高于逻辑性问题,如果技术问题没解决下次遇到,还是会被卡,但是逻辑性问题可能只是你脑子不清楚,或者是心态崩了,可能稍微调整一下,再看程序就解决了.
5复盘自己整个过程,计算时间,效率,效果,和提升.次日看看自己昨天写不出来的问题,试试还能不能写出来
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钢琴</title> <style> #father { width: 1000px; height: 52px; margin: 0 auto; /* border: 1px solid black; */ z-index: 2; position: relative; top: 520px; } .dd1 { border: 1px solid black; width: 100px; height: 400px; background-color: white; /* position: relative; */ } ul { display: block; margin: 0 auto; list-style: none; position: relative; width: 940px; right: 10px; overflow: hidden; } li { float: left; } .dd2 { position: absolute; top: 400px; width: 100px; height: 60px; background-color: black; } a { font-size: 30px; color: rgb(81, 175, 26); text-decoration: none; position: absolute; z-index: 1; line-height: 40px; width: 100px; height: 50px; /* border: 1px solid black; */ text-align: center; } #img1 { background-image: url(../images/钢琴.png); width: 1421px; height: 936px; margin: 0 auto; } </style></head>
<body style="background-color: black;"> <div id="img1"> <div id="father"> <ul id="ul1"> <li id="li1"> <div id="d1" class="dd1"> <a href="">1dao</a> <div id="d11" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d2" class="dd1"> <a href="">2 ruai</a> <div id="d12" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d3" class="dd1"> <a href="">3 mi</a> <div id="d13" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d4" class="dd1"> <a href="">3 fa</a> <div id="d14" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d5" class="dd1"> <a href="">4 sao</a> <div id="d15" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d6" class="dd1"> <a href="">5 la</a> <div id="d16" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d7" class="dd1"> <a href=""> 6 xi</a> <div id="d17" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d8" class="dd1"> <a href=""> 7 daoo</a> <div id="d18" class="dd2"></div> <div style="clear: both;"></div> </div> </li> <li id="li1"> <div id="d9" class="dd1"> <a href=""> G</a> <div id="d19" class="dd2"></div> <div style="clear: both;"></div> </div> </li> </ul> </div> </div>
<audio id="muc1" src="../mp3/1.ogg"></audio> <audio id="muc2" src="../mp3/2.ogg"></audio> <audio id="muc3" src="../mp3/3.ogg"></audio> <audio id="muc4" src="../mp3/4.ogg"></audio> <audio id="muc5" src="../mp3/5.ogg"></audio> <audio id="muc6" src="../mp3/6.ogg"></audio> <audio id="muc7" src="../mp3/7.ogg"></audio> <audio id="muc8" src="../mp3/8.ogg"></audio> <audio id="muc9" src="../mp3/9.ogg"></audio>
</body><script src="../jquery-1.11.1.min.js"></script><script src="../jquery.color.js"></script><script> $("#d1").mouseenter(function() { $("#d11").animate({ 'top': '0' }, 200, function() { // $("#muc1")[0].load() //重新加载 $("#muc1")[0].currentTime = 0; $("#muc1")[0].play() console.log( '1开始' ) })
}) $("#d1").mouseleave(function() { $("#d11").stop(); }); $("#d1").mouseout(function() {
$("#d11").animate({ 'top': '453px' }, 1400, function() { $("#muc1")[0].pause() // $("#muc1")[0].currentTime = 0; console.log( '1结束' ) }) })
//------------------------------ $("#d2").mouseenter(function() { $("#d12").animate({ 'top': '0' }, 200, function() { $("#muc2")[0].currentTime = 0; $("#muc2")[0].play() console.log( '2开始' ) }) }) $("#d2").mouseleave(function() { $("#d12").stop(); }); $("#d2").mouseleave(function() { $("#d12").animate({ 'top': '453px' }, 1400, function() { $("#muc2")[0].pause() $("#muc2")[0].currentTime = 0; console.log( '2结束' ) }) })
//------------------------------ $("#d3").mouseenter(function() { $("#d13").animate({ 'top': '0' }, 200, function() { $("#muc3")[0].currentTime = 0; $("#muc3")[0].play() console.log( '3开始' ) }) }) $("#d3").mouseleave(function() { $("#d13").stop(); }); $("#d3").mouseleave(function() { $("#d13").animate({ 'top': '453px' }, 1400, function() { $("#muc3")[0].pause() $("#muc3")[0].currentTime = 0; console.log( '3结束' ) }) })
//------------------------------ $("#d4").mouseenter(function() { $("#d14").animate({ 'top': '0' }, 200, function() { $("#muc4")[0].currentTime = 0; $("#muc4")[0].play() console.log( '4开始' ) }) }) $("#d4").mouseleave(function() { $("#d14").stop(); }); $("#d4").mouseleave(function() { $("#d14").animate({ 'top': '453px' }, 1400, function() { $("#muc4")[0].pause() $("#muc4")[0].currentTime = 0; console.log( '4结束' ) }) })
//------------------------------ $("#d5").mouseenter(function() { $("#d15").animate({ 'top': '0' }, 200, function() { $("#muc5")[0].currentTime = 0; $("#muc5")[0].play() console.log( '5开始' ) }) }) $("#d5").mouseleave(function() { $("#d15").stop(); }); $("#d5").mouseleave(function() { $("#d15").animate({ 'top': '453px' }, 1400, function() { $("#muc5")[0].pause() $("#muc5")[0].currentTime = 0; console.log( '5结束' ) }) })
//------------------------------
$("#d6").mouseenter(function() { $("#d16").animate({ 'top': '0' }, 200, function() { $("#muc6")[0].currentTime = 0; $("#muc6")[0].play() console.log( '6开始' ) }) }) $("#d6").mouseleave(function() { $("#d16").stop(); }); $("#d6").mouseleave(function() { $("#d16").animate({ 'top': '453px' }, 1400, function() { $("#muc6")[0].pause() $("#muc6")[0].currentTime = 0; console.log( '6结束' ) }) })
//------------------------------ $("#d7").mouseenter(function() { $("#d17").animate({ 'top': '0' }, 200, function() { $("#muc7")[0].currentTime = 0; $("#muc7")[0].play() console.log( '7开始' ) }) }) $("#d7").mouseleave(function() { $("#d17").stop(); }); $("#d7").mouseleave(function() { $("#d17").animate({ 'top': '453px' }, 1400, function() { $("#muc7")[0].pause() $("#muc7")[0].currentTime = 0; console.log( '7结束' ) }) })
//------------------------------ $("#d8").mouseenter(function() { $("#d18").animate({ 'top': '0' }, 200, function() { $("#muc8")[0].currentTime = 0; $("#muc8")[0].play() console.log( '8开始' ) }) }) $("#d8").mouseleave(function() { $("#d18").stop(); }); $("#d8").mouseleave(function() { $("#d18").animate({ 'top': '453px' }, 1400, function() { $("#muc8")[0].pause() $("#muc8")[0].currentTime = 0; console.log( '8结束' ) }) })
//------------------------------ //------------------------------ $("#d9").mouseenter(function() { $("#d19").animate({ 'top': '0' }, 200, function() { $("#muc9")[0].currentTime = 0; $("#muc9")[0].play() console.log( '9开始' ) }) }) $("#d9").mouseleave(function() { $("#d19").stop(); }); $("#d9").mouseleave(function() { $("#d19").animate({ 'top': '453px' }, 1400, function() { $("#muc9")[0].pause() $("#muc9")[0].currentTime = 0; console.log( '9结束' ) }) })
// $(window).keypress(function(e) { // //获取当前的按键 // var k = e.key.toLowerCase(); // //针对按键进行不同的操作 // switch (k) { // case "q":
// $("#d11").animate({ // 'top': '0' // }, 300, function() { // // $("#muc1")[0].load() // //重新加载 // $("#muc1")[0].currentTime = 0; // $("#muc1")[0].play() // console.log( // '1开始' // ) // })
// $("#d11").stop(); // $("#d11").animate({ // 'top': '400' // }, 800, function() { // $("#muc1")[0].pause() // // $("#muc1")[0].currentTime = 0; // console.log( // '1结束' // ) // })
// break; // case "w":
// $("#d12").animate({ // 'top': '0' // }, 300, function() { // $("#muc2")[0].currentTime = 0; // $("#muc2")[0].play() // console.log( // '2开始' // ) // }) // $("#d12").stop(); // $("#d12").animate({ // 'top': '53' // }, 800, function() { // $("#muc2")[0].pause() // $("#muc2")[0].currentTime = 0; // console.log( // '2结束' // ) // })
// break; // case "e": // $('li:contains(F3)').mousedown(); // break; // case "r": // $('li:contains(G3)').mousedown(); // break; // case "t": // $('li:contains(A3)').mousedown(); // break; // case "y": // $('li:contains(B3)').mousedown(); // break; // case "u": // $('li:contains(C4)').mousedown(); // break; // case "i": // $('li:contains(D4)').mousedown(); // break; // case "o": // $('li:contains(E4)').mousedown(); // break; // case "p": // $('li:contains(F4)').mousedown(); // break; // case "[": // $('li:contains(G4)').mousedown(); // break; // case "]": // $('li:contains(A4)').mousedown(); // break; // case "\\": // $('li:contains(B4)').mousedown(); // break; // case "pageup": // $('li:contains(C5)').mousedown(); // break; // case "pagedown": // $('li:contains(D5)').mousedown(); // break; // case "end": // $('li:contains(E5)').mousedown(); // break; // default: // return false; // }
// return false; // })</script>
</html>这里是优化之前写了8个小时7个小时在改bug的钢琴代码
这个是优化100行钢琴代码,差距显而易见
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; list-style: none; font-family: '黑体'; } .nav { height: 60px; width: 900px; background-color: black; margin: 0 auto; } .nav li { float: left; height: 60px; width: 100px; position: relative; overflow: hidden; } .nav li a { position: absolute; width: 100%; height: 100%; font-size: 24px; color: blue; text-align: center; line-height: 60px; text-decoration: none; z-index: 2; } .nav li span { position: absolute; width: 100%; height: 100%; background-color: yellow; z-index: 1; top: 60px; } </style> <script src="./jquery-1.11.1.min.js"></script> <script> $(function() {
$('.nav li').mouseenter(function() { $(this).children('span').animate({ top: 0 }); var index = $(this).index(); $('.nav audio').get(index).load(); $('.nav audio').get(index).play(); }).mouseleave(function() { $(this).children('span').animate({ top: 60 }); });
// 节流阀 : 按下的时候,如果没松手,就只触发一次 // 按键触发 var flag = true; $(document).on('keydown', function(e) { // console.log(e.keyCode); if (flag) { flag = false; var code = e.keyCode; if (code >= 49 && code <= 57) { $(".nav li").eq(code - 49).mouseenter(); } }
}); $(document).on('keyup', function(e) { flag = true; // console.log(e.keyCode); var code = e.keyCode; if (code >= 49 && code <= 57) { $(".nav li").eq(code - 49).mouseleave(); } }); }); </script></head>
<body> <div class="nav">
<ul> <li><a href="javascript:void(0);">导航1</a><span></span></li> <li><a href="javascript:void(0);">导航2</a><span></span></li> <li><a href="javascript:void(0);">导航3</a><span></span></li> <li><a href="javascript:void(0);">导航4</a><span></span></li> <li><a href="javascript:void(0);">导航5</a><span></span></li> <li><a href="javascript:void(0);">导航6</a><span></span></li> <li><a href="javascript:void(0);">导航7</a><span></span></li> <li><a href="javascript:void(0);">导航8</a><span></span></li> <li><a href="javascript:void(0);">导航9</a><span></span></li> </ul>
<div> <audio src="./mp3/1.ogg"></audio> <audio src="./mp3/2.ogg"></audio> <audio src="./mp3/3.ogg"></audio> <audio src="./mp3/4.ogg"></audio> <audio src="./mp3/5.ogg"></audio> <audio src="./mp3/6.ogg"></audio> <audio src="./mp3/7.ogg"></audio> <audio src="./mp3/8.ogg"></audio> <audio src="./mp3/9.ogg"></audio> </div> </div></body>
</html>
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
