彻底搞懂并实现webpack热更新原理
彻底搞懂并实现webpack热更新原理
目录
HMR是什么
HMR
即Hot Module Replacement
是指当你对代码修改并保存后,webpack
将会对代码进行重新打包,并将改动的模块发送到浏览器端,浏览器用新的模块替换掉旧的模块,去实现局部更新页面而非整体刷新页面。接下来将从使用到实现一版简易功能带领大家深入浅出HMR
。
文章首发于@careteen/webpack-hmr ,转载请注明来源即可。
使用场景
如上图所示,一个注册页面包含用户名
、密码
、邮箱
三个必填输入框,以及一个提交
按钮,当你在调试邮箱
模块改动了代码时,没做任何处理情况下是会刷新整个页面,频繁的改动代码会浪费你大量时间去重新填写内容。预期是保留用户名
、密码
的输入内容,而只替换邮箱
这一模块。这一诉求就需要借助webpack-dev-server
的热模块更新功能。
相对于live reload
整体刷新页面的方案,HMR
的优点在于可以保存应用的状态,提高开发效率。
配置使用HMR
配置webpack
首先借助webpack
搭建项目
mkdir webpack-hmr && cd webpack-hmr
npm i -y
npm i -S webpack webpack-cli webpack-dev-server html-webpack-plugin
const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 开发模式不压缩代码,方便调试
entry: './src/index.js', // 入口文件
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
contentBase: path.join(__dirname, 'dist')
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
}
Webpack Hot Module Replacement
var root = document.getElementById('root')
function render () {
root.innerHTML = require('./content.js')
}
render()
新建依赖文件src/content.js
导出字符供index渲染页面
var ret = 'Hello Webpack Hot Module Replacement'
module.exports = ret
// export default ret
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
然后npm run dev
即可启动项目
通过npm run build
打包生成静态资源到dist
目录
接下来先分析下dist
目录中的文件
解析webpack打包后的文件内容
webpack自己实现的一套commonjs规范讲解
区分commonjs和esmodule
dist目录结构
.
├── index.html
└── main.js
其中index.html
内容如下
使用html-webpack-plugin
插件将入口文件及其依赖通过script
标签引入
先对main.js
内容去掉注释和无关内容进行分析
(function (modules) { // webpackBootstrap
// ...
})
({
"./src/content.js":
(function (module, exports) {
eval("var ret = 'Hello Webpack Hot Module Replacement'\n\nmodule.exports = ret\n// export default ret\n\n");
}),
"./src/index.js": (function (module, exports, __webpack_require__) {
eval("var root = document.getElementById('root')\nfunction render () {\n root.innerHTML = __webpack_require__(/*! ./content.js */ \"./src/content.js\")\n}\nrender()\n\n\n");
})
});
可见webpack打包后会产出一个自执行函数,其参数为一个对象
"./src/content.js": (function (module, exports) {
eval("...")
}
键为入口文件或依赖文件相对于根目录的相对路径,值则是一个函数,其中使用eval
执行文件的内容字符。
再进入自执行函数体内,可见webpack自己实现了一套commonjs
规范
(function (modules) {
// 模块缓存
var installedModules = {};
function __webpack_require__(moduleId) {
// 判断是否有缓存
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 没有缓存则创建一个模块对象并将其放入缓存
var module = installedModules[moduleId] = {
i: moduleId,
l: false, // 是否已加载
exports: {}
};
// 执行模块函数
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 将状态置为已加载
module.l = true;
// 返回模块对象
return module.exports;
}
// ...
// 加载入口文件
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
如果对上面
commonjs
规范感兴趣可以前往我的另一篇文章
手摸手带你实现commonjs规范
给出上面代码主要是先对webpack的产出文件混个眼熟,不要惧怕。其实任何一个不管多复杂的事物都是由更小更简单的东西组成,剖开它认识它爱上它。
配置HMR
接下来配置并感受一下热更新带来的便捷开发
webpack.config.js
配置
// ...
devServer: {
hot: true
}
// ...
./src/index.js
配置
// ...
if (module.hot) {
module.hot.accept(['./content.js'], () => {
render()
})
}
当更改./content.js
的内容并保存时,可以看到页面没有刷新,但是内容已经被替换了。
这对提高开发效率意义重大。接下来将一层层剖开它,认识它的实现原理。
HMR原理
如上图所示,右侧Server
端使用webpack-dev-server
去启动本地服务,内部实现主要使用了webpack
、express
、websocket
。
上图先只看个大概,下面将从服务端和客户端两个方面进行详细分析
debug服务端源码
现在也只需要关注上图的右侧服务端部分,左侧可以暂时忽略。下面步骤主要是debug服务端源码分析其详细思路,也给出了代码所处的具体位置,感兴趣的可以先行定位到下面的代码处设置断点,然后观察数据的变化情况。也可以先跳过阅读此步骤。
启动webpack-dev-server
服务器,源代码地址@webpack-dev-server/webpack-dev-server.js#L173
创建webpack实例,源代码地址@webpack-dev-server/webpack-dev-server.js#L89
创建Server服务器,源代码地址@webpack-dev-server/webpack-dev-server.js#L107
添加webpack的done事件回调,源代码地址@webpack-dev-server/Server.js#L122
编译完成向客户端发送消息,源代码地址@webpack-dev-server/Server.js#L184
创建express应用app,源代码地址@webpack-dev-server/Server.js#L123
设置文件系统为内存文件系统,源代码地址@webpack-dev-middleware/fs.js#L115
添加webpack-dev-middleware中间件,源代码地址@webpack-dev-server/Server.js#L125
中间件负责返回生成的文件,源代码地址@webpack-dev-middleware/middleware.js#L20
启动webpack编译,源代码地址@webpack-dev-middleware/index.js#L51
创建http服务器并启动服务,源代码地址@webpack-dev-server/Server.js#L135
使用sockjs在浏览器端和服务端之间建立一个 websocket 长连接,源代码地址@webpack-dev-server/Server.js#L745
创建socket服务器,源代码地址@webpack-dev-server/SockJSServer.js#L34
服务端简易实现
上面是我通过debug得出dev-server运行流程比较核心的几个点,下面将其抽象整合到一个文件中 。
启动webpack-dev-server服务器
先导入所有依赖
const path = require('path') // 解析文件路径
const express = require('express') // 启动本地服务
const mime = require('mime') // 获取文件类型 实现一个静态服务器
const webpack = require('webpack') // 读取配置文件进行打包
const MemoryFileSystem = require('memory-fs') // 使用内存文件系统更快,文件生成在内存中而非真实文件
const config = require('./webpack.config') // 获取webpack配置文件
创建webpack实例
const compiler = webpack(config)
compiler代表整个webpack编译任务,全局只有一个
创建Server服务器
class Server {
constructor(compiler) {
this.compiler = compiler
}
listen(port) {
this.server.listen(port, () => {
console.log(`服务器已经在${port}端口上启动了`)
})
}
}
let server = new Server(compiler)
server.listen(8000)
在后面是通过express来当启动服务的
添加webpack的done事件回调
constructor(compiler) {
let sockets = []
let lasthash
compiler.hooks.done.tap('webpack-dev-server', (stats) => {
lasthash = stats.hash
// 每当新一个编译完成后都会向客户端发送消息
sockets.forEach(socket => {
socket.emit('hash', stats.hash) // 先向客户端发送最新的hash值
socket.emit('ok') // 再向客户端发送一个ok
})
})
}
webpack
编译后提供提供了一系列钩子函数,以供插件能访问到它的各个生命周期节点,并对其打包内容做修改。compiler.hooks.done
则是插件能修改其内容的最后一个节点。
编译完成通过socket
向客户端发送消息,推送每次编译产生的hash
。另外如果是热更新的话,还会产出二个补丁文件,里面描述了从上一次结果到这一次结果都有哪些chunk和模块发生了变化。
使用let sockets = []
数组去存放当打开了多个Tab时每个Tab的socket实例
。
创建express应用app
let app = new express()
设置文件系统为内存文件系统
let fs = new MemoryFileSystem()
使用MemoryFileSystem
将compiler
的产出文件打包到内存中。
添加webpack-dev-middleware中间件
function middleware(req, res, next) {
if (req.url === '/favicon.ico') {
return res.sendStatus(404)
}
// /index.html dist/index.html
let filename = path.join(config.output.path, req.url.slice(1))
let stat = fs.statSync(filename)
if (stat.isFile()) { // 判断是否存在这个文件,如果在的话直接把这个读出来发给浏览器
let content = fs.readFileSync(filename)
let contentType = mime.getType(filename)
res.setHeader('Content-Type', contentType)
res.statusCode = res.statusCode || 200
res.send(content)
} else {
return res.sendStatus(404)
}
}
app.use(middleware)
使用expres启动了本地开发服务后,使用中间件去为其构造一个静态服务器,并使用了内存文件系统,使读取文件后存放到内存中,提高读写效率,最终返回生成的文件。
启动webpack编译
compiler.watch({}, err => {
console.log('又一次编译任务成功完成了')
})
以监控的模式启动一次webpack编译,当编译成功之后执行回调
创建http服务器并启动服务
constructor(compiler) {
// ...
this.server = require('http').createServer(app)
// ...
}
listen(port) {
this.server.listen(port, () => {
console.log(`服务器已经在${port}端口上启动了`)
})
}
使用sockjs在浏览器端和服务端之间建立一个 websocket 长连接
constructor(compiler) {
// ...
this.server = require('http').createServer(app)
let io = require('socket.io')(this.server)
io.on('connection', (socket) => {
sockets.push(socket)
socket.emit('hash', lastHash)
socket.emit('ok')
})
}
启动一个 websocket服务器,然后等待连接来到,连接到来之后存进sockets池
当有文件改动,webpack重新编译时,向客户端推送hash
和ok
两个事件
服务端调试阶段
感兴趣的可以根据上面debug服务端源码 所带的源码位置,并在浏览器的调试模式下设置断点查看每个阶段的值。
node dev-server.js
使用我们自己编译的dev-server.js
启动服务,可看到页面可以正常展示,但还没有实现热更新。
下面将调式客户端的源代码分析其实现流程。
debug客户端源码
现在也只需要关注上图的左侧客户端部分,右侧可以暂时忽略。下面步骤主要是debug客户端源码分析其详细思路,也给出了代码所处的具体位置,感兴趣的可以先行定位到下面的代码处设置断点,然后观察数据的变化情况。也可以先跳过阅读此步骤。
debug客户端源码分析其详细思路
webpack-dev-server/client端会监听到此hash消息,源代码地址@webpack-dev-server/index.js#L54
客户端收到ok的消息后会执行reloadApp方法进行更新,源代码地址index.js#L101
在reloadApp中会进行判断,是否支持热更新,如果支持的话发射webpackHotUpdate事件,如果不支持则直接刷新浏览器,源代码地址reloadApp.js#L7
在webpack/hot/dev-server.js会监听webpackHotUpdate事件,源代码地址dev-server.js#L55
在check方法里会调用module.hot.check方法,源代码地址dev-server.js#L13
HotModuleReplacement.runtime请求Manifest,源代码地址HotModuleReplacement.runtime.js#L180
它通过调用 JsonpMainTemplate.runtime的hotDownloadManifest方法,源代码地址JsonpMainTemplate.runtime.js#L23
调用JsonpMainTemplate.runtime的hotDownloadUpdateChunk方法通过JSONP请求获取到最新的模块代码,源代码地址JsonpMainTemplate.runtime.js#L14
补丁JS取回来后会调用JsonpMainTemplate.runtime.js的webpackHotUpdate方法,源代码地址JsonpMainTemplate.runtime.js#L8
然后会调用HotModuleReplacement.runtime.js的hotAddUpdateChunk方法动态更新模块代码,源代码地址HotModuleReplacement.runtime.js#L222
然后调用hotApply方法进行热更新,源代码地址HotModuleReplacement.runtime.js#L257 、HotModuleReplacement.runtime.js#L278
客户端简易实现
上面是我通过debug得出dev-server运行流程比较核心的几个点,下面将其抽象整合成一个文件 。
webpack-dev-server/client端会监听到此hash消息
在开发客户端功能之前,需要在src/index.html
中引入socket.io
下面连接socket并接受消息
let socket = io('/')
socket.on('connect', onConnected)
const onConnected = () => {
console.log('客户端连接成功')
}
let hotCurrentHash // lastHash 上一次 hash值
let currentHash // 这一次的hash值
socket.on('hash', (hash) => {
currentHash = hash
})
将服务端webpack每次编译所产生hash
进行缓存
客户端收到ok的消息后会执行reloadApp方法进行更新
socket.on('ok', () => {
reloadApp(true)
})
reloadApp中判断是否支持热更新
// 当收到ok事件后,会重新刷新app
function reloadApp(hot) {
if (hot) { // 如果hot为true 走热更新的逻辑
hotEmitter.emit('webpackHotUpdate')
} else { // 如果不支持热更新,则直接重新加载
window.location.reload()
}
}
在reloadApp中会进行判断,是否支持热更新,如果支持的话发射webpackHotUpdate事件,如果不支持则直接刷新浏览器。
在webpack/hot/dev-server.js会监听webpackHotUpdate事件
首先需要一个发布订阅去绑定事件并在合适的时机触发。
class Emitter {
constructor() {
this.listeners = {}
}
on(type, listener) {
this.listeners[type] = listener
}
emit(type) {
this.listeners[type] && this.listeners[type]()
}
}
let hotEmitter = new Emitter()
hotEmitter.on('webpackHotUpdate', () => {
if (!hotCurrentHash || hotCurrentHash == currentHash) {
return hotCurrentHash = currentHash
}
hotCheck()
})
会判断是否为第一次进入页面和代码是否有更新。
上面的发布订阅较为简单,且只支持先发布后订阅功能。对于一些较为复杂的场景可能需要先订阅后发布,此时可以移步
@careteen/event-emitter 。其实现原理也挺简单,需要维护一个离线事件栈存放还没发布就订阅的事件,等到订阅时可以取出所有事件执行。
在check方法里会调用module.hot.check方法
function hotCheck() {
hotDownloadManifest().then(update => {
let chunkIds = Object.keys(update.c)
chunkIds.forEach(chunkId => {
hotDownloadUpdateChunk(chunkId)
})
})
}
上面也提到过webpack每次编译都会产生hash值
、已改动模块的json文件
、已改动模块代码的js文件
,
此时先使用ajax
请求Manifest
即服务器这一次编译相对于上一次编译改变了哪些module和chunk。
然后再通过jsonp
获取这些已改动的module和chunk的代码。
调用hotDownloadManifest方法
function hotDownloadManifest() {
return new Promise(function (resolve) {
let request = new XMLHttpRequest()
//hot-update.json文件里存放着从上一次编译到这一次编译 取到差异
let requestPath = '/' + hotCurrentHash + ".hot-update.json"
request.open('GET', requestPath, true)
request.onreadystatechange = function () {
if (request.readyState === 4) {
let update = JSON.parse(request.responseText)
resolve(update)
}
}
request.send()
})
}
调用hotDownloadUpdateChunk方法通过JSONP请求获取到最新的模块代码
function hotDownloadUpdateChunk(chunkId) {
let script = document.createElement('script')
script.charset = 'utf-8'
// /main.xxxx.hot-update.js
script.src = '/' + chunkId + "." + hotCurrentHash + ".hot-update.js"
document.head.appendChild(script)
}
这里解释下为什么使用JSONP
获取而不直接利用socket
获取最新代码?主要是因为JSONP
获取的代码可以直接执行。
调用webpackHotUpdate方法
当客户端把最新的代码拉到浏览之后
window.webpackHotUpdate = function (chunkId, moreModules) {
// 循环新拉来的模块
for (let moduleId in moreModules) {
// 从模块缓存中取到老的模块定义
let oldModule = __webpack_require__.c[moduleId]
// parents哪些模块引用这个模块 children这个模块引用了哪些模块
// parents=['./src/index.js']
let {
parents,
children
} = oldModule
// 更新缓存为最新代码 缓存进行更新
let module = __webpack_require__.c[moduleId] = {
i: moduleId,
l: false,
exports: {},
parents,
children,
hot: window.hotCreateModule(moduleId)
}
moreModules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
module.l = true // 状态变为加载就是给module.exports 赋值了
parents.forEach(parent => {
// parents=['./src/index.js']
let parentModule = __webpack_require__.c[parent]
// _acceptedDependencies={'./src/title.js',render}
parentModule && parentModule.hot && parentModule.hot._acceptedDependencies[moduleId] && parentModule.hot._acceptedDependencies[moduleId]()
})
hotCurrentHash = currentHash
}
}
hotCreateModule的实现
实现我们可以在业务代码中定义需要热更新的模块以及回调函数,将其存放在hot._acceptedDependencies
中。
window.hotCreateModule = function () {
let hot = {
_acceptedDependencies: {},
dispose() {
// 销毁老的元素
},
accept: function (deps, callback) {
for (let i = 0; i < deps.length; i++) {
// hot._acceptedDependencies={'./title': render}
hot._acceptedDependencies[deps[i]] = callback
}
}
}
return hot
}
然后在webpackHotUpdate
中进行调用
parents.forEach(parent => {
// parents=['./src/index.js']
let parentModule = __webpack_require__.c[parent]
// _acceptedDependencies={'./src/title.js',render}
parentModule && parentModule.hot && parentModule.hot._acceptedDependencies[moduleId] && parentModule.hot._acceptedDependencies[moduleId]()
})
最后调用hotApply方法进行热更新
客户端调试阶段
经过上述实现了一个基本版的HMR,可更改代码保存的同时查看浏览器并非整体刷新,而是局部更新代码进而更新视图。在涉及到大量表单的需求时大大提高了开发效率。
问题
感兴趣的可前往
debug CommonJs规范 了解其实现原理。
webpack实现流程以及各个生命周期的作用是什么?
webpack主要借助了
tapable
这个库所提供的一系列同步/异步钩子函数贯穿整个生命周期。
基于此我实现了一版简易的
webpack ,源码100+行,食用时伴着注释很容易消化,感兴趣的可前往看个思路。
发布订阅的使用和实现,并且如何实现一个可先订阅后发布的机制?
上面也提到需要使用到发布订阅模式,且只支持先发布后订阅功能。对于一些较为复杂的场景可能需要先订阅后发布,此时可以移步
@careteen/event-emitter 。其实现原理也挺简单,需要维护一个离线事件栈存放还没发布就订阅的事件,等到订阅时可以取出所有事件执行。
为什么使用JSONP而不用socke通信获取更新过的代码?
因为通过socket通信获取的是一串字符串需要再做处理。而通过
JSONP
获取的代码可以直接执行。
引用
招聘
急缺前端,对搜狐焦点感兴趣的直接简历发我邮件或加我vx: Careteen
你可能感兴趣的:(javascript,webpack,热更新)
python中selenium中使用ajax_使用selenium和python捕获AJAX响应
weixin_39946534
我曾经截获了一些使用selenium向页面注入javascript的ajax调用.历史的不好的一面是,硒有时可能是,说“脆弱”.因此,无论如何我在进行注射时都会遇到硒异常.无论如何,我的想法是拦截XHR调用,并将其响应设置为我创建的一个新的dom元素,我可以从selenium操作.在拦截的条件下,你甚至可以使用发出请求的url来拦截你真正想要的那个(self._url)也许这有帮助.browser
(代码可运行)Bootstrap框架的HTML示例
程序员大侠
前端 CSS html bootstrap 前端
Bootstrap:一套流行的前端开发框架,基于HTML、CSS和JavaScript,适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例:BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
移动端测试
渔jy
Android系统及应用 android linux
三种移动端产品类型介绍移动端应用的测试其自身特点,和其他传统测试又有一些独特的测试方法与思路。移动端应用又可以进一步细分为三大类:WebApp指的是移动端的Web浏览器,其实和PC端的Web浏览器没有任何区别,只不过Web浏览器所依附的操作系统不再是Windows和Linux了,而是iOS和Android了。WebApp采用的技术主要是,传统的HTML、JavaScript、CSS等Web技术栈,
JavaScript 常用模块化规范
渡鸦七
JavaScript javascript 开发语言 ecmascript
JavaScript模块化规范1.模块化概述1.1什么时模块化将程序文件依据一定规则拆分成多个文件,这种编码方式就是模块化的编码方式。拆分出来每个文件就是一个模块,模块中的数据都是私有的,模块之间相互隔离。同事也能通过一些手段,可以把模块内的指定数据“交出去”,提供其他模块使用。1.2为什么使用模块化随着应用的复杂度越来越高,其代码量和文件数据都会急剧增加,会逐渐引发一些问题:全局污染问题。依赖混
深入探索从ES6到ES2023
hai40587
es6 前端 ecmascript
从ES6到ES2023,我们深入探索ECMAScript(简称ES)的演变与发展,了解这一JavaScript标准背后的技术革新和进步。ECMAScript作为JavaScript的标准化版本,每年都在不断推出新版本,为开发者带来更加丰富和强大的功能。本文将从ES6的引入开始,逐步介绍到最新的ES2023,同时探讨这些新特性对现代Web开发的影响。ECMAScript简介与JavaScript的关
我们在进行前后端联调的时候 如何避免数据丢失 拿不到返回数据 查看不了状态信息等问题?
朱道阳
底层原理 面试八股 回归 前端 npm git python
最近在进行前后端联调开发的全栈开发工作但是这时候会出现很多问题比如说前端拿不到数据获得的状态码可能是正确的传的值却是null我进行了学习总结出一下几点一、数据校验前端程序员必须对后端提供的数据进行严格的数据校验。数据校验的目的是确保接收到的数据符合预期的格式和类型。在JavaScript中,可以使用typeof操作符或Array.isArray()方法进行基本的类型检查。更复杂的数据结构,可以使用
WebKit 简介及工作流程深度解析
不知名靓仔
webkit chrome safari edge
WebKit是一个开源的浏览器引擎,最初由苹果公司为Safari浏览器开发,后来被多个浏览器和应用采纳,如早期的Chrome和众多移动平台上的浏览器。WebKit不仅仅是一个渲染引擎,它集成了HTML、CSS、JavaScript的解析与渲染能力,以及网络资源加载、图形处理、排版布局等功能,为用户提供丰富的网页浏览体验。本文将深入探讨WebKit的核心组件以及其复杂的工作流程。WebKit核心架构
JavaScript对象
yeyang111
1.varfram={framer:'小明',dogs:["小兔","小猫"],field:[2,3,4]}六角学院截图.png2.向对象里边增加varfram={framer1:'小明',dogs:["小兔","小猫"],field:[2,3,4]}fram.framer2='小蕴'可以在控制台发现增加了一个0X7M8BN7.png3.像对象里边增加函数(方法)varfram={framer1:
标题:深入理解 JavaScript 中的定时器
小刘|
javascript 前端 开发语言
目录一、定时器的基本概念1.setInterval2.setTimeout二、代码示例分析一、定时器的基本概念在JavaScript中,定时器是一种用于在特定时间间隔后执行代码或者重复执行代码的机制。主要包含两种类型的定时器:setInterval和setTimeout。1.setIntervalsetInterval()是一个周期函数,它会在指定的时间间隔后,重复执行指定的函数。例如:vari=
js函数eval()
温暖前端
javascript 前端 开发语言
1.eval()函数简介eval()是JavaScript中的一个全局函数,它可以将传入的字符串当作JavaScript代码来执行。eval()函数的基本语法如下:eval(string)其中,string是要执行的JavaScript代码字符串。eval()函数会返回最后一个表达式的结果。2.eval()的工作原理当调用eval()函数时,JavaScript解释器会执行以下步骤:a.解析传入的
JavaScript之OOP基础概念学习总结一:scopes
gaoshu883
这个系列的文章是去年在搭架完静态博客后撰写的(博客已经不再维护啦,哦还能访问)↓最近在探究JavaScript中的scopes概念。经过一番研究,我觉得要从Interpreter的角度,才能更好地理解这个概念。毕竟程序员主要是编写指令,而Interpreter则是把程序员编写的代码一行一行读下去并翻译出来(执行出来),最终结果就会直接反映在Web浏览器的页面上。不过还要注意的是,并不是所有的sco
Puppeteer Heap Snapshot: 探索JavaScript内存世界的利器
金畏战Goddard
PuppeteerHeapSnapshot:探索JavaScript内存世界的利器puppeteer-heap-snapshotadriancooney/puppeteer-heap-snapshot:puppeteer-heap-snapshot是一个Node.js包,提供了通过Puppeteer获取浏览器内存堆快照的功能,以辅助JavaScript应用的内存泄漏检测和性能优化工作。项目地址:h
Puppeteer-Sign:自动化网页签名解决方案
杭臣磊Sibley
Puppeteer-Sign:自动化网页签名解决方案项目简介是一个基于谷歌的Puppeteer库开发的工具,用于自动化处理网页表单的签名过程。它模拟了真实用户的交互行为,可以用于需要电子签名的各种场景,比如在线合同签署、文档审批等。项目以JavaScript编写,易于集成到Web应用或者CI/CD流程中。技术分析Puppeteer库Puppeteer是由GoogleChrome团队维护的一个Nod
判断PDF与图片是否可以预览
马优晨
判断PDF是否可以预览 判断图片是否可以预览 PDF是否可以预览 图片是否可以预览 js判断PDF是否可以预览
一、判断图片是否可以预览在JavaScript中,可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载,那么load事件会被触发;如果图片无法访问,error事件会被触发。functioncheckImageAccessibility(url,callback){varimg=newImage();img.onload=function(){callback(true);//
jswebrtc 支持 SRS 的 Webrtc 播放器
王小工
前端 webrtc js
WebRTCWebRTC(WebReal-TimeCommunication)是一项实时通讯技术,它允许网络应用或站点在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流、音频流或其他任意数据的传输。WebRTC整体架构从上到下一共分为三层:WebAPI层:暴露给开发人员的用于开发WebRTC应用的JavaScriptAPI,如RTCPeerConnecti
ECMAScript简介
老四点COM
ecmascript 前端 开发语言
前言ECMAScript(通常简称为ES)由ECMA国际标准化组织制定的一种脚本语言标准,Netscape最初开发的JavaScript演变而来。ECMAScript为JavaScript提供了基础语言结构和功能。最初设计成一种脚本语言,用来服务Web。作为脚本语言ES同时具备其他脚本语言一样的性质。一、发展历史ECMAScript的历史可以追溯到1995年12月,当时升阳与网景联合推出了Java
Webpack4-配置
16325
module.rule.parser解析选项对象。所有应用的解析选项都将合并。解析器(parser)可以查阅这些选项,并相应地禁用或重新配置。大多数默认插件,会如下解释值:将选项设置为false,将禁用解析器。将选项设置为true,或不修改将其保留为undefined,可以启用解析器。然而,一些解析器(parser)插件可能不光只接收一个布尔值。例如,内部的NodeStuffPlugin差距,可以
JS中const有没有变量提升
北原_春希
javascript 前端 开发语言
在JavaScript中,const关键字用于声明一个只读的常量,其值在初始化后不能被重新赋值。关于变量提升(Hoisting),它是JavaScript中一个重要的概念,指的是无论变量或函数声明在何处,它们都会被“提升”到其所在作用域的最顶部。但是,这个规则不完全适用于const和let声明的变量。变量提升(Hoisting)的传统理解在ES6之前,JavaScript只有var关键字用于声明变
js知识总结
软件技术NINI
js javascript vue.js 前端
JavaScript(JS)是一种广泛使用的编程语言,主要用于网页开发,但也适用于非浏览器环境(如Node.js)。它支持面向对象、命令式、声明式(如通过函数式编程)和事件驱动式编程风格。以下是对JavaScript核心知识的一个总结:1.基础语法变量:使用var、let、const声明变量。let和const具有块级作用域,而var具有函数作用域或全局作用域。数据类型:包括原始类型(如Strin
Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统
计算机程序优异哥
针对海量的新闻资讯数据,如何快速的根据用户的检索需要,完成符合用户阅读需求的新闻资讯推荐?本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐,通过余弦相似度算法完成针对不同新闻数据之间的相似性计算,实现分类标签。通过协同过滤算法发现具备相似阅读习惯的用户,展开个性化推荐。本次新闻推荐系统:主要包含技术:springboot,mybatis,mysql,javascript,vue.js,
修改打包后element-ui的字体文件名;JS文件名;CSS文件名
静纸~
vue.js 前端 javascript
修改这些静态文件名的原因是客户那边扫描出漏洞:字体文件名称不符合安全规则,就想办法给全部重新命名修改字体文件该方法不起作用——在vue.config.js里面配置打包时的fonts名称;其他场景下可能会适用记录一下constTimestamp=newDate().getTime();chainWebpack(config){config.module.rule("fonts").test(/\.(
Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南
陈马登Morden
本文还有配套的精品资源,点击获取简介:Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目,专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用,学习者将掌握JavaScript基础语法和Dojo工具集的使用,涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理
Qt Creator
morcake
qt 开发语言
QtCreator是一个跨平台的C++、JavaScript和QML集成开发环境,它简化了GUI应用的开发。支持用户在Linux、Mac以及Windows系统上使用,它是QtGUI应用开发框架的SDK的一部分。该编辑器具有语法高亮和自动补全等功能。Qt(/ˈkjuːt/,发音同“cute”[4][5][6])是一个跨平台的C++应用程序开发框架。广泛用于开发GUI程序,这种情况下又被称为部件工具箱
React css自动原子化
qq_42274451
javascript 前端
开篇闲来无事,开发一个css自动原子化工具玩玩。本文仅为实现思路,如有改进地方希望各位积极评论交流。背景现有的css原子化方案对于开发者不算友好。开发者很难记得所有原子化样式。对于不常用的样式需要进行配置。效果打包效果对比原子化前->原子化后(gzip压缩之前,由于css原子化之后gzip压缩比率降低,导致效果没有压缩前明显)以下为原子化完成后webpack打包出的代码片段打包后部分js片段打包后
Yarn:一个快速、可靠且安全的JavaScript包管理工具
小周不想卷
# 前端node.js入门 yarn
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,还请三连支持一波哇ヾ(@^∇^@)ノ)目录一、Yarn简介二、Yarn的安装1.使用npm安装Yarn2.在macOS上使用Homebrew安装Yarn3.在Windows上使用Chocolatey安装Yarn4.在Linux上使用包管理器安装Yarn三、Yarn的配置1.全局配置2.项目配置四、Yarn的基本用法1.初始化
JSON:轻量级的数据交换格式
Tsingfeng.
基础释疑 json
JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生
【华为OD统一考试B卷 | 100分】 快递运输(C++ Java JavaScript Python)
她与残局皆遗憾..
图灵学院 java 架构 开发语言
华为OD统一考试A卷+B卷新题库说明2023年5月份,华为官方已经将的2022/0223Q(1/2/3/4)统一修改为OD统一考试(A卷)和OD统一考试(B卷)。你收到的链接上面会标注A卷还是B卷。请注意:根据反馈,目前大部分收到的都是B卷。但是仍有概率抽到A卷。A卷对应2023的新题库(2022Q420223Q1)B卷对应20022部分考题以及新出的题目专栏:2023华为OD机试(A卷+B卷)(
JavaScript Promise
我是一个粉刷酱
浏览器支持推荐使用Chrome以及Firefox浏览器开局放图,忍不住吐槽一下----垃圾IE!!。什么是PromiseThePromiseobjectrepresentstheeventualcompletion(orfailure)ofanasynchronousoperation,anditsresultingvalue.Promise对象表示异步操作的最终完成(或失败)及其结果值。也就是说
探索 PubSubJS:高效的消息发布/订阅库
甄如冰Lea
探索PubSubJS:高效的消息发布/订阅库PubSubJSDependencyfreepublish/subscribeforJavaScript项目地址:https://gitcode.com/gh_mirrors/pu/PubSubJS在现代前端开发中,组件间的通信是一个常见且重要的问题。PubSubJS是一个基于JavaScript的轻量级、高效的消息发布/订阅库,它通过主题(topic)
JavaScript设计模式(装饰器模式)
Wsr_ecc6
1.装饰器模式的定义在不改变其原有的结构和功能为对象添加新功能。classCoffee{make(water){return`${water}+咖啡`;}cost(){return10;}}classMilkCoffee{constructor(parent){this.parent=parent;}make(water){return`${this.parent.make(water)}+牛奶`
如何用ruby来写hadoop的mapreduce并生成jar包
wudixiaotie
mapreduce
ruby来写hadoop的mapreduce,我用的方法是rubydoop。怎么配置环境呢:
1.安装rvm:
不说了 网上有
2.安装ruby:
由于我以前是做ruby的,所以习惯性的先安装了ruby,起码调试起来比jruby快多了。
3.安装jruby:
rvm install jruby然后等待安
java编程思想 -- 访问控制权限
百合不是茶
java 访问控制权限 单例模式
访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问
一:包访问权限;
自定义包:
package com.wj.control;
//包
public class Demo {
//定义一个无参的方法
public void DemoPackage(){
System.out.println("调用
[生物与医学]请审慎食用小龙虾
comsci
生物
现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....
所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质
org.apache.jasper.JasperException: Unable to compile class for JSP:
商人shang
maven 2.2 jdk1.8
环境: jdk1.8 maven tomcat7-maven-plugin 2.0
原因: tomcat7-maven-plugin 2.0 不知吃 jdk 1.8,换成 tomcat7-maven-plugin 2.2就行,即
<plugin>
你的垃圾你处理掉了吗?GC
oloz
GC
前序:本人菜鸟,此文研究学习来自网络,各位牛牛多指教
1.垃圾收集算法的核心思想
Java语言建立了垃圾收集机制,用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险:因内存垃圾过多而引发的内存耗尽,以及不恰当的内存释放所造成的内存非法引用。
垃圾收集算法的核心思想是:对虚拟机可用内存空间,即堆空间中的对象进行识别
shiro 和 SESSSION
杨白白
shiro
shiro 在web项目里默认使用的是web容器提供的session,也就是说shiro使用的session是web容器产生的,并不是自己产生的,在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起,这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID,当关闭浏览器,此
移动互联网终端 淘宝客如何实现盈利
小桔子
移動客戶端 淘客 淘寶App
2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元,同比增长100%。而来自移动端的分成达1亿元,其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出,虽然目前阶段PC端对于淘客而言仍旧是盈利的大头,但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机,平板)的加速普及而更加迅猛
wordpress小工具制作
aichenglong
wordpress 小工具
wordpress 使用侧边栏的小工具,很方便调整页面结构
小工具的制作过程
1 在自己的主题文件中新建一个文件夹(如widget),在文件夹中创建一个php(AWP_posts-category.php)
小工具是一个类,想侧边栏一样,还得使用代码注册,他才可以再后台使用,基本的代码一层不变
<?php
class AWP_Post_Category extends WP_Wi
JS微信分享
AILIKES
js
// 所有功能必须包含在 WeixinApi.ready 中进行
WeixinApi.ready(function(Api) {
// 微信分享的数据
var wxData = {
&nb
封装探讨
百合不是茶
JAVA面向对象 封装
//封装 属性 方法 将某些东西包装在一起,通过创建对象或使用静态的方法来调用,称为封装;封装其实就是有选择性地公开或隐藏某些信息,它解决了数据的安全性问题,增加代码的可读性和可维护性
在 Aname类中申明三个属性,将其封装在一个类中:通过对象来调用
例如 1:
//属性 将其设为私有
姓名 name 可以公开
jquery radio/checkbox change事件不能触发的问题
bijian1013
JavaScript jquery
我想让radio来控制当前我选择的是机动车还是特种车,如下所示:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
AngularJS中安全性措施
bijian1013
JavaScript AngularJS 安全性 XSRF JSON漏洞
在使用web应用中,安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制,用来防护来自两个常见攻击方向的网络攻击。
一.JSON漏洞
当使用一个GET请求获取JSON数组信息的时候(尤其是当这一信息非常敏感,
[Maven学习笔记九]Maven发布web项目
bit1129
maven
基于Maven的web项目的标准项目结构
user-project
user-core
user-service
user-web
src
【Hive七】Hive用户自定义聚合函数(UDAF)
bit1129
hive
用户自定义聚合函数,用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。
问题:UDF也可以提供输入多个参数然后输出一个结果的运算,比如加法运算add(3,5),add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么?
Double evaluate(Double a, Double b)
通过 nginx-lua 给 Nginx 增加 OAuth 支持
ronin47
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGeek 在过去几年中取得了发展,我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块,比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中,我们使用了几个不同的接口来认证:
&n
利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法
bsr1983
session
在利用tomcat-redis-session-manager做session同步时,遇到了在session保存一个自定义对象时,修改该对象中的某个属性,session未进行序列化,属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明: Session Change Tracking
As noted in the &qu
《代码大全》表驱动法-Table Driven Approach-1
bylijinnan
java 算法
关于Table Driven Approach的一篇非常好的文章:
http://www.codeproject.com/Articles/42732/Table-driven-Approach
package com.ljn.base;
import java.util.Random;
public class TableDriven {
public
Sybase封锁原理
chicony
Sybase
昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定,不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据,因此立马着手解决该表的解锁问题。 无奈此前没有接触过Sybase IQ12.7这套数据库产品,加之当时已属于下班时间无法求助于支持人员支持,因此只有借助搜索引擎强大的
java异常处理机制
CrazyMizzz
java
java异常关键字有以下几个,分别为 try catch final throw throws
他们的定义分别为
try: Opening exception-handling statement.
catch: Captures the exception.
finally: Runs its code before terminating
hive 数据插入DML语法汇总
daizj
hive DML 数据插入
Hive的数据插入DML语法汇总1、Loading files into tables语法:1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释:1)、上面命令执行环境为hive客户端环境下: hive>l
工厂设计模式
dcj3sjt126com
设计模式
使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式
工厂模式(Factory)允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。
Example #1 调用工厂方法(带参数)
<?phpclass Example{
mysql字符串查找函数
dcj3sjt126com
mysql
FIND_IN_SET(str,strlist)
假如字符串str 在由N 子链组成的字符串列表strlist 中,则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串,而第二个是type SET列,则 FIND_IN_SET() 函数被优化,使用比特计算。如果str不在strlist 或st
jvm内存管理
easterfly
jvm
一、JVM堆内存的划分
分为年轻代和年老代。年轻代又分为三部分:一个eden,两个survivor。
工作过程是这样的:e区空间满了后,执行minor gc,存活下来的对象放入s0, 对s0仍会进行minor gc,存活下来的的对象放入s1中,对s1同样执行minor gc,依旧存活的对象就放入年老代中;
年老代满了之后会执行major gc,这个是stop the word模式,执行
CentOS-6.3安装配置JDK-8
gengzg
centos
JAVA_HOME=/usr/java/jdk1.8.0_45
JRE_HOME=/usr/java/jdk1.8.0_45/jre
PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
export JAVA_HOME
【转】关于web路径的获取方法
huangyc1210
Web 路径
假定你的web application 名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果: 1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
php里获取第一个中文首字母并排序
远去的渡口
数据结构 PHP
很久没来更新博客了,还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算,需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的:
Array
(
[0] => Array
(
[sid] => 2885842
[recetcstoredpay] =&g
java内部类
hm4123660
java 内部类 匿名内部类 成员内部类 方法内部类
在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类。内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类,外部类继承一个类,实现多继承。
&nb
Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten
zhb8015
maven pom.xml关于hibernate的配置和异常信息如下,查了好多资料,问题还是没有解决。只知道是包冲突,就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。
maven pom:
<dependency>
<groupId>org.hibernate</groupId>
<ar
Spark 性能相关参数配置详解-任务调度篇
Stark_Summer
spark cache cpu 任务调度 yarn
随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。
由于篇幅较长,所以在这里分篇组织,如果要看最新完整的网页版内容,可以戳这里:http://spark-config.readthedocs.org/,主要是便
css3滤镜
wangkeheng
html css
经常看到一些网站的底部有一些灰色的图标,鼠标移入的时候会变亮,开始以为是js操作src或者bg呢,搜索了一下,发现了一个更好的方法:通过css3的滤镜方法。
html代码:
<a href='' class='icon'><img src='utv.jpg' /></a>
css代码:
.icon{-webkit-filter: graysc