- 博客(56)
- 收藏
- 关注
原创 【angular5】浅谈angular5与serviceWorker——(2)
上一篇文章介绍了serviceWorker是什么以及如何在项目中使用serviceWorker,这一篇着重分析ngsw-worker.js的结构,具体的缓存策略是如何实现的。 一切要从一个中介者开始。ngsw-worker定义了一个Driver,负责worker的初始化,版本更新管理,事件的监听和任务调度。 源头是一个driverclass Driver{ constru...
2018-09-16 17:15:00 755
原创 web缓存机制——浏览器缓存
引言: 做前端到目前为止,一个心得体会是实现功能不难,但是想要有很优质的体验,快速的响应,则需要很多的讲究。缓存系列将从前端的角度,着重记录一下浏览器缓存和应用缓存两大缓存方向。此篇记录浏览器缓存。资源缓存的原则:基本思想是简历一个资源的缓存池,当webkit需要请求资源的时候,先从资源池中查找这个资源是不是已经存在了,如果有,直接拿来用。否则再发送真正的请求到服务器,webkit在
2017-09-26 10:52:02 935
原创 javascript学习——数据表示和内存
引言:大家都知道在js语言中,只有基本数据类型boolean,Number,String,Null和Undefined,其他的都是对象。v8 和JavascriptCore数据管理的思路相似,都是通过使用句柄Handle来操作数据。句柄是大小固定的指向空间。在32位平台中是4 Byte。其中基本类型,直接把数据存放在句柄中即可,而对于引用类型,句柄中存放的是指针,具体的内容存放在堆中。句柄
2017-09-13 17:26:46 295
原创 ES6学习——class到底是个啥
引言:在重新看红宝书的时候。复习到面向对象的程序设计这一章节,重温了一下对象,原型,属性这三个核心概念和用法。顺便想到,在ES6中,可以通过class这一个关键字,用一种清爽的方式来定义一个类(实际上是一个对象,但是在语义上当做一个class)。所以实际上,class实现了构造一个对象的语法糖。ES5是怎么样的?在es5的时候,定义一个对象的方法是:function Circl
2017-09-13 11:28:41 551
原创 bugs——webpack2使用问题
学习webpack的时候,使用webpack2做项目打包。出现了很多问题。总结如下:代码结构:类似于以下的样子://webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin'), UglifyJSPlugin = require('uglifyjs-webpack-plugin'),
2017-06-09 18:08:22 276
原创 React学习——JSX的使用
引子:最近因为工作需要学习React,发现Vue和React都是围绕着JSX做文章,因此记录本篇文章,对JSX做一个小总结(本篇是以React为视角)。 简介:JSX全程是
2017-06-05 17:15:24 407
原创 ES6学习——箭头函数
定义:(params1,params2,params3..)=>{expressions} 其中()中的内容为传入箭头函数的参数,{}为函数内的内容。规范:1、参数部分: 1)如果有多个参数,不能省略(),如果参数个数不明,可以用...rest表示,但是...rest必须放在最后 2)如果只有一个参数,可以省略()
2017-05-25 15:08:27 536
原创 bugs——node version already installed
问题描述: 运行 brew update node。出现问题,node v7.9.0 already installed。但是查看node -v,还是v 4.4.2。解决: brew install node ERROR: node-7.9.0 already installed, it's just not linked brew link --overwrite n
2017-04-23 10:48:54 1209
原创 协议学习——HTTP2帧结构总结
前言: HTTP2引入了二进制分帧层,将普通的请求/响应,拆解为帧实现请求和响应的并发。HTTP2规定了10中类型的帧。本文将对这10种类型的帧做总结。帧的结构: 所有的帧都包含一个9 byte的帧头 + 可边长的正文不同。根据帧的类型不同,正文部分的结构也不一样。 帧头: Length(3 bypte):表示帧的正文部分Payload的长度。初
2017-04-17 10:32:06 3274
原创 bugs—npm install -g grunt-cli fail
问题描述: $node -v $2.14.1 $npm -v $-bash npm not found node-module中找不到npm包。试过用sudo,在execPath 中添加/opt/local/bin,/opt/local/sbin 不行。 该用brew 安装node 在安装brew的时候,运行 ruby -e "$(curl -fsSL
2017-04-14 13:52:32 1124
原创 协议学习——http2 与http/1.x
前言: http产生背景: http诞生之初主要用于web端内容获取。早期的http设计思想很简单,从http/0.9-1.x均在描述一个http请求的实现过程。早期的web页面内容较少,与用户的交互并不多,所以http可以较好的完成需求。但是随着技术的发展也业务量的提升,如今的网页内容更加丰富,排版更加精致,并且充斥着大量的用户交互。http协议带来了较大的性能瓶颈。其中广受人诟病的
2017-04-12 20:23:40 688
原创 javascript事件监听机制(二)——jquery的Event对象
jQuery封装了浏览器的事件监听方法,兼容了各个浏览器的区别,对外提供一套适合于jquery对象的事件监听接口。Event对象的核心方法主要有三个,add,remove和trigger。elem对于事件的维护,是通过在elem的内部空间里(_data访问的),用一个events对象来实现的{ events:{'click':handleObj, 'focusin':handleObj
2017-04-08 12:19:14 5406
原创 模块化学习——AMD
模块化的由来: 随着前端业务越来越庞大,javascript代码的体量和职责也越来越大。由于javascript语言本身的特性没有继承和封装的概念,因此需要一种规范来约束js代码块的功能职责,使之完成自己的职责,同时不会对其他的部分造成污染。前端模块化的想法应运而生。模块化的定义: 模块就是实现特定功能的相互独立的一组方法。模块化的意义: 开发者能够随心所
2017-04-07 18:27:27 830
原创 underscore.js源码学习——_.template()
前言:随着前端业务量的增长,页面的需求量越来越大。但是很多时候,页面的结构很多时候大同小异,区别在于数据量不同。因此借用mvc的思想,渲染模版和数据分离,即为前端的模版话。因此前端的模版在于,定义模版结构,和数据源。解析模版,把数据昂儒需要的地方,生成正常的html文档,然后插入到页面之中。一句话就是:模版+数据 ——(模版引擎) = html文档。引擎原理: 引擎要
2017-03-30 10:47:46 1355
原创 javascript组件——lazyload
前言:lazyload是一个懒加载的基于jquery的懒加载的库。实现原理:实现原理是在当图片不在视图区域内时,用一个class lazy标识图片,先将该图片的src置为空,把真正的url放到一个自定义属性里面。当检测到该图片需要被展示时,获取自定义属性里真正的url,修改到src里面,实现图片的懒加载。基于lazyload的实现原理,写了一个demo。以下为代码分析:缺省配置
2017-03-28 11:32:41 601
原创 自动化构建工具学习——fis3
FIS3是什么?:FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。配置文件:默认fis-config.js常用命令:fis3 release -d : 构建发布版本到 地址fis3 inspect: 查看文件分配的属性,即在fis.match(sel
2017-03-27 16:41:45 315
原创 javascript事件机制学习(一)——个人实现
起因:在面试的时候被问到在不提供任何DOM API,不能使用jQuery,如何实现事件的监听和触发。 需求:需要在全局范围监听事件。为了方便事件类型的扩展,提供注册事件,移除事件的方法。对于某一类的时间,提供监听事件,触发事件,和移除事件三种方法。因此针对需求,设计以下的数据结构: 结构:用一个Object存储全部的事件,其中包括三个(或多个)handler,为addHandler,rem
2017-03-27 14:59:18 357
原创 算法学习——算术表达式
题目描述:Implement a basic calculator to evaluate a simple expression string.The expression string may contain open ( and closing parentheses ), the plus + or minus sign -, non-negative integers
2017-03-07 10:18:00 339
原创 javascript学习——浏览器嗅探优化技术
思路一:延时加载在使用的时候再判断该用哪个方法,并且在判断完了之后改写函数。之后再调用的时候,可以按照检测之后得结果进行操作。var addHandler = function(target,eventType,handle){ if(target.addEventListener){ addHandler = function(target,eventType,han
2017-01-12 10:25:32 796
原创 javascript学习——constructor、prototype、_proto_的区别
constructor:始终指向当前对象的构造函数var arr = [1,2,3];alert(arr.constructor); // function Array()function A(){};var a = new A();alert(a.constructor); // function A()prototype: 是函数对象具有的属性,叫做原型对象。一旦原型对象赋予了
2016-12-15 16:38:56 396
原创 jQuery学习——clickoutside应用
自定义clickoutside事件,使得点击绑定元素之外的位置可以执行handler。这个方法可以用event.special来实现,方法如下 (function($){ var elems = $([]); $.event.special.clickoutside = { setup: function(){ var elem = $(this);
2016-11-11 19:41:58 2233
原创 jQuery源码学习——event.special用于执行异步任务的实践
该内容翻译自http://benalman.com/news/2010/03/jquery-special-events/ 在页面执行任务的一个确切的时间点上,所有绑定的click事件需要暂时的disabled掉。这种技术在执行异步任务的时候非常管用。比如说当提交表单的时候,不希望用户在任务完成之前意外的再次提交任务。 有一种优雅的做法,是使用special的add方法,这个方法将在每
2016-11-11 18:57:39 408
原创 javascript学习——高阶函数的几种常见应用
1、curring:部分求值。一个curring的函数会接收一些参数,接受了参数之后的该函数并不会立即求值,而是继续返回一个函数,并把之前传入的参数保存在闭包里面。等到函数真正需要求值的时候,之前传入的所有参数会一次性的用于求值。var curring = function(fn){ var args = []; return function(){ if(argument
2016-10-30 18:58:02 844
原创 javascript组件——按thead排序的table
/** * options need table title,thead,rowData,$root * generated by dx */var TableGenerator = (function(global,$){ var testIntNum = / ^[0-9]*$/g, testFloatNum = /^[1-9]\d*.\d*|0.\d*[1-
2016-10-28 16:38:45 623
原创 jQuery源码——extend()函数
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, //传来的第一个参数是要合并的对象 i = 1, length = arguments.length, //要合并的对象个数 d
2016-10-25 16:17:32 223
原创 jquery源码——buildFragment
buildFragment是在context上,根据args创建一个div区域。核心部分是调用了clean部分。但是buildFragment添加了cache的部分。如果能cache的话,则直接返回创建好的。具体情况加下:jQuery.buildFragment = function( args, context, scripts ) { //传入的html代码段(好几段),上下文,是否有
2016-10-24 19:23:07 280
原创 jQuery源码——find函数
jQuery的全局方法find()作用是对调用的jquery对象中,查找是否有满足selector的节点.代码如下find: function( selector ) { //在已生成的DOM中按照selector查找对应元素 var i, l, length, n, r, ret, self = this; if ( typeof selector !== "string"
2016-10-24 18:57:39 2968
原创 jquery源码——jquery.fn.access()函数
这个函数是一个抽象的方法,很多对外暴露的方法,最终都调用这个方法。access: function( elems, fn, key, value, chainable, emptyGet, pass ) { var exec, bulk = key == null, //是不是传了key进来 i = 0, length = elems.length; // Sets
2016-10-21 19:40:18 355
原创 jquery源码分析——clean(elems,context,fragment,scripts)
目的:获取html代码段,生成DOM元素。流程:1、修正context为正确的文本对象 2、生成一个临时的div框,作为包裹必要的父对象。 3、处理传入的元素数组,处理之。 4、将处理好的元素数组安放在div里面。并且针对各个浏览器的特性进行适当的修正 5、如果传入了一个fragment,则
2016-10-16 19:56:22 273
原创 javascript学习——js版快排
QuickSort:function(array){ if(array.length <=1) return array; var pivotIndex = Math.floor(array.length / 2); var pivot = array.splice(pivotIndex,1)[0]; var left = [],right = [];
2016-10-14 10:06:21 322
原创 javascript组件——可拖拽模态框
可拖拽模态框,根据项目需求在模态框中生成一个map。后续将抽象出contentArea部分var Shamen = (function(global,$,echarts){ var defaults = { dragHandle:null, } var html = { ovl : '' + '' + '', title
2016-10-13 17:33:47 557
原创 javascript学习——订阅发布抽象类
var Event = (function(){ var global = this, Event, _default = 'defalut'; Event = function(){ var _listen, _trigger, _remove, _slice
2016-10-13 17:31:21 259
原创 vue.js学习——实例分析
一个vue实例相当于MVVC里面的viewModel。构造器 var vm = new Vue({}); 可以扩展vue构造器,从而用预定义选项创建可复用的组件构造器。vue里面所有的组建都是扩展着vue的实例。var component = Vue.extend({});var myComponentIns = new component();
2016-09-07 17:24:05 1199
原创 vue.js 学习——起步
Vue.js 是一个数据驱动的js框架。最方便的一点就是,模板和数据是完全绑定的。不需要在timeout的时候调用$apply,或者监听store的事件,完全是自动更新的。
2016-09-07 10:23:41 439
原创 工具学习——webpack 项目打包
webpack是一个专注于打包的工具。也就是把许多零碎的文件组合在一起,达到前端优化的效果。 打包原理 确定入口文件:即所有程序的入口 获取依赖:核心功能,分析依赖的顺序,并将各个文件按照依赖关系依次打包下去。 确定出口文件:一般打包都是输出一个文件,但也有打包成多
2016-09-06 11:25:33 1376
原创 组件总结——动态生成树状目录
思路:首先ajax申请目录节点。获取全部节点之后,依次生成 和标签。 node结构: node = { text: '第一级', //entry名 id: '213', //entry id isexpand: false, //是否展开 hasChildren: true, //是
2016-08-25 10:56:29 1115
转载 JavaScript学习——web通信长连接
ajax实现长连接: $(function () { (function longPolling() {
2016-07-05 15:54:16 6690
原创 javascript问题——ajax动态生成table
问题描述: 需要通过ajax请求json文件,并将json中的Rows域动态生成一个table使用插件:jquery的DataTables。外部文件引用:http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css http://cdn.datatables.net/
2016-06-20 09:00:45 505
原创 javascript学习——样式
本文包括样式的各种属性和创建样式,获取样式和操作样式的各种方法。 1、样式: 定义样式:1、可以通过在里面引用。 2、可以通过包含外部样式表 3、可以通过特性定义针对特定元素的样式。 属性:style有各种属性。
2016-06-08 10:57:05 399
原创 javascript学习——DOM扩展
主要的两个扩展对象是Selector API和HTML5,添加了一些使用的方法和属性。 Selector API:可以根据CSS选择符选择与某个模式匹配的DOM元素,核心是通过CSS选择符查询DOM文档取得元素的引用。主要方法有querySelector()和querySelectorAll()方法。 querySelector():返回与模式匹配的第一个元素。可以支持元素,类
2016-05-26 10:24:24 309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人