dot.js的运用(初来乍到前端版)

JavaScript030

dot.js的运用(初来乍到前端版),第1张

参考文章: dot.js用法详细参考

dot.js在我眼中是个模板引擎,因为项目中经常会用到排版,例如下面两张图片,有模板嵌套的话,就很方便。

首先看一下我的JSON接口传来的

数据

,我格式化了一下,我截取了2条

在前端获取JSON数据里,我用的是ajax异步获取(我用的是apicloud,所以用他的获取方法,道理都是一样的)

因为是异步处理,我们把需要处理的内容放在回调函数function里(因为我们要先获取到了数据,才能进行其他操作啊!曾经的犯错,回顾。)。现在console.log(JSON.stringify(ret.data)),打印出的应该是data的内容,截取了2条。如果console.log(ret.data),打印出的应该是对象,所以转换成字符串。(关于JSON对象,字符串等问题,上一篇)

现在看一下第一大点的dot.js的用法的第三点

按照这个格式,我写了下面这个模板和调用方法:

我运用了weui的页面框架,样式简单,不讲了,大概是:

<div class=weui.grids>

    <div class=weui-grid></div>  //我用dot.js方法,把这个设成了模板,循环了一下把数据放进去。

</div>

JS-打印word的模板程序

我们在做项目中经常遇到“打印表格”的功能,在此介绍一下我所用过的打印方法。

一、比较简单的做法,word另存转化为html文件的方式。分析如下:

1、首先我们需要在office中用wrod画好文件的模板,然后将其另存为thm网页形式。

2、将其改为jsp页面,这样我们就可以文件中使用后来传过来的变量值。此时就是我们传统的jsp方式,后台定义参数,然后前台获取,将变量值写在我们需要显示的地方。

3、对于表格,我们可以用循环来控制。

4、这样做打比较简单,缺点word模板不能修改,一旦表格做个微小的变化,那我们的工作量也不小,因为word转化后的代码很难读懂,要在代码上控制其样式,是相当的困难,所以不推荐这种做法。

