初识javascript编程模式
16lz
2021-01-22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程模式</title>
<style>
body {
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
这是body的内容！
<script>
//一、行为隔离
/*
* 1.1、内容(html)
* 1.2、外观(css)
* 1.3、行为(javascript)
*1.4、准则：
* 1.4.1、尽量避免在HTML标签中使用样式类的属性。
* 1.4.2、不要使用与外观有关的HTML标签，例如<font>
* 1.4.3、尽量根据语义需要选择标签，而不是去考虑浏览器会如何绘制它们。
*
*二、命名空间
* 2.1、将对象用做命名空间
*
*
*
*
* */
var MYAPP = MYAPP || {};
MYAPP.event = {};
MYAPP.event = {
addListener: function(el,type,fn){
console.log("自定义监听……");
},
remvoeListener: function(el,type,fn){
console.log("移除自定义监听");
},
getEvent: function(){
console.log("得到事件类型");
}
}
/*
* 2.2、命名空间中的构造器应用
*
* */
MYAPP.dom = {};
MYAPP.dom.Element = function(type, prop){
var tmp = document.createElement(type);
for(var i in prop){
tmp.setAttribute(i,prop[i]);
}
return tmp;
}
/*
*
* 三、namespace()方法？？？
* */
var app = {};
app.namespace = function(name){
var parts = name.split('.');
var current = app;
var i = 0,
len = parts.length;
for(;i < len; i++){
if(!current[parts[i]]){
current[parts[i]] = {};
}
current = current[parts[i]];
}
};
app.namespace('dom.style.css');
console.log(app);
/*
* 四、初始化分支
* 在加载脚本时，在模块初始化的过程中就将部分代码进行分支处理。
* 利用javascript代码可以动态定义的特性，我们可以为不同的浏览器定制不同的实现方法。
* */
//事件绑定
var branch = {};
branch.event = {
addListener: null,
removeListener: null
};
if(typeof window.addEventListener === "function"){
branch.event.addListener = function(el,type,fn){
el.addEventListener(type, fn, false);
}
}else if(typeof document.attachEvent === 'function'){
branch.event.addListener = function(el, type ,fn){
el.attachEvent('on' + type, fn);
}
}
else {
branch.event.addListener = function(el, type , fn){
el['on' + type] = fn;
}
}
if(typeof window.removeListener === "function"){
branch.event.removeListener = function(el, type, fn){
el.removeEventListener(type,fn,false);
};
}
else if(typeof document.detachEvent){
branch.event.removeListener = function(el, type, fn){
el.attachEvent('on' + type, fn);
};
}
else {
el['on' + type] = null;
}
/* window.onload = function(){
branch.event.addListener(document.body,'click',function(e){
alert(e.target);
});
};*/
/*
* 五、延迟定义？？？
*
*
* */
var i=0;
var deffer = {};
deffer.myevent = {
addListener: function(el, type, fn){
debugger;
console.log("我被调用了"+ (++i)+"次");
if(typeof el.addEventListener === 'function'){
deffer.myevent.addListener = function(el, type, fn){
el.addEventListener(type, fn, false);
};
}
else if (typeof el.attachEvent === 'function'){
deffer.myevent.addListener = function(el, type, fn){
el.attachEvent('on' + type, fn);
}
}
else {
deffer.myevent.addListener = function(el, type, fn){
el['on' + type] = fn;
}
}
deffer.myevent.addListener(el, type, fn);
}
};
deffer.myevent.addListener(document.body,'click',function(e){
alert(e.target);
});
deffer.myevent.addListener(document.body,'click',function(e){
alert(e.target);
});
/*
* 六、配置对象
* 该模式适合于有很多个参数的函数或方法。
* 用单个对象来替代多个参数有以下几点优势：
* 6.1、不用考虑参数的顺序。
* 6.2、可以跳过某些参数的设置。
* 6.3、函数的扩展性更强，可以适应将来的扩展需要。
* 6.4、代码的可读性更好，因为在代码中我们看到的是配置的属性名称。
* */
var butApp = {};
butApp.dom = {};
butApp.dom.Button = function(text, conf){
var type = conf.type||'submit';
var font = conf.font|| '微软雅黑';
var button = document.createElement('input');
button.type = type || 'submit';
button.value = text;
return button;
};
var config = {
font: 'Arial, Verdana, sans-serif',
color: 'white'
};
document.body.appendChild(new butApp.dom.Button('这是我创建的按钮',config));
/*
* 七、私有属性和方法
*
* */
var private = {};
private.dom = {};
private.dom.Button = function(text, conf){
var styles = {
font: 'Verdana',
border: '1px solid black',
color: 'black',
background: 'gray'
};
function setStyles() {
for(let i in styles){
b.style[i] = conf[i] || styles[i];
}
}
conf = conf || {};
var b = document.createElement('input');
b.type = conf['type']||'submit';
b.value = text;
setStyles();
return b;
}
/*
* 八、自执行函数
* 保证全局空间不被污染，把代码封装在一个匿名函数中并立刻自行调用。
* 该函数中的所有变量都是局部的，并在函数返回时被销毁(前提是它们不属于闭包)
* */
/*
* 自执行方法也可以用于创建和返回对象
*
* */
var iif = {};
iif.dom = function(){
function _private(){
//...
}
return {
getStyle: function(el, prop){
console.log('getStyle');
_private();
},
setStyle: function(el,prop,value){
console.log('setStyle');
}
}
}();
/*
* 九、链式调用
* 使用方法返回的实例来调用其他方法，这就是所谓的链式调用。
* */
var chain = {};
chain.dom = {};
chain.dom.element = function(element){
var elem = document.createElement(element);
this.elem = elem;
this.setText = function(text){
elem.innerHTML = text;
return this;
};
this.setStyle = function(styles){
var argNum = arguments.length;
if(argNum == 2){
if(typeof arguments[0] === "string"&&typeof arguments[1]==="string"){
elem.style[arguments[0]] = arguments[1];
}
}
if(typeof styles === "object"){
for(let i in styles){
elem.style[i] = styles[i];
}
}
return this;
};
};
var spans = new chain.dom.element('div');
spans.setText('hello').setStyle('color', 'red').setStyle('font', 'Verdana');
document.body.appendChild(spans.elem);
//十、JSON
var json = {
'name':'Stoyan',
'family': 'Stefanov',
'books': ['php','java','html5']
};
/*
<?xml version='1.1' encoding = 'iso-8859-1'?>
<response>
<name>Stoyan</name>
<family>Stefanov</family>
<books>
<book>php</book>
<book>java</book>
<book>html5</book>
</books>
</response>
*/
// var obj = eval('('+ xhr.responseText +')');
alert(obj.name);
alert(json.books[2]);
</script>
</body>
</html>
更多相关文章
- jQuery：执行一个函数AFTER toggleClass被执行
- JS在页面加载时候onload与匿名自调用函数的区别
- 在jQuery的$.post中调用函数时，Undefined不是对象
- 使用Sinon模拟require（）函数
- 如何使函数等到对象的值未定义为js setTimeout
- 放在和中的javascript语句，但是语句不在函数中，这些语句何在被执行
- [JavaScript]自执行函数
- 父范围中的变量不会在匿名函数中被更改[重复]
- 如何调用另一个函数内的函数？