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编辑  收藏  举报