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

***

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搭建服务器 路由操作