axl234
- 浏览: 268958 次
- 性别:
- 来自: 北京
-
最新评论
-
haixin3036：
jQuery是一套跨浏览器的JavaScript库，简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang：
非常感谢分享，正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369：
不错。。。
移动端webapp开发必备知识
文章列表
[置顶] 成功的前端开发人员
- 博客分类：
- javascript
- css
首先就是熟悉HTML，掌握W3C的标准，要学就得学最规范的标准。浏览器最少也要了解四五种，如IE、Firefox、Chrome等。样式也得掌握，以CSS2为主，多看看欧美牛人的风格DIV布局，特简约的那种。可用性也很重要，甭管有事没事总把用户放在心里，再买本工艺美术理论方面的书，有事没事就翻翻，设计个按钮就得花个七八天的时间。交互更重要，现在不是Ajax，就是RIA的，你要是用alert弹框啊，你都不好意思跟人家说去，这样学下去，得学多少年啊？两年时间？那是入门。四年以上？你还别嫌多，就是复杂。认真掂量下这些技术，学好其中的任何一门都是要花好几年工夫。什么叫成功的前端开发人员？就是不但代码写得好 ...
Javascript 继承模式
- 博客分类：
- javascript
在面向对象的JavaScript开发中使用继承可以提高代码重用性，javascript有多重方式可以实现继承，考虑代码的可维护性在项目中应该保持代码风格的一致性，下面是JavaScript中继承的实现方式之一：
辅助对象：
var global = window;
(function(ns,undefined){
//辅助对象：
var Class = {
extends: function(SubClass, SuperClass){
...
JS只是一门支持面向对象编程的语言，通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚。
其实通俗的讲类就是对象的模板，为了增强JS的OO特性，受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员，受保护成员，静态成员。
这是一个在JS中模拟的类定义语法，代码中Class是一个自定义函数，它接受两个参数，第一个参数是类名、第二个参数是一个JSON用来一个对象的模板。在这个JSON对象中其中字段 "extend ...
CSS团队协作开发方式的思考
- 博客分类：
- css
有效的团队协作开发，可以提高工作效率。但在实际的协作开发中情况并非总是这样一帆风顺，最常见的一种情况是当大家都完成各自负责的部分后需要进行集成时往往会让我们大费周章。如过您也有类似烦恼，下面是我对如何 ...
解释器模式（Interpreter）：定义一种语法格式，通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。
开放封闭原则：面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭，在这个dom选择器中实现id选择器，元素选择器，类选择器，如果以后需要属性选择器的话定义一个属性选择器实现相应的方法，同时在简单工厂中增加相应的创建属性选择器对象分支即可。
匹配原理：浏览器在匹配CSS选择符时是按照从右到左匹配的，所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。
代码：
(function ...
可以这样定义模块：
(function(ns, required){
})(window, base);
在上面的代码中使用一个匿名立即执行函数来限定代码的作用域在匿名函数内，用来封模块装逻辑并避免全局命名空间污染。其中ns表示命名空间，required表示依赖的模块。模块通过ns[name] = name; 这样导出，供外部使用。
我们将全局对象作为参数传入匿名函数，这样写的目有两个：一方面可以使我们一眼就看出来模块使用了那些全局对象；另一方面因为在Javascript中访问局部变量不需要遍历 作用域链所以性能会比访问访问全局变量 ...
项目中有多个前端人员协同开发时，你们团队如何分工如何协作的？具体到前端模块化开发可以多人同时签出同一个文件，然后并行开发不同模块，模块经测试通过后提交到版本库。提交时进行手动或自动的合并操作，下次修改 ...
单例模式确保一个类在整个应用程序中只有一个是实例对象，在Javascript可以使用单例模式来管理命名空间；
代码：
/*1、width： viewport的宽度，css像素，三星S3的viewort默认宽度是980px。当设置viewport width=device-width时，对应的媒体查询中width的值为：设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------*/@media screen and (width:360px){ body{ background-color:#0f0; }}
前端性能优化
- 博客分类：
- javascript
- jquery
- css
1. 请减少HTTP请求
基本原理：
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资 ...
看了jquery的源码，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！不到2000行代码。
上面说了不是很精彩的开场白，我么来个 for example: $('.test') 在jquery的流程是怎么走的呢？
1.首先会做如下的判断
/**
*关于 querySelectorAll函数
*返回当前文档中匹配一个特定选择器的所有的元素
*var nodelist = element.querySelectorAll("div.test");
*支持浏览器 ...
jQuery 1.8
可定制
在jQuery 1.8中现在可以定制自己的jQuery版本，你可以移除不需要的模块从而使得jQuery尽可能得变小。可选模块包括ajax，css，dimension，effect和offset，下面是移除所以可选模块的例子：
git clone git://github.com/jquery/jquery.gitcd jquery && npm installgrunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-offset
这样将能得到一个大约21KB的jQuery。 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.google ...
srcset属性获chrome 34支持
- 博客分类：
- 其他
Chrome 34终于正式发布，最引人的特性是开始支持srcset属性了。
其实在此之前，Safari已经开始支持了，而目前来看，这个属性就是为rMBP服务的，因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。
最常用的用法：
<img
src="normal.jpg"
srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" />
但是W3C规范的描述其实更详细：