前端总结
学习了 微信小程序 虽然第一次学 但是我感觉比vue还要好理解一些
1.导航栏标题
与iOS开发很相似，小程序的导航栏也可以全局设置一下，在公共文件app.json中设置了
2.子页面调用公共js对象以便调用其方法
子页面想调用共公js的方法，需先在子页面js中先实例化app
3.嵌套循环时候，最好重命名下list和index
如果是嵌套循环，很容易出现多个list和index，例如表视图一样，所以在小程序中可以重命名 list 和index 方法为：wx:for-index='重命名' wx:for-list="重命名"
4.善用公共模板
在APP开发中，UI复用是一个很好的手段，在小程序上就是模板template。
在逛小程序联盟的时候发现了一个大湿总结的比我好，搬过来一下。
5.小程序的尺寸单位rpx
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。
6.小程序中用html、css
小程序中的选择器跟css的一样.
7.事件总结/冒泡事件
小程序的事件主要有：
touchtab 点击事件
touchstart 开始滑动
touchmove 滑动中
touchend 滑动结束
touchcancel 滑动中断
小程序中的wxml中绑定事件有两种：以touchtab为例 ，在wxml中必须有bind/catch不然无法实现上述事件
bindtouchtab和catchtouchtab bind的不会阻止事件冒泡（元素最里层到最外层函数执行），catch会阻止冒泡，只是冒泡到当前层结束
如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置，查看滑动位置也可以通过touchstart和和touchend的clientx/y获取
8.点击更换图片
9.锚点定位
10.调用工具js文件/utils文件中的函数/变量
在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：
1：在utils被调用的js文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }；
2：在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址")； 可以输出一下object就能看到被调用的方法了；
11.后台交互/wx.request({})方法/渲染页面方法 解析
小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})
12.scroll-view用法
如果屏幕中某元素的内容超过此元素的高度，可设置元素为scroll-view 为滚动状态元素，这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果；
scroll-view标签的主要属性分为以下几种：
scroll-x/y='true/false'----允许横向/纵向滚动
scroll-top/left='50'--设置滚动条出现的位置
bindscroll='' 滚动中触发的函数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscrolltoupper='scrolltoupper' 滚动到顶部/左边出发的函数
scrolltoupper
bindscrolltolower='scrolltolower' 滚动到底部/右边出发的函数
scrolltolower
upper-threshold='50' 距离顶部/左边多远时触发scrolltoupper函数
lower-threshold='50' 距离底部/右边多远时触发
scrolltolower 函数
scroll-into-view=‘id名字.这个是用来设置此元素的某个子元素出现在最上方，id的名字为此子元素的id
13.广告轮播
微信小程序广告轮播元素 图片所在元素/swiper-item>
其中属性有：
autoplay:true,是否自动播放
autoplaytxt:"停止自动播放",
indicatorDots: true,指示点
indicator-color："white",//指示点颜色 暂未启动
indicator-active-color："red",//当前选中的指示点颜色暂未启动
indicatorDotstxt:"隐藏指示灯",
interval: 1000,//图片切换间隔时间
duration: 500,//每个图片滑动速度,
ircular:true,//是否采用衔接滑动
current:3,//初始化时第一个显示的图片 下标值（从0）index
14.提示框
15.数据缓存
第二周vue总结：
检测是否是数组：
ES3检测是否是数组：
Object.prototype.toString.call(要判断的变量)
ES5检测是否是数组：
Array.isArray()
数组转字符串：join("分隔符")
字符串转换数组：split("分隔符")
js对象转换成js字符串：stringify()
js字符串转换成js对象：parse()
路由懒加载：const 组件名=() => import('组件路径');
ue代理:
一、跨域产生的原因：因为ajax有一个同源策略，但咱们调用的接口来自于第三方网站，那这里必须跨域
二、什么情况下会产生跨域：
协议名://二级域名.一级域名.类型:端口号/目录1/文件名?参数1=值&参数2=值2&参数3=值3
1.协议不同
2.端口不同
3.主域不同
4.主域相同，子域不同
5.域名和ip
三、跨域解决方案
jsonp：前端+后端
CORS:服务端 http://www.ruanyifeng.com/blog/2016/04/cors.html
代理（服务端代理，客户端代理）
后端jsonp处理：
第一步：后端接收callback
例如： $callback=$_GET['callback'];
第二步：如果用jsonp方式，返回数据，应该返回函数调用形式，函数调用内部的参数就是你要的json
例如： echo $callback."(".$json.")";
axios:不支持json
获取元素：
querySelector() 只获取匹配第一个dom元素 兼容：IE8+
querySelectorAll（） 获取匹配的一个dom列表 兼容：IE8+
清除ajax缓存：在url地址后面添加随机数 例如：?random=new Date().getTime()
解决跨域方法：jsonp,代理,cors
jsonp实现步骤：
前端实现：
jsonp实现原理：动态创建script标签 ，因为script中的src有跨域能力
第一步：动态创建script标签，并添加callback参数
第二步：要创建callback函数 例如：getdata
CORS跨域：http://www.ruanyifeng.com/blog/2016/04/cors.html
php 实现的cors跨域：header('Access-Control-Allow-Origin: *');
缺点:只支持IE10+
优点：
1.前端无需改代码，
2.支持所有请求方式 包括：post,delete,put,get
路由的钩子：（即导航守卫）
1.全局的
2.单个路由独享的
3.组件级的
组件通讯
一、组件：组件是可复用的 Vue 实例
二、创建组件：
1.全局组件
Vue.component('my-component-name', {
// ... 选项 ...
})
三、组件通讯
父传子:
1.创建两个组件A.vue和B.vue，并在A.vue中引入B.vue，并注册
2.在A.vue引入的子组件自身添加要传递的属性
子传父
1. Event Bus:通过一个空的vue（即桥梁）实现兄弟之间数据传递
第一步：创建两个兄弟组件并引入到其他组件中 例如：son1,son2
第二步：创建一个空的vue 例如：bus.js
第三步：分别在两个兄弟组件中引入bus.js
第四步：例如：son1数据发送给son2,在son1通过触发一个事件响应来派发
第五步：在生命周期钩子上监听son1派发过来的事件 $on
子传父：主要通过事件派发实现，具体通过$emit实现
派发事件：$emit()
接收事件：@事件名戒v-on
vueX
Vuex：是一个集中式状态管理工具，相当于react中的 redux
1） 主要解决的问题：大中型项目中复杂组件通讯问题
2） vuex操作流程：
dispatch commit
流程图：： vue组件---------------->actions------------>mutations------->state-------->vue组件更新
3 ）vuex的重要概念：
state:要保存的状态
mutations:是最终改变状态的方法集，mutations中的代码是同步执行的 actions:
4）使用步骤：
第一步：先安装vuex
npm install vuex --save
第二步：在src创建一个store目录，用来存放vuex相关文件
第三步：在store目录先创建一个index.js文件，做为vuex入口文件
第四步：在store目录的index.js中，写入下面的内容
vue的事件修饰符：
.stop：阻止冒泡
.prevent：阻止默认行为
.capture
. self
.once：只触发一次
.passive:.passive 修饰符尤其能够提升移动端的性能。
CommonJS:属于服务端规范，产生物是node.js
AMD,CMD:浏览器规范，属于异步规范
AMD:Async Module Document,产出物：require.js
CMD:comon mudle Document,产生物：sea.js
vue钩子：
1.生命周期钩子:
创建：beforeCreate,created(创建后，通常用于获取后台数据)
挂载：beforeMount,(dom加载后，通常用于对页面dom操作时)
更新：beforeUpate,updated
销毁：beforeDestroy,destroyed
javascript中的深拷贝和浅拷贝？
https://www.zhihu.com/question/23031215
js对象转换字符串：JSON.stringify(要转换的对象)
json字符串转换成js对象:JSON.parse(要转换的字符串)
json：即是一种数据传输格式
json
对象，数组，对象和数组混合
闭包
1 概念：可以是外部变量访问内部变量，函数套函数。
闭包就是能够读取其他函数内部变量的函数
2用途：可以在写组件和面向对象的时候用到等
3 优点：可以定义多个变量，安全性较高，
4缺点：定义多变量，会导致内存较大，容易泄露，不容易清除，可能会影响浏览器的性能问题等
5注意点：
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
Mock：：：：
一、 Mock数据:实现前端分离开发，在后端没有准备好数据接口的情况，前端也可自行模拟数据
二、 mock数据的插件有很多，目前我推荐：mockjs
mockJS官网：http://mockjs.com/
demo地址：http://mockjs.com/examples.html
mockjs具体语法:
参考资料：
https://segmentfault.com/a/1190000010211622
生成大部分的数据：：：
Mock.mock({
"name":"@cname", //生成中文名称
"email":"@email", //生成邮箱
"price|200-1000.2":230, //生成带小数价格
"imgurl":"@image(200x100)", //生成尺寸为200*100图片
"title":"@ctitle", //生成中文标题
"paragraph":"@cparagraph", //生成中文段落
"pubdate":"@date(yyyy-MM-dd HH:mm:ss)", //生成日期 年月日时分秒
"address":"@province @city @county" //生成地址 省市县
"zip":"@zip"
})
ES6新增特性：
1.let,const特点： （1）没有变量提升 (2) 块级作用域 （3）不能重复定义
2.模板字符串
适用场景：解决字符串拼接问题
用反引号实现：`` 获取值：${ }
3.箭头函数： => 匿名函数：
function(item,index,arr) {
console.log(arr)
}
用 =>来取代匿名函数
(形参1,形参2,.....) => {
//代码块
}
普通函数和箭头函数区别：
箭头函数没有自己的this,它的this是其父级函数的this普通函数是有自己的this,他的this是在程序运行时确定的
call,apply,bind的理解
1.相同点：call,apply,bind都可以改变this指向
2..区别：call和apply的传参形式不同，
函数名.call(要改变的对象,参数1,参数2,......) 函数名.apply(要改变的对象,[参数1,参数2,......])bind返回函数本身，但this已经改变了 函数.bind(要改变的对象)（参数1,参数2,......）或函数.bind(要改变的对象，参数1,参数2,......)（）
js知识点总结
1、js的基本数据类型
Number、String、Boolean、Null、Undefined
symbol:是ES6新增加的基本数据类型
还有复杂数据类型：Object（Array、Json等）
2、js有哪些内置对象
Object是所有JS中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Arguments、Math、Date、RegExp、Error
3、js基本规范？
（1）不要在同一行声明多个变量；
（2）请使用==或!==来比较true或false的值；
（3）使用对象字面量（json）替代new Array这种形式
（4）不要使用全局函数
（5）switch语句带有default分支
（ 6）函数不应该有时候有返回值，有时候没有返回值
（7）for循环必须使用大括号
（8）if语句必须使用大括号
（9）for-in循环中变量，应使用var关键字明确限定作用域，从而避免作用域污染
4、 eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。
5、DOM怎样添加、移除、移动、复制、创建和查找节点
创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
6、new操作符具体干了什么呢?
（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（ 3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。
7、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式：采用键值对，例如：{'age':'12', 'name':'back'}
8、null和undefined区别？
null表示“无”，转为数值时为0；undefined是表示“无”的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没赋值，就是undefined；
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined；
（3）对象没赋值的属性，该属性的值为undefined；
（4）函数没有返回值时，默认返回undefined。
null：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。
jq总结
-
基本选择器:
id .class 元素 * 群组
-
层次选择器:
选择器1 选择器2
parent>child
前一个兄弟+后一个兄弟
前一个兄弟~之后所有兄弟
新选择器:
-
过滤选择器: 通过特定的过滤规则选出所需的DOM元素
包括: 基本过滤(新), 内容过滤, 可见性过滤, 属性过滤
子元素过滤， 表单过滤
基本过滤: 也称为位置过滤:
强调: 位置: 指DOM元素在jQuery元素中的下标位置
包含: :first, :last,
:not(selector),
:even, :odd,
:eq(i)
:gt(i) :lt(i)
何时: 只要选择查询结果中指定位置的元素时
vs first-child/last-child/nth-child(n)
何时: 只要选择指定父元素下的第几个子元素时
内容过滤: （了解）
:contains(text) 比如: span:contains("购物车")
:empty 比如: span:empty 选择内容为空的span
:parent 比如: span:parent 选择包含子内容或元素的span ——是:empty的反义
:has(selector) 比如: div:has(.active) 选择包含class为active的子元素的父元素div
可见性过滤: （了解）
:visible 匹配所有可见的元素
:hidden 所有不可见元素
4种: css: display:none; visibility:hidden; opacity:0
html: type="hidden"
强调: :hidden只能匹配 display:none; 和type="hidden"
回顾: 属性过滤——其实就是css中的属性选择器
[属性名] 匹配包含指定属性的元素
[属性名=值] 匹配指定属性的值为指定值得元素
[属性名!=值] 匹配指定属性的值不是指定值得元素
[属性名^=值] 匹配指定属性的值以指定内容开头的元素
[属性名$=值] 匹配指定属性的值以指定内容结尾的元素
[属性名*=值] 匹配指定属性的值包含指定内容的元素
[属性选择器1][属性选择器2]... 匹配同时满足属性选择器1，,2的元素
表单选择器: 利用表单中元素标签和type属性选择表单中的元素
何时:今后，只要选择表单中的元素，都要用表单元素选择器:
为什么: 代替DOM中的form.name
包括:
:input 选择所有input textarea select button
vs input: 仅选择input元素
:text 选择type为text的元素
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden
不仅选择type="hidden"，还选择display="none"
:image 选取所有图形按钮
表单属性过滤选择器:
:enabled 选择所有可用的元素
:disabled 选择所有不可用的元素
:checked 选择被选中的checkbox
:selected 选择被选中的option
移动端：
移动端如何定义字体font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
在android或者IOS下 拨打电话代码如下：
<a href="tel:15602512356">打电话给:15602512356</a>
发短信(winphone系统无效)
<a href="sms:10010">发短信给: 10010</a>
目前的浏览器支持程度： IE10+，chrome21+，opera12.1+，Firefox22+，
safari6.1+等;
如上浏览器的支持程度，我们可以把此元素使用在移动端很方便;
flex是什么呢？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供 最大的灵活性。
flex的弹性布局有如下优势：
1.独立的高度控制与对齐。
2.独立的元素顺序。
3.指定元素之间的关系。
4.灵活的尺寸与对齐方式。
flax 容器有如下6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
项目的属性，以下有6个属性可以设置在项目中，
order
flex-grow
flex-shrink
flex-basis
flex
align-self
box-pack属性总共有4个值：
.box{
box-pack: start | end | center | justify;
/主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐/
}
各个值的含义如下：
start:
对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间)
对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end:
对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center:
均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后.
justify:
在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。
meta基础知识点：
属性基本含义：
content=”width=device-width：
控制 viewport 的大小,device-width 为设备的宽度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
.忽略将页面中的数字识别为电话号码
<meta name=”format-detection” content=”telephone=no” />
3. 忽略Android平台中对邮箱地址的识别
<meta name=”format-detection” content=”email=no” />
4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name=”apple-mobile-web-app-capable” content=”yes” />
5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<!– 可选default、black、black-translucent –>
6. 需要在网站的根目录下存放favicon图标，防止404请求(使用fiddler可以监听
到)，在页面上需加link如下：
<link rel=”shortcut icon” href=”/favicon.ico”>
Element-UI使用指南：
https://blog.csdn.net/u012285967/article/details/53023825
