接觸前端一年時間，開始還能感覺到自己的進步，隨著時間的推移，開始不知道方向。因為各種前端的框架和外掛在網上都能夠找到現成的，直接下載下來用就好了。

從來不考慮其中的實現原理什麼的，即便是去看了其中的原始碼，也是知其然而不知其所以然。舉一個簡單的例子：去年聖誕公司要求頁面上要有雪花飄落的效果，當時的第一想法，就是canvas繪圖製作這個動畫（必定培訓的時候學的飛機大戰有類似的效果），後來發現很難實現，於是就在網上找了一個jquery.snow.js的外掛，發現原理很簡單，

(一個div中加入html的雪花----設定初始的css----執行從上到下的飄落動畫同時雪花在過程中透明----動畫完成移除該div),克隆多個div執行前邊的過程，看著是不是很簡單。

我當時也這麼認為，於是我就自己仿著做了一個（當時自己認為），其實就是照個抄了一遍，加了一點自己需要的功能（例如：隨機雪花的顏色），然後我就認為這是自己的，在jquery的外掛網站去釋出，結果被拒絕了，我當時很失望但是沒有找自己的原因（因為那是抄的），後來也寫了一些輪播，導航點選頁面滑動等（自己認為的外掛），後來發現可複用性的很差，沒有起到外掛的作用。通過看別人的，學習了一段時間，才決定再次寫一個，檢驗一下。

# 1.extend擴充套件方法

- iquery的extend方法，這是jquery外掛常用的擴充套件方法方法，將外掛的預設引數和使用者自定義引數合併為一個新引數的物件。

var defaults = {
	floorClass : '.scroll-floor',
	navClass : '.scroll-nav',
	activeClass : 'active',
	activeTop : 100,
	scrollTop : 100,
	delayTime : 200
};
var newOptions = $.extend({}, defaults, options);
 

# 2.建立'獲取每個樓層的jquery物件，以及該樓層滑動到視窗某位置導航高亮的TOP值，點選導航頁面對應樓層滑動到視窗的某位置的TOP值'的函式

function getItem(_list,newOptions){
	_list.each(function() {
        var item = {};
        item.$obj = $body.find(this);
        item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;
        item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;
        
        data.push(item);
    });
}
 

# 3.建立'滾動監聽函式，同時啟用側邊欄導航高亮顯示'的函式

function scrollActive(_list,newOptions){
	var nowScrollTop = $(window).scrollTop();
	$.each(data,function(i,item){
		if(nowScrollTop > item.$activeTop){
			_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
		}
	});
}

# 4.建立'點選啟用側邊欄導航高亮顯示'的函式

function clickActive(_index,newOptions){
	$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);
}

# 5.外掛介面的製作

var scroll_floor = window.scrollFloor = function(options){
	var newOptions = $.extend({}, defaults, options);
	var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);
	
	getItem(floorList,newOptions);
	scrollActive(navList,newOptions);
	
    $(window).bind('scroll',function(){scrollActive(navList,newOptions);});
    navList.bind('click',function(){
        var _index = $body.find(this).index();
        clickActive(_index,newOptions);
    });
}

# 6.完整外掛的程式碼

(function(window){
	var defaults = {
		floorClass : '.scroll-floor',
		navClass : '.scroll-nav',
		activeClass : 'active',
		activeTop : 100,
		scrollTop : 100,
		delayTime : 200
	};
	
	var $body = $('body'),data = [];
	function getItem(_list,newOptions){
		_list.each(function() {
            var item = {};
            item.$obj = $body.find(this);
            item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;
            item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;
            
            data.push(item);
        });
	}
	
	function scrollActive(_list,newOptions){
		var nowScrollTop = $(window).scrollTop();
		$.each(data,function(i,item){
			if(nowScrollTop > item.$activeTop){
				_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
			}
		});
	}
	
	function clickActive(_index,newOptions){
    	$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);
    }
	
	var scroll_floor = window.scrollFloor = function(options){
		var newOptions = $.extend({}, defaults, options);
		var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);
		
		getItem(floorList,newOptions);
		scrollActive(navList,newOptions);
		
        $(window).bind('scroll',function(){scrollActive(navList,newOptions);});
        navList.bind('click',function(){
            var _index = $body.find(this).index();
            clickActive(_index,newOptions);
        });
	}
})(window);

# 7.總結
該外掛參考了會找人web端首頁動畫的js，就是先將所有樓層查找出來，然後將其需要的各個引數放入一個物件，滾動的監聽的時候對該陣列迴圈比對的思路。
思路對一個外掛的製作很重要，就像我開始第一次製作這個外掛的時候，就是將所有樓層的引數放到一個數組，然後對各個區間判斷，這樣就會使問題複雜話，同時還不好控制。
程式設計師的思路很重要，最開始可以很死板的按照步驟來，但是當我們慢慢的進化，就需要不斷的對程式碼優化，每次優化都是一次學習，慢慢的不知不覺就會發現原來你會的雪萊越多。
例如：

if(nowScrollTop > item.$activeTop){
	_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
}

替換為：

nowScrollTop > item.$activeTop&&_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);

開始都一樣，但是它培養了我們寫程式碼的習慣，越寫越簡單。不對的地方敬請指正！！！

類似京東（商品----詳情----評論）頁面

wap效果圖：

下載wap的demo：

類似京東首頁樓層

web效果圖：

下載web的demo：

其他

[我的部落格，歡迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN部落格，歡迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程式專欄](https://blog.csdn.net/column/details/18335.html)

[前端筆記專欄](https://blog.csdn.net/column/details/18321.html)

[微信小程式實現部分高德地圖功能的DEMO下載](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程式實現MUI的部分效果的DEMO下載](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程式實現MUI的GIT專案地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程式例項列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端筆記列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[遊戲列表](http://blog.csdn.net/m0_38082783/article/details/79035621)