node 路径

• cd 切换命令

• pwd 当前目录

• cd ../ 返回上一级

• 写入数据到文件

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

  //引入内置模块 const fs = require('fs'); const path = require('path'); //fs.writeFile(file,data[,options],callback) //4个参数 // 1 把数据写入到哪里 // 2 要写入什么数据 // 3 编码：以什么编码写入 可选 "默认UTF-8" // 4 回调 fs.writeFile(path.join(__dirname,"./data/data.json"),"str","编码",function(err){ if(err){ throw err ;//有错误 抛出错误 } console.log("写入成功"); }); //读取数据 //fs.readFile(path[,options],callback) 3个参数 // 1 从哪里读取数据 // 2 以什么解码格式解析数据 可选 默认“null” // 3 回调 err data fs.readFile(path.join(__dirname,"./data/data.json"),"utf-8",function(err,data){ if(err){ throw err; } console.log(data); });

buffer

1. buffer 是一个缓冲，是一种二进制流的数据格式

2. 类似一个数组，元素 2位16进制的字节

3. 负责文件或数据的传输

4. utf-8 中1个汉字= 3个字节

5. GBK 中 1个汉字 = 2个字节

同步 ：不常用

try…. catch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// sync 同步
// aSync 异步
// a 否定的词根



//同步读取数据
//1 引入模块
const fs = require('fs');

//2 fs.readFileSync(path[,options])
// 参数1: 从哪里读取数据
// 参数2:以什么编码格式读取
console.log("我的博客啊");
    // let data = fs.readFileSync("./data1.txt","utf-8");

try{
    let data = fs.readFileSync("./data1.txt","utf-8");
}catch(err) {
    console.log("出错了");
}

console.log("回不来了");

// 同步 有 错误 用try.....catch(){}
// 异步用 throw err

路径 ：引入文件路径用 path.join(__dirname,”./data.js”)；

如何快速创建一个简单服务器

1
2
3
4
5
6
7
8
9

//1 引入 http
const http = require('http');
//2 创建服务器 开启服务器 开始监听请求
http.createServer(function(req,res){
    //结束响应
  res.end("ok");
}).listen(8080,function(){
    console.log("服务器开启");
})

加载静态资源（css/img）

解决方案

先把静态资源文件放到公共文件夹下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 处理样式
// 先检查一下有没有package.json 如果没有 npm init -y 生成package.json
// 然后在安装包 npm i mime 
const mime = require('mime');

if(req.url.startsWith("/public")){


        console.log(mime.getType(req.url));
        // /public/index.css
        // 进来的： /public/7.jpg
        const tempDir = "page/"+req.url
        console.log("进来的：",tempDir);
        fs.readFile(path.join(__dirname,tempDir),function (err,data) {
            if(err){
                throw err;
            }
            res.end(data);
        })
}

npm 是什么?

官方解释：npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

个人理解 ：

npm : 是一个 node 包管理器

作用：管理包 减少我们的负担，让我们专注于功能的开发。

安装与更新

安装去官网https://www.npmjs.com.cn

升级：

• npm i npm -g ——> 全局安装 默认安装最新
• npm i npm@latest -g 安装最新版本
• npm i npm@6.9.0 -g 安装指定版本

降级；npm i npm@5.4.5 -g

常见命令

• npm init（自定义） ——- npm init -y（自动生成） —— 生成npm的配置文件
• package.json ——- 记录安装的包
• 安装 npm i 包名 / npm install 包名
• 卸载 npm un 包名 / npm uninstall 包名
• _ / -s / -D / -SD
• _ / -S —–> dependencies 发布阶段所依赖的包
• -D / -SD ——>devDependencies ：开发阶段所依赖的包

安装模式

• 本地安装： npm i 包名 / -S / -D /-SD 安装到当前目录的node_modules
• 全局安装: npm i 包名 -g 安装在C盘下的node_modules
• 官方概念: npm 全局安装把一个”包”安装成一个命令行工具
• 效果概念: 全局都可以使用

cnpm和yarn
安装 npm i cnpm -g
查看版本 cnpm -v
cnpm i 包名 -S/-D/-SD

yarn
安装 npm i yarn -g
查看版本 yarn -v
yarn add 包名 -S/-D/-SD

模块化
commonJS
加载：require()
导出:module.exports

exports
exports 和module.exports指向同一片空间
exports 就是module.exports的一个别名
最终导出的还是以module.exports 的为主

创建模块
导出模块
内容
参数—>函数
模块和函数
加载模块require()
使用模块

jquery中的事件

加载DOM

​ 浏览器，在页面加载完成后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中，通常使用window.onload方法而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模块中最重要的一个函数，可以极大地提高Web 应用程序的响应速度。jQuery就是用$(document).ready()方法来替代传统JavaScript的windo.load 方法的。通过使用该方法，可以在DOM载入就绪时就对其进行操作并调用执行它所绑定的函数。在使用过程中，需要注意$(document).ready()方法和window.onload方法之间的细微区别。

执行时机