(注:1、 在做模板时,我们可以先在需要显示变量值的地方首先定义好值,然后在jsp中直接替换就行。

2、在jsp页面中,在首先加入“<%@ page contentType="application/mswordcharset=UTF-8"%>”, 以标识此页面为word文件。

3、如果需要点击时直接打开word文件,而非弹出“保存、打开”对话框,则需要删除“xmlns:w="urn:schemas-microsoft-com:office:office"”代码即可。

下面我们介绍另一种更常用的方法,此方法的有点是:修改word模板文件,不会影响程序。

二、用JS控制的打印方式,具体如下:

1、首先画word模板,在需要动态显示内容的地方插入“标签”。方法如下:在word中,选中需要被替换的内容-->插入-->书签,为其定义好名字即可,其它类似。

2、将做好的模板文件另存为模板dot文件。

做到这基本就差不多了,接下来就是后台代码发挥的时候了。

3、在后台封装参数值。

4、调用JS函数打印。

为了更为直观的介绍,下面用一完整的例子介绍。

先把代码贴出来:

1、JS模板文件,适用范围:

a. 根据文档文件,所有要显示的内容都定义为书签。

b. 纯表格文件。如果为多个表格或表格中嵌套表格,则需要稍加修改。

c. 文档、表格混搭型。

代码如下:

/** * 得到 文件模板的目录 * @param {} fileName * @return {} */ function getFileTemplatePath(fileName){ var path = "/page/printTemplate/" + fileName + ".dot"var url="http://"+window.location.hostname + ":" + window.location.port+ this.getContextPath() + pathreturn url} /** * 调出word模板,并为标签赋值 * @param {} jsonObj json对象 * @param {} fileName 所要打开的word文件名 */ function printWord(jsonObj,fileName){ var word=new ActiveXObject("Word.Application")word.Visible=truevar url= this.getFileTemplatePath(fileName)word.Documents.add(url) for(i=0i<jsonObj.lengthi++){ if ((jsonObj[i].text)!="list"){ range=word.ActiveDocument.Bookmarks(jsonObj[i].text).Rangerange.text=jsonObj[i].value}else{ var myTable=word.ActiveDocument.Tables(1)var rowsCount = myTable.Rows.Countvar iRow=2for(j=0j<jsonObj[i].value.lengthj++){ if (iRow >rowsCount){ myTable.Rows.Add()} var length = jsonObj[i].value[j].lengthfor(var k=0k<lengthk++){ myTable.Rows(iRow).Cells(k + 1).Range.Text=jsonObj[i].value[j][k].value} iRow ++} } } word.Visible=true}

2、看到代码就会明白,这段代码需要一个JSON类型的参数。

下一步我们所做的工作就是要在JSON上做文章了。 附后台代码(封装JSON,java)

类:PrintJSONObjectSet

import org.json.JSONArrayimport org.json.JSONObjectpublic class PrintJSONObjectSet { private JSONArray japublic PrintJSONObjectSet(){ ja = new JSONArray()} public JSONArray getJSONArray(){ return ja} public JSONObject json(Object key, Object value) throws Exception{ JSONObject jo = new JSONObject()value = "".equals(value) || value == null "" : valuejo.put("text", key)jo.put("value", value)return jo} public void put(Object key, Object value) throws Exception{ ja.put(json(key,value))} public void put(Object obj){ ja.put(obj)} }

打印封装的方法:

/** * 打印出国(境)证明 * @return * @throws Exception */ public String printChuGuoJingZhengMing() throws Exception{ JSONArray ja = new JSONArray()GroupInfo group = this.getGroupInfo()String[] countrys = this.getCountrys()if(countrys != null){ for(int c=0c<countrys.lengthc++){ PrintJSONObjectSet js = new PrintJSONObjectSet()SeedGroupRef seed = seedImpl.getCzcz(getGroupInfoId(),countrys[c])js.put("year", seed.getFileYear())js.put("fileNum", seed.getFileNum())js.put("leader",group.getLeader())js.put("groupCount", group.getGroupCount())js.put("country",countrys[c])js.put("dispCode",getDispCode())js.put("printYear", DateFunc.getPrintYear())js.put("printMonth", DateFunc.getPrintMonth())js.put("printDay", DateFunc.getPrintDay())PrintJSONObjectSet js2 = new PrintJSONObjectSet()List<MemberInfo>memberList = this.getIsSefMembers()MemberInfo memberfor(int i=0i<memberList.size()i++){ PrintJSONObjectSet js3 = new PrintJSONObjectSet()member = memberList.get(i)js3.put("name1",member.getName())js3.put("passportNum1",member.getPassportNum())if(++i <memberList.size()){ member = memberList.get(i)js3.put("name2",member.getName())js3.put("passportNum2",member.getPassportNum())} js2.put(js3.getJSONArray())} js.put("list", js2.getJSONArray())ja.put(js.getJSONArray())} } PrintWriter outSystem.out.println(ja.toString())try{ out = response.getWriter()out.print(ja.toString())out.close()}catch(Exception e){ e.printStackTrace()} return null}

对于JSON的说明:

1、最外层为一个JSONArray,这个JSON中包含多个JSONArra,其控制文档的数量。

2、在第二层JSONArray中,包含多个JSONObject。其中每个JSONObject包含一个JSONObject对象。

每个JSONObject对象以{"text":"name","value":"张三"}的形式存储。

3、遇到表格时,则在第二个JSONArray中,封装类型{"text":"list","value":[[{"text":"","value:""}]]}形式。

也就是说此时的JSONObject的值必须为list,只有这样,JS中才能将其作为表格来输入。

其中在名为 list 的JSONObject对象中,包含多个JSONArray,用来控制行数。

每个JSONArray中包含多个类型第2条中形式的JSONObject对象,用来控制列数。

调用方法:(采用aJax)

Ext.Ajax.request({ url : href, success : function(response, options) { var responseText = response.responseTextvar jsonObj=eval('(' + responseText + ')')for(var i=0i<jsonObj.lengthi++){ printWord(jsonObj[i],'chuGuoJingZhengMing')} }, failure : function(response, options) { alert("fail!")} })

例子中的word文件:

如果国家为多个时,则会打印出多个文件。

对于代码的说明:

在后台代码封装中,我们将 书签名 和 值 封装为一个JSON对象,这样JS处理中,我们就方便了,不用再逐个写出每个书签的`名字,供其查找、然后赋值。

在后台代码中,我这里在打印时需要根据国家来确定所要打印的文档数量,如果为多个国家则要打印出多个文档,所以在后台封装,最外层又加了一个JSONArray,JS中也多了一道循环,这个可以根据需要自己调整。

特殊情况下,需要我们单独处理,如多个表格的情况下,或者表格嵌套表格。

这里说一下表格嵌套的情况下,如果获得被嵌套的表格对象。

如:var myTable=word.ActiveDocument.Tables(1).Rows(1).Cells(1).Tables(1)

这里得到的是文档中第一个表格的第一行的每一列中的每一个表格对象,其它类似。

range=word.ActiveDocument.Bookmarks("name").Range 的意思是 得到文档中 书签名为“name”的对象。

range.text=“张三” 为其赋值为 张三。

这里采用的是dot文件,因为dot文件存在于服务器上,如果使用doc文件作为模板文件的话,在多人访问时,会出现线程锁死的情况,故采用dot文件。

附加一段生成好的JSON串:

[ [ {"text":"year","value":2011}, {"text":"fileNum","value":5}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"俄罗斯"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[[ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ], [ {"text":"year","value":2011}, {"text":"fileNum","value":7}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"韩国"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[ [ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ] ]

JavaScript加密解密7种方法

作者:不详 来源:DOT技术信息网 日期:2007-11-27 11:30:05

--------------------------------------------------------------------------------

本文一共介绍了七种javascript加密方法:

在做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的javascript代码常常被别人轻易的拷贝,实在让自己的心里有点不是滋味,要知道自己写点东西也挺累的......^*^

但我们也应该清楚地认识到因为javascript代码是在IE中解释执行,要想绝对的保密是不可能的,我们要做的就是尽可能的增大拷贝者复制的难度,让他知难而退(但愿~!~),下面我结合自己这几年来的实践,及个人研究的心得,和大家一起来探讨一下网页中javascript代码的加密解密技术。

以加密下面的javascript代码为例:

<SCRIPT LANGUAGE="javascript">

alert("《我爱一起》")

</SCRIPT>

一:最简单的加密解密

大家对于javascript函数escape()和unescape()想必是比较了解啦(很多网页加密在用它们),分别是编码和解码字符串,比如例子代码用escape()函数加密后变为如下格式:

alert%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B

如何?还看的懂吗?当然其中的ASCII字符"alert"并没有被加密,如果愿意我们可以写点javascript代码重新把它加密如下:

%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B

呵呵!如何?这次是完全都加密了!

当然,这样加密后的代码是不能直接运行的,幸好还有eval(codeString)可用,这个函数的作用就是检查javascript代码并执行,必选项 codeString 参数是包含有效 javascript 代码的字符串值,加上上面的解码unescape(),加密后的结果如下:

<SCRIPT LANGUAGE="javascript">

var code=unescape("%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B")

eval(code)

</SCRIPT>

是不是很简单?不要高兴,解密也就同样的简单,解密代码都摆给别人啦(unescape())!呵呵

二:转义字符""的妙用

大家可能对转义字符""不太熟悉,但对于javascript提供了一些特殊字符如:n (换行)、 r (回车)、' (单引号)等应该是有所了解的吧?其实""后面还可以跟八进制或十六进制的数字,如字符"a"则可以表示为:"141"或"x61"(注意是小写字符"x"),至于双字节字符如汉字"黑"则仅能用十六进制表示为"u9ED1"(注意是小写字符"u"),其中字符"u"表示是双字节字符,根据这个原理例子代码则可以表示为:

八进制转义字符串如下:

<SCRIPT LANGUAGE="javascript">

eval("1411541451621645042u9ED1u5BA2u9632u7EBF425173")

</SCRIPT>

十六进制转义字符串如下:

<SCRIPT LANGUAGE="javascript">

eval("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22x29x3B")

</SCRIPT>

这次没有了解码函数,因为javascript执行时会自行转换,同样解码也是很简单如下:

<SCRIPT LANGUAGE="javascript">

alert("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22x29x3B")

</SCRIPT>

就会弹出对话框告诉你解密后的结果!

三:使用Microsoft出品的脚本编码器Script Encoder来进行编码

工具的使用就不多介绍啦!我是直接使用javascript调用控件Scripting.Encoder完成的编码!代码如下:

<SCRIPT LANGUAGE="javascript">

var Senc=new ActiveXObject("Scripting.Encoder")

var code='<SCRIPT LANGUAGE="javascript">rnalert("《我爱一起》")rn</SCRIPT>'

var Encode=Senc.EncodeScriptFile(".htm",code,0,"")

alert(Encode)

</SCRIPT>

编码后的结果如下:

<SCRIPT LANGUAGE="JScript.Encode">#@~^FgAAAA==@#@&lsDD`J黑客防线r#p@#@&FgMAAA==^#~@</SCRIPT>

够难看懂得吧?但相应的解密工具早已出来,而且连解密网页都有!因为其解密网页代码过多,我就不多说拉!给大家介绍一下我独创的解密代码,如下:

<SCRIPT LANGUAGE="JScript.Encode">

function decode()

alert(decode.toString())

</SCRIPT>

咋样?够简单吧?它是原理是:编码后的代码运行前IE会先对其进行解码,如果我们先把加密的代码放入一个自定义函数如上面的decode()中,然后对自定义函数decode调用toString()方法,得到的将是解码后的代码!

如果你觉得这样编码得到的代码LANGUAGE属性是JScript.Encode,很容易让人识破,那么还有一个几乎不为人知的window对象的方法execScript(),其原形为:

window.execScript( sExpression, sLanguage )

参数:

sExpression: 必选项。字符串(String)。要被执行的代码。

sLanguage : 必选项。字符串(String)。指定执行的代码的语言。默认值为 Microsoft JScript

使用时,前面的"window"可以省略不写!

利用它我们可以很好的运行编码后的javascript代码,如下:

<SCRIPT LANGUAGE="javascript">

execScript("#@~^FgAAAA==@#@&lsDD`J我爱一起r#p@#@&FgMAAA==^#~@","JScript.Encode")

</SCRIPT>

你可以利用方法二对其中的""号内的字符串再进行编码,使得"JScript.Encode"以及编码特征码"#@~^"不出现,效果会更好!

四:任意添加NUL空字符(十六进制00H)

一次偶然的实验,使我发现在HTML网页中任意位置添加任意个数的"空字符",IE照样会正常显示其中的内容,并正常执行其中的javascript 代码,而添加的"空字符"我们在用一般的编辑器查看时,会显示形如空格或黑块,使得原码很难看懂,如用记事本查看则"空字符"会变成"空格",利用这个原理加密结果如下:(其中显示的"空格"代表"空字符")

<S C RI P T L ANG U A G E =" J a v a S c r i p t ">

a l er t (" 我 爱 一 起")

</ SC R I P T>

如何?是不是显得乱七八糟的?如果不知道方法的人很难想到要去掉里面的"空字符"(00H)的!

五:无用内容混乱以及换行空格TAB大法

在javascript代码中我们可以加入大量的无用字符串或数字,以及无用代码和注释内容等等,使真正的有用代码埋没在其中,并把有用的代码中能加入换行、空格、TAB的地方加入大量换行、空格、TAB,并可以把正常的字符串用""来进行换行,这样就会使得代码难以看懂!如我加密后的形式如下:

<SCRIPT LANGUAGE="javascript">

"xajgxsadffgds"1234567890

625623216var $=0alert//@$%%&*()(&(^%^

//cctv function//

(//hhsaasajx xc

/*

asjgdsgu*/

"我爱一起"//ashjgfgf

/*

@#%$^&%$96667r45fggbhytjty

*/

//window

)

"#@$#%@#432hu"212351436

</SCRIPT>

至少如果我看到这样的代码是不会有心思去分析它的,你哪?

六:自写解密函数法

这个方法和一、二差不多,只不过是自己写个函数对代码进行解密,很多VBS病毒使用这种方法对自身进行加密,来防止特征码扫描!下面是我写的一个简单的加密解密函数,加密代码如下(详细参照文件"加密.htm"):

<SCRIPT LANGUAGE="javascript">

function compile(code)

{

var c=String.fromCharCode(code.charCodeAt(0)+code.length)

for(var i=1i<code.lengthi++)

alert(escape(c))

}

compile('alert("《我爱一起》")')

</SCRIPT>

运行得到加密结果为:

o%CD%D1%D7%E6%9CJ%u9EF3%uFA73%uF1D4%u14F1%u7EE1Kd

相应的加密后解密的代码如下:

<SCRIPT LANGUAGE="javascript">

function uncompile(code)

{

code=unescape(code)

var c=String.fromCharCode(code.charCodeAt(0)-code.length)

for(var i=1i<code.lengthi++)

return c

}

eval(uncompile("o%CD%D1%D7%E6%9CJ%u9EF3%uFA73%uF1D4%u14F1%u7EE1Kd"))

</SCRIPT>

七:错误的利用

利用try{}catch(e){}结构对代码进行测试解密,虽然这个想法很好(呵呵,夸夸自己),因为实用性不大,我仅给个例子

<SCRIPT LANGUAGE="javascript">

var a='alert("《我爱一起》")'

var c=""

for(var i=0i<a.lengthi++)

alert(c)

//上面的是加密代码,当然如果真正使用这个方法时,不会把加密写上的

//现在变量c就是加密后的代码

//下面的函数t()先假设初始密码为0,解密执行,

//遇到错误则把密码加1,然后接着解密执行,直到正确运行

var d=c//保存加密后的代码

var b=0//假定初始密码为0

t()

function t()catch(e){

c=""

for(var i=0i<d.lengthi++)

b+=1

t()

//setTimeout("t()",0)

}

}

</SCRIPT>