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模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- IP地址分类百科
IP地址分类介绍 这里讨论IPv4,IP地址分成了A类.B类.C类.C类.E类,如下图所示: 解释: A类以0开头,网络地址有7位,主机地址有24位,举例:A类地址:0 10000000 000000 ...
- JavaScript深入浅出补充——（一）数据类型，表达式和运算符
项目基本做完,在进行下一阶段学习之前先看视频学习回顾一下JavaScript 一.数据类型 JavaScript中有五种原始类型和一种对象类型 JavaScript弱类型语言中隐式转换 num-0 字 ...
- 使用python操作mysql数据库
这是我之前使用mysql时用到的一些库及开发的工具,这里记录下,也方便我查阅. python版本: 2.7.13 mysql版本: 5.5.36 几个python库 1.mysql-connector ...
- python2和python3中的类
经典类与新式类 例如: A B C D 四个类 D 包含 BC : B和C分别包含A py2 在经典类中是按深度优先来继承 例如: D中查找B,B没有从A中查找 新式类中是按广度优先来查找继承的 ...
- 使用 Live555 搭建流媒体服务器
最近因为工作需要,需要搭建流媒体服务器,所以研究了一下,在此分享我的搭建过程. 搭建过程还是非常简单的! 搭建环境为Centos 7.2 64bit 一.安装gcc编译器 yum install gc ...
- C# Socket编程笔记（自己看，转载）
看到这个题目,是不是很眼熟?在博客园里搜下,保证会发现关于这个东东的文章实在是太多了~~~真得是没有写得必要,而且我也有点懒得去琢磨字句.(看到这,肯定得来个转折的了,不然就看不到下文了,不是吗)但是 ...
- ASP.NET Core 源码学习之 Logging[1]:Introduction
在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...
- 使用jQuery操作 DOM
DOM操作分为三类: 1.DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById() 2.HTML-DOM:用于处理HTML文档,如document.forms 3 ...
- Immutable的认识
Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper).它内部实现了一套完整的 ...
- 页面打印（js/jquery）
1.js实现(可实现局部打印) <html> <title>js打印</title> <head></head><body> ...