使用函数化的Javascript代码编写方式

对于Javascript介绍想必大家都耳熟能详啦， 基于函数化的编程语言， 基于浏览器运行的编程语言， web开发语言， 前端开发必备语言， blablabla...

Javascript是一个非常灵活的语言， 可能每一个人对于JS的理解也不尽相同，大家诟病它的基于方法的编程方式， 当然， 很多人也使用面对对象的方式， 基于Prototype的方式，或者简单粗暴的命令式的编程方式， 或者干脆混合起来使用也一样可以运行的很流畅

本文并不讨论所谓的代码可维护性，那种方式更适合编写javascript，我们讨论一下不同书写javascript代码的不同，或许大家自己会有自己的选择和答案啦~~

简单粗暴的命令式编写方式

最初的Javascript用来处理浏览器中DOM的相关操作及其相关事件，比如， 点击操作， 悬浮操作等等等等， 如下的代码可能是大家经常见到的书些方式：

var result;
function getText {
var someText = prompt("输入需要处理成首字母大写的英文字母");
capWords(someText);
alert(result.join(" "));
};
function capWords(input) {
var counter;
var inputArray = input.split(" ");
var transformed = "";
result = ;
for (counter = 0; counter < inputArray.length; counter++) {
transformed = [
inputArray[counter].charAt(0).toUpperCase, 
inputArray[counter].substring(1)
].join("");
result.push(transformed);
}
};
document.getElementById("main_button").onclick = getText;

这种方式代码的书写将遵从从上往下的方式来运行， 这里我们构建了一个getText方法， 通过onlick的调用触发，整个代码的构建比较简单直观，但是有很大的代码隐患，例如，全局变量问题

代码演示：http://www.gbtags.com/gb/rtreplayerpreview/900.htm

使用面对对象的编写方式

这种使用prototype的方式来构建OO方式的代码，将帮助解决相关的全局变量问题，并且有效的封装了相关方法

使用关键字：use strict 将保证更好运行性能，老式的onlick方式也被addListener取代，使用IE8之前的浏览器估计也很少了吧~~

(function {
"use strict";
var SomeText = function(text) {
this.text = text;
};
SomeText.prototype.capify = function(str) {
var firstLetter = str.charAt(0);
var remainder = str.substring(1);
return [firstLetter.toUpperCase(), remainder].join("");
};
SomeText.prototype.capifyWords = function {
var result = ;
var textArray = this.text.split(" ");
for (var counter = 0; counter < textArray.length; counter++) {
result.push(this.capify(textArray[counter]));
}
return result.join(" ");
};
document.getElementById("main_button").addEventListener("click", function(e) {
var something = prompt("输入需要处理成首字母大写的英文字母");
var newText = new SomeText(something);
alert(newText.capifyWords);
});
});

虽然OO方法封装代码，并且优化了结构，但是仍旧有一些问题，比如控制自己区域外的一些变量，也不利于测试等等

代码演示：http://www.gbtags.com/gb/rtreplayerpreview/901.htm

精简函数化的编写方式

看到如下的代码了吗？ 是不是更加纯粹， 仅仅是两个独立的函数

这里这里使用了MAP方法来取代for循环，新的ECMAscript 5标准下，尽量使用Map方法来替代for循环，能帮助解决多余的临时变量问题，并且让代码更加整洁明了

(function {
"use strict";
var capify = function(str) {
return [str.charAt(0).toUpperCase(), str.substring(1)].join("");
};
var processWords = function(fn, str) {
return str.split(" ").map(fn).join(" ");
};
document.getElementById("main_button").addEventListener("click", function(e) {
var something = prompt("输入需要处理成首字母大写的英文字母");
alert(processWords(capify, something));
});
});

代码演示：http://www.gbtags.com/gb/rtreplayerpreview/902.htm

大家如果觉得有收获，请刷一刷，打赏一下本人，并且提供专业1对1专业服务，包您满意~~