成長相冊項目小結----js

最近忙著一個成長相冊的項目，很趕時間。很忙。 終于接近尾聲了。 這里對這個項目做一些總結。先總結一下js方面的東西。

一.jquery.lazyload.js?

這個項目一直跟圖片打交道。這個必不可少。延遲加載。

使用方法 ??$("img").lazyload(); ? 官網?http://www.appelsiini.net/projects/lazyload

做這個項目的時候 出了問題。 因為圖片結構是橫向的 然后 加了很多亂七八糟的事件。頁面弄的很復雜。是通過觸發(fā)事件來左右移動照片的。 結果導致了 延遲加載工作不正常。不知道是哪個東西導致的。就是有時候延遲加載正常工作。 有時候不能正常工作，。即使是把觸發(fā)事件寫成我自帶的事件 仍然不能正常解決。 最后我在源代碼里面加上了??$.fn.lazyloadUpdate=update; 然后 在自己的事件里面調用一下?lazyloadUpdate方法來實現延遲加載。 不知道有沒有更好的方法。先暫時這么解決的。 接下來就是要好好讀讀源代碼 理解一下這個插件的工作原理。

核心就是2個 ??

一個是update方法 這里循環(huán)所有延遲加載的圖片。判斷是否應該加載 如果應該加載。 就調用 appear事件：?$this.trigger("appear");

appear 事件是自定義的一個事件??$self.one("appear", function() {}); 里面的邏輯就是將 scr值 設置成真正的圖片路徑。

看源代碼的過程中 學到了一些以前不知道的東西。

1.首先就是?trigger 的使用。這個事我之前忽略的。以前很多時候 給一個東西加了某個事件。處理一堆顯示效果邏輯。 某個時刻需要用代碼觸發(fā)一下。很糾結。 一般我就是用 $(this).click() 一下來觸發(fā)click事件。 可是如果不是這種事件就麻煩了。 以后這種情況就可以使用trigger 來處理。

