[Javascript] 外掛封裝

* 類級別封裝-相當於jQuery類的靜態函式

* 物件級別封裝

一. 類級別封裝方法

1.單個方法封裝

//封裝
jQuery.alert = function(name) {
alert(name);
}
//呼叫$.alert('aa')或jQuery.alert('aa')
$.alert('Mike');

2.多個方法封裝，呼叫$.warn('aa')或者jQuery.warn('aa')

<!DOCTYPE html>
<html>
<

head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
jQuery.warn('Mike');
});
});

//封裝
jQuery.extend({
alert: function(name) {
alert("alert:" + name);
},
warn: function(name) {
alert("warn:" + name);
}
});
</script>
</head>
<body>
<p>如果您點選我，我會消失。</p>
<p>點選我，我會消失。</p>
<p>也要點選我哦。</p>
</body>
</html>

3.域名呼叫，並封裝多個方法

<!DOCTYPE html>
<html

>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
//呼叫
jQuery.messager.warn('Mike');
});
});
//封裝
jQuery.messager = {
alert: function(name) {
alert("alert:" + name);
},
warn: function(name) {
alert("warn:" + name);
}
}
</script>
</head>
<body>
<p>如果您點選我，我會消失。</p>
<p>點選我，我會消失。</p>
<p>也要點選我哦。</p>
</body>
</html>

二. 物件級別的外掛開發

形式1：

<!DOCTYPE html>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
//重要:$.extend(obj)擴充套件的為jQuery類的靜態方法呼叫可採用如$.alert() 或直接alert()
//$.fn.extend(obj)擴充套件的為物件的方法，因此呼叫不能用$.alert(),要直接alert()
//呼叫
alert('Mike');
//報錯
//$.alert('Mike');
});
});
//宣告一個函式並立即執行函式，用$(形參)代替jQuery實參
$(function($) {
$.fn.extend({
alert: function(name) {
alert(name);
}
});
}(jQuery));
</script>
</head>
<body>
<p>如果您點選我，我會消失。</p>
<p>點選我，我會消失。</p>
<p>也要點選我哦。</p>
</body>
</html>

形式2

<!DOCTYPE html>
<html>
相關推薦

Javascript外掛封裝的基礎知識

引言由於一些特殊原因所以，這次就講解下基礎的js外掛封裝。既然需要封裝，那麼就需要一個封裝的容器，那這個容器是什麼？ 1.什麼是物件物件就是類似於類的一個例項比如同事是一個類，那我身邊的一個同事就是一個物件。如果舉個簡單的例子： var a =0；va

[Javascript] 外掛封裝

* 類級別封裝-相當於jQuery類的靜態函式 * 物件級別封裝一. 類級別封裝方法 1.單個方法封裝 //封裝   jQuery.alert = function(name) {       alert(nam

JavaScript如何封裝插件

是你 ble 傳參為什麽 title 默認避免 syn 需要什麽是封裝呢？我的理解就是把一個功能單獨做成一個組件，就像做餃子，以前做餃子必須自己先用面粉做餃子皮，再做餃子餡，然後再手工包餃子，但是現在人們發明了自動包餃子機器，雖然機器裏面的每一步驟和你自己包餃子是

推薦兩款基於Eclipse的Javascript外掛

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

Bootstrap——JavaScript外掛

1、輪播圖 role、aria-xx屬性，只跟語義相關。修改id名，也可以用section等代替最外層div。該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖，bootstrap.js會自動為當前元素新增圖片輪

如何開發JavaScript外掛

1、自身作用域獨立，私有變數不影響外部變數（閉包，延長外掛內部變數的生命週期） 2.、預設引數設定 3、基本功能+API，API可修改預設引數，支援自定義 4、監聽入口，針對指定元素進行監聽 5、避免命名衝突和全域性汙染，用全域性物件包裝，定義js物件接收工具函式 6、每個功能之

輕量高效的開源JavaScript外掛和庫【轉】

