2015年12月_Jafeney

原创【重拾】深入理解express框架

写在前面Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML页面。今天不介绍基本用

2015-12-31 16:30:58 4953 1

转载【推酷】轻松入门React和Webpack

时间 2015-05-15 03:29:33 天镶的博客原文 http://lingyu.wang/2015/05/15/react-and-webpack/主题 Webpack React CSS最近在学习React.js，之前都是直接用最原生的方式去写React代码，发现组织起来特别麻烦，之前听人说用Webpack组织React组件得心应手，就花了点时间学习了一

2015-12-30 17:38:27 827

原创【学习】CommonJS规范和实现

写在前面一言以蔽：CommonJS是服务器端模块的规范，Node.js采用了这个规范。commonJS简介根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。举个例子 example.jsconsole.log("evaluating example.js");var invisible =

2015-12-30 17:35:05 3734

原创【学习】前端模块化——SeaJS和RequireJS

写在前面之前没学过nodeJS，底子不好，对AMD和CMD的实现没法理解，现在nodeJS也算是步入门槛，再回过身好好研究一下这个“模块化加载器”。SeaJS与RequireJS最大的区别一言以蔽之：执行模块的机制大不一样RequireJS 是执行的 AMD 规范, 所有的依赖模块都是先执行，当然 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。这点和

2015-12-29 16:29:47 1835 1

转载［转载］XMLHttpRequest Level 2 使用指南

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开始考虑标准化这个接口。2008年2月，就提出了XMLHttpRequest Leve

2015-12-27 20:51:00 503

原创【实践】nodeJS写个简单的爬虫程序

