Question

就像实验web components: custom html elements一样，我想复制行为，但是使用div和某些类并对它们执行操作。就像这样，我想在创建一个具有特定类的元素时做一些事情。

例如：

#include <iostream>
#include <string>
#include <tuple>
#include <vector>
#include <dirent.h>
#include "gtest/gtest.h"

class Singleton
{

public:
   std::vector<std::string> singletonVect;
   Singleton();
   void buildFileList(std::vector<std::string> filesVect);
   std::vector<std::string> getFileList(void);
   static Singleton& getInstance();
};

std::vector<std::string> strings = {"lkhdf","lfdjasdlk"};
Singleton& singleObj(Singleton::getInstance());

std::vector<std::string> openDirectory(std::string path) //opening any folder and saving all file-names in a vector<string>
{
   DIR* dir;
   dirent* pdir;
   std::vector<std::string> files;
   dir = opendir(path.c_str());

   std::cout << "opened? [" << dir << " ]\n";

   while (pdir = readdir(dir)) {
      files.push_back(pdir->d_name);
   }
   return files;
}

void Singleton::buildFileList(std::vector<std::string> filesVect)
{
   std::vector<std::string> f;
   std::string buffer = "";
   f = openDirectory("myFiles"); // pass which dir to open
   for (auto i = f.begin(); i != f.end(); ++i) {
      if ((*i).find(".exe") != std::string::npos) {
         buffer = "myFiles/" + (*i);
         filesVect.push_back(buffer);
      }
   }
}

std::vector<std::string> Singleton::getFileList(void)
{
   return singletonVect;
}

Singleton::Singleton()
{
   std::cout << "Singleton cstr\n";

   buildFileList(singletonVect);
}

Singleton& Singleton::getInstance()
{
   static Singleton singleObj;
   return singleObj;
}

int main(int argc, char **argv) {
   singleObj.singletonVect = singleObj.getFileList();

   singleObj.singletonVect.push_back("buffer");

   std::cout <<"[ "<< (*singleObj.singletonVect.begin())  << " ]\n";

   for (auto itVect = singleObj.singletonVect.begin(); itVect != singleObj.singletonVect.end(); itVect++) {
      std::cout << "itVect[ " << (*itVect) << " ]\n";
   }

}

所以有了这个，javascript应该检测到他们是一个＆＃39; api-list＆＃39;元素已创建。 是否存在在主体上添加事件处理程序以触发事件的情况，如果＆＃39; api-list＆＃39;已被添加到dom？

为什么不直接将它附加到元素上，你问？我的网站是单页面，我使用ajax注入内容，因此需要动态加载内容。

Answer 1

Mutation Observer可用于解决您的问题。 Browser support for Mutation Observer

您可以使用样本api-list创建plunker。

我们发现childList的{{1}}发生了任何变化，如果有变化，则循环更改这些变更并检查是否符合条件。

conatiner

var divApiList = document.createElement('div');
divApiList.classList.add('api-list');
divApiList.textContent = '////////THE LIST////////';

var container = document.getElementById('container');
var counter = 1;
function addApiList (){
  var apiList = divApiList.cloneNode(true);
  apiList.textContent += counter;
  container.appendChild(apiList);
  counter++;
}

function addNonApiList() {
  var div = document.createElement('div');
  div.textContent = 'This is not api-list div';
  container.appendChild(div);
}

// This can be in different file
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    Array.prototype.forEach.call(mutation.addedNodes, function(node){
      if(node.classList.contains('api-list')) {
        alert('Api-List added');
      }
    });
  });    
});
 
// configuration of the observer:
var config = { childList: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(container, config);
 
// later, you can stop observing
// observer.disconnect();

#container {
  border: 1px solid red;
}

请注意：我从未在制作中使用Mutation Observer，因此我不确定使用它是否有任何问题。如果可以进行任何改进，请更正答案

如何在创建某个元素时对其进行操作

1 个答案: