js
文章平均质量分 75
Jafeney
成功的道路并不拥挤,因为坚持的人不会太多
展开
-
轮子篇:基于Node和React的全栈式架构
写在前面花几天时间做了个小东西,不得不提,麻雀虽小,但五脏俱全,充分体现出一个全栈工程师在小项目上高效的产出能力 (^-^)。简单介绍下:架构适宜如果你是一个前端开发工程师,并且懂一点Node和数据库。有一天,你的老板逼你快速开发一个移动端的商城加一个管理后台,请不要慌张,装上我的轮子跑跑看。快速搭建本打算弄个脚手架工具,但是出于教学的目的,还是一步步地告诉大家怎么搭这个全栈式的框架。用expres原创 2016-12-12 21:16:06 · 11756 阅读 · 5 评论 -
一看就懂的ReactJs入门教程(精华版)
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc转载 2015-12-07 18:23:13 · 1205 阅读 · 0 评论 -
【学习】tmodJS——前端模板预编译技术
什么是前端模板预编译前端模板预编译通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板,从而让前端模板实现工程化管理,最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化,能够在最大程度节省客户端资源消耗。按文件与目录组织模板template('tpl/home/main', data)模板支持引入子模板{{i原创 2015-12-20 14:35:40 · 6494 阅读 · 1 评论 -
[爬坑]关于angularJS的controller文件压缩的问题
前言独自摸索最大的麻烦就是遇到奇怪的问题,比如我一下午都在爬一个坑,就是angularJS的controller文件用gulp打包压缩后网页上一直报错。期初还以为是angularJS的版本问题,傻逼比地翻墙去下载各种版本的angular.min.js文件,结果一个个试过去还是没把问题解决。最后还是无意中发现controller文件未打包前没有报错,而打包后就报“Unknown provider: e原创 2015-12-01 17:09:25 · 4912 阅读 · 0 评论 -
JS实现递归要注意的问题
前言所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意,处理不当就会进入死循环。递归函数只有在特定的情况下使用 ,比如阶乘问题。递归计算阶乘的例子<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />原创 2015-12-01 10:26:30 · 5943 阅读 · 2 评论 -
【积淀】封装一个简单的倒计时组件
写在前面电商网站经常会用到倒计时组件,不过很多JavaScript基础薄弱的前端工程师第一反应是去网上下载一个组件,我知道jQuery针对timer就有很多插件,但尽管是压缩后的版本,代码量也有几kb,而且没事使用就要引用进来,有必要吗?就这么简单的一个功能。看我50行搞定它。上代码html结构<div> <span>剩余时间</span> <span id="operate-tim原创 2015-12-17 19:14:57 · 891 阅读 · 0 评论 -
【学习】前端模块化——SeaJS和RequireJS
写在前面之前没学过nodeJS,底子不好,对AMD和CMD的实现没法理解,现在nodeJS也算是步入门槛,再回过身好好研究一下这个“模块化加载器”。SeaJS与RequireJS最大的区别 一言以蔽之:执行模块的机制大不一样RequireJS 是执行的 AMD 规范, 所有的依赖模块都是先执行,当然 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。这点和原创 2015-12-29 16:29:47 · 1833 阅读 · 1 评论 -
深入解析FastClick解决延迟点击
下载源码和文档gitHub上都有,有兴趣的可以去逛逛 https://github.com/ftlabs/fastclick使用<script src="./js/fastclick.js"></script><script> window.addEventListener( "load", function() { FastClick.attach( document.b原创 2015-11-27 23:21:40 · 9268 阅读 · 0 评论 -
[转载]XMLHttpRequest Level 2 使用指南
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5的概念形成后,W3C开始考虑标准化这个接口。2008年2月,就提出了XMLHttpRequest Leve转载 2015-12-27 20:51:00 · 503 阅读 · 0 评论 -
【实践】ArtTemplate helper函数的使用
写在前面”Art虐我千百遍,而待她如初恋“,前端模板引擎很多,机缘巧合之下结识了这位美丽的Art,于是对她情有独钟,纵使开源社区薄弱,API文档稀缺,还是坚韧不拔地去 使用她。和她相处的几个月里 遇到的坑,趟过的枪实在是不计其数,但是没关系,既然选择了她,那就要一心一意,去克服困难,一起成长不是吗?nodeJS中使用最初结识它是在 WebApp开发的时候,那时还不太会nodeJS,Art也仅仅是用在原创 2016-01-11 17:22:35 · 11816 阅读 · 1 评论 -
【学习】ES6版本下JavaScript的编程风格
写在前面ES62015年已经大刀阔斧地进入前端领域了,很多前沿的框架比如ReactJS、AngularJS、NodeJS和IOJS新版本都支持ES6语法。还是那句话,前端就是要走在最前端,技术革新速度相当快速,如果你还因循守旧,那就OUT出局吧。当然,ES6新特性很多,建议去极客学院WiFi上看看阮一峰老师的文档,今天不讲具体的语法,而是学习ES6 的新语法,运用到编码实践之中,与传统的 JavaS原创 2016-02-15 16:52:47 · 1500 阅读 · 0 评论 -
基于Node的React图片上传组件实现
写在前面红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助。前端实现遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可。import React, { Component } from 'react'import Upload f原创 2016-08-11 10:38:38 · 8490 阅读 · 5 评论 -
JavaScript异步编程的终极演变
写在前面有一个有趣的问题: 为什么Node.js约定回调函数的第一个参数必须是错误对象err(如果没有错误,该参数就是null)? 原因是执行回调函数对应的异步操作,它的执行分成两段,这两段之间抛出的错误程序无法捕获,所以只能作为参数传入第二段。大家知道,JavaScript只有一个线程,如果没有异步编辑,复杂的程序基本没法使用。在ES6诞生以前,异步编程的方式大概有下面四种:回调函数事件原创 2016-08-16 09:13:14 · 2433 阅读 · 3 评论 -
深入理解React中的上下文this
写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5规范里,我们可以遵循一个原则——每个function内的上下文this指向该function的调用方。比如:var Module = { name: 'Jafeney', first:原创 2016-07-19 14:04:31 · 11752 阅读 · 0 评论 -
fetch和XMLHttpRequest讲解
写在前面fetch 同 XMLHttpRequest 非常类似,都是用来做网络请求。但是同复杂的XMLHttpRequest的API相比,fetch使用了Promise,这让它使用起来更加简洁,从而避免陷入”回调地狱”。两者比较比如,如果我们想要实现这样一个需求:请求一个URL地址,获取响应数据并将数据转换成JSON格式。使用fetch和XMLHttpRequest实现的方式是不同的。使用XMLHt原创 2016-07-17 14:43:57 · 15311 阅读 · 0 评论 -
深入理解JavaScript的Promise
写在前面 对于没有见过的东西,人们会排斥,因为内心会恐惧。 —— 题记对于JavaScript这门语言来说,带P开头的关键词总是给人一种莫名的恐惧感。在初学JavaScript时,对ProtoType 和 __proto__ 非常恐惧,因为初级应用里根本用不到这两位,但是面试官却总喜欢问这类的问题。后来随着原创 2016-07-03 17:48:39 · 2062 阅读 · 0 评论 -
基于Redux架构的单页应用开发总结(三)
写在前面 这篇具体讲讲Redux使用的一些技巧React式编程思维在没有遁入React之前,我是一个DOM操作控,不论是jQuery还是zepto,我在页面交互的实现上用的最多的就是DOM操作,把复杂的交互一步一步通过选择器和事件委托绑定到document上,然后逐个连贯起来。$(document).on('event', 'element', function(e){ e.preve原创 2016-06-11 17:18:09 · 2653 阅读 · 0 评论 -
基于Redux架构的单页应用开发总结(二)
写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式关于less的组织作为一个后端出身的前端工程师,写简单的css实在没有那种代码可配置和结构化的快感。所以引入less是个不错的选择,无论是针对代码后期的管理,还是提高代码的复用能力。global.less这个是全局都可以调用的方法库,我习惯把 项目的配色、各种字号、用于引入混出的方法等写在这里,其他container页面通过@im原创 2016-06-11 00:14:17 · 8325 阅读 · 0 评论 -
[积累]理解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 阅读 · 0 评论 -
【重拾】Javascript设计模式——Singleton(单例)模式
写在前面singleton模式是被熟知的原因是因为它限制了类的实例化次数只能一次。从经典意义上来说,singleton模式在该实例不存在的情况下,可以通过一个方法创建一个类来实现创建类的新实例;如果实例已经存在,它会简单返回该对象的引用。singleton不同于静态类(或对象),因为我们可以推迟它们的初始化,这通常是因为它们需要一些信息,而这些信息在初始化期间可能无法获得、对于没有察觉到之前的引用的原创 2015-12-13 22:40:56 · 716 阅读 · 0 评论 -
【探究】JavaScript内存回收机制
写在前面JavaScript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.例如充许构建和实例化一个对象,垃圾回收机制(GC:Garbage Collecation).通常我们使用new创建对象,GC负责回收对象占用内存区域.因此了解GC,可以加深对JavaScript垃圾回收机制的理解。认识GC用局部变量和全局变量解释GCGC在回收内存时,首先会判断该对象是否被其它对原创 2015-12-12 11:30:03 · 1161 阅读 · 0 评论 -
前端自动化:谈谈grunt和gulp的区别
自nodeJS登上前端舞台,自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点。 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连原创 2015-09-30 23:16:22 · 22848 阅读 · 0 评论 -
js核心:call和apply区别解析
很多来面试前端工程师的人说自己精通Javascript语言,问他call()和apply()这两个方法有什么区别,结果往往是一问三不知。 其实区分 apply和call就一句话: foo.call(this,arg1,arg2,arg3)==foo.apply(thsi,arguments)==this.foo(arg1,arg2,arg3);> call 和 apply都属于Fun原创 2015-09-30 23:14:37 · 805 阅读 · 0 评论 -
nodejs学习笔记二:闭包和异步编程
闭包到底是什么鬼闭包就是函数��,但是它可以继承并访问它自身被声明的那个作用域里的变量。当你将一个回调函数作为参数传递给另外一个进行i/o操作的函数时,回调函数稍后会被调用,神奇的是,在被调用时,回调函数会记住它自身声明时所在的上下文,并且可以访问该上下文及其父上下文里的所有变量,这个强大的特性就是Node成功的核心。举个简单的jquery例子: (function(){ va原创 2015-09-30 23:11:59 · 2640 阅读 · 0 评论 -
Jquery常用工具函数总结
对象:$.type() 比 typeof() 更合乎逻辑。比如 typeof(null) 返回 object,而 $.type(null) 返回 null$.isEmptyObject() 检查一个对象是否包含任何属性,包括继承的属性,它与对象的类型无关。有返回false,没有返回true$.isPlainObject()与isEmpt原创 2015-08-10 14:46:14 · 1532 阅读 · 0 评论 -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。安装下载dropzone.js文件并添加到页面中即可。Dropzone 不依赖 jQuery 框架。启用可以新建一个div元素,然后通过如下 JavaScript 代码启用 dropzone(如果你使用 jQuery): id="dropz"> $转载 2015-07-28 09:49:06 · 1597 阅读 · 0 评论 -
Grunt快速入门
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。;奇数版本号的 Node.js 被认为是不稳定的开发版。在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令)。如果翻译 2015-07-26 16:54:04 · 703 阅读 · 0 评论 -
原生javascript技巧篇
45个JavaScript编程事项、技巧大全首次为变量赋值时务必使用关键字var如果没有声明直接赋值的话,默认会作为一个新的全局变量,要尽量避免使用全局变量使用 === 替代 ====和!=操作符在有需要的情况下会自动转换数据类型但 === 不会,而且他会同时比较值和数据类型。速度更快undefined、null、0、false、NaN,空字符串的逻辑结果均为 false虽然JavaScript语法翻译 2015-07-25 18:16:51 · 560 阅读 · 0 评论 -
常用的jsDoc
Javascript属于无类型的语言,这对于开发者入门很方便。但对于框架的开发者和IDE的开发者,缺少类型描述有很多不便。其实利用JSDoc稍作扩展,我们可以把它用于类型和值域定义,进而用于代码提示和语法分析。这样框架的使用者可以在IDE里方便的使用代码提示和语法错误分析功能。下面介绍几个 常用的jsDoc。 //使用@alias可以给一个变量或者函数指定一个别名,代码提示时会提示该别名原创 2015-11-11 22:50:29 · 1543 阅读 · 0 评论 -
【学习】JavaScript设计模式——认识设计模式
写在前面从来没有系统地研究过设计模式,之前领悟出来的JavaScript设计模式那纯粹是个人兴起之作,和主流的大家们整理的设计模式还是有不少差距的。这次有幸看到了一本很不错的书。作者归纳地真的很不错,赞叹之余,不忘摘录几段分享给大家。 编写易于维护的代码,其中一个重要方面是能够找到代码中重复出现的主题并优化他们,这就是设计模式有价值的地方。什么是模式模式是一种可复用的解决方案,可用于解决软件设原创 2015-12-08 10:30:59 · 509 阅读 · 0 评论 -
[学习]JavaScript设计模式——Revealing Module(揭示模块)模式
前言在对Module模式有个熟悉的了解之后,我们来认识一个稍有改进的版本——ChristianHeilmann的Revealing Module模式。模式的由来原来的Module模式可能无法实现这样的需求: 当我们从另一个方法调用一个公有方法或者访问公有变量时,必须要重复主对象的名称。而且使用Module时必须要切换到对象字面量表示法来让某种方法变成公有方法。我们需要的可能是这样的一个模式: 能原创 2015-12-12 00:18:54 · 772 阅读 · 0 评论 -
【学习】Javascript正则表达式——基础知识小结
前言正则表达式很早就学过了,不过那时没有好好理解,用的时候都是需要什么就去百度一个。不过这总归不是一件好事,只有真正自己理解了,那才是真的懂了。基础知识元字符^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用\来进行转移。 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠\。简单匹配 1、 直接量 /javascript/ 匹配带原创 2015-12-12 23:12:45 · 550 阅读 · 0 评论 -
【学习】Javascript设计模式——Module模式
写在前面Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。而在Javascript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公有/私有的方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。 应当注意的一点是:在Javascript没有private访问修饰符因此算不得真原创 2015-12-10 23:17:16 · 732 阅读 · 0 评论 -
【学习】Javascript设计模式——Constructor构造器模式
前言在经典的面相对象语言编程中,Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法。在Javascript中,几乎所有东西都是对象,我们通常最感兴趣的是object构造器。object构造器用于创建特定类型的对象——准备好对象以备使用,同时接收构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法的值。基本ConstructorJavascript虽然不原创 2015-12-09 23:42:08 · 1056 阅读 · 1 评论 -
jQuery优化笔记:运用JavaScript模式
单例模式用于改善代码结构的最简单 的技术就是使用精心选择的命名空间,通常这一模式被称为单例。以下是比较喜欢的书写格式: var myApp={ init:function(){ var self=this; self.getData(); self.eventBlind(); //单原创 2015-10-06 23:11:14 · 620 阅读 · 1 评论 -
我的JavaScript设计模式
前言JavaScript编设计模式有很多,比较常用的是单例模式、模块模式和观察者模式。这里不一一介绍这些模式的用法和场景。记住,设计模式没有好坏,只有适合不适合。下面简单介绍一下我研究出来的一种JavaScript编码模式,这个模式牛逼谈不上,但是用来管理你的前端项目还是挺方便,感兴趣的同学往下看。针对单页应用单页应用实现的原理是通过JavaScript控制页面的显示和隐藏,好看点的话再加点转场效果原创 2015-12-01 12:01:14 · 585 阅读 · 0 评论 -
【学习】Javascript设计模式——设计模式类别
前言命名、抽象、标识是通用设计结构的主要方面,这些设计结构能被用于构造可复用的面向对象设计。设计模式确定所包含的类和实例、它们的角色、协作方式以及职责分配。每一种设计模式都重点关注一个特定的对象设计问题或者设计要点,描述何时使用它,在另一些约束条件下是否还能使用,以及使用的效果和利弊。由于我们最终要实现设计,设计模式还是提供了示例,代码来阐明其实现。虽然设计模式描述的是面向对象设计,但是他们都是基于原创 2015-12-08 22:54:20 · 721 阅读 · 0 评论 -
【学习】Javascript设计模式——反模式
什么是反模式如果我们认为一种模式代表一种最佳实践,那么一种反模式就代表我们已经学到的教训。反模式这个术语是1995年由安德鲁·凯尼格在当年的11月C++报告中创造的,是受“四人组”所著《设计模式》一书的启发。在凯尼格的报告中,他提出反模式的两个概念: 描述一种针对某个特定问题的不良解决方案,该方案会导致糟糕的情况发生; 描述如何摆脱前述的糟糕情况以及如何创造好的解决方案反模式的由来每一个原创 2015-12-08 22:00:25 · 1074 阅读 · 0 评论