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模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- jquery判断按钮是否被选中了
<script type="text/javascript"> function genjin_view2(elm){ if($(elm).attr("che ...
- ionic搭建与基础
ionic搭建与基础 一.环境搭建 安装 npm install -g cordova npm install -g ionic 创建 项目 ionic start MyProject blank i ...
- seajs源码阅读
乘着周日有点时间,阅读一下玉伯大神的源码. seajs的源码写得真的很好,很是佩服,工整美观不愧是大神,造福百姓. 说起seajs不得不说,AMD和CMD的区别. CMD 推崇依赖就近,AMD 推崇 ...
- 《javascript高级程序设计》笔记七
第五章 引用类型(三) 今天首先说的就是Function类型.下面就是定义函数的两种方法,第一种使用函数声明语法定义,第二种使用函数表达式定义.这两种定义函数的方式几乎没有什么区别. function ...
- 【No JSON object could be decoded】问题解决
本人使用爬虫从某数据库中下载了一批数据,本地存为json格式(pgp.json)然后使用python中的json模块进行解析(json.load),一直出现下述错误 从google中查找到了同样错误的 ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- Luogu T7152 细胞（递推，矩阵乘法，快速幂）
Luogu T7152 细胞(递推,矩阵乘法,快速幂) Description 小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并 观察细胞分裂的规律. 他选取了一种特别的细胞,每 ...
- 阿里巴巴2018届应届生在线编程测验-研发工程师C/C++
刚才去做了阿里巴巴的编程测验,好消息是抽到的题相对别的题简单一些,坏消息是编的太慢了,没有做完. 现在把题目和自己后来编出来的代码贴在这里,供大家参考. 题目: 1. 从命令行输入若干个正整数(大于等 ...
- 数控G代码编程详解大全
一.G代码功能简述 G00------快速定位 G01------直线插补 G02------顺时针方向圆弧插补 G03------逆时针方向圆弧插补 G04------定时暂停 G05------通 ...
- MVC MVC+EF快速搭建
MVC+EF快速搭建 一.准备: vs2017(个人用的) 二.开始MVC+EF之旅吧: 1.创建mvc项目: Web-ASP.NET Web Application(.NET Framework) ...