3
\$\begingroup\$

I'm a beginner in JavaScript and lately I've been trying things with RequireJS, I'd like to get some feedback on how good/poor my code is and in what ways it can be improved.

My example below is just loading up social plugins - Facebook Like/Share, Twitter Tweet & Google +1. The code is functional and working.

index.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
        <meta name="description' content="Your description here." />
        <meta name="keywords" content="your, great, keywords" />
        <title>Your Website Title</title>
        <meta property="fb:app_id" content="1234567890" />
        <meta property="fb:admins" content="1234567890" />
        <meta property="og:title" content="Your Website Title" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.your-website.tld/" />
        <meta property="og:image" content="https://path/to/your/static/logo.png" />
        <meta property="og:description" content="Your description here." />
        <meta property="og:locale" content="en_GB" />
        <meta name="twitter:card" content="summary">
        <meta name="twitter:url" content="https://www.your-website.tld/">
        <meta name="twitter:title" content="Your Website Title">
        <meta name="twitter:description" content="Your description here.">
        <meta name="twitter:image" content="https://path/to/your/static/logo.png">
        <meta name="twitter:site" content="@your-website">
        <meta name="twitter:creator" content="@your-username">
    </head>
    <body>
        <div id="fb-root"></div>
        <div id="container">
            <div id="header-container">
                <header id="header">
                    <div class="social">
                        <div class="twitter">
                            <a href="https://twitter.com/share" class="twitter-share-button" data-text="Your Name" data-via="YourName" data-related="OtherName" data-hashtags="your-tag">Tweet</a>
                        </div>
                        <div class='fb-like' data-href="https://www.facebook.com/" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui"></div>
                        <div class="plusonec">
                            <!-- Place this tag where you want the +1 button to render. -->
                            <div class="g-plusone" data-size="small" data-href="https://www.your-website.tld/"></div>
                        </div>
                    </div>
                </header>
            </div>
        </div>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </body>
</html>

js/app.js:

requirejs.config({
    "shim": {
      "facebook": {
        exports: "FB"
      }
    },
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "facebook": "//connect.facebook.net/en_GB/all",
      "facebookLike": "lib/facebook/like",
      "googlePlus": "//apis.google.com/js/plusone",
      "twitter": "//platform.twitter.com/widgets"
    }
});

requirejs(["facebook"]);
requirejs(["facebookLike"]);
requirejs(["twitter"]);
requirejs(["googlePlus"]);
requirejs(["app/main"]);

lib/facebook/like.js:

define(["facebook"], function(){
  FB.init({
    appId      : "1234567890",
    xfbml      : "true"
  });
});

app/main.js:

define(["jquery"], function($) {

 // Unused placeholder

});

Note: I haven't included jQuery in the require config because it isn't actually used here.

\$\endgroup\$

0

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.