015 Javascript(152 - 172)

[A] 网络传输协议

1. 计算机网络

ISO 7层

通用 5层

通用5层：

第五层应用层 http/https 面向用户的软件

第四层传输层 TCP/UDP port(端口号)

第三层网络层 IP

第二层数据链路层数字信号(0/1)

第一层物理层物理信号(光信号，电信号)

2. TCP协议和UDP协议

　　TCP：面向连接的协议(快递，外卖)

　　　　一种面向连接的，可靠的，给予字节流的传输层通信协议。

　传输数据过程：

　　1. 建立连接三次握手

客户端：发起请求

服务端：收到请求，已准备好

客户端：好的(数据开始传输)

　　2. 传输数据

　　3. 断开连接四次挥手

客户端：传输完毕，请求断开

服务端：收到,准备

服务端：(断开连接),已断开

客户端：(断开连接),已断开

　　优点：

　　1. 安全

　　 2. 准确度非常高

　　缺点：

　　 1. 传输效率低

　　 2. 消耗资源

UDP协议：无连接协议(视频聊天，现场直播)

　　传输方式：直接传，不管是否接收到数据

　　优点：

　　1. 及时性非常高

　　2. 消耗资源少

　　缺点：

　　 1. 不安全

　　 2. 准确度非常低

　　 3. 经常丢包

[B] cookie详解

　　1. cookie概念：也叫会话跟踪技术

一次会话：从开始到结束的整个过程，全程跟踪记录客户端的状态(例如：是否登录，购车信息，是否已下载，

是否已点赞，视频播放进度等等)。

2. cookie特点：

1. 可以设置过期时间

2. 最大存储4KB，每一个域名下最多可以存储50条数据(不同浏览器有些许偏差)

【注】只能存储字符串，一般只存储重要信息，如登录，是否登录，购车信息，是否已下载，

是否已点赞，视频播放进度等等

cookie语法：

为键值对，键和值均可自定义

格式：name = value;[expires=date];[path=path];[domain=somewhere.com];[secure]

　　其中：name 键

　　　 value 值

　　【注】后面中括号的内容，为可选项

火狐支持本地加载的文件缓存cookie，谷歌浏览器值支持服务器加载文件缓存cookie

1. 设置cookie：

　　document.cookie = "username=xxx";

2. 获取 cookie:

　　 var a = document.cookie;

　　 // 返回字符串："username=xxx"

3. 中文编码和解码

cookie中存储中文会出现乱码情况，故需要响应的编码和解码

　　 encodeURIComponent 将中文编译成对应的字符

　　decodeURIComponent 将对应的字符编译成中文

4. 过期时间

　　expires: 过期日期

　　【注】系统会自动清除过期的cookie

　　 // 函数封装获取n天后的日期

                    function nDaysLater(n){
                        var d = new Date();
                        var today = d.getDate();
                        d.setDate(n + today);
                        return d;
                    }

　　// 快速获取过去时间 var = new Date(0); 返回值为1970年零时零点

示例：

　　document.cookie = "username=xxx;expires=" + nDaysLater(3);

　　清除网页cookie：将cookie时间设置为过去的某个时间，则系统会自动清除过期cookie

　　【注】在cookie设置的字符串中，首先出现的那一个键值对为cookie，后面的紧连着的才是属性键值对

5. path 限制访问路径

　　默认的path为加载当前.html文件的路径

　　【注】我们设置的cookie路径必须和加载当前.html文件的路径一致，

　　如果不一致，cookie可以成功设置，但是会访问失败

6. domain 限制访问域名

　　如果不去设置，默认加载当前.html文件的服务器域名/IP

　【注】若加载当前.html文件的域名和我们设置的域名不一致，则会导致设置cookie失败

7. secure 安全

　　若不设置secure，则设置cookie时，既可以用http协议设置，也可以用https协议设置

　　若设置了secure，则只能在https写一下设置cookie

