js代码

传统的js文件引用方法有很大缺点：首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。require.js的诞生，就是为了解决这两个问题： 使用require.js的第一步，是先去官方网站下载最新版本 http://requirejs.org/docs/download.html#requirejs 下载后，假定把它放在js子目录下面，就可以加载了。 <script src="js/require.js"></script> //有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： //async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 <script src="js/require.js" defer async="true" ></script> 加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了： //data

时间 2016-03-01 11:21:00 博客园-原创精华区 原文 http: // www.cnblogs.com/accordion/p/5230287.html 主题 JavaScript @(js) reduce函数，是ECMAScript5规范中出现的数组方法。在平时的工作中，相信大家使用的场景并不多，一般而言，可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现，虽然不清楚浏览器的js引擎是如何在C＋＋层面实现这两个方法，但是可以肯定的是reduce方法肯定也存在数组的遍历，在具体实现细节上是否针对数组项的操作和存储做了什么优化，则不得而知。 [TOC] 数组的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

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