js教学视频;js教程免费视频 收藏 0

纯干货：node.js入门教程以及中文学习资源大搜罗！

node.js是Javascript的一个运行环境，也就是对Google V8引擎进行封装。node.js优化了特殊用例，还提供替代性强的API。基于此，今天W3Cschool小师妹将为大家带来史上最全的node.js中文学习资料整理，希望大家喜欢。

1.node.js

这部分主要包括node.js教程、被误解的node.js、node.js代码风格指南、node.js C++addon编写实战系列、node.js命令行程序开发教程等。实练可以帮助你一步一步的学习node.js，还有成千上万个案例。而Node.js教程、七天学会 Nodejs、NodeJS Express 说明书、[InfoQ]深入浅出Node.js迷你书、使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用、Node.js 命令行程序开发教程、Node.js 包教不包会这五本教程，相当详细。

2.Mysql 老牌关系型数据库/Redis 内存键值数据库

这部分收集的是和Mysql 老牌关系型数据库相关的资源，主要包括mysql、mysql处理BIGINT里面的一个坑、使用node-mysql中的连接池、mysql自动断开解决办法等，有需要的可以去123点W3Cschool点cn查看。

3.字符样式/工具类

字符样式资源中，需要重点介绍的是开源的简繁转换库OpenCC支持Node.js了。Open Chinese Convert(OpenCC)是开源的一个中文繁简转换的项目，主要的目标就是制作高质量的简繁转换词库，这个词库是基于统计预料。

4.实时应用web框架meteor/基于Express的实时MVC框架Sails

meteor这个web开发框架，让很多开发者感到震惊。因为这个框架和其他框架相比，简直太不一样了。它是基于nodejs以及MongoDB数据库的实时web框架，它前后端的代码，全部是基于JS来开发的。不仅如此，这些还可以混合一起，开发的过程中，要是html、css、js等文件被改掉，那么页面将会自动的更新。

5.Pomelo 网易出品的网页游戏框架/网页模板引擎

W3Cschool小师妹为大家精选的Pomelo 网易出品的网页游戏框架资源，主要包括pomelo、Infoq深入浅出node.js游戏服务器开发、官网wiki 、响应非常迅速的官方论坛等。

6.最流行的web框架Express/经验分享

如果你是新手，可以看看给Node.js新手的7条小建议，这七条小建议，主要包括命名而不是匿名、尽早解引用、别复制代码、慎重引入新模块等。

而最流行的web框架Express中，重点需要看的是Express.js中文入门指引手册。入门手册的主要特点，就是非常详细，可以手把手、一步步的让你学会。

7.Koa，下一代 Node.js web 框架/异步流程处理

Express 开发团队为大家设计了下一代的Web 框架，那就是Koa 。Koa的出现，主要目的是为 Web 应用程序提供更具有表现力、更小1且更坚实的基础。Koa 提供了非常优雅的一套方法，可以使服务器端的开发更快速、愉快。

上面W3Cschool小师妹为大家收集的node.js中文资料，主要包括文档、教程、经验分享、框架等资源。无论是新手还是大牛，都可以找到你需要的资源。强烈建议加入收藏夹：123点W3Cschool点cn。

学编程技术，就到W3Cschool，如果你喜欢我们的文章，可以点击右上角关注我们;如果你想看到更多IT界的资讯，可以加我们的公众号。

公众号：w3cschoolcn

D3.js入门教程

作者：karen

转发链接：https://mp.weixin.qq.com/s/TFpywiD6PY7HMlKIpQwDFQ

D3.js是一个JavaScript库操纵文档基于数据。D3帮助你把数据使用HTML、SVG和CSS。D3强调web标准给你完整的现代浏览器的功能没有把自己专有的框架,结合强大的可视化组件和数据驱动的DOM操作方法。

D3是一个专门处理2d场景的数据可视化的库

WHY

社区已经存在大量处理数据可视化的js库,为何还要学习D3呢?

类似echarts,highcharts这些高度封装好的库,已经可以很好的在PC和移动设备上运行,兼容当前绝大部分浏览器,将常见的一些柱状图,饼图,折线图等已经很好的封装,开发者不需要做太多事情即可直接拿来使用

当开发过程中遇到一些需要个性化展示的可视化需求时,类似echarts,highcharts这类库并不能很好支持,此时便需要更加灵活的D3,D3就像是一只画笔,可以让你自由的在浏览器上发挥你的智慧和才能,让你更好的自由发挥

D3可以提供很好的自由度,也意味着其上手难度和学习成本等是高于echarts这类配置化的可视化库,至于在项目中选择哪个库,需要结合项目需求、组员能力等情况

几个常见可视化库npm对比

HOW

如何学习D3呢?

其实无论从零学习何种技术,作为普通基层码农无非就看视频、官方文档和相关的文档这几个主要渠道,若是身边有相关的大神便能事半功倍了

接下来就是从万能的hello word开始吧

hello word

在页面中创建一个空的h1标签,然后通过D3将h1的内容修改为hello word

使用D3编写一个hello word就是这么简单.整体的使用感觉是不是很类似古老的jq

常见API选择元素

• d3.select()
• 选择所有指定元素的第一个
• d3.selectAll()
• 选择指定元素的全部

绑定数据

绑定数据是D3中一个比较独特的功能,能将数据绑定到DOM上

主要通过两个函数来绑定数据

1. datum(): 绑定到一个数据到选择元素上
2. data(): 绑定一个数组到选择元素上,数组的各项值分别与选择元素的各元素绑定,相对于datum比较常用

• 使用datum 绑定数据

页面上三个h1标签分别显示为

• 使用data 绑定数据

页面上三个h1标签分别显示为

需要注意的是: 若是arr的数量小于h1的数据集数量,此时超过arr长度的元素中则显示其标签内原有的数据

选择、插入、删除元素

已经讲解了 select 和 selectAll，以及选择集的概念。本节具体讲解这两个函数的用法。

假设在 body 中有三个段落元素：

现在，要分别完成以下四种选择元素的任务。

选择第一个 p 元素选择三个 p 元素选择第二个 p 元素

有不少方法，一种比较简单的是给第二个元素添加一个 id 号。

Pear

然后，使用 select 选择元素，注意参数中 id 名称前要加 # 号。

选择后两个 p 元素

给后两个元素添加 class，

由于需要选择多个元素，要用 selectAll。注意参数，class 名称前要加一个点。

插入元素

插入元素涉及的函数有两个：

• append()：在选择集末尾插入元素
• insert()：在选择集前面插入元素

假设有三个段落元素，与上文相同。

append()

在 body 的末尾添加一个 p 元素，结果为：

insert()

在 body 中 id 为 myid 的元素前添加一个段落元素。

已经指定了 Pear 段落的 id 为 myid，因此结果如下。

删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

作者：karen

转发链接：https://mp.weixin.qq.com/s/TFpywiD6PY7HMlKIpQwDFQ

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com