模块化实例

需求：用JS渲染一个 可以动态插入内容的 歌曲列表

方案一 遍历

• 方法1 拼接HTML字符串 Dome1
  缺点：存在脚本注入风险，有可能被用户恶意篡改。

• 方法2 构造DOM对象 Dome2
  缺点：麻烦

方案二 模板引擎

• 核心需求：写出这个字符串
  var li = '<li>' + songs[i].name + ' - ' + songs[i].singer + '</li>'
• 优化方案：使用函数格式化
  var li = stringFormat('<li>{0} - {1}</li>', songs[i].name, songs[i].singer)
• 如何实现：做出一个格式化字符串的工具
  stringFormat
  其他语言提供了string.format()函数用来生成具有特定格式的字符串,
  不但是强大的字符串输出工具，还使得产生的长字符串可读性大大提高了.
  这个函数接收第一个参数是string，其中{0}代表后传入的第一个变量，依次类推。
  函数
  function stringFormat(str){
  var params = [].slice.call(arguments,1); 1
  var regex =/{(\d+)}/g; 2
  str = str.replace(regex,function(){ 3
  console.log(arguments); 4
  var index = arguments[1]; 5
  return params[index]; 6
  })
  }
  var tpl = '<li>{0} - {1}</li>';
  var result = stringFormat(tpl,'刚刚好','薛之谦');

分析

    function stringFormat(str){}
    var str = '<li>{0} - {1}</li>';
    var result = stringFormat(str,'刚刚好','薛之谦');

    因为
       *function stringFormat(str){} 它的参数是[形参 , 实参]
         形参 str = '<li>{0} - {1}</li>'
         实参 params = ['刚刚好','薛之谦'] 即【第0个替换的变量，第1个替换的变量】
     
    所以
         第0个匹配到的字符串是{0}，第0个替换的变量是'刚刚好'
         △1-6   的作用就是  {0} =  '刚刚好'
         △regex 的作用就是找出 {0} 
         △4-6   的作用就是找出 '刚刚好'

    总结
     △1-6   的作用就是 找出str中第n个被替换的字符串，用params[n]来替换它
     △regex 的作用就是找出 被替换的字符串
     △4-6   的作用就是找出 params[n]

步骤

• 1 定义一个数组params，取除str之外的所有参数（用来储存变量）
  * .slice()可以返回数组中指定范围的元素
  * 由于传入的参数是不确定的，所以需要用arguments来取
  * 返回的是arguments数组从除第一项以外的所有项

• 2 使用正则找到"{n}"形式的字符串
  * \d+ 表示1个或多个数字
  * { } 表示{ }
  * ( ) 表示分组，作用是取出{}里面的值
  * / /g 表示global（全部）作用是打开全局匹配

• 3 然后将整个字符串中的{n}这种字符串替换为func返回值
  * .replace() 第一个参数是目标，第二个参数用来替换目标

• 4 将作为replace第二个参数的函数打印出arguments
  //console 发现2个对象，4个参数
  [objectArguments]{ 对象1
  0:"{0}", 第一个参数：匹配到字符串 {0}
  1:"0", 第二个参数：拿到{}里面的内容0
  2:4, 第三个参数：从第4个字符开始匹配到
  3:"<li>{0} - {1}</li>" 第四个参数：整个字符串
  }
  [objectArguments]{ 对象2
  0:"{1}", 第一个参数：匹配到字符串 {1}
  1:"1", 第二个参数：拿到{}里面的内容1
  2:10, 第三个参数：从第10个字符开始匹配到
  3:"<li>{0} - {1}</li>" 第四个参数：整个字符串
  }
  可以发现第二个参数是 匹配到的字符串的位置
  这个位置对应了 替换的变量 的位置

• 5 得到这个位置
  使用arguments[1]来取出此对象的第二个参数

• 6 返回 替换值
  regex 的作用 找出 {0}
  匿名函数的作用 得到 params[n]
  arguments[1]的作用 找出 n
  stringFormat的作用 {n} = params[n]

