【转帖】初次尝试Chrome扩展开发——以幻灯片方式显示网页内的图片

使用Chrome浏览器很长时间了。每次在论坛里看图片的时候，总会觉得广告和文字太多，心里想如果能够全屏看图片就好了。

于是准备开发一个Chrome扩展,命名为imageGallery：

  • 能以全屏幻灯片的方式浏览图片
  • 能将尺寸比较小的图片过滤掉
  • 支持快捷键

本人在工作中做的是桌面和嵌入式开发，只用过C/C++/C#，对javascript/jQuery没有怎么接触过。代码中如果存在什么问题，请大家原谅。

准备工作

首先是需要找一个jQuery的幻灯片插件。在比较几个插件之后，最后选择了GALLERIA。主要是它提供的全屏模式，比较符合我心中的要求。同时学习下Chrome的扩展开发文档，熟悉开发流程。

正式开始

1. 扩展清单文件（manifest.json）

创建imageGallery目录。在该目录下创建文件manifest.json。这里面包含了扩展的相关信息，以供Chrome使用。本文只对用到的字段做简单解释，可参见 详细的介绍。
复制代码 
{
  // 插件名称
"name": "imageGallery",
  // 插件版本,Chrome会根据插件的版本号大小，来判断是否需要升级
"version": "1.0",
  // 插件描述，显示在扩展管理页面（chrome://extensions/）中
"description": "show the images of the page in a slide",
  
  "icons": {"16": "icons\\gallery16.png", // 16*16, 作为扩展页面的favicon
"48": "icons\\gallery48.png", // 48*48, 扩展管理页面（chrome://extensions/）中使用
"128": "icons\\gallery128.png"}, // 128*128 安装过程以及Chrome WebStore中使用
  
  // 后台页面，本扩展中用来监控以下事件
// 1. 用户点击浏览器工具栏的扩展图标
// 2. Tab页更新事件
"background_page": "background.html",
  // 配置页面
"options_page": "options.html",
  // 权限
"permissions": [
    "tabs", "http://*/*"// 允许扩展使用chrome.tabs或者chrome.windows模块
  ],
  // 在web页面满足某种条件时，注入js或者css（存在一些限制，后面详细讲）
"content_scripts": [
    {
      "matches": ["http://*/*"], // 匹配任意web页面
"js": ["jquery-1.4.3.min.js", "galleria.js", "imageGallery.js", "themes\\fullscreen\\galleria.fullscreen.js"]
    }
  ],
  // 定义扩展在浏览器工具栏的显示
"browser_action": {
    "default_title": "Click to show image gallery", // 提示文本
"default_icon": "icons\\gallery48.png"// 显示在浏览器工具栏的扩展图标
  }
}
复制代码

 

在imageGallery目录下，创建background.html和options.html，内容可以为空。同时将不同分辨率（16*16,48*48,128*128）的图标拷贝到icons目录下。确保manifest.json中指定的文件都存在，不然Chrome将无法载入该扩展。

2. 载入jQuery和Galleria

下载jQuery，保存在imageGallery目录下。本扩展中采用的版本是1.4.3。下载GALLERIA,将galleria.js保存在imageGallery目录下。使用fullscreen主题。保存在themes\fullscreen\下。

创建imageGallery.js，在里面输入：

if (Galleria){
    console.log("Galleria is imported");
}

打开chrome://extensions/，选择开发人员模式，点击“载入正在开发的扩展程序...”，选择刚才创建的imageGallery目录。这样imageGallery扩展就被载入。

打开任意一个网页，比如http://www.google.com.hk,然后打开开发人员工具，可以看到Console输入了“Galleria is imported”，说明Galleria已经被载入。

3. 使用galleria显示页面中所有图片

移除imageGallery.js之前的测试代码，修改为如下：

复制代码 
function showGallery(){
    if (Galleria){
        if($("#img_Gallery").length ==0){
            // 1. 如果不存在id为img_Gallery节点，则创建
            $('<div id="img_Gallery"></div>').appendTo($("body"));
            
            // 2. 将所有img节点附加img_Gallery
            $("img").each(function(){
                $("#img_Gallery").append($(this));
            });
            
            // 3. 使用galleria显示
if($("#img_Gallery").children().length >0){
                Galleria_loadTheme(); // 加载fullscreen theme，与正规的方式不同，
// 对galleria.fullscreen.js做了点修改，方便使用，
                
                // 调用galleria
                $('#img_Gallery').galleria({
                    transition: 'fade', // 过渡效果
                    image_crop: false
                });
            }
        }
    }
}
复制代码

