{"id":2643,"date":"2005-11-21T03:02:00","date_gmt":"2005-11-21T03:02:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/heaths\/2005\/11\/21\/blog-customizations-part-3-oo-javascript\/"},"modified":"2005-11-21T03:02:00","modified_gmt":"2005-11-21T03:02:00","slug":"blog-customizations-part-3-oo-javascript","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/setup\/blog-customizations-part-3-oo-javascript\/","title":{"rendered":"Blog Customizations, Part 3: OO JavaScript"},"content":{"rendered":"

Not satisfied by the search feature provided by Community Server<\/a> I’ve again created some helpful JavaScript classes this time using object-oriented JavaScript to define a basic search provider and to subclass that for specialized providers like MSN Search<\/a>.<\/p>\n

I defined several private properties and several privileged methods that can access those private properties, unlike public methods in classical object-oriented languages. Thanks to closures those methods can access those private properties — defined as local variables — even after the constructor function has returned.<\/p>\n

function<\/span> SearchProvider(title, home, image, url) {<\/span>\n  \/\/ Private properties.<\/span><\/span>\n  var<\/span> _title = title;<\/span>\n  var<\/span> _home  = home;<\/span>\n  var<\/span> _image = image;<\/span>\n  var<\/span> _url   = url;<\/span>\n <\/span>\n  \/\/ Privileged methods.<\/span><\/span>\n  this<\/span>.getTitle = function<\/span>() { return<\/span> _title; }<\/span>\n  this<\/span>.getHome  = function<\/span>() { return<\/span> _home; }<\/span>\n  this<\/span>.getImage = function<\/span>() { return<\/span> _image; }<\/span>\n  this<\/span>.getUrl   = function<\/span>() { return<\/span> _url; }<\/span>\n <\/span>\n  this<\/span>.getHomeHTML = function<\/span>() {<\/span>\n    return<\/span> '<a href=\"'<\/span> + _home + '\">'<\/span> + _title + '<\/a>'<\/span>;<\/span>\n  }<\/span>\n <\/span>\n  this<\/span>.getImageHTML = function<\/span>() {<\/span>\n    return<\/span> '<img src=\"'<\/span> + _image + '\" alt=\"'<\/span> + _title + '\" \/>'<\/span>;<\/span>\n  }<\/span>\n <\/span>\n  this<\/span>.getLogoHTML = function<\/span>() {<\/span>\n    return<\/span> '<a href=\"'<\/span> + _home + '\">'<\/span> + this<\/span>.getImageHTML() + '<\/a>'<\/span>;<\/span>\n  }<\/span>\n <\/span>\n  this<\/span>.search = function<\/span>(keywords) {<\/span>\n    location.href = _url + escape(keywords);<\/span>\n  }<\/span>\n}<\/span>\n <\/span><\/pre>\n
To define a subclass we use the base class to the prototype<\/code> property of the subclass. We must also assign a new function to the constructor<\/code> otherwise when the subclass is instantiated the base class constructor is called.<\/p>\n
\/\/ Specialized SearchProvider for MSN Search.<\/span>\nMsnSearchProvider.prototype = new<\/span> SearchProvider();<\/span>\nMsnSearchProvider.prototype.constructor = MsnSearchProvider;<\/span>\nfunction<\/span> MsnSearchProvider() {<\/span>\n  \/\/ Call base class constructor.<\/span><\/span>\n  SearchProvider.prototype.constructor.call(this<\/span>,<\/span>\n    \"MSN Search\"<\/span>,<\/span>\n    \"http:\/\/search.msn.com\/\"<\/span>,<\/span>\n    \"http:\/\/search.msn.com\/s\/affillogo.gif\"<\/span>,<\/span>\n    \"http:\/\/search.msn.com\/results.aspx?q=site%3Ablogs.msdn.com%2Fheaths+\"<\/span>);<\/span>\n}<\/span><\/pre>\n
The constructor now creates an instance of the specialized MsnSearchProvider<\/code> and to call the base class constructor by calling the call<\/code> method on the constructor<\/code>. All that’s left to do is to replace property values and event handlers for the search-related elements. For this another class is created.<\/p>\n
function<\/span> Search(inputId, aId) {<\/span>\n    \/\/ Private properties.<\/span><\/span>\n    var<\/span> _inputElem = document.getElementById(inputId);<\/span>\n    var<\/span> _aElem = document.getElementById(aId);<\/span>\n    if<\/span> (!_inputElem || !_aElem) {<\/span>\n        return<\/span> null<\/span>;<\/span>\n    }<\/span>\n <\/span> \n    \/\/ Close 'this'.<\/span><\/span>\n    var<\/span> self = this<\/span>;<\/span>\n <\/span> \n    \/\/ Public properties.<\/span><\/span>\n    this<\/span>.provider = new<\/span> MsnSearchProvider();<\/span>\n <\/span> \n    \/\/ Change key handler for input.<\/span><\/span>\n    _inputElem.onkeydown = function<\/span>() {<\/span>\n        if<\/span> (event.keyCode == 13) {<\/span>\n            event.cancelBubble = true<\/span>;<\/span>\n            event.returnValue = false<\/span>;<\/span>\n            self.provider.search(_inputElem.value);<\/span>\n        }<\/span>\n    }<\/span>\n <\/span> \n    \/\/ Change the href and add an onclick handler for the link.<\/span><\/span>\n    _aElem.href = \"#\"<\/span>;<\/span>\n    _aElem.onclick = function<\/span>() {<\/span>\n        self.provider.search(_inputElem.value);<\/span>\n    }<\/span>\n <\/span> \n    \/\/ Add the provider name under the intput.<\/span><\/span>\n    var<\/span> _parent = _inputElem.parentNode;<\/span>\n    if<\/span> (_parent) {<\/span>\n        var<\/span> _divElem = document.createElement(\"div\"<\/span>);<\/span>\n        _parent.appendChild(_divElem);<\/span>\n        _divElem.className = \"provider\"<\/span>;<\/span>\n        _divElem.innerHTML = \"By \"<\/span> + this<\/span>.provider.getHomeHTML();<\/span>\n    }<\/span>\n}<\/span><\/pre>\n
The this<\/code> object must be closed so that the event handlers can access it; otherwise, when the event handler was called this<\/code> would refer to the element on which the event was fired. Simply pass in the element IDs of the search textbox and link to perform the search.<\/p>\n
Not satisfied by the search feature provided by Community Server I’ve again created some helpful JavaScript classes this time using object-oriented JavaScript to define a basic search provider and to subclass that for specialized providers like MSN Search. I defined several private properties and several privileged methods that can access those private properties, unlike public […]<\/p>\n","protected":false},"author":389,"featured_media":3843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[11,14,29,34],"class_list":["post-2643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-customizations","tag-development","tag-personal","tag-script"],"acf":[],"blog_post_summary":"
Not satisfied by the search feature provided by Community Server I’ve again created some helpful JavaScript classes this time using object-oriented JavaScript to define a basic search provider and to subclass that for specialized providers like MSN Search. I defined several private properties and several privileged methods that can access those private properties, unlike public […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/comments?post=2643"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media\/3843"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media?parent=2643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/categories?post=2643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/tags?post=2643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
While object-oriented JavaScript uses prototypal inheritance instead of classical inheritance, it is still a powerful tool. You can find lots of information about JavaScript inheritance<\/a> and JavaScript closures<\/a> that can help you learn more about object-oriented JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"