![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端之Javascript
文章平均质量分 69
BJ_benjamin
因为记性不好所以只好多做总结因为不进则退所以需要多停下来思考方向
展开
-
匆匆的2013——Benjamin
我的2013随着年龄的增大,愈发感觉“光阴似箭”这几个字的含义,匆匆走过2013,现在回眸, 回忆自己的一年,爱过、恨过、悲过、笑过。由于这一年里主要忙于项目,团队中只有自己一个前端,所以没有更多的时间去专研技术,只能下班后写个blog来充饥,打开自己的blog,不知不觉前端相关博文已70篇有余,基本上每月有10篇左右blog进账,后端的技术也有了了解和提升。始终坚信分享能提高自己、帮助他原创 2014-01-02 14:00:04 · 1283 阅读 · 0 评论 -
使用 WebSockets 的 9 个应用场景
没有其他技术能够像WebSocket一样提供真正的双向通信,许多web开发者仍然是依赖于ajax的长轮询来实现。(注:我认为长轮询是富于创造性和多功能性的,虽然这只是一个不太完美的解决办法(hack))对Websocket缺少热情,也许是因为多年前他的安全性的脆弱,抑或者是缺少浏览器的支持,不管怎样,这两个问题都已经被解决了。决定手头的工作是否需要使用WebSocket技术的方法很简单:转载 2013-11-19 09:51:18 · 1451 阅读 · 0 评论 -
console.table()调试javascript
/** * * @authors Benjamin * @date 2013-11-18 13:08:18 * console.table()调试javascript * 直接进入实例 *///定义一个对象var obj = { "name":"张三", "age" :20, "sex" :"male"};console.log("---原创 2013-11-18 13:29:24 · 1315 阅读 · 0 评论 -
javascript 全类型检查type.js
(function (root) { var typeArr = [ 'Null', 'Undefined', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Function', 'RegExp', 'Element', 'NaN', 'Infinite' ], type = function (o) { var s = null, type原创 2013-11-16 23:54:03 · 1402 阅读 · 0 评论 -
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
参考链接:http://www.zhangxinxu.com/wordpress/?p=3725转载 2013-10-15 13:32:06 · 2079 阅读 · 0 评论 -
Chrome的进程体系
概述 Chrome最核心的部件主要有三个:Browser、Renderer、Webkit。Browser是老大,控制了所有的I/O、网络传输、浏览器主界面等工作,Renderer顾名思义,主要负责渲染工作,并由Browser进程驱动,Chrome支持每一个Renderer为一个独立进程模式,也就是在Chrome中看到的每一个Tab页面都可以是一个独立进程,某一个Tab页面Crash,不影响转载 2013-09-24 23:04:09 · 2130 阅读 · 0 评论 -
表单元素属性readonly和disabled对比:
1)适应范围:readonly:input[type="text"],input[type="password"],input[type="teaxtarea"]disabled:所有的表单元素,如select, radio, checkbox, button等2)操作:readonly:不允许用户修改操作,不影响其它的任何操作disabled:阻止用户一切操作,包括用户点击事原创 2013-09-23 17:01:06 · 1679 阅读 · 0 评论 -
浏览器是如何工作的系列:CSS2可视化模型
CSS2可视化模型1.画布(Canvas)根据CSS2规范,术语canvas用来描述"格式化的被渲染结构的空间"——浏览器绘制内容的地方。画布对每个维度空间都是无限大的,但浏览器会基于viewport的大小选择了一个初始宽度。根据http://www.w3.org/TR/CSS2/zindex.html的定义,画布如果是包含在其他画布内则是透明的,否则浏览器会指定一个颜色。2.CS翻译 2013-09-10 23:08:55 · 1564 阅读 · 0 评论 -
读玉伯之Sea.js、开源与前端之路
CSDN:先介绍一下自己和目前的工作吧!玉伯:我叫王保平,阿里花名玉伯。目前在支付宝前端技术部工作,从事前端基础类库、工具等产品的研发。喜欢编码、热爱思考,努力把每一天过得平淡又精彩。CSDN:Sea.js 是什么?致力于解决什么问题?玉伯:Sea.js 是一个很纯粹小巧的模块加载器,它只解决一个问题:前端代码的模块化。通过 Sea.js,可以将大量 JavaScript 代码封装成一原创 2013-09-04 10:02:28 · 3066 阅读 · 0 评论 -
Tips:javascript 图片放大和取得尺寸
1)获取图片尺寸function getWH(t){ //DOM属性 console.log("width="+t.width);//200 console.log("height="+t.height);//300 //操作样式 console.log("styleWidth="+t.style.width);//空 console.log("styleHei原创 2013-09-03 23:45:22 · 1678 阅读 · 0 评论 -
浏览器是如何工作的系列:绘制
六、绘制绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。1.全局和增量:和布局一样,绘制也可以是全局的-绘制完整的树-或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的翻译 2013-09-09 23:36:51 · 1230 阅读 · 0 评论 -
浏览器是如何工作的系列:页面布局
布局(Layout):当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow。Html使用基于流的布局模型,意味着大部分时间,可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性,所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外,比如html tables。坐标系统相对于根frame,使用top和lef翻译 2013-09-09 23:09:22 · 1160 阅读 · 0 评论 -
前端知识体系及修炼攻略
前端简介Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局,后来发展到所谓的Div + CSS网站重构,再到现在的让人眼花缭乱的各转载 2013-09-02 12:51:23 · 1429 阅读 · 0 评论 -
url参数中有+、空格、=、%、&、#等特殊符号的处理
url参数中有+、空格、=、%、&、#等特殊符号的问题解决?解决办法:将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义+ URL 中+号表示空格 %2B 空格 URL中的空格可以用+号或者编码 %20 / 分隔目录和子目录 %2F原创 2013-09-02 23:40:34 · 85193 阅读 · 3 评论 -
seajs+easyui实战
* *author Benjamin *date 2013-11-24 *content seajs+easyui使用 *//** * 首先来看看在seajs中jquery和jquery插件如何使用 */1.jquery.jsdefine(function(require,exports,module)){ //原jquery.js代码原创 2013-11-24 23:34:47 · 2791 阅读 · 0 评论 -
Broswer:浏览器缩放的检测
最近遇到检测浏览器窗口缩放的问题,不经意间看到刀哥的这篇文章,在此收藏了,感谢刀哥的分享。以下正文。。。很多 WEB 开发者可能都会碰到这种头痛的问题,就是当用户对页面进行缩小或放大时,原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局,对于开发者来说是一个不小的挑战。在我看来如果用户有意识的去对网页进行缩放,那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对转载 2013-11-25 23:51:19 · 2069 阅读 · 0 评论 -
javascript:replace()方法使用详解
一、基本语法:replace(regexp|substr, newSubStr|function[, flags]);二、参数介绍:1)参数一: a)regexp:一个 RegExp 对象.该正则所匹配的内容会被第二个参数的返回值替换掉. b)substr:被替换掉的一个 String. 2)参数二: a)newSubStr:替换掉第一个参数在原字符串中的匹配部分.该原创 2013-12-24 14:09:13 · 5050 阅读 · 0 评论 -
实现hao123返回顶部、游戏等快捷导航
周末没事,实现下hao123返回顶部快捷导航功能,请路过的大神指点!下面为相关代码:HTML: 游戏 购物 生活 视频 轻松 到底部 CSS: .wh{width:960px;hei原创 2013-12-21 19:36:55 · 1799 阅读 · 0 评论 -
Why am i a number?
console.log("Why am i a " + typeof + ""); //Why am i a number一、加号的运算:1)首先运行加号左右表达式,并将传入ToPrimitive,参考ECMASCRIPT规范2)表达式操作数其中一个为String,用字符串拼接,返回String( left ) 和 String( right )拼接结果3)如果一个操作数是对象,对原创 2013-12-17 12:56:35 · 1118 阅读 · 0 评论 -
获取颜色值转换为十六进制
一、 分析: * 常见的颜色形式: * a)background-color:red * b)background-color:#00F * c)background-color:#0000F * d)background-color:rgb(0,0,255)二、实现: /** * [parserColor 颜色转换为十六进制] * @param原创 2013-12-30 12:46:59 · 4004 阅读 · 0 评论 -
校验:javascript判断两个IP地址是否在同一个网段
1)基本思路:要判断两个IP地址是否在同一个网段,将它们的IP地址分别与子网掩码做与运算,得到的结果为网络号,如果网络号相同,就在同一子网,否则,不在同一子网。2)具体实现: /** * [isEqualIPAddress 判断两个IP地址是否在同一个网段] * @param {[String]} addr1 [地址一] * @param {[String]}原创 2013-12-12 18:57:58 · 4487 阅读 · 1 评论 -
命名空间的使用和优缺点
一、命名空间的实现:(function(win){ var Benjamin = win.Benjamin = {}; Benjamin.namespace = function(str){ if(!str || !str.length) return null; var parent = Benjamin, arr = str.indexOf(".")原创 2013-12-11 11:16:53 · 3880 阅读 · 0 评论 -
总结javascript的那些怪癖
/** * * @authors Benjamin(http://blog.csdn.net/cuew1987) * @date 2013-11-29 14:04:00 * @content 总结javascript的那些怪癖(trick) *//** * trick01:NaN是个数值 * NaN:表示某个值不是数值,但其本身又是数值,且不等于其自原创 2013-11-30 23:12:25 · 1402 阅读 · 0 评论 -
javascript console对象的兼容性解决方案
/** * * @authors Benjamin(http://blog.csdn.net/cuew1987) */(function (win){ //重置为空函数,避免JS报错 var console = win.console || {}, fns = ['assert', 'clear', 'count', 'debug', 'dir', 'd原创 2013-12-07 09:37:37 · 1542 阅读 · 0 评论 -
javascript中的类型转换与测试
一、默认类型ToPrimitive 转换类型值Undefined结果等于输入的参数(不转换)。Null结果等于输入的参数(不转换)。Number结果等于输入的参数(不转换)。String结果等于输入的参数(不转换)。Boolen结果等于输入的参数(不转换)。Object原创 2013-12-01 09:33:47 · 1362 阅读 · 0 评论 -
javascript:navigator.userAgent
navigator.userAgent解释:返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)常见应用:使用navigator.userAgent属性判断用户使用的浏览器与操作系统,常见操作系统使用率统计与浏览器使用率统计都是通过userAgent属性实现的.写这篇博文的主要目的是要介绍一个地址,可以直接测试浏览器的userAgent,这个网站包含全世界的多种常用浏览器。在原创 2013-11-27 12:53:22 · 2799 阅读 · 0 评论 -
常见表单重复提交问题和处理方法
/*** * @authors Benjamin* @date 2013-11-13 10:16:59*/一、常见的重复提交问题: a>点击提交按钮两次。 b>点击刷新按钮。 c>使用浏览器后退按钮重复之前的操作,导致重复提交表单。 d>使用浏览器历史记录重复提交表单。 e>浏览器重复的HTTP请求。 二、防止表单重复提交的方法 a>原创 2013-11-13 10:31:35 · 5410 阅读 · 0 评论 -
深入javascript引擎对脚本的处理过程
javascript程序与宿主环境进行交互,是通过一系列预定义的方法和属性实现的,这些方法和属性会再映射成浏览器的内部原生代码,所以与其他很对常规的编程语言不同,浏览器开放的这些借口往往受限且有针对性。a)无论是独立的窗口还是在框架里面,每个展示在浏览器里面的html文档,都被赋予了一个独立的javascript执行环境实例,在这个环境里面加载的脚本的所有全局变量和函数都拥有一个独立的命名空间原创 2013-11-26 23:47:57 · 2583 阅读 · 2 评论 -
深入理解__proto__ 、constructor和prototype的关系
之前我对Javascript的原型链中, 原型继承与标识符查找有些迷惑, 如, 如下的代码:function Foo() {};var foo = new Foo();Foo.prototype.label = "laruence";alert(foo.label); //output: laruencealert(Foo.label);//output: undefine原创 2013-11-12 09:56:21 · 3767 阅读 · 3 评论 -
论javascript模块化的优缺
如今backbone、emberjs、spinejs、batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而来。web前端已经演变成大前端,web前端的发展速度之快。1)我们来看看什么是模块化?模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、原创 2013-09-01 21:01:58 · 2130 阅读 · 0 评论 -
iframe使用总结(实战)
说在前面的话,iframe是可以做很多事情的。例如:a>通过iframe实现跨域;b>使用iframe解决IE6下select遮挡不住的问题c>通过iframe解决Ajax的前进后退问题d>通过iframe实现异步上传。(Easyui中form组件就是用的iframe,实现表单提交时,可以提交上传域)下面就一些问题一一论述。1、iframe基本知识:iframe 元原创 2013-09-06 20:51:30 · 98676 阅读 · 6 评论 -
读javascript权威指南
javascript 权威指南:1)XHTML区分大小写;2)javascript 代码两行之间可以不加入分号,会默认插入;3)isNaN():是否不是数字,NaN和任何值都不相等4)数字转字符串T:var num=17; console.log(typeof (num+"")=="string");//truevar num=17;console.log("0x"+nun原创 2013-05-30 19:44:18 · 1065 阅读 · 0 评论 -
javascript深入之动态添加样式规则
添加CSS的方式有行内式、嵌入式、外链式、导入式a)动态引入样式表文件:function loadLink(url){ var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = docu原创 2013-06-19 00:27:02 · 3625 阅读 · 1 评论 -
onbeforeunload与onunload事件总结:
1)异同点相同点:onunload,onbeforeunload都是在刷新或关闭时调用,可以在脚本中通过window.onunload来指定或者在里指定。不同点:a)onbeforeunload在onunload之前执行 ,它还可以阻止onunload的执行。b)onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;nunload则已经从服务器上读到了需要原创 2013-06-16 22:00:27 · 2505 阅读 · 0 评论 -
读javascript权威指南(二)
更新中原创 2013-06-13 23:47:09 · 867 阅读 · 0 评论 -
So, you think you know JavaScript?
//So, you think you know JavaScript? //demo-01:if (!("a" in window)) { var a = 1;}console.log(a);//undefined//demo-02:var a = 1, b = function a (x) { x && a (--x);原创 2013-05-30 19:43:15 · 874 阅读 · 0 评论 -
前端优化总结
今天看了一篇miller写的文章,和最近自己看到的一些javascript书籍中的描述颇有相似之处,特转来通读,以便同行参阅!前言 前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响转载 2013-04-30 22:49:38 · 919 阅读 · 0 评论 -
Web缓存系列之HTML5.0中的缓存机制
随着现代浏览器的推动,Flash放弃对移动端的支持,HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来,HTML5会迎来一个快速发展和普及的春天。那么,HTML5这个新一代的标准,又给我们带来哪些缓存机制呢? HTML5 之离线应用Manifest我们知道,使用传统的技术,就算是对站点的资源都实施了比较好的缓原创 2013-04-21 20:39:35 · 1037 阅读 · 0 评论 -
Web缓存系列之如何构建可缓存站点
1)同一个资源保证URL的稳定性URL是浏览器缓存机制的基础,所以如果一个资源需要在多个地方被引用,尽量保证URL是固定的。同时,比较推荐使用公共类库,比如Google Ajax Library等,有利于最大限度使用缓存2)给css、js、image图片等资源增加http缓存头,并强制入口html不被缓存对于不经常修改的静态资源,比如Css,js,图片等,可以设置一个较长的过期的时间,原创 2013-04-21 20:36:42 · 848 阅读 · 0 评论 -
ajax请求时遇到的问题
方案一: for(var i=0,len=tableEID.length; i<len; i++){ ////tableID=['tableE_tbGroup_0','tableE_tbGroup_1'] var prefixIndex=tableEID[0].lastIndexOf('_'); var prefix=table原创 2013-04-24 22:55:36 · 958 阅读 · 0 评论