您的位置:乐百家在线 > 乐百家官方网站 > JSON简要介绍以致用法汇总,14款基于javascript的多

JSON简要介绍以致用法汇总,14款基于javascript的多

2019-10-10 04:02

造福创作

打包自定义字体是目眩神摇的。一些 web 应用由此而生,大家中间也本人搞了一个。而用 SVG 的话,加多五个新Logo会变得像把一个 SVG 文件拖入三个目录那样轻易。

手艺路径

我们如此还不算完毕,还或者会每每地重复大家的法子。作者快速的未来,大家会首要关心以下内容:

Cesium

链接:

Cesium 同样引人注目于地理数据可视化,它是二个 Javascript 库,能够在 Web 浏览器中绘制 3D/2D 地球。无需任何插件就能够依照 WebGL 来开展硬件加快。除此而外,它还会有跨平台、跨浏览器的表征。Cesium 本身基于 Apache 开源左券,帮忙商业及非商业项目。

JSON简单介绍以至用法汇总

2015/03/26 · JavaScript · 1 评论 · JSON

原稿出处: 韩非迟的博客   

功能:

  • 1.支撑拖拽文件夹,自动遍历SVG文件合併生成symbol文件。
  • 2.提供三种导出格局,不荒谬格局、修正方式。
  • 3.对文件viewBox大小不为整进行指示,能够采用自行更正情势系统活动放大管理。
  • 4.导出svg-symbol.svg、svg-symbol.js,可一向引进svg-symbol.js方便使用。

svg tool下载地址:

mac:

win32:

win64: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-x64.zip

参考资料:

  • Web 设计新取向: 使用 SVG 代替 Web Icon Font
  • Android微信上的SVG
  • 应用SVG中的Symbol成分制作Icon
  • 突袭HTML5之SVG 2D入门
  • CSS Trick 中总括的 Icon Font使用缺欠
  • svg了解与行使

    1 赞 5 收藏 1 评论

乐百家官方网站 1

可增添动画功效

决不必然要加动画,而是有了增加动画的恐怕。何况 SVG 动画也真的在诸如预加载动画等地点有实际行使。

在markdown文件中写[图片描述](image.jpg).

在创设进程中采取自定义马克down渲染器来为曾经完全成熟的 <picture> 成分编写翻译古板的markdown图片阐明。

FusionCharts Free

链接:

FusionCharts Free 是可跨平台、跨浏览器的 Flash 图表实施方案,它亦可被 ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、轻易 HTML 页面以致 PPT 调用。在动用进度中,顾客原则上并没有须求知道别的 Flash 的知识,只需求通晓你所用的编程语言,并开展简短的调用即能够达成应用

何以利用JSON?

JSON平时以字符串的款型在数量交互进度中游走,so对于js来说,怎么样将json字符串和js对象时期张开互动转变显得愈加主要。

  • eval大法(json字符串 -> js对象)

JavaScript

var jsonStr = '{"name": "hanzichi", "sex": "male"}'; var ans = eval('('

  • jsonStr + ')'); console.log(ans.name, ans.sex); // hanzichi male
1
2
3
var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var ans = eval('(' + jsonStr + ')');
console.log(ans.name, ans.sex); // hanzichi male

eval 函数异常快,但是它能够编写翻译任何 javascirpt 代码,那样的话就或许发生安全的题目。eval 的选用是基于传入的代码参数是百发百中的假使下,有局地状态下,可能客商端是不可相信的。如若依照安全的考虑的话,最棒是采用三个JSON深入分析器,二个JSON 深入分析器将只接受JSON文本,所以是更安全的,如下。

  • JSON.parse(json字符串 -> js对象)

JavaScript

var jsonStr = '{"name": "hanzichi", "sex": "male"}'; var obj = JSON.parse(jsonStr); console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}

1
2
3
var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var obj = JSON.parse(jsonStr);
console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}

第二个参数能够是函数,可以对值进行删改:

JavaScript

var jsonStr = '{"name": "hanzichi", "sex": "male", "age": 10}'; var obj = JSON.parse(jsonStr, function(key, value) { if(key === 'name') { return 'my name is ' + value; } return value; }); console.log(typeof obj, obj); // object Object {name: "my name is hanzichi", sex: "male", age: 10}

1
2
3
4
5
6
7
8
var jsonStr = '{"name": "hanzichi", "sex": "male", "age": 10}';
var obj = JSON.parse(jsonStr, function(key, value) {
  if(key === 'name') {
    return 'my name is ' + value;
  }
  return value;
});
console.log(typeof obj, obj); // object Object {name: "my name is hanzichi", sex: "male", age: 10}
  • JSON.stringify(js对象 -> json字符串)

