1. 程式人生 > >jQuery外掛開發精品教程,讓你的jQuery提升一個臺階

jQuery外掛開發精品教程,讓你的jQuery提升一個臺階

要說jQuery 最成功的地方,我認為是它的可擴充套件性吸引了眾多開發者為其開發外掛,從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣,得平臺者得天下。蘋果,微軟,谷歌等巨頭,都有各自的平臺及生態圈。

學會使用jQuery並不難,因為它簡單易學,並且相信你接觸jQuery後肯定也使用或熟悉了不少其外掛。如果要將能力上升一個臺階,編寫一個屬於自己的外掛是個不錯的選擇。

本教程可能不是最精品的,但一定是最細緻的。

jQuery外掛開發模式

軟體開發過程中是需要一定的設計模式來指導開發的,有了模式,我們就能更好地組織我們的程式碼,並且從這些前人總結出來的模式中學到很多好的實踐。

根據《jQuery高階程式設計》的描述,jQuery外掛開發方式主要有三種:

  1. 通過$.extend()來擴充套件jQuery
  2. 通過$.fn 向jQuery新增新的方法
  3. 通過$.widget()應用jQuery UI的部件工廠方式建立

通常我們使用第二種方法來進行簡單外掛開發,說簡單是相對於第三種方式。第三種方式是用來開發更高階jQuery部件的,該模式開發出來的部件帶有很多jQuery內建的特性,比如外掛的狀態資訊自動儲存,各種關於外掛的常用方法等,非常貼心,這裡不細說。

而第一種方式又太簡單,僅僅是在jQuery名稱空間或者理解成jQuery身上添加了一個靜態方法而以。所以我們呼叫通過$.extend()新增的函式時直接通過$符號呼叫($.myfunction())而不需要選中DOM元素($('#example').myfunction())。請看下面的例子。

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //呼叫
$.sayHello('Wayou'); //帶參呼叫

執行結果:

上面程式碼中,通過$.extend()向jQuery添加了一個sayHello函式,然後通過$直接呼叫。到此你可以認為我們已經完成了一個簡單的jQuery外掛了。

但如你所見,這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console,輸出特定格式的資訊,定義一次後可以通過jQuery在程式中任何需要的地方呼叫它。

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //!JavaScript中月分是從0開始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
})
$.log('initializing...'); //呼叫

但這種方式無法利用jQuery強大的選擇器帶來的便利,要處理DOM元素以及將外掛更好地運用於所選擇的元素身上,還是需要使用第二種開發方式。你所見到或使用的外掛也大多是通過此種方式開發。

外掛開發

下面我們就來看第二種方式的jQuery外掛開發。

基本方法

先看一下它的基本格式:

$.fn.pluginName = function() {
    //your code goes here
}

基本上就是往$.fn上面新增一個方法,名字是我們的外掛名稱。然後我們的外掛程式碼在這個方法裡面展開。

比如我們將頁面上所有連結顏色轉成紅色,則可以這樣寫這個外掛:

$.fn.myPlugin = function() {
    //在這裡面,this指的是用jQuery選中的元素
    //example :$('a'),則this=$('a')
    this.css('color', 'red');
}

在外掛名字定義的這個函式內部,this指代的是我們在呼叫該外掛時,用jQuery選擇器選中的元素,一般是一個jQuery型別的集合。比如$('a')返回的是頁面上所有a標籤的集合,且這個集合已經是jQuery包裝型別了,也就是說,在對其進行操作的時候可以直接呼叫jQuery的其他方法而不需要再用美元符號來包裝一下。

所以在上面外掛程式碼中,我們在this身上呼叫jQuery的css()方法,也就相當於在呼叫 $('a').css()。

理解this在這個地方的含義很重要這樣你才知道為什麼可以直接呼叫jQuery方法同時在其他地方this指代不同時我們又需要用jQuery重新包裝才能呼叫,下面會講到。初學容易被this的值整暈,但理解了就不難。

現在就可以去頁面試試我們的程式碼了,在頁面上放幾個連結,呼叫外掛後連結字型變成紅色。

