javascript库概念与连缀

一、JavaScript 库

1.什么是javascript库：

javascript库，说白了，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。
现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。

2.创建基础库

base.js

/*函数式
function $(id) {return document.getElementById(id);
}
*//*对象式*/
var Base = {getId : function (id) {return document.getElementById(id)},getName : function (name) {return document.getElementsByName(name)},getTagName : function (tag) {return document.getElementsByTagName(tag);}
};

demo.js

/*
window.onload = function () {alert(document.getElementById('box').innerHTML);alert(document.getElementsByName('sex')[0].value);alert(document.getElementsByTagName('p')[0].innerHTML);
};
window.onload = function () {alert($('box').innerHTML);
}
*/
window.onload = function () {alert(Base.getId('box').innerHTML);alert(Base.getName('sex')[0].value);alert(Base.getTagName('p')[0].innerHTML)
};

demo.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：理解JavaScript库</title>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
</head>
<body><div id="box">id</div><input type="radio" name="sex" value="男" checked="checked" /><p>段落</p>
</body>
</html>

二、连缀

所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。比如：

$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});

连缀的好处，就是快速方便的设置节点的操作。

demo.js

/*//alert(Base.getId('box'));Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {alert('a');}).addClass('a');Base是一个基础库的核心对象Base.getId('box')返回的是一个divElement，这个对象是没有css方法的将Base.getId('box')返回改成Base即可，返回Base对象Base.getId('box').css('color','red')返回的也是Base对象Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {alert('a');}); click方法执行完毕之后，还是返回的Base对象在Base对象中，添加css方法,html方法,click方法var base = new Base();base.getId('box').style.color = 'red';base.getId('box').style.backgroundColor = 'black';base.getId('box').innerHTML = 'pox';base.getId('box').onclick = function () {alert(this.innerHTML);};
*/window.onload = function () {//alert(base.getId('box').elements.length);$().getId('box').css('color', 'red').css('backgroundColor', 'black');//alert(base.getTagName('p').elements.length);$().getTagName('p').css('color', 'green').html('标题').click(function () {alert('a');}).css('backgroundColor', 'pink');
};

base.js

function Base() {//创建一个数组，来保存获取的节点和节点数组this.elements = [];//获取ID节点this.getId = function (id) {this.elements.push(document.getElementById(id));return this;};//获取元素节点this.getTagName = function (tag) {var tags = document.getElementsByTagName(tag);for (var i = 0; i < tags.length; i ++) {this.elements.push(tags[i]);}return this;};}
//上面写法麻烦的地方是，需要在前台 new 出来，然后调用。但采用这种方式，
//我们可以在每个方法里在每个方法里都返回这个对象，并且还可以在对象的原型里添加
//方法，这些都是连缀操作最基本的要求。//为了避免在前台 new 一个对象，我们可以在库里面直接 new。
var $ = function () {return new Base();
}
Base.prototype.css = function (attr, value) {for (var i = 0; i < this.elements.length; i ++) {this.elements[i].style[attr] = value;}return this;
}Base.prototype.html = function (str) {for (var i = 0; i < this.elements.length; i ++) {this.elements[i].innerHTML = str;}return this;
}Base.prototype.click = function (fn) {for (var i = 0; i < this.elements.length; i ++) {this.elements[i].onclick = fn;}return this;
}

demo.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：理解JavaScript库</title>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
</head>
<body><div id="box">box</div><p>段落</p><p>段落</p><p>段落</p>
</body>
</html>

转载于:https://www.cnblogs.com/LO-ME/p/3664098.html

javascript库概念与连缀相关推荐

最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
js ajax通用方法,目前5个流行的AJAX调用JavaScript库
在这篇文章中,我们将看一些用于进行AJAX调用的最好的JavaScript库,包括jQuery,Axios和Fetch. AJAX是由客户端框架和库用来对服务器进行异步HTTP调用的一组Web开发技术 ...
「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
HyperApp：用于构建前端应用程序的1 KB JavaScript库
Hyperapp是一个JavaScript库,用于构建功能丰富的Web应用程序. 它结合了实用的Elm启发式状态管理方法和支持键更新和生命周期事件的VDOM引擎-所有这些都无需依赖. 提供或占用几个字 ...
jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
JavaScript库和API
by Adam Recvlohe 通过亚当·雷夫洛厄(Adam Recvlohe) API就像一盒巧克力 (APIs are like a box of chocolates) If you have ...
Keypress - 捕获键盘输入的JavaScript库
Keypress 是一个强大的 JavaScript 库,用于捕获键盘输入.这是一个有非常特殊的功能的输入捕获库,它是很容易掌握和使用,并且不依赖第三方库.在网站开发中,经常会碰到需要处理键盘输入的场 ...
jQuery JavaScript库达到新的里程碑
一.什么是JQuery? Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Saf ...
活学活用流行的JavaScript库——《JavaScript实战》
媒体评论 "本书并不像一本教材,畅读之后,你会觉得它就是一位讲课生动的老师,带领你遨游 JavaScript 海洋,把你推向技术风浪的前沿,同时又给了你一个功能完备的冲浪板,接下来就是你在风 ...

javascript库概念与连缀

javascript库概念与连缀相关推荐

最新文章

热门文章