　　　https证书认证协议，需要申请证书。

                    setCookie()
                        function setCookie(name, value, {expires, path, domain, secure}){
                            var cookieStr = encodeURIComponent(name + "=" + value);
                            if(expires){
                                cookieStr += ";expires" + "=" + nDaysLater(expires); 
                            }
                            if(path){
                                cookieStr += ";path" + path;
                            }
                            if(domain){
                                cookieStr += ";domain" + domain;
                            }
                            if(secure){
                                cookieStr += ";secure";
                            }
                            document.cookie = cookieStr;
                        }
                        function nDaysLater(n){
                            var d = new Date();
                            var today = d.getDate();
                            d.setDate(n + today);
                            return d;
                        }

View Code

　　　　2. 获取cookie　　getCookie()

                    getgetCookie()
                        function getCookie(name){
                            var cookieStr = decodeURIComponent(document.cookie);
                            var start = cookieStr.indexOf(name + "=");
                            if(start == -1){
                                return "该cookie值不存在！！！";
                            }else{
                                end = cookieStr.indexOf(";", start);
                                if(end == -1){
                                    end = cookieStr.length;
                                }
                            }
                                var str = cookieStr.substring(start, end);
                                var arr = cookieStr.split("=");
                                return arr[1];
                        }

View Code

　　　　3. 清除cookie　　removeCookie()

                    removeCookie()
                        function removeCookie(name){
                            document.cookie = encodeURIComponent(name) + ";expires=" + new Date(0);
                        }

View Code

[C] 闭包

满足以下特点的都叫闭包：

　　1. 函数嵌套函数

　　2. 内部函数使用外部函数的形参和变量

　　3. 被引用的形参和变量就不会被【垃圾回收机制】所回收

闭包的好处：

　　1. 使一个变量常住在内存中

　　2. 避免全局变量污染，尽量少声明全局变量

　　3. 可以生命私有成员

要求：1. 避免全局污染，2. 对变量a进行累加

解决：让变量a常驻内存 ==> 闭包

立即执行函数：

示例：

var show = function(){

alert("hello word");

}

show();

// 先声明函数，然后赋值给show，再调用show()，实现函数的调用

立即执行：

(show = function(){

alert("hello word");

})();

// 声明完函数后，立即就执行该函数

[D] gulp详解　

　　　　Gulp：

　　　　　　用自动化的构建工具，增强你的工作流程，gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间，创造更大的价值

　　　　　　gulp是给予node.js下的一个开发模块，需先安装node.js即可会用gulp

1. nodejs下载：

　　　　　　http://nodejs.cn/download/

2. 启动node.js

　　　　　　window系统：

　　　　　　　　windows键(开始键) => nodejs文件 => nodejs prompt

　　　　　　nodejs prompt操作：

　　　　　　　　node -v 查看安装的nodejs的版本

　　　　　　　　【拓展】nvm 自行查阅，自行安装

3. 安装nodejs，会同时安装npm

　　　　　　npm 管理第三方包的包管理器(下载源是国外的网站)

4. 安装cnpm 淘宝镜像

　　　　　　https://npm.taobao.org/

　　　　　　安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

5. cnpm下载一些数据，是从国内淘宝服务器上下载的数据

6. 安装gulp到本地

　　【注】windows不需注意该细节，苹果电脑的每一条命令前都必须加sudo(可能需要输入密码或指纹)

　　 <1> 全局安装gulp

　　　　安装指令： cnpm install gulp -g

　　　　查看版本： gulp -v

　　<2> 进入到想要开发项目的目录

　　　　【注】window是分磁盘的，若不是在c盘创建的文件夹，需要先切换盘符

　　　　D: +enter

　　　　 cd 目录路径

　　清屏：

　　　　window:cls 苹果/linux: clear

7. 初始化当前项目

　　cnpm init

　　【注】生成package.json的文件，存放你当前项目的一些配置信息

8. 在当前目录中安装gulp到本地

　　 cnpm install gulp@3.9.1 --save-dev

　　简化版指令：cnpm i gulp@3.9.1 -D

　　　　　　　　 --save 将这个文件安装到本地的文件夹

　　　　　　　　 -dev 将安装gulp的信息保存到package.json里面

9. 在本地创建一个gulpfile.js的文件，专门去给gulp编写任务的。

10. 在gulpfile.js中编写任务，需要在控制台通过

　　控住台输入：gulp 任务名运行你编号的任务名

11. 给gulp添加插件