JavaScript

var obj = {name: 'hanzichi', sex: 'male', age: '10'}; var jsonStr = JSON.stringify(obj); console.log(jsonStr); // {"name":"hanzichi","sex":"male","age":"10"}

1
2
3
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);  // {"name":"hanzichi","sex":"male","age":"10"}

也能够加个参数,规定要求转接为json字符串的品质(数组形式,跟数组同名的js对象属性才会被撤换):

JavaScript

var obj = {name: 'hanzichi', sex: 'male', age: '10'}; var jsonStr = JSON.stringify(obj, ['name']); console.log(jsonStr); // {"name":"hanzichi"}

1
2
3
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, ['name']);
console.log(jsonStr);  // {"name":"hanzichi"}

第贰个参数也可以是个函数,能够删选切合条件的性质(大概改变属性值,未有return表示遗弃该属性,return的值表示该key在json字符串中的值)

JavaScript

var obj = {name: 'hanzichi', sex: 'male', age: '10'}; var jsonStr = JSON.stringify(obj, function(key, value) { if(key === 'name') { return 'my name is ' + value; } return value; }); console.log(jsonStr); // {"name":"my name is hanzichi","sex":"male","age":"10"}

1
2
3
4
5
6
7
8
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, function(key, value) {
  if(key === 'name') {
    return 'my name is ' + value;
  }
  return value;
});
console.log(jsonStr);  // {"name":"my name is hanzichi","sex":"male","age":"10"}

还是能有第四个参数,能够是数字还是字符串。

如若是数字来讲,表示缩进,数字大小当先10了按10处理。

JavaScript

var obj = {name: 'hanzichi', sex: 'male', age: '10'}; var jsonStr = JSON.stringify(obj, null, 4); console.log(jsonStr); // { // "name": "hanzichi", // "sex": "male", // "age": "10" // }

1
2
3
4
5
6
7
8
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 4);
console.log(jsonStr);
// {
//     "name": "hanzichi",
//     "sex": "male",
//     "age": "10"
// }

也足以是字符串,会在质量前增进这么些字符串当做前缀,一样字符串长度超越10只截取10:

JavaScript

var obj = {name: 'hanzichi', sex: 'male', age: '10'}; var jsonStr = JSON.stringify(obj, null, 'pre'); console.log(jsonStr); // { // pre"name": "hanzichi", // pre"sex": "male", // pre"age": "10" // }

1
2
3
4
5
6
7
8
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 'pre');
console.log(jsonStr);
// {
// pre"name": "hanzichi",
// pre"sex": "male",
// pre"age": "10"
// }

此间作者有个问号,笔者认为输出应该是之类方式才对啊…

JavaScript

{ "prename": "hanzichi", "presex": "male", "preage": "10" }

1
2
3
4
5
{
"prename": "hanzichi",
"presex": "male",
"preage": "10"
}

麻烦有驾驭的大大能倾情告诉小编…

Web应用中SVG的采用办法

何以选拔 SVG?

JS懒加载

陈设上,大家的网址并不曾过多JS。我们前进了一个JavaScript专门的学问流来管理大家日前已部分js, 以至今后会用到的js财富。

JS在 <head> 块里面渲染,那是大家想要的。JS应该只是用来增进顾客体验,不该是访谈者需求的尤为重要。管理JS堵塞渲染的粗略方法正是把脚本放在页面包车型客车尾巴。那样网页就能够在全体HTML 渲染实现后才去加载JS。

另一种可以把脚本放在 head 实施的方案是在 <script> 标签里面增添 defer 属性,来延迟脚本的实行。由于浏览器下载脚本是飞速的,不会杜绝页面渲染进度,等到页面完全加载完,才会施行脚本里面包车型大巴代码。还或然有一件事,大家并未有应用像jQuery这一个库,所以大家的台本决定于 vanilla 脚本的天性。我们只是想要在浏览器加载脚本来协助那些特色。最终的结果就好像下边包车型客车代码那样:

XHTML

<script> if ('querySelector' in document && 'addEventListener' in window) { document.write('<script src="index.js" defer></script>'); } </script>

1
2
3
4
5
<script>
if ('querySelector' in document && 'addEventListener' in window) {
  document.write('<script src="index.js" defer></script>');
}
</script>

