白色的海
白色的海

javascript设计模式实践之代理模式--图片预加载

图片的预加载就是在加载大图片前，先显示一个loading.gif，就算在网络比较慢的时候也能让人知道正在加载，总比啥反应都没有强。

下面这段代码就是预加载的一个简单的实现，假设先不处理加载图片时的onError，onAbort，超时的问题。

只关注代码的结构。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id='btnLoadImg'>加载图片</button>
        <br>
        <div id='imgContainer'>
        </div>
        <br>

        <script type='text/javascript' src="./jquery-1.11.3.min.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                $('#btnLoadImg').bind('click', doLoadImg);
            });

            function doLoadImg(){

                var eleImg = createImgElement();
                document.getElementById('imgContainer').appendChild(eleImg);

                loadImg(eleImg, 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg');
            }

            //创建img标签
            //这里用自执行函数加一个闭包，是为了可以创建多个id不同的img标签。
            var createImgElement = (function(){
                var index = 0;

                return function() {
                    var eleImg = document.createElement('img');
                    eleImg.setAttribute('width', '200');
                    eleImg.setAttribute('heght', '150');
                    eleImg.setAttribute('id', 'img' + index++);
                    return eleImg;
                };
            })();

            //预加载图片
            //给img标签设一个加载图片，通过Image对象预先加载实际图片加载完成后设到img标签上
            function loadImg(img, src) {
                var imgCache = new Image();
                imgCache.onload = function(){
                    img.src = this.src;
                };

                img.src = 'loading.gif';
                imgCache.src = src;
            }

        </script>
    </body>
</html>

 

以下预加载的代码功能上是满足了，但是它的职责包含了预加载和加载两个职责，违反了“单一职责原则”。所谓的职责就是“会发生的变化”，如果网速的问题不再是问题或者加载的图片的分辨率被控制在很小的时候等，需要去掉预加载的功能，这时候就要修改loadImg的代码，就要重新跑所有相关的测试，即违反了“开闭原则”，又增加测试工作。

            function loadImg(img, src) {
                var imgCache = new Image();
                imgCache.onload = function(){
                    img.src = this.src;
                };

                img.src = 'loading.gif';
                imgCache.src = src;
            }

 

加载和预加载其实就是代理模式的一种，代理模式可以理解成，你会开车但是因为某种原因只能找人代理开车，因为不了解MM的喜好找人代理送花。

将预加载功能改成代理模式可以理解成：本体先显示个门面，找代理去加载，加载完了，告诉本体，本体把图片贴上去就行了。

既然如此，本体的职责就很简单了，就往门面上贴。

加载本体函数：

            function loadImg(img, src) {
                img.src = src;
            }

 

做一个预加载代理函数：

            function loadImgProxy(img, src){
                var imgCache = new Image();
                imgCache.onload = function(){
                    loadImg(img, this.src);
                };

                loadImg(img, 'loading.gif');
                imgCache.src = src;
            }

在代理函数中，先让本体加载loading.gif，等大图加载完了再让本体加载实际图片。

代理还是和本体函数的接口参数是一致的，职责分的比较清晰，如果到时候要把预加载去掉，也不需要修改本体和代理的代码，只需要在调用的地方把代理的名字换成本体的名字即可。

可以适当的把代理函数改一下，可以让其适应加载多个图片的场景，其实就是做一个闭包，把缓存Image对象变成私有即可：

            var loadImgProxy = (function(){
                var imgCache = new Image();

                return function(img, src){
                    imgCache.onload = function(){
                        loadImg(img, this.src);
                    };

                    loadImg(img, 'loading.gif');
                    imgCache.src = src;
                };
            })();

 

修改后的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id='btnLoadImg'>加载图片</button>
        <br>
        <div id='imgContainer'>
        </div>
        <br>

        <script type='text/javascript' src="./jquery-1.11.3.min.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                $('#btnLoadImg').bind('click', doLoadImg);
            });

            function doLoadImg(){

                var eleImg = createImgElement();
                document.getElementById('imgContainer').appendChild(eleImg);

                //使用代理函数进行加载
 //如果某一天不需要预加载了，就把loadImgProxy换成loadImg即可
                loadImgProxy(eleImg, 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg');
            }

            //创建img标签
            //这里用自执行函数加一个闭包，是为了可以创建多个id不同的img标签。
            var createImgElement = (function(){
                var index = 0;

                return function() {
                    var eleImg = document.createElement('img');
                    eleImg.setAttribute('width', '200');
                    eleImg.setAttribute('heght', '150');
                    eleImg.setAttribute('id', 'img' + index++);
                    return eleImg;
                };
            })();
           
            //加载图片本体函数
            function loadImg(img, src) {
                img.src = src;
            }

            //加载图片代理函数             var loadImgProxy = (function(){
                var imgCache = new Image();

                return function(img, src){
                    imgCache.onload = function(){
                        loadImg(img, this.src);
                    };

                    loadImg(img, 'loading.gif');
                    imgCache.src = src;
                };
            })();

        </script>
    </body>
