Eric_zhangb-CSDN博客

原创 webpack源码打包文件分析-异步加载

打包前文件index.js文件import('./bundle/a').then((add) => { console.log('add---')})a.js文件const add = function (a, b) { return a + b}export default add使用webpack的mode为development打包第一步加载__webpack_require__(__webpack_require__.s = "./index.js")

2020-12-17 20:24:11 296

原创 element-ui icons源码

element ui icons实现使用unicode引入在icon.scss中第一步引入iconsfont地址// An highlighted block@font-face { font-family: 'element-icons'; src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */ url('#{$--font-path}/element-icon

2020-12-10 15:27:52 663 1

原创 d3问题

d3之zoom问题：在d3的v3版本中，左右键均能实现画布拖动（pan）事件，但在v4版本时，默认只能左键拖动，右键拖动事件已默认禁止在项目中，因为左键要加入brush框选功能，所以需要右键拖动，左键禁止。查阅资料stackoverflow.使用zoom.filter可解决此问题代码如下 let zoom = d3.zoom() // v4版本打...

2018-11-09 18:24:21 388

原创 es6之class封装

传统的面向对象语言（比如 C++ 和 Java）是通过class类来生成实例对象，javascript则是通过构造函数+prototype来封装，所以，js在es6引入了class类的概念用class定义一个类//定义类class Point { constructor(x, y) { // this关键字则代表实例对象 this.x = x; this.y = y;

2018-02-02 18:14:22 7518

原创 devserver之自动刷新

我们知道，webpack模块负责监听文件，webpack-dev-server模块则负责刷新浏览器，本文则详细讲述这两种原理文件监听相关配置module.export = { // 只有开启监听模式时，watchoptions才有意义 // 默认是 false，也就是不开启 watch: true, // 监听模式开启时，watchOptions才有意义

2018-01-29 18:41:21 1848

原创加载调试本地loader

在开发loader的过程中，为了测试编写的loader能否正常工作，需要将它配置到webpack中，才可能调用该loader，为此，需要先将编写的loader发布到npm仓库，再安装到本地项目中使用，但这种方法会很麻烦，解决以上问题的便捷方法有如下两种：npm linknpm link 专门用于开发和调试本地的npm 模块，能做到在不发布模块的情况下，将本地的一个正在开发的模块的源码链接到

2018-01-29 14:57:24 2002

原创 babel

Babel介绍Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。在新的javascript得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。而不用担心环境是否支持。不过 Babel 的用途并不止于此，它支持语法扩展，能支持像 React 所用的 JSX

2018-01-26 17:28:15 1394

原创 CommonJS 规范

1、概述module.exports输出变量和函数var a = 5;var add = function (value) { return value + a;};module.exports.a = a;module.exports.add = add;每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口

2018-01-10 15:10:02 2223

原创 HMR(热替换)

HMR 即模块热替换（hot module replacement）的简称，它可以在应用运行的时候，不需要刷新页面，就可以直接替换、增删模块。webpack 可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局的 HMR 能力， plugins: [ new webpack.DefinePlugin({ 'process.env'

2018-01-05 16:20:21 10842

原创解决阻塞效应之defer和async

1、正常的网页加载流程1. 浏览器一边下载HTML网页，一边开始解析 2. 解析过程中，发现<script>标签 3. 暂停解析，网页渲染的控制权转交给JavaScript引擎 4. 如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行 5. 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页如果外部脚本加载时间很长（比如一直无法完成下载），就会造成

2018-01-03 17:56:59 3587

原创移动设备API之入门

移动设备API1、Permission API用来查询某个接口的许可情况// 查询地理位置接口的许可情况navigator.permissions.query({ name: 'geolocation' }).then(function(result) { // 状态为 prompt，表示查询地理位置时， // 用户会得到提示，是否许可本次查询 /* result.status =

2018-01-03 17:00:24 1253

原创 ES6之symbol()

ES6之symbol()什么是 Symbol ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

2017-12-29 11:42:37 253

原创 ios 中 localstorage有时失效的问题

ios中由子页面setItem值，history.back返回主页面，有时会get不到item值，查询外文资料知道 localstory值仍然是存在的，但是setItem会报异常 quotaExceededError，所以在返回主页面后getItem和removeItem会被忽略。针对以上问题我们可以用store.js来解决。store.js 是一个兼容所有浏览器的 Loc

2017-08-04 19:48:06 20323 3

原创 js 页面history.back()返回上一页，ios 不重新加载ready的解决办法

项目中，主页面有很多输入字段，当由主页跳转到子页面，将子页面的字段 set入localstorage中，由于返回主页面不能将先前输入的字段刷新掉，所以必须要在子页面history.back()。但由于ios和安卓机制不同，安卓会重新刷新主页面的ready， ios则不会。解决方案如下：在进入主页js后$(function () { var isPageHide =

2017-08-04 19:24:41 15550 1

hbts_901111zb的博客