ForeverCjl
ForeverCjl

初识 ServiceWorker

初识ServiceWorker

初识ServiceWorker

在8月份的时候，W3C更新了一个叫Service Workers的API。

了解过HTML5中的Web Worker的人可能会对这个API会更容易理解一些，不然的话会将这两个API搞混。

其实，Service Worker是基于Web Worker的事件驱动的，他们执行的机制都是新开一个线程去处理一些额外的，以前不能直接处理的任务。对于Web Worker，我们可以使用它来进行复杂的计算，因为它并不阻塞浏览器主线程的渲染。而Service Worker，我们可以用它来进行本地缓存，相当于一个本地的proxy。说起缓存，我们会想起我们常用的一些缓存技术来缓存我们的静态资源，但是老的方式是不支持调试的，灵活性不高。使用Service Worker来进行缓存，我们可以用javascript代码来拦截浏览器的http请求，并设置缓存的文件，直接返回，不经过web服务器，然后，做更多你想做的事情。

因此，我们可以开发基于浏览器的离线应用。这使得我们的web应用减少对网络的依赖。例如，我们开发了一个新闻阅读的web应用，当你用手机浏览器在有网络的情况下打开时，你可以正常的获取新闻内容。可是，如果手机进入飞行模式，那这个应用你就没法使用了。

如果我们使用了Service Worker做缓存，浏览器http请求会先经过Service Worker，通过url mapping去匹配，如果匹配到了，则使用缓存数据，如果匹配失败，则继续执行你指定的动作。一般情况下，匹配失败则让页面显示“网页无法打开”。

上面是Service Worker的基本使用场景，当然，不仅仅局限于数据缓存。

下面来看一个简单的示例：

/index.html

       
       
       
       

        
        
        
        1
       
       
       
       

       
       
       
       

        
        
        
        2
       
       
       
       

       
       
       
       

        
        
        
        3
       
       
       
       

       
       
       
       

        
        
        
        4
       
       
       
       

       
       
       
       

        
        
        
        5
       
       
       
       

       
       
       
       

        
        
        
        6
       
       
       
       

       
       
       
       

        
        
        
        7
       
       
       
       

       
       
       
       

        
        
        
        8
       
       
       
       

       
       
       
       

        
        
        
        9
       
       
       
       

       
       
       
       

        
        
        
        10
       
       
       
       

       
       
       
       

        
        
        
        11
       
       
       
       

       
       
       
       

        
        
        
        12
       
       
       
       

       
       
       
       

        
        
        
        13
       
       
       
       

       
       
       
       

        
        
        
        14
       
       
       
       

       
       
       
       

        
        
        
        15
       
       
       
       

       
       
       
       

        
        
        
        16
       
       
       
       
       
       
       
       

        
        
        
        <!DOCTYPE html>
       
       
       
       

       
       
       
       

        
        
        
        <html lang="en">
       
       
       
       

       
       
       
       
  
        
        
        
        <head>
       
       
       
       

       
       
       
       
    
        
        
        
        <meta charset="utf-8">
       
       
       
       

       
       
       
       
    
        
        
        
        <script>
        
        
        
        
       
       
       
       

       
       
       
       
        
        
        
        
        // scope defaults to "/*"
       
       
       
       

       
       
       
       

        
        
        
                navigator.serviceWorker.register(
        
        
        
        "/service-worker.js").then(
        
        
        
        function(serviceWorker) {
       
       
       
       

       
       
       
       
            
        
        
        
        console.log(
        
        
        
        "success!");
       
       
       
       

       
       
       
       
            
        
        
        
        // To use the serviceWorker immediately,
       
       
       
       

       
       
       
       
            
        
        
        
        // you might call window.location.reload()
       
       
       
       

       
       
       
       

        
        
        
                });
       
       
       
       

       
       
       
       
    
        
        
        
        </script>
       
       
       
       

       
       
       
       
  
        
        
        
        </head>
       
       
       
       

       
       
       
       
  
        
        
        
        <body>
       
       
       
       

       
       
       
       
  
        
        
        
        </body>
       
       
       
       

       
       
       
       

        
        
        
        </html>

