1. 程式人生 > >JS中使用jquery方式建立名稱空間

JS中使用jquery方式建立名稱空間

    以下示例將展示建立名稱空間的高階方式 JS將擁有私有和共有屬性和方法並且可以具有類似JAVA繼承的功能

Here is their example showing how to declare private & public properties and functions. Everything is done as a self-executing anonymous function.

(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }
}( window.skillet = window.skillet || {}, jQuery ));
//Adding new Functionality to the skillet
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " +
                     skillet.ingredient + " & " +
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
    };
}( window.skillet = window.skillet || {}, jQuery ));
MY DEMO:

/**
 * 公告推送JS
 * Created by 許暢 on 2015-05-29.
 */
(function(notice, $, undefined) {

/**
 * 公告推送初始化
 * 
 * @return {[type]} [description]
 */
notice.init = function() {
var intro = introJs();
//註冊退出事件
intro.onexit(function() {
notice.exitNotice();
});
//註冊步驟完成事件
intro.oncomplete(function() {
notice.stepComplete();
});
//註冊步驟改變事件
intro.onchange(function(targetElement) {
notice.stepChange(targetElement);
});
intro.setOptions({
steps: scope.steps,
nextLabel: "下一條",
prevLabel: "上一條",
skipLabel: "跳過",
doneLabel: "關閉"
});
intro.start();
for (var i = 0; i < scope.steps.length; i++) {
if (i > 0) {
$(scope.steps[i].element).hide();
}
};
//CAP工作臺容器
$(".workbench-container").hide();
};


/**
 * 退出公告
 * 
 * @return {[type]} [description]
 */
notice.exitNotice = function() {
var closedNoticeIds = [];
scope.allNoticeIds.forEach(function(item, index, array) {
if ($.inArray(item, scope.readNoticeIds) == -1 && item != scope.currentNoticeId) {
closedNoticeIds.push(item);
}
});


dwr.TOPEngine.setAsync(false);
CapNoticeAction.closeNotice(closedNoticeIds, scope.currentNoticeId, {
callback: function(result) {},
errorHandler: function(message, exception) {}
});
dwr.TOPEngine.setAsync(true);
//重新整理公告iframe
$('#mainIframe').attr('src', $('#mainIframe').attr('src'));


$("#noticeIntroduce").hide();
$(".workbench-container").show();
};


/**
 * 公告步驟完成
 * 
 * @return {[type]} [description]
 */
notice.stepComplete = function() {};


/**
 * 步驟改變事件
 * 
 * @param  {[type]} targetElement [description]
 * @return {[type]}               [description]
 */
notice.stepChange = function(targetElement) {
dwr.TOPEngine.setAsync(false);
CapNoticeAction.readNotice({
id: scope.currentNoticeId
}, {
callback: function(result) {
//不存在readNoticeIds陣列中則新增
if ($.inArray(scope.currentNoticeId, scope.readNoticeIds) == -1) {
scope.readNoticeIds.push(scope.currentNoticeId);
}
//下個公告為當前公告id
scope.currentNoticeId = targetElement.id;
},
errorHandler: function(message, exception) {
scope.currentNoticeId = targetElement.id;
}
});
dwr.TOPEngine.setAsync(true);


//前端下一步顯示處理
$("#" + targetElement.id).show();
scope.steps.forEach(function(item, index, array) {
if (item.element != ("#" + targetElement.id)) {
$(item.element).hide();
}
});


};
}(window.notice = window.notice || {}, jQuery));


var scope = null;
angular.module('noticeIntroduce', ["ngSanitize"]).controller('noticeIntroduceController', function($scope, $timeout) {
$scope.introduce = {};
$scope.readNoticeIds = []; //已閱的公告id
$scope.currentNoticeId = ""; //當前公告id
$scope.allNoticeIds = [];
$scope.ready = function() {
$scope.init();
scope = $scope;
};


/**
 * 頁面初始化
 * 
 * @return {[type]} [description]
 */
$scope.init = function() {
dwr.TOPEngine.setAsync(false);
CapNoticeAction.queryCurrentUserCanPushsNotice({
callback: function(result) {
var steps = [];
if (result && result.length > 0) {
result.forEach(function(item, index, array) {
//處理前端id不能為數字問題
item.id = "_" + item.id;
steps.push({
element: "#" + item.id,
intro: item.title
});
if (index == 0) {
$scope.currentNoticeId = item.id;
}
$scope.allNoticeIds.push(item.id);
});
} else {
$("#noticeIntroduce").hide();
}
$scope.steps = steps;
$scope.introduce.notices = result;
},
errorHandler: function(message, exception) {
$scope.introduce.notices = [];
}
});
dwr.TOPEngine.setAsync(true);
};
});


//jquery初始化公告推送資訊
$(function() {
if (scope.steps && scope.steps.length > 0) {
notice.init();
}
});

相關推薦

JS使用jquery方式建立名稱空間

    以下示例將展示建立名稱空間的高階方式 JS將擁有私有和共有屬性和方法並且可以具有類似JAVA繼承的功能Here is their example showing how to declare private & public properties and

tensorflow的共享變數(sharing variables) 最佳方式variable_scope()名稱空間來完成

