JavaScript模板引擎

时间：2017年4月24日22:52:12

    作为一名前端开发人员，如果立志长期发展下去，那么深入研究的路必须走好。尤其是对JavaScript这门语言本身的精髓要有纵向研究，在实际开发和学习过程中，要善于发现问题，并总结问题。本次分享的内容，是来自一道面试题的连环知识点深度剖析。

    题目如下：

(function(window){
function fn(str){
this.str = str;
}
fn.prototype.format = function(){
var arg = arguments;
return this.str.replace(/\{(\d+)\}/ig,function(a,b){
return arg[b] || "";
});
}
window.fn = fn;
})(window);
(function(){
var t = new fn('<p><a href = "{0}">{1}</a><span>{2}</span></p>');
document.getElementById('div').innerHTML = t.format('http://www.baidu.com','baidu','welcome');
console.log(t.format('http://www.baidu.com','baidu','welcome'));
})();
//<p><a href = "http://www.baidu.com">baidu</a><span>welcome</span></p>

    从 <p><a href = "{0}">{1}</a><span>{2}</span></p> 到 <p><a href = "http://www.baidu.com">baidu</a><span>welcome</span></p>，可以看出fn函数是一个模板引擎，将模板里的‘{？}'占位符替换成传给它的参数。使用format函数将构造函数fn中的{0}{1}{2}替换为对应的实参，并返回一个格式化后的结果。

    本段代码，包含知识点比较多，具体分析如下：

1、String对象的replace()方法

    str.replace(searchvalue,newvalue);将str中的searchvalue替换为newvalue

    第一个参数searchvalue，可以字符串，也可以是正则表达式

    第二个参数newvalue，可以是字符串，也可以是函数，如果是函数，每个匹配都调用一次该函数并返回具体的替换内容；执行第一次匹配时，{0}被替代为arg[0]，执行第二次匹配时，{1}被替代为arg[1]，执行第三次匹配时，{2}被替代为arg[2]

    形如，str.replace(reg,function(a,b,c...)){};a为通过reg匹配到的字符串,b及后面所有参数为匹配你reg要捕获的内容，参考下面代码，深入理解：

this.str.replace(/\{(\d+)\}/ig,function(a,b){
console.log(a);//{0} {1} {2}
console.log(b);//0 1 2
console.log(arg[b]);//http://www.baidu.com baidu welcome
return arg[b] || "";
});

2、自执行匿名函数

(function(window){
//
})(window)

(function(){
console.log("我是自执行匿名函数");
})();

(function($) {
//coding
})(jQuery);

    在JavaScript中，()()这种写法，是匿名函数的自执行写法，当页面加载到这段代码时，匿名函数直接执行，这样写的目的如下：

    第一，(function() {})()这样的匿名函数，可以避免函数体，内外变量的冲突；

    第二，(function(window)
{})(window),左边window为匿名函数的形参(局部变量)，右边window为匿名函数的实参；当在匿名函数体中要用到全局对象window对象时，这种写法省去了作用域链的查询，可以提高JavaScript的运行性能；如果函数体内没有用到window对象，则无需传递实参window对象；

    第三，(function() {})()常用于存放开发插件的代码;

    因此，在使用jQuery进行开发时，(function($) {})(jQuery),$为形参，jQuery为实参，可以避免$与其他JavaScript函数库冲突。

    有时候还会碰到，;(function(window,document)
{})(window,document),其中;是一种容错机制，避免压缩出错，避免这段代码之前的代码忘记加;导致这段代码运行出错。

3、arguments对象

    arguments对象是JavaScript函数形参的类数组对象，用来存放JavaScript函数的所用形参，因此在定义函数时，可以不用指定形参，直接用arguments对象接收并保存形参。如下所示：

function maxNumber(num1,num2){
if(num1 > num2)
return num1;
else
return num2;
}

function maxNumber(){
var arg = arguments;
if(arg[0] > arg[1])
return arg[0];
else
return arg[1];
}

...