圖片 baguetteBox.js - 是一個簡單易用的響應式影象燈箱效果指令碼。demo Lightgallery.js - 是一個功能齊全的JavaScript影象燈箱外掛。demo viewerjs - 是一個影象預覽外掛。demo c

對java呼叫javascript的封裝

maven依賴 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>

Vue開發——使用JQ的zTree外掛封裝樹元件

版權宣告：本文為博主原創文章，未經博主允許不得轉載。   https://blog.csdn.net/guanguan0_0/article/details/80359601 1.通過npm安裝jquery npm install jquery --save-dev 2.

JavaScript：封裝一個String型別的trim方法

trim（）方法，刪除頭尾的空白串。 function myTrim(str) { if(str.slice(0,1) != " " && str.slice(-1) != " "){ return str; } else if

Fundebug前端JavaScript外掛更新至1.4.0

callback(event)callback是回撥函式，只能在JavasScript中配置:fundebug.callback = function(event) { console.log(event);};其中event為上報到Fundebug伺服器的錯誤資料，需要的話，您可以使用callback

Fundebug前端JavaScript外掛更新至1.3.0

摘要：將setHttpBody屬性設為true，即可以上報HTTP請求錯誤的body引數。為了保護隱私，預設情況下，Fundebug外掛不會上報HTTP請求的body引數。但是，有時這會影響使用者Debug，所以1.3.0外掛新增了setHttpBody配置屬性：在HTML中配置<script>

JavaScript的封裝與鏈式呼叫

原生的JavaScript操作,不僅僅程式碼長,而且還不容易記憶和使用,採用對原生的JavaScript程式碼進行封裝,採用程式設計中主流的面向物件的思維,即在方法中儘量採用屬性式的操作(get/set操作),這樣我們不僅僅可以簡化程式碼操作量,更加容易記憶

Bootstrap3.0學習第二十輪(JavaScript外掛——滾動監聽)

前言本文主要來學習一下JavaScript外掛--下拉選單。滾動監聽案例滾動監聽外掛可以根據滾動條的位置自動更新所對應的導航標記。你可以試試滾動這個頁面，看看左側導航的變化。先把實現的程式碼上了，你可以通過測試程式碼先來看看效果。 View Code 然後執行後，在內容下，也就是有滾動條哪裡滾

jquery 外掛封裝

目錄入門環境基礎知識維護Chainability 預設值和選項名稱空間外掛方法事件資料總結和最佳做法入門編寫一個jQuery外掛開始於給jQuery.fn加入新的功能屬性，此處新增的物件屬性的名稱就是你外掛的名稱：

Bootstrap學習筆記（八） Bootstrap支援的JavaScript外掛

Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：   ☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

推薦13款優秀的Twitter Bootstrap JavaScript外掛

Bootstrap是基於HTML，CSS和JavaScript的簡潔靈活的流行前端框架及互動元件集，由微博先驅Twitter在2011年8月開源的整套前端解決解決方案，擁有非常完備和詳盡的開發文件，有了它，Web開發人員能夠輕鬆搭建出清爽風格的介面以及實現良好的互動效果。

專案總結（關於swiper滑動外掛的slides總結和ionic3中基於swiper外掛封裝的ion-slides的使用的心得）

現在swiper滑動外掛已經更新到4.0的版本了，與之前的2.0和3.0的版本有了一些改動，所以寫的時候一定要注意，所以例如autoplay，之前autoplay的寫法autoply：3000，現在的寫法autoplay{delay:3000，stopOnLas

Bootstrap各JavaScript外掛的概述

都定義Plugin函式目前來看，定義Plugin是為了作為jquery的原型方法，可以作為jquery物件初始化的入口。 function Plugin(option) { return this.each(function () { var $this =

myeclise新增javascript外掛aptana方法及遇到問題的解決

近來，有空補一下前端知識。初識javascript開發利器aptana，在安裝的時候遇到了問題，然後解決。不免想記下這個過程，以期能為以後環境轉移能輕鬆一點，也希望能助人。我所用的環境是myecl

[Javascript] 外掛封裝

相關推薦