封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

简介: 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库,比如jQuery,Prototype,Dojo等等,这些javascript库已经把最常用的代码进行了有效的封装,以便我们开发,从而提高效率。

封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

youjobit07  youjobit07  2014-10-10 15:32:59
前言:
      现如今有太多优秀的开源javascript库,比如jQuery,Prototype,Dojo等等,这些javascript库已经把最常用的代码进行了有效的封装,以便我们开发,从而提高效率。现在我这里探讨的是自己创建一个javascript库,自己创建的肯定没有那些开源javascript库功能强大,目的主要是为了提升自己的原生javascript开发能力。
      Base.js是我自己学习瓢城web俱乐部李炎灰老师的javascript教程,根据教程总结归纳出一份常用的js代码片段,里面有我学习时候的一些注释,笔记。这些笔记站在新手的角度思考初学时会碰上的问题,有些问题可能我自己以后再回头看都会笑自己当初怎么问这么幼稚的问题,希望在我学而时习之,温故而知新的同时,能帮助众多和我一样想学原生js的新手。当然,可能光看我的笔记作用不太大,不知道我写的什么玩意- -!!推荐大家自己也去看看李炎灰老师的javascript教程。百度搜"瓢城web俱乐部"就可以了。
//2014.10.07【90】

//在常用的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);
        }
};



/*
然后封装之后如何调用(有些啰嗦了,照顾新手)。就把Base.js当做一个jquery,写html页面的时候在</body>前面加上
<script src="js/Base.js"></script>
<script src="js/demo.js"></script>

封装好的Base.js不管它,需要在demo.js中调用我们封装好的代码。在demo.js中写

window.onload=function(){
        alert(Base.getId('box').innerHTML);
        alert(Base.getName('sex')[0].value);
        alert(Base.getTagName('div')[2].innerHTML);
}


【PS:写到这里发现我们自己封装好的Base.js获取节点的方法还是比不上jquery的选择器,不管是ID还是类或者元素,都可以直接一个“$”搞定,以后等到一定能力了去看看jquery里面怎么封装的那些获取节点的方法去。】


*/
复制代码


接下来是介绍【连缀】功能,比如写jquery的时候,经常会看到这样的代码。
$('#box').css('color','red').html('标题').click(function(){alert('a')});
这就是连缀,就是一句话同时设置一个或多个节点,两个或两个以上的操作。(突然想到一个词,链式调用....链式调用跟连缀感觉有些像....希望以后深入学习的时候可以弄懂吧.)
这样的话就需要对上面的代码作出一些修改,var Base={},这种写法不能在它的原型中添加方法,所以需要使用函数式对象写法:

//2014.10.07【91】

/*

现有代码:
var Base = {
        getId : function (id) {
                return document.getElementById(id)
        },
        getName : function (name) {
                return document.getElementsByName(name)
        },
        getTagName : function (tag) {
                return document.getElementsByTagName(tag);
        }
};

需求:
修改代码,在Base这个基础库的核心对象中,添加css方法,html方法,click方法,并且实现连缀,
即 Base.getId('box').css('color','red').css('backgroundColor','black').html('pox'),click(function(){alert('a')});

分析:添加方法不难,难的是如何实现连缀,
          Base.getId('box')返回的是一个divElement,这个对象是没有CSS方法的;
          我们需要将Base.getId('box')返回Base对象,
          Base.getId('box').css('color','red')返回的也是Base对象;
          Base.getId('box').css('backgroundColor','black')还是返回Base对象;
          即每执行完一个方法后 都要返回Base对象。
*/

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;
        }
}
//添加css()方法
Base.prototype.css = function (attr, value) {
        for (var i = 0; i < this.elements.length; i ++) {
                this.elements[i].style[attr] = value;
        }
        return this;
}
//添加html()方法
Base.prototype.html=function(str){
        for(var i=0;i<this.elements.length;i++){
                this.elements[i].innerHTML=str;
        }
        return this;
}
//添加click()方法
Base.prototype.click=function(fn){
        for(var i=0;i<this.elements.length;i++){
                this.elements[i].onclick=fn;
        }
        return this;
}
/*
一:由push联想到数组那一章节,可以复习下关于数组的一些方法,toLocalString()、toString()、valueOf()、join()、后进先出栈方法LIFO, push(),shift(),先进先出队列方法FIFO吗,shift(),unshift(),reverse(),sort(),concat(),slice(),splice(),indexOf(),lastIndexOf(),every(),filter(),forEach(),map(),some(),reduce(),reduceRight()...

二:为什么CSS要写到外面,而不是Base(){} 里面?这是为了区分获取节点和各种方法。所以方法单独拿出来写

三:为什么是Base.prototype.css=... ,而不是 this.css=... 或者 Base.css=...?

如果用this.css,这时候this是代表window,所以不能用this;
关于this关键字,翻了下书,没找到什么合适的描述。留个链接以后详细看看
http://www.blogjava.net/baoyaer/articles/105864.html

如果用Base.css,运行依然会报错,“base.getId("#box").css is not a function”;
原因复习【33-39】面向对象与原型;




*/

//前台调用代码,即demo.js里面的代码

window.onload=function(){
        var base=new Base();
        base.getId('box').css('color','red').css('backgroundColor','black');
        base.getTagName('p').css('color','green').html('标题').click(function(){
                alert('a');
        }).css('backgroundColor','pink');
};


/*html主要代码

<div id="box">box</div>


<p>段落</p>
<p>段落</p>
<p>段落</p>

*/
复制代码


写到这里,满以为要告一段落了,一运行,看看,html()方法有效,把p里面的内容“段落”都改成标题了,背景颜色也变成粉色了,连缀也实现了,再看,仔细看,好像哪里不对劲!按照代码,我是想把 box的背景色变成黑色,段落背景变成粉色的,为什么都是粉色了?!而且本来只想把“段落”变成“标题”的,结果连带 “box”也变成“标题”二字了。

这是因为后面的与前面都是用的一个对象,var base=new Base();后面的会把前面的覆盖,所以得修改下,每个都必须有专门的一个实例。最后,得出来的纯净的代码就是

var $ = function () {
        return new Base();
}

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;
        };
        
}
 文章来源: http://www.youjobit.com/news_248.html
IT人才招聘
 

 

目录
相关文章
|
1天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
4天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
15 1
|
10天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
13天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
17 2
|
13天前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
12 2
|
11天前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
10 0
|
12天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
10 0
|
前端开发 JavaScript
Javascript 面向对象编程(一):封装
作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
774 0