在chrome中的console中输入navigator.serviceWorker你会发现返回的undefined。这可能是因为你chrome的版本小于36，或者你没有打开这个功能。所以先确保你的chrome升级到了36以上。然后进入chrome://flags/中将ServiceWorker开关打开，如下图：
ServiceWorker
确保以上两个步骤都完成后，就可以在控制台看到返回值：
ServiceWorker

上面的代码中，给serviceWorker注册了一个叫service-worker.js的文件，这里采用的promise写法。当注册成功后，会执行then里面的回调函数。

下面看看service-worker.js

       
       
       
       

        
        
        
        1
       
       
       
       

       
       
       
       

        
        
        
        2
       
       
       
       

       
       
       
       

        
        
        
        3
       
       
       
       

       
       
       
       

        
        
        
        4
       
       
       
       

       
       
       
       

        
        
        
        5
       
       
       
       

       
       
       
       

        
        
        
        6
       
       
       
       

       
       
       
       

        
        
        
        7
       
       
       
       

       
       
       
       

        
        
        
        8
       
       
       
       

       
       
       
       

        
        
        
        9
       
       
       
       

       
       
       
       

        
        
        
        10
       
       
       
       

       
       
       
       

        
        
        
        11
       
       
       
       

       
       
       
       

        
        
        
        12
       
       
       
       

       
       
       
       

        
        
        
        13
       
       
       
       

       
       
       
       

        
        
        
        14
       
       
       
       

       
       
       
       

        
        
        
        15
       
       
       
       

       
       
       
       

        
        
        
        16
       
       
       
       

       
       
       
       

        
        
        
        17
       
       
       
       

       
       
       
       

        
        
        
        18
       
       
       
       

       
       
       
       

        
        
        
        19
       
       
       
       

       
       
       
       

        
        
        
        20
       
       
       
       

       
       
       
       

        
        
        
        21
       
       
       
       

       
       
       
       

        
        
        
        22
       
       
       
       

       
       
       
       

        
        
        
        23
       
       
       
       

       
       
       
       

        
        
        
        24
       
       
       
       

       
       
       
       

        
        
        
        25
       
       
       
       

       
       
       
       

        
        
        
        26
       
       
       
       

       
       
       
       

        
        
        
        27
       
       
       
       

       
       
       
       

        
        
        
        28
       
       
       
       

       
       
       
       

        
        
        
        29
       
       
       
       

       
       
       
       

        
        
        
        30
       
       
       
       

       
       
       
       

        
        
        
        31
       
       
       
       

       
       
       
       

        
        
        
        32
       
       
       
       

       
       
       
       

        
        
        
        33
       
       
       
       

       
       
       
       

        
        
        
        34
       
       
       
       

       
       
       
       

        
        
        
        35
       
       
       
       

       
       
       
       

        
        
        
        36
       
       
       
       

       
       
       
       

        
        
        
        37
       
       
       
       

       
       
       
       

        
        
        
        38
       
       
       
       
       
       
       
       

        
        
        
        this.oninstall = 
        
        
        
        function(e) {
       
       
       
       

       
       
       
       
    
        
        
        
        // Create a cache of resources.
       
       
       
       

       
       
       
       
    
        
        
        
        var resources = 
        
        
        
        new Cache();
       
       
       
       

       
       
       
       
    
        
        
        
        var visited = 
        
        
        
        new Cache();
       
       
       
       

       
       
       
       
    
        
        
        
        // Fetch them.
       
       
       
       

       
       
       
       

        
        
        
            e.waitUntil(resources.add(
       
       
       
       

       
       
       
       
        
        
        
        
        "/index.html",
       
       
       
       

       
       
       
       
        
        
        
        
        "/fallback.html",
       
       
       
       

       
       
       
       
        
        
        
        
        "/css/base.css",
       
       
       
       

       
       
       
       
        
        
        
        
        "/js/app.js",
       
       
       
       

       
       
       
       
        
        
        
        
        "/img/logo.png"
       
       
       
       

       
       
       
       

        
        
        
            ).then(
        
        
        
        function() {
       
       
       
       

       
       
       
       
        
        
        
        
        // Add caches to the global caches.
       
       
       
       

       
       
       
       
        
        
        
        
        return Promise.all([
       
       
       
       

       
       
       
       

        
        
        
                    caches.set(
        
        
        
        "v1", resources),
       
       
       
       

       
       
       
       

        
        
        
                    caches.set(
        
        
        
        "visited", visited)
       
       
       
       

       
       
       
       

        
        
        
                ]);
       
       
       
       

       
       
       
       

        
        
        
            }));
       
       
       
       

       
       
       
       

        
        
        
        };
       
       
       
       

       
       
       
       
 
       
       
       
       

       
       
       
       

        
        
        
        this.onfetch = 
        
        
        
        function(e) {
       
       
       
       

       
       
       
       

        
        
        
            e.respondWith(
       
       
       
       

       
       
       
       
        
        
        
        
        // Check to see if request is found in cache
       
       
       
       

       
       
       
       

        
        
        
                caches.match(e.request).catch(
        
        
        
        function() {
       
       
       
       

       
       
       
       
            
        
        
        
        // It's not? Prime the cache and return the response.
       
       
       
       

       
       
       
       
            
        
        
        
        return caches.get(
        
        
        
        "visited").then(
        
        
        
        function(visited) {
       
       
       
       

       
       
       
       
                
        
        
        
        return fetch(e.request).then(
        
        
        
        function(response) {
       
       
       
       

       
       
       
       

        
        
        
                            visited.put(e.request, response);
       
       
       
       

       
       
       
       
                    
        
        
        
        // Don't bother waiting, respond already.
       
       
       
       

       
       
       
       
                    
        
        
        
        return response;
       
       
       
       

       
       
       
       

        
        
        
                        });
       
       
       
       

       
       
       
       

        
        
        
                    });
       
       
       
       

       
       
       
       

        
        
        
                }).catch(
        
        
        
        function() {
       
       
       
       

       
       
       
       
            
        
        
        
        // Connection is down? Simply fallback to a pre-cached page.
       
       
       
       

       
       
       
       
            
        
        
        
        return caches.match(
        
        
        
        "/fallback.html");
       
       
       
       

       
       
       
       

        
        
        
                });
       
       
       
       

       
       
       
       

        
        
        
            );
       
       
       
       

       
       
       
       

        
        
        
        };

