1JS中的函数节流 2.前端开发环境和生产环境（） 3 制造假数据来模拟后端接口

2.前端开发环境和生产环境（）
3 制造假数据来模拟后端接口)

1JS中的函数节流（转自https://segmentfault.com/a/1190000019577510）

一、什么是函数节流（
概念：限制一个函数在一定时间内只能执行一次。

举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在 一定时间 之内，限制 一个动作 只 执行一次 。
二、为什么需要函数节流
　　前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。
三、函数节流如何解决上述问题
根据上面对问题的分析，细细思索，问题的解决方案就呼之欲出了。

主要实现思路就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量true，写入需要执行的函数。第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。
四、函数节流的代码实现
根据以上分析，我们对“函数节流”进行代码实现，如下：

（1）方法一：时间戳方案

// 时间戳方案

function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

（2）方法二：定时器方案

// 定时器方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

以上两种方法本人都亲自测试过，小伙伴们可以放心食用（注意，例子中函数触发方式为“ mousemove ”，鼠标在页面上移动，观察浏览器控制台的变化），自己运行代码体验后，自然会更深刻的理解 “函数节流” 。
五、函数节流的使用场景
到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？

懒加载、滚动加载、加载更多或监听滚动条位置；
百度搜索框，搜索联想功能；
防止高频点击提交，防止表单重复提交；
目前遇到过的使用场景就是这些了，不过理解了原理，小伙伴可以把它运用在需要用到它的任何场合，提高代码质量。

总结
使用“函数节流”的主要目的，是为了优化程序性能，提高用户体验，不过最主要的为了节约计算机资源，推荐在合适的场合使用它，才能达到它应有的效果，切忌滥用哦！

2.前端开发环境和生产环境（https://blog.csdn.net/weixin_30502157/article/details/101924594?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2）

在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境；

当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点：

开发环境的需求：

模块热更新 （本地开启服务，实时更新）
　　　　sourceMap (方便打包调试)
　　　　接口代理　 (配置proxyTable解决开发环境中的跨域问题)

代码规范检查 (代码规范检查工具)

生产环境的需求：

提取公共代码　 　　
　　　　压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
　　　　文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
　　　　去除无用的代码

开发环境和生产环境的共同需求：

同样的入口
　　　　同样的代码处理(loader处理)
　　　　同样的解析配置

在我们搭建好Vue-cli脚手架之后，我们的build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件；

webpack.base.conf.js：webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)

webpack.dev.conf.js：webpack的开发环境的特有配置(只在开发环境中执行，生产环境中不执行)

webpack.prod.conf.js：webpack的生产环境的特有配置(只在生产环境中执行，开发环境中不执行)

我们为什么要区分开发环境和生产环境呢？

因为一个项目的开发过程中肯定不会是一个版本开发完之后就立马上线，开发是必需，上线是目的；在开发的过程中会有各种各样的问题，比如开发环境中跨域、开发环境和生产环境因环境不同而产生的未知奇葩错误等等都是会时常发生的，我们区分环境的目的就是为了让开发人员在开发的过程中可以方便调试，保持高效的开发；让程序在生产环境中正常有效的运行；

webpack.base.conf.js配置

const path = require('path');
//清除build/dist文件夹文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//生成创建Html入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将css提取到单独的文件中
const MiniCssExtract = require('mini-css-extract-plugin');
//css压缩
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
//压缩js文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//引入webpack
const webpack = require('webpack');