2.$(''<img />") 的使用 貌似 使用這個就是創(chuàng)建了一個img對象。以前要動態(tài)創(chuàng)建對象 我都是用原生的js 很麻煩 從來記不得 每次都百度。 以后可以用這個來創(chuàng)建html對象。（貌似 創(chuàng)建的img對象 設置src的值 可以加載圖片 這個是以前不知道的）

? ? ? ? ? ? ? ? 3.?$.grep 方法 是刪除集合里面的某個元素。 這個以前也沒有怎么注意到。

二。swfUpload?

嚴格來說這不能說是js 因為是flash上傳。

這個項目里面要用到多文件異步上傳 主要是上傳圖片了和音頻了。有進度條等的邏輯。 試用了一些ajax文件上傳。 最后還是選擇了這個。這個的兼容性要好很多 。 用法很簡單：

var upload=new SWFUpload({// Backend Settingsupload_url : "<@spring.url "/upload/doUpload" />",file_post_name : "myUploadFile",post_params: {"activityId" : "${activityId}","sessionId":"${sessionId!0}"},// File Upload Settingsfile_size_limit : "50000", // 50 Mbfile_types : "*.bmp;*.jpg;*.jpeg;*.png;*.MP3;*.wav",file_types_description : "文件",//file_upload_limit : "10",//file_queue_limit : "10",// Event Handler Settings (all my handlers are in the Handler.js file)file_dialog_start_handler : fileDialogStart, //打開 選擇文本file_queued_handler : fileQueued, //隊列file_queue_error_handler : fileQueueError, //出錯file_dialog_complete_handler : fileDialogComplete,//這里選擇完成upload_start_handler : uploadStart,upload_progress_handler : uploadProgress,upload_error_handler : uploadError,upload_success_handler : uploadSuccess,upload_complete_handler : uploadComplete,button_image_url : "<@spring.url "/resources/images/add.png" /> ",button_placeholder_id : "addBtn",button_width : 105,button_height : 40,flash_url : "<@spring.url "/resources/js/fileUpload/swfupload.swf" />",debug : false}); 會依次執(zhí)行各種事件。相信看名字就能知道各個參數的意義。在各個回調方法里面 一般會用到2個非常有用的對象

var stats = this.getStats();以及

file對象。 基本上所有的狀態(tài)屬性 都在這2個對象中。

stats 記錄著整個功能的 上傳的 成功個數 失敗個數 等等信息

file 記錄著單個文件的大小 ，index ，id 等等信息。

下面把回調方法記錄一下。主要是記錄 參數

/* This is an example of how to cancel all the files queued up. It's made somewhat generic. Just pass your SWFUpload object in to this method and it loops through cancelling the uploads. */ var isOutLimit=false; var limitCount=99; function cancelQueue(instance) {document.getElementById(instance.customSettings.cancelButtonId).disabled = true;instance.stopUpload();var stats;do {stats = instance.getStats();instance.cancelUpload();} while (stats.files_queued !== 0);}/* **********************Event HandlersThese are my custom event handlers to make myweb application behave the way I went when SWFUploadcompletes different tasks. These aren't part of the SWFUploadpackage. They are part of my application. Without these noneof the actions SWFUpload makes will show up in my application.********************** */ function fileDialogStart() {/* I don't need to do anything here */ } function fileQueued(file) {try {// You might include code here that prevents the form from being submitted while the upload is in// progress. Then you'll want to put code in the Queue Complete handler to "unblock" the formvar stats = this.getStats();var index=file.index;if(isOutLimit){return;}else if(index>limitCount){isOutLimit=true;return}var progressDiv=$('#progressDiv');var cloneDiv=$('#progressDiv .cloneProgress').clone(true);progressDiv.append(cloneDiv);cloneDiv.removeClass('cloneProgress');cloneDiv.addClass('progressChildrenDiv');cloneDiv.find('.fileName').text(file.name);cloneDiv.show();//var progress = new FileProgress(file, this.customSettings.progressTarget);//progress.setStatus("Pending...");//progress.toggleCancel(true, this);} catch (ex) {this.debug(ex);}}function fileQueueError(file, errorCode, message) {var index=file.index;if(isOutLimit){return;}else if(index>limitCount){isOutLimit=true;return}try {if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {//alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));return;}switch (errorCode) {case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:var progressDiv=$('#progressDiv');var cloneDiv=$('#progressDiv .cloneProgress').clone(true);progressDiv.append(cloneDiv);cloneDiv.removeClass('cloneProgress');cloneDiv.addClass('progressChildrenDiv');cloneDiv.find('.fileName').text(file.name);cloneDiv.find('.scoringBox_box').addClass('scoringBox_boxError').css('width','100%'); cloneDiv.find('.scoringBox_backg ').removeClass('scoringBox_none').addClass('scoringBox_fail').text("文件已超過50M，請?zhí)幚砗笊蟼?#34;);cloneDiv.show();break;case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:progress.setStatus("Cannot upload Zero Byte files.");this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:progress.setStatus("Invalid File Type.");this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED://alert("You have selected too many files. " + (message > 1 ? "You may only add " + message + " more files" : "You cannot add any more files."));break;default:if (file !== null) {progress.setStatus("Unhandled Error");}this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;}} catch (ex) {this.debug(ex);} }function fileDialogComplete(numFilesSelected, numFilesQueued) { $('.noneTitle').hide();if(isOutLimit){alert('每次最多上傳100個文件');}try {if (this.getStats().files_queued > 0) {//document.getElementById(this.customSettings.cancelButtonId).disabled = false;}/* I want auto start and I can do that here */this.startUpload();} catch (ex) {this.debug(ex);} }function uploadStart(file) {var index=file.index;if(index>limitCount){this.cancelUpload(file.id)return false;}try {/* I don't want to do any file validation or anything, I'll just update the UI and return true to indicate that the upload should start *///var progress = new FileProgress(file, this.customSettings.progressTarget);//progress.setStatus("Uploading...");//progress.toggleCancel(true, this);var index=file.index;$('#progressDiv .progressChildrenDiv:eq('+index+') .scoringBox_backg').removeClass('scoringBox_none');$('#progressDiv .progressChildrenDiv:eq('+index+') .scoringBox_backg').addClass('scoringBox_uping');}catch (ex) {console.log(JSON.stringify(ex))}return true; }function uploadProgress(file, bytesLoaded, bytesTotal) {try {var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);var index=file.index;$('#progressDiv .progressChildrenDiv:eq('+index+') .scoringBox_box').css('width',percent+'%')//} catch (ex) {this.debug(ex);} }function uploadSuccess(file, serverData) {try {var index=file.index;if(serverData=='success'){$('#progressDiv .progressChildrenDiv:eq('+index+') .scoringBox_backg').removeClass('scoringBox_uping ').addClass('scoringBox_done'); }else{}} catch (ex) {this.debug(ex);} }function uploadComplete(file) {try {/* I want the next upload to continue automatically so I'll call startUpload here */if (this.getStats().files_queued === 0) {doUpdataSuccess();} else { this.startUpload();}} catch (ex) {this.debug(ex);}}function uploadError(file, errorCode, message) {try {var progress = new FileProgress(file, this.customSettings.progressTarget);progress.setError();progress.toggleCancel(false);switch (errorCode) {case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:progress.setStatus("Upload Error: " + message);this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:progress.setStatus("Configuration Error");this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:progress.setStatus("Upload Failed.");this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.IO_ERROR:progress.setStatus("Server (IO) Error");this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:progress.setStatus("Security Error");this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:progress.setStatus("Upload limit exceeded.");this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:progress.setStatus("File not found.");this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:progress.setStatus("Failed Validation. Upload skipped.");this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:if (this.getStats().files_queued === 0) {document.getElementById(this.customSettings.cancelButtonId).disabled = true;}progress.setStatus("Cancelled");progress.setCancelled();break;case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:progress.setStatus("Stopped");break;default:progress.setStatus("Unhandled Error: " + error_code);this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);break;}} catch (ex) {this.debug(ex);} }開發(fā)過程有些注意的地方記錄一下?

fileQueued 和 fileQueueError 在選擇文件的時候必然會只執(zhí)行一個。

如果設置了最大上傳個數。 會直接進入error 我的需求是 超過最大上傳個數 要提示 然后繼續(xù)上前 100個 這里 我做了改動。

在?fileDialogComplete 即 對話框關閉的時候 判斷文件個數 大于100 給提示。

在?uploadStart 的時候 判斷 index ?大于100 的 取消上傳。 文檔上面說 返回 false 就會不上傳。 我試了一下 的確會不上傳 但是 會不停的調用這個方法

死循環(huán)。 雖然看不出什么 ?但是個人感覺不好。 還是手動調用一下 ?this.cancelUpload(file.id) 這個就不在上傳了。

另外 這個插件需要注意的是 在一些瀏覽器 （貌似主要是火狐） 是記不住 session 的。沒上傳一個文件 就開啟一個新的session。如果 后臺有安全驗證 就需要 將sessionId 傳到后臺去。 然后通過sessionId獲取 安全驗證所需要的數據。

三 。jquery.jplayer.js

這個事因為上傳的資源當中有音頻播放。找了很多插件什么的。都會出各種各樣的問題 要不是格式的事。要不是瀏覽器不兼容。最后選擇了這個。很不錯。（發(fā)現 js寫的也挺多了 越來越i換jquery了 什么插件都有。）

用法特別簡單 。還可以自定義樣式。 不像其他的flash插件。 這個插件 頁面完全就是 html 標簽。 給每個div 加上對應的樣式 就達到了控制的目的。

只有一個地方 讓我出了一點問題。 貌似是火狐對MP3支持的問題。 我的項目 是需要支持 mp3 和 wav 2種格式。?supplied 這個參數 我就想當然的 設置成了“mp3，wav” 然后 在火狐上面就是出錯。 然后改成 “MP3” 就好了。 我到現在還不是很懂。時間緊 就沒有繼續(xù)管。 估計這個參數配置的是哪些格式用flash解析？不是很確定。 另外需要注意的就是 swf 的path 不是路徑。是到目錄那一層。附上js代碼。基本就是官方例子。

$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {mp3:bigUrl,wav:bigUrl});},play: function() {$(this).jPlayer("pauseOthers");},swfPath: "<@spring.url ""/>/resources/radio",supplied: "mp3",wmode: "window"});

四 。其他注意點

? ? ? ?1.這個問題已經禍害我很多次了 每次都忘了。 在所有的 ajax 。圖片只要是有修改但是路徑不變的，是向后臺請求的 請一定要加上 隨即參數。防止緩存。不要在某個瀏覽器上 發(fā)現沒有緩存 就不加。 以后 在另外一個瀏覽器上發(fā)現緩存 會很后悔。。

親身經歷一個。本來不需要加隨即參數的。因為這個頁面是請求當前身份的一些其他數據。 然后有個功能 切換身份。在IE10 下就悲劇了。

總結

以上是生活随笔為你收集整理的成长相册项目小结----js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。