jsarraymap的简单介绍
如何在JS中实现相互转换XML和JSON
JSON与XML的区别比较
1.定义介绍
(1).XML定义
扩展标记语言 (Extensible Markup Language, XML)
，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。
XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。
XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。
(2).JSON定义
JSON(JavaScript Object
Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式，同时也具备类似于C语言的习惯(包括C,
C++, C#, Java, JavaScript, Perl, Python等)体系的行为。这些特性使JSON成为理想的数据交换语言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。
2.XML和JSON优缺点
(1).XML的优缺点
1.XML的优点
A.格式统一，符合标准；
B.容易与其他系统进行远程交互，数据共享比较方便。
2.XML的缺点
A.XML文件庞大，文件格式复杂，传输占带宽；
B.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
C.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
D.服务器端和客户端解析XML花费较多的资源和时间。
(2).JSON的优缺点
1.JSON的优点：
A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
B.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
D.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
E.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
2.JSON的缺点
A.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
B.JSON格式目前在Web Service中推广还属于初级阶段。
在Javascript中实现XML和JSON相互转换
先看调用例子：
复制代码 代码如下:
viewport id="menuPane" layout="border"
panel region="center" border="0" layout="border"
tbar
toolbar text="XXXX"
menu
text text="11"
/text
text text="22"
/text
text text="33"
/text
/menu
/toolbar
toolbar text="XXXX"
menu
text text="44"
/text
text text="55"
/text
menu
text text="6 6"
/text
/menu
text text="77"
/text
/menu
/toolbar
/tbar
/panel
/viewport
var xmlParser = new XmlToJson();
var json = xmlParser.parse(xml);
console.log( JSON.stringify(json) );
var jsonParser = new JsonToXml();
var xml = jsonParser.parse(json);
console.log( xml );
XML转换为JSON：
复制代码 代码如下:
function XmlToJson() {
}
XmlToJson.prototype.setXml = function(xml) {
if(xml typeof xml == "string") {
this.xml = document.createElement("div");
this.xml.innerHTML = xml;
this.xml = this.xml.getElementsByTagName("*")[0];
}
else if(typeof xml == "object"){
this.xml = xml;
}
};
XmlToJson.prototype.getXml = function() {
return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
this.setXml(xml);
return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
if (xml.nodeType != 1) {
return null;
}
var obj = {};
obj.xtype = xml.nodeName.toLowerCase();
var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");
if(nodeValue xml.childNodes.length == 1) {
obj.text = nodeValue;
}
if (xml.attributes.length 0) {
for (var j = 0; j xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj[attribute.nodeName] = attribute.nodeValue;
}
}
if (xml.childNodes.length 0) {
var items = [];
for(var i = 0; i xml.childNodes.length; i++) {
var node = xml.childNodes.item(i);
var item = this.convert(node);
if(item) {
items.push(item);
}
}
if(items.length 0) {
obj.items = items;
}
}
return obj;
};
JSON转换为XML：
复制代码 代码如下:
function JsonToXml() {
this.result = [];
}
JsonToXml.prototype.spacialChars = ["","","","\"","'"];
JsonToXml.prototype.validChars = ["","","",""","'"];
JsonToXml.prototype.toString = function(){
return this.result.join("");
};
JsonToXml.prototype.replaceSpecialChar = function(s){
for(var i=0;ithis.spacialChars.length;i++){
s=s.replace(new RegExp(this.spacialChars[i],"g"),this.validChars[i]);
}
return s;
};
JsonToXml.prototype.appendText = function(s){
s = this.replaceSpecialChar(s);
this.result.push(s);
};
JsonToXml.prototype.appendAttr = function(key, value){
this.result.push(" "+ key +"=\""+ value +"\"");
};
JsonToXml.prototype.appendFlagBeginS = function(s){
this.result.push(""+s);
};
JsonToXml.prototype.appendFlagBeginE = function(){
this.result.push("");
};
JsonToXml.prototype.appendFlagEnd = function(s){
this.result.push("/"+s+"");
};
JsonToXml.prototype.parse = function(json){
this.convert(json);
return this.toString();
};
JsonToXml.prototype.convert = function(obj) {
var nodeName = obj.xtype || "item";
this.appendFlagBeginS(nodeName);
var arrayMap = {};
for(var key in obj) {
var item = obj[key];
if(key == "xtype") {
continue;
}
if(item.constructor == String) {
this.appendAttr(key, item);
}
if(item.constructor == Array) {
arrayMap[key] = item;
}
}
this.appendFlagBeginE();
for(var key in arrayMap) {
var items = arrayMap[key];
for(var i=0;iitems.length;i++) {
this.convert(items[i]);
}
}
this.appendFlagEnd(nodeName);
};
ts封装和发布一个npm库
1创建项目目录 test-arr-map
2初始化项目
npm init?
??"main":?"./dist/test-arrar-map.js"//入口文件改成打包后的入口
"private":?false,受保护改成false,
配置命令
?"dist":?"vue-cli-service?build?--target?lib?--name?vue-notice-demo?./src/components/notice/notice.js",
--target声明打包类型为lib
--name 包名
入口文件路径，打包指定文件
3确保已经全局安装了typescript 未安装则先全局安装
npm install -g typescript
生成tsconfig.json
命令：tsc --init? ?
修改一下配置
?{ "declaration":?true,
?"outDir":?"./dist", }
{
? ???"exclude":?["./dist"]
}
4创建?test-arr-map.js
例如：
const?arrayMap=T,U(arr:T[],cb:(item:T,index:number,arr:ReadonlyArrayT)=U):U[]={
????let?i=-1;
????let?len=arr.length
????let?newArr=[]
????while(++ilen){
????????newArr.push(cb(arr[i],i,arr))
????}
????return?newArr;
}
export?=arrayMap\
5 注册npm账号
6登录npm,按照提示输入username,password,email,登录成功,
npm login
7创建.npmignore忽略目录
添加想忽略的目录
8 （发布之前需要进行邮箱验证）出版publish
npm publish
