【第一步】
首先通过视频或者书籍，学习JS的基本语法、基本特性等，
同时了解JS都有哪些内置函数、内置属性等，
建立起对JS都能做什么，它用来做什么，它都能实现什么功能等基本的宏观概念；
【第二步】
给自己预定一个大概可以实现的JS功能，然后试图去完成它，不用非要做到全原创
通过抄袭代码放到你的网页上去，让它可以达到你的要求，其中有一些不符合你要求的地方，对其进行修改，修改的过程中，你就必须要去了解它的功能实现步骤，这个步骤使用得多了，你有脑海里就会建立起一个JS程序编写的流程概念，给自己独立写代码打下基础
这个过程以及第三步甚至是以后，你都需要用到搜索引擎，学习如何使用搜索引擎来准确查找你要实现的某个细节功能；
【第三步】
开始尝试自己写代码，将一些以前写过的或者没写过的重新按自己的思路写，或者原创一个实用的功能。
写代码的时候同样和第二步一样，需要进行大量的知识吸纳过程，这时候你慢慢地会对JS的宏观轮廓有一个更清晰的认识过程，比如JS内部都有哪些内置类，它的核心之外都有哪些对外接口，比如DOM、window等。
这个过程中，多多去一些问答社区去找一些网友提问的问题，尝试独立解决它们，在帮助别人的同时，对自己的知识积累才是最主要的。
【第四步】
这个时候你已经是一个JS老手了，寻找一些稀奇古怪的代码，来了解JS更细化的知识，弥补对JS的认识空白和以往的误区。
同时，编写自己的JS库，比如针对浏览器兼容性而开发的动画库、常用简化库等。
学习和使用已有的JS库，比如jquery等。
——————
以上的步骤基本是学习的流程，但不见得非要按步就班，如果你的学习能力很强，可以将第二、三步同步进行。
另外，多去JS的相关知识站点学习，下面给你提供一些这样的站点：
参考资料：
【w3school中国站】 http://www.w3school.com.cn/js/index.asp
【w3schools国际站】http://www.w3schools.com/js/default.asp
【微软JScript官方教程】http://msdn.microsoft.com/zh-cn/library/72bd815a.aspx
1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。列如<script type="text/javascript" src="animate-2.0.1.js"></script>
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。
2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来
右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；
3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；
4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；
然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。
难点：
1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现图片运动混乱的现象，这是我们需要用if(picDiv.isanimated) {return}，
2 、cloneNode（）函数picUl.appendChild(picLi[0].cloneNode(true))
首先，本人在前端开发方面有点心得，有什么不对的地方希望给出建议让我更好的进步1.命名
在开发前必须有个命名规范来对代码统一规范团队代码结构，使代码可读性提高
2.注释
我相信每个人看别人代码时看到密密麻麻的代码结构，相信每个人都会很头疼，即使想看也会看不下去，而且很耗时间，所以注释就变得尤其得重要，注释越清楚越详细我相信代码可维护性越高，而且更容易修改维护
3.变量
在js中变量无处不在，所以这么声明变量就变得尤其得重要，首先少使用全局变量，这样会增加加载速度，从而导致项目用户体验不好
4.声明变量如果不用 var 会导致变量成为全局变量。
5.函数
函数的参数数量
函数的参数不应该超过 3 个。如果函数的参数超过 3 个，应该将一些参数进行封装。
6.函数参数传递
只传函数需要的参数。如
// 不推荐
function greet(data){
console.log('Hello, I am ' + data.name)
}
// 推荐
function greet(name){
console.log('Hello, I am ' + name)
}
7.函数的功能
一个函数只做一件事。这有助于测试和代码复用。
函数尽可能无副作用。无副作用指不修改传入的参数和全局变量。
8.减少重复代码
. 记得在某个文章中看到说，如果重复的代码出现 3 次，就应该重构重复的代码。
. 松耦合
. 一个函数只做一件事
. 缓存一些计算结果
9.避免全局变量
. 从分配置和离逻辑代码
. 不要修改不属于你的对象
. 不属于你的对象包括
. 浏览器原生对象，如 Object，Array等
DOM，如 document
BOM，如 window
类库对象
如果想拓展浏览器原生对象的功能，可以创建函数，函数中把浏览器原生对象传入。如Underscore.js 做 的那样。
10.代码风格的统一
11.尽可能的避免代码重复
.如何减少重复的代码呢？
.在JS中，可以将重复的代码写成一个方法，如果是可通用的，可以写在独立的JS文件中。
.在CSS中，则需要借助Sass，Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。
12.配置和逻辑分开
. JS中，对于整个站的通用配置，写在config.js里。如果是某个js的配置，在文件的开头，用defaultParam 对象来存放可变的配置，用const来定义不可变的配置
. CSS中，依旧要借助预处理语言。对于整站的配置，定 义在_variables.scss里。对于某个具体CSS文件里，在文件开头用变量来定义
13.减少代码的副作用
1>JS中，方法中的沟通尽量不要用全局变量；不要在Array之类的全局对象的原型链上添加方法；尽量不要定义全局的方法和变量：如果确实有很多变量，方法放在全局上，可以学习jQuery,将很多变量，方法放在一个全局对象上；自定义事件，事件的名称也要有命名空间。
2>CSS中，要做到无副作用，难度很大。对于简单页面，一个方法是，把页面上的元素都分成一个个组件，写样式时，选择器要用组件选择器 当前元素选择器。当组件变的复杂时，组件也会包含很多子组件。然后，选择器就会越来越长。。。我的解决方案是用的BEM。
14.提高代码的可读性
.变量，方法等的合理命名，通过名称可以知道这个大概做什么的。
.如果则要加注释来说明一下。对于不容理解的代码加注释
.尽可能不用魔法数字
.对于HTML，选择合适标签
15.一个方法只做一件事
一来提高代码的复用性，二来让调试也变的更容易，三来让测试变的更容易
