首页 新闻 会员 周边 捐助

js面向过程转换为面向对象

0
悬赏园豆:40 [已解决问题] 解决于 2017-11-18 18:12
var img = new Image();
img.src="img/img2.jpg";
document.body.appendChild(img);
img.style.position = "relative";
img.style.left = "100px";

创建几张图片,如果用面向过程这样的代码要用好几次,每创建一张图片就要用一次类似的代码,

想问下用面向对象怎么写,可以创建多张图片,并且定位,大小都可以改变,有代码重用的功能

花语剑情的主页 花语剑情 | 初学一级 | 园豆:5
提问于:2017-11-17 20:01
< >
分享
最佳答案
0
// 你可以只是需要一个function

function appendImage(src, styleObj) {
  var img = new Image();
  img.src = src;
  document.body.appendChild(img);
  Object.keys(styleObj).forEach(k => {
    img.style[k] = styleObj[k];
  });
}

appendImage('img/img2.jpg', {
  position: 'relative',
  left: '100px'
});
收获园豆:20
幻天芒 | 高人七级 |园豆:37205 | 2017-11-17 21:10

请问可不可以使用组合使用构造函数模式和原型模式

就像这样

functionPerson(name, age, job){  
        this.name= name;  
        this.age= age;  
        this.job= job;  
        this.friends= ["Shelby", "Court"];  
}  
   
Person.prototype= {  
        constructor: Person,  
        sayName: function(){  
        <span style="white-space:pre">    </span>alert(this.name);  
        }  
}  
   
var person1 = new Person("Nicholas", 29, "Software Engineer");  
var person2 = new Person("Greg", 27, "Doctor");  
   
person1.friends.push("Van");  
alert(person1.friends);//"Shelby,Count,Van"  
alert(person2.friends);//"Shelby,Count"  
alert(person1.friends=== person2.friends); //false  
alert(person1.sayName=== person2.sayName); //true  

 

花语剑情 | 园豆:5 (初学一级) | 2017-11-18 15:18

@花语剑情: 

function ImageManager(imgArr) {
  this.images = imgArr || [];
}

ImageManager.prototype.addImage = function (src, styleObj) {
  this.images.push({ src, style: styleObj });
};

ImageManager.prototype.show = function () {
  this.images.forEach(item => {
    var img = new Image();
    img.src = item.src;
    document.body.appendChild(img);
    Object.keys(styleObj).forEach(k => {
      img.style[k] = item.style[k];
    });
  });
};


var imageManager = new ImageManager([{
  src: 'xxx', style: {
    position: 'relative',
    left: '100px'
  }
}]);

imageManager.addImage('xxx', {});

imageManager.show();
幻天芒 | 园豆:37205 (高人七级) | 2017-11-18 16:20

@幻天芒: 感谢,非常谢谢,哦,对了,没看见,不小心点到了反对上去了,取消不掉了,真得不好意思啊。谢谢啊,谢谢你的解答。

花语剑情 | 园豆:5 (初学一级) | 2017-11-18 18:09

@花语剑情: :)

幻天芒 | 园豆:37205 (高人七级) | 2017-11-20 09:26
其他回答(1)
0
//确实需要理解函数式编程
function createImg(imgArr){
  imgArr.forEach(function(obj){
var img = new Image();
img.src = obj['src'];
for(var key in obj['styleObj']){
    img.style[key] = obj['styleObj][key];
  }
   document.body.appendChild(img);
});
} var imgs = [{src: 'url1', styleObj: {attr1: 'attr1', prop2: 'prop2'}}, {src: 'url2', styleObj: {attr1: 'attr1', prop2: 'prop2'}]; createImg(imgs);

我稍微解释一下吧,函数需要传入的参数是一个数组,这样可以允许楼主创建一个及更多个img,数组每一个位置又是一个对象,第一个属性为图片的url,第二个对象为该图片的属性,也就是样式。最后提醒一下:这里的属性有一些是不能像css那么写的,例如font-size 要写为fontSize,margin-left要写为marginLeft等,这里可以参见DOM Style

收获园豆:20
铁柱成针 | 园豆:614 (小虾三级) | 2017-11-18 10:26

请问可不可以使用组合使用构造函数模式和原型模式

就像这样

functionPerson(name, age, job){  
        this.name= name;  
        this.age= age;  
        this.job= job;  
        this.friends= ["Shelby", "Court"];  
}  
   
Person.prototype= {  
        constructor: Person,  
        sayName: function(){  
        <span style="white-space:pre">    </span>alert(this.name);  
        }  
}  
   
var person1 = new Person("Nicholas", 29, "Software Engineer");  
var person2 = new Person("Greg", 27, "Doctor");  
   
person1.friends.push("Van");  
alert(person1.friends);//"Shelby,Count,Van"  
alert(person2.friends);//"Shelby,Count"  
alert(person1.friends=== person2.friends); //false  
alert(person1.sayName=== person2.sayName); //true  

 

支持(0) 反对(0) 花语剑情 | 园豆:5 (初学一级) | 2017-11-18 15:20

@花语剑情: 不管是构造函数,还是对象,数组等,都可以通过prototype去加入自己定义的方法, 你这么写是没有问题的哦

支持(0) 反对(0) 铁柱成针 | 园豆:614 (小虾三级) | 2017-11-18 15:26

@铁柱成针: 谢谢啊

支持(0) 反对(0) 花语剑情 | 园豆:5 (初学一级) | 2017-11-18 16:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册