【原生】---回忆---思维***链接---知识点回顾及思考

悠悠 2021-10-29 20:46 140阅读 0赞

\*\*\*

1、什么是javascript ？ 
    2、常量和变量      
    3、标识符的命名规范    驼峰式  匈牙利  
    4、类型
    基本类型  字符  数值  布尔
    引用类型 object
    特殊类型 ：   undefined  null  
    5、运算符和表达式
    算术
    一元 ++  -- 
    i++ 和 ++i 区别 ：
    二元 +  100+"90"   100-"90"
    赋值 =  +=
    关系   ==  ===
    条件 ?  :
    逻辑 &&  ||  !

\---

短路现象 ： 真 || 不执行        假 && 不执行 
    类型转换 ： 自动转换 isNaN("23")     强制转换    
    选择结构   
    if
    if else if
    switch

\----

三大结构
    顺序结构
        运算符和表达式
        五类  
    选择结构
        控制语句 ：
        if else
        switch
    循环结构
        for 
        while    
        do..while 
        break 和 continue

\---

1、函数  
    2、函数定义 
    function 函数名(){ .... }
    var fn = function(){...}
    3、 函数参数 
    4、返回值

\---

运算符和表达式  
    算术  
    关系 ：主要应用与布尔环境 （表示判断  if()   while()   ）
    逻辑 : 与关系连用
    条件 ： ？  :    布尔环境 
    赋值 :  =  
    
    选择结构
    if  switch()
       
    循环结构 ： 
        while    
        do..while
        for
         break 和 continue
    函数：
        函数参数
        函数返回值
        作用域 ：
            全局和局部   
        function fn(num){
            num = 90;
        }
        fn()
        alert( num )
    
    
        alert( fn )
        var fn = 90;
        function fn(){ ... }
        函数和事件的关系

\-----

对象 ：  
    对象类型和基本类型区别 ：  
        对象中存的数据是批量的    基本类型存一个数据
        传值时 ：对象传地址   基本类型传数值
        对象类型都有属性和方法  而基本类型没有属性和方法 
    构造函数 ： Array  Object 
    数组 ： 
    定义方式 ：
        var arr = []
        var arr = new Array()
    数组遍历 ： 
        for..in  
    数组的操作方法 ：
        push pop  shift unshift splice   
        reverse()  
        join()  concat()      slice()
    栈和堆 ：

\---

