Time of Update: 2017-01-19
本文執行個體講述了JavaScript類比重力狀態下拋物運動的方法。分享給大家供大家參考。具體分析如下:這段JavaScript代碼類比重力狀態下的拋物運動,可設定以下參數:橫向初速度、縱向初速度、重力加速度(如果這個加速度是一個隨時間變化的值,就能達到其他非勻加速運動的效果了)、動畫間隔時間等,相對專業<!doctype html><html><head><title>js拋物運動</title><meta
Time of Update: 2017-01-19
介紹裝飾者提供比繼承更有彈性的替代方案。 裝飾者用用於封裝同介面的對象,不僅允許你向方法添加行為,而且還可以將方法設定成原始對象調用(例如裝飾者的建構函式)。裝飾者用於通過重載方法的形式添加新功能,該模式可以在被裝飾者前面或者後面加上自己的行為以達到特定的目的。本文那麼裝飾者模式有什麼好處呢?前面說了,裝飾者是一種實現繼承的替代方案。當指令碼運行時,在子類中增加行為會影響原有類所有的執行個體,而裝飾者卻不然。取而代之的是它能給不同對象各自添加新行為。如下代碼所示:複製代碼
Time of Update: 2017-01-19
介紹與建立型模式類似,原廠模式建立對象(視為工廠裡的產品)時無需指定建立對象的具體類。原廠模式定義一個用於建立對象的介面,這個介面由子類決定執行個體化哪一個類。該模式使一個類的執行個體化延遲到了子類。而子類可以重寫介面方法以便建立的時候指定自己的物件類型。這個模式十分有用,尤其是建立對象的流程賦值的時候,比如依賴於很多設定檔案等。並且,你會經常在程式裡看到Factory 方法,用於讓子類類定義需要建立的物件類型。本文下面這個例子中,是應用了Factory
Time of Update: 2017-01-19
介紹在軟體系統中,有時候面臨著“一個複雜物件”的建立工作,其通常由各個部分的子物件用一定的演算法構成;由於需求的變化,這個複雜物件的各個部分經常面臨著劇烈的變化,但是將它們組合在一起的演算法確相對穩定。如何應對這種變化?如何提供一種“封裝機制”來隔離出“複雜物件的各個部分”的變化,從而保持系統中的“穩定構建演算法”不隨著需求改變而改變?這就是要說的建造者模式。建造者模式可以將一個複雜物件的構建與其表示相分離,使得同樣的構建過程可以建立不同的表示。也就是說如果我們用了建造者模式,那麼使用者就需要指
Time of Update: 2017-01-19
1、事件流 事件流描述的是從頁面中接收事件的順序。但是IE提出的是冒泡流,而Netscape Communicator提出的是捕獲流。JavaScript事件流2、事件冒泡(event bubbling) 事件開始由最具體的元素(嵌套層次最深的那個節點)接收,然後逐級向上傳播為較不為具體的節點(文檔)。如下:複製代碼 代碼如下:<html> <head>
Time of Update: 2017-01-19
本文執行個體講述了JavaScript判斷使用者是否對錶單進行了修改的方法。分享給大家供大家參考。具體分析如下:這段JS代碼可以判斷出使用者是否對錶單內容進行了修改,如果修改了表單,並退出瀏覽器,則會提醒使用者是否要儲存表單的內容,是非常有用的代碼。function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type =
Time of Update: 2017-01-19
一談到路徑相關的問題,大家都會往window.location上想,確實這個對象提供了相當多的路徑資訊,其中常用的就包括:1.location.href:當前頁面的完整URL2.location.pathname:當前URL中的路徑名3.location.hash:當前URL中的錨點4.location.search:當前URL中的查詢參數然而,location沒有一個屬效能直接獲得目前的目錄(不含檔案名稱)的絕對路徑。通過Google我發現了一些錯誤的方法,比如說把URL通過“/”分離成數組,
Time of Update: 2017-01-19
本文執行個體講述了JavaScript前補零操作的方法。分享給大家供大家參考。具體如下:很多時候為了顯示格式,需要在某一字串不滿位的情況下進行前補0操作。1. 傳統代碼/** * 前補0操作 * @param number String 待操作字串 * @param length int 目標長度 */function addZero(number, length) { var buffer = ""; if (number == "") { for (var i = 0; i
Time of Update: 2017-01-19
本文執行個體講述了JavaScript限定圖片顯示大小的方法。分享給大家供大家參考。具體實現方法如下:/** * 限制圖片顯示的size. * * @param thisobj 圖片組件 * @param limitW 限制寬度大小 * @param limitH 限制高度大小 */function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj.width > limitW) {
Time of Update: 2017-01-19
js繼承的概念js裡常用的如下兩種繼承方式:原型鏈繼承(對象間的繼承)類式繼承(建構函式間的繼承)由於js不像java那樣是真正物件導向的語言,js是基於對象的,它沒有類的概念。所以,要想實現繼承,可以用js的原型prototype機制或者用apply和call方法去實現在物件導向的語言中,我們使用類來建立一個自訂對象。然而js中所有事物都是對象,那麼用什麼辦法來建立自訂對象呢?這就需要用到js的原型:我們可以簡單的把prototype看做是一個模版,新建立的自訂對象都是這個模版(prototy
Time of Update: 2017-01-19
什麼是模式前陣子準備期末考試,勞神又傷身的,實在閑不得空來更新文章,今天和大家說說javascript中的設計模式。首先呢,我們需要知道的是:模式是一種可複用的解決方案,而反模式呢就是針對某個問題的不良解決方案。js反模式常見例子1.向setTimeout和setInterval傳遞字串,而不是函數,這會觸發eval()的內部使用。2.在全域上下文中定義大量的變數汙染全域命名空間3.修改Object類的原型4.以內聯形式使用js,嵌入在HTML檔案中的js代碼是無法包含在外部單元測試工具中的。5
Time of Update: 2017-01-19
介紹本文介紹的四種代碼複用模式都是最佳實務,推薦大家在編程的過程中使用。模式1:原型繼承原型繼承是讓父物件作為子物件的原型,從而達到繼承的目的:複製代碼 代碼如下:function object(o) { function F() { } F.prototype = o; return new F();}// 要繼承的父物件var parent = {&
Time of Update: 2017-01-19
本文執行個體講述了JavaScript通過this變數快速找出使用者選中radio按鈕的方法。分享給大家供大家參考。具體分析如下:下面的JS代碼通過this變數結合radio按鈕的onchange事件快速找出使用者選擇的哪一個radio按鈕<script>function favAnimal(button) {alert('You like '+button.value+'s.');}</script><input type="radio"
Time of Update: 2017-01-19
我本人是從事前端開發的技術人員,下拉框是我們應用的比較多的頁面元素,今天我結合實際工作中遇到的問題說一下關於下拉框註冊事件的一些例子,希望對大家有所協助。複製代碼 代碼如下: <select name="" id="sel"> <option value="111">1</option> <option value="222">2</option> <option
Time of Update: 2017-01-19
本文執行個體講述了JavaScript獲得url所有參數索引值表的方法。分享給大家供大家參考。具體實現方法如下:function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < hashes.length; i++) {
Time of Update: 2017-01-19
代碼很簡單,實現的功能卻很實用,直接奉上代碼CSS:複製代碼 代碼如下:<meta charset="utf-8" /><title>Pull to Refresh</title><meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
Time of Update: 2017-01-19
第一種方法/**@desc:產生隨機字串*@remark:toString方法可以接收一個基數作為參數的原理,這個基數從2到36封頂。如果不指定,預設基數是10進位*/function generateRandomAlphaNum(len) { var rdmString = ""; for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return
Time of Update: 2017-01-19
javascript文法靈活,同一個功能有五六種實現方式並不罕見,然後再加上有些反人類的原型繼承和非同步特性,就更讓人一頭霧水了。我經常搞不清楚call,apply之間的區別,今天就記錄一下,以免再忘了。在javascript中,方法可以通過以下幾種方式執行:1.func(),這是最直接最常見的調用方式,也符合一般人的思維邏輯,但是在某些情況下有一些不足,下面會解釋。2.(function(arg){})(window),匿名方法調用,在構造命名空間時比較有用,後面的括弧中的參數與匿名方法中的入
Time of Update: 2017-01-19
有時候我們在前端開發工作中為了擷取圖片的資訊,需要在圖片載入完成後才可以正確的擷取到圖片的大小尺寸,並且執行相應的回呼函數使圖片產生某種顯示效果。本文主要整理了幾種常見的javascipt判斷圖片載入完成時的方法,並通過代碼與實際應用相結合進行解釋與說明。onload方法通過向img標籤添加onload屬性,並填入相應的函數來執行後續的javascipt代碼。如下代碼例子中img元素預設是不顯示的,通過onload判斷載入完成後再將圖片顯示出來。複製代碼 代碼如下:<img class="
Time of Update: 2017-01-19
delete這個操作符呢,在javascript中不是很常用,但是他的特性的確很詭異。1,刪除對象的屬性,代碼:複製代碼 代碼如下:var o = { a: 1, b: 2 };delete o.a;alert(o.a);