将一个缩小的jQuery插件转换为一个普通的JavaScript插件

Question

我正在运行一个项目，人们可以在地图上找到医生和在线书籍，…

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

**问题**:

我正在使用一个jQuery插件，它与谷歌地图API (Landcarte)一起工作非常棒，我还没有找到任何其他与AngularJS中这个插件相比的东西。

所以我不能做任何事情，但使用jquery和angular和这个插件在我的网站，但我不知道，我觉得这是错误的使用jquery和angular，因为我认为这使我的第一次加载沉重。

**问题:**

1-是否可以将此插件转换为正常的Javascript，以便我可以省略我的网站中的Jquery ?

2-如果不是，我该怎么办?

3-我可以使用RequireJS加载jquery和这个插件以后在我的网站?(我不知道如何:)

Answer 1

我不知道Landcarte插件，所以我不能帮你解决问题1

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

要解决这个问题，有三个选项:

方法1在指令的link属性中初始化插件。在link函数中，directive元素的子元素已经被编译和链接过了。如果你的插件只依赖于元素的子元素已经准备好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，但最终还是选择那个有效的。

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);

这个类在参考文献中有提到