zoukankan      html  css  js  c++  java
  • 前端学习(二十七)自动构造工具交互(笔记)

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

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

        造假数据

  • 相关阅读:
    在Ubuntu下编译FFmpeg
    AirSim
    上海高分无人机大赛
    飞机维修流程
    心灵感应灯三 服务器端
    Kmeans基本思想
    小觅双目相机测试
    ORB SLAM2在Ubuntu 16.04上的运行配置
    Moleskine智能笔+专用本:写完随时传到手机
    机器学习培训
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579383.html
Copyright © 2011-2022 走看看