jquery如何封装插件(jquery封装的ajax)

jquery如何封装插件,jquery封装的ajax

内容导航：

如何封装jquery插件

jquery插件封装方法有几种

jquery自动完成后台数据如何封装

如何把jQuery写的插件封装起来

一、如何封装jquery插件

前言 如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui
内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：//sample:扩展jquery对象的方法，bold()用于加粗字体。(function
($) {$.({ “bold”: function () { ////// 加粗字体///return ({ fontWeight: “bold”
});}});})(jQuery);调用方式：这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。一、jquery的插件机制为了方便用户创建插件，jquery提供了()和()方法。1.
() 方法有一个重载。(object)
,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的
ajax方法都是用()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个(object)的例子：//扩展jQuery对象本身 ({
“minValue”: function (a, b) { ////// 比较两个值，返回最小值///return a < b ? a : b;},
“maxValue”: function (a, b) { ////// 比较两个值，返回最大值///return a > b ? a : b;}});
//调用var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等于 100var
max_v = $.maxValue(i, j); // max_v 等于 101重载版本：([deep], target, object1,
[objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。参数deep:
可选。如果设为true，则递归合并。target: 待修改对象。object1: 待合并到第一个对象的对象。objectN:
可选。待合并到第一个对象的对象。示例1：合并 settings 和 options，修改并返回 settings。var settings = {
validate: false, limit: 5, name: “foo” }; var options = { validate: true,
name: “bar” }; (settings, options);结果：settings == { validate: true, limit: 5,
name: “bar” }示例2：合并 defaults 和 options, 不修改 defaults。var empty = {}; var
defaults = { validate: false, limit: 5, name: “foo” }; var options = {
validate: true, name: “bar” }; var settings = (empty, defaults,
options);结果：settings == { validate: true, limit: 5, name: “bar” } empty == {
validate: true, limit: 5, name: “bar”
}这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。(object)扩展 jQuery
元素集来提供新的方法（通常用来制作插件）。首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。 = = {init: function(
selector, context ) {…..};};原来 =
，也就是jQuery对象的原型。那()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用(object)扩展的方法，
jQuery类的实例可以使用这个“成员函数”。(object)和(object)方法一定要区分开来。二、自执行的匿名函数/闭包1.
什么是自执行的匿名函数?它是指形如这样的函数: (function {// code})();2. 疑问 为什么(function {//
code})();可以被执行, 而function {// code}();却会报错?3. 分析(1). 首先, 要清楚两者的区别: (function
{// code})是表达式, function {// code}是函数声明.(2). 其次, js”预编译”的特点: js在”预编译”阶段,
会解释函数声明, 但却会忽略表式.(3). 当js执行到function() {//code}();时, 由于function()
{//code}在”预编译”阶段已经被解释过, js会跳过function(){//code}, 试图去执行();,
故会报错;当js执行到(function {// code})();时, 由于(function {// code})是表达式,
js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.另外，
函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……例如：bootstrap
框架中的插件写法：!function($){//do something;}(jQuery);和(function($){//do
something;})(jQuery);
是一回事。匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。例如：var
a=1;(function()(){var a=100;})();alert(a); //弹出 1更多 闭包和匿名函数 可查看
Javascript的匿名函数与自执行
这篇文章。三、一步一步封装JQuery插件接下来我们一起来写个高亮的jqury插件1.定一个闭包区域，防止插件”污染”//闭包限定命名空间(function
($) {})();(object)扩展jquery 方法，制作插件//闭包限定命名空间(function ($) {$.({
“highLight”:function(options){ //do something }});})();3.给插件默认参数，实现
插件的功能//闭包限定命名空间(function ($) {$.({ “highLight”: function (options) { var opts
= $.extend({}, defaluts, options); //使用 覆盖插件默认参数(function () { //这里的this 就是
jQuery对象//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。var $this = $(this);
//获取当前dom 的 jQuery对象，这里的this是当前循环的dom//根据参数来设置 dom的样式$({backgroundColor:
d,color: d});});}}); //默认参数var defaluts = {foreground: ‘red’,background:
‘yellow’};})();到这一步，高亮插件基本功能已经具备了。调用代码如下：$(function () {$(“p”).highLight();
//调用自定义 高亮插件});这里只能
直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：$(‘#id’).css({marginTop:’100px’}).addAttr(“title”,”测试“);
但是我们上面的插件，就不能这样链式调用了。比如：$(“p”).highLight().css({marginTop:’100px’});
//将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return
jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

二、jquery插件封装方法有几种

展开全部扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。
这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。
入门编写一个jQuery插件开始于给加入新的功能属性，此处添加的对象属性的名称就是你插件的名称： =
function(){//你自己的插件代码};用户非常喜欢的$符号哪里去了？
它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。
(function ($) {$. = function ()
{//你自己的插件代码};})(jQuery);在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
环境现在，我们可以开始编写实际的插件代码。
但是，在这之前，我们必须得对插件所处的环境有个概念。
在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象，
这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。
这常常会导致开发者误将this关键字无谓的包在jQuery中，s = {type : ‘post’,
url : xxx,
data : {},
async : true,
success : function(result) {
alert(1111)
},
callback:function(){
alert(2222)
}
}

var _ajax = $.ajax;
$.ajax = function (s) {
var old = ;
= function (data, textstatus, jqxhr) {
alert(333)
if (data && ) {
eval();
}
if (old) {
old(data, textstatus, jqxhr);
}
};
_ajax(s);
};

$.ajax(s);开始，跳进你自定义的$.ajax = fuc/…..;
var old = ;
将 function(result) {
alert(1111)
};
赋值给 old。
这是为了保存之前定义的success
= function (data, textstatus, jqxhr) {
alert(333)
if (data && ) {
eval();
}
if (old) {
old(data, textstatus, jqxhr);
}
};
自己封装一个方法。
并修改参数s的success，让ajax执行完成之后执行这个方法而不是之前的alert(111)

_ajax(s);执行原生的ajax跳到指定的页面。

成功后跳到 = function (data, textstatus, jqxhr) {
alert(3333)
if (data && ) {
eval();
}
if (old) {
old(data, textstatus, jqxhr);
}
};

最后会依次弹出 3333 2222
1111展开全部根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：1.通过$.extend()来扩展jQuery2.通过$.fn
向jQuery添加新的方法3.通过$.widget()应用jQuery
UI的部件工厂方式创建通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。
第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，但用的不多。
而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素（$(‘div’).myfunction()）。

三、jquery自动完成后台数据如何封装

答：你可以从后台返回来值的时候，将值格式化成json对象，在前台接收后，可根据….等等来调用赋值希望能给你帮助。

四、如何把jQuery写的插件封装起来

第一种，只是封装统一的方法，方法整个项目调用，达到统一的效果；第二种，是和页面一起封装，比如封装一个客户页面有来选择客户，之后无论那个页面，只要调用customSelection()方法，就能弹出客户选择器？