设计模式知识连载（37）---链模式:
2017-12-30 14:41
357 查看
<body>
<h3>设计模式知识连载（37）---链模式:</h3>
<p>
通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用时，对该对象的多次引用
【注：半成品~~~】
</p>
<hr>
<div id = 'demo'>
</div>
<div id = 'demo2'>
<p class="test"></p>
<p class="test"></p>
<p class="test"></p>
<p class="test"></p>
<p class="test"></p>
<p class="test"></p>
</div>
<hr>
<div id="test">
123456
</div>
<script type="text/javascript">
/**
* 案例一：深究jQuery，方式一：初始
*/
// var A = function() {} ;
// A.prototype = {
// length : 2,
// size : function() {
// return this.length
// }
// } ;
// var a = new A() ;
// console.log('a.size:', a.size()) ;
// console.log('A.size()：', A.size()) ; // size是绑定在A的原型上，不是绑定在A自身上。
// console.log('A().size()：', A().size()) ; // A函数对象执行的结果是没有返回值的所以找不到size方法。
/**
* 案例一：深究jQuery，方式二：进阶
*/
// var A = function() {
// return B ;
// } ;
// var B = A.prototype = {
// length : 2,
// size : function() {
// return this.length ;
// }
// } ;
// console.log(A().size()) ;
/**
* 案例一：深究jQuery，方式三：进阶
*/
// var A = function(selector) {
// return A.fn.init(selector) ;
// }
// A.fn = A.prototype = {
// init : function(selector) {
// return document.getElementById(selector) ;
// },
// length : 2,
// // size : function() {
// // return this.length ; // this取不到
// // }
// }
// var demo = A('demo') ;
// console.log('demo：', demo) ;
/**
* 案例一：深究jQuery，方式四：进阶
*/
// var A = function(selector) {
// return A.fn.init(selector) ;
// } ;
// A.fn = A.prototype = {
// init : function(selector) {
// // 作为当前对象的属性值保存
// this[0] = document.getElementById(selector) ;
// // 校正length属性
// this.length = 1 ;
// // 返回当前对象
// return this ;
// },
// length : 2,
// size : function() {
// return this.length ;
// }
// }
// var demo = A('demo') ;
// var size = demo.size() ;
// console.log('demo：', demo) ;
// console.log('size：', size) ;
/**
* 案例一：深究jQuery，方式五：进阶
*/
// var A = function(selector) {
// return new A.fn.init(selector) ;
// }
// A.fn = A.prototype = {
// // 强化构造器
// constructor : A,
// init : function(selector) {
// // console.log('this.constructor：', this.constructor) ;
// // 作为当前对象的属性值保存
// this[0] = document.getElementById(selector) ;
// // 校正length属性
// this.length = 1;
// // 返回当前对象
// return this ;
// },
// length : 2,
// size : function() {
// return this.length
// }
// }
// A.fn.init.prototype = A.fn ;
// var demo = A('demo') ;
// var size = demo.size() ;
// console.log(A) ;
// console.log(demo) ;
// console.log('size：', size) ;
/**
* 案例一：深究jQuery，方式五：进阶
*/
/* 获取某类元素 */
// selector 选择符, context 上下文
var A = function(selector, context) {
return new A.fn.init(selector, context) ;
}
A.fn = A.prototype = {
constructor : A,
// 增强数组
push : [].push,
sort : [].sort,
splice : [].splice,
init : function(selector, context) {
// 获取元素长度
this.length = 0 ;
// 默认获取元素的上下文为document
context = context || document ;
// 如果是id选择符，按位非将-1转化为0，转化为布尔值false
if(~selector.indexOf('#')) {
// 截取id并选择
this[0] = document.getElementById(selector.slice(1)) ;
this.length = 1;
// 如果是元素名称
}else {
// 在上下文中选择元素
var doms = context.getElementsByTagName(selector) ;
// 从第一个开始筛选
var i = 0 ;
// 获取元素长度
var len = doms.length ;
for(; i < len; i++) {
// 压入this中
this[i] = doms[i] ;
}
// 校正长度
this.length = len ;
}
// 保存上下文
this.context = context ;
// 保存选择符
this.selector = selector ;
// 返回对象
return this ;
},
length : 2,
size : function() {
return this.length ;
}
}
A.fn.init.prototype = A.fn ;
// 对象拓展
A.extend = A.fn.extend = function() {
// 拓展对象从第二个参数算起
var i = 1 ;
// 获取参数长度
var len = arguments.length ;
// 第一个参数为源对象
var target = arguments[0] ;
// 拓展对象中属性
var j ;
// 如果只传一个参数
if(i == len) {
// 源对象为当前对象
target = this ;
// i从0计数
i-- ;
}
// 遍历参数中拓展对象
for(; i < len; i++) {
for(j in arguments[i]) {
// 拓展源对象
target[j] = arguments[i][j] ;
}
}
return target ;
}
// 测试用例：
// 拓展一个对象
var demo = A.extend({first : 1}, {second : 2}, {third : 3}) ;
console.log(demo) ;
// 拓展A.fn方式一
A.extend(A.fn, {version : '1.0'});
console.log(A('demo').version) ;
// 拓展A.fn方式二
A.fn.extend({getVersion : function() {
return this.version ;
}}) ;
console.log(A('demo').getVersion()) ;
// 拓展A方式一
A.extend(A, {author : '雨打芭蕉'}) ;
console.log(A.author) ;
// 拓展A方式二
A.extend({nickname : '雨夜清河'}) ;
console.log(A.nickname) ;
// 将‘-’分割线转化为驼峰式
A.fn.extend({
camelCase : function(str) {
console.log('执行了将‘-’分割线转化为驼峰式方法') ;
return str.replace(/\-(\w)/g, function(all, letter) {
return letter.toUpperCase() ;
}) ;
}
}) ;
// 添加事件
A.fn.extend({
on : (function() {
console.log('执行了添加事件的方法') ;
// 标准浏览器DOM2级事件
if(document.addEventListener) {
return function(type, fn) {
var i = this.length - 1;
// 遍历所有元素添加事件
for(; i >=0 ; i--) {
this[i].addEventListener(type, fn, false) ;
}
// 返回源对象
return this ;
}
// IE浏览器DOM2级事件
}else if(document.attachEvent) {
return function(type, fn) {
var i = this.length - 1 ;
for(; i >= 0; i--) {
this[i].addEvent('on' + type, fn) ;
}
return this ;
}
// 不支持DOM2级事件浏览器添加事件
}else {
return function(type, fn) {
var i = this.length - 1;
for(; i >= 0; i--) {
this[i]['on' + type] = fn ;
}
return this ;
bf25
}
}
})()
}) ;
// 设置css样式
A.fn.extend({
css : function() {
console.log('执行了设置css样式方法') ;
var arg = arguments ;
var len = arg.length ;
if(this.len < 1) {
return this ;
}
// 只有一个参数时
if(len === 1) {
// 如果为字符串则为获取第一个元素css样式
if(typeof arg[0] === 'string') {
console.log('只有一个参数时') ;
// IE
if(this[0].currentStyle) {
return this[0].currentStyle[name] ;
}else{
return getComputedStyle(this[0], false)[name] ;
}
// 为对象时，则设置多个样式
}else if(typeof arg[0] === 'object') {
console.log('为对象时，则设置多个样式') ;
console.log('arg[0]：', arg[0]) ;
// 遍历每个样式
for(var i in arg[0]) {
for(var j = this.len - 1; j >=0; j--){
// 调用拓展方法camelCase将'-'分割线转化为驼峰式
this[j].style[A.camelCase(i)] = arg[0][i] ;
}
}
}
// 两个参数则设置一个样式
}else if(len === 2) {
for(var j = this.len - 1; j >= 0; j--) {
this[j].style[A.camelCase(arg[0])] = arg[1] ;
}
}
return this ;
}
}) ;
// 设置属性
A.fn.extend({
attr : function() {
console.log('执行了设置属性方法') ;
var arg = arguments ;
var len = arg.length ;
if(this.len < 1) {
return this ;
}
// 如果一个参数
if(len === 1) {
// 为字符串， 则获取第一个元素属性
if(typeof arg[0] === 'string') {
return this[0].getAttribute(arg[0]) ;
// 为对象设置每个元素的多个属性
}else if(typeof arg[0] === 'object') {
// 遍历属性
for(var i in arg[0]) {
for(var j = this.length - 1; j >= 0; j--) {
this[j].setAttribute(i, arg[0][i]) ;
}
}
}
// 两个参数则设置每个元素单个属性
}else if(len === 2) {
for(var j = this.length -1 ; j >= 0; j--) {
this[j].setAttribute(arg[0], arg[1]) ;
}
}
return this ;
}
}) ;
// 获取或者设置元素的内容
A.fn.extend({
html : function() {
console.log('执行了获取或者设置元素的内容方法') ;
var arg = arguments ;
var len = arg.length ;
// 无参数则获取第一个元素的内容
if(len === 0) {
return this[0] && this[0].innerHTML ;
// 一个参数则设置每一个元素的内容
}else {
for(var i = this.len - 1; i >= 0; i--) {
this[i].innerHTML = arg[0] ;
}
}
return this ;
}
}) ;
// 测试实例
A('test')
.css({
height : '30px',
border : '1px solid red',
'background-color' : 'blue'
})
// .attr('class', 'demo')
// .html('add demo text')
// .on('click', function() {
// console.log('clicked') ;
// });
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 设计模式知识连载（28）---状态模式:
- 设计模式知识连载（34）---备忘录模式:
- 设计模式知识连载（29）---策略模式:
- 设计模式知识连载（4）---封装_3:创建对象的安全模式
- 设计模式知识连载（38）---委托模式:
- 设计模式知识连载（25）---享元模式:
- 设计模式知识连载（1）---函数的书写方式
- 设计模式知识连载（2）---封装_1
- 设计模式知识连载（6）---继承_2:创建即继承-构造函数继承
- 设计模式知识连载（9）---继承_5:如虎添翼-寄生式继承
- 设计模式知识连载（12）---调用方式:多态
- 设计模式知识连载（39）---数据访问对象模式---本地存储DAO
- 设计模式知识连载（19）---外观模式:
- 设计模式知识连载（48）---MVC模式:
- 设计模式知识连载（39）---数据访问对象模式---MongoDB
- 设计模式知识连载（24）---组合模式:
- 设计模式知识连载（49）---MVP模式:
- 设计模式知识连载（50）---MVVM模式:
- 设计模式知识连载（10）---继承_6:终极继承者-寄生组合式继承
- 设计模式知识连载（14）---工厂方法模式: