随笔分类 -  JS

1 2 下一页
设置width / height 引发的问题
摘要：设置一个元素的高宽，有两种方式：1. 按可视区域计算，包括border 和 滚动条2. 按css特指的 width/height 计算这两种方式各有各的好处：第一种用起来很自然，调用者不用去管元素内部的结构，特别是公用性特别明显的组件，如果每次调用都要先减去什么或加上什么，会平添很多代码；第二种则是需要团队定好规则，某个组件只能这么设置高宽（我偏好第一种，第二种也想不到别的好处了。。。）下面只说第一种（第二种还需要说么。。。）。DOM元素的可视区域由 border, padding, content 组成。也就是说如果我们设置一个元素宽度为200px，其实际content = 200 - bo 阅读全文
posted @ 2012-10-09 17:21 越己 阅读(392) 评论(0) 推荐(0) 编辑
精确获取元素样式值 - 盒模型
摘要：两个要点：1. 盒模型的计算方式2. 默认值的处理计算方式先说前提条件，即 doctype 是<!doctype html>，也就是浏览器会按标准模式渲染网页，这样的话，所有浏览器的盒模型的计算方式都是： 可见宽度 = borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth; 可见高度 = borderTopWidth + paddingTop + height + paddingBottom + borderBottomWidth;因为IE8+ 和其他非IE浏览器都支持 box-sizing， 阅读全文
posted @ 2012-06-27 19:25 越己 阅读(436) 评论(0) 推荐(0) 编辑
精确获取元素样式值 - 位置
摘要：写这篇文章我很矛盾，因为如果非常规范的写代码，这篇文章说的问题根本就不存在。因为 top right / bottom left 一般都会手动设置，如果不小心结果是 auto，那绝对是您忘了赋值了。比如为了绝对定位到父级元素（offsetParent）的左上角，有时候我们会偷懒写成下面这样：position: absolute;我们以为浏览器默认会填上 left: 0; top: 0; 没错，大部分浏览器都会实现同样的效果，但是却不是 0px，而是 auto，这时候问题就来了，而且我曾经在Firefox x.0 中发现，这样简写居然不是定位到左上角，当然最新的版本已经解决了这个问题。首先说明一 阅读全文
posted @ 2012-06-27 19:24 越己 阅读(392) 评论(0) 推荐(0) 编辑
精确获取元素样式值
摘要：这个系列的文章会介绍如何精确取值，开篇准备了一些闲言碎语。首先介绍两个工具方法：/** * 把连字符形式转成驼峰形式，如margin-left => marginLeft * @param {String} name * @return {String} */function camelize(name) { return name.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); });}/** * 把驼峰形式转成连字符形式，如marginLeft => margin-left * @p... 阅读全文
posted @ 2012-06-27 19:23 越己 阅读(376) 评论(0) 推荐(0) 编辑
ajax原理分析
摘要：ajax是通过XMLHttpRequest对象和服务器进行通信的一种方式，就像我们在浏览器地址栏输入url，然后服务器返回页面一样，只不过ajax给了我们充分的自由，让我们可以选择何时发送http请求，以何种方式发以及发什么。首先，创建一个XMLHttpRequest对象：function createXHR() { return new XMLHttpRequest();}IE从7开始支持XHR对象，我不想再支持IE6了，所以你懂的。代码范式xhr.open(method, url, isAsyn);xhr.send(data);xhr.open()没有发送请求，而是准备好了一个即将发... 阅读全文
posted @ 2012-05-16 13:30 越己 阅读(600) 评论(1) 推荐(0) 编辑
Contains
摘要：各个类库基本都有contains函数，检测一个元素是否包含另一个元素。核心方法不外乎两个：contains 和 compareDocumentPositioncontains是IE发明的函数，后来也有别的浏览器支持，比如Chrome，但是Firefox不支持。用法如下：el.contains(el2);如果 el包含el2 或 el === el2，返回true；否则返回false。这很简单，接着说compareDocumentPosition。这个函数来自DOM Level 3 规范，标准浏览器都支持，但IE6-8不支持，IE从9开始支持，但是仅仅是IE9模式下才管用，如果你的IE9用的是小 阅读全文
posted @ 2012-03-08 00:28 越己 阅读(3442) 评论(0) 推荐(0) 编辑
一/二维随机数
摘要：背景如下：一个数组[0,1,2,3,4,5,6,7,8,9]，把它打乱成一个新的数组，这是一维随机如果数组是二维的，打乱成一个新的数组，这是二维随机一维随机很简单，就拿这个例子说事，如下：var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];function randomArr(arr) {var newArr = [],map = {}, // key是数组索引len = arr.length;while(newArr.length < len) { // 获得数组的随机索引值var index = Math.floor(Math.random() ... 阅读全文
posted @ 2012-02-13 16:20 越己 阅读(383) 评论(0) 推荐(0) 编辑
正则
摘要：正则用的很普遍，本文仅针对JavaScript。创建有两种方式:1. new RegExp('表达式', '匹配模式')，这种方式的表达式中如果需要转义，转义符需要写两个，如 '\\d'2. 直接量常用属性1. $1 -> $9返回9个在模式匹配期间找到的，最近保存的部分，只读2. index返回第一次成功匹配的开始位置，只读3. lastIndex返回最后一次成功匹配的结束位置（下一次匹配开始的位置），可读写。只有当使用exec() 或 test() 时才会写入。4. lastMatch返回最后匹配的字符，只读。5. input返回查找的 阅读全文
posted @ 2012-01-09 10:55 越己 阅读(435) 评论(0) 推荐(0) 编辑
关于时间处理（更新中）
摘要：重大提示，js的Date会处理很多数值越界的情况，比如xx.setDate(0)，内部会有容错机制，所以我下面写的某些方法完全没有意义判断某年是否为闰年：function isLeapYear(year) { if (typeof year !== 'number') { year = parseInt(year, 10); } if (year === NaN) return false; if ((year % 400 === 0) || (year % 100 !== 0) && (year % 4 === 0) ) { ret... 阅读全文
posted @ 2012-01-04 00:34 越己 阅读(347) 评论(0) 推荐(0) 编辑
读RequireJS — Module
摘要：Module 即模块，来看下RequireJS怎么定义 Module :1. 简单的名值对// Inside file my/shirt.js:define({ color: "black", size: "unisize"});2. 定义成一个Function// my/shirt.js now does setup work// before returning its module definition.define(function () { // Do setup work here return { color: "black&qu 阅读全文
posted @ 2011-12-31 21:03 越己 阅读(2122) 评论(3) 推荐(0) 编辑
读RequireJS — 加载系统
摘要：RequireJS是一个模块加载框架，所以为了最直观的感受它，我们先来看看它的加载系统。先看入口方法:/** * Does the request to load a module for the browser case. * Make this a separate function to allow other environments * to override it. * * @param {Object} context the require context to find state. * @param {String} moduleName the name of the m 阅读全文
posted @ 2011-12-30 13:23 越己 阅读(4874) 评论(2) 推荐(2) 编辑
用一个例子读懂 RequireJS
摘要：例子来自官方，我稍微改造了一下，如下：// project.html<!DOCTYPE html><html> <head> <title>requirejs</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"&g 阅读全文
posted @ 2011-12-30 11:07 越己 阅读(9309) 评论(1) 推荐(2) 编辑
A hack for "for in"
摘要：for in 用于遍历对象的可枚举属性，如:var obj = {a: 1};for (var prop in obj) { alert(prop);}只会打印 "a"显然属性a是可枚举属性，那什么是不可枚举属性呢？通过JavaScript代码添加到对象的属性是可枚举的，而内部对象的预定义属性（或方法）通常是不可枚举的，如toString(), valueOf()等。通常遍历对象属性会这么做：var obj = {a: 1};for (var prop in obj) { if (obj.hasOwnProperty(prop)) { alert(prop); }}这样可以 阅读全文
posted @ 2011-12-28 17:57 越己 阅读(254) 评论(0) 推荐(0) 编辑
动态创建 script 节点
摘要：文章比较长，真正需要的就耐心看吧。比如我们要加载a.js，一般会这么写：var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.type = 'text/javascript';script.src = 'a.js';head.appendChild(script);　说一个知识点，后面会用到：Opera这货是个彻彻底底的两面派，比如它支持 IE 的attachEvent，也支持 阅读全文
posted @ 2011-12-25 01:18 越己 阅读(8236) 评论(3) 推荐(0) 编辑
[组件] TopN 排行榜
摘要：废话不说，直接看代码，最后会给出一个示例：/** * TopN 排行榜组件 * * @param {Array} data 排行数据 * @param {Number} N 即TopN的N * @param {Object} config 配置对象，格式为： * { * headers: [], // 每一项的header信息，如"北京"的header为"城市"， * // 每一项... 阅读全文
posted @ 2011-12-19 18:50 越己 阅读(365) 评论(0) 推荐(0) 编辑
一种神奇的排序算法
摘要：利用时间来排序还是第一次看到：var ints = [1, 3, 2, 4, 8, 6, 7, 5];for(var i = 0, len = ints.length; i < len; i++){ setTimeout(function(num){ console.log(num); }, ints[i], ints[i]);}这里setTimeout居然可以传入第三个参数，经测试，表示回调函数的第一个参数，所以如果传入第四个参数，就表示回调函数的第二个参数啦 阅读全文
posted @ 2011-12-04 17:15 越己 阅读(188) 评论(0) 推荐(0) 编辑
模版替换技术
摘要：进入主题之前先介绍一种创建函数的新方法：new Function()我们来创建一个函数，名字为foofunction foo(a, b){ return a + b;}这种方式是我们普遍使用的，但同样的，我们还可以使用JS语言内置的Function对象来创建这个函数var foo = new Function('a', 'b', 'return a + b;');其实这两种写法在JS引擎看来是同一种，因为第一种会被转换为第二种，只不过第一种可读性更好而已。例子说完了，来看下API：/** * 函数名称为 funName * @param {Str 阅读全文
posted @ 2011-12-04 15:30 越己 阅读(371) 评论(0) 推荐(0) 编辑
IE的一种内存泄漏
摘要：内存泄漏常见的原因有三种：1. 闭包2. 未解除事件绑定3. 循环引用DOM元素除此之外，还有一种泄漏原因少有人知，它和innerHTML有关，不过很容易解决。出现这种内存泄漏需要有三个条件： 1. 内存中存在一个未加入DOM树的元素 2. 给这个元素设置innerHTML，注意，必须是能创建元素并且绑定了DOM 0级事件 3. 必须在这个元素加入DOM树前设置它的innerHTML举个例子：// 创建一个仅存在于内存中的元素var el = document.createElement('div');// 设置innerHTMLel.innerHTML = '< 阅读全文
posted @ 2011-11-28 23:02 越己 阅读(592) 评论(1) 推荐(1) 编辑
RegExp 对象的 m 匹配模式
摘要：正则的 g 和 i 是较为常用的匹配模式，而 m 却较为少用，至少我到现在都没用过。先来看下w3school的说法：“它声明了给定的正则表达式是否以多行模式执行模式匹配。 在这种模式中，如果要检索的字符串中含有换行符，^ 和 $ 锚除了匹配字符串的开头和结尾外还匹配每行的开头和结尾。”举个例子：/javascript$/ 可以匹配 "javascript"，而 /javascript$/m 则可以匹配 "javascript\n" 或 "javascript\r" 之类的。 阅读全文
posted @ 2011-11-23 10:25 越己 阅读(297) 评论(0) 推荐(0) 编辑
Range对象
摘要：Range表示HTML文档的一部分内容，它可以在任何点开始和结束，最常见的Range就是用户选择的一段文本。通过Range对象，你可以找到开始点和结束点，你可以复制或者删除它，或者替换成另一段文本，甚至是一段HTML代码。比如用户从下面的文本中选择了一段：选中的这段文本跨越了好几个HTML元素，而且你会发现，这段选中的文本是极不规范的HTML代码，比如第一行没有<p>，最后一行没有</li>。还好，所有浏览器都会自动补全：获得用户选择区域function getUserSelection(){ if(window.getSelection){ return window 阅读全文
posted @ 2011-11-02 22:59 越己 阅读(6836) 评论(2) 推荐(4) 编辑

1 2 下一页
点击右上角即可分享
微信分享提示