javascript基础扎实了,但是很多逻辑性的功能还是不会写?
2017-03-17 15:50
155 查看
你的问题的本质,应该是“理论是如何与实际相结合的”,你说的扎实想必是指已经学习了很多语法及api,“逻辑功能写不出”其实就是不知道理论知识该如何应用到实际项目中。
理论结合实际的一开始是困难的,但却不是没有办法,最重要的手段就是“看”,一定要多看别人的项目(这时候你可能分不清项目的好坏),尽量找完整能运行,代码不多且结构清晰的看,譬如单文件组件下的vue,可以擦出怎样的火花(原谅我给自己做了广告),所谓“书读百遍、其义自现”就是这个道理,如果不看别人写的,就那么从无到有的冥想,天知道什么时候能出师!
看是有门道的,不能瞎看。对照别人要解决的问题,先自己思考,如果是你写,从哪里着手,难点都在哪里,你要怎么解决,项目是否发布,如何发布?。。。。然后对照这些点,逐一在别人的代码里寻求答案,如果这时候有余力,说不定你会发现针对某一问题,你能想出更好的方案来挑战原作者(当然开源社区我们管这叫交流,不叫互相伤害^^)
接下来一个重要的环节是难度分解,当我们面对一个复杂问题时,刚入行/门的朋友往往会被问题吓倒,这是源于方法论不足。(学霸可能除外,这帮人上学时多数都训练出来一套成熟的适于自己的方法论)。如果能够掌握一定的技巧,那么解决复杂问题并不可怕,这里可以看如何成为一名优秀的设计师:罗子雄@TEDxChongqing(虽然是关于设计的演讲,但复杂问题的分解是通用方法,你可以的)
然后我们来举个简单的例子,试图以此说明分解的作用
假设我们现在来了一个“按照类型来过滤数据,并且不同类型的具体过滤规则不一样”的需求
现有数据如下:
然后目前已知的过滤类型有:
START_S,过滤名称首字母不为S的数据
SIZE_B,过滤面积小于10000的数据
POPU_M,过滤人口大于2000,或者小于1500的数据
有了如上信息,这个过滤功能你要怎么结合理论知识?这就是抽丝剥茧的开始了。
第一步,先抓骨架,到底理论知识里哪个点是解决该问题的关键呢?“数组过滤”,我去,你是不是想到了Array.prototype.filter?好 high!!不过如何使得filter能够满足我们需求的多样性呢?我们稍后分解
第二部,挑逻辑部分,也就是核心过滤入手,分别写出每一种类型的过滤函数来
最后再来,合成一个完整的功能,往往这个步骤也是最让人迷惑的,(所以才要多看)。或许你已经想到了switch case,if else的解决方案,但这还没有达到你期望的程度,在Javascript里,我们通常建议使用literal object来替代那些传统的、不易维护的、难以阅读甚至是低效的流程控制语句。可以写作:
最后来检验结果:
console.log(filter(cities, ‘START_S’));
[ { name: ‘Shanghai’, size: 6340, population: 2426 }, { name: ‘Shenzhen’, size: 1996, population: 2000 } ]
console.log(filter(cities, ‘SIZE_B’));
[ { name: ‘Beijing’, size: 16410, population: 2152 }, { name: ‘Tianjin’, size: 11946, population: 1517 } ]
console.log(filter(cities, ‘POPU_M’));
[ { name: ‘Tianjin’, size: 11946, population: 1517 },{ name: ‘Shenzhen’, size: 1996, population: 2000 } ]
理论结合实际的一开始是困难的,但却不是没有办法,最重要的手段就是“看”,一定要多看别人的项目(这时候你可能分不清项目的好坏),尽量找完整能运行,代码不多且结构清晰的看,譬如单文件组件下的vue,可以擦出怎样的火花(原谅我给自己做了广告),所谓“书读百遍、其义自现”就是这个道理,如果不看别人写的,就那么从无到有的冥想,天知道什么时候能出师!
看是有门道的,不能瞎看。对照别人要解决的问题,先自己思考,如果是你写,从哪里着手,难点都在哪里,你要怎么解决,项目是否发布,如何发布?。。。。然后对照这些点,逐一在别人的代码里寻求答案,如果这时候有余力,说不定你会发现针对某一问题,你能想出更好的方案来挑战原作者(当然开源社区我们管这叫交流,不叫互相伤害^^)
接下来一个重要的环节是难度分解,当我们面对一个复杂问题时,刚入行/门的朋友往往会被问题吓倒,这是源于方法论不足。(学霸可能除外,这帮人上学时多数都训练出来一套成熟的适于自己的方法论)。如果能够掌握一定的技巧,那么解决复杂问题并不可怕,这里可以看如何成为一名优秀的设计师:罗子雄@TEDxChongqing(虽然是关于设计的演讲,但复杂问题的分解是通用方法,你可以的)
然后我们来举个简单的例子,试图以此说明分解的作用
假设我们现在来了一个“按照类型来过滤数据,并且不同类型的具体过滤规则不一样”的需求
现有数据如下:
var cities=[ { name:'Shanghai', size:6340, population:2426 }, { name:'Beijing', size:16140, population:2152 }, { name:'Tianjin', size:11946, population:1527 }, { name:'Shenzhen', size:1996, population:2000 } ];
然后目前已知的过滤类型有:
START_S,过滤名称首字母不为S的数据
SIZE_B,过滤面积小于10000的数据
POPU_M,过滤人口大于2000,或者小于1500的数据
有了如上信息,这个过滤功能你要怎么结合理论知识?这就是抽丝剥茧的开始了。
第一步,先抓骨架,到底理论知识里哪个点是解决该问题的关键呢?“数组过滤”,我去,你是不是想到了Array.prototype.filter?好 high!!不过如何使得filter能够满足我们需求的多样性呢?我们稍后分解
第二部,挑逻辑部分,也就是核心过滤入手,分别写出每一种类型的过滤函数来
var fitlerStarts=function(city){ return city.name.indexOf('S')===0; }; var fitlerSizeB=function(city){ return city.size>=10000; }; var fitlerPopuM=function(city){ return city.population>1500&&city.population<=2000; };
最后再来,合成一个完整的功能,往往这个步骤也是最让人迷惑的,(所以才要多看)。或许你已经想到了switch case,if else的解决方案,但这还没有达到你期望的程度,在Javascript里,我们通常建议使用literal object来替代那些传统的、不易维护的、难以阅读甚至是低效的流程控制语句。可以写作:
var filterMapping={ START_S:fitlerStarts, SIZE_B:fitlerSizeB, POPU_M:fitlerPopuM }; var filter=function(arr,type){ return arr.filter(filterMapping[type]); };
最后来检验结果:
console.log(filter(cities, ‘START_S’));
[ { name: ‘Shanghai’, size: 6340, population: 2426 }, { name: ‘Shenzhen’, size: 1996, population: 2000 } ]
console.log(filter(cities, ‘SIZE_B’));
[ { name: ‘Beijing’, size: 16410, population: 2152 }, { name: ‘Tianjin’, size: 11946, population: 1517 } ]
console.log(filter(cities, ‘POPU_M’));
[ { name: ‘Tianjin’, size: 11946, population: 1517 },{ name: ‘Shenzhen’, size: 1996, population: 2000 } ]
相关文章推荐
- [JavaScript] Script 中 function, variable 的定义会提升到函数执行前面;但是,function 中定义的 global variable 则不会被提升
- 我不知道为什么很多问题很简单但是还是要写很长时间 。。。
- 我在网上看到很多朋友想学linux,但是又不会安装,下面北夏教大家一种优盘启动的安装方法.
- 网络发送同步请求——(开发中一般不会使用,但是还是了解的好)
- 在.NET下如何用WebService实现身份认证,及如何跟踪用户的访问,如类似Possport的功能,不会还是用Session吧?
- JavaScript基础 使用delete删除数组中一个元素的值 但是元素的所占的那个空间还在
- 在w3cschool学完html,css,javascript,jquery以后,还是不会做前端怎么办?
- 足以应付一切的水仙花数,字母交叉问题,数组排序去重复,今天get到一点点,首先一道题莫名其妙地改对了然后明白了自己思路是对的但是不会写代码 还是什么用都没有
- javascript 鼠标拖拽盒子--基础功能版
- 字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的,从Java1.4起,Java核心API就引入了java.util.regex程序包,它是一种有价值的基础
- Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性
- MYSQL服务无法启动1067解决办法?你可以试了很多的办法但是还是不好用?那你不妨试一下这个办法?
- 改进iOS客户端的升级提醒功能--(by cos_sin_tan 虽然是转载的,但是我还是很有兴趣实现他的说法。)
- Android程序进行混淆,在导出签名apk包时出错!但是,javascript还是有问题
- 基础知识很扎实 - 但是面试就是做不出来, 怎么办? (长, 慎入)
- flash 统计表控件 FusionChart (很简单但是功能还是可以的)
- JavaScript基础 使用delete删除数组中一个元素的值 但是元素的所占的那个空间还在
- 自定义tabpageindicator,可以自定义tab是三角形还是矩形,但是tab不具有滑动的功能
- javascript基础-实现简单功能
- cocos2d-x3.9 默认是 gnustl_static 配置,但是 这个库缺少c++的基础功能... c++_static 功能全面些