當訓練複雜模型時,可能經常需要共享大量的變數。例如,使用測試集來測試已訓練好的模型效能表現時,需要共享已訓練好模型的變數,如全連線層的權值。 而且我們還會遇到以下問題: 比如,我們建立了一個簡單的影象濾波器模型。如果只使用tf.Variable,那麼我們的模型可能如下 def my

在c++怎麼建立名稱空間

什麼是名稱空間呢?舉一個現實中的例子,名稱空間就像是一個企業,每個企業都有自己的員工。在這裡假設每一個員工代表一個類,於是每一個名稱空間中都包含若干個類。優於名稱空間不同,編譯器就可以將同名的類區別開來。這就像企業A中有個叫“張三”,企業B也有個叫“張三”的。但是由於兩個企

js 繼承方式小談

題外話 前段時間面試中筆試題有這道題目: 請實現一個繼承鏈,要求如下: 建構函式A():建構函式中有consoleA方法,可以實現console.log("a") 例項物件 a:a 可以呼叫consoleA方法 建構函式B():建構函式中有consoleB方法,可以實現console.log("

C++在另一個檔案建立名稱空間並呼叫

head.h #ifndef KW_H #define KW_H namespace kw { extern std::string name; } #endif // KW_H head.cpp #include <string> #includ

js函式物件建立的總結

在JavaScript的函式物件建立方法中,可以分為三種情況: 1:第一種是使用function語句定義函式 1 <script type="text/javascript"> 2 function fun1(){ 3 alert("我的第一個方法"); 4 } 5

js組合方式實現繼承例項

要點: 1.js非高階語言,而是一本輕量級的指令碼語言,本身沒有繼承的特性。但是,開發實踐中,利用繼承可以節省大量重複的物件的屬性和方法的定義,所以基於原型,達到曲線繼承。 2. 若直接修改原型的指向,如果建構函式需要接收值他們的引數是一致的,那麼初始化得到的物件屬性值都相同,想要修改只能通

kubernetes通過yaml建立名稱空間

1.建立namespace.yaml檔案 apiVersion: v1 kind: Namespace metadata:    name: dev    labels:      name: dev 2.執行kub

js陣列的建立和刪除

1、建立陣列  var array = new Array();  var array = new Array(size); //指定陣列的長度  var array = new Array(item1,item2……itemN); //建立陣列並賦值  2、取值、賦值  var item = array[

JS繼承方式總結

說在前面:為了使程式碼更為簡潔方便理解, 本文中的程式碼均將“非核心實現”部分的程式碼移出。 一、原型鏈方式關於原型鏈,可點選《深入淺出,JS原型鏈的工作原理》,本文不再重複敘述。 思路:讓子建構函式的原型等於父建構函式的例項 function A() { } A.pro

Oracle建立名稱空間和新使用者

Oracle安裝完後,其中有一個預設的資料庫,除了這個預設的資料庫外,我們還可以建立自己的資料庫。 為了避免麻煩,可以用’Database Configuration Assistant’嚮導來建立資料庫(這步一定要建立好,因為這裡沒有做好,會在建立表空間時出錯—我就在這裡花了幾個小時,暈)。 建立完資料庫

ORACLE ASM環境刪除和建立空間、增加表空間資料檔案

 1、列出表空間 SQL> select name from v$tablespace; 刪除表空間,包括屬於它的資料檔案(物理上也同時刪除) SQL> drop tablespace qiu including contents and datafiles

laravel自動呼叫不用名稱空間的第三方類/全域性變數

關於配置 1、找到根目錄下的composer.json檔案 2、找到composer.json中定義的 "autoload": { "classmap": [ "database", "app/Http/util" //在這

js jquery的each迴圈和for迴圈的區別

each定義和用法each() 方法規定為每個匹配元素規定執行的函式。提示:返回 false 可用於及早停止迴圈。都知道在java中         continue,跳過本次迴圈   break   結束這個迴圈    return 結束方法那麼在js中,用jquery 

PHP的use、名稱空間、引入類檔案、自動載入類的理解

<div class="postBody"> <div id="cnblogs_post_body" class="cnblogs-markdown"><p>use只是使用了名稱空間,<br>

node.jsws模組建立服務端和客戶端,網頁客戶端

1.node.js中ws模組建立服務端// 載入node上websocket模組 ws; var ws = require("ws"); // 啟動基於websocket的伺服器,監聽我們的客戶端接入

js的物件建立的模式

開發十年,就只剩下這套架構體系了! >>>   

同一個POD預設共享哪些名稱空間

如果通過POD的形式來啟動多個容器那麼它們的名稱空間會是共享的麼,所以我這裡討論是在預設情況下同一個POD的不同容器的哪些名稱空間是打通的。這裡先說一下結論,共享的是UTS、IPC、NET、USER。 UTS名稱空間 主機名名稱空間,儲存核心名稱、版本以及主機名和域名。預設情況下同一個POD的不同容器是共享U

js位置、如何定義、呼叫、變數提升、事件繼承、名稱空間jquery外掛等等

js位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js程式碼位置</title> &

javaScript 建立物件的方式的四種模式探討,this指向問題,以及Jquery物件的建立

在javaScript中,建立物件一共有四種方式,廢話少說:看程式碼 1  Json格式,字面量方式建立: <script> var persion ={ name:"xiaoheng",