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.