module.exports = {
//webpack 入口文件
    entry: './src/index.js',
//webpack 输出文件配置
    output: {
    //输出文件路径
        path: path.resolve(__dirname, 'dist'),
   //输出文件名
        filename: 'k-editor.[hash:8].js',
    },
  //配置插件
    plugins: [
    //使用插件清除dist文件夹中的文件
        new CleanWebpackPlugin({
            path: './dist'
        }),
    //使用插件生成Html入口文件
        new HtmlWebpackPlugin({
         //模板文件路径
            template: "./src/index.html",
        //模板文件名
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true, //删除双引号,
                collapseWhitespace: true,    //压缩成一行，
            },
            hash: true
        }),
      //提取css到style.css中
        new MiniCssExtract({
            filename: 'style.css'
        }),
    ],
    resolve: {
        // modules: [path.resolve('node_modules')],//只在当前目录下查找
        alias: { //别名
            'bootstrap': 'bootstrap/dist/css/bootstrap.css',
        },
        // mainFields: ['style', 'main'],//优先寻找style，
        // mainFiles: [],//入口文件的名字,默认index.js
        // extensions: ['js', 'css', 'json', 'vue']//扩展名顺序
    },
   //loader加载器模块配置
    module: {
        rules: [
            {
            //正则表达式匹配.css为后缀的文件
                test: /\.css$/,
           //使用loader
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                ]
         //正则表达式匹配.less为后缀的文件
         //使用lodaer来处理
            }, {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                    'less-loader'
                ]
            },
            /* {
                 test: /\.js$/,
               //不包括node_modules
                 exclude: /node_modules/,
                 use: [{
                     loader: "eslint-loader",
                     options: {
                         enforce: 'pre'    //强制更改顺序，pre 前  post 后
                     }
                 }],
             },*/
            {
                test: /\.js$/,  //普通的loader
               //不包括node_modules
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader"
                }]
            },
            {
                test: /\.html$/,
                use: ['html-withimg-loader']
            },
            {
                test: /\.(gif|png|jpg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
             //图片小于10kb就是图片地址，大于正常打包成base64格式编码    
                        limit: 10000,
                       //输出路径
                        outputPath: 'img/'
                    }
                }]
            }
        ]
    },
};

webpack.dev.conf.js：

//引入webpack-merge插件进行合并
const {merge} = require('webpack-merge');
//引入webpack.base.conf.js文件
const base = require('./webpack.base.conf');
//引入webpack
const webpack = require('webpack');
//进行合并，将webpack.base.conf.js中的配置合并到这
module.exports = merge(base, {
   //模块参数
    mode: 'development',
    devServer: {
        contentBase: './dist',
      //端口号
        port: '8383',
        inline: true,
        historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        hot: true//允许热加载
    },
//启用source-map方便调试
    devtool: 'source-map',
    plugins: [
       //定义全局变量
        new webpack.DefinePlugin({
         //这里必须要解析成字符串进行判断，不然将会被识别为一个变量
            DEV: JSON.stringify('dev')
        })
    ]
});

webpack.prod.conf.js:

const {merge} = require('webpack-merge');
const base = require('./webpack.base');

const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(base, {
    mode: 'production',
    optimization: {
        minimizer: [
          //压缩CSS代码
            new OptimizeCss(),
          //压缩js代码
            new UglifyJsPlugin({
              //启用文件缓存
                cache: true,
             //使用多线程并行运行提高构建速度
                parallel: true,
             //使用 SourceMaps 将错误信息的位置映射到模块
                sourceMap: true
            })
        ]
    },
    plugins:[
     //使用插件定义全局变量DEV
        new webpack.DefinePlugin({
            DEV:JSON.stringify('production')
        })
    ]

});

最后在配置一下package.json文件就可以了：

