成長(zhǎng)相冊(cè)項(xiàng)目小結(jié)----js

最近忙著一個(gè)成長(zhǎng)相冊(cè)的項(xiàng)目，很趕時(shí)間。很忙。 終于接近尾聲了。 這里對(duì)這個(gè)項(xiàng)目做一些總結(jié)。先總結(jié)一下js方面的東西。

一.jquery.lazyload.js?

這個(gè)項(xiàng)目一直跟圖片打交道。這個(gè)必不可少。延遲加載。

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

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

核心就是2個(gè) ??

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

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

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

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

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

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

二。swfUpload?

嚴(yán)格來說這不能說是js 因?yàn)槭莊lash上傳。

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

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, //隊(duì)列file_queue_error_handler : fileQueueError, //出錯(cuò)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}); 會(huì)依次執(zhí)行各種事件。相信看名字就能知道各個(gè)參數(shù)的意義。在各個(gè)回調(diào)方法里面 一般會(huì)用到2個(gè)非常有用的對(duì)象

var stats = this.getStats();以及

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

stats 記錄著整個(gè)功能的 上傳的 成功個(gè)數(shù) 失敗個(gè)數(shù) 等等信息

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

下面把回調(diào)方法記錄一下。主要是記錄 參數(shù)

/* 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，請(qǐng)?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個(gè)文件');}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 在選擇文件的時(shí)候必然會(huì)只執(zhí)行一個(gè)。

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

在?fileDialogComplete 即 對(duì)話框關(guān)閉的時(shí)候 判斷文件個(gè)數(shù) 大于100 給提示。

在?uploadStart 的時(shí)候 判斷 index ?大于100 的 取消上傳。 文檔上面說 返回 false 就會(huì)不上傳。 我試了一下 的確會(huì)不上傳 但是 會(huì)不停的調(diào)用這個(gè)方法

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

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

三 。jquery.jplayer.js

這個(gè)事因?yàn)樯蟼鞯馁Y源當(dāng)中有音頻播放。找了很多插件什么的。都會(huì)出各種各樣的問題 要不是格式的事。要不是瀏覽器不兼容。最后選擇了這個(gè)。很不錯(cuò)。（發(fā)現(xiàn) js寫的也挺多了 越來越i換jquery了 什么插件都有。）

用法特別簡(jiǎn)單 。還可以自定義樣式。 不像其他的flash插件。 這個(gè)插件 頁面完全就是 html 標(biāo)簽。 給每個(gè)div 加上對(duì)應(yīng)的樣式 就達(dá)到了控制的目的。

只有一個(gè)地方 讓我出了一點(diǎn)問題。 貌似是火狐對(duì)MP3支持的問題。 我的項(xiàng)目 是需要支持 mp3 和 wav 2種格式。?supplied 這個(gè)參數(shù) 我就想當(dāng)然的 設(shè)置成了“mp3，wav” 然后 在火狐上面就是出錯(cuò)。 然后改成 “MP3” 就好了。 我到現(xiàn)在還不是很懂。時(shí)間緊 就沒有繼續(xù)管。 估計(jì)這個(gè)參數(shù)配置的是哪些格式用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"});

四 。其他注意點(diǎn)

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

親身經(jīng)歷一個(gè)。本來不需要加隨即參數(shù)的。因?yàn)檫@個(gè)頁面是請(qǐng)求當(dāng)前身份的一些其他數(shù)據(jù)。 然后有個(gè)功能 切換身份。在IE10 下就悲劇了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。