JSON简要介绍以致用法汇总,14款基于javascript的多寡可视化工具。笔者们把那小段脚本放在页面底部,来检测浏览器是不是支持原生JavaScript的document.querySelectorwindow.addEventListener 属性。假设补助,我们由此<script> 标签直接给页面加载脚本,并应用 defer 属性让它不会杜绝页面渲染。

14款基于javascript的多少可视化学工业具

2015/12/15 · JavaScript · 数量可视化

原来的书文出处: 百度EFE- Ceada   

俗话说,一图胜千言。图形化的音讯能够让民众对数码有更直观清晰的理解,让新闻揭橥者特别便捷地出示本人的宗旨内容。在前端开采中,假设缺点和失误适当工具,制作数据可视化图表会十二分复杂。但是随着数据可视化概念慢慢热门,有很多优质的图样开源库和创设工具突兀而起。上边,大家就拿里面前遭遇比知名的 十六个产品实行简单介绍。

 总结

自然有趣的事中的ie8(及以下)因为某种破绽不能使用JSON.parse()以致JSON.stringify()方法,而eval()又显示不安全,若是要合营它们的话能够援引json2.js。

1 赞 1 收藏 1 评论

乐百家官方网站 2

选取限制:

关键援助单层结构SVG举办联合生产symbol,对于多层组织SVG合併注意手动修改对应颜色。

使用 SVG 输出 Octicon

2016/03/18 · HTML5 · SVG

原著出处: aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 未来不再选取字体来输出Logo了。我们把代码库中负有的 Octicon 替换来了 SVG 版本。纵然这么些改造并不那么显著,但您那时就会体味到 SVG Logo的优点。

乐百家官方网站 3

Octicon 上的比较

切换成 SVG 今后,Logo会作为图片渲染而非文字,那使其在别的分辨率下都能很好地在各个像素值下显得。能够比较一下左边手放大后的书体版本和左臂清晰的 SVG 版本。

结果

乐百家官方网站 ,万一你看来此间,你应该是想要知道结果的。测试网页的习性能够运用像 PageSpeed Insights 那样的工具,它有很实用的唤醒。也足以使用 WebPagetest来测量检验,有扩大性的互联网分析。笔者认为测验网页渲染质量的最好办法正是在疯狂地幸免网络通讯时来观望网页的历程。那代表,用一种不合实际的点子来禁绝通讯。在谷歌(Google)浏览器,你能够这样操作 (via the inspector > Network tab) 来界定通讯,观望网页产生经过中,央浼是什么样缓慢加载的。

下边是我们的网页在 50KB/s 的情事下的加载意况。

乐百家官方网站 4

这是 de Voorhoede site 首屏的互连网解析,是网页第一次经过的一个一览。

当心到在50KB/s的网速成人中学学,我们是怎样让首屏的渲染只用了 2.27 秒的。也正是率先张幻灯片和瀑布图里面的日光黄线所表示的岗位。黄线恰好绘在就是HTML已经加载完的日子地方。HTML满含了要害CSS,保证页面包车型大巴可观性。全数其余的CSS都是用懒加载,所以大家能够等到全数财富加载完时才与页面举办交互。这也是大家想要的作用!

另叁个值得注意的正是自定义字体一向不在那缓慢的链接上加载。 font face 观看器会自行注意到那或多或少。但是,假如大家不异步加载字体,你只看到大繁多浏览器,都相会世FOIT(不可以见到文本的闪现,上文有聊到)的情景。

怀有的CSS文件仅在8s后就都加载达成。相反,尽管大家不选取加载关键CSS的章程,而是使用加载全体CSS,大家在前8秒看见的将会是室如悬磬的页面。

比方您以为讶异,想与那多少个不太正视质量的网址比较一下加载时间,那尽早试试啊。那么些时间必然是上升啊!

用地点介绍的工具测量检验了我们的网站,结果也是令人看中的。 PageSpeed insights 在运动品质方面给了笔者们100分,多么巨大啊!

PageSpeed insightsvoorhoede.nl的测量试验结果! 速度100分!

当大家查阅 WebPagetest 时,大家得到上边那样的结果:

乐百家官方网站 5WebPagetest 对 voorhoede.nl的检查评定结果

能够见见,大家的服务器运行特出,首屏的进程指标是693。 那意味大家的页面在693飞秒后就能够在宽屏缆线下被运用了。

Google Chart

链接:

无需多介绍,我们都极其理解的可视化学工业具

什么是JSON?

JavaScript 对象表示法(JavaScript Object Notation)。

