Modular javascript(javascript模块化编程)
2016-05-04 11:52
316 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script src="https://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.2/mustache.min.js"></script> <script> $(function(){ var people = { people : ['1','2'], 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(){ //bind改变指向问题 this.$button.on('click',this.addPerson.bind(this)); /*$(selector).delegate(childSelector,event,data,function) 返回值: jQuery delegate(selector,[type],[data],fn) 概述 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 */ /*jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQuery 1.7+ $( elements ).on( events, [selector], data, handler );*/ this.$ul.on('click','i.del',this.deletePerson.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){ // .closest() // 从当前元素开始 从父元素开始 // 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 var $remove = $(event.target).closest('li'); var i = this.$ul.find('li').index($remove); this.people.splice(i, 1); this.render(); } } people.init(); }) </script> <link rel="stylesheet" href="./style.css" /> </head> <body> <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> </body> </html>
$(function(){ var people = (function(){ var people = ['will','steve']; 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(); console.log(template); //bings event $button.on('click',addPerson); $ul.delegate('i.del','click',deletePerson); render(); function render(){ $ul.html(Mustache.render(template,{people:people})); } 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'); var i = $ul.find('li').index($remove); } people.splice(i,1); render(); } return { addPerson : addPerson, deletePerson : deletePerson } })(); people.addPerson('111'); people.deletePerson(1); })
body { background: #fafafa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; } .hero-unit { margin: 20px auto 0 auto; width: 300px; font-size: 12px; font-weight: 200; line-height: 20px; background-color: #eee; border-radius: 6px; padding: 10px 20px; } .hero-unit h1 { font-size: 60px; line-height: 1; letter-spacing: -1px; } .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } input { border: 1px solid #999; border-radius: 4px; padding: 10px; } button { zoom: 2; background-color: #999; border: 1px solid #999; border-radius: 4px; padding: 1px 5px; } button.active { background-color:rgb(165, 227, 158); } #peopleModule { text-align: center; } #peopleModule ul { padding: 0; } #peopleModule li { display: inline-block; list-style-type: none; background: #98ec9b; border-radius: 5px; padding: 3px 8px; margin: 5px 0; width: 200px; opacity: 0.8; transition: opacity 0.3s; } #peopleModule li:hover { opacity: 1; } #peopleModule li span { display: inline-block; width: 160px; overflow: hidden; text-overflow: ellipsis; } #peopleModule li i { cursor: pointer; font-weight: bold; float: right; font-style: normal; background: #666; padding: 2px 4px; font-size: 60%; color: white; border-radius: 20px; opacity: 0.7; transition: opacity 0.3s; margin-top: 3px; } #peopleModule li i:hover { opacity: 1; }
相关文章推荐
- jsp <c:forEach> 判断第一条 或 最后一条记录
- 弱智错误集锦N:result无法返回json
- Javascript 初识Javascript
- js 实现map
- 将json格式的字符串解析成Map对象
- JS省市区三级联动
- Extjs4 grid的排序
- 纯JS代码实现气泡效果
- JavaScript中清空数组的三种方式
- js弹出浏览器窗口
- Selectize.js插件使用简介
- jsp简单功能属性
- JS中的!=、== 、!==、===的用法和区别
- ExtJS -- form提交之取ComboBox的值
- jsp标签
- Jsp的最佳实践
- Jsp的内置对象
- javaScript 填充表单值的方法
- Jsp基础
- javaScript创建隐藏的form远程请求