如何將Confluence插件與jQuery代碼結合起來？

Question

我嘗試用下面的js文件（文本1）創建一個Confluence插件，但是Confluence控制台在下面的錯誤（文本2）中說，有人可以幫助我解決此問題嗎？ 我想知道jQuery代碼是否應該以以下內容開頭：

AJS.toInit(function() {
AJS.$(document).ready(function() {

【文字1】

(function ($) {

  $.fn.jaliswall = function (options) {

      this.each(function () {

          var defaults = {
              item: '.wall-item',
              columnClass: '.wall-column',
              resize: false
          }

          var prm = $.extend(defaults, options);

          var container = $(this);
          var items = container.find(prm.item);
          var elemsDatas = [];
          var columns = [];
          var nbCols = getNbCols();

          init();

          function init() {
              nbCols = getNbCols();
              recordAndRemove();
              print();
              if (prm.resize) {
                  $(window).resize(function () {
                      if (nbCols != getNbCols()) {
                          nbCols = getNbCols();
                          setColPos();
                          print();
                      }
                  });
              }
          }

          function getNbCols() {
              var instanceForCompute = false;
              if (container.find(prm.columnClass).length == 0) {
                  instanceForCompute = true;
                  container.append("<div class='" + parseSelector(prm.columnClass) + "'></div>");
              }
              var colWidth = container.find(prm.columnClass).outerWidth(true);
              var wallWidth = container.innerWidth();
              if (instanceForCompute) container.find(prm.columnClass).remove();
              return Math.round(wallWidth / colWidth);
          }

          // save items content and params and removes originals items
          function recordAndRemove() {
              items.each(function (index) {
                  var item = $(this);
                  elemsDatas.push({
                      content: item.html(),
                      class: item.attr('class'),
                      href: item.attr('href'),
                      id: item.attr('id'),
                      colid: index % nbCols
                  });
                  item.remove();
              });
          }

          //determines in which column an item should be
          function setColPos() {
              for (var i in elemsDatas) {
                  elemsDatas[i].colid = i % nbCols;
              }
          }

          // to get a class name without the selector
          function parseSelector(selector) {
              return selector.slice(1, selector.length);
          }

          //write and append html
          function print() {
              var tree = '';
              //creates columns
              for (var i = 0; i < nbCols; i++) {
                  tree += "<div class='" + parseSelector(prm.columnClass) + "'></div>";
              }
              container.html(tree);

              // creates items
              for (var i in elemsDatas) {
                  var html = '';

                  var content = (elemsDatas[i].content != undefined) ? elemsDatas[i].content : '';
                  var href = (elemsDatas[i].href != href) ? elemsDatas[i].href : '';
                  var classe = (elemsDatas[i].class != undefined) ? elemsDatas[i].class : '';
                  var id = (elemsDatas[i].id != undefined) ? elemsDatas[i].id : '';

                  if (elemsDatas[i].href != undefined) {
                      html += "<a " + getAttr(href, 'href') + " " + getAttr(classe, 'class') + " " + getAttr(id, 'id') + ">" + content + "</a>";
                  } else {
                      html += "<div " + getAttr(classe, 'class') + " " + getAttr(id, 'id') + ">" + content + "</a>";
                  }
                  container.children(prm.columnClass).eq(i % nbCols).append(html);
              }

          }

          //creates a well-formed attribute
          function getAttr(attr, type) {
              return (attr != undefined) ? type + "='" + attr + "'" : '';
          }

      });

      return this;
  }
})(jQuery);

【文字2】

[INFO] Compiling javascript using YUI
[ERROR] invalid property id
                        class: item.attr('class'),
[ERROR] syntax error
                        class: item.attr('class'),
[ERROR] syntax error
                        href: item.attr('href'),
[ERROR] syntax error
                        id: item.attr('id'),
[ERROR] syntax error
                        colid: index % nbCols
[ERROR] syntax error
                    });
[ERROR] missing name after . operator
                    var classe = (elemsDatas[i].class != undefined) ?     elemsDatas[i].class : '';
[ERROR] Compilation produced 7 syntax errors.

Answer 1

問題是“類”是保留字，而YUI JavaScript壓縮程序則在抱怨它（這是正確的）。 您可以在以下代碼中解決此問題：

var item = $(this);
    elemsDatas.push({
    content: item.html(),
    class: item.attr('class'),
    href: item.attr('href'),
    id: item.attr('id'),
    colid: index % nbCols
});

通過將class: item.attr('class')更改為clazz: item.addr('class')或類似內容-盡管您還必須調整訪問該屬性的所有其他引用。

我相信，如果您確實需要，也可以使用'class': item.addr('class') ，但這會使將來訪問該屬性的便利性降低。