Modular javascript(javascript模块化编程)
<!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;
}
Modular javascript(javascript模块化编程)的更多相关文章
- JavaScript之模块化编程
前言 模块是任何大型应用程序架构中不可缺少的一部分,模块可以使我们清晰地分离和组织项目中的代码单元.在项目开发中,通过移除依赖,松耦合可以使应用程序的可维护性更强.与其他传统编程语言不同,在当前Jav ...
- Javascript的模块化编程
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- Javascript 的模块化编程及加载模块【转载+整理】
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 本文内容 引入 模块化 最初写法 对象写法 立即执行函数写法 放大模式 宽放 ...
- 学习了一下javascript的模块化编程
现在在我脑海里关于“模块化”的概念是这些词:简单.具有逻辑之美.易用.健壮.可扩展.似乎这些形容与我现在水平写出的代码有点格格不入啊. 所以今天想了解和简单的实践一下“模块化开发”. 1.首先学习一下 ...
- 应用require.js进行javascript模块化编程小试一例
长久以来都渴望应用javascript的模块化编程.今日紧迫更甚,岁月蹉跎,已经不能再等了. 拜读阮一峰的有关文章已经好几遍,文章写得真好,简洁流畅,头头是道,自觉有点明白了.但经验告诉我们,一定要亲 ...
- javascript模块化编程：CommonJS和AMD规范
AMD规范,异步模块定义.与CommonJS规范齐名并列. 作用都是利于JavaScript的模块化编程. 模块化编程的好处就是: 1.可重用 2.独立 3.能解决加载的依赖性问题 4.能解决重复加载 ...
- Javascript模块化编程（三）：require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程（一）：模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- Javascript模块化编程（二）：AMD规范（转）
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- jqueryui autocomplete的使用与angular配合的小坑
刚开始在做搜索联想功能时,使用了jquery.autocomplete.js插件,当并不理想,首先插件老旧,也只适合老版的jquery.其次在数组中只能联想到首字母一样的数据,比如[12,23,222 ...
- C#—泛型_推迟一切可以推迟的东西
泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定一个或多个具 ...
- Charles抓包工具安装与配置
在实际开发中,我们需要时常抓取线上的请求及数据,甚至是请求的html文档,js,css等静态文件来进行调试.在这里,我使用charles来进行以上操作.但是呢,charles需要进行一系列配置才能达到 ...
- 实现excel导入导出功能，excel导入数据到页面中，页面数据导出生成excel文件
今天接到项目中的一个功能,要实现excel的导入,导出功能.这个看起来思路比较清楚,但是做起了就遇到了不少问题. 不过核心的问题,大家也不会遇到了.每个项目前台页面,以及数据填充方式都不一样,不过大多 ...
- 浅谈IOC
一.引言 IOC-Invertion of Control,即控制反转,是一种程序设计思想,世上本没有路,走的人多了便有了路,本文将一步步带你了解IOC设计思想的演进之路. 在学习IOC之前我们先初步 ...
- Python序列类型
Python序列类型 序列:字符.列表.元组 所有序列都支持迭代 序列表示索引为非负整数的有序对象集合 字符和元组属于不可变序列,列表可变 1)字符 字符串字面量:把文本放入单引号.双引号或三引号中: ...
- Linux程序设计之shell程序设计
看了<linux程序设计(第4版)>(作者:Neil Matthew ,Richard Stones ,陈建 ,宋健建译).做个笔记,以备后面查看. 首先,清楚几个概念. shell编程属 ...
- js中嵌入jsp(html)代码的双引号转换问题--事件没反应
下面是一段今天遇到问题的代码,select中写了onchange事件 ,在没有加转义的情况下,F12解析的代码是错乱的,双引号与内容中写的不一致,还会有空格出现,经过一段时间的摸索,发现在出错的地方加 ...
- 计算 x y 的最近值
计算xy的最近值. 代码如下: package Day05; import java.util.Arrays; public class FindNearestPoints { public stat ...
- LuaFramework热更新过程（及可更新的loading界面实现）
1.名词解释: 资源包:点击 LuaFramework | Build XXX(平台名) Resource,框架会自动将自定义指定的资源打包到StreamingAssets文件夹,这个 ...