Web前端
文章平均质量分 63
Jason-Jin
擅长:react,redux,html5,js,flex,node.js,webapp,hybrid
欢迎大家关注我的公众号:不只是程序员
展开
-
时间复杂度
前言工作时间长了,难免对这些知识有一些遗忘,我们还是复习下 时间复杂度的概念和如何计算吧相关概念算法:算法是指解题方案的准确而完整的描述,是一系列解决问腿的清晰指令,算法代表着用系统的方法描述解决问题的策略机制。算法的效率:是指算法执行的时间,算法执行时间需要通过算法编制的程序在计算机上运行时所消耗的时间来衡量。一个算法的优劣可以用空间复杂度和时间复杂度来衡量。时间复...原创 2019-03-18 11:17:55 · 430 阅读 · 0 评论 -
tree-shaking
先问一个问题:对于打包后的文件你关注的是什么?简单的变量话的压缩技术已经不够了其实13年就有一篇外文专门介绍了单纯压缩已经远远不够了,稍后我们也会放出原文它的由来?最早是 rollup 的作者 Rich Harris 在自己的打包工具中设计的一个特性It only includes the bits原创 2016-08-10 11:47:56 · 967 阅读 · 0 评论 -
前端路由实现与 react-router 源码分析
原文地址在单页应用上,前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么,当我们在谈前端路由的时候,还可以谈些什么?本文将简要分析并实现一个的前端路由,并对 react-router 进行分析。一个极简前端路由实现说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash转载 2016-05-25 17:14:28 · 3525 阅读 · 0 评论 -
JavaScript 原型系统的变迁,以及 ES6 class
概述注:原文放在 SegmentFault 。如果你想看到更清晰的目录,可以去看原文。除此之外,本文不缺少任何内容。JavaScript 的原型系统是最初就有的语言设计。但随着 ES 标准的进化和新特性的添加。它也一直在不停进化。这篇文章的目的就是梳理一下早期到 ES5 和现在 ES6,新特性的加入对原型系统的影响。如果你对原型的理解还停留在 function + ne转载 2016-03-28 11:56:54 · 695 阅读 · 0 评论 -
Browserify —— 利用Node.js实现JS模块化加载
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。安装:npm install -g browserify示例这是 main.js 的内容,像普通的 nodejs 程序那样使用 require() 加载库和文原创 2016-02-19 19:46:34 · 721 阅读 · 0 评论 -
ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准转载 2015-12-02 14:19:23 · 506 阅读 · 0 评论 -
更深入学习js的一些细节记录(看到哪里先记录到哪)
javascript学习笔记,学习总结原创 2015-09-14 14:23:57 · 537 阅读 · 0 评论 -
chrome调试webview
1.来看下高大上的chrome://inspect 通过它和USB,你可以调试andriod手机上的h5页面,非常的方便和强大。 它支持以下的调试: 1.浏览器tab页打开的h5页面 2.webview里面打开的页面 3.实时将你andriod设备的屏幕录制到你的开发机上 4.通过port forwarding和virtual host mapping调试你自己的开发服务器原创 2015-11-17 22:26:34 · 2953 阅读 · 0 评论 -
ReactJS 傻瓜教程
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:范洪春链接:http://zhuanlan.zhihu.com/FrontendMagazine/19896745来源:知乎在相当长的一段时间内,我很努力地去尝试理解 React 是什么以及它在应用架构上的健壮程度。这篇文章解答了我希望别人为我解答的疑惑。React 是什么?和 Angul转载 2015-11-09 21:00:43 · 695 阅读 · 0 评论 -
Flux 傻瓜教程
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:寸志链接:http://zhuanlan.zhihu.com/FrontendMagazine/19900243来源:知乎应该使用 Flux 吗?如果你的应用需要处理动态的数据,那很可能需要使用 Flux。如果只是一些静态的视图,它们之间不共享状态,你也没什么数据保存或者更新,就不需要使用 F转载 2015-11-09 21:03:46 · 2928 阅读 · 0 评论 -
前端性能优化的14个规则
作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了《高性能网站建设指南》一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道。在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化转载 2015-09-07 12:30:34 · 465 阅读 · 0 评论 -
CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2015-08-21 10:00:01 · 366 阅读 · 0 评论 -
javascript逻辑运算符“||”和“&&”
一、先来说说||(逻辑或),从字面上来说,只有前后都是false的时候才返回false,否则返回true。alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // false但是,从深层意义上来说的转载 2015-08-21 09:11:55 · 376 阅读 · 0 评论 -
理解JSBridge
随着HTML5的不断普及及优化,其在移动端开发的应用也越来越多,在开发者我们经常需要web和native进行交互,也就是要用到经常听到的“JSBridge”。这里我就自己的理解及实践,讲一下什么是JSBridge。有些朋友听到JSBridge,会觉得是个蛮高大上的东西,好像很厉害很复杂的样子,有了它web和native都能交互了呢。其实并非如此,相信我,JSBridge真的是一个非常非常简转载 2016-10-11 16:06:34 · 10092 阅读 · 0 评论 -
reactjs性能优化之shouldComponentUpdate
更多内容请关注:性能优化每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。避免直接作用于DOMreact实现了一层虚拟dom,它用来映射浏览器的原生dom树...原创 2015-11-16 18:00:34 · 32897 阅读 · 7 评论 -
Android中line-height不居中的解决办法
android的webview中,line-height的垂直居中 对于字体小于12px的无效,主要是因为避免奇数font-size带来的偏差,设置成了偶数,所有会有一些偏上解决办法:1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中,如果页面对字体大小要求比较严格的话,可以先将原来包括 font-size 在内的属性放大两倍,再用 scale 缩原创 2016-12-22 14:16:50 · 8197 阅读 · 1 评论 -
react 16中的context你知道多少?
关于react中context的说明,在掘金上看到的,转过来,大家看下~写的简单明朗抛出问题在平时使用react的过程中,数据都是自顶而下的传递方式,例如,如果在顶层组件的state存储了theme主题相关的数据作为整个App的主题管理。那么在不借助任何第三方的状态管理框架的情况下,想要在子组件里获取theme数据,就必须的一层层传递下去,即使两者之间的组件根本不需要该数据;就如同下...转载 2019-03-06 16:56:07 · 1134 阅读 · 0 评论 -
react中的setState是同步还是异步还是?
setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。 合成事件:就是react 在组件中的onClick等都是属于它自定义的合成事件 原生事件:比如通过addeventListener添加的,dom中的原生事件 setState的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的...原创 2019-03-06 16:04:59 · 16076 阅读 · 0 评论 -
Redux源码分析(二)之combineReducers
Redux源码分析(combineReducers)上一篇我们看完了createStore这个自认为最为核心的文件之后,我们再来看下combineReducers.js这个文件,其他它最主要的作用就是合并多个reducer,因为在createStore中的第一个参数就是一个reducer,而平时我们开发过程中如果将全部状态都写在一个文件中有一些过于庞大且不好管理,因此我们可以先拆开去写reduc...原创 2018-11-07 15:43:38 · 356 阅读 · 0 评论 -
Redux源码分析(一)
Redux源码分析使用redux都快3年了,到现在也没认真去了解一下源码罪过啊,所以需要对它进行一些分析和学习,一方面能更好的去使用它,另一方面也学习一下该框架的设计思路,首先我们看到 redux/src/index.js 文件export { createStore, combineReducers, bindActionCreators, applyMiddleware,...原创 2018-11-06 16:46:39 · 363 阅读 · 0 评论 -
css 实现 0.5 px 的 border
在做手机页面的时候,有时候需要模仿原生的那种 1px 下划线的效果,普通的 css 1px 看起来比原生的粗,所以我们可以考虑实现 0.5px 的border 来实现这个效果,因为只有少数的设备才支持 0.5px 这个属性值,所以我们只能通过其他办法来实现,比如:<div class="btn">.5px border</div> .btn { ...原创 2016-12-21 15:20:31 · 3529 阅读 · 0 评论 -
我的React前端工程化模板&组件库
react-template-easilyDesc: react-template-easily 是一套以react技术搭建的项目模板,适用于移动端H5, webapp和hybirdApp开发。其中包含常用20+常用组件,精细计算的rem,以及诸多项目的实践。URL:https://github.com/jinjiaxing/react-template-easily原创 2017-11-10 19:39:37 · 4516 阅读 · 0 评论 -
浏览端渲染性能相关(转自google开发者中心)
现在的网络用户希望他们访问的页面具有交互性并且运行顺畅,这正是您需要投入越来越多时间和精力的地方。页面不仅要快速加载,而且要顺畅地运行;滚动应与手指的滑动一样快,并且动画和交互应如丝绸般顺滑。要编写高性能的网站和应用,您需要了解浏览器如何处理 HTML、JavaScript 和 CSS,并确保您编写的代码(和您要包括的其他第三方代码)尽可能高效地运行。60fps 与设备刷新转载 2017-12-18 14:47:53 · 290 阅读 · 0 评论 -
客户端区域坐标转换为 Canvas 坐标
通过 MouseEvent.clientX和 MouseEvent.clientY 可以获得鼠标在浏览器客户端区域的坐标。借助 Element.getBoundingClientRect()方法来实现客户端区域坐标与 canvas 坐标之间的转换。function windowToCanvas (canvas, x, y) { var bbox = canvas.get原创 2017-04-15 12:53:35 · 1802 阅读 · 0 评论 -
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我转载 2017-03-29 11:44:56 · 773 阅读 · 1 评论 -
DOCTYPE
DTD(document type definition,文档类型定义)是一系列的语法规则, 用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。事实上DTD可以定义所有SGML语族的文档类型,但由于太过繁琐, XML Schema反而更加流行。多数HTML编辑器都会为我们添加一行DOCTYPE声明,但DOC转载 2017-03-22 12:00:04 · 445 阅读 · 0 评论 -
Git命令总结
对比svn优势:①分布式管理,无网络也可以继续使用 ②强大的分支管理,对比svn的分支,速度性能易用上都显而易见1.git 安装 自己去搜索吧2.git init 初始化,会在目录下新创建一个 .git目录,mac下查看隐藏文件可以用 ls -ah3.git add ‘文件’ 或者 g原创 2017-02-08 16:02:21 · 387 阅读 · 0 评论 -
Web前端填坑记录(持续更新)
主要记录自己开发时候遇到的坑,以及一些解决办法原创 2016-12-21 14:55:11 · 953 阅读 · 0 评论 -
DOM事件简介
Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身。事件并不是只是在一处被触发和终止;他们在整个document中流动,拥有它们自己的生命周期。而这个生命周期让DOM事件有更多的用途和可扩展性。转载 2015-08-20 15:12:49 · 967 阅读 · 0 评论 -
总结一些常见web前端面试题
1.js中apply和call的作用和区别是什么?①主要作用其实就是改变了函数运行时的上下文,简单来讲就是改变所调用函数this的指向,第一个参数是什么对象,此时this就指向这个对象。当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。②二者区别仅仅是第二个参数不同,call需要按照顺序一个一个写入,而apply是数组形式,也可以通过原创 2015-08-24 10:19:22 · 1025 阅读 · 0 评论 -
JS内存泄漏排查方法(Chrome Profiles)
Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文件给出了当时JS运行所用到的所有对象,以及这些对 ...一、概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个。H转载 2015-01-27 14:36:50 · 1556 阅读 · 0 评论 -
关于Ember.js中的route的一点问题
关于ember.js本身,我就不介绍了,既然能搜索到这篇wend原创 2014-11-06 17:40:41 · 1470 阅读 · 0 评论 -
node.js、git、bootstrap等安装配置
纯记录一,安装node.js1 官方网址 http://nodejs.org/ 点击install 下载node-v0.10.22-x86.msi2 安装,修改安装目录到d盘,一路next,无他3 测试,打开node.js command prompt 输入node -v 命令行输出 v0.10.22安装完成 二,安装git1转载 2014-10-15 14:37:18 · 793 阅读 · 0 评论 -
Web SQL Database
Web SQL Database (目前只谷歌浏览器支持):我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库。对于简单的数据,使用sessionStorage和localStorage能够很好地完成存取,但是对于处理复杂的关系型数据,它就力不从心了。这也是 HTML 5 的“Web SQL Database”API 接口的应用所在。 下面我将一一将介绍怎样 创建转载 2014-10-30 14:52:00 · 905 阅读 · 0 评论 -
JavaScript跨域总结与解决办法
本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充。什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就转载 2014-10-30 11:05:36 · 482 阅读 · 0 评论 -
关于JS中的事件冒泡和事件捕获
# 关于JS中的事件冒泡和事件捕获 ### 事件冒泡 ##想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的 不是一个圆,而是一组圆。如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个页面。所以我理解的事件冒泡,就是从你所点击到的那个最小最具体的元素算起,比如说N多div层下面的一个按钮,那么最新触发的肯定是这个按钮对应的事件处理原创 2014-10-29 15:55:55 · 731 阅读 · 0 评论 -
css3 calc()功能小窥
之前,我们想要实现一个完美的宽度自适应的输入框好麻烦,曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况,我们不得不分外小心,因为各个浏览器的表现可能不一致。现在,firefox和webkit相继支持calc()功能了,我们也可以学习下了。calc()是干嘛的?calc()是单词calculate(计算)的缩写,是css3的一个新的长度单位功能,可以转载 2014-04-15 12:24:39 · 1228 阅读 · 0 评论 -
jQuery中 $.fn
jquery $.fn$.fx是什么意思$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.那么你可以这样子:$("#div").abc();通常使用extend方法扩展,详细请看API.转载 2014-03-07 16:36:57 · 713 阅读 · 0 评论 -
实战博客园访问流量计数器
每写一篇文字,你是都否期待有人来阅读,是否期待有人来支持,与你共享心得和体会呢?注册园子有几个月了,很喜欢这么一个平台,总可以找到心意相通的朋友,也发现了一些不足。包括无法看到自己博客空间的访问流量计数。这个问题得向Dudu反应一下。没办法只能自己想辙啊,感谢度娘,感谢博客园,终于找到了解决问题的方法,特整理处理,希望与大家共享。第一步:风格选择首先我们登录到站点:http://w转载 2014-03-05 14:32:37 · 749 阅读 · 0 评论 -
关于DIV内文字垂直居中的写法
最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法,因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法:display: -webkit-box;/* 水平居中*/-webkit-box-align: center;/* 垂直居中 */-webkit-box-pack: center;原创 2014-02-26 21:04:59 · 958 阅读 · 0 评论