　　https://gulpjs.com/plugins/

　　使用第三方插件的步骤：

　　　　　　　　commonJS规范

　　　　<1>先下载插件到本地

　　　　　　 cnpm install 插件名 --save-dev

　　　　　　cnpm i 插件名 -D

　　　　<2>通过require() 引入文件

　　　　<3> 查阅插件的用法

12. 当项目难开发完成后，需打包发送给被人

　　打包内容：

　　　　1. 文件内容

　　　　 2. package.json文件

　　　　 3. 不再需要gulp的插件包 => node_models文件夹里面的内容

　　接受步骤：

　　　　 1. 打开控制台nodejs prompt

　　　　 2. 定位到接收到的package.json的文件夹

　　　　 3. 在控制台输入命令：cnpm install

　　　　4. 控制台会根据package.json中记录的信息，依次下载所需要的gulp插件

【重点】

　　 1. JQuery编写的代码最好不要压缩和合并

　　 2. 最好在编写代码时，使用两个及以上的屏幕，开发效率会更高

[E] 模块化开发

[F] scss语法

　　1. scss预处理器定义了一种新的语言，用来将.scss的文件编译成.css文件

　　 2. scss预处理器语言已经非常成熟，目前有大量的css预处理语言

　　用的最多的两种：

　　　　 Sass(SCSS) 和 LESS

　　还有：

　　　　Turbine 　　 Switch CSS

　　　　Stylus 　　 CSS Cacheer

　　　　　　　 DT CSS

　　3. Sass和SCSS的区别

　　sass 较为古老的版本

　　特点：

　　1. 不能有大括号

　　 2. 不能有分号

　　scss 用的较广的版本

　　　　　特点

　　1. 可以有大括号

　　 2. 可以有分号

　　 4. sass变量声明

　　1. 普通变量

　　　　【格式】: 以美元符号开头加上变量名的方法

　　 $ + 变量名: 变量值

　　如：$wid: 100px, $hei: 200px

　　　　普通变量按照自上而下执行，若有同名的变量，则以最后一个为准

　　　　如： $a = 10px;

　　　　$a = 20px;

　　　　 $a = 30px;

　　　　则$a最终的结果为：30px;

　　2. 默认变量

　　　　【格式】: 以美元符号开头加上变量名的方法

　　 $ + 变量名: 变量值 + !default

　　如：$wid: 100px !default, $hei: 200px !default

　　　　默认变量以非默认值为准(多个非默认值存在时，以最后一个为准)

　　　　如：$a = 10px;

　　　　 $a = 20px !default;

　　　　则$a最终的结果为：20px;

　　　　3. 全局变量

　　　　在最外层写的变量即为全局变量

　　 4. 局部变量

　　　　在css样式的{}里写的则为局部变量，在全局访问不到

　　 5. 特殊变量

　　　　【格式】：#{表达式/变量}; 进行字符串拼接

　　　　类似于js中的ECMA6的${}

　　6. sass嵌套

　　　　　　共有选择器嵌套和属性嵌套两种

　　选择器嵌套：

　　　　譬如嵌套的选择器：