oninstall：当worker装载完毕时执行

在oninstall的回调函数中，将一些需要缓存的静态的文件写入全局的cache对象中。

onfetch：当接收到用户的请求时执行

通过e.request去匹配缓存中的静态文件，如果匹配到，则将这个缓存文件返回，如果未匹配到，则被catch获取，将请求释放（去请求真正的服务器），并将这个新文件缓存到全局cache。这里也是用到了promise写法。

在我看来，用ServiceWorker做缓存就相当于一个proxy，可以拦截http请求，这样你可以对请求做一下定制化的需求。即使在无网络的情况下，ServiceWorker也可以被当做一个http服务器一样返回前端所需要的数据。

上面是我对ServiceWorker的一些参考和理解。目前相关的中英文资料还比较少，主要还是得看W3C的介绍。

参考资料：
ServiceWorker简单例子

Github上一些代码

W3C ServiceWorkers

文章作者：foreverpx
文章原文链接：初识ServiceWorker

你可能感兴趣的:(JavaScript,html5,cache,chrome,serviceWorker)

  • 2025前端技能 家里有只小肥猫 前端
    前端开发是现代Web开发中非常重要的一部分，涉及众多技术和工具。以下是一些在前端开发工作中常见的需求和技术：1.技术基础HTML/CSS:构建页面结构和样式。JavaScript:实现交互逻辑和动态功能。ES6+:使用现代JavaScript语法和特性。DOM操作:操作网页元素和事件处理。浏览器兼容性:确保代码在不同浏览器中正常运行。跨设备适配:确保页面在不同设备（PC、手机、平板）上正常显示。2
  • 事件循环_经典面试题 还是鼠鼠 javascriptajax前端vscodehtml5
    目录代码分析代码解读执行顺序执行结果结论文件名：在JavaScript中，理解事件循环（EventLoop）是掌握异步编程的基础。事件循环决定了代码的执行顺序，包括宏任务（Macrotasks）和微任务（Microtasks）的调度。为了更好地理解事件循环，我们通过一个经典的面试题来展示JavaScript中的异步执行顺序。代码分析这是一个简单的HTML文件，包含了一段JavaScript代码，我
  • JavaScript 系列之：函数 程序员SKY JavaScriptjavascript
    函数的定义方式函数声明functionadd(a,b){returna+b;}函数声明的最重要的一个特征是函数声明提升，它允许你在函数声明之前调用该函数。add(1,2);functionadd(a,b){returna+b;}函数表达式//普通的函数表达式letadd=function(a,b){returna+b;}add(1,2)//函数表达式也可以有函数名，这个函数名不能在函数外面用，只能
  • 前端架构设计 weixin_34266504 前端测试javascriptViewUI
    最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发
  • React - 兄弟互传 - 消息订阅 - 发布机制 来一碗刘肉面 Reactreact.js前端javascript
    pubsub-js是一个轻量级的JavaScript库，用于实现发布-订阅（Pub/Sub）模式。该模式使得组件间的通信变得简单和高效，特别适用于React中的兄弟组件之间通信。通过pubsub-js，一个组件可以发布消息，其他组件可以订阅这些消息以获得更新。1.安装pubsub-jsnpminstallpubsub-js//或者yarnaddpubsub-js2.基本概念发布（Publish）:
  • javaScript-系统知识点【 常见问题及其解决办法】 大麦大麦 2025前端面经javascript开发语言ecmascript前端面试
    会造成内存泄漏的情况（中级）setTimeout的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。//setTimeout的错误使用setTimeout('666',100)//setTimeout的正确用法setTimeout(()=>{console.log('666')},1000)前端常见内存泄漏及解决方案如何捕获JS程序的异常？两种方式trycatchwindow.onerror//手
  • 2025前端最新面试题-网络篇 大麦大麦 前端网络面试网络安全网络协议
    1.现代浏览器为何要禁用第三方cookie为了用户的安全(安全和隐私是浏览器永恒的话题)第三方cookie会记录用户的行为和数据,方便做广告有些浏览器默认禁止,Chrome增加了SameSite(谷歌有广告)cookie可以实现不同域共享吗同一主域名下的子域名，cookie可以共享2.实现心跳检验-用于断线重连functionHeartbeaet(){lettimer=0functionfn(){
  • JavaScript 系列八：同步与异步 XHSRookies JavaScriptjavascript
    快来加入我们吧！"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们(https://xhs-rookies.com/)进行学习，及时获取最新文章。"Codetailor"，如果您对我们文章感兴趣、或是想提一些建议，微信关注“小和山的菜鸟们”公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
  • 爬虫：一文掌握JavaScript hook的详细使用 数据知道 2025年爬虫和逆向教程爬虫javascript开发语言python数据采集前端
    文章目录一、什么是JavaScriptHook？二、JavaScriptHook的常见用途三、常见的JavaScriptHook技术3.1函数劫持（FunctionHooking）3.2代理对象（Proxy）3.3MutationObserver3.4EventListenerHook四、在爬虫中的应用4.1使用Puppeteer拦截AJAX请求4.2使用Playwright注入Hook4.3表单
  • Node.js学习01-初识Node.js与内置模块 Meowmow nodejsnode.js学习javascript
    目录初识Node.js在Node.js环境执行js代码内置模块fs文件系统模块路径动态拼接问题path路径模块http模块request请求对象初识Node.jsNode.js是基于ChromeV8引擎的JavaScript运行环境，无法调用DOM和BOM等浏览器内置API。使用Node.js可以：基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restif
  • 使用Windows系统进行Node.js离线安装 YOUFDJ windowsnode.js编程
    Node.js是一个基于ChromeV8引擎的JavaScript运行时，广泛用于服务器端开发。通常情况下，我们可以通过官方网站下载安装程序进行Node.js的安装，但有时候在没有网络连接的情况下，我们需要进行离线安装。本文将详细介绍如何在Windows系统下进行Node.js的离线安装。以下是进行Node.js离线安装的步骤：第一步：下载Node.js安装包首先，我们需要从官方网站或其他可信来源
  • 大白话html第五章HTML5 新增表单元素和属性 IT木昜 大白话htmlhtmlhtml5前端
    大白话html第五章HTML5新增表单元素和属性HTML5给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。新增表单元素：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。你的生日：：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。你的邮箱：：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。你的网
  • JSR-107与SpringBoot缓存 weixin_39515823 SpringBootspring
    文章目录JSR-107与SpringBoot缓存JSR-107JSR-107核心接口JSR-107图示Spring的缓存抽象缓存抽象定义重要接口Spring缓存使用重要概念&缓存注解缓存初体验@Cacheable注解的属性SpEL表达式@Cacheable的运行流程@CachePut&@CacheEvict&@CacheConfig@CachePut@CacheEvict@CacheConfig缓
  • python爬虫之自动化爬取网页 陌小 pythonseleniumpythonchrome
    以下为公开源码fromseleniumimportwebdriverfromselenium.webdriver.chrome.optionsimportOptionsimporttimefrombs4importBeautifulSoupurl='https://movie.douban.com/'chrome_optins=Options()chrome_optins.add_argument
  • HTML+CSS学习笔记 潘越越 学习笔记
    目录一、emmet语法二、常用html标签使用方法：三、常用CSS样式css样式设计具体引入方式1.关于border边框的设计2.关于text文本内容的管理3.关于盒模型的分类以及position属性：4.background属性的使用5.实现样式转变持续更新……首先，整体了解有关HTML和CSS的使用，主要是为了搭建静态页面有关HTML5所需要掌握的框架：React+Reactnativeuni
  • JavaScript--核心语法基础 丿狴犴λ jsjavascripthtml前端
    JavaScript--核心语法基础1.编程语言2.js历史3.js的作用4.JS组成部分5.JS的使用5.1引入方式5.2script位置5.3语法规则5.46.变量（重点）6.1什么是变量？6.2创建变量6.3变量命名规则7、数据类型（重难点）7.1分类7.2基本数据类型7.3引用数据类型--对象（object）7.4数据类型的检测8.数据类型的转换8.1隐式转换8.2强制转换9.运算符9.1
  • webpack基础配置 吃杠碰小鸡 前端前端工具库webpack前端javascript
    文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1多文件入口3.2HtmlWebpackPlugin插件四、环境4.1环境变量4.2热更新五、代码分离5.1公共模块5.2懒加载5.3预获取/预加载模块六、缓存七、TreeShaking八、公共路径webpack是一个用于现代JavaScript应用程序的静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配
  • WPS 加载项开发说明 金山办公开发者 JSAPI二次开发javascript
    WPS加载项结构WPS加载项由自定义功能区和网页两部分组成。自定义功能区只需要一个配置文件，对应WPS加载项目录中的ribbon.xml文件；网页部分负责执行自定义功能区对应的逻辑功能。因为不需要显示网页，所以省略了HTML文件，并用main.js来引入所有的外部JavaScript文件；在这些JavaScript文件中通常包含了一系列用JavaScript实现的函数，这些函数与自定义功能区的功能
  • vue 地图使用navigator_cordova+vue+webapp使用html5获取地理位置的方法 weixin_39759155 vue地图使用navigator
    1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。语法：navigator.geolocation.getCurrentPosition(success,error,options)参数：success:成功得到位置信息时的回调函数，使用Position对象作为唯一的参数。error:获取位置信息失败时的回调函数，使用PositionErro
  • Canvas绘制简易雨滴碰撞效果 DTcode7 HTML网站开发#canvas绘图HTML绘图canvasJavaScriptcanvas绘图
    Canvas绘制简易雨滴碰撞效果基本概念与作用说明示例一：基本的雨滴生成与移动HTML结构JavaScript逻辑示例二：添加碰撞检测更新JavaScript示例三：动态改变雨滴的速度和大小更新JavaScript示例四：添加用户交互更新JavaScript示例五：模拟风的影响更新JavaScript实际工作中的技巧在Web开发中，HTML5Canvas提供了一个强大且灵活的绘图环境，可以用来创建
  • HTML5地理定位 Geolocation API 珊瑚贝 编程开发
    使用getCurrentPosition方法来取得用户当前的地理位置信息，该方法的定义如下所示。voidgetCurrentPosition(onSuccess,onError,options);第一个参数为获取当前地理位置信息成功时所执行的回调函数；第二个参数为获取当前地理位置信息失败时所执行的回调函数；第三个参数为一些可选属性的列表。注意：其中第二、三个参数为可选属性。getCurrentPo
  • HTML5 Geolocation地理定位 清华小菜 笔记html5
    HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。使用getCurrentPosition()方法来获得用户的位置：菜鸟教程(runoob.com)点击按钮获取您当前坐标（可能需要比较长的时间获取）：点我varx=document.getElementById("demo");functiongetLocation
  • 最详细的Windows下安装node.js 和 npm大全 i建模 前端开发node.jswindowsnpmjavascripttypescript前端框架
    说明Node.js®是一个免费、开源、跨平台的JavaScript运行时环境,它让开发人员能够创建服务器Web应用、命令行工具和脚本。NPM的全称是NodePackageManager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。安装时一般要选择LTS版本，也就是长期
  • ES6笔记总结（Xmind格式）：第二天 星河路漫漫 ES6笔记总结es6笔记前端
    Xmind鸟瞰图：简单文字总结：ES6知识总结Proxy（代理）：1.作用：实现数据的私有化处理2.target目标对象handler处理函数3.处理函数中有两个方法：get,set4.读取数据会触发get方法，写入数据会触发set方法Reflect（反射）1.作用：用于拦截并操作JavaScript对象的方法2.提供与Object内置方法相同功能的方法3.提供更安全的操作4.作为Proxy的默认
  • 苹果AI功能，GPU内存瓶颈，大气预测模型，Chrome内置Gemini 一支烟一朵花 人工智能ai业界资讯神经网络
    智源社区刚刚！苹果发布AppleIntelligence，官宣免费接入ChatGPT，Siri迎来重磅更新大模型竞速赛鸣枪开跑后，苹果似乎已经脱离了第一梯队，曾经的行业风向标并没有像其他大厂那样频繁地宣讲AI，加之缺乏能够参与竞争的「明星产品」，其一度被贴上了「落后」的标签。但其实熟悉苹果的网友都知道，这是一家「重落地」的公司，更加擅长的是把创新技术工程化，实现「工程创新」。也正因如此，在生成式A
  • 阮一峰ES6笔记总结 china-yun JavaScript
    ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有JScript和ActionScript）。日常场合，这两个词是可以互换的。let块级作用域（局部声明，局部使用）不存在变量提升
  • 编程题 - 汽水瓶【JavaScript/Node.js解法】 幸运小圣 编程题javascriptnode.js
    ‌“学如逆水行舟，不进则退。”‌——《增广贤文》目录汽水瓶题目：解答分析：js代码解答-ACM模式：代码通过：题解分析：简洁思路代码：汽水瓶题目：某商店规定：三个空汽水瓶可以换一瓶汽水，允许向老板借空汽水瓶（但是必须要归还）。小张手上有n个空汽水瓶，她想知道自己最多可以喝到多少瓶汽水。输入描述：本题将会给出1=3){letnewBottles=Math.floor(val/3);totalBott
  • ES6学习——let和const变量 鹿蹊zz ES6-ES11javascript前端es6学习vscode
    一、ES6简介1、ES6的概念ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。2、为什么使用ES6每一次标准的诞生都意味着语言的完善，功能的加强。
  • JavaScript-V8引擎的垃圾回收 natsu-cc JavaScriptjavascript
    前言：我们知道，JavaScript之所以能在浏览器环境和NodeJS环境运行，都是因为有V8引擎在幕后保驾护航。从编译、内存分配、运行以及垃圾回收等整个过程，都离不开它。本篇主要是从V8引擎的垃圾回收机制入手，讲解一下在JavaScript代码执行的整个生命周期中V8引擎是采取怎样的垃圾回收策略来减少内存占比的。对这方面有一定的了解之后，能增强我们在写代码过程中对减少内存占用，避免内存泄漏的主观
  • Golang 1.18 中泛型的使用 戴国进 goLanggolang服务器开发语言
    Golang在2022-03-15发布了V1.18正式版，里面包含了对泛型的支持，那么最新版本的泛型如何使用呢？有哪些坑呢？本文全面且详细的带你了解泛型在Golang中的使用。一、什么是泛型说起泛型这个词，可能有些人比较陌生，特别是PHP或者JavaScript这类弱语言的开发者，尤其陌生。因为在这些弱语言中，语法本身就是支持不同类型的变量调用的。可以说无形之中早已把泛型融入语言的DNA中了，以至
  • 如何用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 maven2.2jdk1.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 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用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 hiveDML数据插入
    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 sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他