文章列表
郭明慧 于 2个月前发表 606 2 0
开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。 Github地址: https://github.com/IronPans/LazyPicker [https://github.com/IronPans/LazyPicker] 效果图: [http://7s1r1c.com1.z0.glb.clouddn.com/t_lazyPicker.gif] 你也可以扫描二维码用手机体验: [http://7s1r1c.com1.z0.glb.clouddn.com/t_1480730967.png] 如果你使用PC浏览器,那么你需要切换到手机模式才可使用。 步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可。 使用方法 引入CSS和JavaScript脚本: <link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script> 简单的表单(input)
2个月前
前端库
张颖 ,认真认真 于 2个月前发表 562 0 0
REACT-ROUTER使用方式 react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。 嵌套的路由表声明一份路径到各个component的映射表结构非常清晰: <Providerstore={store}><Routerhistory={browserHistory}><Routepath="/"component={AppSimple}><Routepath="/editor"component={Editor} /><IndexRedirectto="/proj" /></Route></Router></Provider> 而且支持多层嵌套
2个月前
前端库
moonye 于 6个月前发表 830 0 0
创建一个chrome的插件,并让这个插件能够作为一个app,运行在终端设备上。 <!--more--> 创建一个CHROME插件 该插件app实现一个搜索框,输入内容后,根据输入内容去github搜索名称有关联的repositories * 书写manifest.json * 创建chrome app的加载页面 * 书写加载页面的内容 * 使用chrome的扩展程序加载程序代码MANIFEST.JSON chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version": 2,//固定为2"name": "chrome extension search",//名称自定义 "version": "1.0", "app": { "background": { "scripts": ["scripts/main.js"]//app的入口文件 } }, "permissions": [
6个月前
前端库
coolriver 于 6个月前发表 869 2 0
1 前言 React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习React,可以参考一下下面内容。如果你已是React达人,可以绕过(当然也很欢迎指出不足)。本文不是API文档,也不是代码搬运工,只是谈一下学习React的一些心得和Tips (学习资料,还是推荐 官方文档 [https://facebook.github.io/react/docs/getting-started.html] ) 2 入坑REACT的原因 前端的伙伴们都知道,我们的技术氛围十分活跃,要跟进所有新的技术,保持不落伍不是一件容易的事情。所以,我们必须把有限的学习精力花在能持续产生价值的事情上面。作为参考,我本人学习和使用React的原因有以下几点: * 好多人都在搞啊,Facebook在维护啊,生态好啊,总不会那么容易过时吧(从众心理) * UI组件组织很爽,在开发时会不自觉地提取组件,再次开发时组织原有组件,效率高。 * 数据与UI解耦,单向数据流使逻辑清晰,告别jquery时代的混乱。
6个月前
前端库
何方舟 于 7个月前发表 969 0 1
co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。 本文将剖析 co.js 是为何用同步的写法,就可以解决异步回调的问题。 GENERATOR 首先简要介绍一下 Generator 特性, co.js 是基于该特性实现的,所以弄清 Generator 的远离非常重要。 function* fn(){ beforeA(); yield doA(); yield doB(); afterB(); } var gen = fn(); //生成构造器; gen.next(); //这里会执行到以第一个yield之前的位置,所以执行beforeA 和 doA 这两行; gen.next(); //这里会执行到第二个yield的位置,也就是执行 doB() gen.next(); //这里会执行到生成器结束的位置,afterB(); 简单来说 generator 可以变成一种分步函数,gen 成为这 Generator 函数的指针,通过调用 gen.next()
7个月前
前端库
黎清龙 于 8个月前发表 4378 3 2
深入探讨前端UI框架 1 前言 先说说这篇文章的由来 最近看riot的源码,发现它很像angular的dirty check,每个component ( tag )都保存一个expressions数组,更新时,遍历expressions数组,重新求值,对比旧值,如果有变更则更新DOM。 这不就是dirty check吗?为什么riot还声称它实现了virtual DOM? 疑惑之下,就去复盘了一下各大前端框架,把一些收获分享给大家 本文内容很多,实在不知道怎么取标题,最终取了一个泛泛的标题,请读者不要纠结 本文将会涉及的内容有: 1. MV*前端框架,UI框架,UI更新相关介绍 2. UI更新机制原理及其代表框架介绍 3. 深入探讨各个UI更新机制(为什么virtual DOM会快) 4. 浏览器渲染机制 5. riot的真相(virtual DOM的本质,给我自己一个交代!) 裹脚布较长,读者慎入! 2 理解前端框架 2.1 前端的工作 [http://7tszky.com1.z0.glb.clouddn.com/FjQRozSFfOJTE8y3Ew9l3yMZoEY8]
8个月前
前端库
陈映平 于 1年前发表 1980 2 1
写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等。一旦应用涉及异步操作,代码便会变得复杂起来。在flux体系中,让人困惑的往往有几点: 1. 异步操作应该在 actions 还是 store 中进行? 2. 异步操作的多个状态,如pending(处理中)、completed(成功)、failed(失败),该如何拆解维护? 3. 请求参数校验:应该在 actions 还是 store 中进行校验?校验的逻辑如何跟业务逻辑本身进行分离? 本文从简单的同步请求讲起,逐个对上面3个问题进行回答。一家之言并非定则,读者可自行判别。 本文适合对reflux有一定了解的读者,如尚无了解,可先行查看 官方文档 [https://github.com/reflux/refluxjs] 。本文所涉及的代码示例,可在 此处 [https://github.com/chyingp/blog/tree/master/demo/2016.01.05-reflux-async] 下载。 SYNC ACTION:同步操作 同步操作比较简单,没什么好讲的,直接上代码可能更直观。
1年前
前端库
陈映平 于 1年前发表 1431 0 0
先看例子 其实,redux的核心概念就是 store 、 action 、 reducer ,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) --> final state 可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍 // reducer方法, 传入的参数有两个 // state: 当前的state // action: 当前触发的行为, {type: 'xx'} // 返回值: 新的state var reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); default: return state; } }; // 创建store, 传入两个参数 // 参数1: reducer 用来修改state
1年前
前端库
陈映平 于 1年前发表 1350 0 0
写在前面 redux的源码很简洁,除了applyMiddleware比较绕难以理解外,大部分还是 这里假设读者对redux有一定了解,就不科普redux的概念和API啥的啦,这部分建议直接看 官方文档 [http://camsong.github.io/redux-in-chinese/index.html] 。 此外,源码解析的中文批注版已上传至github,可 点击查看 [https://github.com/chyingp/redux-source-insight] 。本文相关示例代码,可 点击查看 [https://github.com/chyingp/redux-source-insight/tree/master/examples] 。 源码解析概览 将redux下载下来,然后看下他的目录结构。 npm install redux 这里我们需要关心的主要是 src 目录,源码解析需要关心的文件都在这里面了 * index.js :redux主文件,主要对外暴露了几个核心API * createStore.js : createStore 方法的定义
1年前
前端库
moonye 于 1年前发表 2074 0 0
PROMISE介绍 项目相关demo和代码地址 [https://github.com/moonye6/PromiseB] 介绍 Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算.。一个Promise对象代表着一个还未完成,但预期将来会完成的操作。 Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。 引自 MDN [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise] 它解决什么问题 一个简单的示例 执行一个动画A,执行完之后再去执行另一个动画B setTimeout(function(){ //A动画console.log('A'); setTimeout(function() {
1年前
前端库
yisbug 于 1年前发表 1401 1 0
如何在前端编码时实现人肉双向编译 React+flux是目前最火的前端解决方案之一,但flux槽点颇多,例如store比较混乱,使用比较繁琐等,于是出现了很多第三方的基于flux优化的架构。 有人统计了目前主流的flux实现方案,感兴趣的可以看这里: Which Flux implementation should I use? [https://github.com/kriasoft/react-starter-kit/issues/22] 其中 redux 是目前 github 上 star 最多的一个方案,该方案完全独立于 react ,意味着这套理念可以作为架构层应用于其他的组件化方案。同时官方也提供了 react-redux 库,帮助开发者直接使用 react+redux 快速开发。 个人理解它的主要特性体现在以下几点: 1. 强制使用一个全局的 store , store 只提供了几个简单的api(实际上应该是4个),如 subscribe / dispatch (订阅、发布), getState , replaceReducer 。
1年前
前端库
何璇 于 1年前发表 1945 3 0
近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV 类型的框架发展历程及对部分MV\ 框架的介绍。 为什么需要MV* 从前的web应用,前端主要负责改善用户体验,而服务器则将视图(view)和数据结合渲染成页面吐给浏览器。而随着Ajax等技术的出现,如今的web应用的也变得越来越复杂,相比于桌面应用来说也不虚。 如果此时我们还是仅仅使用jquery类库来开发web应用,那么随着应用的功能越来越丰富,业务逻辑越来越复杂,你的代码就可能会变成这样: [http://7tszky.com1.z0.glb.clouddn.com/FnSisvI1lksq3mNf7V4jW4_mZXWG] 然后应用就会在一堆 杂乱无章的选择器和回调函数 中死亡。所以前端也需要将代码的逻辑分层,引用设计模式分离代码的职责,解除不同逻辑之间的耦合,使得前端的代码具有良好的维护性和扩展性。 什么是MV*
1年前
前端库