<ul>
	<li>
		<a href="http://www.webo.com/liuwayong">我的微博</a>
	</li>
	<li>
		<a href="http://http://www.cnblogs.com/Wayou/">我的部落格</a>
	</li>
	<li>
		<a href="http://wayouliu.duapp.com/">我的小站</a>
	</li>
</ul>
<p>這是p標籤不是a標籤,我不會受影響</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
	$(function(){
		$('a').myPlugin();
	})
</script>

執行結果:

下面進一步,在外掛程式碼裡處理每個具體的元素,而不是對一個集合進行處理,這樣我們就可以針對每個元素進行相應操作。

我們已經知道this指代jQuery選擇器返回的集合,那麼通過呼叫jQuery的.each()方法就可以處理合集中的每個元素了,但此刻要注意的是,在each方法內部,this指帶的是普通的DOM元素了,如果需要呼叫jQuery的方法那就需要用$來重新包裝一下。

比如現在我們要在每個連結旁邊顯示連結的真實地址,首先通過each遍歷所有a標籤,然後獲取href屬性的值再加到連結文字後面。

更改後我們的外掛程式碼為:

$.fn.myPlugin = function() {
    //在這裡面,this指的是用jQuery選中的元素
    this.css('color', 'red');
    this.each(function() {
        //對每個元素進行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

呼叫程式碼還是一樣的,我們通過選中頁面所有的a標籤來呼叫這個外掛

執行結果:

到此,你已經可以編寫功能簡單的jQuery外掛了。是不是也沒那麼難。

下面開始jQuery外掛編寫中一個重要的部分,引數的接收。

支援鏈式呼叫

我們都知道jQuery一個非常優雅的特性是支援鏈式呼叫,選擇好DOM元素後可以不斷地呼叫其他方法。

要讓外掛不打破這種鏈式呼叫,只需return一下即可。

$.fn.myPlugin = function() {
    //在這裡面,this指的是用jQuery選中的元素
    this.css('color', 'red');
    return this.each(function() {
        //對每個元素進行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

讓外掛接收引數

一個強勁的外掛是可以讓使用者隨意定製的,這要求我們在編寫外掛時就要考慮得全面些,儘量提供合適的引數。

比如現在我們不想讓連結只變成紅色,我們讓外掛的使用者自己定義顯示什麼顏色,要做到這一點很方便,只需要使用者在呼叫的時候傳入一個引數即可。同時我們在外掛的程式碼裡面接收。另一方面,為了靈活,使用者可以不傳遞引數,外掛裡面會給出引數的預設值。

在處理外掛引數的接收上,通常使用jQuery的extend方法,上面也提到過,但那是給extend方法傳遞單個物件的情況下,這個物件會合併到jQuery身上,所以我們就可以在jQuery身上呼叫新合併物件裡包含的方法了,像上面的例子。當給extend方法傳遞一個以上的引數時,它會將所有引數物件合併到第一個裡。同時,如果物件中有同名屬性時,合併的時候後面的會覆蓋前面的。

利用這一點,我們可以在外掛裡定義一個儲存外掛引數預設值的物件,同時將接收來的引數物件合併到預設物件上,最後就實現了使用者指定了值的引數使用指定的值,未指定的引數使用外掛預設值。

為了演示方便,再指定一個引數fontSize,允許呼叫外掛的時候設定字型大小。

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

現在,我們呼叫的時候指定顏色,字型大小未指定,會運用外掛裡的預設值12px。

$('a').myPlugin({
    'color': '#2C9929'
});

執行結果:

同時指定顏色與字型大小:

$('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
});

保護好預設引數

注意到上面程式碼呼叫extend時會將defaults的值改變,這樣不好,因為它作為外掛因有的一些東西應該維持原樣,另外就是如果你在後續程式碼中還要使用這些預設值的話,當你再次訪問它時它已經被使用者傳進來的引數更改了。

一個好的做法是將一個新的空物件做為$.extend的第一個引數,defaults和使用者傳遞的引數物件緊隨其後,這樣做的好處是所有值被合併到這個空物件上,保護了外掛裡面的預設值。

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);//將一個空物件做為第一個引數
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

到此,外掛可以接收和處理引數後,就可以編寫出更健壯而靈活的外掛了。若要編寫一個複雜的外掛,程式碼量會很大,如何組織程式碼就成了一個需要面臨的問題,沒有一個好的方式來組織這些程式碼,整體感覺會雜亂無章,同時也不好維護,所以將外掛的所有方法屬性包裝到一個物件上,用面向物件的思維來進行開發,無疑會使工作輕鬆很多。

面向物件的外掛開發

為什麼要有面向物件的思維,因為如果不這樣,你可能需要一個方法的時候就去定義一個function,當需要另外一個方法的時候,再去隨便定義一個function,同樣,需要一個變數的時候,毫無規則地定義一些散落在程式碼各處的變數。

還是老問題,不方便維護,也不夠清晰。當然,這些問題在程式碼規模較小時是體現不出來的。

如果將需要的重要變數定義到物件的屬性上,函式變成物件的方法,當我們需要的時候通過物件來獲取,一來方便管理,二來不會影響外部名稱空間,因為所有這些變數名還有方法名都是在物件內部。

接著上面的例子,我們可以把這個外掛抽象成一個美化頁面的物件,因為他的功能是設定顏色啊字型啊什麼的,當然我們還可以加入其他功能比如設定下劃線啊什麼的。當然對於這個例子抽象成物件有點小題大做,這裡僅作演示用。以後我可能會介紹我編寫的一個jQuery外掛SlipHover,其中程式碼就比較多,這樣的模式就用得上了。

所以我們新建一個物件命名為Beautifier,然後我們在外掛裡使用這個物件來編碼。

//定義Beautifier的建構函式
var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定義Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}
//在外掛中使用Beautifier物件
$.fn.myPlugin = function(options) {
    //建立Beautifier的實體
    var beautifier = new Beautifier(this, options);
    //呼叫其方法
    return beautifier.beautify();
}

通過上面這樣一改造,我們的程式碼變得更面向物件了,也更好維護和理解,以後要加新功能新方法,只需向物件新增新變數及方法即可,然後在外掛裡實例化後即可呼叫新新增的東西。

外掛的呼叫還是一樣的,我們對程式碼的改動並不影響外掛其他地方,只是將程式碼的組織結構改動了而以。

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
})

指定文字帶下劃線(我們在Beautifier物件中新加的功能,預設不帶下劃線,如上面的例子)的呼叫:

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px',
        'textDecoration': 'underline'
    });
})

