最新 | 最热门 | 最高评价

+0  Chrome开发者工具的小技巧

Tag: Web开发 | 编程工具 | Chrome | CSS | HTML | Javascript
陈皓 发于 2017年01月19日 20:25 | 点击: 574 | 展开摘要
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流。

话不多话,我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { }  标签,chrome会帮你给格式化掉。

强制DOM状态

有些HTML的DOM是有状态的,比如<a> 标签,其会有 active

查看全文: http://www.udpwork.com/item/16066.html

+0  一些前端框架的比较(下)——Ember.js和React

Tag: JavaScript | Recommended | Ember.js | Flux | React | Redux
四火 发于 2016年12月26日 04:44 | 点击: 359 | 展开摘要
这是前端框架比较和吐槽的第二篇。

Ember.js

Ember.js的extend的写法很类似于JQuery或者是Backbone.js,创建Application,然后在它下面创建相应的Model(Object)、Controller、Router、View和Template,这些都是非常类似的。但是它更为先进的地方在于,一些重复的样板代码,比如给template注入上下文并渲染,如果命名按照CoC的原则正确完成的话,都由框架自动完成,这就省去不少体力活。CoC还体现在

查看全文: http://www.udpwork.com/item/16035.html

+0  一些前端框架的比较(上)——GWT、AngularJS和Backbone.js

Tag: JavaScript | Recommended | AngularJS | Backbone | GWT
四火 发于 2016年12月23日 08:11 | 点击: 469 | 展开摘要
和一些前端框架打过交道,想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受,甚至是吐槽,记录在这里,有些零散,并且更多的是个人的感悟。而且由于技术所限,可能部分内容不够深入,或者不甚客观。当然,网上有很多分析对比,视角可能更为全面和系统。如果你在技术选型,或者在考虑要学习使用哪一款MVC/MVP/MVVM框架的时候,此文能够给你有价值的信息,就更棒了。如果你觉得我哪些部分说得不正确,或者需要补充,也烦请告知。

需要预先说明的是,这篇文章不是教程,因此如果你对其中

查看全文: http://www.udpwork.com/item/16027.html

+0  JavaScript 全栈工程师培训教程

Tag: JavaScript
阮一峰 发于 2016年11月15日 09:08 | 点击: 493 | 展开摘要
我现在的技术方向,前端是 React,后端是 Node,时间都投入在这两方面。

最近有一种感觉,我可以融汇贯通了,使用 JavaScript 全栈解决各种问题。

最初,我只是想整理一份技术清单,理清思路。但是内容越写越多,索性就做成一个教程,放在 Github 上面。这份教程一共四章,可以在两天内学完,适合那些已掌握前端基本技能(HTML、CSS、JS)、想进一步进修、成为 JavaScript 全栈工程师的读者。

我的写作目标是内容完整、脉络清晰、通俗易懂,帮助初学

查看全文: http://www.udpwork.com/item/15919.html

+0  IntersectionObserver API 使用教程

Tag: JavaScript
阮一峰 发于 2016年11月03日 07:53 | 点击: 331 | 展开摘要
网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。

上图的绿色方块不断滚动,顶部会提示它的可见性。

传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。

目前有一个新的 IntersectionObserver API,可以自动"观

查看全文: http://www.udpwork.com/item/15900.html

+0  如何读懂并写出装逼的函数式代码

Tag: 杂项资源 | 程序设计 | 编程语言 | Closure | functional | Javascript | Y combinator
陈皓 发于 2016年10月23日 17:56 | 点击: 467 | 展开摘要
今天在微博上看到了 有人分享了下面的这段函数式代码,我把代码贴到下面,不过我对原来的代码略有改动,对于函数式的版本,咋一看,的确令人非常费解,仔细看一下,你可能就晕掉了,似乎完全就是天书,看上去非常装逼,哈哈。不过,我感觉解析那段函数式的代码可能会一个比较有趣过程,而且,我以前写过一篇《函数式编程》的入门式的文章,正好可以用这个例子,再升华一下原来的那篇文章,顺便可以向大家更好的介绍很多基础知识,所以写下这篇文章。

先看代码

这个代码平淡无奇,就是从一个数组中找到一个数,

查看全文: http://www.udpwork.com/item/15886.html

+0  npm scripts 使用指南

Tag: JavaScript
阮一峰 发于 2016年10月11日 19:03 | 点击: 363 | 展开摘要
Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。

本文介绍如何使用 npm 脚本(npm scripts)。

一、什么是 npm 脚本?

npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

{
// ...
"scripts": {
"build": "node build.js"
}
}

上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一

查看全文: http://www.udpwork.com/item/15868.html

+0  React 技术栈系列教程

Tag: JavaScript
阮一峰 发于 2016年09月23日 07:05 | 点击: 576 | 展开摘要
上周中秋节,我待在家里,写完了 Redux 教程。

至此,《React 技术栈系列教程》算是比较完整了。

ES6 语法:教程

Babel:教程

React:教程,示例库

Webpack:教程

React 项目脚手架:代码库

Flex 布局:教程,示例

CSS Modules:教程,示例库

React-Router:教程,示例库

Flux 架构:教程,示例库

Redux 架构:教程一、教程二、教程三

Mocha 测试框架:教程,示例库

Istanbul

查看全文: http://www.udpwork.com/item/15842.html

+0  Redux 入门教程(三):React-Redux 的用法

Tag: JavaScript
阮一峰 发于 2016年09月21日 21:11 | 点击: 439 | 展开摘要
前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux。

为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它。

这个库是可以选用的。实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,但是需要掌握额外的 API,并且要遵守它的组件拆分规范。

一、UI 组件

React-Redux 将所有组件分成两大类

查看全文: http://www.udpwork.com/item/15841.html

+0  Redux 入门教程(二):中间件与异步操作

Tag: JavaScript
阮一峰 发于 2016年09月20日 08:23 | 点击: 413 | 展开摘要
上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染。

但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步。

怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware)。

一、中间件的概念

为了理解中间件,让我们

查看全文: http://www.udpwork.com/item/15836.html

+0  Redux 入门教程(一):基本用法

Tag: JavaScript
阮一峰 发于 2016年09月18日 13:15 | 点击: 405 | 展开摘要
一年半前,我写了《React 入门实例教程》,介绍了 React 的基本用法。

但是,React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。也就是说,只用 React 没法写大型应用。

为了解决这个问题,2014年 Facebook 提出了 Flux 架构的概念,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。

本文详细介绍 Redux 架构,由于内容较多,全文分成三个部分。今

查看全文: http://www.udpwork.com/item/15830.html

+0  浅谈移动应用的跨平台开发工具(Xamarin和React Native)

Tag: 技术读物 | 编程工具 | Android | C++ | Facebook | iOS | Javascript | ReactNative | Xamarin | 开发工具 | 移动开发
jnj 发于 2016年06月06日 12:35 | 点击: 492 | 展开摘要
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与原生应用仍然存在着明显的差距。

与上述HTML5平台不同,Xamarin和React Native通过各自的方式来实现跨平台。Xamarin基于Mono框架将C#代码编译为原生平台代码,React Native则是在UI主线程之外运行一个JavaScript线程,两者呈现给用户

查看全文: http://www.udpwork.com/item/15541.html
|<<<1234567>>>| 一共20页, 231条记录