豆花爱学习

豆花爱学习 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织 segmentfault.com/u/user_usaux9hd/about 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

豆花爱学习 发布了文章 · 8月3日

[].slice.call(arguments)原理解析

javascirpt的类数组对象可以像数组一样使用for循环遍历,但是却不能调用数组原型链的方法,为了让类数组对象可以像数组对象一样调用pushpop等方法,可以将类数组对象转成数组对象:

  • 将类数组对象转换成数组
var args = []; 
var obj = {0:"www",1:"jianshu",2:"com",length:3};
for (var i = 0; i < obj.length; i++) { 
    args.push(obj[i]);
}
console.log(args);  //["www","jianshu","com"]
//等价于以下的写法
console.log([].slice.call(obj));  //["www","jianshu","com"]

理解[].slice.call(arguments)的原理,需要明白:

  • slice()方法的作用
  • call()方法的作用
  • slice()方法的内部实现
  • Array.prototype.slice()
console.log([1,2,3,4,5].slice(0,1)); //[1]
console.log([1,2,3,4,5].slice(1,3)); //[2,3]
console.log([1,2,3,4,5].slice(3)); //[4,5]
console.log([1,2,3,4,5].slice()); //[1,2,3,4,5]

数组的slice(start,end)方法,返回从start开始到end的子数组,如果startend都没有设置,则返回整个数组,这个过程不影响原数组。

  • Function.prototype.call()
function func(name, price) {
  this.name = name;
  this.price = price;
}
var food = {name:"apple",price:10};
func.call(food,"orange",15);
console.log(food); // {name: "orange", price: 15}

调用call方法传入的参数比原方法多一个参数,简单来说,call方法的作用就是:用call方法的第一个参数代替func方法内部的this,其他参数为原func方法的参数。

  • slice方法内部实现
    slice方法内部实现,V8源码第587行,其基本原理就类似我们上面开头写的for循环遍历原数组,根据start和end的值再复制一份到新数组并返回。所以当我们使用[].slice.call(arguments),slice方法内部的this就会被替换成arguments,并循环遍历arguments,复制到新数组返回,这样就得到了一个复制arguments类数组的数组对象。
  • 为了提高性能,减少一层对原型链的追溯,一般我们会采用以下的写法
Array.prototype.slice.call(arguments)
查看原文

赞 1 收藏 1 评论 0

豆花爱学习 发布了文章 · 7月31日

webpack基本配置三---多页应用

webpack.config.js配置
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: {
        'index1': './src/index1.js',
        'index2': './src/index2.js',
        'index3': './src/index3.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    //use inline-source-map for development
    //devtool: 'inline-source-map',
    //use source-map for production
    //devtool: 'source-map', 
    //source-map eval-source-map   cheap-module-source-map cheap-module-eval-source-map
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: [path.resolve(__dirname, 'node_modules')]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new BundleAnalyzerPlugin({
            openAnalyzer: false,
            analyzerMode: 'static',
            reportFilename: 'bundle-analyzer-report.html'
        }),
        new HtmlWebpackPlugin({
            template: './src/index1.html',
            filename: 'index1.html',
            chunks: ['index1', 'mainfest', 'vendor', 'common']
        }),
        new HtmlWebpackPlugin({
            templete: './src/index2.html',
            filename: 'index2.html',
            chunks: ['index2', 'mainfest', 'vendor', 'common']
        }),
        new HtmlWebpackPlugin({
            templete: './src/index3.html',
            filename: 'index3.html',
            chunks: ['index3', 'mainfest', 'vendor', 'common']
        }),
        new webpack.HashedModuleIdsPlugin()
    ],
    optimization: {
        runtimeChunk: {
            "name": "manifest"
        },
        splitChunks: {
            cacheGroups: {
                default: false,
                vendors: false,
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'initial',
                    enforce: true,
                    priority: 10,
                    name: 'vendor'
                },
                common: {
                    chunks: 'all',
                    minChunks: 2,
                    name: 'common',
                    enforce: true,
                    priority: 5
                }
            }
        }
    }
}
.babelrc配置

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
} 
查看原文

赞 0 收藏 0 评论 0

豆花爱学习 发布了文章 · 7月31日

webpack基本配置二--单页应用

webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    //use inline-source-map for development
    devtool: 'inline-sorce-map',
    //use source-map for production
    //devtool: 'source-map',
    devServer: {
        contentBase: './dist'
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: [path.resolve(__dirname, 'node_modules')]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new BundleAnalyzerPlugin({
            openAnalyzer: false,
            analyzerMode: 'static',
            reportFilename: 'bundle-analyzer-report.html'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new webpack.HashedModuleIdsPlugin()
    ],
    optimization: {
        runtimeChunk: {
            "name": "manifest"
        },
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                common: {
                    minChunks: 2,
                    name: 'commons',
                    chunks: 'async',
                    priority: 10,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    }
}
.babelrc配置
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}
查看原文

赞 0 收藏 0 评论 0

豆花爱学习 提出了问题 · 7月31日

请教gulp怎么配置支持promise

ie不支持,目前配置了

babel-loader 、@babel/core、 @babel/present-env,

已经实现了能ie能转换es6的普通语法,但是promise还不支持,
在网上找了很多方法,尝试了都不行,求大神给指导。

关注 1 回答 0

豆花爱学习 提出了问题 · 7月31日

请教gulp怎么配置支持promise

ie不支持,目前配置了

babel-loader 、@babel/core、 @babel/present-env,

已经实现了能ie能转换es6的普通语法,但是promise还不支持,
在网上找了很多方法,尝试了都不行,求大神给指导。

关注 1 回答 0

豆花爱学习 关注了问题 · 7月31日

请教gulp怎么配置支持promise

ie不支持,目前配置了

babel-loader 、@babel/core、 @babel/present-env,

已经实现了能ie能转换es6的普通语法,但是promise还不支持,
在网上找了很多方法,尝试了都不行,求大神给指导。

关注 1 回答 0

豆花爱学习 发布了文章 · 7月31日

快速进行数据类型之间转换

有一个规律:只有0、NaN、null、undefined、空字符串,这五个转换为布尔类型是false,其余都是真。

总共分三类: 

  • 一、
对象 ==对象

它们比较的是内存地址,如果地址一样就相等,地址不一样就不相等

  • 二、
    对象 == 字符串

把对象通过调取toString的方法转换为字符串,然后在进行比较

  • 三、
对象 ==布尔

对象先转换成字符串然后再转换成数字

布尔直接转换成数字

最后是数字与数字的比较

字符串 == 布尔

字符串转换成数字

布尔直接转换成数字

最后是数字与数字的比较

  • 四、
对象 == 数字

         对象先转换成字符串然后再转换成数字

         最后是数字与数字的比较

字符串 ==数字

        字符串转换成数字

       最后是数字与数字的比较

布尔 == 数字

       布尔转换成数字

      最后是数字与数字的比较

以上为本人总结。

查看原文

赞 0 收藏 0 评论 0

豆花爱学习 发布了文章 · 7月31日

js实现年月日星期时分秒时钟

<div id="timeDiv"></div>

var timeDiv = document.getElementById('timeDiv');

function addZero(value){    
    return value < 10 ? "0" + value : value;
}

function getTime(){    
    var time = new Date();    

    var year = time.getFullYear();    
    var month = time.getMonth() + 1;    
    var day = time.getDate();    
    var hour = time.getHours();    
    var minus = time.getMinutes();   
    var second = time.getSeconds(); 

    var week = time.getDay();    
    var area = '日一二三四五'   

    timeDiv.innerHTML = year +"年"+addZero(month)+"月"+addZero(day)+"日 星期"+area[week]+addZero(hour)+"时"+addZero(minus)+"分"+addZero(second)+"秒"
}

getTime()
window.setInterval(getTime, 1000)
查看原文

赞 0 收藏 0 评论 0

豆花爱学习 发布了文章 · 7月31日

webpack基本配置一基础配置

webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    //use inline-source-map for development
    devtool: 'inline-source-map',
    //use source-map for production
    //devtool: 'source-map'
    devServer: {
        contentBase: './dist',
        hot: true
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: [path.resolve(__dirname, 'node-modules')]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/,
                use:[
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8000
                        }
                    },{
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 90
                            },
                            optipng: {
                                enabled: true
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            }
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    optimization: { //commonChunkPlugins
        runtimeChunk: 'single',
        splitChunks: { //分割代码块
            cacheGroups: { //缓存组
                common: {
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2
                },
                vendor: {
                    priority: 1,
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                    minSize: 0,
                    minChunks: 2
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),
        new webpack.NamedModulesPlugin(),//打印更新的模块路径
        new webpack.HotModuleReplacementPlugin()//热更新插件
    ]
}
.babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}
查看原文

赞 0 收藏 0 评论 0

豆花爱学习 关注了用户 · 7月31日

敖丙 @aobing

关注 3825

认证与成就

  • 获得 1 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 6月18日
个人主页被 93 人浏览