![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端日常学习笔记
chengyu_wang
爱学习,爱编程,爱静静
展开
-
前端用户行为统计
最近工作中有这么一个需要,要在前端页面中插入一段JavaScript脚本,用于统计用户行为.这段脚本的主要目的是统计用户在页面中的停留时间与统计用户在哪些关键DOM标签上进行了操作.然后发向后台服务.中间用到了 onload与onbeforeunload事件. onunload事件由于兼容性问题没有使用. 因考虑到那些关键的DOM标签可能是利用了JavaScript动态加载而成的,所以利用了事件委托原创 2017-12-02 00:50:39 · 4934 阅读 · 3 评论 -
ES6 模块语法
ES6 模块语法 ES6 中引入了 export, import 来用于导入与导出。 export 导出 使用 export 关键字来导出一个变量(常量) export const someValue = 1234 export const someValue0 = '1234' export const someValue1 = {} export let someValue2 = 12...原创 2018-09-28 11:54:03 · 1028 阅读 · 0 评论 -
工作一年,重新思考闭包
功能 延长变量生存周期 一个经典的例子,这个时候我们就可以看到变量会随着函数的退出而随着作用域销毁。如果我们想要长久的保存这个变量怎么办,这个时候,我们就可以用到闭包了。 再举一个例子,我们都知道 Object.prototype.toString.call(this) === '[object XXXX]' 用来判断类型是一个非常好用的例子,如果我们需要判断多个类型的话。当然不...原创 2018-06-02 16:08:22 · 439 阅读 · 2 评论 -
HTTP 协商缓存
Last-Modified与If-Modified-Since 如果没有任何缓存策略,那么浏览器会默认开启它。这个时候,我们发起请求,那么就会看在 response 里有一个字段 Last-Modified: 然后下一次请求的时候,浏览器会就把这个 Last-Modified 中的内容加到 request 中。变成 If-Modified-Since 字段的内容。 这个时候,服务器...原创 2018-03-19 23:08:26 · 1464 阅读 · 0 评论 -
webpack学习笔记(一)
Webpack学习笔记安装Webpack因为webpack是在Node.js下运行的,所以,首先要确认电脑支持node.js然后使用npm安装webpacknpm install webpack -g创建项目创建工作目录,或者cd到工作目录下mkdir myWorkSpace单js文件打包cd到工作目录的js目录下,创建我们的js文件,并在其中写入自己要执行的代码然后我们在HTML引入bondle.原创 2017-04-27 15:13:31 · 307 阅读 · 0 评论 -
MarkDown 学习笔记
标题一级标题# 一级标题二级标题## 二级标题三级标题### 三级标题四级标题#### 四级标题 五级标题##### 五级标题 六级标题###### 六级标题 要使用标题的时候,输入标题前缀并加一个空格就可以,如果只是想输出#号,那么不加空格则不影响 换行要是想换行,那么在前一行的结尾加上两个空格再敲回车即可 列表无序列表在列表内容前面加上-或者*号.和标题一样,要加空格* 太阳 * 月原创 2017-04-30 07:04:38 · 301 阅读 · 0 评论 -
DOM详解
什么是DOM 是W3C组织推荐的处理可扩展标志语言的标准编程接口,在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM. 换句话说就是: DOM通过document提供一些能操作页面内容的属性与方法,赋予我们操作页面的能力DOM: Document Object MoelDOM结构graph LR document --> 根元素html 根元素h原创 2017-04-30 19:37:06 · 441 阅读 · 2 评论 -
Webpack学习笔记(二)
首先要cd到自己的项目目录下,然后使用npm创建项目npm init 编写自己的js文件webpack you.js bundle.js这样就能成功的打包了 在命令行中使用webpack要指定module时可以使用以下方法webpack you.js bundle.js --module-bind the_modelu_name简单的介绍几个常用的module’css=style-loader!c原创 2017-05-01 21:42:09 · 291 阅读 · 0 评论 -
webpack从入门到放弃
准备首先确实自己电脑安装了nodenode -v也可以使用命令把node升级到最新的稳定版npm i -g n n stable初始化项目mkdir demo cd demo npm init然后安装 webpacknpm install webpack -g这个时候,就全局安装了webpack命令,注意,只是全局安装了webpack命令,并不是指在任意项目下就可以直接使用webpack了,这个时候原创 2017-09-11 17:07:20 · 570 阅读 · 0 评论 -
搭建自己的ES6转ES5环境
首先新建一个项目目录mkdir demo cd demo安装相关插件npm init npm i -g babel-cli npm i babel-cli babel-preset-es2015 --save-dev创建一个src目录用于写es6代码,一个dist目录用于存储编译后的es5代码mkdir src mkdir dist编辑一个 .babelrc 文件用于设置基本配置{ "pre原创 2017-09-12 14:17:40 · 1161 阅读 · 0 评论 -
webpack3从入门到放肆(附demo)
最简单的demoGithub地址npm i webpack --save-dev添加入口与出口配置Github地址热更新与服务Github地址npm i webpack-dev-server --save-dev打包CSS文件Github地址npm i style-loader css-loader postcss-loader less-loader --save-devPS: 在入口文件中导入所原创 2017-11-25 19:21:07 · 373 阅读 · 0 评论 -
webpack 源码解析一之启航
webpack 源码解析 首先我们上 github 上面 clone 一份源码,我这里 clone 的是 4.30 版本的 webpack 源码 git clone https://github.com/webpack/webpack.git 起步 首先,看一个源码的初始步骤就是打开 package.json 找到它的入口文件"main": "lib/webpack.js", 确定了 ...原创 2019-05-17 14:42:36 · 686 阅读 · 0 评论