首页 新闻 会员 周边

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
幻天芒 | 高人七级 |园豆：37175 | 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();
幻天芒 | 园豆：37175 (高人七级) | 2017-11-18 16:20

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

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

@花语剑情: :)

幻天芒 | 园豆：37175 (高人七级) | 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
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。