![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
Clement-Xu
经验总结。
展开
-
使用JS实现前端缓存
在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问。这种方法特别适用于使用iframe的框架。具体实现思路和方法:创建一个cache.js文件:1、前端页面,定义那些数据需要一次性拿到前端缓存,定义一个对象来原创 2015-07-08 19:43:08 · 32760 阅读 · 0 评论 -
HTML5:使用Canvas和Input range控件放大缩小图片
使用了HTML5的两个新标签canvas和input range。效果图如下,拉动控制杆可以放大缩小图片:代码: 图片缩放 你的浏览器不支持canvas。 var canvas = document.getElementById("canvas"); var context = canvas.getContext(原创 2015-10-06 23:12:06 · 7095 阅读 · 0 评论 -
对几种流行的Javascript模板引擎的测试对比
Javascript模板引擎是数据与界面分离工作中最重要的一环,已经出现在各大型网站中:Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博、12306等。为了在项目中使用模板引擎,考虑从这些网站使用的引擎中选一种最好的出来。网上有些测试结果,但尽信网不如无网,还是自己测试一下放心点,顺便也可以使用一下不同的语法,找出一种语法简便而且性能高的引擎。先上测试结果。后面再上测试代码。选原创 2015-10-22 19:32:55 · 1164 阅读 · 0 评论 -
HTML5 jQuery+FormData 异步上传文件,带进度条
利用jQuery和html5的FormData异步上传文件的好处是:实现很简单很方便地支持进度条很方便地进行扩展和美化先看看效果图:图片上传后的结果:实现步骤如下:第一步:配置好SpringMVC + servlet3.0 文件上传所需要的各种资源,参考:http://blog.csdn.net/clementad/article/detai原创 2015-11-08 11:58:35 · 8802 阅读 · 4 评论 -
HTML5异步上传图片(支持预览和进度条),使用其他按钮触发file onclick事件,解决某些浏览器无法触发的问题
很多情景下,都要求不要直接点击html的file标签,而是点击另外一个更加美观的图片,然后触发file标签的onclick事件打开系统的文件选择器。然而,某些低版本的浏览器为了安全,不支持onclick事件传递给file标签。百度搜索了半天,都是介绍把file标签透明化,然后覆盖再另外一个图片上面。可是这种非但比较复杂,还难以扩展和维护。感谢万能的stackoverflow,终于在某个问题的某原创 2015-11-09 19:31:25 · 3974 阅读 · 0 评论 -
搜狗浏览器扩展开发过程
比如要做一个方便地查看股票行情的插件:1、创建新文件夹(比如stock),所有的文件都放在这个文件夹中2、制作两个图标:default.ico(16*16)以及default-big.png(32*32)制作工具:IcoFX3、创建manifest.xml文件用UltraEdit编辑输入必要的内容: com.xjj.stock原创 2015-08-30 00:15:09 · 4606 阅读 · 20 评论 -
简单的html数据分页控件封装
好用的分页控件有好多,但似乎自己实现和封装一个比较方便,以后修改也方便。大概的想法是创建一个page.js文件,把所需的函数封装到window的page对象中。需要使用这个控件的时候,引用page.js文件,然后调用它里面的方法来初始化、更新和显示控件。控件可以根据返回数据的结果判断要不要显示总页数和“末页”按钮。效果如下:有总页数的情况:没总页数的情况:原创 2016-03-03 18:56:42 · 5593 阅读 · 0 评论 -
中文输入法导致html input的onkeyup事件无法被触发,解决方法
案例:验证码的input框绑定了一个keyup事件,但是偶尔有客户投诉说登录的时候老是提示验证码无法通过验证。原因:一开始以为是客户的浏览器没有启用cookie。后来了解到客户使用各种浏览器都有同样的问题,才发现是客户使用了五笔输入法输入验证码,导致keyup事件无法被触发。本地测试可以重现:用搜狗输入法输入英文字母然后回车确定输入。解决:弃用监听keyup事件,改为监听另外两个事件:in原创 2016-02-22 10:57:46 · 8790 阅读 · 0 评论 -
为JS的Date对象扩展几个好用的prototype函数(加上若干个月、等)
几个经常被用到的函数,又没用被Date对象定义的,自己定义一下,方便使用:- 获取Date对象的ISO格式的日期部分(去掉时分秒)- 加减若干天- 加上若干个月(需要处理进位等若干复杂情况)- 返回下个月的第一天、最后一天原创 2016-09-23 10:12:13 · 3170 阅读 · 2 评论 -
HTML5: 本地缓存
实现前端缓存,除了自己创建js保存(参考:http://blog.csdn.net/clementad/article/details/46807641),还可以利用html5的storage方法。HTML5 提供了两种在客户端存储数据的新对象:localStorage:没有时间限制的数据存储,在同一个浏览器中,只要没被手动清理,第二天、第二周或下一年之后,数据依然可用。s原创 2015-07-11 14:35:40 · 2941 阅读 · 0 评论 -
Sublime Text 3 以及常用插件
官网:http://www.sublimetext.com/视频教程:http://www.imooc.com/learn/40特性:实时自动保存编辑结果自动辨别文件类型、自动语法高亮、自动使用不同的注释符号可以打开图片有大量的快捷键、可以减少对鼠标的使用、熟练应用之后可以极大提高工作效率可以一次选择多个单词,批量修改输入自动补全安装:建议使原创 2015-10-06 18:18:13 · 1258 阅读 · 0 评论 -
JQuery插件:表单数据校验
jQuery Validation,最经典的表单数据校验插件(2006年开始,大量网站使用),使用简单、方便自定义和扩展。它由jQuery开发小组的一位成员(Jörn Zaefferer)开发和更新,所以应该比较可靠。官网:https://plugins.jquery.com/validation/,或:http://jqueryvalidation.org/文档:http://j原创 2015-10-20 19:33:21 · 2533 阅读 · 0 评论 -
html页面的简单对话框(alert, confirm, prompt)
html页面简单的三种对话框如下:1、alert(),最简单的提示框:alert("你好!");2、confirm(),有确认和取消两个按钮:if(confirm("还有继续吗?")){ alert("继续");}else{ alert("再见");}3、prompt(),可以输入信息:var name = prompt("原创 2015-07-05 15:01:39 · 16753 阅读 · 0 评论 -
JavaScript判断undefined的技巧
两种方法:处理变量为undefined的情况:v = v||null; //如果v为undefined,则其值变为null双感叹号:!!,把null/undifined/0转换为bollean类型用法:if(!!a) {}当 a=null/undifined/0时,判断结果为false(原创文章,转载请注明转自Clement原创 2015-07-17 21:19:58 · 2021 阅读 · 3 评论 -
CSS + DIV 使用方法总结
内容包括:CSS语法,选择器,字体、文本、背景、ul的属性,框模型,margin和padding,浮动(float)和清理(clear),div布局,定位(position属性),尺寸,等等。原创 2015-07-19 11:53:39 · 2936 阅读 · 0 评论 -
非常好用的JQuery自动补全插件bigautocomplete
自动补全插件,有些功能有限,有些是老外做的,不支持中文。今天发现一个国人做的,叫做bigautocomplete,还不错。官网下载地址:http://code.google.com/p/jquery-bigui/downloads/list如果不想翻墙的话,可以从这里下载(已经转码为UTF-8):http://download.csdn.net/detail/clementad/8原创 2015-07-20 20:13:18 · 8615 阅读 · 1 评论 -
Ajax请求的跨域(CORS)问题
用浏览器,通过XHR(XMLHttpRequest)请求其他域名的数据时,会碰到跨域(CORS)问题。CORS:Cross-Origin Resource Sharing 什么是跨域?简单的来说,出于安全方面的考虑,浏览器页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间的通信。原创 2015-07-22 20:22:52 · 4957 阅读 · 2 评论 -
JQuery .attr()和.prop()的正确使用场合,JQuery获取checkbox状态的正确方法
JQuery .attr()和.prop()的正确使用场合,JQuery获取checkbox状态的正确方法原创 2015-05-08 15:00:13 · 1840 阅读 · 2 评论 -
定义不被SpringMVC拦截的静态资源(html, js, css等文件),通用方法,不需要每个目录都设置
springMVC的标签是在spring3.0.4出现的,主要是用来定义对静态资源的访问。上网搜了一下跟这个配置相关的文章,大多推荐用下面这种。可是,用这种的话,如果有一个新目录,就得新增一条配置,比较麻烦。 下面这种是直接根据静态文件的后缀来配置的,比较通用,不用为每个子目录配置一个: (原创文章,转载请注明转自Clemen原创 2015-07-05 15:05:57 · 27336 阅读 · 3 评论 -
web登录:随机验证码的设计和实现
本文特点: 针对验证码的生成做了很多算法优化和调整,支持一个典型的验证码生成和验证流程,利用缓存服务器解决聚群部署架构中数据同步的问题。基本需求:登录页面显示一个随机验证码图片、有背景干扰用户输入验证码大于3位之后,开始实时验证正确性,如果正确则在输入框后面提示(比如“√”)登录时,后台检查验证码是否正确支持服务器集群部署的架构(绝对原创,转载请注明转自Cl原创 2015-09-28 19:35:38 · 24712 阅读 · 7 评论 -
百度echart resize的坑
需求:根据数据量的大小,动态调整echart柱形图的宽度。实现构想:根据数据的size调整div的大小,然后调用echart对象的resize方法重置柱状图的宽度: // 图的大小动态自动调整 let compactWidth = data.size*32; let width = compac...原创 2019-08-30 11:54:22 · 1992 阅读 · 0 评论