写在前面经常说SEO却从来没有写过爬虫，今天很有幸看到了关于nodeJS的爬虫程序的实现，模仿着写了个demo，权当砖头抛给大家了。程序架构因为是基于nodeJS，我们所需准备的架构很简单，用express4.x生成一个项目，然后再安装request和cheerio模块就可以。项目的package.json是这样的：{ "name": "spider", "version": "0.0.0"

2015-12-27 13:47:17 1245

原创【实践】express搭建nodeJS中间层（三）

写在前面之前2篇已经比较详细地介绍用express搭建nodeJS中间层并部署到centOS服务器，用forever管理nodeJS进程，这一系列工作都是基于项目已经调试完毕了。但实际开发过程中会发现每次修改完代码后都需要关闭node进程然后重启才能生效，特别麻烦，这篇就介绍一个自动监听并同步的的 node工具——supervisor。全局安装 supervisor直接用npm安装既

2015-12-25 17:37:36 3228 1

原创【实践】express搭建nodeJS中间层（二）

写在前面上一篇写到用express搭建本地环境而且成功实现了路由和模板渲染，这一篇具体讲讲如何把一个原本用artTemplate渲染的前端页面用nodeJS渲染并返回给浏览器。改造过程上一篇已经在express里配置好了artTemplate模板引擎，所以这里的改造变得无比简单。删除不需要的依赖项之前在 <head></head>里引入的artTemplate类库存在的目的是在客户端用Jav

2015-12-22 18:05:33 4733 1

原创【实践】express搭建nodeJS中间层（一）

写在前面好了，准备了一周的理论知识和开发方案，nodeJS中间层搭建项目从今天就开始了。作为项目的负责人和初次尝试者，我会把开发的过程中用到的技术、碰到的壁一个个用文章记录下来。express框架介绍express框架是nodeJS出来不久就诞生的webServer构建框架，目前的版本是 4.x。项目时间紧迫，这次就不从零开始搞了，站在巨人的肩膀上解决问题，可以帮我们节省些底层工作。 @ exp

2015-12-21 14:39:30 10733 1

什么是前端模板预编译前端模板预编译通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板，从而让前端模板实现工程化管理，最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化，能够在最大程度节省客户端资源消耗。按文件与目录组织模板template('tpl/home/main', data)模板支持引入子模板{{i

2015-12-20 14:35:40 6496 1

原创【技巧】用手机访问局域网内Apache网站

写在前面之前不知道还有这么一个技巧，以前手机真机测试webApp都是开电脑的WiFi，然后在手机里开启代理来访问这个网站。这样对设备的依赖性比较大，试想哪天没带笔记本电脑，或者在没有WiFi发射器的台式机里怎么用这个方式？Apache配置修改先确定目标电脑的IP地址找到Apache的httpd.conf文件添加下面这段代码，DocumentRoot 值是你Apache网站的目录。(Apache的监听

2015-12-20 11:49:34 14522

原创【积淀】封装一个简单的倒计时组件

写在前面电商网站经常会用到倒计时组件，不过很多JavaScript基础薄弱的前端工程师第一反应是去网上下载一个组件，我知道jQuery针对timer就有很多插件，但尽管是压缩后的版本，代码量也有几kb，而且没事使用就要引用进来，有必要吗？就这么简单的一个功能。看我50行搞定它。上代码html结构<div> <span>剩余时间</span> <span id="operate-tim

2015-12-17 19:14:57 891

原创【学习】webApp里 rem的用法

写在前面说到webAPP，我们首先要解决的就是“响应式”这个适配的问题。目前主流的技术是利用css3的viewpoint+媒体查询+栅格布局来实现。这方面有很多成熟的框架：bootstrap、amazeUI等可以使用。不过本人很讨厌把别人的东西直接拿来用，为了实现一个简单的功能就引一个几万行的类库进来，所以当初接触移动开发前我花了2周时间去探索bootstrap的源码，把bootstrap的css组

2015-12-17 13:09:27 1421

原创【实践】用路由为webApp单页应用提供多入口

前言我1个月前开发的webApp是个单入口的单页应用，那个时候需求没有很复杂，仅仅是一个购物的站点，但后来不停地添加功能，而且近期还提出需要把webAPP的部分页面分享到 IOS webView、微信朋友圈，并且能完成完整的业务逻辑。我的策略拆模块，分多页这个需求下来，我第一反应是“拆”——把单页的webAPP根据模块拆分成多页，以一个新的html页面的形式提供给iOS和微信端。这么做的好处很明显：

2015-12-16 10:59:20 4309 3

原创【学习】nodeJS工具模块——util

写在前面util 是一个Node.js 核心模块，提供常用函数的集合，用于弥补核心JavaScript 的功能过于精简的不足。util.inheritsutil.inherits(constructor, superConstructor)是一个实现对象间原型继承的函数。 JavaScript 的面向对象特性是基于原型的，与常见的基于类的不同。JavaScript 没有提供对象继承的语言级别

2015-12-15 11:11:37 534

原创【重拾】nodeJS路由

写在前面在nodeJS的http请求里，我们需要的所有数据都会包含在request对象中，该对象作为onRequest()回调函数的第一个参数传递。但是为了解析这些数据，我们需要额外的Node.JS模块，它们分别是url和querystring模块。一段代码 url.parse(string).query

2015-12-15 10:46:47 597

原创【重拾】nodeJS模块查找

写在前面为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统。模块是Node.js 应用程序的基本组成部分，文件和模块是一一对应的。换言之，一个 Node.js 文件就是一个模块，这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。服务端的模块放在哪里就拿 http模块说起吧。看代码：var http = require("http");..

2015-12-15 10:34:42 1158

原创【重拾】nodeJS 管道流

写在前面再一次过了一遍nodeJS的基础，大概是之前的水平不够，没有很好地理解“流”的概念，今天便好好认识一番吧。先认识什么是”流“Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream，还有stdout（标准输出）。Node.js，Stream 有四种流类型：Readable - 可读操作。Writabl

2015-12-15 10:22:34 5386 1

原创【探索】NodeJS中间层搭建——楔子

前言最近碰了个壁，公司开发的一个新项目里我大胆地提出要前后端完全分离，用JavaScript模板引擎、ajax、路由等技术替代繁琐的前后端混合的业务逻辑，项目进行到一半前辈提出来仅仅靠前端的力量无法满足公司对SEO的要求。是放弃之前的工作重新改用后端velocity模板引擎来渲染页面，把工作重心转交给Java后端，还是坚持走全后端分离路线但是另辟一条蹊径呢？最后又来了个大胆的决定——用nodeJS

2015-12-14 14:20:39 27827 2

转载【taobaoUED】CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及

2015-12-14 11:40:44 650

转载【转载】HTTP状态码的来龙去脉

前言很感谢我的好友超哥分析给我这篇文章，以前的我只是记住了http状态码的意思，并没有去探究它的来龙去脉，而这篇文章就很好地用流程图阐明了这一点。经典中的经典啊~ ^_^原文是这么写的众所周知，每一个HTTP响应都会带有一个状态码，不过对于很多开发者来说，平时使用最多的几个状态码无外乎就是200、400、404、500等。那其他众多状态码该应用在何种场景中，什么时候应该使用哪些状态码就成为一个值

2015-12-13 23:02:34 706

原创【重拾】Javascript设计模式——Singleton（单例）模式

写在前面singleton模式是被熟知的原因是因为它限制了类的实例化次数只能一次。从经典意义上来说，singleton模式在该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例；如果实例已经存在，它会简单返回该对象的引用。singleton不同于静态类(或对象)，因为我们可以推迟它们的初始化，这通常是因为它们需要一些信息，而这些信息在初始化期间可能无法获得、对于没有察觉到之前的引用的

2015-12-13 22:40:56 716

原创【学习】Javascript正则表达式——基础知识小结

前言正则表达式很早就学过了，不过那时没有好好理解，用的时候都是需要什么就去百度一个。不过这总归不是一件好事，只有真正自己理解了，那才是真的懂了。基础知识元字符^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用\来进行转移。如果记不清楚那些标点符号需要转移，可以在使用标点符号时都使用反斜杠\。简单匹配 1、直接量 /javascript/ 匹配带

2015-12-12 23:12:45 550

原创【积淀】jQuery写个简单的模态窗口组件

前言最近在翻新7月份一个项目的代码，确实感觉现在的水平提升了不止一个档次啊^_ ^，之前花了一个近1500行代码完成的交互效果，现在几百行就搞定，而且不依赖三方的UI组件。我现在的编码有自己的设计模式，像模态这些通用的功能我习惯整理在util模块里，其他模块里如果需要调用new一个对象即可。今天不介绍整个util模块的代码，就拎一个模态组件和大家分享一下，如果觉得不错就拿去用吧。真的很不建议为了实

2015-12-12 17:16:35 4257 2

原创【探究】JavaScript内存回收机制

写在前面JavaScript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.例如充许构建和实例化一个对象,垃圾回收机制(GC:Garbage Collecation).通常我们使用new创建对象,GC负责回收对象占用内存区域.因此了解GC,可以加深对JavaScript垃圾回收机制的理解。认识GC用局部变量和全局变量解释GCGC在回收内存时,首先会判断该对象是否被其它对

2015-12-12 11:30:03 1162

原创［学习］JavaScript设计模式——Revealing Module（揭示模块）模式

前言在对Module模式有个熟悉的了解之后，我们来认识一个稍有改进的版本——ChristianHeilmann的Revealing Module模式。模式的由来原来的Module模式可能无法实现这样的需求：当我们从另一个方法调用一个公有方法或者访问公有变量时，必须要重复主对象的名称。而且使用Module时必须要切换到对象字面量表示法来让某种方法变成公有方法。我们需要的可能是这样的一个模式：能

2015-12-12 00:18:54 772

原创【学习】Javascript设计模式——Module模式

写在前面Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。而在Javascript中，Module模式用于进一步模拟类的概念，通过这种方式，能够使一个单独的对象拥有公有/私有的方法和变量，从而屏蔽来自全局作用域的特殊部分。产生的结果是：函数名与在页面上其他脚本定义的函数冲突的可能性降低。应当注意的一点是：在Javascript没有private访问修饰符因此算不得真

2015-12-10 23:17:16 732

原创【面试技巧】创业公司对前端工程师的要求

前言这段时间面试了几个来应聘公司前端工程师职位的童鞋，水平可以说是参差不齐，但一个普遍的现状是 “刚从培训班出来”、“没有项目经验”、“基础语法不懂”、“一问三不知”、“不懂行情”。也可能是我现在的公司能吸引到的也就这类水平吧。介于浪费没有必要的面试时间，早上我根据近期项目里涉及到的前端知识和技能，以及一些性格测试题，“精心”编成了25道题，难度当然是由浅入深了，如果对方能答出60%就基本

2015-12-10 16:34:57 1777

原创【学习】Javascript设计模式——Constructor构造器模式

前言在经典的面相对象语言编程中，Constructor是一种在内存已分配给该对象的情况下，用于初始化新创建对象的特殊方法。在Javascript中，几乎所有东西都是对象，我们通常最感兴趣的是object构造器。object构造器用于创建特定类型的对象——准备好对象以备使用，同时接收构造器可以使用的参数，以在第一次创建对象时，设置成员属性和方法的值。基本ConstructorJavascript虽然不

2015-12-09 23:42:08 1056 1

原创【学习】Javascript设计模式——设计模式类别

前言命名、抽象、标识是通用设计结构的主要方面，这些设计结构能被用于构造可复用的面向对象设计。设计模式确定所包含的类和实例、它们的角色、协作方式以及职责分配。每一种设计模式都重点关注一个特定的对象设计问题或者设计要点，描述何时使用它，在另一些约束条件下是否还能使用，以及使用的效果和利弊。由于我们最终要实现设计，设计模式还是提供了示例，代码来阐明其实现。虽然设计模式描述的是面向对象设计，但是他们都是基于

2015-12-08 22:54:20 722

原创【学习】Javascript设计模式——反模式

什么是反模式如果我们认为一种模式代表一种最佳实践，那么一种反模式就代表我们已经学到的教训。反模式这个术语是1995年由安德鲁·凯尼格在当年的11月C++报告中创造的，是受“四人组”所著《设计模式》一书的启发。在凯尼格的报告中，他提出反模式的两个概念：描述一种针对某个特定问题的不良解决方案，该方案会导致糟糕的情况发生；描述如何摆脱前述的糟糕情况以及如何创造好的解决方案反模式的由来每一个

2015-12-08 22:00:25 1077

原创【学习】JavaScript设计模式——认识设计模式

写在前面从来没有系统地研究过设计模式，之前领悟出来的JavaScript设计模式那纯粹是个人兴起之作，和主流的大家们整理的设计模式还是有不少差距的。这次有幸看到了一本很不错的书。作者归纳地真的很不错，赞叹之余，不忘摘录几段分享给大家。编写易于维护的代码，其中一个重要方面是能够找到代码中重复出现的主题并优化他们，这就是设计模式有价值的地方。什么是模式模式是一种可复用的解决方案，可用于解决软件设

2015-12-08 10:30:59 509

转载一看就懂的ReactJs入门教程（精华版）

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaSc

2015-12-07 18:23:13 1205

原创从jQuery到AngularJS，再到React，前端必须走在最前端

前言最近很认真地在学习AngularJS，正准备在项目中实践，却不小心地知道了React，根据我师傅说的 React相比AngularJS对DOM的操作思想又是不一样的，React的虚拟文档对象模型(DOM)和拼接机制很有可能是新的一种趋势。这让我很忧郁啊 * _ * ，就像以前初学JavaScript的时候，jQuery的编程思想让我耳目一新，于是没有深入学JavaScript而是花了很长一段时

2015-12-07 17:18:27 9098

转载 html5 postMessage解决跨域、跨窗口消息传递

html5 postMessage解决跨域、跨窗口消息传递一些麻烦事儿平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法，但

2015-12-06 10:31:05 903

原创关于Safari里quickOn绑定click事件闪屏问题的解决方案

前言前段时间针对webApp里click事件300ms延迟的问题做了比较深入的研究，不过最近有用户反映在iPhone的Safari浏览器里点击页面会出现闪屏的问题（什么是闪屏呢？我这边简单解析是快速点击屏幕并放开之后屏幕会闪烁一下），这个问题偶尔一两次出现还好，但现在反映几乎每个用quickOn绑定click事件的图标点击都出现这个问题。解释quickOn绑定click事件的原理是在移动设备里通过

2015-12-04 11:12:31 2708

转载缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

前言Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。Lazy Lo

2015-12-02 19:20:32 634

原创 Android Webview和JavaScript交互--JS调用Android方法

前言目前流行原生App和H5进行混合开发，提高开发速度。IOS和JS进行通信比较麻烦，但Android对这种交互进行了很好的封装、我们可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码。网页的JS代码调用Android中Java代码的方法在网页中调用java代码、需要在webview控件中添加javascriptInter

2015-12-02 15:37:57 1129

原创 [爬坑]关于angularJS的controller文件压缩的问题

前言独自摸索最大的麻烦就是遇到奇怪的问题，比如我一下午都在爬一个坑，就是angularJS的controller文件用gulp打包压缩后网页上一直报错。期初还以为是angularJS的版本问题，傻逼比地翻墙去下载各种版本的angular.min.js文件，结果一个个试过去还是没把问题解决。最后还是无意中发现controller文件未打包前没有报错，而打包后就报“Unknown provider: e

2015-12-01 17:09:25 4912

原创我的JavaScript设计模式

前言JavaScript编设计模式有很多，比较常用的是单例模式、模块模式和观察者模式。这里不一一介绍这些模式的用法和场景。记住，设计模式没有好坏，只有适合不适合。下面简单介绍一下我研究出来的一种JavaScript编码模式，这个模式牛逼谈不上，但是用来管理你的前端项目还是挺方便，感兴趣的同学往下看。针对单页应用单页应用实现的原理是通过JavaScript控制页面的显示和隐藏，好看点的话再加点转场效果

2015-12-01 12:01:14 586

空空如也

空空如也