去重算法 ： 定义一个空数组  判断原数组中的某个数在空数组中是否存在  不存在就存入到空数组中   
    排序算法 ： 冒泡 和 选择  sort(function(a,b){}) 排序方法 
    严格模式 ：  "use strict"
    数组的扩展方法 ：      
        forEach  map   indexOf  filter reduce   some  every    
    字符串操作方法：
    查 ： charAt  charCodeAt  String.fromCharCode
    拆 ： split()   
    转 ： toLowerCase()  upper
    替 ： replace()  
    截 ： substr  substring slice    
    复制 ： repeat 
    连接 ：concat  
    去两边空格 ：trim 
    arr.forEach(function(item,index,array){  操作内容 } ）
    
    arr.filter(function(item,index,array){  操作内容   })

arr.map(function(item,index,array)\{

\})

**reduce()  ** 归并

arr.reduce(function(pre,next)\{

pre 表示上一次操作返回的结果  如果第二个参数有数据，prev的初始值为第二个参数

next 表示 下一个数  next 表示数组中的每一个数据

\},第二个参数)

\---

1、数学对象  
    获取任意区间的随机整数值 
    Math.round( Math.random()*(max-min) + min );
    2、日期对象
    日期定义 ：
    当前系统时间   new Date(  )
    自定义时间  new Date( "" )
    
    获取时间 ：get....
    时间差 ： 
     getTime()  
    时间格式的设置 ：
    设置3天后的时间
    var now = new Date();
    now.setDate( now .getDate() + 3 );   setDate() 改变原来的时间
    alert( now );
    
    定时器 ： 让时间动起来

\---

BOM对象模型：
    浏览器对象模型 
    window--location  document  history  navigator  screen
    window对象常见的方法 ： 
    两个定时器 ： setInterval  setTimeout 
    open()
    window对象特点 ：     
    location对象 
    document对象 ：
    操作样式、属性、内容
    非行内样式值获取 ：getComputedStyle    .style.样式

\---

1、内置对象
    Array
        数组的操作方法 ：
            push  pop   shift unshift   splice  slice  reverse   concat  join  sort 
            扩展方法 ： forEach  map  filter   indexOf  reduce  
        数组去重
        数组排序   
    String
        操作方法 ：
            charAt  charCodeAt   String.fromCharCode  
            indexOf   lastIndexOf
            substr  substring slice
            concat
            toLowerCase  toUpperCase
            split 
            
    Math :
        随机整数获取   
        取整方法 ：ceil floor round
    Date
        日期定义  获取日期  设置日期时间格式
    
    BOM  和 DOM
    BOM ：浏览器对象模型 window --- location  history  document  navigator screen
    window对象的特点 ： setTimeout  setInterval   open()    alert confirm  prompt
    document对象 :  
    
    DOM :  文档对象模型
    DOM操作:
    增
        createElement
        appendChild   insertBefore
    删
        remove   removeChild
    改
        改样式
            obj.style.样式
            obj.className
            obj.style.cssText = "color:red";
        改属性
            非自定义属性：  obj.属性
            自定义属性  ：　obj.getAttribute() / setAttribute()
        改内容
            obj.innerHTML / innerText / value
    查
        获取元素方法
        getElementBy....
        querySelector...

\---

1、事件对象 
    2、对象的定义 ： e || event
    3、兼容 
    4、鼠标事件对象属性  坐标属性
    pageX/Y 
    clientX/Y    x/y  
    offsetX/Y
    screenX/Y
    5、button
    6、获取键盘按键值  keyCode  || which
    功能键 ：    
    7、事件流 ： 
    冒泡
    捕获
    8、事件监听 addEventListener   onclick 区别

\---

1、事件委托 
    好处 ： 提高程序执行效率  动态添加元素添加事件
    2、实现 ： 事件源获取、判断  
    3、offset家族属性 ：
       offsetWidth/height
        clientWidth / height 
        获取实际宽度 ： 对象.style.width   非行内 ： 
    offsetLeft/offsetTop
    4、json 
    对象.键     [键]
    for..in 遍历json
    
    5、onmouseenter 和 onmouseover  
    6、onload

\--

1、事件

事件对象的创建

事件中的兼容 ：  事件   事件冒泡  取消浏览器的默认行为....

事件冒泡和事件捕获 ：

事件的三个过程 :事件捕获  事件目标阶段  冒泡

事件监听:

事件委托:

鼠标事件对象的坐标属性 ：offsetX

2、json

定义 \{  \}

取值 json\[""\] json.键

3、拖拽

onmousedown  onmousemove   onmouseup

4、正则

单字符 .   \\   |   ^    $       组合  \\d    \\D    \\w  \\s    量词 +  ?　\*   括号 \{\}   \[\]  ()

\---

正则中的几个操作方法：
    test()    exec()  正则的方法  可以操作正则
    
    可以操作正则的字符串方法：
    search   match  replace 
    
    es6中的常见语法格式 ： 
    let  块级作用域  
    const 定以后值不可以改变
    
    改变this指向 ： apply  call  bind
    
    for...of  
    
    字符串模板  ``
    
    箭头函数    不支持bind    
    
    解构赋值   
    
    set集合   自动去重  
    map集合
    
    class定义的构造函数
    
    Symbol类型   generator函数   *
    
    Array.from()    Array.of()    Object.assign()

\---

事件对象：
    鼠标事件对象的属性：
    e.offsetX offsetY
    pageX/clientX
    兼容问题 ：
        事件对象创建 ：  e || event
        阻止事件冒泡 
        阻止浏览器的默认行为 preventDefault
        事件源获取 ： target || srcElement
        键盘按键值 ： keyCode || which
    事件冒泡和事件捕获
    事件监听 addEventListener  和 不同添加事件
    addEventListener("click") 和 obj.onclick = function(){}  区别：
    事件委托
        
    json对象：定义和获取
     
    拖拽 ：
       
    scroll家族属性: 获取页面滚走距离
    document.documentElement.scrollTop || document.body.scrollTop
    或者
    widnow.scrollY
    offset家族属性 :
    obj.offsetLeft/offsetTop/Width/Height
    正则:
    定义 ：
    var reg = /^$/  或 var reg = new RegExp("\\w",修饰符"ig");
    特殊字符 ： 
    .   \   |    ^ $  + ....
    下面哪些是正则对象的方法 ：test   exec
    可以操作正则 ：  test   exec   replace seach  match
    
    es6:
       let 块级作用域 {  }   
       const 常量定义的关键字，如果变量在执行的过程中不会发生变化，也可以使用const    const btn = document.getElementById()  
       箭头函数
       解构赋值
        改变this指向的方法：
        将伪数组转数组：
    dom操作高级
        匀速--缓冲--多物体--链式--完美
        var timer = null;
        function move(obj,json,cb){
            clearInterval( obj.timer ) 
            obj.timer = setInterval( ()=>{
              var flag = true;
              for( var attr in json ){
                var current = parseInt( getStyle( obj,attr ) );
                //判断透明度
                var speed = (json[attr]- current)/10;
                speed = speed > 0 ? Math.ceil( speed ) : Math.floor(speed);
                if( json[attr]!= current ){
                       flag = false;
                } 
                
                //判断透明度
                 obj.style[attr] = current + speed + "px"
            }
            },30 )
    
            if(flag){
                clearInterval(obj.timer);
                        if( cb ){
                            cb();
    
                        }
            }
        }
    
        //获取一个元素实际样式值
        function getStyle(obj,attr){
    
        }

\---

localStorage ： 
    存数据 ： setItem()
    取数据 ： getItem（）
    删数据 ： removeItem(  )
    清空 ： clear()
    localStorage中只能存字符串格式的数据 
    对象转字符串 ：　JSON.stringify()   字符串转对象 ： JSON.parse()

\---

1、php文件在apache服务器下运行  文件扩展名 ： .php
    2、php数组 ： 索引数组和关联数组 数组定义: array()   
    3、php数组转成对象 ： json_encode()
    4、php输出 ：  
        echo   输出多个字符串   速度快 没有返回值
        print  输出一个字符串  返回值为1
        print_r()  用于打印输出  $arr = array()  print_r($arr);
    5、php文件如何接收客户端请求的数据  
        $_GET   $_POST  $_REQUEST
    6、mysql数据库   
    数据的增删改查
    表中一般有一个主键 并且是自增的
    主键特点 ： 不重复  非空

\---

客户端如何向服务器发送数据:
    1、表单传值  name属性
    2、超链接 路径传值
    
    服务器如何接收客户端发送的数据:
    $_GET  $_POST $_REQUEST

\---

1、ajax的作用
    2、从客户端向服务器发送数据方式
    方式一 ： 表单的name传值
    方式二 ： 超链接路径传值
    方式三 ： 使用ajax向服务器传递数据
    方式四 :  使用jsonp向服务器发送数据
    
    3、ajax如何和服务器交互
    创建ajax对象 new XMLHttpRequest()
    和服务器建立连接 open(get/post , url , true)
    发送请求 send()
    响应结果 ：  onreadystatechange   
    状态值readyState
    状态码status
    4、get和post区别
    5、同步和异步区别
    6、缓存问题
    路径上加一个随机数
    xhr.setRequestHeader("if-modified-since","0")
    7、接口

\---

1、ajax请求服务器的数据：
    2、同源策略
    3、jsonp跨域原理
    4、jsonp接口和ajax接口区别
    5、get和post区别:
    6、ajax处理缓存问题
    
    function ajaxGet(  url , cb  ){
        当服务器处理成功后，调用回调函数，将服务器的结果同过参数传回去
    }
    
    function ajaxGet(opt){ opt代表一个对象
        //定义一个对象  默认值  如果用户不传递某个参数  就按照默认值执行
        var default = {
            type : "get",
            async : true,
            data :{}
        }
    
        //将参数opt对象和default默认值两个对象进行合并  如果用户传递了参数，就按照用户传递的参数执行，否则就按照默认值执行
        var init = Object.assign(default , opt);
    
        //data：  {"uname":"jack","upwd":123}  url = 路径+ ? + 随机数&uname=jack&upwd=123
            //将向服务器发送的数据 转成字符串的格式
            var params = "";
        for( var key in init.data ){
            params += "&"+key + "=" + init.data[key];
        }
    
        //拼接url
        if(init.type=="get"){
            var url = init.url + "?_htb=" + new Date().getTime() + params;
        }
    
        //开始ajax请求
        var xhr = new XMLHttpRequest();
        xhr.open( init.type , url , init.async );
        xhr.send();
    
        xhr.onreadystatechange = function(){
            if( xhr.readyState == 4 && xhr.status == 200 ){
                init.success( xhr.responseText )
            }
        }
    }
    
    
    ajaxGet({
        url : "",
        data : {  }//以对象的形式传递data
        success : function(res){
            //处理服务器返回的结果
        }
    })
    7、promise对象 解决异步问题
    三个状态     对象的特点

\---

ajax作用
    客户端向服务器发送数据：表单name   超链接  ajax   jsonp
    ajax如何请求服务器数据
    ajax请求接口
    promise对象
    同源策略
    跨域 ：前端跨域ｊｓｏｎｐ　　　　后端跨域cors    服务器代理

\---

对象的定义
    1、{}   new Object()  Object.defineProperty()
    2、工厂模式
        function Animal(){
            返回一个对象
        }
       通过函数调用 创建对象  
    3、构造函数
    function Animal(name){
        this.name = name;实例属性
        this.run = function(){} 实例方法
    }
    a=new Animal();
    缺点 : 多个同类对象携带的方法 空间不共享
    4、原型方法
    Animal.prototype.run = function(){}
    5、原型对象
    6、原型链
    7、设计模式

\---

继承
    1、构造函数继承   call  apply  bind
    2、原型链继承       子类.prototype = new 父类()
    3、混合继承 构造函数+原型链
    4、es6继承  extends
    5、Object.create()
    闭包
    被嵌套的函数

\---

1、jquery概念：是js的一个类库
    2、jquery选择器
    基本
    层级 
    过滤查找
    属性[  ]
    表单  :text   :button  :password   :checkbox:checked  :selected 被选中的下拉列表
    3、方法  
    样式操作  css()   addClass()  removeClass()  toggleClass()  hasClass()
    属性操作 attr()  prop()
    内容操作 html()  text()  val()
    文档操作 append/To   after/insertAfter  prepend/To  empty remove detach wrap replaceWidth/All

\---

动画：
    基本动画 ： show  hide  toggle
    淡入淡出 :  fadeIn   fadeOut  fadeToggle
    上下滑动：  slideDown  slideUp 
    自定义动画 ：animate 
    动画延迟 ： delay 
    stop
    事件 ： 
    jquery页面加载
    jquery事件绑定：bind   on   delegate
    取消绑定       unbind  off   undelegate
    事件翻转 ：hover
    绑定一次 ： one

\---

jquery选择器:
    基本 ：  id  class   标签  组合
    层级选择器 ：  空格   >     +    ~   
    查找过滤 ：
        first  last   eq   next  nextAll    prev   prevAll  siblings   children   find  filter
    属性选择器 ：[]  input[type=text]
    内容选择器 ：  :contains     :has
    表单选择器 ：  :text   :radio:checked
    dom操作 ：
    属性 attr()  prop() 
    内容  val()    html()   text()  
    样式  css  addClass   removeClass   hasClass   toggleClass
    文档 
    动画：
    事件:
    事件绑定 ：
        delegate  on
    ajax
    插件
    自定义插件
    使用第三方插件   分页插件   cookie插件

\---

列表显示
    添加商品
    购物车商品展示
    商品数量增加、减少  
    商品删除
    结算
    全选
    商品详情页
    注册登录
    商品类型展示 选项卡

\---

git:  分布式
    svn : 集中式
    初始化一个项目仓库  git init   版本库 
    添加到暂存区   git add . / --all  /  *  /  -A  批量添加
    一次添加一个  git add 文件名
    提交到服务器 git commit -m"日志"
    查看日志信息  git  log
    回退到某个操作  git reset --hard 前六位编码
    恢复手动删除的文件  git checkout 提交码  文件名
    创建分支  git branch 分支名
    查看分支 git branch 
    合并分支 git merge 分支名
    删除分支 git branch -d 分支名
    切换分支 git checkout 分支名
    创建并切换 git checkout -b 分支名
    github上某个仓库的路径   域名/用户名/项目名.git
    本地项目推送到远端github上 ： git  push -v origin master
    将远端项目克隆到本地 ： git clone 仓库路径
    远端项目同步到本地 ：克隆　　或　　git pull origin master
    
    sass ： 
    定义变量  $
    sass混合 函数定义
    类的继承
    .pub{   引入类  @extend  .pub;
    
    }
    @mixin定义  调用 @include 导入
    
    sass嵌套

\---

什么nodejs?    是javascript的一个运行环境
    npm ： npm是node的包管理工具 也是一个命令 也是一个网站
    使用npm下载模块 和 卸载模块 
    安装 模块 :   npm  i 包名 --save
    卸载模块 ： npm uninstall 包名 --save
    nodejs的模块化是属于  commonjs规范
    模块种类：核心模块  第三方模块  自定义模块--模块暴露  module.exports = {  }
    使用node搭建服务器 路由操作

转载于:https://www.cnblogs.com/yuanjili666/p/11350441.html