封装一个方法的过程思路

我要封装一个方法：
第一：明确该方法的作用是什么？
第二：确定该方法的形参，每个形参的规则，每个形参代表什么,？
第三： 对形参进行操作。目的是为了实现该方法的作用,需要的知识点：数据类型
循环；判断语句 需要掌握语句的作用。
遍历形参数据；然后考虑各种情况；对不同情况输出不同结果
1：找规律；2：找条件；3：找出口；最后完整这个方法

下面便自己尝试着封装一个css样式的方法

function setStyle(el, obj) {
// 将样式放入到数组中。
var arr = ["height", "width", "top", "left", "marginLeft", "fontSize"]
// 遍历传入的对象的属性。我们传入的属性；可能有非string情况
for (var x in obj) {
if (typeof obj[x] === "string") { //如果属性对应的值是字符串，则直接赋值
el.style[x] = obj[x];
} else { // 如果CSS属性对应的值不是字符串
// 用flag 来看作为开关
var flag = false;
for (var i = 0; i < arr.length; i++) {
// 判断一下该属性是否属于；在这个数组中书否有,通过上面的验证；属性的值不是string
if (x === arr[i]) { //判断一下是否存在于arr数组
flag = true;
break;
}
}
// flag默认为true
if (flag == true) { //如果存在arr内部，则拼接px
el.style[x] = obj[x] + "px";
} else { //如果不是字符串还不存在于arr，也直接赋值(zIndex,opacity)
el.style[x] = obj[x];
}
}
}
}

对setStyle() 方法做一个说明
作用：给标签设置样式；因为一个标签跟多个样式；所以规定第二个参数为对象
里面放入需要设置的CSS样式
定形参：第一个参数为元素对象；第二参数为样式对象
形参操作： 因为目的为了给元素添加样式；传入的是对象；所以需要遍历样式对象
得到单个的CSS 样式数据，
又因为 CSS 样式中属性全部都是字符串形式，而属性后面的值，可能为
数字+字母， 或者 数字；或者 字母；所以；我们需要根据值类型不同
进项判断处理；
标签的为字符串类型。如果是字符串类型；直接进行；给元素添加属性和值
非字符串类型；我们需要用一个参考数据；参考数据中放入；一些样式属性
拿取到的属性与参考数据中每个属性进行比较，如果参考数据中有这个属性
那么就将 值为数据+字母的；进行拼接，并将该属性同时添加给该元素对象；
数组中没有这个属性，针对我取到的值为数字；那么我们直接讲；属性和数字值
添加到该元素中。
最后；通过使用开关；flag = true or false 形式来表示数组中是否有这个属性

调用该方法

setStyle(box, {
color: "red",
height: 200,
width: 500,
backgroundColor: "blue",
opacity: 0.5
})