前端学习(二十七）自动构造工具交互（笔记）

复习
    透视
        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);

==================================================
    例子:新闻列表

    造假数据