- 博客(82)
- 资源 (37)
- 收藏
- 关注
原创 Vite+React前端实践
Vite+React前端实践2021年2月17日,Vite2.0发布了,在前端圈引起了 不小的轰动。至于引起轰动的原因恐怕要数官网上介绍的这几点原因:去掉打包步骤,快速的冷启动。及时的模块热更新,不会随着模块变多而使得热更新变慢。真正的按需编译。Vite是基于浏览器native的ES module开发的,基于Bundleless思想。在了解Vite前,需要先了解Bundle和Bundleless。Bundle和Bundleless是两种开发方式,自 2015 年 ESM 标准发布后,这两种开发
2021-09-18 13:26:36
2020
原创 关于本地存储localForage
以前使用本地存储,首先会想到localstorage或者session storage,将要存储的数据转化成字符串后进行setItem操作,但是使用local storage 有几个问题: 1、它是同步的,不管数据多大,我们需要等待数据从磁盘读取和解析,这会减慢我们的应用程序的响应速度,如果放到移动设备上,可想而之。 2、仅支持字符串,如果是存对象还需要将对象JSON.stringify({na
2016-05-18 17:08:28
10171
1
原创 利用Express搭建空白工程
Express是基于nodejs的一个Web框架,它提供了一系列强大的特性帮助你开发一个强大而且灵活的web application.(1)官网:http://expressjs.com/中文站点: http://expressjs.jser.us/(2)建立一个web application的,Let’s go!1、下载nodejs,因为Express是建立在nodeJS的平台下的,所以首先我们要
2016-05-18 16:06:49
600
原创 前端资源汇总
淘宝阿里航旅事业部的面试题 https://github.com/jayli/jayli.github.com/issues/19 淘宝阿里航旅事业部前端必备技能列表 https://github.com/jayli/jayli.github.com/issues/16 github用户hacker2总结的前端资源列表 https://github.com/hacke2/hacke2.gi
2016-05-18 16:06:23
816
转载 [转载]解读2014之前端篇:任性的颠覆式改变
HTML5正式定稿,ECMAScript 6 规范从纸上走到现实2014年10月28日,W3C宣布HTML5正式定稿为标准,这不仅仅标志着历经8年的标准纷争告一段落,也代表着HTML5这个名词会逐步洗去铅华,其技术真正融入到Web开发的每个角落,就像当年Ajax一样,当大家不再大张旗鼓鼓吹概念和商业炒作时,正是其成熟时代到来了。HTML5规范和以前最大区别是让Web最基础架构从Web Page升级到
2016-05-18 16:05:41
1037
原创 Angularjs中的标签模式和html5模式
浏览$location的实例代码我们不难发现,每次的url中都会带一个#,这是因为angularjs默认使用的是标签模式,它和html5模式有什么区别? (1)标签模式 标签模式使用的是内部链接的技巧,URL后面紧跟一个#,angularjs本身不会重写标签,也不需要服务器端的支持,链接后的URL样子基本是这样的:http://example.com/#/some/path?foo=bar&ba
2016-05-18 16:05:11
4147
原创 搞颠provider,factory 和service
1、什么是provider provider可以为应用提供通用的服务,所有的服务工厂都是有provider提供的,可以提供字符串,对象等。我们先看下provider的源码:function provider(name, provider_) { assertNotHasOwnProperty(name, ‘service’); if (isFunction(provider_)
2016-05-18 16:04:49
750
原创 使用WebStorm调试node工程
coder比较偏好debug,调试node比较麻烦,我们借助高大上的工具webStorm(我用的是10)来调试node,配置也比较简单,直接上图: 首先,配置node环境,在导航栏选择”Edit/configuration”, wKioL1V2tlSBNlg4AAB_DyzeGkY678 接下来配置 wKiom1V2tM3xYJl8AAKv65JQYfU260 注:javascript f
2016-05-18 16:03:11
1046
转载 自己构建mean framework
由于项目的原因,项目的前端架构要从单纯的angularjs转到nodejs+angular+express的架构,这样的架构对大家来说可能比较眼熟,没错,就是大名鼎鼎的MEAN (mongodb,express,angularjs,node) framework。随着nodejs技术的日益成熟(当然io.js也逐渐崛起,并且和node重归于好),和其关联技术必将炙手可热,顺利成章地将全栈的概念更加普
2016-05-18 16:02:30
675
转载 [转载]汇总各浏览器核心(js引擎及排版引擎)深究
前言写本篇文章的初衷是追寻各浏览器对css、js实现性能而码,再说了,个人认为要做个负责前端应该要对其底层有所了解,这样在有的时候对bug能迅捷的对症下药。小熊花了近6个小时搜索相关资料加上本身开发的一些经验总结出本篇。起初开始的小熊只知道IE核心、FF核心、OP核心等(前些年的主流浏览器),而如今风行的Safari(本文简称SF)和Chrome(本文简称GG),都是Webkit的开源核心,虽然代表
2016-05-18 16:01:56
1013
原创 2015年要看完的书
这个不是2015年的全部书单,因为随时还会有新书补充进来,无论是纸质的还是电子版1、webkit技术内幕(部分章节精读)2、HTTP权威指南(参考,已经泛读)3、HTML5数据推送应用开发(精读)4、黑客与画家(已读)5、Web应用安全权威指南 , 白帽子讲Web安全 (精读)6、MEAN web development(已经完成)7、Github入门与实践8、Clean code(精读)9、Ra
2016-05-18 16:01:19
479
原创 测试angular中的service
在angularjs中,service是单例的,通常用来与后台交互数据,需要数据的组件只需要注入某个service即可,service的典型例子:app.factory(‘EventService’, [‘http′,′http', 'q’, function(http,http, q) { return { getEvents: function() {
2016-05-18 16:00:47
1219
原创 测试angular中的controller
angularjs中的controller主要负责业务逻辑的处理、数据模型,页面元素的展示等,通常一个controller会依赖一个或者多个service,通过service从数据库拉数据后保存到controller,controller的简陋的例子如下:app.controller(‘EventController’,[‘scope′,′EventService′,function(scope',
2016-05-18 16:00:24
472
原创 Moco in action
Moco 是一个轻量级的打桩框架,这个是构建在http协议上的,并且支持 Web service , REST等。对于前端来说,是实现前后端分离的关键,我们可以通过Moco配置返回数据模拟服务器返回的真实数据。我接下来将写两篇文章介绍怎么测试angular的controller和service,将用到Moco,这篇文章就作为铺垫吧。Moco快速入门:首先,从 repo1.maven.org/mave
2016-05-18 15:59:05
1021
原创 Gulp in action
gulp 和grunt一样,都是任务自动管理工具,和grunt相比,gulp更加好用,配置也更加灵活。1、安装gulp也是基于nodejs的,同样可以通过npm安装,全局安装npm install -g gulp 在项目中安装npm install gulp –save-dev 2、两个例子创建名为gulpfile.js,在这个文件中通过gulp命令定义gulp 任务,在gulpfile.js添
2016-05-18 15:57:41
558
转载 Grunt in action
Grunt 是一个自动任务运行器,会安装预先定义的顺序自动运行一系列的的任务,可以简化工作流程,减少重复性的工作从而提高工作交流,这篇简易教程会从0着手详细介绍grunt。1、安装grunt是基于nodejs的,如果你还没有安装,请从http://nodejs.org/下载安装windows版或者Linux版,安装nodejs后,运行如下命令:sudo npm install -g grunt-cl
2016-05-18 15:57:18
421
转载 使用Grunt启动和运行
原文地址:http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/这篇文章中,我们将介绍如何在项目使用Grunt让你的网站更快。我们简要分析下grunt能够做什么,如何创建和使用各种插件完成各种繁重的任务。我们将看看如何构建一个简单的表单验证器,使用Sass预处理器,如何使用grunt-cssc和CssMin结合压缩我们的CSS
2016-05-18 15:56:53
2243
1
转载 angularjs中的interceptor和挺好的例子
原文地址:http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/AngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下,我们希望可以捕获所有的请求,并且在将其发送到服务端之前进行操作。还有一些情况是,我们希望捕获响应,并且在完成调用之前处理。一个很常用的场景就是
2016-05-18 15:56:19
529
转载 angularjs培训之service
原文地址:http://angular-tips.com/blog/2013/08/understanding-service-types/Angular中有几种不同类型的services。每一种都有自己的独特用法。需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service,这是个很被期望的行为。注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象。无论我们在什
2016-05-18 15:55:54
276
转载 $watch How the $apply Runs a $digest
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人。如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码。Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇:watch
2016-05-18 15:55:10
831
原创 angularjs中的$watch
在使用AngulaJS编写应用时,我们经常需要做的一件事情就是对模型中的变量进行监视,并对其发生的变化做出相应的回应。AngularJS为我们提供了一个非常方便的$watch方法,它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子:<html ng-app=’myApp’> <head> <meta charset=”UTF-8”>
2016-05-18 15:54:04
720
转载 javascript Promises
原文地址:http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-api女士们先生们,请准备好迎接 Web 开发历史上一个重大时刻……[鼓声响起]JavaScript 有了原生的 Promise![漫天的烟花绽放,人群沸腾了]这时候你大概是这三种人之一:你的身边拥挤着欢呼的人群,但是你却不在其中,甚至你还不大清楚“Promise”是什么。你耸
2016-05-18 15:53:36
569
转载 拥抱javascript的Promise
原文地址:http://javascriptplayground.com/blog/2015/02/promises/?utm_source=javascriptweekly&utm_medium=email这篇文章我们一起来看下在异步编程事怎么拥抱promise,编写良好的代码。这篇不是全面深入地剖析Promise,如果想更全面的了解,Jake Archibald’s post on HTML5
2016-05-18 15:52:45
512
原创 Karma测试环境搭建
Karma是一个JavaScript的测试运行器。Karma更是一个测试环境,使用Karma可以很方便的的运行测试,今天我们简单地介绍一karma测试环境的搭建和基本的测试,我已经写好了一套测试用例,有谁需要可以私信我。官网如下:http://karma-runner.github.io/0.12/index.html我们总是实现完feature后再编写测试用例,但是根据TDD的原则,开发的流程一般
2016-05-18 15:52:11
1637
原创 XMLHttpRequest level2介绍
1、xmlHttpRequest level1:xmlHttpRequest是一个浏览器脚本语言,用来给server发送http或者https请求来加载,出于安全考虑,这个只能用于同域访问(还有其他的缺点,比如说不能读取或者上传二进制文件,传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access,后来使用这样的概念形成了msxml库,这就
2016-05-18 15:51:48
668
原创 ECMAScript5新特性之对象篇
1、Ojbect.create(O[,properties]):var Person = { name : ‘hcc’, hungry : false, play : function (){ this.hungry = true; return ‘I am playing!’;
2016-05-18 15:51:20
421
原创 ECMAScript5特性介绍之数组篇
Es5的特性以及发布很长时间了,增加了很多实用的特性(Array的 indexOf、every,some,forEach等,Object的create,keys,isFrozen等),这些特性已经得到个浏览器的支持,比如:IE9+,FF21+,chrome23+,opera 15+,SF6+都已经基本支持全部特性。详细的特性检测见:http://kangax.github.io/compat-tab
2016-05-18 15:50:31
497
原创 AMD和CMD的区别,转载玉伯在知乎上的回答。
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://github.com/seajs/seajs/issues/242AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 类似的还有 CommonJS Modules/2.0
2016-05-18 15:49:59
568
原创 异步加载之seajs,同样值得拥有
1、 seajs概述:seajs是淘宝前端团队实现的基于commonjs规范的异步加载器,作者就是大名鼎鼎的玉伯。目标也是和requirejs一样,都是为了模块化和异步加载。2 、 资源github: https://github.com/seajs/seajs/doc: http://seajs.org/docs/#docs玉伯的github:https://github.com/lifesin
2016-05-18 15:49:17
588
原创 开发流程告诉你,为什么是软件工程师而不是码农
我们以一个APP成功上线,作为思考的起点,往前推,看看我们需要做些什么?1一个99美元的开发者帐号 嗯,如果不需要真机跑程序,这个可以是最后一步。当然早早买个开发帐号,好处会非常大,看到自己的程序在真机上跑,整个人都兴奋起来,就不用老喝鸡汤。2一个App包 当然,这才是真正难点。所以这里会有大量的细分步骤。1)异常控制 在所有数据都没有问题之后,我们需要反复用各种奇葩操作来把应用搞崩溃,或者把数据搞
2016-05-18 15:42:26
2125
原创 一般人都能看懂的git教程
git是一个分布式的版本控制工具,很轻松的就能管理Github的资源,如果你还在为找不到好的入门资源而苦恼的话,请戳下面的链接:http://backlogtool.com/git-guide/cn/本人也是个git小白,这个学习会往后放一下,以后好好学下。当然我的微博中也有很好的git资源,欢迎查询。微博地址:weibo.com/houyaowei
2016-05-18 15:41:56
416
原创 html5本地存储之indexedDb
对于以下需求:离线存储读取数据 允许用户对数据进行增删改操作 数据存储在本地,不依赖后端 数据支持索引查询 我们可以考虑使用html5新特性的本地存储,主要有以下几种:Web Sql(IE,FF都不支持,http://www.w3.org/TR/webdatabase/) IndexedDB Local Storage(轻松存储简单的数据结构,如果存储复杂的较麻烦) Session S
2016-05-18 15:41:27
804
原创 ECMAScript6学习之三
1、展开运算符(spread (…) operator)以前我们把某一个方法作为某一个对象的方法调用时,方法如下: function ecma(x, y, z) { alert('x:' + x + ", y=" + y + ', z=' + z); }var args = [0, 1, 2];ecma.apply(null, args);有了ECMAScript6就
2016-05-18 15:40:09
571
原创 EcmaScript6学习之二
1、Iterator浏览器支持情况:FF31+js中提供来很多方法遍历集合中的元素,比如说for, forEach, for …of ,map。在ES6中,iterator是一个对象,提供next()方法依次访问下一个元素。也就是说要使用next()方法,就需要先创建一个iterator对象,先看个例子:var lang = { name: ‘JavaScript’, birthYear: 1995
2016-05-18 15:39:28
480
原创 EcmaScript6学习之入门
1、const and for..of loops一个常量不可以被重新赋值,并且不能被重复声明浏览器支持情况:IE11,FF31+,chrome35+,opera2+,safari6+,node0.10+,const a = ‘const_a’; console.log(‘This is a const : ’ + a);//browser supply : FF31+ ,chrome37+,s
2016-05-18 15:36:45
486
原创 发现了个很好的前端代码规范和最佳实践,mark一下
前端规范而又完整的编码规范并不多见,如果你想找一个完整的,推荐你看下下面的链接内容,千万不能错过。http://coderlmn.github.io/code-standards/另:jquery编码风格js篇如下:http://contribute.jquery.org/style-guide/js/jquery编码风格html篇如下:http://contribute.jquery.org/st
2016-05-18 15:36:10
508
原创 EcmaScript5和EcmaScript6规范一览表
EcmaScript5.1规范于2011年6月发布,现在主流的浏览器基本上都已经支持,这些浏览起包括IE9、IE10,ff21及其以上,safari6及其以上,opera12及其以上都已经基本支持。具体的测试情况可以在线测试,用来确定你使用的浏览器是否支持。测试网站:http://kangax.github.io/compat-table/es5/详细的5.1规范描述可以下载到pdf文件和html文
2016-05-18 15:35:37
4602
原创 angularjs培训之directive(1)
原文链接:http://www.sitepoint.com/practical-guide-angularjs-directives/在angular程序中directive是很重要的组件。尽管Angularjs内置了很多的指令,但是你也经常需要创建特定功能的指令。这篇文章给大家一个指令的基本概述并且详解怎么使用。overviewdirective引进了新的语法声明。directive是通过绑定在D
2016-05-18 15:35:09
282
java编程思想第四版
2010-10-21
c编程要点
2007-05-09
c高级编程
2007-05-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人