前端必学的知识

一、 LayUI
官方学习文档：https://www.layui.com/doc/

Npm安装：npm install layui-src
注意模块化：每个页面元素引入的模块代码可能不一样

二、 ElementUI
适合vue的UI框架
官方网站：http://element-cn.eleme.io/#/zh-CN

三、 Bootstrap
官方网站：https://v3.bootcss.com/
注意：如果网页内用到了Bootstrap的js效果，那么必须先引入jQuery文件，因为Bootstrap的js插件都是基于jQuery的。

四、 easyUI—datagrid网格
官方网站：http://www.jeasyui.net/

五、 Front-Awesome图标字体
官方网站：http://www.bootcss.com/p/font-awesome/

六、 Css预处理语言less
1、 less官方文档：https://less.bootcss.com/functions/
2、 专门编写less的编译器是Koala但是也可以用webstorm
$ npm install less -g编译less:：$ lessc main.less
自动编译less修改webstorm:

3、 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端
4、 们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式一样： 需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 也就是可以直接饮用less文件也可以引用编译后的less也就是css文件。 4、服务器端 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译.

七、 es6
一、ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准
二、es6的使用

三、Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

八、 echarts
官方网站: https://echarts.baidu.com/index.html
然后我们可以在myProject目录下使用命令行，这样开始构建：
node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js

九、 highcharts
 
十、 微信小程序开发
官方网站：https://developers.weixin.qq.com/miniprogram/dev/index.html
开发工具下载在D盘的wechart-devtall文件中
测试项目的文件夹在 E盘的 test-wechart文件中
WXML 模板：充当的就是类似 HTML 的角色

十一、 编写CSS动画 svg、canvas

十二、D3.JS
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的
D3 是一个 JavaScript 函数库，并不需要通常所说的“安装”。它只有一个文件，在 HTML 中引用即可。有两种方法：
（1）下载 D3.js 的文件: d3.zip
解压后，在 HTML 文件中包含相关的 js 文件即可。
（2）还可以直接包含网络的链接，这种方法较简单：

但使用的时候要保持网络连接有效，不能再断网的情况下使用。

如何选择元素
在 D3 中，用于选择元素的函数有两个：
• d3.select()：是选择所有指定元素的第一个
• d3.selectAll()：是选择指定元素的全部
这两个函数返回的结果称为选择集，常见用法如下。

在这里插入代码片

选择集和绑定数据通常是一起使用的。

如何绑定数据
D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素 p 和一个整数 5，于是可以将整数 5 与 p 绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。
D3 中是通过以下两个函数来绑定数据的：
• datum()：绑定一个数据到选择集上
• data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
相对而言，data() 比较常用。
假设现在有三个段落元素如下。

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

接下来分别使用 datum() 和 data()，将数据绑定到上面三个段落元素上
datum()
假设有一字符串 China，要将此字符串分别与三个段落元素绑定，代码如下：

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str);

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

绑定数据后，使用此数据来修改三个段落元素的内容，其结果如下：
第 0 个元素绑定的数据是 China
第 1 个元素绑定的数据是 China
第 2 个元素绑定的数据是 China
在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：
• d 代表数据，也就是与某元素绑定的数据
• i 代表索引，代表数据的索引号，从 0 开始
例如，上述例子中：第 0 个元素 apple 绑定的数据是 China。
data()
有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。
var dataset = [“I like dogs”,“I like cats”,“I like snakes”];
绑定之后，其对应关系的要求为：
• Apple与I like dogs绑定
• Pear与I like cats绑定
• Banana与I like snakes绑定
调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
  .text(function(d, i){
      return d;
  });

这段代码也用到了一个无名函数 function(d, i)，其对应的情况如下：
• 当 i == 0 时， d 为 I like dogs。
• 当 i == 1 时， d 为 I like cats。
• 当 i == 2 时， d 为 I like snakes。
此时，三个段落元素与数组 dataset 的三个字符串是一一对应的，因此，在函数 function(d, i) 直接 return d 即可。
结果自然是三个段落的文字分别变成了数组的三个字符串。
I like dogs
I like cats
I like snakes