js

1.安装4.2.2版本的react-router-dom cnpm install react-router-dom@^4.2.2 --save 2.安装axios yarn add axios 3.安装4.1.0版本的less-loader cnpm install less-loader@^4.1.0 --save 4.安装后package.json文件如下 5.用yarn eject暴露webpack文件 yarn eject 暴露后会新增一个config文件夹为webpack的配置文件 6.通过yarn add less安装less 7.在webpack.config.js中可以修改配置例如支持less文件的加载修改以下内容在webpack.config.js中添加对less的解析 //解析less文件 { test: /\.less$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work //

我们常常会听说什么栈内存、堆内存，那么他们到底有什么区别呢，在js中又是如何区分他们的呢，今天我们来看一下。 一、栈内存和堆内存的区分 一般来说， 栈内存 主要用于存储各种 基本类型 的变量，包括Boolean、Number、String、Undefined、Null...以及 对象变量的指针 ，这时候栈内存给人的感觉就像一个线性排列的空间，每个小单元大小基本相等，栈内存中的变量一般都是已知大小或者有范围上限的，算作一种简单存储。 而 堆内存 主要负责像对象Object这种变量类型的存储，堆内存存储的对象类型数据对于大小这方面，一般都是未知的，（所以这大概也是为什么null作为一个object类型的变量却存储在栈内存中的原因）。 来一张图感受一下： 二、测试 Ⅰ.基本数据类型 /* 基本数据类型 */ var a = 1; var b = 1; console.log(a === b);//true var c = '桔子桑'; var d = '桔子桑'; console.log(c === d);//true 基本数据类型，因为都是存在栈内存中的，以上面的int为例： var a = 1；变量 a 存在栈内存中，他的值是基本数据类型（int），自然也是在栈内存中，栈内存有没有1？没有那就拿出一块内存存1，这个变量a指向这块值为1的栈内存地址； var b = 1；同理，变量 b

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（ 原理 ） 1.通过yarn add babel-plugin-import 安装babel-plugin-import插件 yarn add babel-plugin-import 2.在webpack.config.js中添加如下代码进行配置antd的按需加载 ['import',{libraryName: 'antd',style:true}], 整体代码如下： 'use strict'; const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin =

//图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute;width: 100%;z-index: 5555;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);display:none;' id='imgZoomMask'></div>"; $("html").append(mask); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $(window).resize(function () { windowWidth = $(window).width(); windowHeight = $(window).height(); }); $("#imgZoomMask").show(); $(window).resize(function () { windowWidth = $(window).width(); windowHeight = $(window).height(); }); var img = new Image(); img.src = path; img.onload =