JSON是一种轻量级的数据交流格式,有个别JSON格式的公文之中举例能够长成那样:

JavaScript

{ "name": "hanzichi", "sex": "male" }

1
2
3
4
{
  "name": "hanzichi",
  "sex": "male"
}

看起来都是key-value的键值对,很像js的目的啊?没有错,但与此同期JSON表示不服,小编不可能跟js的靶子长成同样啊,作者得有作者本人的天性,于是规定键-值对中的键必须用双引号!同有时间规定键-值对中的值的取值有早晚要求:

JSON 值能够是:

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中
  3. 逻辑值(true 或 false)
  4. 数组(在方括号中)
  5. 对象(在花括号中)
  6. null

除上述6种外,再无其余,未有像js同样的undefined、NAN,JSON拒绝使用。

SVG简介

SVG是一种开放标准的矢量图形语言,使用svg格式大家可以直接用代码来形容图像,能够用别样文字管理工科具张开svg图像,通过改动一些代码来使图像具备交互成效,并得以任何时候插入到HTML中通过浏览器来浏览。

图形尺寸更符合

咱俩脚下对种种图标在具有尺寸下提供单纯的图样。因为站点的加载正视了Logo字体的下载,大家曾被迫把Logo集限制在最要害的 16px 尺寸下。那让每一种符号在视觉上做出一些低头,因为我们是针对性 16px 方格举行优化的。当在新页面或经营贩卖页上缩放那几个Logo时,展现的依旧 16px 的版本。而 SVG 能够方便地 fork 全体的Logo集,在大家钦定的种种尺寸提供更安妥的图样。当然对Logo字体也足以如此做,但如此顾客需求下载两倍的数据量,大概愈来愈多。

剧情优先

咱俩想要把大旨内容尽快地表现给客商,意味着我们要拍卖好中央的 HTML 和 CSS。每一个页面都应该达到基本的目标:传递音讯。JS、CSS、网页字体、图片、网址剖判等优化都以放在于宗旨内容之下的。

Chart.js

链接:

Chart.js 是一个简便、面向对象,为陈设和开荒者计划的图纸绘制工具库。它提供了各类基础图表类型。基于 Html5,响应式,帮忙具有当代浏览器。同期它不借助任何外界工具库,本人轻量级,且扶助模块化,即开垦者能够拆分 Chart.js 仅引进本身索要的片段步向工程。在精巧的体形中它同有的时候间援救可互相图表。

SVG导出工具:

  • Photoshop CC 2014 以上版本均帮忙导出SVG功效
  • Adobe Illustrator 导出
  • export-photoshop-layer-to-svg基于photoshop的SVG导出插件
  • export-svg-with-fireworks依据firework的SVG导出插件

总结

因而换掉Logo字体,大家能更方便人民群众、更敏捷、更有可访谈性地提供Logo了。并且它们看起来也更棒了。享受啊。

1 赞 2 收藏 评论

乐百家官方网站 6

JS和CSS懒加载

平常来说,大家都是尽量快的加载需求的能源。我们移除一些堵塞的呼吁来加快页面渲染,优化首屏,用浏览器缓存来拍卖重复的页面。

AnyChart

链接:

AnyChart 是基于 Flash/JavaScript(HTML5) 的图纸施工方案,它能够轻易地跨浏览器、跨平台工作。除了基础的图样作用外,它还应该有收取金钱的交互式图表和仪表功用。它能够因此XML 格式获取数据,该方式让开采职员极度灵活地垄断图表上的每一个数总局,而当图表数分公司数量偏大时,则足以应用 CSV 数据输入,减小数据文件大小和图纸加载时间。

3.SVG Sprite

这里的百事可乐本事,类似于CSS中的Pepsi-Cola才能。Logo图形组成在同步,实际突显的时候精确突显特定Logo。其实基础的SVG Sprite也只是将本来的位图改成了SVG而已,调节SVG大小、颜色供给重新合併SVG文件。

XHTML

.icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; } .icon-facebook-logo{ background-position: 0 0; } .icon-earth{ background-position: 0 -30px; } <span class="icon-bg icon-facebook-logo"></span> <span class="icon-bg icon-earth"></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
}
.icon-facebook-logo{
    background-position: 0 0;
}
.icon-earth{
    background-position: 0 -30px;
}
<span class="icon-bg icon-facebook-logo"></span>
<span class="icon-bg icon-earth"></span>

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:JSON简要介绍以致用法汇总,14款基于javascript的多

关键词:

  • 上一篇:没有了
  • 下一篇:没有了