動態擴展jQuery插件

-1

我想創建一個靈活的jQuery插件，用來處理形式，這裏是我的標記+代碼：動態擴展jQuery插件

我想達到什麼是somekind的插件功能於插件的架構，這意味着myForm位於每個項目的基本插件，如果需要，我會添加額外的功能/方法，如表單驗證或圖像上傳到插件（通過加載額外的外部腳本）。這應該是沒有實例化，直接在插件。如你所料，上面的代碼不起作用..：/ 任何想法，如果這是可能的？感謝

來源

2016-02-19 Fuxi

'this'是不是你認爲它是集this。在所有'$ .fn.someMethod（）'它是由選擇所代表的元素集合，它允許'返回this' jQuery的方法鏈接 – charlietfl

這是一個非常大的問題，因爲沒有一種方法比其他更好的...這也取決於你最終想要什麼。這是一個完美的例子（https://jsfiddle.net/jfqatfvz/），但簡化... –

通過插件插件，我認爲你的意思是工廠。查看jQuery的[Widget工廠]（https://learn.jquery.com/jquery-ui/widget-factory/why-use-the-widget-factory/）以供使用或獲得靈感。 – jtrumbull

可能有多種方式來實現預期的結果。在此，檢查是否從「外部文件」 validate方法被定義，如果是，設置validate作爲myForm屬性;利用Function.prototype.call內validate

(function($) { 
 
    function myForm() { 
 
    me = this; 
 
    if (me.attr("validate")) { 
 
     if (myForm.validate) { 
 
     myForm.validate.call(me) 
 
     .text(me.text() + " validated") 
 
     .css("color", "green"); 
 
     } 
 
    }; 
 
    return me 
 
    }; 
 
    try { 
 
    if (validate && typeof validate === "function") { 
 
     myForm.validate = validate 
 
    } 
 
    // catch `ReferenceError` if `validate` is not defined 
 
    } catch (e) { 
 
    alert(e.message) 
 
    } 
 

 
    $.fn.myForm = myForm; 
 

 
})(jQuery); 
 

 
// code from external file eg. myform_validate.js 
 
$(document).ready(function() { 
 
    $("#myform").myForm(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script> 
 
    // external file 
 
    function validates() { 
 
    // form validation here 
 
    console.log(this) 
 
    alert("validate"); 
 
    // `this` : `#myform` 
 
    return this 
 
    }; 
 
</script> 
 
<div id="myform" validate="1">form</div>

來源

2016-02-19 18:41:54 guest271314

動態擴展jQuery插件

回答

相關問題