Jafeney-CSDN博客

原创基于Redux架构的单页应用开发总结（二）

写在前面这次重点介绍基于Redux架构的单页应用代码的组织方式关于less的组织作为一个后端出身的前端工程师，写简单的css实在没有那种代码可配置和结构化的快感。所以引入less是个不错的选择，无论是针对代码后期的管理，还是提高代码的复用能力。global.less这个是全局都可以调用的方法库，我习惯把项目的配色、各种字号、用于引入混出的方法等写在这里，其他container页面通过@im

2016-06-11 00:14:17 8325

原创基于Redux架构的单页应用开发总结（一）

写在前面 “大学四年，细细回味。大一，面带稚嫩的面庞，一腔傻傻的热情。可爱帅气的小涵妹，带我认识时尚，好基友终生难忘。大二，踏上程序员之旅，曦点无缘，Smart不弃，恩师点拨学长提携，滴水之恩涌泉报。大三，有了自己的团队，乐雁老朱，编程游戏我们都在一起。项目经验，点点积累，低下小中探寻的是学以致用的真理。大四，杭州漂泊的一年，八爱到贝贝，小公司磨练，大公司学习，前端工程师之路，勇往直行！

2016-06-07 23:44:12 2661

写在前面之前在小公司当个小小的前端技术主管，就算带个2、3人的团队也觉得有很多问题需要沟通和调停，尤其是对下属的代码质量和开发进度把控上很是头疼。所以我更无法想象，像阿里、网易那样的大公司，尽千人甚至上万人的研发团队应该如何管理呢？带着学习和自我提高的心态，我放弃毕业前高薪的工资来到一家正处于上升热头的互联网公司，从一个实习生做起。放下所有架子，摈弃所谓的傲气，从零开始体验互联网公司的运转模式。下面

2016-05-13 16:48:37 13373 3

原创 Redux和Reflux研究

写在前面在开始全新的React项目前，先好好研究一下React两个典型的“轮子”，Reflux和Redux。两者没有明确的优劣之分，只是对初学者来说Reflux容易理解，而Redux的单一state在项目开发中非常好用，所以你可能发现Github上Redux的星星比Reflux略多些吧。但是见智者见智，两者其实都是社区同仁智慧的结晶。Redux先谈谈对Redux的理解。独特性第一一个数

2016-05-12 14:21:20 4843

原创 React在ES6中的用法

写在前面不管是多么不乐意待见这个不速之客，但ES6已经一点点渗透进了我的生活里，就连我最爱的React到React Native，默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来，请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》在一旁看了起来……那好，今天就谈谈如何把React用ES6愉快地跑起来。入门级Demos先来几个简单的d

2016-04-22 17:50:48 20050

原创 Flexbox布局技术研究

写在前面 Flexbox即弹性盒子模型，它在css中的定义和标记非常简单，通过媒体查询的方式就可适配和响应变化，不需要清除浮动，不需要使用额外的框架，也不需要使用大量冗余的代码来实现栅格布局。Flexbox究竟是什么简单地说，我们可以在一个flex容器中标记一些flex子元素，通过css来定义布局。flexbox有很多属性来定义布局。flex-direction: 通过这个属性,我们能指定f

2016-04-20 17:39:28 4592

转载 Javascript诞生记-C和Self语言的产物

开始 “1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。……网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。”网页脚本语言到底是什么语言？网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们

2016-04-08 20:23:33 619

转载 [转] 使用简单的JavaScript，我们为什么应该抵制ES6

作为一名专职的JavaScript开发者，我会密切关注有关JS最新动态，不过最近看过ECMAScript 6的一些新的语法后。我认为ES委员会已经偏离正确的轨道，正在将JavaScript引向错误的方向，很可能又在重复ES4的老路。JavaScript的简单长久以来，我一直认为当今JavaScript的广泛应用一部分原因是源于她的“简单”。一定程度上也可以叫作“简陋”，因为她并不能让程序员很“舒

2016-04-08 19:39:43 3876

原创［重拾］深入理解gulp自动化

写在前面gulp使用了有一段时间，公司好几个项目自动化就是用它构建的。不过对这个简单粗暴的工具我常常是又爱又怕。啥意思呢？大牛们写的gulp任务我看得懂，也能依样画葫芦运用到自己的项目，但是如果撇开doc，让我自己写我还真写不好。纸上得来终觉浅啊，考验对一门技术的掌握程度，光看得懂、会套用还是停留在浅层，在理解的基础上自己能写出漂亮又高效的代码那才是真正掌握了。详解gulp的API要运行gulp任务

2016-03-06 20:22:00 2088 1

转载［积累］推荐给大家的CSS书写规范、顺序

