إطار جافا سكريبت الخفيف

Question

أحاول إنشاء "إطار عمل" جافا سكريبت صغير يمكنني استخدامه في البرامج النصية الخاصة بي Greasemonkey.أنا فقط بحاجة جداً الوظائف الأساسية، ولهذا السبب اخترت عدم استخدام mooTools أو DOMAssistant.بالإضافة إلى ذلك، لن أكون سخيفًا وأضع DOMAssitant في نص Greasemonkey بحجم 20 كيلو بايت!أريد فقط مقتطفًا صغيرًا وأنيقًا من التعليمات البرمجية.

لدي مشكلة صغيرة مع الكود أدناه.أعتقد أن السبب هو أنني أقوم بإرجاع مصفوفة في $() لذلك أحصل على .setStyle ليس رسالة خطأ دالة.

var fmini = {  
  $ : function(a) {
    var i=0,obj,d;
    var e = [];

    while (obj = arguments[i++]) {
      d = document.getElementById(obj);
      d.setStyle = fmini.setStyle;
      d.each = fmini.each;
      e.push(d);
    }

    return e;
  },
  setStyle : function(style, value) {
    if (typeof this.style.cssText !== 'undefined') {
      var styleToSet = this.style.cssText;
      if (typeof style === 'object') {
        for (var i in style) 
          if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
      }
      else styleToSet += ';' + style + ':' + value;
      this.style.cssText = styleToSet;
    }
    return this;
  },
  each : function (functionCall) {
                for (var i=0, il=this.length; i < il; i++) 
                    functionCall.call(this[i]);
                return this;
    },
}
window.$ = fmini.$;

أود أن يعمل هذا عندما أفعل ذلك

  $('bob','amy').setStyle({
    'border' : '5px solid #ff0000',
    'background-color' : '#ccc'
    });

Answer 1

اكتب طرقك للعمل على تعيين من العقد عاد من $.بهذه الطريقة على حد سواء $('bob').setStyle() و $('bob', 'amy').setStyle() سيعمل.أرى أن لديك عام forEach أو each الطريقة التي هي بداية جيدة.

var fmini = {
    $: function() {
        var i=0, obj;
        var e = [];
        e.setStyle = fmini.setStyle;
        e.each = fmini.each;

        while (obj = arguments[i++]) {
            e.push(document.getElementById(obj));
        }

        return e;
    },

    setStyle : function(style, value) {
        return this.each(function() {
            if (typeof this.style.cssText !== 'undefined') {
                var styleToSet = this.style.cssText;
                if (typeof style === 'object') {
                    for (var i in style) 
                        if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
                }
                else styleToSet += ';' + style + ':' + value;
                this.style.cssText = styleToSet;
            }
        })
    }
}

بالمناسبة هذا شيء jQuery كان أول من فعل/شاع.

Answer 2

مثلما كنت تشك في أن إرجاع $ في هذه الحالة هو مصفوفة من العناصر، يجب عليك توسيع المصفوفة باستخدام setStyle أو إضافة الامتداد عند ملء المصفوفة قبل تمرير المصفوفة مرة أخرى.إذًا يجب ألا تحصل على خطأ يفيد بأن ‎.setStyle ليس دالة.ومع ذلك، سيتعين عليك أيضًا التأكد من التعامل مع ربط سياق الكائن الخاص بك عندما تقوم بالتسلسل بهذه الطريقة this يشير إلى النطاق الحالي وليس عنصرًا في صفيفك.

Answer 3

تقوم الدالة $ بإرجاع مصفوفة؛يجب أن تقوم إما بإرجاع كائن العنصر نفسه (د) الذي تقوم بزيادة طريقة setStyle عليه، أو مجرد كائن آخر.

Answer 4

إذا كنت تريد يمكنك استخدام مكتبتي.

يطلق عليه Ally ويمكنك تنزيله هنا: http://github.com/AlyToolkit/Ally

لقد لاحظت أنك قلت أنك تريد شيئًا خفيف الوزن، ويبلغ إصدار المخزون من Ally حاليًا ما يزيد قليلاً عن 1300 سطر، و25 كيلو بايت غير مصغر، ويمكنك بسهولة قطع الأجزاء التي لا تريدها.

لقد كتبته بقصد أن يكون من السهل جدًا تعديله، ولكنه لا يزال قويًا جدًا ومليئًا بالميزات المفيدة.

سأقوم بإصدار النسخة التجريبية الثانية قريبًا الليلة.يجب أن يكون في فرع الإصدار ( http://github.com/AlyToolkit/Ally/tree/release ) خلال الساعة القادمة.

إذا قررت تجربتها أتمنى أن تستمتع بها.:)