근사한 방법의 실현

mass Framework는 많은 수단을 사용하여 근사한 방법을 함께 생성하여 코드의 양을 크게 줄이고 유지보수성을 향상시켰다.
예를 들어 append,prepend,before,after 이 몇 가지 방법은 jQuery2.0에서 다음과 같다.

append: function() {
		return this.domManip(arguments, true, function( elem ) {
			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
				this.appendChild( elem );
			}
		});
	},

	prepend: function() {
		return this.domManip(arguments, true, function( elem ) {
			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
				this.insertBefore( elem, this.firstChild );
			}
		});
	},

	before: function() {
		return this.domManip(arguments, false, function( elem ) {
			if ( this.parentNode ) {
				this.parentNode.insertBefore( elem, this );
			}
		});
	},

	after: function() {
		return this.domManip(arguments, false, function( elem ) {
			if ( this.parentNode ) {
				this.parentNode.insertBefore( elem, this.nextSibling );
			}
		});
	},

mass Framework는 이렇게 이루어졌고 반전 방법까지 함께 이루어졌다.

            //         
            "append,prepend,before,after,replace".replace($.rword, function(method) {
                $.fn[method] = function(item) {
                    return manipulate(this, method, item, this.ownerDocument);
                };
                $.fn[method + "To"] = function(item) {
                    $(item, this.ownerDocument)[method](this);
                    return this;
                };
            });

jQuery는 노드를 제거하는 세 가지 방법이 있습니다. 2.0의 실현은 다음과 같습니다.

// keepData is for internal use only--do not document
	remove: function( selector, keepData ) {
		var elem,
			i = 0,
			l = this.length;

		for ( ; i < l; i++ ) {
			elem = this[ i ];

			if ( !selector || jQuery.filter( selector, [ elem ] ).length > 0 ) {
				if ( !keepData && elem.nodeType === 1 ) {
					jQuery.cleanData( getAll( elem ) );
				}

				if ( elem.parentNode ) {
					if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
						setGlobalEval( getAll( elem, "script" ) );
					}
					elem.parentNode.removeChild( elem );
				}
			}
		}

		return this;
	},

	empty: function() {
		var elem,
			i = 0,
			l = this.length;

		for ( ; i < l; i++ ) {
			elem = this[ i ];

			if ( elem.nodeType === 1 ) {

				// Prevent memory leaks
				jQuery.cleanData( getAll( elem, false ) );

				// Remove any remaining nodes
				elem.textContent = "";
			}
		}

		return this;
	},
        detach: function( selector ) {
		return this.remove( selector, true );
	},

mass Framework는 함께 놓아줍니다.

            "remove,empty,detach".replace($.rword, function(method) {
                $.fn[method] = function() {
                    var isRemove = method !== "empty";
                    for (var i = 0, node; node = this[i++]; ) {
                        if (node.nodeType === 1) {
                            // 
                            var array = $.slice(node[TAGS]("*")).concat(isRemove ? node : []);
                            if (method !== "detach") {
                                array.forEach(cleanNode);
                            }
                        }
                        if (isRemove) {
                            if (node.parentNode) {
                                node.parentNode.removeChild(node);
                            }
                        } else {
                            while (node.firstChild) {
                                node.removeChild(node.firstChild);
                            }
                        }
                    }
                    return this;
                }
            });

순환 생성은 예술로 그들의 기능과 공통점을 깊이 이해하고 특이점을 하나의 대상으로 구성해야 한다. 이렇게 하면 방법 내의ifelse를 최소화할 수 있다.
또한 동적 해석 스크립트도 좋은 방법입니다. mass Framework라는 오래된 코드를 보십시오.

 // 
     $.fn.fadeIn = function(duration, complete) {
        var opts = {
            duration: duration,
            complete: complete,
            effectName: "fadeIn",
            classRule: ".#{className}{
\
                          #{prefix}animation-duration: #{duration};\
                          #{prefix}animation-name: #{frameName}; \
                          #{prefix}animation-fill-mode:forwards; \
                       }",
            frameRule: "@#{prefix}keyframes #{frameName}{\
                          to{\
                                opacity:1;\
                          }\
                       }",
            after: function(node) {
                node.style.opacity = 1;
            }
        }
        return makeEffect(this, opts);
    }
    // 
    $.fn.fadeOut = function(duration, complete) {
        var opts = {
            duration: duration,
            complete: complete,
            effectName: "fadeOut",
            classRule: ".#{className}{
\
                          #{prefix}animation-duration: #{duration};\
                          #{prefix}animation-name: #{frameName}; \
                          #{prefix}animation-fill-mode:forwards; \
                       }",
            frameRule: "@#{prefix}keyframes #{frameName}{\
                          to{\
                                opacity:0;\
                          }\
                       }",
            after: function(node) {
                node.style.opacity = 0;
            }
        }
        return makeEffect(this, opts);
    }

이 두 가지 방법은 원본 코드에서 두 군데만 다르기 때문에 나중에 나는 이렇게 고쳤다.

     $.fn.fadeIn = function(duration, complete) {
        var opts = {
            duration: duration,
            complete: complete,
            effectName: "fadeIn",
            classRule: ".#{className}{
\
                          #{prefix}animation-duration: #{duration};\
                          #{prefix}animation-name: #{frameName}; \
                          #{prefix}animation-fill-mode:forwards; \
                       }",
            frameRule: "@#{prefix}keyframes #{frameName}{\
                          to{\
                                opacity:1;\
                          }\
                       }",
            after: function(node) {
                node.style.opacity = 1;
            }
        }
        return makeEffect(this, opts);
    }
    // 
     $.fn.fadeOut = eval("0," + $.fn.fadeIn.toString().replace("1;","0;").replace("faceIn", "fadeOut"))