</html>

 

你可能感兴趣的:(javascript设计模式实践之代理模式--图片预加载)

  • 05.静态代理设计模式 java
    05.静态代理设计模式目录介绍01.静态代理模式基础1.1静态代理由来1.2静态代理定义1.3静态代理场景1.4静态代理思考02.静态代理原理与实现2.1罗列一个场景2.2用一个例子理解代理2.3案例演变分析03.静态代理分析3.1静态代理结构图3.2静态代理时序图04.代理模式优势4.1如何降低耦合4.2保护真实对象使用权限05.静态代理不足5.1静态代理类优缺点5.2静态代理缺乏灵活5.3静态
  • 基于STC89C52的CD4511译码显示数字设计 @小张要努力 单片机嵌入式硬件51单片机proteusmcu
    摘要本文深入探讨基于STC89C52单片机的数字显示系统设计，剖析CD4511译码驱动芯片工作原理，结合Proteus仿真验证功能。通过硬件电路、软件编程及原理分析，完整呈现单片机控制数码管显示的实现过程，为相关开发提供理论与实践参考。一、引言在单片机应用中，数码管显示是基础模块。CD4511作为BCD码译码驱动芯片，可简化单片机与数码管接口设计。STC89C52凭借丰富资源与稳定性能，成为驱动C
  • Java之ArrayList M(菜鸡) javalist
    ArrayList1.1ArrayList简介ArrayList的底层是数组队列，相当于动态数组。与Java中的数组相比，它的容量能动态增长。在添加大量元素前，应用程序可以使用ensureCapacity操作来增加ArrayList实例的容量。这可以减少递增式再分配的数量。ArrayList继承了AbstractList，实现了List,RandomAccess,Cloneable,java.io
  • Python之pip的安装和使用详细教程 叫我技术帝 Pythonpython
    我们都知道python有海量的第三方库或者说模块，这些库针对不同的应用，发挥不同的作用。我们在实际的项目中，或多或少的都要使用到第三方库，那么如何将他人的库加入到自己的项目中内呢？打个电话？大哥你好，想用下你那个库，麻烦给邮箱发个源码呗！显然这是个笑话。Python官方的PyPi仓库为我们提供了一个统一的代码托管仓库，所有的第三方库，甚至你自己写的开源模块，都可以发布到这里，让全世界的人分享下载。
  • python使用pip安装本地包-Python之pip使用详解|附第三方库安装总结 weixin_37988176
    首先简单介绍下pip是什么？pip是python的第三方库管理器，可以根据所开发项目的需要，使用pip相关命令安装不同库。Pyhon3.4以后，pip都默认跟Python一块安装，pip在python安装目录中的位置如下：执行方法：运行【win+R】+cmd，执行pip，查看是否安装成功。（找不到命令，则需要手动添加到环境变量）python官方提供了一个pypi库（https://pypi.org
  • 【mysql】mysql之主从部署以及介绍 向往风的男子 DBAmysql数据库
    本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
  • mysql5.6主从_MySQL5.6主从复制最佳实践 来B mysql5.6主从
    MySQL5.6主从复制的配置环境操作系统：CentOS-6.6-x86_64MySQL版本：mysql-5.6.26.tar.gz主节点IP：192.168.31.57主机名：edu-mysql-01从节点IP：192.168.31.59主机名：edu-mysql-02MySQL主从复制官方文档MySQL主从复制(也称A/B复制)的原理Master将数据改变记录到二进制日志(binarylog)
  • MySQL5.6主从复制最佳实践 weixin_34252090 数据库操作系统python
    2019独角兽企业重金招聘Python工程师标准>>>MySQL5.6主从复制最佳实践MySQL5.6主从复制的配置环境操作系统：CentOS-6.6-x86_64MySQL版本：mysql-5.6.26.tar.gz主节点IP：192.168.31.57主机名：edu-mysql-01从节点IP：192.168.31.59主机名：edu-mysql-02MySQL主从复制官方文档http://d
  • DeepSeek爆火，背后模型竟藏着这些秘密！ qq_23519469 ai
    DeepSeek是什么来头最近，AI圈可是被一个名字刷爆了屏，那就是DeepSeek！它就像一颗横空出世的超级新星，在全球范围掀起了一阵狂热的追捧潮，这热度，简直了！大家都在疯狂讨论它，各种测评、对比层出不穷。它到底有啥过人之处，能让这么多人都为之疯狂？今天咱就来好好唠唠。DeepSeek，全称杭州深度求索人工智能基础技术研究有限公司，是一家专注于开发先进大语言模型（LLM）和相关技术的企业。它成
  • Ai时代初期全球不同纬度的层级辐射现象 龙胥伯 人工智能
    基于最新研究成果与行业动态，AI时代的"层级辐射"现象可被科学解构为以下六大维度，结合技术演进、产业实践和社会影响进行系统性分析：一、技术能力的层级跃迁模型效率革命DeepSeek研发的R1-Zero模型通过动态架构设计，将样本利用率提升40%以上，训练周期大幅缩短。这种技术突破推动AI从实验室走向规模化应用，在智能制造、生物医药等领域催生新生态。大语言模型的训练方式（预训练→多任务学习→强化学习
  • MySQL 8主从复制配置最佳实践 随风九天 匠心数据库部署运维mysql主从复制
    1.引言1.1主从复制的意义与应用场景主从复制是MySQL中用于提高数据冗余性和可用性的技术。通过将主库的数据复制到一个或多个从库，可以在主库故障时快速切换到从库，保证服务的连续性。此外，主从复制还可以用于负载均衡，将读操作分发到从库，减轻主库的压力。1.2MySQL8主从复制的新特性概述MySQL8引入了多项改进，包括：GTID（全局事务标识符）：简化复制配置和管理。半同步复制：提高数据一致性。
  • 005 Redis 都有哪些数据类型？分别在哪些场景下使用比较合适？ 专注_每天进步一点点 08RedisRedisStringlisthashset
    读读Redis的官网，学第一手的资料：Redid官方文档地址Redis中国-文档网址：Redis中国-文档地址或者看看书《Redis深度历险：核心原理和应用实践》1、Redis官网中介绍各种数据类型官方地址：RedisdatatypesRedisisnotaplainkey-valuestore,itisactuallyadatastructuresserver,supportingdiffere
  • 大模型应用编排工具Dify二开之登录Token改造 Daphnis_z Python开发LLMchatgptpythondockerweb
    1.前言dify工作室支持在画布上直接编辑业务流程，通过调用开源大模型可以实现特定场景的业务，而且可以迅速更新发布。因此，某些项目要求在产品里面能够直接编辑dify业务流程，使得现场开发人员能够迅速响应客户需求。另外，方便对dify进行运维，比如更新开源大模型认证信息。环境信息：dify-0.8.3,docker-212.实现思路分析常规的思路有两种：把dify源码迁移到产品中代码改造量大、难度高
  • SQL优化之MySQL执行计划（Explain）及索引失效详解 一未道 #性能优化大数据sqlmysql数据库
    1、执行计划基础1.1、执行计划（Explain）定义在MySQL中可以通过explain关键字模拟优化器执行SQL语句，从而解析MySQL是如何处理SQL语句的。1.2、MySQL查询过程客户端向MySQL服务器发送一条查询请求服务器首先检查查询缓存，如果命中缓存，则立刻返回存储在缓存中的结果。否则进入下一阶段服务器进行SQL解析、预处理、之后由优化器生成对应的执行计划MySQL根据执行计划，调
  • JavaScript基础-事件基础 難釋懷 javascript开发语言
    在现代Web开发中，交互性是网站用户体验的重要组成部分。通过使用JavaScript，我们可以捕获用户的操作并作出响应，实现动态网页效果。这一切都离不开事件（Events）的概念。本文将介绍JavaScript中事件的基础知识，包括事件类型、如何绑定事件处理器以及一些常见的实践技巧。一、什么是事件？在浏览器环境中，事件是由浏览器生成的通知，表明某种情况已经发生。这些情况可能是用户交互（如点击按钮）
  • Flutter IconButton完全指南：高效使用与性能优化秘籍 帅次 Flutterflutterandroidiosandroidstudiomacoskotlinswift
    目录一、引言二、IconButton的基本用法三、进阶技巧3.1自定义形状与背景3.2带文本的IconButton（使用Column组合）3.3自定义交互反馈3.4动态图标切换3.5组合式按钮（图标+文字）四、高级应用4.1与主题深度整合4.2手势扩展（长按/双击）4.3动画增强点击效果五、性能与最佳实践5.1避免重建5.1.1声明常量图标5.1.2带参数的常量图标5.1.3常量图标按钮5.1.4
  • matsim开发教程 若木胡 大数据信息可视化
    以下是基于MATSim的二次开发教程指南，结合交通仿真框架的核心功能和开发实践，提供从环境搭建到高级开发的完整路径：一、MATSim简介MATSim（Multi-AgentTransportSimulation）是一个基于Java的开源交通仿真框架，专注于大规模多智能体（Agent）交通行为模拟，支持动态需求建模、路径规划优化、政策评估等应用场景。二、开发环境搭建1.基础依赖JavaJDK11+：
  • 【大模型科普】AIGC技术发展与应用实践（一文读懂AIGC） 人工智能
    【专栏介绍】⌈⌈⌈人工智能与大模型应用⌋⌋⌋人工智能（AI）通过算法模拟人类智能，利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络（如ChatGPT），经海量数据训练后能完成文本生成、图像创作等复杂任务，显著提升效率，但面临算力消耗、数据偏见等挑战。当前正加速与教育、科研融合，未来需平衡技术创新与伦理风险，推动可持续发展。文章目录一、AIGC概述（一）什么是
  • React 相关插件之 Redux 基本使用入门 前端reactredux
    引入和定义首先，你需要创建Store实例并暴露出来：//stores/login.store.jsconstloginInstance=(preState,action)=>{switch(action.type){//修改状态case"changeLoginState":preState.isLogin=action.loginFlag=='YES'?true:falsereturnpreSta
  • 知识库中的知识如何进行分类和标签管理？ 自不量力的A同学 人工智能
    知识库中的知识如何进行分类和标签管理？基于主题分类明确主题层级：首先确定主要的知识主题领域，如在一个企业知识库中，可以分为“人力资源”“市场营销”“技术研发”等大主题。然后在每个大主题下细分小主题，例如在“人力资源”主题下可以有“招聘”“培训”“绩效考核”等子主题。这样的层级分类有助于用户快速定位到自己需要的知识领域。参考行业标准和最佳实践：按照行业内公认的分类标准来划分知识。以医学知识库为例，可
  • 软件设计师之树与二叉树：非线性数据结构的深度探索 一杯年华@编程空间 软考中级数据结构
    软件设计师之树与二叉树：非线性数据结构的深度探索在软件开发领域，数据结构是程序设计的核心基础，其中树和二叉树作为重要的非线性数据结构，在众多场景中都有着广泛应用。我写这篇博客，就是希望和大家一起学习进步，深入解析树和二叉树的相关知识，用通俗易懂的语言结合图表和Java代码示例进行讲解，帮助大家更好地掌握这些内容。一、树的定义与基本概念树的定义树是由n（n≥0）个结点组成的有限集合。当n=0时，为空
  • 数据湖：Apache Iceberg在腾讯的探索和实践 学而知之@ 数据库腾讯大数据java编程语言
    摘要：今天分享的是ApacheIceberg在腾讯内部的探索和实践。本文结合腾讯大数据技术分享内容和2020全球软件开发大会分享内容进行整理，主要内容包括：1、数据湖技术概述2、ApacheIceberg的简介3、腾讯为什么选择ApacheIceberg4、腾讯看点万亿数据下的业务痛点5、ApacheIceberg在看点实践6、ApacheIceberg读写和删除ApacheIceberg新一代数
  • 深度学习-130-RAG技术之基于Anything LLM搭建本地私人知识库的应用策略问题总结(一) 皮皮冰燃 深度学习深度学习人工智能RAG
    文章目录1AnythingLLM的本地知识库1.1本地知识库应用场景1.2效果对比及思考1.3本地体现在哪些方面1.3.1知识在本地1.3.2分割后的文档在本地1.3.3大模型部署运行在本地2问错问题带来的问题2.1常见的问题2.2原因分析3为什么LLM不使用我的文件？3.1LLM不是万能的【omnipotent】3.2LLM不会自省【introspect】3.3AnythingLLM是如何工作的
  • 设备树学习（二十三、番外篇-中断子系统之softirq） 奔跑的小刺猬 设备树设备树原理和实现
    既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
  • http框架核心之ngx_http.c源码分析 qiuhui00 nginx源码分析nginx源码分析http框架
    ngx_http.c内主要实现了一个模块:ngx_http_module。ngx_http_module是nginx的http框架的一部分，它是所有http模块能够被加载的唯一入口，承担了http块配置解析，合并，以及http框架及其相关数据结构的初始化。它本身是NGX_CORE_MODULE类型，只有一个指令，就是http，如下所示:staticngx_command_tngx_http_com
  • AXI总线之相关应用 逾越TAO fpga开发硬件工程笔记
    AXI总线作为现代SoC设计的核心互连协议，其应用场景极为广泛，覆盖移动设备、AI加速器、FPGA、存储控制器等多个领域。以下是AXI在不同应用中的关键角色及具体实现案例：一、移动处理器与SoC应用场景：智能手机、平板电脑的SoC（如高通骁龙、苹果A系列、华为麒麟）中，AXI用于连接多核CPU、GPU、ISP（图像信号处理器）、DDR控制器等模块。典型案例：ARMCortex-A系列多核集群：AX
  • NL2SQL 优化之 Schema 编写标准 kakaZhui oracle数据库AIGCpythonllamachatgpt
    写在前面在自然语言转SQL（NL2SQL，或Text-to-SQL）任务中，数据库Schema的质量和表示方式对模型的性能有着至关重要的影响。一个清晰、规范、易于理解的Schema能够帮助模型更好地理解数据库结构，从而生成更准确的SQL查询。相反，一个混乱、不规范的Schema会增加模型的理解难度，导致生成的SQL查询错误百出。本文将深入探讨NL2SQL任务中Schema的编写标准，详细介绍如何为
  • Node.js系列（4）--微服务架构实践 一进制ᅟᅠ        ‌‍‎‏  Node.js架构node.js微服务
    Node.js微服务架构实践引言微服务架构已成为构建大规模Node.js应用的主流选择。本文将深入探讨Node.js微服务架构的设计与实现，包括服务拆分、服务治理、通信机制等方面，帮助开发者构建可扩展的微服务系统。微服务架构概述Node.js微服务架构主要包括以下方面：服务拆分：业务领域划分与服务边界服务治理：服务注册、发现与负载均衡通信机制：同步与异步通信方案数据管理：分布式事务与数据一致性可观
  • Tsfresh + TA-Lib + LightGBM ：A 股市场量化投资策略实战入门 船长@Quant Python金融科技pythontsfreshTA-LibLightGBM量化技术策略开发
    Tsfresh+TA-Lib+LightGBM：A股市场量化投资策略实战入门本项目以A股市场为研究对象，通过量化技术对市场数据进行分析，构建量化投资策略，并利用历史数据回测验证策略的有效性。项目旨在为量化技术初学者提供一个系统的学习框架，帮助读者掌握从数据获取到策略评估的全流程操作。文中内容仅限技术学习与代码实践参考，市场存在不确定性，技术分析需谨慎验证，不构成任何投资建议。适合量化新手建立系统认
  • Docker打包深度学习项目 FLY_LTL docker深度学习容器
    文章目录Docker打包深度学习项目1.Docker和NVIDIAContainerToolkit的安装1.Docker2.NVIDIAContainerToolkit3.添加国内镜像源2.使用Dockerfile打包并保存镜像1.Dockerfile2.通过Dockerfile生成镜像3.保存镜像和加载4.运行Docker并测试参考Docker打包深度学习项目本文来源于个人实践总结，供各位同学参
  • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
  • 单例（Singleton）模式 aoyouzi 单例模式Singleton
    3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
  • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
          现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
  • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
    <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
  • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
    struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
  • 推荐10个在线logo设计网站 362217990 logo
    在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
  • jsp上传文件 香水浓 jspfileupload
    1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
  • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
    框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
  • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
    我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
  • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
    统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
  • Android SDK 国内镜像 BigBird2012 android sdk
    一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
  • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
    一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
  • [Maven学习笔记二]Maven命令 bit1129 maven
    mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
  • 【Java命令二】jhat bit1129 Java命令
    jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
  • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
    进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
  • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
    网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
  • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
    import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
  • struts2获得request、session、application方式 chiangfai application
    1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
  • 改变python的默认语言设置 chenchao051 python
    import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
  • mysql导入数据load data infile用法 daizj mysql导入数据
    我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
  • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
    跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
  • 22岁到72岁的男人对女人的要求 dcj3sjt126com
    22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
  • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
    A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
  • NoSql 数据库的特性比较 geeksun NoSQL
    Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
  • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
    转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
  • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
    视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
  • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
    hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
  • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
    作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
  • 开发环境搭建 独浮云 eclipsejdktomcat
           最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
  • 操作日期和时间的工具类 vipbooks 工具类
       大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他