如何从HTML中的外部文件使用Jquery对象？

Question

I am relatively new to frond-end.

I was wondering how I can use an jquery object returned from external link.

For example, a js file on this location( https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-en-NZ.js ) returns 'datepicker.regional[ "en-NZ" ];' object like below

( function( factory ) {
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
        define( [ "../widgets/datepicker" ], factory );
    } else {

        // Browser globals
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {

datepicker.regional[ "en-NZ" ] = {
    closeText: "Done",
    prevText: "Prev",
    nextText: "Next",};
datepicker.setDefaults( datepicker.regional[ "en-NZ" ] );

return datepicker.regional[ "en-NZ" ];

I import this js file to main html file and embed it in head tag.

<script src="path/datepicker-en-NZ.js"></script>

Now I need use the returned object which is datepicker.regional["en-NZ"] . How can I use this object in main html file?

Answer 1

Check example code in project :

1. I would suggest you add Bootstrap.js in your html
2. You need to add input control in your html file ie id = myDate
3. Bind it with datepicker

$( "#myDate" ).datepicker();

Answer 2

I've found a demo on the jQueryUI website that provides some insight into how to use their datepicker: http://jqueryui.com/datepicker/#localization

I believe the Javascript in the source code provided is the important bit:

  $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );

My understanding is that you need to create a Datepicker object and bind it to an <input> using its ID.

<input type="text" id="datepicker" />

Answer 3

OK, I found the new(for me) concept.

This is called Factory function.

The definition of Factory function is A function that returns an object.

In my case, I was trying to use an object created from factory function which was datepicker.regional[ "en-NZ" ] .

So I could call and use this object in main html file by adding $. before the name of object.

<script>
$(document).ready(function(){
    $('#datepicker').datepicker($.datepicker.regional[ "zh-CN" ] );
});
</script>

And it was also important to add document.ready part unless it won't start kicking in.