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

Question

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

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

**问题**：

我正在使用一个与Google Map API（ Landcarte ）配合使用的jQuery插件，并且在AngularJS中没有其他可以与该插件进行比较的东西。

因此，除了在网站上同时使用jquery和angular以及此插件外，我什么也做不了，但是我不知道，我觉得同时使用jquery和angular错了，因为我认为这会使我的首次加载很重。

**问题：**

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

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

3-我可以稍后在网站上使用RequireJS加载jquery和此插件吗？ （我不知道如何:(）

Answer 1

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

如果您想初始化一个jQuery插件但无法正常工作，则该问题的常见原因是DOM尚未准备就绪。

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

方法1初始化您的指令的链接属性内的插件。 在link函数中，指令元素的子代已经被编译和链接。 如果您的插件仅依赖于已准备好DOM的元素的子代，则此选项是合适的。

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

方法2使用$ evalAsyc，它在编译和链接阶段之后但在Render阶段之前运行。 如果您的插件依赖于整个页面已准备好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();
                       });
                }
          }
  });

根据插件的不同，这些选项之一应该适合您。 优先选择一个最能满足插件需求的插件-意味着比选项2优先选择选项1，而不是选项3，但最终选择了可行的插件。

Answer 2

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

例如，此脚本：

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) {}
    }
}

Answer 3

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

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

在参考资料中提到了此类。