5 种声明 jQuery function 的方法

发布于: 2 February, 2014
分享:

1. 基础的 Javascript 函数

这是在 JavaScript 中声明函数的最简单方式。例如,我们想要编写一个简单的函数叫做 multiply(x,y),它接收两个参数 x 和 y,简单地将它们相乘并返回结果。以下是几种实现这个函数的方式:

function multiply(x,y) {
	return (x * y);
}
console.log(multiply(2,2)); //output: 4

如果你只是想要快速测试一些东西,也许这是唯一的情况下可以使用这种方式。但这并不是良好的编码习惯,也不促进代码的重用。

2. JavaScript functions for get/set

If you need a private utility for getting/setting/deleting model values then you can declare a function as a variable like this. This could be useful for assigning a variable upon declaration calculated by a function.

var multiply = function(x,y) { return (x * y); } console.log(multiply(2,2)); //output: 4//The same function but with a self execution to set the value of the variable: var multiply = function(x,y) { return (x * y); }(2,2); console.log(multiply); //output: 4 

3. Create your own jQuery function

This is an awesome way to declare functions that can be used just like your regular jQuery functions, on your DOM elements! Rememeber jQuery.fn is just an alias for jQuery.prototype (which just saves us time when coding such jQuery.fn.init.prototype = jQuery.fn = $.fn as such).

jQuery.fn.extend({ zigzag: function () { var text = $(this).text(); var zigzagText = ''; var toggle = true; //lower/uppper toggle $.each(text, function(i, nome) { zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase(); toggle = (toggle) ? false : true; }); return zigzagText; } });console.log($('#tagline').zigzag()); //output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs & cOdE SnIpPeTs.  //chained example console.log($('#tagline').zigzag().toLowerCase()); //output: #1 jquery blog for your daily news, plugins, tuts/tips & code snippets.

Don’t forget to return the element so that you can chain jQuery functions together.

4. Extend Existing jQuery Functions

(or which either extend existing jQuery functions with extra functionality or creating your own functions that can be called using the jQuery namespace (usually, we use the $ sign to represent the jQuery namespace). In this example the $.fn.each function has been modified with custom behaviour.

(function($){// maintain a to the existing function var oldEachFn = $.fn.each;  $.fn.each = function() { // original behavior - use function.apply to preserve context var ret = oldEachFn.apply(this, arguments); // add custom behaviour try { // change background colour $(this).css({'background-color':'orange'}); // add a message var msg = 'Danger high voltage!'; $(this).prepend(msg); } catch(e) { console.log(e); } // preserve return value (probably the jQuery object...) return ret; } // run the $.fn.each function as normal $('p').each(function(i,v) { console.log(i,v); }); //output: all paragrahs on page now appear with orange background and high voltage! })(jQuery);

5. Functions in custom namespaces

If your writing functions in a custom namespace you must declare them in this way. Extra functions can be added to the namespace you just need to add a comma after each one (except the last one!). If your unsure about namespacing see jQuery Function Namespacing in Plain English

JQUERY4U = { multiply: function(x,y) { return (x * y); } } //function call JQUERY4U.multiply(2,2);

分享:

0 留言

留言

您的留言将被人工审核,请勿发表色情、反动言论。

您可能感兴趣

如何编译你的专属 CKEditor 5

CKEditor 目前最新版本 CKEditor 5 是目前笔者认为最好用的可见即可得文本编辑器,功能强大,界面简洁现代...

Ubuntu 服务器 18.04 平台下搭建 Node.js 应用程序服务器

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-...