Skip to content

Instantly share code, notes, and snippets.

@wghglory

wghglory/index.html

Created April 29, 2017 06:16
Show Gist options
  • Save wghglory/ab6c81eb4df15ae69dd391c1f7b43b4f to your computer and use it in GitHub Desktop.
Save wghglory/ab6c81eb4df15ae69dd391c1f7b43b4f to your computer and use it in GitHub Desktop.
Download ZIP
modular, object literal, oop
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="hero-unit" id="statsModule"></div>
<script id="stats-template" type="text/template">
<h2>Stats</h2>
<strong>people: {{people}}</strong>
</script>
<div id="peopleModule">
<h1>People</h1>
<input placeholder="name" type="text">
<button id="addPerson">Add Person</button>
<ul id="people">
<script id="people-template" type="text/template">
{{#people}}
<li>
<span>{{.}}</span>
<i class="del">X</i>
</li>
{{/people}}
</script>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js'></script>
<!-- <script src="js/index2.js"></script> -->
<script src="pubsub.js"></script>
<script src="stats.js"></script>
<script src="people.js"></script>
</body>
</html>
Raw
index.js
// Object Literal 字面量
// 问题是：没有对外提供api接口，所有属性、方法都暴露
var people = {
people: ['Will', 'Steve'],
init: function() {
this.cacheDom();
this.bindEvents();
this.render();
},
cacheDom: function() {
this.$el = $('#peopleModule');
this.$button = this.$el.find('button');
this.$input = this.$el.find('input');
this.$ul = this.$el.find('ul');
this.template = this.$el.find('#people-template').html();
},
bindEvents: function() {
this.$button.on('click', this.addPerson.bind(this));
this.$ul.delegate('i.del', 'click', this.deletePerson.bind(this));
},
render: function() {
var data = {
people: this.people,
};
this.$ul.html(Mustache.render(this.template, data));
},
addPerson: function() {
this.people.push(this.$input.val());
this.render();
this.$input.val('');
},
deletePerson: function(event) {
var $remove = $(event.target).closest('li');
var i = this.$ul.find('li').index($remove);
this.people.splice(i, 1);
this.render();
}
};
people.init();
Raw
index2.js
// people module
var people = (function() {
var people = ['Will', 'Steve'];
//cache DOM
var $el = $('#peopleModule');
var $button = $el.find('button');
var $input = $el.find('input');
var $ul = $el.find('ul');
var template = $el.find('#people-template').html();
//bind events
$button.on('click', addPerson);
$ul.delegate('i.del', 'click', deletePerson);
_render();
function _render() {
$ul.html(Mustache.render(template, {
people: people
}));
}
// click => typeof event, input.value; api => typeof string
function addPerson(value) {
var name = (typeof value === "string") ? value : $input.val();
people.push(name);
_render();
$input.val('');
}
function deletePerson(event) {
var i;
if (typeof event === "number") {
i = event;
} else {
var $remove = $(event.target).closest('li');
i = $ul.find('li').index($remove);
}
people.splice(i, 1);
_render();
}
return {
addPerson: addPerson,
deletePerson: deletePerson
};
})();
//people.addPerson("Jake");
//people.deletePerson(0);
Raw
people.js
// people module
(function() {
var people = ['Will', 'Steve'];
//cache DOM
var $el = $('#peopleModule');
var $button = $el.find('button');
var $input = $el.find('input');
var $ul = $el.find('ul');
var template = $el.find('#people-template').html();
//bind events
$button.on('click', addPerson);
$ul.delegate('i.del', 'click', deletePerson);
_render();
function _render() {
$ul.html(Mustache.render(template, {
people: people
}));
// pubsub!
events.emit("peopleChanged", people.length);
}
// click => typeof event, input.value; api => typeof string
function addPerson(value) {
var name = (typeof value === "string") ? value : $input.val();
people.push(name);
_render();
$input.val('');
}
function deletePerson(event) {
var i;
if (typeof event === "number") {
i = event;
} else {
var $remove = $(event.target).closest('li');
i = $ul.find('li').index($remove);
}
people.splice(i, 1);
_render();
}
})();
Raw
pubsub.js
//events - a super-basic Javascript (publish subscribe) pattern
var events = {
events: {},
on: function(eventName, fn) {
this.events[eventName] = this.events[eventName] || [];
this.events[eventName].push(fn);
},
off: function(eventName, fn) {
if (this.events[eventName]) {
for (var i = 0; i < this.events[eventName].length; i++) {
if (this.events[eventName][i] === fn) {
this.events[eventName].splice(i, 1);
break;
}
};
}
},
emit: function(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(function(fn) {
fn(data);
});
}
}
};
// class Event {
// constructor() {
// this.events = {};
// }
//
// on(eventName, fn) {
// this.events[eventName] = this.events[eventName] || [];
// this.events[eventName].push(fn);
// }
//
// off(eventName, fn) {
// if (this.events[eventName]) {
// for (var i = 0; i < this.events[eventName].length; i++) {
// if (this.events[eventName][i] === fn) {
// this.events[eventName].splice(i, 1);
// break;
// }
// };
// }
// }
//
// emit(eventName, data) {
// if (this.events[eventName]) {
// this.events[eventName].forEach(function(fn) {
// fn(data);
// });
// }
// }
// }
Raw
stats.js
// Stats module
(function() {
var people = 0;
//cache DOM
var $stats = $('#statsModule');
var template = $('#stats-template').html();
// pubsub!
events.on('peopleChanged', setPeople);
_render();
function _render() {
$stats.html(Mustache.render(template, {
people: people
}));
}
function setPeople(newPeople) {
people = newPeople;
_render();
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment