编程小贴士

给你的编程提供小点子


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

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

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

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

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

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

  1. var result;
  2. function getText() {
  3. var someText = prompt(“输入需要处理成首字母大写的英文字母”);
  4. capWords(someText);
  5. alert(result.join(” “));
  6. };
  7. function capWords(input) {
  8. var counter;
  9. var inputArray = input.split(” “);
  10. var transformed = “”;
  11. result = [];
  12. for (counter = 0; counter < inputArray.length; counter++) {
  13. transformed = [
  14. inputArray[counter].charAt(0).toUpperCase(),
  15. inputArray[counter].substring(1)
  16. ].join(“”);
  17. result.push(transformed);
  18. }
  19. };
  20. document.getElementById(“main_button”).onclick = getText;

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

使用面对对象的编写方式

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

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

  1. (function() {
  2. “use strict”;
  3. var SomeText = function(text) {
  4. this.text = text;
  5. };
  6. SomeText.prototype.capify = function(str) {
  7. var firstLetter = str.charAt(0);
  8. var remainder = str.substring(1);
  9. return [firstLetter.toUpperCase(), remainder].join(“”);
  10. };
  11. SomeText.prototype.capifyWords = function() {
  12. var result = [];
  13. var textArray = this.text.split(” “);
  14. for (var counter = 0; counter < textArray.length; counter++) {
  15. result.push(this.capify(textArray[counter]));
  16. }
  17. return result.join(” “);
  18. };
  19. document.getElementById(“main_button”).addEventListener(“click”, function(e) {
  20. var something = prompt(“输入需要处理成首字母大写的英文字母”);
  21. var newText = new SomeText(something);
  22. alert(newText.capifyWords());
  23. });
  24. }());

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

精简函数化的编写方式

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

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

  1. (function() {
  2. “use strict”;
  3. var capify = function(str) {
  4. return [str.charAt(0).toUpperCase(), str.substring(1)].join(“”);
  5. };
  6. var processWords = function(fn, str) {
  7. return str.split(” “).map(fn).join(” “);
  8. };
  9. document.getElementById(“main_button”).addEventListener(“click”, function(e) {
  10. var something = prompt(“输入需要处理成首字母大写的英文字母”);
  11. alert(processWords(capify, something));
  12. });
  13. }());

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>