在background.html中监听浏览器工具栏的扩展图标（browserAction）点击事件（onClicked），调用showGallery函数。在background.html添加如下代码：

复制代码 
<html>
<head>
<script>
function loadImageSlide(tab) {
    if(tab){
        chrome.tabs.executeScript(null, {code: "showGallery()"});
    }
}

chrome.browserAction.onClicked.addListener(loadImageSlide);
</script>
</head>
</html>
复制代码

 

通过chrome.tabs.executeScript接口，可以在Tab页中执行脚本，null代表当前Tab页。重新加载扩展后，单击扩展图标应该就可以将页面内的图片全屏显示。

4. 添加快捷键支持

在imageGallery.js中添加：

$("body").keydown(function (event){
    // Alt + S
if(event.keyCode ==83&& event.altKey){
        showGallery();
    }
})

当用户按Alt+S时，执行showGallery，将页面内的图片全屏显示。　

5. 为扩展添加选项

在options.html添加：

复制代码 
<html>
<head>
    <script src="jquery-1.4.3.min.js"></script>

    <style>
        .main_div{
            text-align: center;
            width:500px;
            margin-left: auto;
            margin-right: auto;
        }
        .sub_div{
            text-align: left;
        }
    </style>
<title>options</title>
</head>
<body onload="reloadOptions()">
    <div class="main_div">
    <!-- 最小高度 -->
    <div class="sub_div">height &gt; <input id="min_height"/> px</div>
    <div class="sub_div">width  &gt; <input id="min_width"/> px</div>
    <div class="sub_div">width-height ratio &lt; <input id="wh_ratio"/> </div>
    <div class="sub_div" style="font-size: 10; ">(width/height and height/width)</div>
<div class="sub_div">--------------------------------------------</div>
<div class="sub_div"><b>shortcut key: </b>
<ul>
            <li>Alt + S: Show gallery</li>
</ul>
</div>
<div class="sub_div">
        <button onclick="saveOptions()">Save</button>
</div>
</div>
<script>
    function saveOptions(){
        localStorage["min_height"] = $("#min_height").val(); 
        localStorage["min_width"] = $("#min_width").val();
        localStorage["wh_ratio"] = $("#wh_ratio").val();
        
        reloadOptions();
    }
    
    function reloadOptions(){
        min_height = localStorage["min_height"] ||200; // 默认值
        min_width = localStorage["min_width"] ||200; // 默认值
        wh_ratio = localStorage["wh_ratio"] ||3; // 默认值
        
        $("#min_height").val(String(min_height));
        $("#min_width").val(String(min_width));
        $("#wh_ratio").val(String(wh_ratio));
    }
    </script>
</body>
</html>
复制代码

在options.html中，将配置属性（最小高度，最小宽度，宽高比的最大值）保存在localStorage。然后修改background.html， 添加如下代码：　　

复制代码 
function loadOptions(tabId, changeInfo, tab) {
    var min_height = localStorage["min_height"] ||200;
    var min_width = localStorage["min_width"] ||200;
    var wh_ratio = localStorage["wh_ratio"] ||3;
    var options ="min_width = "+ min_width +";"+
                  "min_height = "+ min_height +";"+
                  "wh_ratio = "+ wh_ratio +";";
    chrome.tabs.executeScript(tabId, {code: options});
}

chrome.tabs.onUpdated.addListener(loadOptions);
复制代码

监听tabs.onUpdated事件，将配置选项组成一段code，传到当前Tab页中。临时想到的办法，不知道有没有更标准的做法。　　

最后在imageGallery.js里面根据图片的宽度和高度来过滤：

复制代码 
$("img").each(function(){
    /* filter small image */
    if (this.width > min_width &&
        this.height > min_height &&
    (this.width /this.height) < wh_ratio &&
    (this.height /this.width) < wh_ratio) {
        $("#img_Gallery").append($(this));
    }
});
复制代码

