数码资讯
Javaｓｃｒｉｐｔ插件开发教程（1）
首先，开放分析 嗨，大家好！今天，这一系列文章主要是关于如何开发基于插件的Javaｓｃｒｉｐｔ开发，我想很多人不熟悉插件这个词。 有些人可能会调用组件或组件。这不重要。关键是看如何设计，如何做全面的考虑。这是本文的概念，我认为你是对的。 对jQuery插件的方式有一定的了解。我们一起讨论这个话题，最
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
首先，开放分析
嗨，大家好！今天，这一系列文章主要是关于如何开发基于插件的Javaｓｃｒｉｐｔ开发，我想很多人不熟悉插件这个词。
有些人可能会调用组件或组件。这不重要。关键是看如何设计，如何做全面的考虑。这是本文的概念，我认为你是对的。
对jQuery插件的方式有一定的了解。我们一起讨论这个话题，最后给出相关的实施计划，不断提高我们的能力。
二、输入插头
一般来说，jQuery插件的开发分为两种类型：一种是挂在jQuery命名空间中的全局函数，也可以是静态方法。
另一种是jQuery对象级别方法，它挂在jQuery原型下，因此选择器获得的jQuery对象实例也可以共享该方法。
（1）类级插件开发
对类级插件开发的最直接的理解是将类方法添加到类中，这可以理解为添加静态方法：
1.1添加一个全局函数，我们只需要下面的定义来查看代码：
复制代码代码如下所示：
$ =函数（）{
警惕你好，大熊王！；
}；
1.2添加一个以上的全局函数，可以定义如下：
复制代码代码如下所示：
扩展（{
你好：函数（名称）{
您的代码在这里
}，
世界：函数（）{
您的代码在这里
}
}）；
描述：美元。延长（目标，{ object1 }，{ objectn }）。该方法主要用于将两个或多个对象的内容或属性合并到第一个对象，并在合并后返回第一个对象。
如果该方法只有一个参数目标，则该参数将扩展jQuery的名称空间，也就是说，作为jQuery全局对象下的静态方法。
（2）对象级插件开发
对象级插件开发需要以下两种形式：
2.1美元的动态安装通过相关属性。fn.extend（）为原型。
复制代码代码如下所示：
（函数（$）{）
fn.extend（{美元。
pluginname：功能（选择）{
您的代码在这里
}
}）；
}（jQuery）；
2.2直接将动态属性添加到原型链中。
复制代码代码如下所示：
（函数（$）{）
美元。fn.pluginname =函数（）{
您的代码在这里
}；
}）（jQuery）；
说明：这两种方法是等价的，对于jQuery插件，基本功能可以很好地工作，但是对于复杂的插件，我们需要提供各种方法和私有函数。
您可以使用不同的名称空间为插件提供各种方式，但是添加太多的名称空间会使代码混乱和健壮，因此最好的解决方案是正确定义私有函数和方法。
因此，我们实现了由自执行函数和闭包相结合的模拟的私有插件单元，就像上面的例子一样。
（三）下面，给出实现过程的一个简单示例：
（1）HTML片段代码，如下所示：
复制代码代码如下所示：
＜div
Style= margin-top:10px;
边距：30px；
> 8
（2）data.json的定义如下：
复制代码代码如下所示：
{
文本：你好，大熊熊{ } }！；
}
（3）BBJS代码如下所示：
复制代码代码如下所示：
$（函数（）{（））
$（# BB）。Bigbear（）；
}）；
（函数（$）{）
美元。fn.bigbear =功能（选择）{
选择（美元。fn.bigbear.defaults，美元。延长= {}，选择）；
返回this.each（函数（）{（）
var elem = $（this）；
Elem.find（跨）。文本（选择{标题））；
美元。获得（选择{URL功能（数据）{ }，
Elem.find（div）。文本（数据{文本））；
}）；
}）；
}；
fn.bigbear.defaults = { {美元。
标题：这是一个简单的测试。
URL
}；
}（jQuery）；
手术效果：
小结：
（1）美元。fn.bigbear.defaults提供插件默认参数的选择。一个好的插件应该允许用户根据需要定制参数选项，并控制插件的行为，因此有必要提供恢复默认选项。
（2）返回this.each（）{…}遍历多个元素并返回使用jquery选择器引擎的嘶嘶声。激情可以为你提供多元经营功能（例如，所有的元素都在同一类的名字）。这是一个jQuery的几个突出特点。在开发插件时，即使您不准备为插件提供多元素支持，它仍然是一个很好的准备方法。此外，jQuery有一个很好的特性，它可以级联方法或链式调用，所以我们不应该破坏这个特性，并且总是返回方法中的一个元素。
（四）最后摘要
（1），jQuery提供了插件的开发方法，即：jquery.fn.extend（对象）；方法添加到jQuery对象。
JQuery.extend（对象）；以扩展jQuery类本身。为类添加新方法。
（2）将所有代码放入闭包（即时执行函数）。在这个时候，关闭相当于一个私人的范围，和外部的信息无法访问，也不会污染全局变量。官方的解释是创建开发规范：a）避免全局依赖；b）为了避免第三方破坏；c）兼容jQuery and'jquery操作$。
（3）提供插件的默认参数选项。一个可扩展的插件应该允许用户根据需要定制参数选项并控制插件的行为，因此有必要提供恢复默认选项。
（4）穿越多个元素并返回使用jQuery，嘶嘶嘶嘶的选择器引擎，可以为您提供多功能操作（例如，同一元素的所有类的名字）。这是一个jQuery的几个突出特点。在开发插件时，即使您不准备为插件提供多元素支持，仍然是一个很好的实践准备。另外，jQuery有一个很好的特性，它可以级联方法或链式调用，所以我们不应该破坏这个特性，并且总是返回方法中的一个元素。
（5）一次代码放在主循环之外，它是重要的，但往往被忽视。简单地说，如果你有一段代码是一串的默认值，它只需要实例化一次，而不是每次你打电话给你实例化插件功能。您应该将代码放在插件方法之外。
（6）让我们考虑一下。如果更改了项目技术，这些插件强烈依赖于jQuery机制，我们将无法使用我们以前编写的插件。（假设没有jQuery的情况），我们如何重建它
明天的文章将讨论这个问题，并将重构插件的关键逻辑，并期待它。
嗨，大家好！今天，这一系列文章主要是关于如何开发基于插件的Javaｓｃｒｉｐｔ开发，我想很多人不熟悉插件这个词。
有些人可能会调用组件或组件。这不重要。关键是看如何设计，如何做全面的考虑。这是本文的概念，我认为你是对的。
对jQuery插件的方式有一定的了解。我们一起讨论这个话题，最后给出相关的实施计划，不断提高我们的能力。
二、输入插头
一般来说，jQuery插件的开发分为两种类型：一种是挂在jQuery命名空间中的全局函数，也可以是静态方法。
另一种是jQuery对象级别方法，它挂在jQuery原型下，因此选择器获得的jQuery对象实例也可以共享该方法。
（1）类级插件开发
对类级插件开发的最直接的理解是将类方法添加到类中，这可以理解为添加静态方法：
1.1添加一个全局函数，我们只需要下面的定义来查看代码：
复制代码代码如下所示：
$ =函数（）{
警惕你好，大熊王！；
}；
1.2添加一个以上的全局函数，可以定义如下：
复制代码代码如下所示：
扩展（{
你好：函数（名称）{
您的代码在这里
}，
世界：函数（）{
您的代码在这里
}
}）；
描述：美元。延长（目标，{ object1 }，{ objectn }）。该方法主要用于将两个或多个对象的内容或属性合并到第一个对象，并在合并后返回第一个对象。
如果该方法只有一个参数目标，则该参数将扩展jQuery的名称空间，也就是说，作为jQuery全局对象下的静态方法。
（2）对象级插件开发
对象级插件开发需要以下两种形式：
2.1美元的动态安装通过相关属性。fn.extend（）为原型。
复制代码代码如下所示：
（函数（$）{）
fn.extend（{美元。
pluginname：功能（选择）{
您的代码在这里
}
}）；
}（jQuery）；
2.2直接将动态属性添加到原型链中。
复制代码代码如下所示：
（函数（$）{）
美元。fn.pluginname =函数（）{
您的代码在这里
}；
}）（jQuery）；
说明：这两种方法是等价的，对于jQuery插件，基本功能可以很好地工作，但是对于复杂的插件，我们需要提供各种方法和私有函数。
您可以使用不同的名称空间为插件提供各种方式，但是添加太多的名称空间会使代码混乱和健壮，因此最好的解决方案是正确定义私有函数和方法。
因此，我们实现了由自执行函数和闭包相结合的模拟的私有插件单元，就像上面的例子一样。
（三）下面，给出实现过程的一个简单示例：
（1）HTML片段代码，如下所示：
复制代码代码如下所示：
＜div
Style= margin-top:10px;
边距：30px；
> 8
（2）data.json的定义如下：
复制代码代码如下所示：
{
文本：你好，大熊熊{ } }！；
}
（3）BBJS代码如下所示：
复制代码代码如下所示：
$（函数（）{（））
$（# BB）。Bigbear（）；
}）；
（函数（$）{）
美元。fn.bigbear =功能（选择）{
选择（美元。fn.bigbear.defaults，美元。延长= {}，选择）；
返回this.each（函数（）{（）
var elem = $（this）；
Elem.find（跨）。文本（选择{标题））；
美元。获得（选择{URL功能（数据）{ }，
Elem.find（div）。文本（数据{文本））；
}）；
}）；
}；
fn.bigbear.defaults = { {美元。
标题：这是一个简单的测试。
URL
}；
}（jQuery）；
手术效果：
小结：
（1）美元。fn.bigbear.defaults提供插件默认参数的选择。一个好的插件应该允许用户根据需要定制参数选项，并控制插件的行为，因此有必要提供恢复默认选项。
（2）返回this.each（）{…}遍历多个元素并返回使用jquery选择器引擎的嘶嘶声。激情可以为你提供多元经营功能（例如，所有的元素都在同一类的名字）。这是一个jQuery的几个突出特点。在开发插件时，即使您不准备为插件提供多元素支持，它仍然是一个很好的准备方法。此外，jQuery有一个很好的特性，它可以级联方法或链式调用，所以我们不应该破坏这个特性，并且总是返回方法中的一个元素。
（四）最后摘要
（1），jQuery提供了插件的开发方法，即：jquery.fn.extend（对象）；方法添加到jQuery对象。
JQuery.extend（对象）；以扩展jQuery类本身。为类添加新方法。
（2）将所有代码放入闭包（即时执行函数）。在这个时候，关闭相当于一个私人的范围，和外部的信息无法访问，也不会污染全局变量。官方的解释是创建开发规范：a）避免全局依赖；b）为了避免第三方破坏；c）兼容jQuery and'jquery操作$。
（3）提供插件的默认参数选项。一个可扩展的插件应该允许用户根据需要定制参数选项并控制插件的行为，因此有必要提供恢复默认选项。
（4）穿越多个元素并返回使用jQuery，嘶嘶嘶嘶的选择器引擎，可以为您提供多功能操作（例如，同一元素的所有类的名字）。这是一个jQuery的几个突出特点。在开发插件时，即使您不准备为插件提供多元素支持，仍然是一个很好的实践准备。另外，jQuery有一个很好的特性，它可以级联方法或链式调用，所以我们不应该破坏这个特性，并且总是返回方法中的一个元素。
（5）一次代码放在主循环之外，它是重要的，但往往被忽视。简单地说，如果你有一段代码是一串的默认值，它只需要实例化一次，而不是每次你打电话给你实例化插件功能。您应该将代码放在插件方法之外。
（6）让我们考虑一下。如果更改了项目技术，这些插件强烈依赖于jQuery机制，我们将无法使用我们以前编写的插件。（假设没有jQuery的情况），我们如何重建它
明天的文章将讨论这个问题，并将重构插件的关键逻辑，并期待它。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。