前端知识点小结
一.HTML,CSS (兼容性)
1. animation
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
| 默认值： | none 0 ease 0 1 normal |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animation="mymove 5s infinite" |
语法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
2.transition (animate.css)
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
| 默认值： | all 0 ease 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. 弹性盒布局(兼容性),
display:box;
display:box-flex;
display:flex;
响应式布局,百分比布局,rem布局
具体参考：https://www.cnblogs.com/lijiapeng/p/9923934.html
3. 字体图标
二.JS (兼容性)
1.ES5(map,filter,Object.create())
2.面向对象，构造函数，原型(prototype,__proto__)，原型链，继承(call,apply)，闭包, bind
3.ES6(let,const,class,promise,箭头函数,数组去重,模块化)
(q.js实现了promise的思想， 用同步来表现异步流程， 解决了回调地狱的问题.promie 中 三种状态， pending, reslove,reject, pending->reslove, pending-reject)
(1)commonJs规范 （cmd的规范）
nodejs
webpack
module.exports= { } exports.**方法或者属性
require("");
(2)amd 规范(require.js) define
(3) export default {} export {name,getName,age}
import * from "" import {name,getName,age} from ""
4.cookie,sessionStorage,localStorage,websql,indexeddb--https://segmentfault.com/a/1190000005927232
5. 基于xhr的Ajax&Fetch(非标准)&Jsonp&axios
三.代码管理工具
1.svn
2.git
http://www.jianshu.com/p/bfec042349ca
四.css预处理器
1.sass （gulp-sass, sass-loader, 考拉）
$name:10px;
ul{
li{
$name:20px
a{
width:$name+20
}
}
}
@function px2rem(){
@return
}
2.less
@name:10px;
ul{
li{
@name:20px
a{
width:@name+20
}
}
}
3.stylus
五.前端构建工具,前端工程化工具
1.gulp
2.webpack
3.grunt
4.ant
六.后端开发
1.php-laravel-mysql
2.nodejs-express-mongodb <% %>
3.Java-structs-oracal,mysql,db2 ,jsp
4. asp, .net
3. 前后端开发方式->(1)前后端分离(2)后端嵌套模板 ssr
xml&json
七.框架
1.前web时代
jquery(js库),zepto（tap）, touch.js手势库,swiper,echarts3（图表，数据可视化）
2.后web时代
angular1.6 版本->mvc,mvvm
(1)angular 中ng-if 和 ng-show/hide 区别
(2)内置的filter 有哪些?如何自定义filter
angular.module("app",[])
.filter()
.directives
.service
.factory("kerwinservice",function(){
return {
}
})
angualr.module("app",[])
.controller("main",function($scope,kerwinservice){
})
angualr.module("app",[])
.controller("child",function($scope,kerwinservice){
})
(3)自定义服务？（服务是单例）
(4)angular 数据绑定采用什么机制？脏数据检查机制
$scope.$apply();
通过 $watch 来监听 dom上绑定的每一个数据的变化，然后$digest 来遍历循环所有的 $watch
队列，发现与原来不同的值，也就是脏值则进行修改，最后通过$apply ，$apply会
进入 angular context的执行环境，通知浏览器拿回控制权，修改相应的dom节点。
$scope.name="kerwin";
$scope.name="xiaoming"
ng-click ,$timeout $interval,$http请求，
(5)在angular 开发中， 两个平级的兄弟，如何共享数据？
a. factory服务，将数据保存在服务之内，然后在b中调用服务
b. 挂在 $rootScope之上进行共享
c. 也可以用 本地存储来存储数据，实现数据共享。
(6)一个angular 应用应当如何分层？
css
js
controllers
models （比较复杂的model 放在models里面，然后$scope.info = info）
services
filters
templates
/home home.html home.js
/list list.html list.js
(7)angular 路由库 （ngRoute, ui-router）
(8)两个人开发angular 项目时，进行代码整合，可能会遇到哪些问题,如何解决？
angular.module('myApp.moduleA', [])
.factory('serviceA', function(){
...
})
angular.module('myApp.moduleB', [])
.factory('serviceA', function(){
...
})
angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])
会导致两个 module 下面的 serviceA 发生了覆盖。
//没有太好的解决方案，只能约定命名规范
(9)angular 缺点
a.选择器比较弱，
b.学习成本较高，对前端不友好。但遵守 AngularJS 的约定时，生产力会很
高，对 Java 程序员友好
c.因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取 {{name}}
(10)使用ng-repeat出错，Error:[ngRepeat:dues](迭代数组，数组两个值相同)
item in items track by $index
(11)使用第三插件或者原生js 修改angular 中model的值，界面并不会变化，感觉上绑定失效了。为什么？怎么办？
要手动脏检。
$scope.$apply()或者将
操作的代码放在$scope.$apply(function(){//
操作的代码...})
(12) 在依赖注入服务时，需要注意的?
防止被压缩 改写成["$scope","kerwinservice",function($scope,kerwinservie){
}]
angular4
=>
1. Typescript (ES6 的超集) 和 typescript 解析器 ==>js 标准代码
2. angular ,router
3. angular-cli脚手架
react->flux,redux
(1)生命周期
(2)性能优化在哪个周期函数？ shouldComponentUpdate
(3)虚拟dom？为啥能提高性能?
虚拟dom相当于在js和真实dom 中间加了一个缓存，利用diff 算法避免了没有必要的dom操作。
a. 用js对象表示dom 结构，然后用这个虚拟的对象树，真正创建一个dom树，插入到文档中。
b. 当状态变更，重新造一颗新的对象树，将新的对象树，与旧的对象树进行对比，记录两棵树的差异。
c. 将差异的地方应用到真正的dom 树，视图就更新。
(4)diff算法？
a. 把树按照层级进行分解， 只比较同级元素
b. 给列表加上key 值，唯一不重复
c. 只匹配相同组件名字的component
d. setState() 将其标记为dirty 并不是马上执行，等一个事件循环（生命周期）结束，react 会检查所有dirty的组件并重新绘制。
e.选择性子树渲染，shouldComponentUpdate
(5)flux 思想和redux 思想
vue->vuex
(1)vue slot 是什么？
假如父组件需要在子组件内放一些dom，那么这些dom是显示还是不显示，在哪显示，就需要用slot分发负责了。
(2)vue.use(插件)
(3)vue 与react 对比
a. 都有虚拟dom 和组件化思想，有配套的路由与负责全局状态的管理的库。
b. 性能方面vue 是优于react的
c. 开发架构
react:ES6+Webpack+React+React-router+Redux
vue：ES6+Webpack+vue+vue-router+单文件组件+vuex
d. 如果你想同时适用于web端和原生app开发，请选择用react（react native）,
如果你的应用小而快(模板开发)，用vue
八.地图
1.百度地图
2.高德地图
九.混合开发：
1.phonegap
2.h5+
十.微信开发：
1.微信webapp开发
2.微信js-sdk开发
3.微信后台开发
4.微信小程序开发
wx:for, bindtap , setData,wx.request
十一.常见UI框架
1.jquery:
PC: bootstrap(12 栅格 ),jquery UI,easy UI
移动端:mui,sui mobile
<ul class="row">
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
</ul>
2.React:
PC: react-boostrap
移动端：
(1)amazeUI-react,
(2)yo组件-http://ued.qunar.com/hy2/yo/component-Scroller.html
(3)material UI
3.饿了么UED团队推出的vue 前端框架：
(1)PC框架：
http://element.eleme.io/#/
https://github.com/ElemeFE/element
(2)移动端框架：
http://mint-ui.github.io/#!/zh-cn
https://github.com/ElemeFE/mint-ui
十二.扩展
1.懒加载的原理：
目的：主要作为服务器前端的优化，延迟请求数。
原理:先加载一部分数据，当触发某个条件时，利用异步加载剩余的数据。
2. 轮播原理, 放大镜原理
2. 移动端开发平时在什么浏览器测试？
chrome,safari,微信x5,,UC
3.移动端如何调试？
(1)chrome 模拟手机调试
(2)android真机+chrome inspect
(3)iphone真机 +safari
4. 优化页面，加快页面加载速度
(1)优化图片资源格式和大小
(2)开启网络压缩
(3)使用cdn存储静态资源
(4)压缩js css
(5)浏览器缓存(cache)
5. xss(跨站脚本攻击),避免？
(1)前端转义-正则表达式
(2)后端转义处理（转成html实体 再存入到数据库）
(3)cookie加上httponly 属性，保护cookie
6. websocket,
node服务端(ws,socket.io)
var ws= new Websocket()
ws.onopen
ws.onmessage
ws.send()
ws.onerror
ws.onclose
