JS传值与应用

问题提出：在进行页面书写的时候，有时候需要进行动态页面拼接，在动态拼接的时候，涉及到函数的调用，函数的传值可能是HTML标签，或者含有json的标签，这样在传值时就有可能出现问题，由于”“的存在，html会对其进行解析，把不该显示的元素进行了显示，这里提出一种解决思路。

如上图所示，我的detail变量和poet变量都是从服务器上获取的数据，其中poet为字符串，detail为json格式数据，这里对它进行了组装，组装成一个名为poetinfo的JSON数组，detail中含有了大量的html标签，其形式如下图所示，linkhtml是我需要动态拼接的组件，这里调用了一个函数为NewView()，这里需要将poetinfo的JSON传入NewView函数中使用。

开始的时候想的是直接将JSON作为NewView的参数写入写法为：

  linkHtml = "<div style='text-align:center'>" + "<a id=\"" + poet +
                 "\" href='javascript: NewView(\"" +
                 poetinfo +"\")' class='expand'+v.poetname +"</a>" + "<span style='color:blue;font-size:7px'>" + v.year + "</span>" + "</div>";

如果不用字符串形式，传过去的JSON将变为形为”[object object]“的字符串，如果提前使用了JSON.Stringify()函数，再进行传出，则会出现这里的值出现在div容器中，这是因为再detail中有引号，打乱了原本的标签结构。

这里有两种解决思路，第一种是将从服务器获取的数据全部转存到一个JSON，然后在每次遍历时设置一个索引，通过数字索引访问JSON对象，这种方法不够直观，并且索引的计算和数据的储存过大。

这里提出一种想法，方便在写动态拼接大量标签的网页时传值的方法，同时适用的场景还可以是，在我们使用JS的时候，有时候需要从服务器获取数据，为了减小服务器压力，不每次都从服务器调用数据，我们可以采用利用标签属性存值的方式进行储存和调用。

问题解决：

• 将JSON储存在某一个标签的某一个属性中，在储存的时候为了不破坏结构，可以先对其进行编码，编码的方法，JS自带的有window.btoa()方法和网页中使用的encodeURIComponent()方法，第一种方法创建一个 base-64 编码的字符串，使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串，第二个就是网页中使用的URL编码，这样就可以进行包装不破坏拼接标签的结构

• 在编码前需要将其转化为字符串类型也就是使用JSON.stringify()，总的代码为encodeURIComponent(JSON.stringify(poetinfo)),然后将其存放在一个标签中，并用一个值来给这个标签设置id属性。

• 在传值的时候将标签的id传出去，方便DOM操作，在其他函数调用时，可以通过id进行DOM操作，获取DOM属性，获取的方法可以是原生的Document.getelementById("id").getAttribute("名称")，也可以采用Jequry的$("#id").attr("属性名称")

• 然后获取到这个属性后，先进行解码，然后再使用JSON.prase()就可以获取原来的JSON数据了，使用btoa加密的代码，解码方式为window.atob()，使用URL加密的解密方法为decodeURIComponent()，综合代码为JSON.parse(decodeURIComponent($('#' + poet).attr("poetinfo")));