原生js怎么封装插件（原生js怎么封装插件的）

25-02-07 16

如果您想了解原生js怎么封装插件和原生js怎么封装插件的的知识，那么本篇文章将是您的不二之选。我们将深入剖析原生js怎么封装插件的各个方面，并为您解答原生js怎么封装插件的的疑在这篇文章中，我们将为您

如果您想了解原生js怎么封装插件和原生js怎么封装插件的的知识，那么本篇文章将是您的不二之选。我们将深入剖析原生js怎么封装插件的各个方面，并为您解答原生js怎么封装插件的的疑在这篇文章中，我们将为您介绍原生js怎么封装插件的相关知识，同时也会详细的解释原生js怎么封装插件的的运用方法，并给出实际的案例分析，希望能帮助到您！

本文目录一览：

原生js怎么封装插件（原生js怎么封装插件的）
Hooks怎么封装与使用
jquery怎么封装插件
JS封装插件案例
js怎么封装Canvas成插件

原生js怎么封装插件（原生js怎么封装插件的）

这次给大家带来原生js怎么封装插件，原生js封装插件的注意事项有哪些，下面就是实战案例，一起来看一下。

今天介绍一下怎么写属于自己的插件，建议看之前温习一下面向对象；
我就写个简单的重置样式的插件，话不多说先上代码；

//SetStyles.js
(function(win, doc) {
    var defaultSettings = {
        color: red,
        background: blue,
        border: 2px solid #000,
        fontSize:30px,
        textAlign:center,
        width:200px,
        borderRadius:5px
    };
    function SetStyles(options) {
        var self = this;
        //没传配置项自己丢错
        if(!options) {
            throw new Error(请传入配置参数);
        }
        self = Object.assign(self, defaultSettings, options);
        self.container = doc.querySelector(self.container) || doc.querySelectorAll(self.container);
        self._changeStyles();
    }
    SetStyles.prototype = {
        _changeStyles: function() {
            var self = this;
            for(var pro in self) {
                if(pro == container) {
                    continue;
                }
                if(pro == 'text' && typeof self[pro]== 'string') {
                    self.container.innerText = self[pro];
                    continue;
                }else if(pro == 'text' && typeof self[pro]== 'function'){
                    self.container.innerText = self[pro]();
                    continue;
                }
                self.container.style[pro] = self[pro];
            }
        }
    }
    win.SetStyles = SetStyles;
})(window, document)
  //调用
    var a = new SetStyles({
            container:#test,
            background:#fff,
            textAlign:center,
            text:function(){
                return 我是文本;
            }
        });    //text参数格式字符串或者函数
    //container用的querySelectAll方法，参数一致
    //其他css参数为字符串

我的这份代码应该足够简单，看不懂的说明基础还不够哦，自己敲一敲，有问题的地方,自己console.log一下吧。
首先定义下一默认的参数defaultSettings
然后写个构造函数，里面为什么要用Object.assign合并对象，因为默认配置里有的你不一定全都写，不写的就默认为默认参数，有的就选择你写的参数，所以options放在后面；
最后把方法写在原型里。
方法一般写在原型里，属性写在构造函数里。
大家应该都能看的懂这段代码的功能，重置css样式，和jquery的css()函数类似。
但是不推荐大家用这个，毕竟遵循原则，尽量少用js去操作dom，毕竟这种代价是很昂贵的，我写这个只是为了让大家了解一下如何封装插件，要去更改css样式，不如多写几个类，要用那种样式，换个类名就行。

相信看了这些案例你已经掌握了方法，更多精彩请关注小编网其它相关文章！

Hooks是什么？

本篇文章主要介绍Hooks如何在React与Vue3两大框架中封装使用。

Hooks就是当代码执行在某个执行阶段，触发被钩子钩到的事件函数或者回调函数，Hooks的概念最早在React的V16.8.0版本正式推出,后面Vue3的出现也引入Hooks的概念，两者使用Hooks还是会有所差异。

Hooks解决了什么？

完善代码能力
组件逻辑复用

HOC与HOOK对比

HOC概念：hoc是React中用于重用组件逻辑的一种高级技术实现模式,它本身是一个函数,接受一个组件并返回一个新的组件

