![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
Spider--Man
灵魂画家
展开
-
koa:当创建一个服务时,做了什么
创建一个简单的应用// 1、实例化appvar Koa = require('koa');const app = new Koa();// 2、声明中间件函数async function responseTime(ctx, next) { const start = new Date(); await next(); const ms = new Date() - start +原创 2017-04-25 11:09:01 · 944 阅读 · 0 评论 -
react-bits:解构参数
react-bits 原文解构赋值是ES2016特性,在处理无状态函数的props时很方便 下面两个例子是等价的:const Greeting = props => <div>Hi {props.name}!</div>;const Greeting = ({ name }) => <div>Hi {name}!</div>;…允许收集对象所有剩下的属性到新的对象中const Greeting翻译 2017-04-06 11:18:29 · 443 阅读 · 0 评论 -
react-bits:JSX扩展属性
react-bits 原文扩展属性是JSX的一个特性,是把所有对象属性传递给JSX属性的语法糖。…运算符已经被ES6的数组支持,ES2017对象也被建议支持。下面的两个例子是等价的:// props written as attributeslet main = () => <main className="main" role="main">{children}</main>;// props翻译 2017-04-06 11:00:47 · 925 阅读 · 0 评论 -
react-bits:组件切换
react-bits 原文从多个组件中选一个渲染 使用对象映射props值和组件import HomePage from './HomePage.jsx';import AboutPage from './AboutPage.jsx';import UserPage from './UserPage.jsx';import FourOhFourPage from './FourOhFour翻译 2017-04-06 00:13:06 · 713 阅读 · 0 评论 -
react-bits:从父组件获取子组件
react-bits 原文从父组件获取子组件 例如:操作父组件使子组件获取焦点子组件 一个输入框,带focus()函数可以自动获取焦点class Input extends Component { focus() { this.el.focus(); } render() { return ( <input ref={el=> { this翻译 2017-04-06 00:08:56 · 919 阅读 · 0 评论 -
react-bits:无状态函数组件
react-bits 原文 无状态函数是一种很有用的定义高可复用组件的方法。 他们不拥有状态,只是函数。 使用函数的优点是视图和逻辑的分离,由于没有内部的状态处理和逻辑,视图和逻辑的分离更为彻底。 无状态函数组件因为没有状态和生命周期函数,性能得以提升,react团队在未来的版本将会避免无意义的检查和内存分配import {PropTypes, ContextTypes} from "re翻译 2017-04-05 23:31:35 · 921 阅读 · 0 评论 -
react-bits:使用HOC共享跟踪逻辑
react-bits 原文使用高阶组件在不同的组件间共享跟踪逻辑 例如:给不同组件添加分析跟踪代码减少重复代码从表层组件移除跟踪逻辑代码,更有利于测试import tracker from './tracker.js';// HOCconst pageLoadTracking = (ComposedComponent) => class HOC extends Component {翻译 2017-04-05 23:49:52 · 444 阅读 · 0 评论 -
react-bits:列表组件
react-bits 原文不建议将列表内单个元素抽象出组件,建议使用mapconst SearchSuggestions = (props) => { // renderSearchSuggestion() behaves as a pseudo SearchSuggestion component // keep it self contained and it should be ea翻译 2017-04-05 23:58:10 · 295 阅读 · 0 评论 -
react-bits:使用组件进行文本格式化
react-bits 原文 我们倾向于创建一个单独的组件格式化文本,而不是调用render内的函数使用组件 render更容易理解,因为它只是组件组合在一起const Price = (props) => { // toLocaleString is not React specific syntax - it is a native JavaScript function used fo翻译 2017-04-05 23:40:30 · 783 阅读 · 0 评论 -
react-router
react-router 路由:保证url和视图同步 react-router是在react基础上建立起来的, react渲染通过:props/state–>component–>ui; react-router渲染通过:location–>route–>ui;import { Router, Route, browserHistory } from 'react-router'route原创 2016-03-22 11:32:29 · 826 阅读 · 0 评论 -
react-bits:条件渲染
react-bits 原文条件渲染时可以使用if/else,但当更复杂或需要判断的变量更多时,推荐分离组件替代//iffunction render() { return condition && <span>Rendered when `truthy`</span>}// unlessfunction render() { return condition || <span>Ren翻译 2017-04-06 11:29:48 · 318 阅读 · 0 评论 -
react-bits:Children类型
react-bits 原文react渲染的children元素可以有很多类型,大多情况下是数组或字符串字符串Stringfunction render() { return ( <div> Hello World! </div> )}Arrayfunction render() { return ( <div> {["Hello ",翻译 2017-04-06 11:39:14 · 481 阅读 · 0 评论 -
react-bits:数组作为子元素
react-bits 原文数组作为子元素很常见// We use map() to create an array of React Elements for every value in the array.(<ul> {["first", "second"].map((item) => ( <li>{item}</li> ))}</ul>)//That’s equivale翻译 2017-04-06 13:10:40 · 402 阅读 · 0 评论 -
redux添加中间件
function compose(...funcs) { return arg => funcs.reduceRight((composed, f) => f(composed), arg);}// 参数:传入中间件数组function applyMiddleware(...middlewares) { return (next) => (reducer, initialState)原创 2017-05-25 14:48:28 · 547 阅读 · 0 评论 -
redux源码
1、redux初始化最先做的是使用createStore创建store,store用于管理state createStore(reducer, preloadedState, enhancer)// 传入preloadedState对象作为redux的默认state,当使用combineReducers()方法合并多个reducer时,传入的preloadedState对象key值必须与合并red原创 2017-04-02 20:21:21 · 948 阅读 · 0 评论 -
react-bits:Using Pure Components
Pure Components默认在shouldComponentUpdate进行浅对比,避免props和state未改变时的重复渲染Recompose提供了高阶函数pure用于生成Pure Componentsbadexport default (props, context) => { // ... do expensive compute on props ... return <So翻译 2017-04-20 11:49:23 · 376 阅读 · 0 评论 -
react-bits:shouldComponentUpdate() check
使用shouldComponentUpdate避免昂贵的重复渲染 react组件的props和state改变时会触发重复渲染,每次改变重新渲染整个页面会对浏览器造成很大负担。render之前会触发shouldComponentUpdate,手动判断props和state是否改变,并返回true或false,返回false不会触发渲染。badconst AutocompleteItem = (pro翻译 2017-04-20 11:43:45 · 326 阅读 · 0 评论 -
js判断对象构造函数
调用Object原生toString()方法function isArray(value) { return Object.prototype.toString.call(value) === "[object Array]"}function isFuction(value) { return Object.prototype.toString.call(value) === "原创 2017-04-06 15:33:24 · 2646 阅读 · 0 评论 -
react-bits:Children types
// You might create a component designed to apply context and render its children.class SomeContextProvider extends React.Component { getChildContext() { return {some: "context"} } render() {翻译 2017-04-06 15:23:32 · 291 阅读 · 0 评论 -
react-bits:Render Callback
组件children设为函数const Width = ({ children }) => children(500)// The component calls children as a function, with some number of arguments.// Here, it’s the number 500.// To use this component, we give翻译 2017-04-06 15:02:21 · 659 阅读 · 0 评论 -
react-bits:Function As Children
使用函数作为子元素并不常见<div>{ () => { return "hello world!" }() }</div>可以用于渲染回调,ReactMotion中有使用这种技术。把渲染逻辑保存在自有组件中,而不是被委派。翻译 2017-04-06 14:42:17 · 296 阅读 · 0 评论 -
react-bits:Proxy Component
Buttons随处可见,所有Buttons都需要设置type=”button”<button type="button">我们可以写一个更高层级的组件把它包裹起来,并代理propsconst Button = props => <button type="button" {...props}>使用Button代替button<Button />// <button type="button"><b翻译 2017-04-06 14:32:45 · 556 阅读 · 0 评论 -
react-redux
react-redux是react和redux的绑定库, react-redux提供了两个模块:provider:app顶层容器,接受Redux的store作为props,主要是确保store被connect访问到connect:连接react组件到store,返回一个包含store和react组件的对象connect([mapStateToProps], [mapDispatchToPro原创 2016-03-22 14:15:21 · 703 阅读 · 0 评论 -
js常用正则
创建正则对象// 构造函数创建var patt=new RegExp(pattern,modifiers);// var patt=/pattern/modifiers;使用正则 正则方法var str="Hello world!";var patt1=/Hello/g;patt1.test(str);//true 返回true/falsepatt1.exec(str);// 'Hell原创 2017-04-05 17:41:39 · 341 阅读 · 1 评论 -
html5写链接打开ios和android本地应用
1、在html中设置链接<a id="open-app" href="[scheme]://[host]/[path]?[query]">打开应用</a>href=”[scheme]://[host]/[path]?[query]” scheme可以自己在app内部设置成任意的,把android和ios的设置成一样的 2、若本地应用存在,直接打开app;若不存在,计时一段时间跳到appstore原创 2015-07-12 14:32:40 · 2653 阅读 · 0 评论 -
雅虎网站优化34条法则
1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery转载 2015-06-12 17:24:22 · 435 阅读 · 0 评论 -
js和jquery ajax的使用
AJAX:Asynchronous JavaScript and XML (异步的 JavaScript 和 XML) Ajax 不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。html和css实现页面XMLHttpRequest和web服务器进行数据异步交换js操作DOM,实现动态局部刷新http是一种无状态协议,不保持持久连接,在需要时请求,处理,响应,载原创 2015-06-07 13:57:00 · 469 阅读 · 0 评论 -
web标签语义化
语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。让程序可读性更强针对搜索引擎优化h1~h6这几个标签在搜索引擎中权值非常高 HTML 许多元素、属性在设计的时候,就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。HTML5 在之前规范的基础上,将所有表现层(presentational)的语义描述都进行了修改或者删除,增加了不原创 2015-06-07 19:06:11 · 629 阅读 · 0 评论 -
EMCAScript变量和作用域
javascript变量松散类型:特定时间用于保存特定值的一个名字。全局变量和局部变量:var message="hi";//当前作用域中的局部变量function test(){message="hi";//全局变量}基本类型值:可操作保存在变量中的值undefined:使用var声明当未初始化null:空对象指针boolean:t原创 2015-06-12 15:35:26 · 1093 阅读 · 0 评论 -
编写可维护的js代码-编程风格笔记
1、基本格式化缩进层级:4个空格(把tab设成4个空格)语句结尾:保留;(虽然分析器有自动分号插入机制)行的长度:80个字符空行:确保语义有关联的代码展现在一起命名:变量和函数遵循小驼峰命名法,小写字母开始,后面每个单词首字母大写 变量命名前缀名词myName 函数命名前缀动词setName() 常量MAX_COUNT大写字母和下划线 构造函数大驼峰命名法AnotherName直原创 2015-06-13 23:33:11 · 662 阅读 · 0 评论 -
css sprite的实现
css sprite为什么使用css sprite?网页上的很多静态小图片在加载时需要大量http请求,增加了响应时间。(哈哈,雅虎34条优化法则的第一条啊)css的background-position:x,y;利用分层实现1、设置块状元素大小2、改变背景的位置3、实现(很多小图组成的大图)对应位置小图的出现自动生成css sprite的工具:cs原创 2015-06-12 19:34:25 · 963 阅读 · 0 评论 -
json的解析和序列化
json:javascript的一个严格的子集,利用javascript中的一些模式来表示结构化的数据。json的解析和序列化:json对象两个方法:stringify():把js对象序列化为json字符串,stringify(js对象,过滤器,是否保留缩进)var book={ title:"yuwen",原创 2015-06-12 18:12:42 · 503 阅读 · 0 评论 -
seo优化
seo:Search Engine Optimization,搜索引擎优化,指从自然搜索结果获得网站流量的技术和过程巨大数据库-海量关键字-很多网址蜘蛛搜索-排序内容seo:网站标题,关键字,描述针对网站内容优化Robot.txt文件:当蜘蛛访问站点时会先检查该文件是否存在,若存在会按照其中内容确定访问范围。网站地图:一个网站所有链接的容器,方便原创 2015-06-08 16:41:05 · 564 阅读 · 0 评论 -
yahoo css reset
Yahoo(YUI) CSS Reset:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: c转载 2015-06-13 11:18:26 · 1031 阅读 · 0 评论 -
前端思维导图
转载 2015-06-13 18:27:26 · 1050 阅读 · 0 评论 -
浏览器内核种类
独立浏览器内核:Trident(IE内核):IE;国产Gecko(Firefox内核):presto:opera前内核,渲染速度快,但兼容性不好Webkit(Safari内核,Chrome内核原型,开源):苹果,国产高速模式blink:webkit的webcore组件的分支,使用webkit的渲染引擎,脚本引擎使用的v8,google和opera在用移动端一般只考虑转载 2015-06-14 23:54:27 · 352 阅读 · 0 评论 -
html和native使用JSBridge交互
网页通过webview加载,webview作为native和js交互的中介 ios ios调用jswebview.stringByEvaluatingJavaScriptFromString:返回js脚本的执行结果// Swiftwebview.stringByEvaluatingJavaScriptFromString("swiftcalljs()") js调用ios jsbridge:原创 2017-04-05 14:26:02 · 1238 阅读 · 0 评论 -
微信小程序开发:一个音乐播放器
github源码地址 花了点时间撸了个微信小程序,分两个部分,音乐播放界面和音乐列表。 总结一下遇到的问题UI分4层,第一层背景高斯模糊,第二层灰色半透明蒙层,第三层播放器,第四层列表css设置背景图片路径不能是本地的,需要设置为网络图片,或者base64编码图片旋转暂停通过移除或添加css的animation-play-state: paused;设置本地存储当前播放的音乐,下次进原创 2017-04-12 22:11:59 · 20936 阅读 · 10 评论 -
redux的reducer纯函数处理state的2种方法
1、使用lodash的_.cloneDeep()函数 深复制,可以递归复制复杂的对象,Object.assign()和_.assign()只会复制对象的第一层属性,更深层次的属性是引用赋值的,指向同一对象const newState = cloneDeep(state)newState.name = action.namereturn newState2、使用官方提供的updateimport原创 2017-04-02 21:47:43 · 2988 阅读 · 0 评论 -
redux的合并多个reducer
//创建store需要传入reducercreateStore(reducer, preloadedState, enhancer) //reducer是一个函数,传入当前state和action,返回新的state// (preState, action) => nextState当我们需要将多个reducer合并成一个时combineReducers({ app: appReducer原创 2017-04-02 21:18:21 · 4835 阅读 · 0 评论