"scripts": {
    "test": "npm  run test",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
 　　

如何区分开发环境和生产环境呢？

在node中，我们有一个对象process对象，它里面包括的一些信息，env和它的一些属性，当然NODE_ENV是我们自己加上去的自定义属性，用来区分环境变量，也就是通过这个变量来进行区别是开发环境还是生产环境；但是有个问题，不同电脑上设置的方式是不一样的，所以cross-env就来了，它可以跨平台设置环境和使用环境变量。

npm install cross-env

我们在webpack.base.conf.js文件中修改代码：

const NODE_ENV=process.env.NODE_ENV;
console.log(NODE_ENV);
 

然后我们修改package.json文件：

//–config是可以设置我们执行哪个webpack文件，默认是执行webpack.config.js,但是我们现在修改文件名了，所以我们要设置一下

"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js"

就这样，我们就实现了利用webpack来区分开发环境和生产环境，当我们用npm run dev运行的时候就是开发环境，当我们运行npm run build的时候就是构建生产环境打包；

3 制造假数据来模拟后端接口呢（转自：https://blog.csdn.net/thankszmy/article/details/79570613）

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作。

1.一个简单的例子：

复制代码

Mock.mock('http://123.com',{
    'name|3':'fei',//这个定义数据的模板形式下面会介绍
    'age|20-30':25,
})

$.ajax({
    url:'http://123.com',
    dataType:'json',
    success:function(e){
       console.log(e)
    }
})

复制代码
在这个例子中我们截获地址为http://123.com返回的数据是一个拥有name和age的对象，那么ajax返回的数据就是Mock定义的数据，返回的数据格式如下：

{
     name:'feifeifei',
     age:26,
}

至于上面的定义模板数据的格式是什么意思，下面就给大家介绍。

2.介绍如何定义数据

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
1.'name|min-max': string   通过重复 
string
 生成一个字符串，重复次数大于等于 
min
，小于等于 
max

例子：'lastName|2-5':'jiang', 重复jiang这个字符串 2-5 次

2.'name|count': string   通过重复 
string
 生成一个字符串，重复次数等于 
count

例子：'firstName|3':'fei', 重复fei这个字符串 3 次，打印出来就是'feifeifei'。

3.'name|min-max': number   生成一个大于等于 
min
、小于等于 
max
 的整数，属性值 
number
 只是用来确定类型。
例子：'age|20-30':25, 生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型

4.'name|+1': number   属性值自动加 1，初始值为 
number

例子：'big|+1':0, 属性值自动加 1，初始值为 0，以后每次请求在前面的基础上+1

5.'name|min-max.dmin-dmax': number   生成一个浮点数，整数部分大于等于 
min
、小于等于 
max
，小数部分保留 
dmin
 到 
dmax
 位。
例子：'weight|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位

6.'name|1': boolean   随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
例子：'likeMovie|1':Boolean, 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

7.属性值是对象：var obj={'host':'www.baidu','port':'12345','node':'selector'}

　　7-1.'name|count': object  从属性值 
object
 中随机选取 
count
 个属性。
　　例子：'life1|2':obj, 从属性值 obj 中随机选取 2 个属性

　　7-2.'name|min-max': object  从属性值 
object
 中随机选取 
min
 到 
max
 个属性
　　例子：'life1|1-2':obj, 从属性值 obj 中随机选取 1 到 2 个属性。

8.属性值是数组：var arr=['momo','yanzi','ziwei']

　　8-1.'name|1': array   从属性值 
array
 中随机选取 1 个元素，作为最终值
　　例子：'friend1|1':arr, 从数组 arr 中随机选取 1 个元素，作为最终值。

　　8-2.'name|+1': array   从属性值 
array
 中顺序选取 1 个元素，作为最终值。
　　例子：'friend2|+1':arr, 从属性值 arr 中顺序选取 1 个元素，作为最终值，第一次就是'momo',第二次请求就是'yanzi'

　　8-3.'name|count': array   通过重复属性值 
array
 生成一个新数组，重复次数为 
count
。
　　例子：'friend3|2':arr, 重复arr这个数字2次作为这个属性值，得到数据应该是['momo','yanzi','ziwei','momo','yanzi','ziwei']

　　8-4.'name|min-max': array   通过重复属性值 
array
 生成一个新数组，重复次数大于等于 
min
，小于等于 
max
　　例子：'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3

3.实际的ajax请求例子：
复制代码

var arr=['momo','yanzi','ziwei']
        var obj={
            'host':'www.baidu',
            'port':'12345',
            'node':'selector'
        }

        Mock.mock('http://www.bai.com',{
            'firstName|3':'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。
            'lastName|2-5':'jiang',//重复jiang这个字符串 2-5 次。
            'big|+1':0, //属性值自动加 1，初始值为 0
            'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
            'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
            'likeMovie|1':Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
            'friend1|1':arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
            'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
            'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
            'life1|2':obj,//从属性值 obj 中随机选取 2 个属性
            'life1|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
            'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
            
        })

        $.ajax({
            url:'http://www.bai.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })

复制代码
4.如何实现数据 增 删 改 查 的模拟数据接口

下面我就模拟后端删除功能的接口实现

复制代码

/*模拟删除数据的方式*/
var arr=[
    {name:'fei',age:20,id:1},
    {name:'liang',age:30,id:2},
    {name:'jun',age:40,id:3},
    {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com','delete',function(options){
    var id = parseInt(options.body.split("=")[1])//获取删除的id
    var index;
    for(var i in arr){
        if(arr[i].id===id){//在数组arr里找到这个id
            index=i
            break;
        }
    }
    arr.splice(index,1)//把这个id对应的对象从数组里删除
    return arr;//返回这个数组,也就是返回处理后的假数据
})
$.ajax({
    url:'http://www.bai.com',
    type:"DELETE",
    data:{
        id:1//假设需要删除id=1的数据
    },
    dataType:'json',
    success:function(e){
        console.log(e)
    }
})