　　　　　　 div1{

　　　　　　width: 100px;

　　　　　　.box{

　　　　　　 border: solid black 1px;

　　　　　　 }

　　　　可以实现:

　　　　　　div1{ width: 100px;}

　　　　　　div1 .box{border: solid black 1px;}

　　　　　　的样式设置

　　属性选择器：(不太实用，很少用)

　　　　譬如嵌套的属性：

　　　　　　div1{

　　　　　　 border: {

　　　　　　 left: 100px;

　　　　　　 width:2px;

　　　　　　 color: solid;

　　　　　　};

　　　　　　 }

　　　　可以实现：

　　　　　　 div1{

　　　　　　 border-left: 100px;

　　　　　　 border-width: 2px;

　　　　　　 border-color: solid;

　　　　　　 }

　　5. scss语法

　　1. 混合

　　　　类似于c语言的宏定义

　　　　类似于代码块(不是函数)

　　写混合：

　　@mixin 混合名{样式}

　　如：

　　 @mixin center-block{

　　 margin-top: 20px;

　　 margin-left: 15px;

　　 red;

　　 }

　　调用混合：

　　@include 混合名;

　　如：

　　 div2{

　　 @include center-block;

　　 padding: 10px;

　　 }

　　带参数的混合：

　　　　调用时不传入参数，则使用默认值

　　　　可以使用$a: 10px的方式给部分参数传参

　　@mixin center-block($a: 10px, $b: red solid 1px){

　　 margin-top: $a;

　　 margin-left: 15px;

　　 border: $b;

　　 }

　　　　　　div2{

　　　　　　　　@include center-block(20px, black soild 2px);

　　　　　　　　padding: 10px;

　　　　　　}

　　　　 2. 继承

　　　　【语法】： @extend 标签名;

　　如：

　　.btn{

　　 width: 10px;

　　 color: red;

　　 }

　　 .btn-primary{

　　@extend .btn;

　　 height: 20px;

　　 }

　　实现：

　　 .btn, .btn-primary {

　　 width: 10px;

　　 color: red;

　　　　　　 }

　　 .btn-primary {

　　 height: 20px;

　　　　　　 }

　　　　3. 引入公共样式

　　　　封装一个.scss文件，然后可以在多个文件中调用

　　标准：_base.scss

　　引入：@import "base"

　　　　如：在一个名为_base.scss的文件中写入

　　　　padding: 0px;

　　　　margin: 0px;

　　　　 }

　　　　@mixin center-block($a: 10px, $b: red solid 1px){

　　　　 margin-top: $a;

　　　　 margin-left: 15px;

　　　　 border: $b;

　　　　}

　　　　在新的一个prim.scss文件中写入

　　　　　　　　@import "base"

　　　 #dd{

　　　　 @include center-block;

　　　}

　　　　　相当于在该prim.scss文件中写入了：

　　　　　　padding: 0px;

　　　　　　margin: 0px;

　　　　　　 }

　　　　　　#dd{

　　　　　　margin-top: $a;

　　　　　　 margin-left: 15px;

　　　　　　 border: $b;

　　　　　　 }

　　6. scss编程语法

　　1. 注释

　　　　 1. 单行注释

　　　　【格式】:

　　　　 // 注释内容

　　　　2. 多行注释多行注释是不会出现在压缩版本中

　　　　【格式】：

　　　　注释内容

　　　　3. 强制注释强制注释会保存在任何版本中

　　　　【格式】：