写在前面写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。css书写顺序位置属性(position, top, right, z-index, display, float等)大小(w

2016-03-03 14:08:56 569

原创 [积累]理解Javascript的prototype

写在前面废话不多说，请看下面3道题，把6个console.log()的答案写下来，然后对照着在Console控制台里敲一遍，校验一下结果。代码片段var A = function() {};a.prototype = { num : 1, text : 'aaa'};var x = new A();// 第一题console.log(x.num);console.log(x.t

2016-02-23 15:13:34 573

原创【学习】ES6版本下JavaScript的编程风格

写在前面ES62015年已经大刀阔斧地进入前端领域了，很多前沿的框架比如ReactJS、AngularJS、NodeJS和IOJS新版本都支持ES6语法。还是那句话，前端就是要走在最前端，技术革新速度相当快速，如果你还因循守旧，那就OUT出局吧。当然，ES6新特性很多，建议去极客学院WiFi上看看阮一峰老师的文档，今天不讲具体的语法，而是学习ES6 的新语法，运用到编码实践之中，与传统的 JavaS

2016-02-15 16:52:47 1500

原创基于webpack的模块化构建

写在前面模块化构建会让项目的拓展性、代码复用性和可维护性大大提高，初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的，一个良好的模块化方案会让维护工作变得轻松，这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多，RequireJS、SeaJS、Grunt、Gulp等，这些虽然成熟稳定但并不是我们今天的主题，既然是采用react开发webApp，那么模块化当然是选webpack。w

2016-02-02 15:35:12 4032 1

原创 webApp重构之路——性能和用户体验细节总结

写在前面webApp开发有一段时间了，随着自己的知识面和技能水平不断提升，一个“重构“的想法变得越来越强烈，当然，重构之前，一个确切的方案是相当关键的，也可以说是重中之重，吸取之前草率上阵的教训，这次要充分考虑可拓展性和可维护性，把模块化、性能优化、用户体验等做到我所能达到的极致。首先，我先总结开发过程中领悟到的提升webApp性能和用户体验的一些方案。性能优化性能优化，顾名思义是要提升webAp

2016-01-28 16:09:43 3283

原创 Node爬坑记——伪造cookie

写在前面在没有引入NodeJS层之前，客户端和服务端之前的数据传输可以用Ajax来完成，而且服务端可以直接读取客户端请求头携带的cookie，这个直接走 HTTP 协议，没有任何问题。但是当引入了一个NodeJS作为中间层，通过中间层调用服务层（比如Java的数据接口层）的接口时，你会发现直接走http协议，Java层根本无法读取到原本从客户端发送过来的cookie。这个时候就需要在中间

2016-01-21 23:31:28 4681 3

原创【技巧】断点调试你的express项目

写在前面前端工程师接触最多的是JavaScript，JavaScript程序可以通过浏览器进行调试，比如chrome的调试工具、Firefox的FireBug等。现在大前端趋势下前端工程师开始接触NodeJS这个JavaScript的孪生兄弟，俗话说殊途同归，NodeJS当然也可以通过chrome的调试工具进行断点调试。这篇文章着重介绍一下这个技术。node-inspector全局安装node-in

2016-01-16 15:05:23 10709 2

原创深入理解express的中间件

写在前面前面的文章里也介绍过了，Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。Express项目的底层由许多的中间件在协同工作，可以这么说，一个 Express 应用就是在调用各种中间件。什么是中间件中间件是一个可访问请求对象（req）和响应对象（res）的函数，在 Express 应用的请求-响应循环里，

2016-01-14 15:44:20 12671 1

原创【实践】ArtTemplate helper函数的使用

写在前面”Art虐我千百遍，而待她如初恋“，前端模板引擎很多，机缘巧合之下结识了这位美丽的Art，于是对她情有独钟，纵使开源社区薄弱，API文档稀缺，还是坚韧不拔地去使用她。和她相处的几个月里遇到的坑，趟过的枪实在是不计其数，但是没关系，既然选择了她，那就要一心一意，去克服困难，一起成长不是吗？nodeJS中使用最初结识它是在 WebApp开发的时候，那时还不太会nodeJS，Art也仅仅是用在

2016-01-11 17:22:35 11817 1

原创【探究】NoSQL数据库学习（二）

写在前面之前一篇简单介绍了NoSQL数据库mongoDB的基本语法，暂且不深入研究它高级的用法，这一节具体谈谈nodeJS里如何快速操作mongoDB数据库，也好快速上手。mongoose介绍基本概念Schema —— 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力 Model —— 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对 Entity —— 由Mo

2016-01-08 11:43:20 715

原创【探究】NoSQL数据库学习（一）

写在前面还记得若干年前LAMP很火，Linux+Apache+MySQL+PHP这可谓是中小型网站建站的黄金之选。如今峰回路转，大前端时代nodeJS的到来，使得 MEAN（MongoDB+Express+Angular+NodeJS）成为另一个快速建站和大并发优化的不错之选。什么是NoSQLNoSQL，指的是非关系型的数据库。NoSQL有时也称作Not Only SQL的缩写，是对不同于传统的关系

2016-01-07 14:39:17 913

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

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

2015-12-31 16:30:58 4952 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 10727 1

原创【学习】tmodJS——前端模板预编译技术

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

2015-12-20 14:35:40 6495 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 27823 2

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

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

2015-12-14 11:40:44 650

空空如也

空空如也