由于项目原因，我已经一年多没有用js写插件了，项目太成熟了。通常，我基本上使用打包的功能插件。我感觉很低落.我想花点时间为canvas写一个插件，用来画这两天的统计数据和折扣图，于是上网学习如何打包.虽然之前看了很多源代码，但感觉就算看懂了，也是一种野路子。

什么是封装？

我的理解是把单一的功能做成一个组件，就像做饺子一样。以前做饺子，要先用面粉做饺子皮，再做饺子馅，然后用手包饺子。但是现在人们发明了一种自动包装饺子的机器。虽然机器里的每一步都和自己包装饺子一样，但其实现在你只需要做一件事，那就是放入原材料。这里的机器是一个打包好的插件，原材料就是你要传递的参数

为什么要把js函数打包成插件？我认为有以下几点

1.这便于代码重用

2.避免相同功能部件的干扰。范围可能有一些问题

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

4.你不觉得一直复制粘贴很低级吗.

我在网上看到的包好像有两种，一种是js的原生包，一种是jquery的包。先说说原生包装。

当我们封装时，我们会把js代码放入一个自执行函数中，这样可以防止变量的冲突。

(函数(){ 0..}()} ()}然后创建一个构造函数

(函数(){vardemo=函数(选项)}.}}())将此函数公开给外部进行全局调用

(函数(){ var demo=函数(选项)}.} window.demo=演示；}())其实现在可以直接调用了，而且是打包的，虽然没有实现任何功能

var ss=新演示({ x:1，y :2 })；或者

新演示({ x:2，y :3 })；那么，传递参数有什么不好呢？插件通常有一些必需的参数或可选的参数。在我看来，可选参数只是在插件中给出默认值。我们传递的参数将覆盖插件中的默认参数，这些参数可以用$覆盖。扩展({})

(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}());新演示({ 'x' :'5 '，' y ' : ' 4 ' })；/脚本是这样的。超级简单的包装

我有一个问题。extend只是jquery。js对象还有其他选择吗？稍后查看..

还有一点需要提到的是，我们在打包js的时候应该考虑一切，比如它的可扩展性和兼容性，以及它的性能，如果没有必要，也没有必要打包.它应该是有选择性的。

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。