感受

Chrome扩展的开发基本和网页开发一致，入门门槛还是很低的，也能利用到现有的很多js库，简单研究下就可以做出很实用的扩展。

大家下载这个扩展试试，有兴趣可以交流下。（Download/下载）

你可能感兴趣的:(chrome扩展)

  • 【前端】JS日志输出-console完美封装 chenzfp JavaScript
    最近在开发一款chrome扩展插件，经常会打印一些调试的日志，然后上生产的时候日志打印的地方总是会有一些漏网之鱼，没有被删掉，控制台还会打印出很多的敏感信息，这是很不合理的，也是不被允许的，鉴于此，对console做了封装，废话不多说，直接上干货使用方法Log.info("logginginfo:"+"message");Log.warn("logwarn："+"message");Log.err
  • 基于 Chrome 浏览器扩展的Chroma简易图形化界面 纵有遗憾 embeddingchromedevtools
    简介ChromaDBManager是基于Chrome浏览器扩展的一款ChromaDB（一个流行的向量数据库）的数据查询工具。提供了一个用户友好的界面，可以直接从浏览器连接到本地ChromaDB实例、查看集合信息和分片数据。本工具特别适合开发人员快速查看和验证ChromaDB中的数据，无需编写代码即可完成基本的数据库操作。主要特点完全开源，源码及Chrome扩展包可从Github获取简单的主机和端口
  • BrowserTools MCP：让AI帮你调试浏览器「喂饭教程」 blues_C AI测试：从入门到进阶人工智能browsertoolsmcpAI前端
    BrowserToolsMCP：让AI帮你调试浏览器「喂饭教程」前言一、BrowserToolsMCP简介1.1背景1.2适用人群二、原理解析三、安装与配置详解3.1环境准备3.2安装Chrome扩展方式一：官方发布（推荐）方式二：源码安装3.3启动MCPServer3.4配置MCPClient（以Cursor为例）四、核心功能与实战演示4.1截图4.2控制台日志与错误采集4.3XHR网络请求与响
  • 一些好用的Chrome 扩展程序 明金同学 有点意思chrome前端
    以下是按主要功能分类的Chrome扩展程序列表，包括其版本号、中文功能简述以及指向其主页或Chrome网上应用店页面的链接。翻译与语言沉浸式翻译-网页翻译插件|PDF翻译|免费版本:1.16.12描述:【沉浸式翻译】免费的（原文/译文）双语对照网页翻译插件，支持PDF翻译（保留排版），视频双语字幕翻译（Youtube,Netflix），EPUB电子书翻译；支持人工智能AI翻译大模型（OpenAI(
  • Chrome拓展（Chrome Extension）开发定时任务插件 酷爱码 经验分享chromewindows前端
    Chrome扩展定时任务插件开发指南核心实现原理使用ChromeAlarmsAPI实现定时触发通过ServiceWorker保持后台运行本地存储保存任务配置开发步骤创建manifest文件(manifest.json){"manifest_version":3,"name":"定时任务助手","version":"1.0","permissions":["alarms","storage","no
  • Markdown转pdf qq_58722767 其他
    1.打开chrome或edge啥的浏览器，安装并获取MarkdownViewer，chrome扩展上不去的从https://crxdl-1257117300.file.myqcloud.com/crx0795607d11df537/ckkdlimhmcjmikdlpkmbgfkaikojcbjk_v4.0.zip（这个链接现在没办法直接打开就下载了，现在打开CrxDL-下载谷歌浏览器(Chrome
  • Chrome 扩展开发实录：从抓狂到曙光，我的 URL 收集器 Debug 血泪史 求求你了再让我写写java chrome前端javascript
    最近看公司的新项目项目，代码看得头晕眼花。为了快速理清脉络，我决定从网络请求入手，毕竟F12的Network面板是我的老朋友了。但问题来了，随便一个页面就几十上百个请求，看得眼花缭乱，很多还不是我关心的接口请求（Fetch/XHR）。于是，一个想法诞生了：做一个Chrome扩展，专门捕获Fetch和XHR请求，并能方便地复制或导出数据，最好能直接喂给AI进行分析！听起来很简单，对吧？呵呵，事实证明
  • chrome插件未遵循 Chrome 扩展程序的最佳实践，因此已无法再使用。 SwitchyOmega被禁用？试试这个替代方案！ 代码简单说 2025开发必备(限时特惠)chrome前端chrome插件crxSwitchyOmegaProxySwitchyOmega插件
    chrome插件未遵循Chrome扩展程序的最佳实践，因此已无法再使用。SwitchyOmega被禁用？试试这个替代方案！今天打开Chrome，习惯性地切换代理，结果弹出个提示：“此扩展程序未遵循Chrome扩展程序的最佳实践，因此已无法再使用。”这句话的潜台词很明显——SwitchyOmega被Chrome官方封杀了！更离谱的是，Stylish插件也因为类似原因凉了，连ChromeWebStor
  • LaTeX2Word-Equation 使用教程 秦言舸Gale
    LaTeX2Word-Equation使用教程LaTeX2Word-EquationCopyLaTeXEquationsasWordEquations,aChromeExtension项目地址:https://gitcode.com/gh_mirrors/la/LaTeX2Word-Equation项目介绍LaTeX2Word-Equation是一个Chrome扩展程序，旨在帮助用户将LaTeX数
  • 深度对比：Chrome扩展框架 Crx.js vs. Plasmo vs. WXT 前端chrome
    浏览器扩展开发领域正在快速进化。本文将从GitHub人气、上手体验、云服务支持、MVVM框架兼容性、工程化能力和社区生态六大维度，完整呈现三大框架的差异,并分析各自更适合的场景。框架GitHub统计社区表现技术特点Plasmo11k+StarsDiscord/GitHub活跃讨论持续稳定迭代（周均5次更新）WXT6.2kStars频繁出现技术对标讨论基于Vite的现代化架构Crx.js较低星标数生
  • useblackbox黑箱AI编码助理 百态老人 python开发语言
    黑箱AI是一个人工智能的编码助理可以让代码快10倍。它使您能够把任何问题变成代码和功能,如从任何视频提取代码和代码自动完成。它有以下几个特点：可以从视频、图片、PDF等格式中复制代码。可以将任何问题转换成代码。可以快速找到任何代码片段，并开始编码。支持20多种编程语言的代码自动补全。有Chrome扩展和VSCode扩展。这个网站有不同的收费方案，根据你需要的功能和使用量而定。它有以下几种选择：好开
  • Chrome 扩展开发 API实战：Proxy（七） 守城小轩 浏览器插件chrome浏览器插件Chrome插件浏览器开发
    1.引言在现代浏览器生态中，代理设置是提升网络访问速度、保障隐私安全的重要手段。对于开发者而言，掌握如何在Chrome扩展程序中配置代理功能，不仅能满足特定的网络需求，还能为用户提供更灵活的上网体验。本文将以通俗易懂的语言，详细介绍如何在Chrome扩展程序中使用chrome.proxyAPI设置代理。2.初识chrome.proxyAPIchrome.proxyAPI是Chrome浏览器提供的用
  • Chrome 扩展开发API实战：Runtime（八） 守城小轩 浏览器插件chrome浏览器插件Chrome插件浏览器开发chromedevtools
    1.引言在开发Chrome扩展程序时，chrome.runtimeAPI是一个至关重要的接口。它提供了与扩展程序生命周期管理、消息传递、环境信息获取、与原生应用通信等相关的功能。本文将详细介绍chrome.runtimeAPI的所有方法和事件，并通过示例代码演示如何在实际场景中有效地使用这些功能。2.chrome.runtimeAPI概述chrome.runtimeAPI提供了一系列方法和事件，帮
  • Chrome 扩展开发 API实战：History（三） 守城小轩 浏览器插件chrome浏览器插件Chrome插件浏览器开发
    Chrome.historyAPI技术文档1.引言Chrome扩展提供了一套强大的API，用于处理浏览器历史记录操作。通过chrome.historyAPI，开发者可以高效地实现搜索、管理和清理历史记录的功能。本文档详细介绍了该模块的功能，适合初学者及希望深入了解浏览器扩展开发的用户。2.权限声明在manifest.json文件中声明history权限。例如：{"name":"MyExtensio
  • Chrome 扩展开发 API实战：Bookmarks（二） 守城小轩 浏览器插件chrome前端javascript
    1.引言在开发Chrome扩展程序时，书签的管理是一项常见需求。chrome.bookmarksAPI提供了一套强大的接口，允许开发者创建、查询、更新、移动和删除书签。本文将详细介绍如何使用该API来操作浏览器中的书签。2.权限声明在manifest.json文件中声明bookmarks权限。例如：{"name":"MyExtension","permissions":["bookmarks"]}
  • 使用HTML，CSS和JavaScript创建Chrome扩展程序 海拥✘ Google100个前端优质项目javascriptcsschrome
    介绍谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了GoogleChrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。对于台式机，除了可以在Internet上浏览以外，您还可以做很多事情。您可以测试您的网页和全部。通过使用扩展程序，谷歌浏览器变得更加强大。因此，今天，我们将研究如何使用HTML，CSS和JavaScript创建您的第一个GoogleChr
  • Chrome 插件下载网站+6个实用插件推荐(记录) IT 药师 IT技术chromechrom插件
    Chrome插件下载网站+6个实用插件推荐一、Chrome插件下载网站1.https://crxdl.com/可以下载Chrome扩展插件CRX离线安装包直接在搜索框输入想要下载的插件名或关键词即可搜索到相关插件，然后点击下载即可，该网站无广告，搜索速度快，下载速度快，全程操作丝滑。2.https://www.cxyhub.com/page/2/号称东半球最好用的CRX插件网站3.其他网站不推荐了
  • 谷歌浏览器chrome插件、扩展程序无法下载的解决方法 weixin_33878457
    以下是下载离线插件包的方法：每个GoogleChrome扩展都有一个固定的ID，例如https://chrome.google.com/webstore/detail/bfbmjmiodbnnpllbbbfblcplfjjepjdn把这个扩展的ID复制下来,替换下面URL中的“~~~~”https://clients2.google.com/service/update2/crx?response
  • 分享一个用于免费取名chrome插件 blogcs chrome前端
    这是一个帮助父母为宝宝取名的Chrome扩展程序，基于八字命理为宝宝打造独特且富有寓意的名字。功能特点：-支持输入宝宝姓氏。-可选择宝宝性别（男宝宝/女宝宝）。-可选择名字长度（二字名/三字名）。-支持输入出生日期和时辰。-提供多种期望寓意选择。-支持自定义期望寓意。-完全简体中文界面。安装方式：**从Chrome网上应用店安装**：1.Chrome網上應用店頁面。2.点击“添加至Chrome”按
  • 分享一个使用的音频裁剪chrome扩展-Ringtone Maker blogcs 音视频chrome前端
    一、插件简介铃声制作器是一个简单易用的Chrome扩展，专门用于制作手机铃声。它支持裁剪音频文件的特定片段，并将其下载为WAV格式，方便我们在手机上使用。无论是想从一段长音频中截取精彩部分作为铃声，还是对现有的音频进行个性化剪辑，这个插件都能轻松满足你的需求二、安装方法安装这个插件非常方便，有两种方式可供选择：1.从Chrome网上应用店安装访问Chrome网上应用店页面。点击“添加到Chrome
  • Speechify: 在线文本转语音（TTS）网站 Mr.长安 AIGC产品合集人工智能语音识别
    【产品介绍】Speechify是一个基于人工智能技术的在线文本转语音（TTS）网站，可以让用户把任何文本转换成自然流畅的语音，从而提高阅读效率和理解能力。Speechify有多种平台的应用，包括Chrome扩展、iOS应用、Android应用和Mac应用，可以在不同的设备上使用Speechify来听取文档、文章、PDF、电子邮件等任何内容。拥有超过200种标准的AI语音和自然的人声，覆盖了全球50
  • chrome插件模板；使用 React 18 和 Webpack 5 的 Chrome 扩展样板 struggle2025 chromereact.jswebpack
    一、软件介绍（文末提供下载）这是一个基本的Chrome扩展样板，可帮助您编写模块化和现代的Javascript代码，轻松加载CSS，并在代码更改时自动重新加载浏览器。github地址：https://github.com/lxieyang/chrome-extension-boilerplate-react本文信息图片来源于上面GitHub地址二、软件特征ChromeExtensionManife
  • chrome插件：网页图片高清下载 易林示 小工具chrome小程序python
    前置条件：安装有chrome谷歌浏览器的电脑使用步骤：1.打开chrome扩展插件2.点击管理扩展程序3.加载已解压的扩展程序4.选择对应文件夹5.成功后会出现一个扩展小程序6.点击对应小程序7.输入需要访问的网址，点击扩展插件即可进行图片下载
  • Chrome插件：图片缩放为头像（128*128） 易林示 小工具chrome前端
    前置条件：安装有chrome谷歌浏览器的电脑使用步骤：1.打开chrome扩展插件2.点击管理扩展程序3.加载已解压的扩展程序4.选择对应文件夹5.成功后会出现一个扩展小程序6.点击对应小程序7.使用小程序8.拖拽成功后会自动保存到下载代码：1.manifest.json{"manifest_version":3,"name":"图片缩放器","version":"1.0","descriptio
  • Chrome 插件备份, 从浏览器打包扩展程序为 crx 文件 Mruping
    虽然Chrome支持扩展程序同步,但易因误操作而覆盖网络备份(Google服务对大陆也不友好)。本文通过导出Chrome扩展程序为crx文件,而实现Chrome扩展程序本地备份。30s总结通过扩展程序找到其根目录；在扩展程序界面打包扩展程序为crx文件；目的Chrome扩展程序本地备份Chrome扩展程序分享方案导出Chrome扩展程序为crx文件。步骤1.找到扩展程序根目录①地址栏输入chrom
  • chrome扩展程序本地打包 丿似锦 Googlechrome前端
    简介本文为Chrome浏览器已安装的扩展程序打包为离线.crx文件，便于在无法访问Chrome商店场景下使用扩展管理页面chrome://extensions/确定自己需要打包的扩展程序ID找到扩展程序路径chrome默认完整路径查看方法chrome://version/其中【个人资料路径】下的Extensions文件夹就是扩展程序安装目录根据查询的扩展程序ID选择打包扩展程序在扩展管理页面点击【
  • Chrome浏览器安装.crx格式扩展程序 人间小美味695 #插件类#浏览器chrome扩展程序.crx浏览器应用商店
    目录内容介绍一、chrome网上应用商店搜索扩展程序二、非Chrome应用商店来源的扩展程序内容介绍Chrome扩展程序为.crx后缀，主要分为chrome网上应用商店搜索扩展程序和非Chrome应用商店来源的扩展程序。支持功能：一、chrome网上应用商店搜索扩展程序Chrome网上应用商店搜索扩展程序点击查看详情添加至Chrome——添加扩展程序二、非Chrome应用商店来源的扩展程序将.cr
  • chrome扩展，“manifest_version“: 3, chrome 扩展图标点击事件 徐同保 chrome前端
    在Chrome扩展中，从ManifestV3开始，后台脚本（backgroundscripts）被服务工作线程（serviceworkers）所取代。这改变了扩展图标点击事件（通常称为浏览器操作或者页面操作）的处理方式。在ManifestV3中，您需要使用chrome.action.onClicked监听器来处理扩展图标的点击事件。下面是一个如何设置扩展图标点击事件处理器的示例：在manifest
  • 开发chrome扩展（ 禁止指定域名使用插件） 徐同保 chrome前端
    mainfest.json:{"manifest_version":3,"name":"ChatGPT学习","version":"0.0.2","description":"ChatGPT,GPT-4,Claude3,Midjourney,StableDiffusion,AI,人工智能,AI","icons":{"16":"./images/logo.png","48":"./images/lo
  • chrome扩展运行linux,微软 Chromium 版 Edge 浏览器 Linux 版首次亮相 支持Chrome扩展 都不叫阿布呢 chrome扩展运行linux
    微软于今年1月份推出的经过改进的Chromium版Edge浏览器已进入Linux操作系统，并有望在今年晚些时候在开源平台上发布。Chromium版Edge广受好评，现已在Windows和macOS系统上提供。微软最近确认Linux版本也正在运行开发。微软计划到2020年底在所有主要的台式机和移动操作系统上提供Edge浏览器。去年，Edge开发团队还对Web开发人员进行了一项调查，以征询他们对Lin
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他