조명 JavaScript 프레임 워크

Question

Greasemonkey 스크립트에서 사용할 수있는 작은 JavaScript "프레임 워크"를 만들려고합니다. 나는 단지 필요합니다 매우 기본 기능이므로 Mootools 또는 Domassistant를 사용하지 않기로 선택합니다. 게다가, 나는 어리석지 않고 20kb Greasemonkey 스크립트에 Domassitant를 넣을 것입니다! 나는 단지 작고 깔끔한 코드를 원합니다.

아래 코드에 작은 문제가 있습니다. $ ()로 배열을 반환하고 있기 때문에 .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이 함수가 아니라는 오류가 발생하지 않아야합니다. 그러나 이렇게 연쇄 될 때 객체 컨텍스트 바인딩을 처리해야합니다. this 배열의 요소가 아닌 현재 범위를 참조하고 있습니다.

Answer 3

$ 함수는 배열을 반환합니다. SetStyle 메소드를 보강하는 요소 객체 자체 (d) 또는 다른 객체 만 반환해야합니다.

Answer 4

원한다면 내 도서관을 사용할 수 있습니다.

Ally라고하며 여기에서 다운로드 할 수 있습니다. http://github.com/allytoolkit/ally

나는 당신이 당신이 가벼운 것을 원한다고 말했으며, Ally의 재고 버전은 현재 1300 줄 이상, 25kb가 미혼이며 원하지 않는 부품을 쉽게 잘라낼 수 있습니다.

나는 수정하기가 쉽지만 여전히 강력하며 유용한 기능으로 가득 찬 의도로 그것을 썼습니다.

오늘 밤 제 2 베타 베타를 출시하고 있습니다. 릴리스 브랜치에 올라야합니다 ( http://github.com/allytoolkit/ally/tree/release ) 다음 시간 안에.

당신이 그것을 시도하기로 결정했다면 나는 당신이 즐기기를 바랍니다. :)