Skip to content

Instantly share code, notes, and snippets.

@hwclass

hwclass/base.html

Last active January 1, 2016 19:59
Show Gist options
  • Save hwclass/8193929 to your computer and use it in GitHub Desktop.
Save hwclass/8193929 to your computer and use it in GitHub Desktop.
Download ZIP
Page by Page Namespace with IIFE Code Structure
Raw
base.html
<!DOCTYPE html>
<html lang="tr" class="no-js">
<head>
<link rel="canonical"/>
<title>Project Name</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="test"/>
<meta name="keywords" content="test"/>
<meta property="fb:app_id" content="229179347121022"/>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- INNER-STYLE-DECLERATIONS -->
<style>
.productContainer.selected {
background-color: #DDDDDD;
}
</style>
<!-- /INNER-STYLE-DECLERATIONS -->
<!-- CSS-FILES --><!-- /CSS-FILES -->
<!--[if IE 7]> <link rel="stylesheet" href="{{STATIC_URL}}css/ie7.css" type="text/css" /> <![endif]-->
<!--[if IE 8]> <link rel="stylesheet" href="{{STATIC_URL}}css/ie8.css" type="text/css" /> <![endif]-->
<!--[if IE 9]> <link rel="stylesheet" href="{{STATIC_URL}}css/ie9.css" type="text/css" /> <![endif]-->
</head>
<body>
<div class="wrapperall clearfix">
<div class="wrapper clearfix">
<div class="productsWrapper">
<div class="productContainer">
product
</div>
<div class="productContainer">
product
</div>
<div class="productContainer">
product
</div>
<div class="productContainer">
product
</div>
</div>
</div>
</div>
<!-- JS-FILES -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script src="site_static/project/js/base.js"></script>
<!-- /JS-FILES -->
</body>
</html>
Raw
base.js
/*DOM Ready*/
$(function($, base, undefined) {
/*Create Empty Objects to be Inherited */
var app, config, el, page, utils = {};
/*Inheritance for Base Object*/
app = $.extend(base);
/*Inheritance for Sub Objects into Main Object*/
config = $.extend(app.config);
el = $.extend(app.el);
pages = $.extend(app.pages);
utils = $.extend(app.utils);
/*Initialize Document Ready Calls Private _init Method*/
app.init();
/*Log Config Title onto Console*/
utils.log(config.title);
/*Get the Wrapper Element and Log it onto the Console*/
utils.log($(el.wrapperAll));
}(jQuery, function($, undefined) {
/*
* Type : Object
* @no-event
* Context : window
* Info: Namespace Object for Base Page
* @no-params
* @no-return
* Steps :
* a) Sets a namespace object into window.
*/
var _Base = _Base || {};
/*
* Type : Object
* @no-event
* Context : _Base
* Info: Namespace Object for Config Subclass of Base Main Class for General Configuration
* @no-params
* @no-return
* Steps :
* a) Sets config values into variables and constants within itself.
*/
_Base._config = {
title : 'Ana Sayfa',
dataLayer : [],
auth : $.cookie('is_authenticated'),
productSelectedBackColorClass : 'selected'
}
/*
* Type : Object
* @no-event
* Context : _Base
* Info: Namespace Object for Element Subclass of Base Main Class for Elements in the Base Page
* @no-params
* @no-return
* Steps :
* a) Sets elements into variables within itself.
*/
_Base._el = {
wrapperAll : document.getElementsByClassName('wrapperall'),
wrapper : document.getElementsByClassName('wrapper'),
productsWrapper : document.getElementsByClassName('productsWrapper'),
productContainer : document.getElementsByClassName('productContainer'),
}
/*
* Type : Object
* @no-event
* Context : _Base
* Info: Namespace Object for Element Subclass of Base Main Class for Pages within the Project General
* @no-params
* @no-return
* Steps :
* a) Sets pages context within itself.
*/
_Base._pages = {
ProductList : {},
Checkout : {}
}
/*
* Type : Method
* @no-event
* Context : _Base
* Info: Initialization Method for Base Page
* @no-params
* @no-return
* Steps :
* a) Executes code within itself.
*/
_Base._init = function() {
/*test code*/
console.log(_Base._utils.log('project initialized...'));
if(_Base._config.auth != "True") {
_Base._config.dataLayer.push({'CV_MDR': $.cookie('duration')});
_Base._config.dataLayer.push({'CV_Gender': $.cookie('gender')});
_Base._config.dataLayer.push({'CV_Purchase': $.cookie('purchase')});
}
$(_Base._el.productContainer).click(function (e) {
$(this).toggleClass(_Base._config.productSelectedBackColorClass);
})
/*test code*/
}
/*
* Type : Object
* @no-event
* Context : _Base
* Info: Utils object for Base Page
* @no-params
* @no-return
* Steps :
* a) Wraps utility methods within _Base.
*/
_Base._utils = {
/*
* Type : Method
* Event : Anonymous
* Context : _Base._utils
* Info: Logs onto console.
* Params : messages (String)
* @no-return
* Steps :
* a) Logs message onto console.
*/
log : function(message) {
console.log(message);
}
}
/*
* Type : Object
* @no-event
* Context : window
* Info: Identifies globals
* @no-params
* @no-return
* Steps :
* a) Identifies globals within window.
*/
return {
config : _Base._config,
el : _Base._el,
pages : _Base._pages,
init : _Base._init,
utils : _Base._utils
}
}(jQuery)));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment