jquery插件select2源码解读(一) 概述

最新推荐文章于 2022-02-14 16:19:02 发布

原创最新推荐文章于 2022-02-14 16:19:02 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件 #框架

jquery插件源码解读专栏收录该内容

4 篇文章

订阅专栏

本文通过一个简单示例介绍如何使用Select2插件，并深入分析其源码，涵盖生成流程、观察者模式应用、JavaScript原型方法使用及整体设计思路。

jquery插件select2源码解读(一) 概述

在使用select2插件之前，我们需熟悉相关的js框架，当然jquery必不可少。其中涉及部分框架比如：gruntfile，requirejs.当然在这里只用到了requirejs的部分功能。

先看一个简单的实例：从select2（当前版本4.0.3）官网下载源码，解压后，抽取相应的js和css文件。目录结构如下：

src文件夹可忽略（后面源码分析主要为了看代码方便分析），下面是index.html的内容：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="select2.css" type="text/css" />
  </head>
  <body>
    select2测试：<select class="select2-container" name="test" id="test" style="width:180px;">
      <option value="test1">test1</option>
      <option value="test2">test2</option>
      <option value="test3">test3</option>
      <option value="test4">test4</option>
      <option value="test5">test5</option>
    </select> 
  </body>
  <script src="jquery-2.1.0.js" type="text/javascript"></script>
  <script src="select2.full.js" type="text/javascript"></script>
  <script type="text/javascript">
      $('#test').select2();
  </script>
</html>

测试界面展示：