Как добавить пользовательские методы для пользовательских конструкторов в JavaScript?

Question

Я новичок в javascript и у меня много вопросов. Я узнал о библиотеке JavaScript, называемой VueJS, и это действительно здорово. Вот пример:

HTML:

 <h1 id="test">{{ test }}, I like Javascript</h1>

JS:

 var vue = new Vue({
   el: "#test",
   data: {
      test: "Yes"
   }
 });
 return vue;

Вывод:

 Yes, I like javascript

Я был действительно поражен, глядя наэто синтаксическая структура. Тогда я подумал, можно ли сделать такое? Но так как я менее опытен, я не могу? Итак, я хочу помочь? Давайте предположим очень простой:

HTML:

  <h1 id="test"></h1>

JS:

  var my = new MyCustomOne({
    el: "#test",
    html: "Hello Everyone",
    css: {
      color: "white",
      backgroundColor: "#008eff"
    }
   });

Я не хочу импортировать эту библиотеку размером почти 100 КБ, используя всего лишь несколькофункции, и, кстати, я также хочу сделать свои собственные. Поэтому, пожалуйста, можете ли вы помочь мне создать конструктор MyCustomOne () с помощью приведенных выше методов? Спасибо в Advace.

Answer 1

У меня есть довольно хорошее решение для этого. Итак, вот фрагмент кода:

 function MyCustomOne(val) {
   var stock = val; // Considering the val object as stock
   var sel = document.querySelectorAll(stock.el); // Selecting all matching elements in your selector method
   for( var i = 0; i < sel.length; i++ ) {
     sel[i].innerHTML += stock.html; // Setting the text 
     sel[i].style.cssText = stock.style; // Setting css properties with values
     sel[i].style[stock.css.prop] = stock.css.val; // You can also nest them
   };
 };

Вы можете использовать его как:

 var my = new MyCustomOne({
   el: ".demo",
   html: "Hello World !",
   style: "background : blue",
   css: {
      prop: "color",
      val: "white",
   }
  });

Но до тех пор, пока я не предпочитаю сначала изучать JavaScript, прежде чем переходить в любую библиотеку JavaScript/ framework as VueJS.

Answer 2

Я думаю, что для новичка не так-то просто создать собственную версию Vue, потому что эта функция на самом деле большая. Я нашел для вас несколько репозиториев, которые помогут вам понять реализацию ядра vue:

• tiny-vue
• another-tiny-vue
• build-your-own-vuejs
• read-vue-source-code

НоЕсли ваша цель просто найти более простую и легкую альтернативу vue, я бы порекомендовал вам попробовать Mithril (9.5kb) framework