前端学习(二十七）自动构造工具交互（笔记）
复习
透视
perspective();
rotateX
rotateY
translateZ
3D
-webkit-transform-style: preserve-3d;
斐波那契数列(兔子)
递归
垃圾回收机制
局部 很短 函数调用完成之后，里面的局部变量就会消失
全局 很长 关闭页面消失
闭包 可长可短
只要里面的函数还有用，那整条作用域链上的变量都不会消失
作用域链
现在自身找，如果找不到找父级，再找不到继续往上找，直到找到全局。
==============================================================
1.稳定性
2.扩展性
3.优化
网络性能优化
连接 请求 等待 响应
1.减少http请求
2.使用雪碧
3.合并文件
减少http请求
节省资源
4KB
4.压缩代码
5.
script标签尽量不放在上面
link一定要放在上面
6.使用CDN
7.使用DNS
执行性能优化
有用
尽量不用全局变量
尽量使用正则
尽量不要使用属性
var len = aBtn.length;
for(var i=0;i<len;i++){
}
少用定时器
减少DOM操作
重绘
重排
尽量用CSS3
translate
没用
var str = 'abc';
str += 'bcd';
str += 'cbd';
str += 'fds';
var arr = ['abc'];
arr.push('bcd');
arr.push('cbd');
arr.push('fds');
var str = arr.join('');
========================================================
自动构建工具
Grunt 走的是文件流
gruntjs.com
Gulp 走的是二进制流
gulpjs.com
确定有node有npm
node --version
npm --version
必须先安装命令环境
安装gulp-cli命令环境
npm install --global gulp-cli
检测是否安装成功
gulp --version
可以使用了
------------------------------------------------
需要给我们的项目安装gulp
npm install gulp
需要创建文件(gulp任务的入口文件)
gulpfile.js
引入gulp
var gulp = require('gulp');
引入合并文件模块
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//编写任务
gulp.task('concat',function(){
return gulp.src('src/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest('dest'));
});
gulp.task('uglify',['依赖的任务'],function(){
return gulp.src('src/a.js');
.pipe(uglify())
.pipe(gulp.dest('dest'))
})
//注册默认任务
gulp.task('default',['concat','uglify']);
下载依赖模块
gulp-concat 合并文件
gulp-uglify 压缩代码
gulp-rename 改名
运行
gulp concat
运行默认任务
gulp
推荐需要一个文件
package.json 工程文件
初始化工程文件
npm init
安装模块
帮你压缩和并
npm install 模块名 --save-dev
项目需要的
npm install 模块名 --save
以后只需要拷贝
源文件
gulpfile.js
package.json
安装
npm install
===========================================================
服务器
就是一台计算机，只不过硬件非常棒。
电脑:存储
Web服务器：响应客户端的请求
把自己的电脑变成服务器
Apache
用集成环境
wamp windows apache mysql php
mamp mac apache mysql php
xampp
AppServ 自动启动
localhost
或者
127.0.0.1
============================================
数据交互
from表单
action 提交地址
method 提交方式
submit按钮
name
提交方式
GET 明文提交 不安全
32KB 快 有缓存
POST 密文提交 相对安全
1GB 慢 没有缓存
缓存 cache
www.baidu.com?a=12
abc
www.baidu.com?a=12
abc
from表单已经逐渐的不用了。
-----------------------------------------------
1.刷新页面、用户体验不好
2.不能从服务器拿数据
-----------------------------------------------
Ajax Asynchronous Javascript And XML
异步的javascript和XML
无刷新从服务器拿数据
必须放在服务器环境下
回调函数
只需要你定义，不要关心调用的函数
$.ajax({
url:'地址'
}).then(function(res){
成功
},function(){
失败
});
玩ajas注意:
1.
编码不统一，中文会乱码
UTF-8 国际编码 √
GB2312 中国大陆
2.不关心后缀名
后缀名是给人看的。不是给计算机看的。
3.
缓存问题
如何触发的缓存
访问同一个地址的时候
解决:
让地址变得不一样。
$.ajax({
url:'',
data:{
t:Math.random()
}
});
=====================================================
var obj = $.parseJSON(str)
反持久化、反序列化
eg1:
var str = '["a","b","c"]';
var arr = $.parseJSON(str);
eg2:
var str = '{"name":"eric"}';
var json = $.parseJSON(str);
==================================================
例子:新闻列表
造假数据
