摘要：
1. webpack与gulp的区别 gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译，替代手工实现自动化工作。 webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便， 阅读全文
摘要：
确实很久没有写博客了，想起来在第一家公司的时候，一位前辈的一个观点，工作N年下来，写技术文章（经验、感悟、学习等），才可以真正沉淀你的技术。 捡起来，疯狂把最近的工作心得、经验等等慢慢加入进来。 先谈带队吧，4年带队，经验浅谈吧。 1. 要人标准：在众多面试以及培养人才的事情上，确实聪明的同事一点就 阅读全文
摘要：
一个css3的高效变量currentColor，能够继承（父级）当前字体的颜色属性（代表当前的标签所继承的文字颜色）。 参考demo：http://www.zhangxinxu.com/study/201410/background-hollow-currentcolor.html 文章来自：cur 阅读全文
摘要：
一、mac下安装 1. 可直接在官网下载（http://nodejs.cn/），可使用命令查看版本： 同样npm同时也安装下来，可使用下面命令查看： 2. mac下可用homebrew进行安装 安装homebrew只需要在terminal 执行 mac osx是自带ruby环境和python环境，安 阅读全文
摘要：
前言 也算老生常谈的问题了，再深入搞一搞怎么玩儿封装，如果看到这篇文章的你，正好你也是追求完美的代码洁癖狂者，那么这篇文章相信非常适合你。 举一个例子，编写一个Person类，具有name和birthday（时间戳）两个属性及对应的getter和setter方法，注意，setBirthday输入的参 阅读全文
摘要：
一直想把闭包相关的东西整理出来，这篇文章算是闭包相关知识的最终版。 主要分下面几个大的方面： 下面详细说下。 一、定义及运行 下面是在百度的时候，做的一次相关分享，可以不妨扫一扫这个ppt，在ppt后，我再提取关键信息。 我再抽取一下关键的信息： 对于闭包的定义很多书籍都很模糊，个人认为比较准确的定 阅读全文
摘要：
这里简要记录一下对自己感触比较深的几个知识点，将核心的应用投放于实际的项目之中，提供代码的可维护性。 一、let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: ReferenceE 阅读全文
摘要：
又是好久没写博客了，最近把近半年的总结，全部总结到博客园吧。先写最近的一个移动端的学习笔记。毕竟移动端开发了一段时间，就写一写读《移动web手册》中，对我感触比较深的几个点—— 一、浏览器相关 1. 浏览器的类型——内置浏览器、可下载浏览器、代理浏览器以及webview。这里的代理浏览器是指服务端进 阅读全文
摘要：
0. 前言在上一篇文章中，讲述了使用webstorm去调试node程序，最近研究了一下如何使用webstorm去操作git。对于git的使用，大家的使用方式均有不同，最王道的方式非命令行莫属，基于git的GUI软件还是很多的，大家可自行研究使用。之前使用eclipse svn插件去操作版本管理，还是... 阅读全文
摘要：
前言相信大家接触过不少node代码了，如果你应用的比较初级或者针对你的项目不需要接触过深的node代码，也许你仅仅需要简单的console.log('your variable')就完全满足你的需要了。如果你应用node比较深入，想要调试（debug）之，我想你应该接触过node-inspector... 阅读全文
摘要：
最近开发中涉及到有关输出正确的HTML标签这样的问题，正好对字符编码这块儿多看看，之前对这个方面认识的不深，思考的确实不够，如果下次再碰见类似的问题，若再次不少时间去调研的花，就得不偿失了。就像正则表达式一样，似乎你知道它，但是每一次开发都需要现取查、现取测试，估计你会像我一样，每一次都会花些意想不... 阅读全文
摘要：
一、场景/用途前端代理的用途，相信大家都清楚。应用场景很多，如——1. 将线上的静态资源文件（JS、CSS、图片）替换为本地相应的文件，来调试线上（代码都被压缩过）的问题；2. 本地开发过程，当后端接口未就绪的情况下（也就是前端和后端同学并行开发），将AJAX接口映射于本地文件；3. 将测试环境或者... 阅读全文
摘要：
前言关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题2> 同步脚本和异步脚本带来的性能优化问题深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。先看随便一个script标签... 阅读全文
摘要：
完全来自博客园的一篇文章,GET和POST有什么区别？说的非常有道理,学习了.错误理解反驳GET使用URL或Cookie传参。而POST将数据放在BODY中。GET和POST与数据如何传递没有关系GET的URL会有长度上的限制，则POST的数据则可以非常大。HTTP协议对GET和POST都没有对长度... 阅读全文
摘要：
前言相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作，如$.isArray，_.some，_.find等等方法。这里无非是对原生js的数组操作多了一些包装。这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。1、性质JavaS... 阅读全文
摘要：
HTML5的本地存储是大势所趋，如果仅存储在内存中，则是sessionStorage，他们的语法都是一样，仅仅是一个存储在本地文件系统中，另一个存储在内存中（随着浏览器的关闭而消失），其语句如下：localStorage.setItem('a', 'xxxxxx'); // 设置localStor... 阅读全文
摘要：
本文主要写一下如何实现dom元素拖动，目前使用jquery库实现之。主要的注释附在代码中，大家可以根据代码画一个小的窗口模型图，以便于理解。 1 2 3 4 5 实现dom元素拖动 6 16 17 18 19 拖动20 84 85 阅读全文
摘要：
前言1> 借鉴里面的应用思想，使用断言提高代码的健壮性及维护性2> 实现方式——不采用直接嵌入expect的方式，统一进行重写（提取常用断言方法，重新构造API）官网介绍https://github.com/LearnBoost/expect.js在这里,主要是熟悉里面的API即可.列举一下常用的几... 阅读全文
摘要：
简介相信大家都知道Chrome Develop Tools中的workplace，这使得我们能够让本地的文件夹在Source面板下可以编辑。没错，这使得chrome同样可以成为我们可选的编辑器之一，但发现仅仅用这个功能，并不能显示workplace的优势，需要结合SourceMapping一起来使用... 阅读全文
摘要：
前言对于css文件而言，选择器的写法有它的讲究，如——1> 不要用ID选择器2> 不要用通配符*选择器3> 选择器的层级......对于属性值的写法也有他的讲究，如——1> 复合属性，如font、background、margin、padding等2> 颜色、单位、hack、css3属性等........ 阅读全文
摘要：
LESS（官网在此：http://lesscss.net/）的魅力相信大家都已明了，个人认为它最大的魅力在于能够清晰的展现嵌套关系。针对现有的项目，它的应用难点主要在于——何时转换为css，即是否利于开发调试、是否利于一键部署现有项目是基于css的，如何很好的将css转换成less，进而以后维护le... 阅读全文
摘要：
前言之前的文章——图片优化调研之理论篇——主要以理论的东西为主。正确选择合适的图片格式——不管你用Fireworks还是Photoshop，可用预览功能多去尝试，选择size最小的且确保质量（其场景与PM商定）的图片。另一个方面，就是无损压缩。本篇文章主要针对自动无损压缩，具体再啰嗦一下如何实现。实... 阅读全文
摘要：
前言内容较多，理论部分比较基础。对于新人而言，从浅入深，比较好理解；对于老手而言，可跳过，可直接看实践部分。 总之，希望对大家有所帮助。1. 收益为了提升网站性能，保持网站处于“节食”状态非常重要——确保所有新引入的资源都是最精简的，图像优化就是这样一项工作。 大家不妨猜猜图片流量占总流量的百分比。... 阅读全文
摘要：
这两本书就一块儿搞了，大多数已经理解，简单做个标记。主要对自己不太了解的地方，做一些记录。一、读《高性能网站建设指南》 0> 黄金性能法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。 1> 尽量减少HTTP请求 2>... 阅读全文
摘要：
一、定义 在事件驱动的环境中，比如浏览器这种持续寻求用户关注的环境中，观察者模式（又名发布者-订阅者(publisher-subscripber)模式）是一种管理人与其任务之间的关系（确切地讲，是对象及其行为和状态之间的关系）的得力工具.用JavaScript的话来说，这种模式的实质就是你可以对程... 阅读全文
摘要：
一、定义 代理是一个对象，它可以用来控制对另一个对象的访问。它与另外那个对象实现了同样的接口，并且会把任何方法调用传递给那个对象。另外那个对象通常称为本体。代理可以代替其实体被实例化，并使其可被远程访问。它还可以把本体的实例化推迟到真正需要的时候，对于实例化比较费时的本体，或者因尺寸较大以至于不用... 阅读全文
摘要：
一、定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中。这样一来，你可以给一个方法添加一些行为，然后将方法调用传递给原始对象。相对于创建子类来说，使用装饰者对象是一种更灵活的选择（装饰者提供比继承更有弹性的替代方案）。 装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰... 阅读全文
摘要：
一、定义 适配器模式可用来在现有接口和不兼容的类之间进行匹配。使用这种模式的对象又叫包装器（wrapper）,因为它们是在用一个新的接口包装另一个对象。在设计类的时候旺旺会遇到有些接口不能与现有API一同使用的情况。借助于适配器，你不用直接修改这些类也能使用它们。 适配器可以被添加到现有代... 阅读全文
摘要：
一、前言 门面模式，也称Facade（外观）模式。核心的两点作用—— 1>简化类的接口（让接口变得更加容易理解、容易应用、更加符合对应业务），来掩盖一个非常不同或者复杂的实现 2>消除类与使用它的客户代码之间的耦合 可以把门面模式想成是简化API来展示给其他开发人员，通常都是可以提高可用性。... 阅读全文
摘要：
一个类或对象中往往会包含别的对象。在创建这种成员对象时，你可能习惯于使用常规方式，也即用new关键字和类构造函数。问题在于这回导致相关的两个类之间产生依赖性。 工厂模式用于消除这两个类之间的依赖性，它使用一个方法来决定究竟要实例化哪个具体的类。这里介绍简单工厂模式（动态选择并生成实例）及真正的... 阅读全文
摘要：
桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。一、使用场景 使用场景一：事件监控 对于前端而言，最典型的使用场景——事件监控。如——addEvent(element, 'click', getBeerById);// 可以看出这是一个只能工作在浏览器中的API，根据时间监听期回调函数的工作机制，事件对象会被作为第一个参数传递给这个函数。// 在本例中并没有使用这个参数，而只是从this对象获取ID。如果你对这个API函数做单元测试，就很困难了。// 对于API开发者来说，最好从一个优良的API开始，不要把它与任何特定的实现搅在一起。functio 阅读全文
摘要：
前言 前端的MVC，近几年一直很火，大家也都纷纷讨论着，于是乎，抽空总结一下这个知识点。看了些文章，结合实践略作总结并发表一下自己的看法。 最初接触MVC是后端Java的MVC架构，用一张图来表示之—— 这样，我们让每一个层次去关注并做好一件事情，层与层之间保持松耦合，我们可以对每一个层次单独做好测试工作。如此，我们可以让代码更具可维护性。 因此，借鉴于后端的这种MVC设计思想（更多的我想是一种优秀的、经过考验的实践模式），针对越来越复杂的JavaScript应用程序，便有了猜想，我们是否可以使用MVC的设计思想，编写出高维护性的前端程序。一、MVC定义 先来看看《基于MVC的J... 阅读全文
摘要：
JavaScript是一种简洁明了的语言，其中并没有在其他语言中经常使用的一些特殊语法特征，比如命名空间(namespace)、模块(module)、包(package)、私有属性(private property)，以及静态成员等语法。 当然，我们使用其他方式来模拟实现上述语法特征。 1 /** 2 * 1.命名空间模式 3 * 1>命名名称的选取：应用程序(QIANGBA)或库的名称(TIANLANG)、域名或公司(CYOU)名称 4 * 2>通用命名空间 5 * 注意名称覆盖的问题 6 * //不安全的代码 7... 阅读全文
摘要：
现代继承模式可表述为：其他任何不需要以类的方式考虑得模式。 现代继承方式#1 —— 原型继承之无类继承模式function object(o) { function F() {}; F.prototype = o; return new F();}function Person() { this.name = 'king';}Person.prototype.getName = function () { return this.name;};var papa = new Person();var kid = object(papa);console.log... 阅读全文
摘要：
实现类式继承的目标是通过构造函数Child()获取来自于另外一个构造函数Parent()的属性，从而创建对象。 1.类式继承模式#1 —— 默认方式(原型指向父函数实例)function Parent(name) { this.name = name || 'king';}Parent.prototype.say = function () { return this.name;};function Child(name) { this.name = name;}function inherit(C, P) { /** * 1>该继承模式同时继承了两个对象... 阅读全文
摘要：
API模式：回调模式、配置对象、返回函数； 初始化模式：即时函数、即时对象初始化、初始化分支； 性能模式：备忘模式、自定义模式 1 //*********************** API模式 *********************** 2 /** 3 * ---------------------- 回调模式 ---------------------- 4 * 5 * 1>要写出通用和可复用的代码，回调模式可以帮助实现这种通用化。 6 * 2>不需要预测和实现能想到的每一项功能，因为这样会迅速使我们的代码膨胀， 7 * 而绝大多数用户永远不会需要其中大量的... 阅读全文
摘要：
这本《高性能JavaScript》讲述了有关JavaScript性能优化的方方面面，主要围绕以下几个方面：1> 加载顺序2> 数据访问(如怎样的数据类型访问最快，怎样的作用域链最优)3> DOM编程(如怎样的方式访问DOM元素性能是最优的)4> 字符串和正则 5> Ajax6> 编程实践(性能测试工具的使用、创建与部署JavaScript应用程序、如何提升程序响应)var script = document.createElement ("script");script.type = "text/javascript" 阅读全文
摘要：
JavaScript是基于原型的语言，通过new实例化出来的对象，其属性和行为来自于两部分，一部分来自于构造函数，另一部分是来自于原型。构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高，如果构造函数和原型定义了同名的属性和行为，构造函数中的属性和行为会覆盖原型中的同名的属性和行为。如下图—— 当我们声明一个类时，其实同时生成了一个对应的原型，例如我们定义Animal这个类时，会生成一个与Animal类对应的原型，通过Animal.prototype可以指向这个原型，原型可以通过constructor指向Animal类，更确切的说，是指向Animal类的构造函数。... 阅读全文
摘要：
搬出来之前的学习笔记，我觉得还算可以的一本基础书籍。 先弄个这本书的logo—— 目录结构——第一章：从网站重构说起第二章：团队合作第三章：高质量的HTML第四章：高质量的CSS第五章：高质量的JavaScript 其核心内容如下—— 第一章：从网站重构说起/** * 1.分离结构、样式、行为 * 2.打造高品质的前端代码，提高代码的可维护性—— * 1>精简：可以让文件变小，有利于客户端快速下载； * 2>重用：可以让代码更易于精简，同时有助于提升开发速度； * 3>有序：可以让我们更清晰地组织代码，使代码更易于维护，有效应对变化。 */ 第二章：团队合... 阅读全文
摘要：
章节列表：第08章：BOM第09章：客户端检测第10章：DOM第11章：DOM2和DOM3第12章：事件第13章：表单脚本第14章：错误处理与调试第17章：Ajax和JSON第20章：最佳实践片段串接： 1 (function($){ 2 3 /** 4 * 第8章：BOM 5 * window对象的核心函数 6 * 1>超时调用和间歇调用 7 * 2>核心对象： 8 * a>location 9 * b>navigator 10 * c>scre... 阅读全文