　　　　 /*!

　　　　注释内容

　　2. 数据类型

　　　　1. 数字(如： 1.2, 23, 20px)

　　　　 2. 字符串(如："foo", 'te', baz)

　　　　 3. 颜色(如：blue, #04a3f9, rgba(123,212,220,0.8))

　　　　 4. 布尔值(如: true, false)

　　　　 5. 空值(如: null)

　　　　 6. 列表(list) 用空格或逗号分开(如：c, 2.3, 1em)

　　　　 7. 映射(如： (k1: v1, k2: v2))

　　3. scss的控制指令

　　　　1. 条件指令：

　　　　 $a: dark;

　　　　@if $a == dark{

　　　　 black;

　　　　}@else if $a == light{

　　　　 white;

　　　　 }else{

　　　　 blue;

　　　　 }

　　2. 循环指令 @for

　　　　 $end: 12;

　　　　@for $i from 1 through $end{

　　　　 .col-lg-#{$i}{

　　　　 width: 100px * 12 * $i;

　　　　 }

　　3. 循环指令 @each

　　 @each

　　4. 循环指令 @while

　　 @while

　　 5. 用户自定义函数

　　　　 $colors:(light: white, dark: black)

　　　　 @function($key){

　　　　 return map-get();

　　 }

[G] 分布式版本控制系统 git

git：全称是分布式版本控制系统

1. git下载与安装：

　　　　　　　　https://git-scm.com

　　　　　　vscode (安装git插件)

　　　　　　打开终端进行操作

2. git启动

　　window键即可打开(window系统)

　　git bash 支持Linux命令的控制台(常用)

　　git CMD 支持windows命令的控制台

　　 git GUI git可视化界面

　　苹果电脑自带git

3. github官网注册注册一个账号

4. git操作步骤

　　1. 打开git CMD(window系统)

　　2. cd 路径进入到当前目录中

　　3. 在本地配置 => 本地仓库要提交到github远程仓库的地址和名字

　　在控制台输入：

　　　　git config --global user.name "用户名" 填写注册的用户名/昵称

　　　　git config --global user.eamil "邮箱" 填写注册时的邮箱

　　　　【注】git控制台中，没有消息就是好消息

　　4. 创建github端的远程仓库

　　　　 github网站上：+ => new repository 常见远程仓库

　　 5. 本地初始化会本地创建一个文件暂存区

　　　　git init

　　　　初始化之后会在本地创建一个.git文件，文件存储了当前信那个木的所有版本信息

　　6. 代码编写

　　　　在当前目录下创建.html文件和.md文件

　　7. 数据提交工作区 => 暂存区

　　　　 git add 文件名提交指定文件

　　　　git add * 提交所有文件

　　　　git commit -m "此次提交的描述" 告诉仓库此次提交的备注

　　 8. 指示指令

　　　　查看当前工作区的状态

　　　　　　 git status

　　　　从缓存区恢复文件到工作区

　　　　　　git checkout 文件名

　　　　查看工作区和缓存区版本的区别

　　　　　　 git diff

　　　　清屏操作

　　　　　　 cls

　　　　查看已经提交的历史版本

　　　　　　git log

　　　　恢复文件到一定的版本

　　　　　　 git reset --hard HEAD^ 退回到上一个版本

　　　　　　git reset --hard HEAD^^ 退回两个版本

　　　　　　git reset --hard 版本号退回到指定的版本

　　 9. 数据提交暂存区 => github远程仓库

　　　　在数据提交之前，需要github对本电脑授权，即要先生成ssh密匙

　　　　 1. 获取ssh密匙指令：

　　　　　　 ssh-keygen -t rsa -C "你的github的邮箱"

　　　　2. 查找生成的密匙(window操作系统下)：

　　　　　　我的电脑 => 用户 => 用户名文件夹 => .ssh文件夹(隐藏文件) => id_rsa.pub(存有密匙)

　　　　　　直接拖动文件到vscode显示区即可打开

　　　　3. 在github账户去配置密匙

　　　　　　 github => setting => SSH and GPG keys => New SSH key

　　　　　　将密匙复制到相应区域，并取名

　　　　4. 暂存区 => github远程仓库提交

　　　　　　确定提交地址：

　　　　　　git remote add origin 远程仓库地址(在github上复制即可)

　　　　　　如：

　　　　　　git remote add origin https://github.com/Carrey1014/testDemo.git

　　　　　　确定提交：

　　　　　　git push -u origin master

　　　　　　　　【注】提交过程可能需要填写用户名和密码

　　　　　　　　首次提交需要上述的繁琐步骤

　　　　　　再次提交后只需：

　　　　　　git add 文件名提交指定文件

　　　　　　git commit -m "此次提交的描述"

　　　　　　 git push

　　　　　　　　三步即可(可能需要输入密码)

　　10. 某B同学来了，需要接着A同学的工作继续进行

　　　　则需要先从github远程仓库将A同学提交的数据下载到本地

　　　　　　1. 打开git CMD控制台

　　　　　　2. 在控制台定位到B同学的工作目录下

　　　　　　 3. 下载A同学提交的内容

　　　　　　　　指令：

　　　　　　　　git clone 仓库中A同学所提交的文件所在地址的URL

　　　　　　　　获取A同学文件URL的方法：

　　　　　　　　远程github账号 => 找到所提交的文件位置 => Code => 宝贝URL即可

　　11. A,B两个同学可能交替着进行同一个工作，B同学接着A同学的项目进行之后，远程仓库的内容会被更新

　　　　此时，A同学本地的文件会落后于远程仓库，故A同学在接着进行工作之前，需要将本地文件进行更新

　　　　　　指令：

　　　　　　　　 git pull

　　　　　　　　实现把远程仓库的代码更新到本地(即实现同步)

posted @ 2020-07-04 14:49 CarreyB 阅读(138) 评论(0) 编辑收藏举报

刷新页面返回顶部

Carrrey

015 Javascript(152 - 172)

公告