$(document).ready()方法和window.onload 方法有相似的功能，但是执行时机方面是有区别的。window.onload方法是网页中所有的元素(包括元素的所有关联的文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

1. 需要注意一点，由于$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕，并且已经解析为DOM树了，但有可能图片还未加载完毕，所以图片的宽高这些不一定有效。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法——–load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口、框架、对象和图片等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

   jquery代码如下

1
2
3

$(window).load(function(){
    //你写的代码
})

多次使用

javascript代码如下

1
2
3
4
5
6

function one(){
    console.log("one");
}
function two(){
    console.log("two");
}

当页面加载完毕后，通过javascript代码来调用one和two函数

1 2	window.onload = one; window.onload = two;

然而当代码运行以后，发现只打印了two

因为javascript的onload事件一次只能保存对一个函数的引用，它会自动覆盖之前的函数

为了达到两个函数都触发，只能创建一个新的方法来实现

1
2
3
4

window.onload = function(){
  one();
  two();
}

另外 $(document)也可以简写 $() 不带参数时，默认的参数就是doument可以简写$().ready(function(){//代码})

事件绑定

当文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：

1

bind(type,[,data],fn);

bind()方法有3个参数，

• 第一个参数：是事件类型

  类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等 当然也可以是自定义名称。

• 第二个参数：是可选参数 作为event.data属性值传递给事件对象的额外数据对象

• 第三个参数；则是用来绑定的处理函数

###合成事件

jquery有两个合成事件—hover()方法和toggle()方法 类似read()方法

hover()方法和toggle()都属于jquery自定义的方法

1. hover()方法

   语法结构hover(enter,leave);

   hover()方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第1个函数(enter)

   当光标移出这个元素时，会触发指定的第2个函数（leave）

   转换成代码:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   $(function(){ $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); }); //或者 $(function(){ $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); }) })

   ​

   2.toggle()方法

   结构：toggle(fn1,fn2,....fnN)

   toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（fn1）;

   当在次单击同一元素时，则触发指定的第2个函数（fn2）如果有更多的 依次触发 知道最后一个

1
2
3
4
5
6
7

$(function(){
       $("#panel h5.head").toggle(function(){
           $(this).next().toggle();
       }.function(){
        $(this).next().toggle();
       })
})

vue基本指令

## 指令

在vue中 以 v开头的 叫做指令。指令就是给元素添加一些原本没有的功能

• v-model 是用来实现文本框的双向数据绑定的。也就是说：将 v-model 指定的name这个数据与当前文本框的值，进行双向数据绑定

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <div id = "#app"> <input type="text" v-model = "name"> <span>{{ name }}</span> </div> <script src= 'vue.js'></script> <script> const vm = new Vue ({ el : "#app", data : { name:'zs' } }) </script>

  ​

什么是SVG?

SVG(Scalable Vector Graphics 可缩放矢量图标)是一种XML应用，简约而不简单呐，可以以一种简洁、可移植的形式表示图形信息，具有强大的矢量图形绘制及动态交互功能，并提供丰富的视觉效果。目前，在网页设计中出现越来越多的SVG图形，大多数现代浏览器都能显示SVG图形，并且大多数矢量绘图软件都能导出SVG图形。

SVG基础

​ SVG是一种专门为网络而设计的基于文本的图像格式，与XML高度兼容，且开放标准，所以可拓展性很强，能够描述任何复杂的图像

SVG发展历史

1998年 W3C收到两个关于新的图形格式的提案：PGML和VML 。虽然PGML 和 VML 都是基于CSS的XML标记语言，但是二者却是竞争对手。

​ 为了更好的促进XML矢量图形的发展，W3C决定在融合两者优点的基础上，开发一种新的语言SVG。 W3C期望SVG这种基于开放标准的可扩展语言能够满足Web开发者对动态、可缩放和平台无关的Web内容表现和交互手段日益增长的需求。

SVG特点

1. 超强的交互性

   ​ SVG能够轻易地制作强大的动态交互。利用设计完善的DOM接口进行编程，动态的生成包含SVG图形的Web页面，能对用户操作做出不同的响应。例如：高亮、声效、特效等体现了网络交互的本质。

2. 文本独立性

   ​ SVG图像中的文字独立于图像，文字标注也可被动态的移动和缩放，方便用户对SVG图像内的文字进行基于图形的查询，图像中的文字被搜索引擎作为关键字搜索已经不再是梦想。

3. 高品质矢量图

   ​ SVG图像的清晰度适合任何屏幕分辨率或打印分辨率。用户可以自由的缩放图像而不会破坏图像的清晰度，这对于查看某些图像细节的应用非常有用。

4. 超强颜色控制

   ​ SVG具有一个1600万色彩的调色板，支持ICC标准、RGB、线性填充和遮罩。

5. 基于XML

   ​ 通过XML来表达信息、传递数据、不仅跨越平台、还跨越空间，更跨越设备。

##在XTML中应用SVG

​ SVG 文件可以通过一下元素嵌入XTML文档 <embed> <object> <iframe>。SVG代码也可以直接嵌入到XTML页面中，或者直接连接到SVG文件。

1. 使用<embed>元素
   • 优点：所有主要浏览器都支持，并允许使用脚本。
   • 缺点：不推荐在HTML4和XHTML中使用，但在HTML5中允许

1
2
3
4

具体用法：

​```html
<embed src="test.svg" type = "image/svg+xml">;

1. 使用<object>元素

   • 优点：所有主要浏览器都支持，并支持HTML4和XHTML和HTML5标准。
   • 不允许使用脚本

   具体使用：

   1	<object data = "test.svg" type = "image/svg+xml"> </object>

2. 使用<iframe>元素

   • 优点:所有主要浏览器都支持 并允许使用脚本

   • 缺点：不推荐在HTML4和XHTML中使用，但在HTML5中允许

具体语法：

1

<iframe src = "test.svg"></iframe>

1. 直接在HTML嵌入SVG代码
   在Firefox 、IE9+、Chrome和Safari中，可以直接在HTML嵌入SVG代码。但SVG不能直接嵌入到Opera。

   【示例】下面是一个简单示例

   ​

1
2
3
4
5
6
7

<html>
  <body>
    <svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
      <circle cx = "100" cy = "50" r = "40" stroke = "black" stroke-width = "2" fill = "red" />
    </svg>
  </body>
</html>

1. 连接到SVG文件

   ​ 可以使用<a>元素连接到一个SVG文件

   例如：

   1	<a href = "test.svg">View SVG file </a>

   ​

使用SVG

​ SVG预定义很多元素，用来绘制各种图形。SVG元素是一组事先定义好的如何绘制图像的指令集，由解析器负责解析，并把SVG图像在指定设备上渲染出来，使用SVG可以在页面上显示出各种高质量的矢量图形，支持很多常见的图形图像功能，如几何图形变换、动画效果、渐变色、滤镜效果、嵌入字体和透明效果等。

1. 矩形

   ​ 使用<rect>元素可以创建矩形，以及矩形的变种，包含属性说明如下

   • x：矩形的左上角的x轴。

   • y: 矩形的左上角的x轴。

   • rx: x轴的半径（round元素）。

   • ry: y轴的半径（round元素）。

   • width: 矩形的宽度。必需的。

   • height： 矩形的高度，必需的。

     显现属性包括:Color、FillStroke、Graphics

使用<rect>元素绘制一个矩形

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<body>
  <svg xmlns ="http://www.w3.org/2000/svg" version = "1.1">
  	<rect width = "300" height = "100" 
          style = "fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)"/>
  </svg>
</body>
</html>
<-- fill 属性 定义矩形的填充颜色 取值可以是rgb 颜色名 或者十六进制
    stroke-width 属性定义矩形边框的宽度 
    stroke 属性定义矩形边框的颜色
    -->

下面包含一些新的绘图属性 ：

1
2
3
4
5

<svg xmlns ="http://www.w3.org/2000/svg" version = "1.1">
  <rect x="50" y="20"
        width = "300" height = "150" 
          style = "fill:blue; stroke-width:5; stroke:pink;fill-opacity:0.1;stroke-opacity:0.9  "/>
</svg>

SVG滤镜

SVG滤镜用来增加对SVG图形的特殊效果。SVG可用的滤镜说明如下

• feBlend:把两个输入对象组合在一起，使他们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。该模式由属性mode定义

• feColorMatrix：基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为红，绿、蓝，透明度的矢量)都经过矩阵乘法计算出的新颜色

• feComponentTransfer: 对每个像素执行颜色分量的数据重映射。它允许进行图像的亮度调整，对比度调整，色彩平衡或阈（yu）值的操作

• feComposite:执行两个输入图像的智能像素组合，在图像空间中使用over、in、atop、xor合成操作之一。另外，还可以应用一个智能组建arithmetic操作（结果被压到[0,1]范围内）

• feConvolveMatrix：应用一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，如模糊、边缘检测、锐化、压花和斜角。

• feDiffuseLighting：光照一个图像，使用alpha通道作为隆起映射。结果图像是一个RGBA不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。

• feDisplacementMap：映射置换滤镜，该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值

• feDistantLight：该滤镜定义了一个距离光源，用于照明过滤，可以在灯光滤镜<feDuffuse-Lighting>元素或<feSpecularLihting>元素的内部

• feFlood：该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明毒填充滤镜 子区域

• feFuncA：该滤镜为它的父<feComponentTransfer>元素的输入图形的alpha成分定义了变换函数

• feFuncB:该滤镜为它的父<feComponentTransfer>元素的输入图形的蓝色成分定义了变换函数

• feFuncG:该滤镜为它的父<feComponentTransfer>元素的输入图形的绿色成分定义了变换函数

• feFuncR:该滤镜为它的父<feComponentTransfer>元素的输入图形的红色成分定义了变换函数

• feGaussianBlur：该滤镜对输入图像惊醒高斯模糊，属性stdDeviation中指定的数量定义了钟形

• feImage：feImage滤镜从外部来源取得图像数据，并提供像素数据作为输出，意味着如果外部来源是一个SVG图像 这个图像将被栅格化。

• feMerge：该滤镜允许同时应用滤镜效果，而不是按照顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点，然后再一个<feMergeNode>子元素中访问它。

• feMergeNode:feMergeNode元素获取另一个滤镜的结果，让他的父<feMerge>元素处理

• feMorphology: 该滤镜用来侵蚀或扩张输入的图像。他在增肥或瘦身效果方面特别有用。

• feOffest：该输入图像作为一个整体，属性dx和属性dy的值指定了它的偏移量。

• feSpecularLighting：该滤镜照亮一个源图行，使用alpha通道作为隆起映射，该结果图像是一个基于光色的RGBA图像

• fePoinLight：是一种点光源元素，用于照明过滤，用于SVG文件

• feSpotLight：是一种光源元素，用于照明过滤，用于SVG文件

• feTile：输入图像是平铺的，结果用来填充目标。它的效果近似于一个<pattern>图像对象

• feTurbulence:该滤镜利用Perlin噪声函数创建一个图像，它实现了人造纹理例如 云纹、大理石纹的合成

  用户可以在每个SVG元素是那个使用多个滤镜 （IE和Safari 早期版本不支持SVG滤镜）

兼容性

​ 考虑到互联网上HTML文档已经存在20多年，因此支持所有现存HTML文档是非常重要的。HTML5不是颠覆性的革新，它的核心理念是保持与过去技术的兼容和过渡。一旦浏览器不支持HTML5的某项功能，针对该功能的备选行为就会悄悄运行。

合理性

H5新增加的元素都是对现有网页和用户习惯进行跟踪、分析和概括而推出的。例如：谷歌分析成千上万的页面，从中分析出了DIV标签的通用ID名称，并且发现其重复量很大，如很多开发人员使用

<div id="header"> 来标记页面区域，为了解决实际问题，H5添加了一个header标签。

效率

H5规范是基于用户优先准则的编写，其宗旨是用户即是王，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位 其次是页面作者。再次是实现者（或浏览器），接着是规范制定者(W3C/WHATWG)，最后才考虑理论的纯粹性。因此，H5大部分是实用的，

安全性

为了保证足够安全，H5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对各种不同的API都通用，这个安全模型可以不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

分离

在清晰分离表现与内容方面，H5迈出了很大的步伐。H5在所有可能的地方都努力进行了分离，包括HTML和CSS

简化

H5要的就是简单、避免不必要的复杂性。H5口号是：简单至上、尽可能简化。因此，H5做了一下改进

• 以浏览器原生能力替代复杂的javascript代码
• 简化的DOCTYPE
• 简化的字符集声明
• 简单而强大的H5API

通用性

通过访问的原则可以分成3个概念

• 可访问性：出于对残障人士的考虑，H5与WAI（Web可访问性倡议）和ARIA（可访问的富Inrenet应用）做到了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中
• 媒体中立:如果可以的话H5的功能在所有不同的设备和平台上应该都能正常运行
• 支持语种如新<ruby>元素支持在东亚页面排版中会用到Rudy注释

#无插件

在传统的Web中，很多功能只能通过插件或复杂的hack来实现 但在H5中提供了对这些功能的原生支持，

Node介绍

1. node 是一个开发平台, 就像 Java 开发平台、.Net 开发平台、PHP 平台、Apple 开发平台一样。
   • 何为开发平台? 有对应的编程语言、有语言运行时、有能实现特定功能的 API (例如: fs http path)
2. 该平台使用的编程语言:javascript 语言.
3. node.js 平台是基于谷歌 V8引擎构建的
4. 基于 node.js 可以开发控制台程序（命令行程序）、桌面应用程序（借助 electron 、node-webkit等框架实现）、Web 应用程序（网站）

#Node的特点

1. 事件驱动（事件触发，会执行回调函数里面的代码）

   • js也是事件驱动，鼠标放置，点击，触发不同的事件执行对应的代码
   • onclick = function(){}
   • node.js 是传一个回调函数

   2.非阻塞（I/O）

   • I/O就是输入输出的操作
   • 读写I/O+网络I/O
   • nodejs 的I/O 不会阻塞程序

1
2
3
4
5
6
7
8
9

//引入模块
let fs = require('fs')

console.log(111);

fs.readFile(function(data){
  console.log(data,222);
})
console.log(333);

​

• 不会阻塞我们主程序的运行

1. 单线程;

• 首先我们 js 就是单线程的语言, node基于 js 也是单线程;
• 减少内存开销 (线程/2M)

1. 拥有世界最大的开源生态系统– npm

• npm - 开源库托管网站! 官网
• 我们 node是一个开发平台有 实现特定功能的 api, 但是内置的 api 是有限的,,想要实现 node.js 自己实现不了的功能怎么办 ?? 就去找 npm,,
• 只要是我们想到的功能,都已经有人帮我们已经写好了,就在 npm 这个代码仓库里,,,
• npm 这个丰富的开源系统,,而且也很开放, 也都会写模块,,然后把代码上传到 npm 上,供大家使用
• 就像 jquery 一样,很多人都给它写插件啊,,给她拓展功能啊,
• 我们 node.js 也是,,,, npm 里面帮我们node拓展了各种各样的功能包

#Node 创建 文件名命名常用规范

• 不要用中文 (特别里面是使用 npm 安装包的时候: npm init -y)
• 不要包含空格
• demo里可以 项目总切记不要
• 不要出现node关键字
• 建议以 ‘ - ‘ 分割单词 (例如: child-demo.js )

Node 编写代码常用规范

• 命名: 变量名和函数名命名,按照驼峰命名 —— var userName = ‘123’
• 优先使用 const(常量) 和 let (变量)
• 引入: 引入模块时,变量名最好和模块名一样: var fs = require('fs');
• 尽量使用单引号 ,, json数据里使用双引号
• 动态字符串使用 反引号 :

  1	`你好啊 ${name}` ''

• 空格: 操作符前后需要加空格, 比如 + - * / = var foo = 'bar' + 'baz'
• 分号: 表达式结尾添加分号,,,虽然编译器自动会给我们,可能会带来一些错误!

1
2
3
4
5
6
7
8
9
10
11
12

var x = 1;
var y = 2;
x=y
(function(){  
  console.log(x);
})()

...........................
//执行时会误以为是:
x=y(function(){}());

// 到时候会报错: y is  not a function

案例 1. 编写 Hello world 在 node 环境下执行

1. 创建 hello-world.js文件
2. 编写: console.log('hello world')
3. 终端打开: node hello-world.js 运行即可 (在 node环境下运行)

1
2
3
4

注意1: node + 文件名 / 路径 
注意2: 文件名和路径不要手写,容易写错,,tab 
注意3: 确保当前路径没有错
注意4: 终端命令介绍: cd/pwd/ls/ctr+c

###案例 2: 文件读写案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * 写入文件  write file
 */
//1. 引入 fs 模块
var fs = require('fs');

//2. 写入文件
// fs.writeFile(file, data[,options], callback)
// 异步写入数据到文件
// 参数1: 文件要写入到哪里
// 参数2: 要写入的数据
// 参数3: 编码  默认: utf8   可选
// 参数4: 回调  回调参数: err  
var msg = '..: 第一美女助教11';
console.log(111)
fs.writeFile('./data.txt',msg,function (err) {
  
  // 如果有错,,抛错
  if (err) {
    throw err;
  }

  console.log('写入成功')
})
console.log(222)
// 注意:
//1. 如果文件存在会覆盖
//2. 该操作是异步操作 
// (遇到异步的操作,先执行后面的代码,等异步回调回来再执行回调的内容)
//3. 默认写入的文件编码: 为 utf8 可选  一般不写
//4. 在回调里面,判断是否有错,,有错就抛出异常 throw err

读取文件

1. 读取文件 : fs.readFile(file, [, options], callback);

   常用: fs.readFile ( where , encoding , callback )

• 参数1: 从哪里读取数据? 必填
• 参数2: 以什么格式读取出来 ?
• 参数3: 读取完毕后的回调函数, 必填
• 读取文件注意:
  • 该操作也是 异步操作;
  • 回调函数有2个参数: err 和 data
  • 如果读取文件时没有指定编码，那么返回的将是原生的二进制数据；如果指定了编码，那么会根据指定的编码返回对应的字符串数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 问题1:
  // <Buffer e6 9c 89 e6 b2 a1 e6 9c 89 e8 be a3 e4 
  // b9 88 e4 b8 80 e9 a6 96 e6 ad 8c 2c e8 ae a9 e4 bd a
  // 0 e6 83 b3 e8 b5 b7e6 88 91 3f 3f>
  // Buffer 是一个缓冲 是一个字节数组  就是一种二进制数据 负责传输数据和文件
  //1. Buffer 是什么 ? 是一个缓冲,,是一个二进制数据流格式
  //   是发送或者接收文件传输过程中的格式
  //2. 它类似于一个数组 每个元素是 2位十六进制的字节  字节数组
  //3. 一个汉字三个字节
  // 是我们想要的格式吗??
  // 我们想要一个字符串 
  // 只要通过 toString() 就可以了  其实内部已经给我们转化为了 utf8格式

  //问题2: ENOENT E: error NO :no  ENT entity: 实体 没有这个文件或者文件夹

  //问题3: 显示第二个参数 :'utf8' 也是可以的

同步读取文件

1. 方法: fs.readFileSync(path[, options])
2. 返回值 接收数据
3. // fs.readFileSync(path[, options])
   // 参数1: 从哪里读取文件
   // 参数2: 编码 (可选)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

console.log(哈哈)

var data = fs.readFileSync('./data1.txt','utf8');

console.log(data)

console.log(打印不出)

// 总结:
//1. 该操作是同步的 
//2. 异步捕捉异常: throw err
// 同步 : 能不能不捕捉异常
// 同步,一旦出错,,后面的所有代码都不执行,,体验很不好,,必须要有捕捉
//3. 怎么捕捉呢?
// try ...catch()

try…catch (捕获异常 , 抛出错误)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 一旦出错,后面的代码不执行了..
console.log(111)

try {
  var data = fs.readFileSync('./abcd.txt','utf8');

  console.log(data)

}catch(err){

  // throw err
  console.log('读取时:'+err)
}

console.log(222)

异步读文件

###throw errr (捕获异常 , 抛出错误)

问题: 同步没有 err , 能不能不捕获异常了???

1
2

no
后面的会崩溃,不会执行

1. 同步: try catch

1

异步不能使用 try..catch 因为不管正确和错误都会走回调

路径

1. __dirname

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//1. 加载 fs 模块
var fs = require('fs');
var path = require('path') //  path 模块 负责处理路径

//2. 读取文件 


// ('./data.txt')

console.log(__dirname);
///Users/MaWenxing/Desktop/14期讲课/day01/4-源代码/day01_14/04-__dirname
///Users/MaWenxing/Desktop/14期讲课/day01/4-源代码/day01_14/04-__dirname

// 后面的路径,,我能获取到,如果我们也能自动获取前面的就好了?
// 巧了,,,,唉,,巧了,,,,正好有一个熟悉,,__dirname

// 当前 js 的文件夹路径   js 的相对文件路径
// /Users/MaWenxing/Desktop/14期讲课/day01/4-源代码/day01_14/04-__dirname   /data.txt
// var file = '/Users/MaWenxing/Desktop/14期讲课/day01/4-源代码/day01_14/04-__dirname/data.txt'

// /data.txt  ./data.txt  data.txt
// var  file = __dirname + '/data.txt'
// var file = path.join(__dirname,'./data.txt')
fs.readFile(path.join(__dirname,'./data.txt'),'utf8',function (err,data) {
  
    if (err) {
      throw err
    }

     console.log(data)
  })

  // 报错的原因:  path 路径是相对于 `执行 node 命令所在的目录`

  // __dirname :  获取当前 js 所在的`文件夹`目录
  //  因为怕误写  ./data.txt  /data.txt  data.txt  --> path.join
  // 

  // 总结: 
  // 以后遇到这种文件路径的: 全部使用   path.join(__dirname,'./....')

通过 node.js 编写 http 服务程序 - 极简版本

• 步骤

  1. 加载 http 模块;

  2. 创建 http 服务;

  3. 监听 request 事件 —— 为 http 服务对象添加 request 事件处理程序;

  4. 启动服务,开始监听 —— 开启 http 服务监听,准备接收客户端请求;

     *注意

     1. 浏览器可能是乱码, 需要设置 浏览器显示时所使用的编码

        1	response.setHeader('Content-Type','text/plain ; charset=utf-8'); // 注意 后面的分号 和引号的位置

        1. 演示一下设置Content-Type=text/html 和 Content-Type=text/plain的区别。
        2. request 对象 包含了用户请求报文中的所有内容,通过 request 对象可以获取所有用户提交过来的数据;
        3. response 对象用来向用户响应一些数据,当服务器要向浏览器响应数据的时候必须使用 response 对象
        4. 有了 request 对象和 response 对象,就既可以获取用户提交的数据,也可以向用户响应数据了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//1. 加载 http 模块
var http = require('http');

//2. 创建 http 服务
var server =  http.createServer();

//3. 监听 request 事件
// 参数1: 请求体 request -> req
// 参数2: 响应体 response -> res
server.on('request',function (req,res) {
  
  console.log('有人请求了') // 会打印两次,一次是请求 ico 图标  (忽略)
  res.write('hello world 哈哈哈'); //2
  res.end();  //1. 
})

//4. 启动服务,开始监听
// 参数1: 指定一个端口  如果冲突了,再换一个
// 参数2: 回调
server.listen(9000,function () {
   console.log('服务已经启动,请访问: http://127.0.0.1:9000')
})

简化: 创建、开启、监听 一步走

1
2
3
4
5
6
7
8

//2. 创建 开启 监听
http.createServer(function (req,res) {
   
  res.end('hello world')  
}).listen(8080,function () {

  console.log('服务器已经开启了')  
})

text/plain 和 text/html 的区别

1
2
3
4
5

response.setHeader('Content-Type','text/plain ; charset=utf-8');  // 注意 后面的分号 和引号的位置
 text/plain :  告诉浏览器发送的数据是 `纯文本`类型,,让浏览器以`纯文本`的格式进行解析
 text/html  :  告诉浏览器发送的数据是 `html` 类型,,...........html.......
 
 res.end('hello <h1>world</h1>  哈哈')  //不能直接写 `<h1>`因为浏览器会自动识别

编写 http 服务程序 — 根据 不同的路径 url 请求 响应不同的 : 纯文本

注意:

• 根据 req.url的不同来判断 (例如: /abc /index )

• 别忘了 404

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

  /** * 编写 http 服务程序 — 根据 不同的 url 请求 响应不同的 : 纯文本 * 1. 编写 http 服务程序 * 2. 获取不同的 url * 3. 响应不同的纯文本 */ //1. 加载 http 模块 var http = require('http'); //2. 创建.开启.监听 http.createServer(function(req,res){ // 设置文件类型 和 编码格式 res.setHeader('Content-Type','text/plain;charset=utf-8'); console.log(req.url); // / index --> hello index // /login --> hello login // /register --> hello register // /list --> hello list if (req.url=='/' || req.url == '/index') { res.end('hello index') } else if(req.url=='/login') { res.end('hello login') }else if(req.url=='/register') { res.end('hello register') }else if(req.url=='/list') { res.end('hello list') }else{ res.end('hello 404 page not found') } }).listen(8080,function () { console.log('服务开启了'); })

  ​

  ​

Common System Errors - 常见错误号

• EACCESS (Permission denied)
  • An attempt was made to access a file in a way forbidden by its file access permissions.
  • 访问被拒绝
• EADDRINUSE (Address already in use)
  • An attempt to bind a server (net, http, or https) to a local address failed due to another server on the local system already occupying that address.
  • 地址正在被使用（比如：端口号占用）
• EEXIST (File exists)
  • An existing file was the target of an operation that required that the target not exist.
  • 文件已经存在
• EISDIR (Is a directory)
  • An operation expected a file, but the given pathname was a directory.
  • 给定的路径是目录
• ENOENT (No such file or directory)
  • Commonly raised by fs operations to indicate that a component of the specified pathname does not exist – no entity (file or directory) could be found by the given path.
  • 文件 或 目录不存在
• ENOTDIR (Not a directory)
  • A component of the given pathname existed, but was not a directory as expected. Commonly raised by fs.readdir.
  • 给定的路径不是目录

在javascript中，this 表示当前调用对象 ，在函数体内。本博客将介绍如何使用this

this 用法

this 是函数体内自带的一个对象指针，它始终指向调用对象。当函数被调用时，使用this可以访问调用对象，this关键字的使用范围局限于函数体内或调用范围内。

具体用法如下：

1

this[.属性]

如果this未包含属性，则传递的是当前对象

this 用法比较灵活，它可以存在与任何位置，它并不仅仅局限于对象的方法内，还可以被应用在全局域内、函数内、以及其它特殊上下文环境中

#

【示例1】 函数的引用和调用

函数的引用和调用分别表示不同的概念。虽然他们都无法改变函数的定义作用域。但是引用函数，却能改变函数的执行作用域，而调用函数是不会改变函数的执行作用域的

1
2
3
4
5
6
7
8
9
10

var o = {
  name: "对象 o ",
  f: function(){
    return this;
  }
}
o.o1 = {
  name:"对象 o1",
  me:o.f     //引用对象o的方法f
}

在上面实例中，函数中的this所代表的是当前执行域对象o1:

1
2

var who = o.ol.me();
alert(who.name); //返回字符串"对象o1"，说明当前this代表对象o1

如果把对象o1的me属性值改为函数调用：

1
2
3
4

o.o1 = {
  name:"对象O1",
  me:o.f()  //调用 对象  o的方法f
}

则函数中this 所代表的是定义函数时所在的作用域对象o

1
2

var who = o.o1.me;
alert(who.name); //返回字符串"对象O"  说明当前this代表对象o

【示例2】 使用call ( )和apply( )

call()和apply()方法可以直接改变被执行函数的作用域，使其作用域指向所传递的参数对象，因此，函数中包含的this关键字也指向参数对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function f(){
  // 如果当前执行域对象的构造函数等于当前函数，则表示this为实例对象
  if(this.constructor == arguments.callee) alert("this==实例对象");
  // 如果当前执行域对象等于window 则表示this为window对象
  else if (this == window) 
  alert("this == window 对象");
  // 如果当前执行域对象为其他对象 则表示this为其他对象
  else 
  alert("this == 其他对象 \nthis.constructor = " + this.constructor);
}
f();  //this 指向window对象
new f(); //this 指向实例对象
f.call(1); //this指向数值实例对象

在上面示例中，直接调用函数f()时，函数的执行作用域为全局域，所以this代表window。当使用new 调用函数时 ,将创建一个新的实例对象，函数的执行作用域为实例对象所在的上下文，所以this就指向这个新创建的实例对象。而使用call()方法执行函数f()时，call会把函数f()的作用域强制修改为参数对象所在的上下文。由于call（）方法的参数值为数字1，则javascript 解释器会把数字1强制封装为数值对象，此时this就会指向这个数值对象。

​ 在以下示例中，call（）方法把函数f()强制转换为对象o的一个方法并执行，这样函数f()中this就指向对象o,所以this.x的值就等于1，而this.y的值就等于2 结果就返回3

1
2
3
4
5
6
7
8

function f(){
    alert (this.x + this.y);
}
var o = {
    x:1,
  	y:2
}
f.call(o); // 执行函数f() 返回值3

【示例3】原型继承

javascript 通过原型模式实现类的延续和继承，如果在父类的成员中包含了this关键字，当子类继承了父类的这些成员时，this的指向就变得很迷惑人

在一般情况下，子类继承父类的方法后，this就会指向子类的实例对象，但是也可能指向子类的原型对象，而不是子类的实例对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function Base(){ //基类
    this.m = function(){ // 基类的方法m()
        return "Base";
    };
  this.a = this.m(); //基类的属性a, 调用当前作用域中m（）方法
  this.b = this.m; // 基类的属性b,引用当前作用域中m()方法
  this.c = function(){
    //基类方法c()以闭包结构调用当前作用域中m()方法
    return this.m();
     
  }
}
function F(){//子类
  this.m = function (){ //子类的方法m()
      return "F"
  }
    
}
F.prototype = new Base(); //继承基类
var f = new F(); //实例化子类
alert(f.a); //返回字符串"Base" 说明this.m()中this指向F的原型对象
alert(f.b());//返回字符串"Base",说明this.m()中this指向F的原型对象
alert(f.c());//返回字符串"F" 说明this.m()中this指向 F的实例对象

在上面示例中，基类Base包含4个成员 其中成员b和c以不同方式引用当前作用域内m(),

而成员a存储当前作用域内方法m()的调用值。当这些成员继承给子类F后，其中m,b和c成为原型对象的方法，而a成为原型对象的属性。但是，c的值为一个闭包体，当在子类的实例中调用时，实际上它的返回值已经成为实例对象的成员，也就是说，闭包体在哪被调用，则其中包含的this就会指向哪。所以，你会看到f.c()中的this指向实例对象，而不是F类的原型对象。

​ 为了避免因继承关系而影响父类中this所代表的对象，除了通过上面介绍的方法，把方法的引用传递给父类的成员外，我们还可以为父类定义私有函数，然后在把他的引用传递给其他父类成员，这样就避免了因为函数闭包的原因，而改变this的值。

1
2
3
4
5
6
7
8

function Base(){
  var _m = function (){//定义基类的私有函数_m
    return "Base";
      
  };
  this.a = _m;
  this.b = _m();
}

​ 这样基类的私有函数_m()就具有完全隐私性，外界其他任何对象都无法直接访问基类的私有函数 _m() 。所以 在一般情况下 定义方法的时候，对于相互依赖的方法 ，可以把它定义私有函数，并以引用方法的当时对外公开，这样就避免了外界对了依赖方法的影响。

【示例4】异步调用之事件处理函数

​ 异步调用就是通过事件机制或计时器来延迟函数的调用时间和时机。通过调用函数的执行作用域不再是原来的定义作用域，所以函数中的this 总是指向引发该事件的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<input type='button' value='Button' >
<script language="javascript" type="text/javascript">
	var button = document.getElementByTagName('input')[0];
  var o = {};
 o.f = function (){
     if(this == o){
         alert("this == 0");
     }
    if(this == window){
         alert("this == window");
     }
   if(this == button){
         alert("this == button");
     }
       
 }
 button.onclick = o.f;
</script>

这里的方法f()所包含的this 不再指向对象o ，而是指向按钮button 因为它是被传递 给按钮 的事件处理函数之后 ，在被调用执行的。函数的执行作用域发生了变化，所以不在指向定义方法时所指定的对象

​ 如果使用DOM 2级标准为按钮注册事件 处理函数：

1
2
3
4
5

if(window.attachEvent){//兼容Ie
  button.attachEvent("onclick",o.f);  
}else{//兼容符合DOM 标准的浏览器
    button.addEventListener("click",o.f,true);
}

函数调用模式

​ 在javascript 中，共有4种函数调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化this上存在差异。

提示

1

调用运算符是小括号，小括号内可以包含零个或多个用逗号隔开的表达式。每个表达式产生一个参数值。每个参数值被赋予函数声明是定义的形参。当实参的个数与形参的个数不匹配是不会导致运行时错误。如果实参值过多，超出的参数会被忽略。如果实参值过少，缺失的值将会被替换u为undefined 。 不会对参数值进行类型检查，任何类型的值都可以被传递给参数

【示例1】方法调用模式

​ 当一个函数被保存为对象的一个属性值时，将称之为一个方法。当一个方法被调用时，this被绑定到当前调用对象

1
2
3
4
5
6
7
8
9
10

var obj = {
    value : 0,
  increment: function(inc){
      this.value += typeof inc === 'number' ? inc: 1;
  }
}
obj.increment();
document.writeln(obj.value);//1
obj.increment(2);
document.writeln(obj.value);//3

​ 在上面代码中创建了obj对象，他有一个value属性和一个increment 方法。 increment方法接收一个可选的参数。如果该参数不是数字，那么默认使用数字1

​ increment方法可以使用this去访问对象，所以它能从对象中取值或修改该对象。this到对象的绑定发生在调用的时候。这个延迟绑定使函数可以对this高度复用。通过this可以取得increment方法所属对象的上下文的方法称为公共方法。

【示例2】函数调用模式

当一个函数不是一个对象的属性时，它将被当作一个函数来调用

1

var sum =add(3,4); //7

​ 当函数以此模式调用时，this被绑定到全局对象。这是语言设计上的一个缺陷。如果语言设计正确，当内部函数被调用时，this应该仍绑定到外部函数的this 变量。这个设计错误的后果是方法不能利用内部函数来帮助它工作，因为内部函数的this被绑定了错误的值，所以不能共享该方法对对象的访问权。

​ 解决方案：如果该方案定义一个变量并将它赋值为this ，那么内部函数就可以通过这个变量访问this。 按照约定，将这个变量命名为that

1
2
3
4
5
6
7
8
9
10
11
12

var obj = {
  value:1,
  doub:function(){
    var that = this;
    var helper =function(){
        that.value = that.value*2
    };
    helper();
  }
}
obj.doub();
document.writeln(obj.value); //2

【示例3】构造器调用模式

​ javascript 是基于原型继承的语言，对象可以直接从其他对象继承属性。当今大多数语言都是基于类的语言，虽然原型继承有着强大的表现力，但他偏离可主流用法，并不被广泛理解。javascript为了能够兼容基于类语言的编写风格，提供了一套基于类似类语言的对象构建语法。

​ 如果在一个函数前面加上new 来进行调用，那么创建一个隐藏链接到该函数的prototype

原型对象的新示例对象，同时this将会被绑定到这个新实例对象上。注意：new 也会改变return语句的行为。

1
2
3
4
5
6
7
8

var F = function (string){
  this.status = string
};
F.prototype.get = function(){
  return this.status;
};
var f = new F("new object");
document.writeln(f.get());//"new object"

​ 上面代码创建一个名为F的构造函数，此函数构建了一个带有status属性的对象。然后，为F所有实例提供一个名为get 的公共方法。最后，创建一个实例对象，并调用get方法，以读取status属性的值。

​ 结合new前缀调用的函数被称为构造函数，按照约定，构造函数应该保存在以大写格式命名的变量中。如果有调用构造函数时没有在前面加上new，可能会发生非常糟糕的事情，即没有编译时警告，也没有运行时警告，所以大写约定非常重要。

【示例4】apply调用模式

​ javascript 是函数式的面向对象编程语言，函数可以拥有方法。apply就是函数的一个基本方法，使用这个方法可以调用函数，并修改函数体内的this值。apply 方法包括两个参数 第1个参数设置绑定给this的值，第2个参数是包含函数参数的数组。

1
2
3
4
5
6
7
8
9

var array = [5,4];
var add = function (){
  var i ,sum = 0;
  for(i = 0;i<arguments.length;i+=1){
      sum += arguments[i];
  }
  return sum;
};
var sum = add.apply({},array);

​ 上面代码构建了一个包含两个数字的数组，然后用apply方法调用add()函数，将数组array中的元素值相加。

1
2
3
4
5
6
7
8
9
10
11

var F = function(string){
    this.status = string;
  
};
F.prototype.get = function(){
    return this.status;
};
var obj = {
    status:"obj"
};
var status = F.prototype.get.apply(obj);//"obj"

上面的代码构建了一个构造函数F，为该函数定义了一个原型方法get，该方法能够读取当前对象的status属性的值。然后定义一个obj对象，该对象包含了一个status属性，使用apply方法在obj对象上调用构造函数F的get方法，将会返回obj对象的status属性值

个人收集在实际开发中经常使用的正则表达式

目的：方便以后进行查找，减少工作量

正则表达式简介

什么是正则表达式

正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”），正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式特点

• 可以迅速地用极简单的方式达到字符串的复杂控制
• 灵活性、逻辑性和功能性非常的强
• 对于刚接触的人来说，比较晦涩难懂

##正则表达式速记

限定符

元字符串

###其他

##常见正则表达案例

1.校验日期格式

1
2

var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$) | (^\d{4}年\d{1,2}月\d{1,2}日$)$/;

1. 密码校验强度

   密码的强度必须是包含大小写字符和数字的组合，不能使用特殊的字符，长度在6-12位之间

1

var reg = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,12}$/;

1. 校验中文

   字符串仅能是中文

   1	var reg = /^[\\u4e00-\\u9fa5]{0,}$/;

4.由数字、26个英文字母或下划线组成的字符串

1

var reg = /^\\w+$/;

1. 校验E-Mail 地址

   同密码一样 下面是E-mail地址合规性的正则查询语句。

   1	var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/;

2. 校验身份证号码

   下面是身份证的正则校验，15或18

• 15位

1

var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/

• 18位

1

var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/;

1. 校验日期

“yyyy-mm-dd” 格式的日期校验，已考虑平年闰年·

1	var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;

1. 校验金额

金额校验 精确到2为小数。

1	var reg = /^[0-9]+(.[0-9]{2})?$/ ;

1. 校验手机号

   1	var reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\\d{8}$/;

2. 判断IE的版本

   兼容IE 下面是IE版本检查的表达式

   1	var reg =/^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;

3. 校验IP-v4地址

   1	var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;

4. 校验IP-v6地址

   1 2

   var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

5. 检查URL 的前缀

   应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后在进行逻辑判断。

   1 2 3 4 5 6

   if (!s.match( /^[a-zA-Z]+:\/\// )) { s = 'http://'+ s; }

6. 提取URL链接

   下面的这个表达式可以筛选出一段文本中的URL。

   1	var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;

7. 文件路径及扩展名校验

   验证 window 下文件路径和拓展名(例子为.txt文件)

   1	var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;

8. 提取Color Hex Codes

   有时需要抽取网页中的颜色代码，可以使用下面的表达式。

   1	var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

9. 提取网页图片

   假若你想提取网页中所有图片信息，可以用下面表达式。

   1	var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;

10. 提取页面超链接

    提取html中的超链接

    1	var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;

11. 查找css 属性

    通过下面的表达式，可以搜索到相匹配的css属性。

    1	var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;

12. 抽取注释

    如果您需要移除HTML中的注释，可以使用如下表达式。

    1	var reg = /<!--(.*?)-->/;

文档:DOM中的”D”

DOM可以把我们编写的网页文档转成一个文档对象

对象:DOM 中的”O”

对象

>是一种无序的键值对的结合

与某个特定对象相关联的变量被称为这个对象的属性，只通过某个特定的对象去调用的函数被称为这个对象的方法

​ javascript语言中对象可分为三种类型。

1. 用户定义对象:由程序员自行创建的对象。

2. 内置对象（内建对象）: 内建在javascript语言里的对象。如Array、Math、Date等

3. 宿主对象：由浏览器提供的对象

   即使是在javascript的最初版本里 ，对编写脚本来说非常重要的一些宿主对象就已经可用了，他们当中最基础的对象就是window对象

   window对象对应着浏览器窗口本身，这个对象的属性和方法通常成为BOM（浏览器对象模型）。BOM 提供了window.open和window.blur 等方法

模型：DOM中的”M”

DOM 中的M代表着“Model” (模型)

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

节点

1. 节点这个词是个网络术语，它表示网络中一个连接点。一个网络就是由一些节点构成的集合。
2. 在DOM中有许多不同类型的节点。 也有很多类型的DOM节点包含着其他类型的节点。接下来我们简单介绍三种：元素节点、文本节点、属性节点
   • ​

##元素节点
标签的名字就是元素的名字。元素可以包含其他元素，特殊 没有被包含在其他元素里的唯一元素就是html元素。它是我们的节点树的根元素

##文本节点
文本节点由Text类型表示，包含的是纯文本内容，但文本节点是对象类型

##属性节点
属性节点是用来对元素做出更具体的描述。几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述。

jquery 中ajax 请求的步骤

AJAX 技术

即Asychronous Javascript And XML ,AJAX 并非是一门新的语言 而是对现有的技术的综合利用

• 本质 上是 HTTP协议的基础上以异步的方式通过js的XMLHttpRequest对象与服务器进行通信

• 作用 ： 可以在页面不刷新的情况下，请求服务器，局部更新页面的数据

  $.ajax()

  参数列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$.ajax({
    type:"get/post",//请求类型
  	url:'01.php',//请求地址
  	data:{
    name:'zs',
  	age:18
},//请求数据
  dataType:'text',
  timeout:2000,//设置超时时间
  beforeSend:function(){
      console.log("发送前的数据");
  },
  success:function(info){
      console.log(info);
  },
  error:function(error){
      console.log(error);
  },
  complete:function(){
      console.log("请求完成");
  }
  
})

怎么解决跨域问题

在跨域的情况下，不能发送 ajax请求 （不能使用XMLHttpRequest 对象发送请求，会被浏览器限制）就算你将dataType 设置为jsonp，仍然不能使用XMLHttpRequest 对象发送请求，而是使用其他的方式来请求的服务器

//这种方式 叫JSONP json with padding 用json 进行填充

跨域的情况下 不能使用XMLHttpRequest 对象

jsonp 的原理

本质是上是使用了script标签上的src 属性请求的服务器

1. 前端要准备好一个已经定义好的函数

2. 用script标签 把方法名字传递给后台

3. 后台向获取的方法名中 填充json数据，并且会返回 已经拼接好 数据的 方法调用say({“name”:”zs”})

4. 前端接受到后台返回的方法调用，会立即当做js执行 就会拿到数据

   • jsonp的注意点
   • jsonp 只能发送 GET请求
   • jsonp 需要前后台配合完成

   跨域

   跨域能请求图片

   1 2 3 4 5 6 7 8 9

   // 跨域请求图片 <img src="http://user.jpg" alt=""> //跨域能请求js文件 <script src='http://www.test.com/cross/corss.js'></script> <!--标签的src link属性 具备跨域请求资源的能力--> <!--src 可以跨域请求后台的处理程序--> <script src="http://www.test.com/cross/corss">

   ​