到這裡,你可以更好地編寫複雜的外掛同時很好地組織程式碼了。當我們回頭去看上面的程式碼時,其實也還是有改進空間的。也就是下面介紹的關於名稱空間及變數各什麼的,一些雜項。

關於名稱空間

不僅僅是jQuery外掛的開發,我們在寫任何JS程式碼時都應該注意的一點是不要汙染全域性名稱空間。因為隨著你程式碼的增多,如果有意無意在全域性範圍內定義一些變數的話,最後很難維護,也容易跟別人寫的程式碼有衝突。

比如你在程式碼中向全域性window物件添加了一個變數status用於存放狀態,同時頁面中引用了另一個別人寫的庫,也向全域性添加了這樣一個同名變數,最後的結果肯定不是你想要的。所以不到萬不得已,一般我們不會將變數定義成全域性的。

一個好的做法是始終用自呼叫匿名函式包裹你的程式碼,這樣就可以完全放心,安全地將它用於任何地方了,絕對沒有衝突。

用自呼叫匿名函式包裹你的程式碼

我們知道JavaScript中無法用花括號方便地建立作用域,但函式卻可以形成一個作用域,域內的程式碼是無法被外界訪問的。如果我們將自己的程式碼放入一個函式中,那麼就不會汙染全域性名稱空間,同時不會和別的程式碼衝突。

如上面我們定義了一個Beautifier全域性變數,它會被附到全域性的window物件上,為了防止這種事情發生,你或許會說,把所有程式碼放到jQuery的外掛定義程式碼裡面去啊,也就是放到$.fn.myPlugin裡面。這樣做倒也是種選擇。但會讓我們實際跟外掛定義有關的程式碼變得臃腫,而在$.fn.myPlugin裡面我們其實應該更專注於外掛的呼叫,以及如何與jQuery互動。

所以保持原來的程式碼不變,我們將所有程式碼用自呼叫匿名函式包裹。

