学习的时候通常会遇到如下阻力:
1、代码量巨大,代码气场首先就把人吓退了!
2、各种没有使用过的,或者很少使用的,生疏的js方法,又是一个下马威!
3、各种代码书写技巧!
判断语句不用if else,用逻辑运算符,闭包不用
(function(){
//......
})()
用
!function
+function
4、各种健壮性判断
5、浏览器兼容性处理
6、为方便扩展或使用,使用了一些规范和模式,比如模块化、面向对象方法等
这些阻力,每一个单独让一个入门者去应对,其实都不是多难的事。
但是当他们一起向一个初级水平的人袭来时,往往给人积极性的打击是较大的。
最重要的是,这些阻力容易埋没一个牛逼交互的核心原理,
一个牛逼交互的核心原理往往与这些实际细节无关
一个交互如果没有真正掌握原理就非常容易忘,就容易出了bug无处找原因。所以,学习他人优秀代码时,要注意有意识忽略那些阻力,因为那些阻力其实不是真正的核心和难点
具体做法就是,参考源码,用自己的代码实现一次交互,在具体书写过程中完全不考虑那些问题,不管任何规范,只要能看到效果,怎么方便怎么来。关注代码的目的,而不是实现细节
举个例子:
源码获取一个dom,可能会专门写一个方法,形如:
//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};
事实上,如果被操作dom有绑定id,你在js中是可以直接就用的,不用再单独去写方法获取,比如html是这样:
<div id="box">...</div>
在js中就可以直接用起:
box.innerHTML = 'xxoo';
你的目的是获取dom元素,那么你只要能获取到就行,用最简单粗暴的方法,不去考虑其他,因为这不是你的重点和目标,你的目标是整个插件的原理,不要让代码细节阻碍你
实现的代码可能会非常粗陋不堪,甚至只能在你的指定浏览器的指定版本里正常显示,但是它会更突出原理,突出你要学习的重点
掌握了原理,剩下那些问题,都是你可以各个击破,逐步迭代去优化的,都是百度可以轻易找到解决方法的
强调一下:这里所说的方法,是学习方法,不是工作方法和生产方法,实际工作中,一定要尽量规范,考虑全面,否则一定焦头烂额