function Hocomponent(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    } 
    render() {
      // ... 并使用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

上边的例子可以看出高阶组件内部返回了一个类组件，通过这个类组件对WrappedComponent进行包装，在返回得到一个全新的组件。但是HOC的缺点就是props可能会被覆盖，而且容易产生嵌套地域。

Hooks

react-hooks的出现主要弥补函数组件无状态无生命周期问题等，主要应对class复杂组件变的难以理解，逻辑混乱，不易拆解和测试与嵌套地域问题。

分别使用React与Vue3两种框架封装useThrottle钩子函数

React实现节流Hooks

import { useState, useCallback } from "react"; 
export function useThrottleFn(fn, time) {
    let [isTimer,setIsTimer] = useState<any>(null);  
    const clear = () => {
        clearTimeout(isTimer);
        setIsTimer(null) 
    } 
    let throttle = useCallback(()=>{ 
        if (!isTimer) {
            setIsTimer(setTimeout(() => {
                fn()
                clear() 
            }, time)) 
        }
    },[fn, time])
    return [throttle]
}
// 引入使用
  const [throttle] = useThrottleFn((e)=>{
        console.log(e)
    },500)
    const Ceshi  = ()=>{
        let e = 'Hooks'
        throttle(e);
    }

React内部也存在很多的Hooks钩子，常用的钩子：

useState,useMemo,useCallback,useRef,useContext,但是这些钩子必须在函数组件中使用并且在函数组件中使用钩子需要在组件顶层调用，不能在Class中使用。这样一来让我们可以挥手告别this.xxx的时代。

Vue3实现节流Hooks

import { ref, unref, watch } from 'vue';
import { useTimeouts } from './useTimeout';
/**
 *
 * @param fn 回调函数
 * @param wait 延迟时间
 * @returns
 */
export function useThrottleFn(fn, wait = 80) {
  if (typeof fn !== 'function') {
    return;
  }
  let Timer: any = null;  
  const isReady = ref<Boolean>(false);
  const clearun = () => {
    Timer && clearTimeout(Timer);
  };
  // 闭包实现节流封装   
  return function () {
    const _this = this;
    const args = arguments;
    // 更改状态触发watch监听，触发回调函数fn
    const startFun = function () {
      isReady.value = true;
    };
    // 这里利用watch监听isReady的状态变化执行回到函数，而不是直接将回调函数放在定时器中
    watch(
      () => unref(isReady),
      () => {
        if (unref(isReady) && Timer) {
          fn.apply(_this, args);
          isReady.value = false;
          Timer = null;
          clearun();
        }
      },
    );
    // Timer 如果不存在就开始执行
    if (!Timer) {
      Timer = setTimeout(startFun, wait);
    }
  };
}
// 引入使用
const Ceshi = useThrottleFn(()=>{
      console.log('Hooks')
},300)

Vue3的发布随之带来了很多新特性比如从选项式API到组合式API，引入Hooks等。那这里在介绍一个新的工具库Vueuse，Vueuse 基于Vue-demi封装了大量的钩子工具函数，比如useDark,usetoggle其他点击Vueuse文档查看更多，并且在Vue2与Vue3都可以使用。当然我们也可以自己自定义按需求封装Hooks,但在Vue3中使用Hooks需要在setup中使用，由setup作为组合式API的入口点，在Vue2使用需要安装VueCompositionApi进行使用。

以上就是“Hooks怎么封装与使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注小编行业资讯频道。

jquery怎么封装插件

在网页开发中，jquery是一个非常流行的javascript库。jquery有着丰富的插件生态，这是因为它提供了一种便捷的插件封装方式，允许我们将重复使用的代码封装成插件，便于在项目中重复使用。

本文将介绍jquery插件的封装方式，从而帮助您快速编写高效的代码。

一、插件的基本结构

一个jquery插件包含以下几个部分：

1.插件名称
2.默认参数
3.插件主体函数
4.扩展方法
5.实例对象

下面我们将逐一介绍这些部分。

1.插件名称

插件名称很重要，它应该具有描述性并清晰易懂。我们应该避免使用过于简洁或过于笼统的名称。例如： "myPlugin"或"pluginLibrary1"并没有提供太多的信息。一个好的插件名称可以帮助别人更好地理解我们的插件。

2.默认参数

我们的插件应该具有默认参数，以允许用户在不指定参数时使用插件。默认参数应该被详尽地定义，以避免任何不必要的猜测。

3.插件主体函数

这是插件的核心功能所在的地方。在函数内部，我们将完成所有必需的代码。该函数应具有一个参数，这个参数是对象属性，用于传递用户定义的参数和配置信息。下面是一个示例代码：

(function($){

$.fn.myPlugin = function(options){
   var settings = $.extend({
        //在这里定义默认参数
    }, options);        
   //插件主体函数
}

登录后复制

}(jQuery));

第一行代码是一个自运行的匿名函数，它的参数是jQuery。该参数$被引用是为了确保$别名在插件内部可用。该插件函数被挂载在jQuery.fn上，使它变成了一个jQuery插件。

$.fn.myPlugin是插件的名称，而options是我们传递给插件的配置对象。

4.扩展方法

扩展方法是指我们可以将插件扩展成更多的功能。我们可以为插件添加更多方法。它们应该是作为新函数内部的对象，因为它们具有不同的功能。

有时，我们还会使用内部方法，因此不需要将它们作为独立的方法公开。这些方法不会被其他插件使用。

例如：

(function($){

$.fn.myPlugin = function(options){
    var settings = $.extend({
        //默认配置项
    }, options);
    var methods = {
      init: function(){},
      verify: function(){},
      processData: function(){}
    };
    //插件主体函数
    function mainFunc(){
        methods.init();
        methods.verify();
        methods.processData();
    }
    return this.each(function(){
        mainFunc();
    });
};

登录后复制

}(jQuery));

在上面的示例中，我们在插件内部使用对象 "方法" 来定义 "init", "verify" 和 "processData" 方法。

5.实例对象

最后，我们需要为插件创建一个实例对象。这是通过使用jquery $.data()实现的。$.data()方法允许我们将数据附加到一个元素上，这样我们的插件就可以在其上使用。下面是一个示例：

(function($){

$.fn.myPlugin = function(options){
   var settings = $.extend({
        //默认配置项
    }, options);
    var methods = {
        //插件方法 
    };        
    //插件主体函数
    function main(){
        //核心功能代码
    }       
    return this.each(function(){
        //获取jQuery对象
        var $this = $(this);
        
        //检测我们的插件是否已经应用
        var data = $this.data(''myPlugin'');
        
        //如果插件未被初始化，则初始化插件
        if(!data){
            $this.data(''myPlugin'', {
                target: $this,
                methods: methods
            });
            main();
        }
    });
};

登录后复制

}(jQuery));

在这个示例中，我们首先使用jQuery对象获取当前元素。然后，我们检查该元素是否已经包含了我们的插件信息，如果没有的话，就将该信息添加到元素的数据中 -- 数据名称为myPlugin。

以上就是基本结构。接下来，我们将为您展示如何定义一些常见的功能来扩展您的插件。

二、扩展插件功能

在使用jQuery编写插件时，我们可以添加各种不同的功能来扩展插件功能。下面是几个示例来帮助您理解：

1.添加样式

您可以通过使用CSS样式表为您的插件添加样式。您可以将这些样式放在您插件的颜色配置选项中。如下所示：

$.fn.myPlugin = function(options){

var settings = $.extend({
    color: ''#ffffff''
}, options);

return this.each(function(){
    $(this).css(''color'', settings.color);
});

登录后复制

}

在上面的例子中，我们将用户指定的颜色添加到元素的样式属性中。

2.事件处理

您还可以添加事件处理功能来响应您的插件行为。例如，您可以添加一个鼠标单击事件如下所示：

$.fn.myPlugin = function(options){

var settings = $.extend({
   onClick: function(){}
}, options);

return this.each(function(){
    $(this).click(function(event){
        event.preventDefault();
        settings.onClick.call(this, event);
    });
});

登录后复制

};

在上面的示例中，我们首先创建了一个默认的 onClick 函数，然后将其与用户的配置合并。然后，我们将单击事件绑定到每个元素上。当事件被触发时，我们会调用配置的 onClick 函数，并在当前元素上触发它。

实现链式调用

jQuery经常被称为链式调用的Javascript库，因为它允许您将所有DOM操作链接在一起。这一特性同样可以应用到您的插件上，以提供一种链式API来使用您的插件。

例如，我们可以为我们的插件添加一个setOption方法，然后使它可以实现链式调用。如下所示：

$.fn.myPlugin = function(options){

var settings = $.extend({
   onClick: function(){},
   option: null
}, options);

var methods = {
    setOption: function(option){
        return this.each(function(){
            $(this).data(''option'', option);
        });
    }
}

return this.each(function(){
    //实现链式调用
    var $this = $(this).data(''myPlugin'',{''methods'': methods});
    $this.data(''option'', settings.option);
    
    $this.click(function(event){
        event.preventDefault();
        settings.onClick.call(this, event, $this.data(''option''));
    });
});

登录后复制

};

在上面示例中，我们在方法中添加了setOption函数，然后通过它实现了链式调用。在下面的代码中，我们将展示如何使用链式调用来设置选项：

$("#my-element").myPlugin().myPlugin(''setOption'', {

option: ''myOption''

登录后复制

});

在上面的例子中，首先调用myPlugin() 方法，这将创建一个myPlugin对象。然后通过这个对象调用setOption方法，并将选项对象传递给它。这样，我们就实现了链式调用。

对外公开API

我们可以使用 jQuery.fn.extend() 方法扩展对外公开的API。这样就可以在很多不同的方法中重用代码。下面是一个示例：

$.fn.myPlugin = function(){

var methods = {
    method1: function(){
        console.log(''method1'');
        return this;
    },
    method2: function(){
        console.log(''method2'');
        return this;
    }
};
this.method1 = methods.method1;
this.method2 = methods.method2;
return this;

登录后复制

};

在上面示例中，我们使用this关键字将每个方法都添加到了插件函数上。这意味着每次我们调用myPlugin()方法时，我们都可以直接调用这些方法。

我们可以通过使用如下代码来调用这个函数：

$("#my-element").myPlugin().method1().method2();

以上是本文的内容，希望通过这些例子能够帮助您更好地理解jQuery插件封装，从而开发更高效的插件。

以上就是jquery怎么封装插件的详细内容，更多请关注php中文网其它相关文章！

JS封装插件案例

这次给大家带来JS封装插件案例，JS封装插件的注意事项有哪些，下面就是实战案例，一起来看一下。

由于项目原因，工作一年多还没用js写过插件，项目太成熟，平时基本都是在使用已经封装好的功能插件。感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件，所以就去网上学习了下如何封装.....虽然之前看了很多源码，但是感觉就算了解也是野路子.....

什么是封装呢？

我的理解就是把一个功能单独做成一个组件，就像做饺子，以前做饺子必须自己先用面粉做饺子皮，再做饺子馅，然后再手工包饺子，但是现在人们发明了自动包饺子机器，虽然机器里面的每一步骤和你自己包饺子是一样的，但是实际上你现在需要做的就只有一件事，就是放原料。这边机器就是封装好的插件，而原料就是你要传的参数

为什么要把js功能封装成插件呢？我觉得有以下几点吧

1、便于代码复用

2、避免各个相同功能组件的干扰，可能会有作用域的一些问题吧

3、便于维护，同时利于项目积累

4、不觉得一直复制粘贴很low么.......

我在网上看到的封装好像有两种，一种是js的原生封装，一种是jquery的封装。这边我先讲一下原生封装吧。

我们在封装的时候会把js代码放到一个自执行函数里面，这样可以防止变量冲突。

(function(){
  ......
  ......
}()}

登录后复制

然后再创建一个构造函数

(function(){
  var demo = function(options){
    ......
  }
}())

登录后复制

把这个函数暴露给外部，以便全局调用

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

登录后复制

其实现在你可以直接调用了，封装好了，虽然没实现什么功能

var ss = new demo({
  x:1,
  y:2
})；

登录后复制

或者

new demo({
  x:2,
  y:3
})；

登录后复制

然后传参怎么搞呢，我们一个插件一般有一些必选参数或者可选参数，在我看来可选参数不过就是在插件里面给了默认值罢了。我们传的参数会覆盖插件中的默认参数，可以用$.extend({})覆盖

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

登录后复制

然后你可以在在初始化构造函数的时候执行一些操作

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});

登录后复制

我这边有个疑问，extend只是jquery有吗，js对象有什么代替方法吗？晚点在看看.............

还有需要提的是封装js的时候我们要考虑周全，比如它的扩展性和兼容性，还有性能怎么样，还有没必要的就不需要封装了......要有选择性。

现在网上已经完成的插件数不胜数，而且功能又十分强大，但是恰恰是这点，有的时候一个很大的插件我们只用到很小的一部分，那么就需要我们自己修改成适合我们自己的了，而且有些项目的风格和现在的插件风格也不同，所以关键是要适合自己的项目。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！