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模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- 【知识整理】这可能是最好的RxJava 2.x 入门教程（四）
这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) 这可能是最好的RxJava 2. ...
- selenium webDriver给隐藏域赋值 input hidden set value
//直接这样无法给input hidden赋值// driver.findElement(By.id("image_default")).sendKeys("a1112. ...
- jeecg项目子窗口获得父窗口元素id
jeecg项目子窗口获得父窗口元素id, var parentWin = frameElement.api.opener;alert($(parentWin.document).find(" ...
- 基于spring多数据源动态调用及其事务处理
需求: 有些时候,我们需要连接多个数据库,但是,在方法调用前并不知道到底是调用哪个.即同时保持多个数据库的连接,在方法中根据传入的参数来确定. 下图的单数据源的调用和多数据源动态调用的流程,可以看出在 ...
- webpack自动生成页面
在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新.这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访 ...
- python核心数据结构之字典
 [TOC ...
- 网页标题title的闪动提示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Chapter 3. Video Coding Concepts
本章主要介绍一些有关视频编码的概念 时域模型(Temporal Model) 时域模型的作用是去除帧间冗余.如:将第二帧减去第一帧,得到的剩余信息,其能量会远小于第二帧本身. 基于块的运动估计和补偿 ...
- 在线SVN仓库实现：金山快盘+TortoiseSVN(Win)+SCPlugin(Mac)
前段时间一直在研究SVN在线托管,也尝试了网上推荐的免费托管网站. 但毕竟是是免费的,还是要受到比如空间大小.私有性等这样那样的限制,感觉有些麻烦. 而且,比较心疼自己在本地开发的时候积累的更新日志, ...
- OpenShitf 使用教程
OpenShitf https://www.openshift.com 1.注册openshitf账号 https://www.openshift.com/app/account/new 2.gett ...