将缩小的 jQuery 插件转换为纯 JavaScript 插件答案

【问题标题】：Convert a minified jQuery plugin into a plain JavaScript plugin将缩小的 jQuery 插件转换为纯 JavaScript 插件
【发布时间】：2014-06-10 09:25:33
【问题描述】：

我正在运行一个项目，人们可以在地图上找到医生并在线预订，...

之前我决定使用 Angularjs 并改变整个项目，所以我不得不忘记我之前使用过的一些 jQuery 插件。

**问题**：

我正在使用一个与 Google 地图 API (Landcarte) 配合使用的 jQuery 插件，但在 AngularJS 中我没有找到与此插件相比的任何其他东西。

所以我只能在我的网站上同时使用 jquery 和 angular 以及这个插件，但我不知道，我觉得同时使用 jquery 和 angular 是错误的，因为我认为这让我的第一次加载很重。

**问题：**

1- 是否可以将此插件转换为普通的 Javascript，以便我可以在我的网站中省略 Jquery？

2- 如果没有，我该怎么办？

3- 我可以稍后在我的站点中使用 RequireJS 加载 jquery 和这个插件吗？（我不知道怎么做：（）

【问题讨论】：

任何可以用 jQuery 完成的事情都可以直接用 JavaScript 完成。（这就是 jQuery 所做的。）
问题标题与问题描述不符。您是否正在尝试取消缩小 jquery 插件？或者你想让一个 jquery 插件在 angularjs 中工作？

标签： javascript jquery angularjs minify

【解决方案1】：

我不了解 Landcarte 插件，因此无法帮助您解决问题 1。

如果你想初始化一个 jquery 插件但它不工作，问题的一个常见原因是 DOM 还没有准备好。

要解决这个问题，有三种选择：

方法 1 在指令的链接属性内初始化插件。在链接函数中，指令元素的子元素已经被编译和链接。如果你的插件只依赖于准备 DOM 的元素的子元素，那么这个选项是合适的。

  app.directive('myDirective', function(){
          return {
                link: function(scope, element,attr){
                     element.plugin();
                }
          }
  });

方法 2 使用在编译和链接阶段之后但在渲染阶段之前运行的 $evalAsyc。如果您的插件依赖于准备好 DOM 的整个页面，请使用此方法，但表达式是否已呈现并不重要。

  app.directive('myDirective', function(){
          return {
                link: function(scope, element,attr){
                       scope.$evalAsync(function(scope){
                              element.plugin();
                       });
                }
          }
  });

方法 3 使用在渲染阶段之后运行的 $timeout。如果您的插件依赖于整个页面准备好 DOM，并且所有表达式都已呈现，请使用此方法。

  app.directive('myDirective', function($timeout){
          return {
                link: function(scope, element,attr){
                       $timeout(function(){
                              element.plugin();
                       });
                }
          }
  });

根据插件的不同，这些选项之一应该适合您。首选满足插件需求的最低限度 - 意味着更喜欢选项 1，而不是选项 2，而不是选项 3，但最终还是选择可行的那个。

【讨论】：

【解决方案2】：

要将 min.js 文件转换为 normal.js，您可以使用 this 但它只是设置表格和空格并使脚本可读。

例如这个脚本：

var a={log:function(){try{var e=Array.prototype.slice.call(arguments);if(typeof e[0]==="string"){if(/[\{\}]/.test(e[0])&&e.length>1){var t=e.length>2?e.slice(1):e[1];return console.log(this.text(e[0],t))}}return console.log.apply(console,e)}catch(n){}}}

将是：

var a = {
    log: function () {
        try {
            var e = Array.prototype.slice.call(arguments);
            if (typeof e[0] === "string") {
                if (/[\{\}]/.test(e[0]) && e.length > 1) {
                    var t = e.length > 2 ? e.slice(1) : e[1];
                    return console.log(this.text(e[0], t))
                }
            }
            return console.log.apply(console, e)
        } catch (n) {}
    }
}

【讨论】：

把jquery函数变成普通的JS怎么样？

【解决方案3】：

Landcarte 也可以在没有 jQuery 的纯 JS 代码中使用。可以通过显式调用 at.geo.Map 类构造函数来初始化映射：

var container = document.getElementById("map");
var map = new at.geo.Map(container);

reference 中提到了这个类。

【讨论】：