• 升级方案：比字符串格式化的功能更强大
  模板引擎
  stringFormat 只能做到 1v1 的改变，每次输入一组值改变一个li
  模板引擎 template(string,data) 只需要传入字符串和数据，就可以依次替换所有变量
  举个例子先写一个简单的模板引擎
  需求
  var template = '<p>Hello, my name is <%name%>. I'm <%age%> years old.</p>';
  var data = {
  name: "Krasimir",
  age: 29
  }
  console.log(TemplateEngine(template, data));
  // Hello, my name is Krasimir. I'm 29 years old.

  函数
      var TemplateEngine = function(tpl, data) {
          var regex =/<%([^%>]+ )?%>/g;                         1 有误
          while(match = regex.exec(tpl)) {                             2
              console.log(match);                                      3
              tpl = tpl.replace(match[0], data[match[1]]);             4
          }
          return tpl;                                                  5
      } 
  

步骤

• 1使用正则找到需要被替换的字符串
  捕获所有以<%开头，以%>结尾的片段
  * / /g 表示global（全部）作用是打开全局匹配
  * <% %> 表示找出这个符号里面的字符串
  * ( ) 表示分组（单独拿出来用）
  * [ ]+? 表示一个集合，表示一个以上，表示可以为空
  * ^%> 表示不能有%>这种符号（^在[]中表示非）

• 2 如果在string中找到需要被替换的字符串
  先给match赋值为regex.exec(tpl)
  * .exec()
  这个方法遍历正则，每次只作一次匹配
  如果正则无g，无限次匹配到第一个字符串；
  如果正则加g，依次匹配每个字符串，直到结束返回null，然后从头开始；

  再作为while的判断条件
     如果match  = null,说明没匹配到字符串，结束！
     如果match != null,说明匹配到了字符串，执行{...};
  
     结合1和2，在string中匹配到3个字符串
        for (var i=0; i<songs.length; i++) {
        songs[i].name
        songs[i].singer
        }
  

• 3 打印出match
  [
  "<%name%>", 匹配项
  " name ", ( )
  index: 21,
  input:
  "<p>Hello, my name is <%name%>. I'm <%age%> years old.</p>"
  ]

• 4 把需要被替换的字符串替换为data
  * .replace(a,b)
  用b替换第一个a，如果要替换所有的a请在正则加全局谢谢
  这样就初步实现了一个简单的模板引擎

复杂版！！待续...

参考1
参考2

目标：
<%this.name%> => .call(data)

思路：
把函数用<% %>包裹成字符串
使用正则把字符串中的<%函数%>匹配出来
放进一个 ''空字符串 or []空数组 拼接出函数
把字符串放在页面上，运行的时候调用函数

Tips:

    dom节点类型
      element    
      text   
      fragment内存中的虚拟对象，默认不被放在页面上

    命名规则
      表示string     var div = <div></div>   
      表示DOM对象     var elDiv = document.createElement('div')     
      表示JQuery对象  var $Div = $('div') 

    文本API
      .textContent    H5标准写法 太长
      .innerHtml      支持IE但有脚本注入风险    
      .innerText      兼容广无副作用-----------推荐使用

    形参作用
      1 影响函数的length属性，一个函数的length就是形参的个数
      2 相当于给函数的第一个参数取名 var string = arguments[0]

    调用arguments
      由于它是 伪数组，不可以用数组的方法
      这样调用 [].slice.call(arguments,1)  相当于  arguments.slice(1)
      这种方式 先借用一个空数组的方法，后调用.call()把数组的this改成arguments
      这样一来 就把数组的方法绑定到arguments身上了

    声明函数的形式
      * function xx(){ console.log(1) }
      * var xx = function (){console.log(2) }
      * var func = new function('参数','函数体')  相当于
        var func = function(x){console.log(3)}   此方法 用字符串创建一个函数