jQuery返回定位插件详解

网络编程 2024/5/10 佚名

3 2 1

一、jQuery 提供开发者开发插件的几种模式

1.$.extend(); //这个方法是绑定在$上面的。可以通过$直接调用

2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用

3.$.widget //通过jQuery UI 部件工厂模式创建。

二、插件的开发过程

1.$.extend();

这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展.

eg:

//$.extend();为了防止，变量和方法之间的相互污染，我们采用闭包的模式。
  (function($,factory){
    var obj = factory();
    $.extend({
      sayHelloWorld:obj.firstApply,
    })
    $.secondApply = obj.secondApply;
  })(jQuery,function(){
    var obj = {
      firstApply(){
        console.log('hello world');
      },
      secondApply(){
        console.log('直接绑定到$上');
      },
    };
     return obj;
  });
  $.sayHelloWorld();//hello world
  $.secondApply(); //直接绑定到$上
   /*从上面的2种绑定方式可以看出用$.extend();对jQuery方法进行拓展，
   其实和直接绑定到$上是一样的效果*/

2.$.fn.方法名。 (方法名其实就是插件名)。

a.插件结构

<div id="app">app</div>
//$.fn.插件名字 (logText);
  (function($,factory){

    $.fn.logText = factory();
  })(jQuery,function(){
    var logText = function(){
      console.log(this.text());
      return this;
    }
    return logText;
  });
　　$("#app").logText(); //app  通过DOM元素之间调用该方法。并返回该对象。这也是jQuery实现链式操作的技巧。
  var h = $("#app").logText().height(); // app
  console.log(h); //18
 //这样就可以自定义方法了。

在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.

b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。

<div id="app">app</div>
   //$.fn.插件名字 (myPuglin);
  (function(global,$,factory){
    var common = factory(); //封装插件使用到的函数。
    $.fn.myPuglin = function(opts){  //插件的名称
      var defaults = {}; //默认的api
      opts = $.extend(defaults,opts || {}); //对api的拓展
      /*
       *
       * 要执行的功能
       * 
       */
      console.log(opts.hello);

      return this;
    }
  })(window,jQuery,function(){
    var common = {
      a(opt){
        return opt;
      },
    };
    return common;
  });
  $("#app").myPuglin({hello:'hello world'}); //hello world

准备工作已经完毕。那么下面会一个插件为列子，来讲解

3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位) savePositon(); $.fn.savePosition

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Title</title>
  <style>
    @media screen and (max-width: 319px) {
      html {
        font-size: 85.33333px; } }
    @media screen and (min-width: 320px) and (max-width: 359px) {
      html {
        font-size: 85.33333px; } }
    @media screen and (min-width: 360px) and (max-width: 374px) {
      html {
        font-size: 96px; } }
    @media screen and (min-width: 375px) and (max-width: 383px) {
      html {
        font-size: 100px; } }
    @media screen and (min-width: 384px) and (max-width: 399px) {
      html {
        font-size: 102.4px; } }
    @media screen and (min-width: 400px) and (max-width: 413px) {
      html {
        font-size: 106.66667px; } }
    @media screen and (min-width: 414px) {
      html {
        font-size: 110.4px; } }
    /*CSS Reset*/
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    header,
    hgroup,
    nav,
    section,
    article,
    aside,
    footer,
    figure,
    figcaption,
    menu,
    button {
      margin: 0;
      padding: 0; }
    li{
      list-style: none;
    }
    #app{
      width: 100%;
      max-width: 640px;
     }
    li {
      height: 1.2rem;
      width: 100%;
      border-bottom: 1px solid #cccccc;
      text-align: center;
      line-height: 1.2rem;
      font-size: 20px;
    }
  </style>
  <script src="/UploadFiles/2021-04-02/jquery.min.js">

这个返回定位的插件基本就开发完毕了。当然对于实际的项目中，还有很多的改动。比如返回的时候，一定要把设置的标志参数去掉。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

jquery返回顶部插件,jquery,定位插件,jquery返回定位插件

标签：