html5
合理的title keywords desrciption
行内元素
a b span img input select strong
块级元素
div h系列 p ul ol li dl dt dd
离线缓存 HTML5的离线存储是基于一个
新建的.appcache文件的缓存
当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
在线时更新缓存cache.manifest 文件 断网时启用离线缓存的数据显示
iframe有那些缺点？
iframe会阻塞主页面的Onload事件;
iframe不利于seo，搜索引擎;
用iframe src属性可以绕开以上2点
会话
cookie
session
隐藏input
重写URL
css
可继承的样式：(字体样式) (列表) font-size font-family color, UL LI DL DD DT;
不可继承的样式：(位置大小样式) border padding margin width height ;
清除浮动的方式有哪些?比较好的是哪一种?
常用的一般为三种.clearfix, clear:both, overflow:hidden;
div
居中
1.水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
一.让绝对定位的div水平居中
2.div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; / 方便看效果 /
}
二.未知容器的宽高，利用 transform 属性
div {
position: absolute; / 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; / 方便看效果 /
}
水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
align-items:
justify-content:
.container {
display: flex;
align-items: center; / 垂直居中 /
justify-content: center; / 水平居中 /
}
.container div {
width: 100px;
height: 100px;
background-color: pink; / 方便看效果 /
}
box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),
这个css 主要是改变盒子模型大小的计算形式
css3
CSS3 @font-face
1.border-radius:
border:2px solid #666;
border-radius:25px;
2.border-shadow
box-shadow: 10px 10px 5px #888888;
text-shadow
word-wrap
transform
transition:属性 时间 动画函数 延迟秒
div
{
width:100px;
height:100px;
background:yellow;
transition: width 2s, height 2s, color 2s,transform 2s;
}
div:hover{
transform:rotate(180deg);
width:200px;
height:200px;
background:red;
}
background-size
background-origin
transform 旋转30°
div
{
transform:rotate(30deg); // rotateX rotateY
}
transition一般用来做过渡的,而animate则是做动效,算是前者的一个补充拓展;
至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了:如下
javascript
基本数据类型5种： Boolean Null Undefine String Number
es6 Symbol 是原始数据类型 ，表示独一无二的值
引用类型：Aarry Object
判断是否是数组
es5 Array.isArray(o)
function isArray(o){
if(typeof o === ‘object’){//可能是null object
Object.prototype.toString.call(o) // => [object Array]
}
return false;//即为基本数据类型
}
bind()方法重写
Function.prototype._bind = function(context){
var fn = this;
var slice = Array.prototype.slice;
var arg = slice.call(arguments, 1)//除了第一个参数 **arg已经是数组
return function() {
var finalArg = arg.concat(slice.apply(arguments))
fn.apply(context,finalArg)
}
}
this对象的理解
简言之:谁调用指向谁,运行时的上下文确定;
显式绑定 call,apply,bind,箭头函数….来修改this的指向
** Aarry 序
数组去重
Array.prototype.unique = function(){
var self = this;
var arr = [];
self.forEach(function(v) {
arr.indexOf(v) < 0 && arr.push(v)
})
return arr;
}
数组排序
Array.prototype.quckilySort = function(name) {
var arr = this;
var compare = function (key){
return function(a,b){
if(a[key]< b[key]){
return -1
}else if(a[key] === b[key]){
return 0
}eles{
return 1
}
}
}
return arr.sort(compare(name))
}
数组随机
var array = [1,2,3]
array.sort(function(){
return Math.random() - 0.5
})
对象潜复制
var p = {nam:’’};
var o = Object.assign({},p})
function clone(obj) {
var o = obj instanceof Object ? {} : []
for(value in obj){
o[value] = typeof value === ‘object’ ? clone(obj[value]) : obj[value]
}
return o
}
面向对象
new
1.新建一个对象
3.将构造函数的作用域赋予这个对象(此时this指向这个新对象)
2.执行构造函数中的代码，为这个对象添加属性
4.返回这个对象
//组合继承模式
function parent(name) {
this.name = name;
this.sex = [‘man’,’woman’];
}
parent.prototype.sayName = function() {
alert(this.name)
}
function son(name, age) {
parent.call(this)
this.age = age
}
son.prototype = new parent();
son.prototype.constructor = parent;
son.sayName = function() {
alert(this.name , this.age.toString())
}
var p1 = new son(‘ly’,18)
ES5:寄生组合式继承:通过借用构造函数来继承属性和原型链来实现子继承父。
function ParentClass(name) {
this.name = name;
}
ParentClass.prototype.sayHello = function () {
console.log(“I’m parent!” + this.name);
}
function SubClass(name, age) {
//若是要多个参数可以用apply 结合 …解构
ParentClass.call(this, name);
this.age = age;
}
SubClass.prototype = Object.create(ParentClass.prototype);
SubClass.prototype.constructor = SubClass;
SubClass.prototype.sayChildHello = function (name) {
console.log(“I’m child “ + this.name)
}
let testA = new SubClass(‘CRPER’)
es5原型继承
Object.create = function(p){
function f(){}
f.prototype = p
return new f()
}
var parent = { name:’P’ }
var son = Object.create(parent)
function parent() {}
parent.prototype.name = ‘LIN’
1.vue
生命周期
beforeCreate(el 和 data 并未初始化 )
created(完成了 data 数据的初始化，el没有)
beforeMount (完成了 el 和 data 初始化 )
mounted –完成挂载 (when date change) –beforeUpdate - updated
beforeDestroy
destroyed
父子组件间消息
parent @say = “function(val){ msg = val }” :msg = msg
child @click= “$emit(‘say’,’HI’)”
非父子组件间
var bus = new Vue()
b组件
bus.$emit(‘sayMessage’,’Hello World’)
a组件 created 生命周期钩子
vus.$on(‘sayMessage’,function(data){
this.data = data
})
2.react
init: getDefaultProps getInitialState componentWillMount render componentDidMount
props update: componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidupdate
state:shouldComponentupdate componentWillupdate render componentDidupdate
销毁 componentWillUnmount()
对于XSS (跨站脚本攻击)和 CSRF(跨站请求伪造)
如何防范
xss : 标签转义 或 正则替换
CSRF :设置验证码 或 taken加密
3.ajax
跨域：不同主域名，不同端口号，不同协议
解决方式：
jsonP
方式：
var script = document.createElement(‘scirpt’)
script.src = ‘127.0.0.1:8080/index.php?callback=jsonpcb’
document.head.appendChild(script)
function jsonpcb(data) {
}
优点： 兼用低版本流浪器
缺点： 只能用于Get方法
cors 跨域资源共享
方式：服务器设置响应头允许所有请求
Access Control Allow Origin：*
Access Control Allow Origin: http://a.com
可以支持POST，PUT等方法兼容ie9以上
function get(method,url,data){
var xhr = XMLHttpRequest();
xhr.open(method, url, true)//请求方式 ‘server?name=linyi’,是否异步
xhr.send(null)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status===200){
alert(xhr.responseText)
}
}
}
}
promise
promise相当于一个状态机
promise的三种状态
pending
fulfilled
rejected
(1) promise 对象初始化状态为 pending
(2) 当调用resolve(成功)，会由pending => fulfilled
(3) 当调用reject(失败)，会由pending => rejected
var p = function(url) {
return new Promise((resolve, reject)=>{
$.get(url,function(data){
resolve(data);
})
})
}
p.then(function(data1){
return p(data1.url)
}).then(function(data2){
return p(data2.url)
}).catch(e){
throw new Error(e)
}
function ajax(method, url, data){
var xhr = XMLHttpRequest();
xhr.open(url, method , true)
xhr.send(data)
return new Promise(function(resolve,reject){
xhr.on ready state change = function(){
if(xhr.ready State === 4 ){
if (xhr.status === 200) {
resolve(xhr.response Text);
}else{
reject(xhr.status);
}
}
}
});
}
ajax(method, url, data)
.then(function(data){ console.log(data) })
.catch(e){throw new Error(e)}
优点：无刷新传输数据，用户体验，减轻服务器和带宽的负担
缺点：破坏浏览器前进和后退功能，浏览器兼用支持力度问题
JSON.parse(json)
json字符串转json对象
JSON.stringify(json)
json对象转json字符串
cookies，sessionStorage 和 localStorage
cookies <4k 但 sessionStorage localStorage 可达5M或者更大
localStorage 本地化数据永久存储除非手动删除
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
JSON.parse(localStorage.getItem(‘Key’))
localStorage.setItem(‘Key’，JSON.stringify(obj))
localStorage.removeItem(‘key’)
localStorage.clear(‘key’)
sessinStorage 关闭浏览器即自动删除
cookies : 设置过期时间生效即使关闭流浪器
DOM操作
事件兼容
function addEvent(elem,event,fn) {
if(elem.addEventListener){
elem.addEventListener(event,fn,false);
}else if (elem.attachEvent){
elem.attachEvent(‘on’+event,fn);
}else{
elem[‘on’+event]=fn;
}
}
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
设置、访问属性 getAttribute setAttribute
document.getElementsByTagName(“li”).getAttribute(‘title’)
修改样式
document.getElementsByTagName(“li”).style.cssText = ‘color:red;font-size:18px;’
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
history
history.go(-1)//history.back()后退一页
history.go(1)前进一页
try{
}catch(e){
}finally{
finallyCode - 无论 try / catch 结果如何都会执行的代码块
}
var IIFE = (function() {
var _count = 2
var m1 = function(){
}
var m2 = function(){
}
return {
m1:m1,
m2:m2
}
})();
AMD规范/CMD
CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作
- 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
- CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
CMD(node.js采用commonJS规范) 延迟执行
define(function(require,exports,module){
var a = require(‘./a’)
a.todo()
var b = require(‘./b’)
})
AMD 提前执行
define([‘./a’,’./b’],function(a,b){
a.todo();
b.todo();
})
es6
class parent {
constructor(name,age){
this.name = name
this.age = age
}
sayName() {
alert(this.name)
}
}
class son extends parent {
constructor(name,age,sex) {
super(name,age)
this.sex = sex
}
sayName() {
alert(this.name + super.sayName())
}
}
性能优化
webpack压缩代码(JS/CSS),压缩图片
合并一些小图片(css sprite)
若是打包的代码尽可能切割成多个 chunk,减少单一 chunk过大
静态文件采用 cdn 引入
HTTP的缓存头使用的合理
减小第三方库的依赖
对于代码应该考虑性能来编写,比如使用requestAnimationFrame绘制动画,尽可能减少页面重绘(DOM 改变)
渐进升级,引入preload这些预加载资源
看情况用server worker来缓存资源(比如移动端打算搞 PWA)