JavaScript模板引擎

深碍√TFBOYSˉ_ 2022-06-17 11:19 255阅读 0赞

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

[《我的博客地图》][Link 1]

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

题目如下：

从 <a href = "\{0\}">\{1\}</a>\{2\} 到 <a href = "http://www.baidu.com">baidu</a>welcome，可以看出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+)\\\}/,function(item,index)\{return arg\[index\]\})，可以理解为arr.map() 或者 arr.forEach() 便于记忆

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];
    }

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440