(function() {
    //定義Beautifier的建構函式
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定義Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在外掛中使用Beautifier物件
    $.fn.myPlugin = function(options) {
        //建立Beautifier的實體
        var beautifier = new Beautifier(this, options);
        //呼叫其方法
        return beautifier.beautify();
    }
})();

這樣做的好處,也就是上面所闡述的那樣。另外還有一個好處就是,自呼叫匿名函式裡面的程式碼會在第一時間執行,頁面準備好過後,上面的程式碼就將外掛準備好了,以方便在後面的程式碼中使用外掛。

目前為止似乎接近完美了。如果再考慮到其他一些因素,比如我們將這段程式碼放到頁面後,前面別人寫的程式碼沒有用分號結尾,或者前面的程式碼將window, undefined等這些系統變數或者關鍵字修改掉了,正好我們又在自己的程式碼裡面進行了使用,那結果也是不可預測的,這不是 我們想要的。我知道其實你還沒太明白,下面詳細介紹。

將系統變數以變數形式傳遞到外掛內部

來看下面的程式碼,你猜他會出現什麼結果?

var foo=function(){
    //別人的程式碼
}//注意這裡沒有用分號結尾

//開始我們的程式碼。。。
(function(){
    //我們的程式碼。。
    alert('Hello!');
})();

本來別人的程式碼也正常工作,只是最後定義的那個函式沒有用分號結尾而以,然後當頁面中引入我們的外掛時,報錯了,我們的程式碼無法正常執行。

原因是我們用來充當自呼叫匿名函式的第一對括號與上面別人定義的函式相連,因為中間沒有分號嘛,總之我們的程式碼無法正常解析了,所以報錯。

所以好的做法是我們在程式碼開頭加一個分號,這在任何時候都是一個好的習慣。

var foo=function(){
    //別人的程式碼
}//注意這裡沒有用分號結尾

//開始我們的程式碼。。。
;(function(){
    //我們的程式碼。。
    alert('Hello!');
})();

同時,將系統變數以引數形式傳遞到外掛內部也是個不錯的實踐。

當我們這樣做之後,window等系統變數在外掛內部就有了一個區域性的引用,可以提高訪問速度,會有些許效能的提升

最後我們得到一個非常安全結構良好的程式碼:

;(function($,window,document,undefined){
    //我們的程式碼。。
    //blah blah blah...
})(jQuery,window,document);

而至於這個undefined,稍微有意思一點,為了得到沒有被修改的undefined,我們並沒有傳遞這個引數,但卻在接收時接收了它,因為實際並沒有傳,所以‘undefined’那個位置接收到的就是真實的'undefined'了。是不是有點hack的味道,值得細細體會的技術,當然不是我發明的,都是從前人的經驗中學習。

所以最後我們的外掛成了這樣:

