web前端
Jafeney
成功的道路并不拥挤,因为坚持的人不会太多
展开
-
[重拾]深入理解gulp自动化
写在前面gulp使用了有一段时间,公司好几个项目自动化就是用它构建的。不过对这个简单粗暴的工具我常常是又爱又怕。啥意思呢?大牛们写的gulp任务我看得懂,也能依样画葫芦运用到自己的项目,但是如果撇开doc,让我自己写我还真写不好。纸上得来终觉浅啊,考验对一门技术的掌握程度,光看得懂、会套用还是停留在浅层,在理解的基础上自己能写出漂亮又高效的代码那才是真正掌握了。详解gulp的API要运行gulp任务原创 2016-03-06 20:22:00 · 2082 阅读 · 1 评论 -
[积累]理解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 · 570 阅读 · 0 评论 -
[积累]推荐给大家的CSS书写规范、顺序
写在前面写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。css书写顺序位置属性(position, top, right, z-index, display, float等)大小(w转载 2016-03-03 14:08:56 · 562 阅读 · 0 评论 -
基于webpack的模块化构建
写在前面模块化构建会让项目的拓展性、代码复用性和可维护性大大提高,初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的,一个良好的模块化方案会让维护工作变得轻松,这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多,RequireJS、SeaJS、Grunt、Gulp等,这些虽然成熟稳定但并不是我们今天的主题,既然是采用react开发webApp,那么模块化当然是选webpack。w原创 2016-02-02 15:35:12 · 4026 阅读 · 1 评论 -
【学习】ES6版本下JavaScript的编程风格
写在前面ES62015年已经大刀阔斧地进入前端领域了,很多前沿的框架比如ReactJS、AngularJS、NodeJS和IOJS新版本都支持ES6语法。还是那句话,前端就是要走在最前端,技术革新速度相当快速,如果你还因循守旧,那就OUT出局吧。当然,ES6新特性很多,建议去极客学院WiFi上看看阮一峰老师的文档,今天不讲具体的语法,而是学习ES6 的新语法,运用到编码实践之中,与传统的 JavaS原创 2016-02-15 16:52:47 · 1495 阅读 · 0 评论 -
webApp重构之路——性能和用户体验细节总结
写在前面webApp开发有一段时间了,随着自己的知识面和技能水平不断提升,一个“重构“的想法变得越来越强烈,当然,重构之前,一个确切的方案是相当关键的,也可以说是重中之重, 吸取之前草率上阵的教训,这次要充分考虑可拓展性和可维护性,把模块化、性能优化、用户体验等做到我所能达到的极致。首先,我先总结开发过程中领悟到的提升webApp性能和用户体验的一些方案。性能优化性能优化,顾名思义是要提升webAp原创 2016-01-28 16:09:43 · 3265 阅读 · 0 评论 -
【实践】nodeJS写个简单的爬虫程序
写在前面经常说SEO却从来没有写过爬虫,今天很有幸看到了关于nodeJS的爬虫程序的实现,模仿着写了个demo,权当砖头抛给大家了。程序架构因为是基于nodeJS,我们所需准备的架构很简单,用express4.x生成一个项目,然后再安装request和cheerio模块就可以。项目的package.json是这样的:{ "name": "spider", "version": "0.0.0"原创 2015-12-27 13:47:17 · 1235 阅读 · 0 评论 -
【实践】express搭建nodeJS中间层(三)
写在前面之前2篇已经比较详细地介绍用express搭建nodeJS中间层并部署到centOS服务器,用forever管理nodeJS进程,这一系列工作 都是基于 项目已经调试 完毕了。但实际开发过程中会发现 每次修改完 代码后 都需要关闭node进程然后 重启才能生效,特别麻烦,这篇就介绍一个 自动监听并同步的的 node工具——supervisor。全局安装 supervisor直接用npm安装既原创 2015-12-25 17:37:36 · 3195 阅读 · 1 评论 -
【重拾】深入理解express框架
写在前面Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性:可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML页面。今天不介绍基本用原创 2015-12-31 16:30:58 · 4939 阅读 · 1 评论 -
【实践】express搭建nodeJS中间层(二)
写在前面上一篇写到用express搭建本地环境而且成功实现了路由和模板渲染,这一篇具体讲讲如何把一个原本用artTemplate渲染的前端页面用nodeJS渲染并返回给浏览器。改造过程 上一篇已经在express里配置好了artTemplate模板引擎,所以这里的改造变得无比简单。删除不需要的依赖项之前在 <head></head>里引入的artTemplate类库存在的目的是在客户端用Jav原创 2015-12-22 18:05:33 · 4724 阅读 · 1 评论 -
[爬坑]关于angularJS的controller文件压缩的问题
前言独自摸索最大的麻烦就是遇到奇怪的问题,比如我一下午都在爬一个坑,就是angularJS的controller文件用gulp打包压缩后网页上一直报错。期初还以为是angularJS的版本问题,傻逼比地翻墙去下载各种版本的angular.min.js文件,结果一个个试过去还是没把问题解决。最后还是无意中发现controller文件未打包前没有报错,而打包后就报“Unknown provider: e原创 2015-12-01 17:09:25 · 4909 阅读 · 0 评论 -
【技巧】用手机访问局域网内Apache网站
写在前面之前不知道还有这么一个技巧,以前手机真机测试webApp都是开电脑的WiFi,然后在手机里开启代理来访问这个网站。这样对设备的依赖性比较大,试想哪天没带笔记本电脑,或者在没有WiFi发射器的台式机里怎么用这个方式?Apache配置修改先确定目标电脑的IP地址找到Apache的httpd.conf文件添加下面这段代码,DocumentRoot 值是你Apache网站的目录。(Apache的监听原创 2015-12-20 11:49:34 · 14500 阅读 · 0 评论 -
【学习】tmodJS——前端模板预编译技术
什么是前端模板预编译前端模板预编译通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板,从而让前端模板实现工程化管理,最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化,能够在最大程度节省客户端资源消耗。按文件与目录组织模板template('tpl/home/main', data)模板支持引入子模板{{i原创 2015-12-20 14:35:40 · 6474 阅读 · 1 评论 -
Node爬坑记——伪造cookie
写在前面在没有引入NodeJS层之前,客户端和服务端之前的数据传输可以用Ajax来完成,而且服务端可以直接读取客户端请求头携带的cookie,这个直接走 HTTP 协议,没有任何问题。但是当引入了一个NodeJS作为中间层,通过中间层调用服务层(比如Java的数据接口层)的接口时,你会发现 直接走http协议,Java层根本无法读取到 原本从客户端发送过来的cookie。这个时候 就需要在中间原创 2016-01-21 23:31:28 · 4640 阅读 · 3 评论 -
关于Safari里quickOn绑定click事件闪屏问题的解决方案
前言前段时间针对webApp里click事件300ms延迟的问题做了比较深入的研究,不过最近有用户反映在iPhone的Safari浏览器里点击页面会出现闪屏的问题(什么是闪屏呢?我这边简单解析是快速点击屏幕并放开之后屏幕会闪烁一下),这个问题偶尔一两次出现还好,但现在反映几乎每个用quickOn绑定click事件的图标点击都出现这个问题。解释quickOn绑定click事件的原理是在移动设备里 通过原创 2015-12-04 11:12:31 · 2693 阅读 · 0 评论 -
html5 postMessage解决跨域、跨窗口消息传递
html5 postMessage解决跨域、跨窗口消息传递一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法,但转载 2015-12-06 10:31:05 · 892 阅读 · 0 评论 -
【探究】NoSQL数据库学习(二)
写在前面之前一篇简单介绍了NoSQL数据库mongoDB的基本语法,暂且不深入研究它高级的用法,这一节具体谈谈nodeJS里如何快速操作mongoDB数据库,也好快速上手。mongoose介绍基本概念Schema —— 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model —— 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 Entity —— 由Mo原创 2016-01-08 11:43:20 · 709 阅读 · 0 评论 -
从jQuery到AngularJS,再到React,前端必须走在最前端
前言最近 很认真地在学习AngularJS,正准备在项目中实践,却不小心地知道了React,根据我师傅说的 React相比AngularJS对DOM的操作思想又是不一样的,React的虚拟文档对象模型(DOM)和拼接机制很有可能是新的一种趋势。这让我很忧郁啊 * _ * ,就像以前初学JavaScript的时候,jQuery的编程思想让我耳目一新,于是没有深入学JavaScript而是花了很长一段时原创 2015-12-07 17:18:27 · 9076 阅读 · 0 评论 -
一看就懂的ReactJs入门教程(精华版)
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc转载 2015-12-07 18:23:13 · 1200 阅读 · 0 评论 -
[转] 使用简单的JavaScript,我们为什么应该抵制ES6
作为一名专职的JavaScript开发者,我会密切关注有关JS最新动态,不过最近看过ECMAScript 6的一些新的语法后。我认为ES委员会已经偏离正确的轨道,正在将JavaScript引向错误的方向,很可能又在重复ES4的老路。JavaScript的简单长久以来,我一直认为当今JavaScript的广泛应用一部分原因是源于她的“简单”。 一定程度上也可以叫作“简陋”,因为她并不能让程序员很“舒转载 2016-04-08 19:39:43 · 3863 阅读 · 0 评论 -
Javascript诞生记-C和Self语言的产物
开始 “1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。……网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。”网页脚本语言到底是什么语言?网景公司当时有两个选择:一个是采用现有的语言,比如Perl、Python、Tcl、Scheme等等,允许它们转载 2016-04-08 20:23:33 · 615 阅读 · 0 评论 -
fetch和XMLHttpRequest讲解
写在前面fetch 同 XMLHttpRequest 非常类似,都是用来做网络请求。但是同复杂的XMLHttpRequest的API相比,fetch使用了Promise,这让它使用起来更加简洁,从而避免陷入”回调地狱”。两者比较比如,如果我们想要实现这样一个需求:请求一个URL地址,获取响应数据并将数据转换成JSON格式。使用fetch和XMLHttpRequest实现的方式是不同的。使用XMLHt原创 2016-07-17 14:43:57 · 15231 阅读 · 0 评论 -
深入理解React中的上下文this
写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5规范里,我们可以遵循一个原则——每个function内的上下文this指向该function的调用方。比如:var Module = { name: 'Jafeney', first:原创 2016-07-19 14:04:31 · 11744 阅读 · 0 评论 -
JavaScript异步编程的终极演变
写在前面有一个有趣的问题: 为什么Node.js约定回调函数的第一个参数必须是错误对象err(如果没有错误,该参数就是null)? 原因是执行回调函数对应的异步操作,它的执行分成两段,这两段之间抛出的错误程序无法捕获,所以只能作为参数传入第二段。大家知道,JavaScript只有一个线程,如果没有异步编辑,复杂的程序基本没法使用。在ES6诞生以前,异步编程的方式大概有下面四种:回调函数事件原创 2016-08-16 09:13:14 · 2425 阅读 · 3 评论 -
基于Node的React图片上传组件实现
写在前面红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助。前端实现遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可。import React, { Component } from 'react'import Upload f原创 2016-08-11 10:38:38 · 8457 阅读 · 5 评论 -
轮子篇:基于Node和React的全栈式架构
写在前面花几天时间做了个小东西,不得不提,麻雀虽小,但五脏俱全,充分体现出一个全栈工程师在小项目上高效的产出能力 (^-^)。简单介绍下:架构适宜如果你是一个前端开发工程师,并且懂一点Node和数据库。有一天,你的老板逼你快速开发一个移动端的商城加一个管理后台,请不要慌张,装上我的轮子跑跑看。快速搭建本打算弄个脚手架工具,但是出于教学的目的,还是一步步地告诉大家怎么搭这个全栈式的框架。用expres原创 2016-12-12 21:16:06 · 11723 阅读 · 5 评论 -
React专利许可证研究
几天前,知乎上出来一个热门话题《如何看待百度要求内部全面停止使用 React / React Native?》,一时间被邀请回答的大咖们就展开了这场没有硝烟的战争。主要有正反两方,跟个大辩论赛似的,很是激烈。我顺道总结下:洗白方洗白方的论据主要有5点:协议一直如此,而且本身是防御性的(1)Facebook的React专利授权是关于分享其代码同时保留它能够抵御的专利诉讼 (2)React本身是开源的原创 2017-09-10 21:44:30 · 1206 阅读 · 1 评论 -
ReactNative 到 Weex 的艰难一迈
“Write once,Run Everywhere” 一次编写,多端运行。React迁移到MIT协议,可惜React Native依然没改,没有RN的日子,还好有Weex这位哥们顶着。虽然没有RN那么牛逼,但也算是一个不错的小兄弟。很多人可能要问我搞了这么久的RN现在转Weex干什么?说起来,真是一个悲伤的故事为什么不用RNFacebook并没有像React那样把ReactNative也迁移到原创 2017-09-29 18:15:43 · 609 阅读 · 0 评论 -
出给自己的前端面试题(一)
前言这个世界上最了解你的人其实是你自己,所以我觉得最好的面试其实就是自己对自己的刁难和反思。什么是自己真正擅长的领域?什么是自己真正薄弱的地方?什么是自己最恐惧的东西?这些问题往往是一个技术开发者最不愿意正视的,殊不知也正是自己多年来对这些问题的逃避,让自己的技术高度止步于此。接下来,我会不定期更一些“出给自己的前端面试题”和自己给出的解答 的相关文章,希望读者能从中获得一些精益,如果回答得不正...原创 2018-10-09 18:55:12 · 383 阅读 · 0 评论 -
深入理解JavaScript的Promise
写在前面 对于没有见过的东西,人们会排斥,因为内心会恐惧。 —— 题记对于JavaScript这门语言来说,带P开头的关键词总是给人一种莫名的恐惧感。在初学JavaScript时,对ProtoType 和 __proto__ 非常恐惧,因为初级应用里根本用不到这两位,但是面试官却总喜欢问这类的问题。后来随着原创 2016-07-03 17:48:39 · 2054 阅读 · 0 评论 -
前端框架设计理念
写在前面 接下去的一段时间要集中对React和ReactNative的项目做进一步的组件化。我这里也先吹个牛,虽然是小团队,但是我们也决心要搞出一套体系化的东西,暂且把它命名为Royal。动工之前为也做了些理论方面的调研,主要是阿里开发的那套ANT和Twitter的 Bootstrap,作为科学理论基础。十大原则『好设计比差设计更难发现』,因为好设计是如此的自然,帮助用户轻松的完成目标,以至于原创 2016-07-02 17:06:03 · 15158 阅读 · 3 评论 -
Redux和Reflux研究
写在前面 在开始全新的React项目前,先好好研究一下React两个典型的“轮子”,Reflux和Redux。两者没有明确的优劣之分,只是对初学者来说Reflux容易理解,而Redux的单一state在项目开发中非常好用,所以你可能发现Github上Redux的星星比Reflux略多些吧。但是见智者见智,两者其实都是社区同仁智慧的结晶。Redux先谈谈对Redux的理解。独特性第一 一个数原创 2016-05-12 14:21:20 · 4827 阅读 · 0 评论 -
互联网公司如何管理研发团队
写在前面之前在小公司当个小小的前端技术主管,就算带个2、3人的团队也觉得有很多问题需要沟通和调停,尤其是对下属的代码质量和开发进度把控上很是头疼。所以我更无法想象,像阿里、网易那样的大公司,尽千人甚至上万人的研发团队应该如何管理呢?带着学习和自我提高的心态,我放弃毕业前高薪的工资来到一家正处于上升热头的互联网公司,从一个实习生做起。放下所有架子,摈弃所谓的傲气,从零开始体验互联网公司的运转模式。下面原创 2016-05-13 16:48:37 · 13331 阅读 · 3 评论 -
React在ES6中的用法
写在前面 不管是多么不乐意待见这个不速之客,但ES6已经一点点渗透进了我的生活里,就连我最爱的React到React Native,默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来,请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》在一旁看了起来……那好,今天就谈谈如何把React用ES6愉快地跑起来。入门级Demos先来几个简单的d原创 2016-04-22 17:50:48 · 20020 阅读 · 0 评论 -
基于Redux架构的单页应用开发总结(一)
写在前面 “大学四年,细细回味。大一,面带稚嫩的面庞,一腔傻傻的热情。可爱帅气的小涵妹,带我认识时尚,好基友终生难忘。大二,踏上程序员之旅,曦点无缘,Smart不弃,恩师点拨学长提携,滴水之恩涌泉报。大三,有了自己的团队,乐雁老朱,编程游戏我们都在一起。项目经验,点点积累,低下小中探寻的是学以致用的真理。大四,杭州漂泊的一年,八爱到贝贝,小公司磨练,大公司学习,前端工程师之路,勇往直行!原创 2016-06-07 23:44:12 · 2651 阅读 · 0 评论 -
Immutable 详解及 React 中实践
写在前面React开发中广泛使用了Immutable,会用但不是很懂,相信很多人有同样的困惑,今天分享一篇 知乎 的关于 Immutable 的好文章。Shared mutable state is the root of all evil(共享的可变状态是万恶之源)-- Pete Hunt有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是转载 2016-06-26 19:16:18 · 3623 阅读 · 0 评论 -
基于Redux架构的单页应用开发总结(二)
写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式关于less的组织作为一个后端出身的前端工程师,写简单的css实在没有那种代码可配置和结构化的快感。所以引入less是个不错的选择,无论是针对代码后期的管理,还是提高代码的复用能力。global.less这个是全局都可以调用的方法库,我习惯把 项目的配色、各种字号、用于引入混出的方法等写在这里,其他container页面通过@im原创 2016-06-11 00:14:17 · 8321 阅读 · 0 评论 -
基于Redux架构的单页应用开发总结(三)
写在前面 这篇具体讲讲Redux使用的一些技巧React式编程思维在没有遁入React之前,我是一个DOM操作控,不论是jQuery还是zepto,我在页面交互的实现上用的最多的就是DOM操作,把复杂的交互一步一步通过选择器和事件委托绑定到document上,然后逐个连贯起来。$(document).on('event', 'element', function(e){ e.preve原创 2016-06-11 17:18:09 · 2645 阅读 · 0 评论 -
如何十倍提高你的webpack构建效率
前言webpack 是个好东西,和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在,让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目架构中这两个东西基本成为了标配,但 commonjs 的模块必须在使用前经过 webpack 的构建(后文称为 build)才能在浏览器端使用,而每次修改也都需要重新构建转载 2016-07-10 17:25:44 · 15942 阅读 · 1 评论 -
Flexbox布局技术研究
写在前面 Flexbox即弹性盒子模型,它在css中的定义和标记非常简单,通过媒体查询的方式就可适配和响应变化,不需要清除浮动,不需要使用额外的框架,也不需要使用大量冗余的代码来实现栅格布局。Flexbox究竟是什么简单地说,我们可以在一个flex容器中标记一些flex子元素,通过css来定义布局。flexbox有很多属性来定义布局。flex-direction: 通过这个属性,我们能指定f原创 2016-04-20 17:39:28 · 4581 阅读 · 0 评论