1. 引言 本周精读的文章是 V8 引擎 Lazy Parsing ，看看 V8 引擎为了优化性能，做了怎样的尝试吧！ 这篇文章介绍的优化技术叫 preparser ，是通过跳过不必要函数编译的方式优化性能。 2. 概述 & 精读 解析 Js 发生在网页运行的关键路径上，因此加速对 JS 的解析，就可以加速网页运行效率。 然而并不是所有 Js 都需要在初始化时就被执行，因此也不需要在初始化时就解析所有的 Js！因为编译 Js 会带来三个成本问题： 编译不必要的代码会占用 CPU 资源。 在 GC 前会占用不必要的内存空间。 编译后的代码会缓存在磁盘，占用磁盘空间。 因此所有主流浏览器都实现了 Lazy Parsing（延迟解析），它会将不必要的函数进行预解析，也就是只解析出外部函数需要的内容，而全量解析在调用这个函数时才发生。 预解析的挑战 本来预解析也不难，因为只要判断一个函数是否会立即执行就可以了，只有立即执行的函数才需要被完全解析。 使得预解析变复杂的是变量分配问题。原文通过了堆栈调用的例子说明原因： Js 代码的执行在堆栈上完成，比如下面这个函数： function f(a, b) { const c = a + b; return c; } function g() { return f(1, 2); // The return instruction pointer

1.在讲js获取给定月份的N个月后的日期之前，小颖先给大家讲下getFullYear()、getYear()的区别。 ①getYear() var d = new Date() console.log(d.getYear()); 打印结果为：116 小颖百度了下，js中Date对象getYear(）方法和getFullYear()方法区别,比如： JS中Date对象getYear(）方法和getFullYear()方法区别 发现很多人写的是： 在IE中是可以正确获取年份：2016，但是在FF等浏览器下则为：116。 原因则是 在 FF等浏览器内 getYear 返回的是 "当前年份-1900" 的值（即年份基数是1900） 而IE则是 当today的年份大于等于2000的时，直接将1900加上了，返回的 2016。 但是当小颖将上面的代码在IE中运行之后，发现结果还是：116，小颖的IE版本是: 所以小颖觉得可能随着IE版本的更新,IE已经不支持getYear(）方法了.不过这只是小颖的猜测,嘻嘻,大家也可以尝试下看看到底是怎样的. ②getFullYear() var d = new Date(); console.log(d.getFullYear()); 打印结果为：2016 使用getFullYear()在IE和FF中都可以正确获取年份：2016 2

项目中用到的一些简单JS小知识，动态创建年月下拉框： JS 代码： var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; for (i = 0; i < 10; i++) { var oP = document.createElement("option"); var oText = document.createTextNode(y); oP.appendChild(oText); oP.setAttribute("value", y); document.getElementById('year').appendChild(oP); y = y - 1; }; var j = 1; for (i = 1; i < 13; i++) { var month = document.createElement("option"); var monthText = document.createTextNode(j); month.appendChild(monthText); month.setAttribute("value", j); if (j == m) { month.setAttribute("selected", "selected"); } ; document

上下文栈 执行上下文——js中通过js引擎管理全局上下文和函数上下文的过程 全局上下文 ——scrip中所有js代码执行过程 函数上下文 ——调用函数时形成函数上下文（函数的执行过程） 上下文栈——执行整个代码的过程(执行整上下文的过程) 例如： 1 执行全局上下文 2 执行f1函数上下文 3 执行f2函数上下文 4 执行f3函数上下文 5 打印a —> f3函数上下文执行完成 —> f2函数上下文执行完成 —> f1函数上下文执行完成 6 全局上下文执行结束 来源： CSDN 作者： LYHappy& 链接： https://blog.csdn.net/weixin_46316234/article/details/104315167

在写项目的时候，我们经常会用一些组件，比如：模态框、表格、分页等。组件的应用大大减少了项目的开发成本，同时也提高了代码的质量等。所以，封装组件成为了每个人的必须拥有的技能。本篇文章将使用原生JS封装一个Table组件。 组件封装 实现目标 以antd中的Table组件为目标，实现以下功能： 传width值控制表格宽度。 columns与dataSource中的数据相对应，没有对应数据的地方显示为空。 实现columns中的render函数方法。 对columns数据中key值的检查，没有或者重复，给出警告。 columns中width可设置列宽 columns中align值控制内容在表格中所处的位置。 搭建结构 首先，先搭建一下代码的结构 window.Table(function(){ class Table { constructor(options) { // 获取所需要数据 this.columns = options.columns; this.dataSource = options.dataSource; this.width = options.width; this.init(); // 调用初始化函数 } // 初始化 init() { } } return function proxy(options = {}) { options = Object

reduce函数 ，是ECMAScript5规范中出现的数组方法。在平时的工作中，相信大家使用的场景并不多，一般而言，可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现，虽然不清楚浏览器的js引擎是如何在C＋＋层面实现这两个方法，但是可以肯定的是reduce方法肯定也存在数组的遍历，在具体实现细节上是否针对数组项的操作和存储做了什么优化，则不得而知。 数组的reduce方法的应用 reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。需要注意的是，reduce方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。 reduce方法最常见的场景就是叠加。 var items = [10, 120, 1000]; // our reducer function var reducer = function add(sumSoFar, item) { return sumSoFar + item; }; // do the job var total = items.reduce(reducer, 0); console.log(total); // 1130 可以看出，reduce函数根据初始值0，不断的进行叠加，完成最简单的总和的实现。 前文中也提到