;(function($, window, document,undefined) {
    //定義Beautifier的建構函式
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定義Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在外掛中使用Beautifier物件
    $.fn.myPlugin = function(options) {
        //建立Beautifier的實體
        var beautifier = new Beautifier(this, options);
        //呼叫其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

一個安全,結構良好,組織有序的外掛編寫完成。

關於變數定義及命名

現在談談關於變數及方法等的命名,沒有硬性規定,但為了規範,遵循一些約定還是很有必要的。

變數定義:好的做法是把將要使用的變數名用一個var關鍵字一併定義在程式碼開頭,變數名間用逗號隔開。原因有二:

  • 一是便於理解,知道下面的程式碼會用到哪些變數,同時代碼顯得整潔且有規律,也方便管理,變數定義與邏輯程式碼分開;
  • 二是因為JavaScript中所有變數及函式名會自動提升,也稱之為JavaScript的Hoist特性,即使你將變數的定義穿插在邏輯程式碼中,在程式碼解析執行期間,這些變數的宣告還是被提升到了當前作用域最頂端的,所以我們將變數定義在一個作用域的開頭是更符合邏輯的一種做法。當然,再次說明這只是一種約定,不是必需的。

變數及函式命名 一般使用駝峰命名法(CamelCase),即首個單詞的首字母小寫,後面單詞首字母大寫,比如resultArray,requestAnimationFrame。對於常量,所有字母採用大寫,多個單詞用下劃線隔開,比如WIDTH=100,BRUSH_COLOR='#00ff00'。當變數是jQuery型別時,建議以$開頭,開始會不習慣,但經常用了之後會感覺很方便,因為可以很方便地將它與普通變數區別開來,一看到以$開頭我們就知道它是jQuery型別可以直接在其身上呼叫jQuery相關的方法,比如var $element=$('a'); 之後就可以在後面的程式碼中很方便地使用它,並且與其他變數容易區分開來。

引號的使用:既然都扯了這些與外掛主題無關的了,這裡再多說一句,一般HTML程式碼裡面使用雙引號,而在JavaScript中多用單引號,比如下面程式碼所示:

var name = 'Wayou';
document.getElementById(example).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號,JavaScript中保持單引號

一方面,HTML程式碼中本來就使用的是雙引號,另一方面,在JavaScript中引號中還需要引號的時候,要求我們單雙引號間隔著寫才是合法的語句,除非你使用轉意符那也是可以的。再者,堅持這樣的統一可以保持程式碼風格的一致,不會出現這裡字串用雙引號包著,另外的地方就在用單引號。

程式碼混淆與壓縮

進行完上面的步驟,已經小有所成了。或許你很早就注意到了,你下載的外掛裡面,一般都會提供一個壓縮的版本一般在檔名裡帶個'min'字樣。也就是minified的意思,壓縮濃縮後的版本。並且平時我們使用的jQuery也是官網提供的壓縮版本,jquery.min.js。

這裡的壓縮不是指程式碼進行功能上的壓縮,而是通過將程式碼裡面的變數名,方法函式名等等用更短的名稱來替換,並且刪除註釋(如果有的話)刪除程式碼間的空白及換行所得到的濃縮版本。同時由於程式碼裡面的各種名稱都已經被替代,別人無法閱讀和分清其邏輯,也起到了混淆程式碼的作用。

壓縮的好處

  • 原始碼經過混淆壓縮後,體積大大減小,使程式碼變得輕量級,同時加快了下載速度,兩面載入變快。比如正常jQuery v1.11.0的原始碼是276kb,而壓縮後的版本僅94.1kb!體積減小一半還多。這個體積的減小對於檔案下載速度的提升不可小覷。
  • 經過壓縮混淆後,程式碼還能閱讀嘛?當然不能,所以順帶還起到了程式碼保護的作用。當然只是針對你編寫了一些比較酷的程式碼又不想別人抄襲的情況。對於jQuery社群,這裡本身就是開源的世界,同時JavaScript這東西其實也沒什麼實質性方法可以防止別人檢視閱讀你的程式碼,畢竟有混淆就有反混淆工具,這裡程式碼壓縮更多的還是上面提到的壓縮檔案的作用,同時一定程度上防止別人抄襲。

工具

所使用的工具推崇的是Google開發的Closure Compiler。該工具需要Java環境的支援,所以使用前你可能需要先在機子上裝JRE, 然後再獲取Closure進行使用。

同時也有很多線上的程式碼混淆壓縮工具,用起來也很方便。這些工具都是一搜一大把的。

外掛釋出

這一步不是必需的,但本著把事情做完整的態度,同時你也許也希望有更多人看到或使用你的外掛吧。

  • 首先你需要將外掛程式碼放到GitHub上建立一個Service Hook,這樣做的目的是你以後更新的外掛後,jQuery可以自動去獲取新版本的資訊然後展示在外掛中心的頁面上。關於如何傳程式碼到GitHub,你去下載GitHub 提供的客戶端工具,就會知道如何操作了,非常方便。關於在GitHub建立Service Hook,也只是點幾下而以的事情。下面會截圖介紹。
  • 然後需要製作一個JSON格式的清單檔案,其中包括關於外掛的基本資訊,具體格式及引數可以在jQuery官網外掛釋出指南頁面瞭解到,這裡提供一個示例檔案,是我之前寫的一個jQuery外掛SlipHover
{
    "name": "sliphover",
    "title": "SlipHover",
    "description": "Apply direction aware  2D/3D hover effect to images",
    "keywords": [
        "direction-aware",
        "animation",
        "effect",
        "hover",
        "image",
        "overlay",
        "gallery"
    ],
    "version": "1.1.1",
    "author"
            
           

相關推薦

jQuery外掛開發精品教程jQuery提升一個臺階

要說jQuery 最成功的地方,我認為是它的可擴充套件性吸引了眾多開發者為其開發外掛,從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣,得平臺者得天下。蘋果,微軟,谷歌等巨頭,都有各自的平臺及生態圈。 學會使用jQuery並不難,因為它簡單易學,並且相信你接觸jQuery後肯定也使用或熟悉了不少其外掛

Android ROM製作教程擁有自己喜歡的ROM

作者斯文是我 關鍵詞:java環境配置 製作工具 update-編寫美化 整合 編譯反編譯 一. 製作目的: 1. 培養個人興趣,感受動手動腦的快樂。 2. 學習手機基本知識,最終動手製作自己的ROM。 3. 幫助那些需要幫助的朋友(說不定有人喜歡你製作的ROM) 二.

iO開發 -Masonry學習一看就會用一看就能上手專案

在這裡問下大家,用的約束方式是哪種?近年來,約束這件事情在開發中的分量越來越重,不同機型的問世,使得原來使用係數的開發人員苦不堪言,一開始約束的使用讓很多人很不習慣,網上給出的Demo也層出不全,沒有人真正告訴你該怎麼來寫一個tableview,怎麼來寫一個scrollView,這對於不

Ubuntu完全教程成為Ubuntu高手!

Ubuntu的發音 Ubuntu,源於非洲祖魯人和科薩人的語言,發作 oo-boon-too 的音。瞭解發音是有意義的,您不是第一個為此困惑的人,當然,也不會是最後一個:) 大多數的美國人讀 ubuntu 時,將 u 作為母音發音,類似單詞 who 或者 boo ,重音在第二個音節即 u'buntu

谷歌瀏覽器擴充套件程式一鍵解決本地開發跨域問題不用亂mock資料

谷歌瀏覽器擴充套件程式一鍵解決本地開發跨域問題,讓你不用亂mock資料 1.在谷歌瀏覽器中開啟它的網上應用商店 (需要翻牆);如果你無法翻牆可以下載我的這個工具包 1.1工具包用法:在谷歌瀏覽器上輸入:chrome://extensions/ 進入拓展管理介面然後將剛剛下載的工具包中的1

這30個以太坊開發示例成為80萬都挖不走的區塊鏈人才!

2018年已過了大半,幣圈跌跌蕩蕩,而鏈圈的人在等待鳳凰涅槃,熊市專心做技術,牛市才能一展身手、衝破雲霄! 本文主要告訴你,如何成為一名優秀的以太坊開發者! 如果你是以太坊開發者中的“老司機”,請直接看最後一部分:30個為你量身定做的挑戰示例! 如果你是以太坊

一個demo開發週期縮短一半

先上github地址點選開啟連結 由於現在java後端開發經常使用SSM框架,SpringMVC+Spring+MyBatis。因此作者維護了一個開源小demo,此demo中採用了JAVA專案常用的分層結構,從上到下依次是表現層(controller)業務層(service)資料訪問層(dao

打造高逼格的開發利器的程式碼敲出打字機的效果甚至更……

作為程式設計師程式設計是非常重要的,但是在程式設計之餘更為重要,更為好玩的一件事就是:打造自己敲程式碼的編輯器。我相信很多人都給自己的程式碼編輯器,檢視器,IDE 等打造過各種風格,各種樣式的主題,以顯得自己敲程式碼的工具更加有逼格,更加炫酷。 說實話,適合編

jQuery外掛開發全解析,jQuery.extend , (function($){ , $.fn.pluginNamejqueryAPI參考文件

http://www.w3school.com.cn/jquery/event_focus.asp     jqueryAPI參考文件 序:匿名函式,匿名函式沒有實際名字,也沒有指標,怎麼執行滴?  其實大家可以看看小括號的意義就應該可以理解。小括號有返回值,也就是

嵌入式伺服器jetty更快開發web

概述 jetty是什麼? jetty是輕量級的web伺服器和servlet引擎。 它的最大特點是:可以很方便的作為嵌入式伺服器。 它是eclipse的一個開源專案。不用懷疑,就是你常用的那個eclipse。 它是使用Java開發的,所以天然對Java支援良好。 官方網址 什

Android開發之神奇的Fading Edge的View更有層次感!

最近在研究Android Framework層原始碼,發現我們對原始碼的理解應該建立在對API的理解之上,如果有一些API你沒用過,那麼即使你在原始碼中見到這個東西都不知道是幹嘛的,更談不上理解了。一直以來我都很想把View的繪製方法draw詳細的走一遍,但是這裡涉及到的細節

【Android遊戲開發二十】物理遊戲之重力系統開發的遊戲變得有質有量!

原創,轉載務必在明顯處註明:    今天群裡一哥哥說急需關於物理遊戲方面的資料,so~下午就隨手寫了一個簡單的圓形自由落體Demo,正好一起分享給大家學習下吧;    先大概說一下,之前的文章中,給大家介紹過重力感測器,那麼和今天要說的重力系統,其實是一樣的!    在重力感

【實用工具】這些不得不知道的chrome外掛事半功倍

平時chrome外掛用多了,發現在工作中有很多外掛特別好用,讓你事半功倍。於是我抽時間整理了一些非常好用的chrome外掛分享給大家,其中有些外掛是我已經離不開,每天都在用的。希望這篇文章能幫助你找到適合你的外掛,提升工作效率。 工作類 FeHelper【強烈推薦】 FeHelper是一個Web前端助手,由中

夏日葵電商:了解這些的微信分銷系統更強大

尋找 傳統 影響力 今天 營銷 其他 方式 成本 全部 夏日葵電商:了解這些,讓你的微信分銷系統更強大 隨著網購的不斷普及,很多傳統企業都開始轉向互聯網銷售,其中微信分銷系統是經常被選擇的對象。但是你真的知道微信分銷系統的可以做什麽不可以做什麽?今天就讓夏日葵電商為你總結一

H5響應式建站的網站隨“機”應變!

不同的 主動 成本 ima iis 決定 多網站 wid 市場 為什麽那麽多企業選擇了H5響應式網站呢?歸根結底莫過於H5響應式網站為企業帶來了更多的好處。無論是企業或個人都可以直接借助H5自助建站系統,下載適合自己的H5響應式網站模板進行網站的搭建,更加輕松簡便。

一個shell腳本的linux命令行酷炫起來

bashrc exe print eth1 ps1 sysv echo png end #!/bin/bash # This program is to modify showed marked## biaoshi.sh 207# by wangxi

四種設計風格的網站設計更有逼格

企業網站 網站設計 網站建設 自助建站 企業網站設計首先要了解客戶群體的瀏覽習慣,還有他們的喜好,企業網站建設之前需對消費者的行為進行分析,了解消費者在不同的年齡群、性別、職業等因素,分析這些消費者的需求,在設計網站的時候考慮這些因素,通過分析來提升公司的訂單量。你知道企業網站一般有哪些風格嗎

快速學習C語言途徑少走彎路

串處理 毫無 深入 中國人 sql 以及 ubi 思維 思路   1.標準C語言能幹什麽?   坦白講,在今天軟件已經發展了半個多世紀,單純的C語言什麽都幹不了。標準C語言庫只提供了一些通用的邏輯運算方法以及字符串處理,當然字符串在C語言看來也是一種操作內存的方法,所以單純

揭秘數據庫面試技術面試一次過

得此寶典 讓技術面試更簡單 大家可以叫我老張,網名superZS!一直從事數據庫行業10余年,工作於某數據庫服務公司,兼數據庫資深講師,就面試中大家遇到的比較困惑的數據庫問題,和剛進入數據庫領域的同學們,我在這裏給大家做一個詳細的總結,希望對大家在工作或者面試中有所幫助,老師會傾囊相授,道行尚淺,大家

一塊錢使用開發測試環境快速打造萬聖節促銷應用

然而 9.png desktop 國慶 結合 集中 images 機器 data- 作為一名兢兢業業的員工,我熱愛很多節日,比如:春節、勞動節、國慶節(放假的日子不要太爽好不啦),但是我也討厭很多節日,比如:情人節、教師節、萬聖節(又不放假,還要搞事情!)。節日期間總是企