lizzvia-CSDN博客

原创【angular5】浅谈angular5与serviceWorker——（2）

上一篇文章介绍了serviceWorker是什么以及如何在项目中使用serviceWorker，这一篇着重分析ngsw-worker.js的结构，具体的缓存策略是如何实现的。一切要从一个中介者开始。ngsw-worker定义了一个Driver，负责worker的初始化，版本更新管理，事件的监听和任务调度。源头是一个driverclass Driver{ constru...

2018-09-16 17:15:00 725

原创 web缓存机制——浏览器缓存

引言：做前端到目前为止，一个心得体会是实现功能不难，但是想要有很优质的体验，快速的响应，则需要很多的讲究。缓存系列将从前端的角度，着重记录一下浏览器缓存和应用缓存两大缓存方向。此篇记录浏览器缓存。资源缓存的原则：基本思想是简历一个资源的缓存池，当webkit需要请求资源的时候，先从资源池中查找这个资源是不是已经存在了，如果有，直接拿来用。否则再发送真正的请求到服务器，webkit在

2017-09-26 10:52:02 923

原创 javascript学习——数据表示和内存

引言：大家都知道在js语言中，只有基本数据类型boolean，Number，String，Null和Undefined，其他的都是对象。v8 和JavascriptCore数据管理的思路相似，都是通过使用句柄Handle来操作数据。句柄是大小固定的指向空间。在32位平台中是4 Byte。其中基本类型，直接把数据存放在句柄中即可，而对于引用类型，句柄中存放的是指针，具体的内容存放在堆中。句柄

2017-09-13 17:26:46 279

原创 ES6学习——class到底是个啥

引言：在重新看红宝书的时候。复习到面向对象的程序设计这一章节，重温了一下对象，原型，属性这三个核心概念和用法。顺便想到，在ES6中，可以通过class这一个关键字，用一种清爽的方式来定义一个类（实际上是一个对象，但是在语义上当做一个class）。所以实际上，class实现了构造一个对象的语法糖。ES5是怎么样的？在es5的时候，定义一个对象的方法是：function Circl

2017-09-13 11:28:41 532

原创 bugs——webpack2使用问题

学习webpack的时候，使用webpack2做项目打包。出现了很多问题。总结如下：代码结构：类似于以下的样子：//webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin'), UglifyJSPlugin = require('uglifyjs-webpack-plugin'),

2017-06-09 18:08:22 267

原创 React学习——JSX的使用

引子：最近因为工作需要学习React，发现Vue和React都是围绕着JSX做文章，因此记录本篇文章，对JSX做一个小总结(本篇是以React为视角)。简介：JSX全程是

2017-06-05 17:15:24 387

原创 ES6学习——箭头函数

定义：(params1,params2,params3..)=>{expressions} 其中()中的内容为传入箭头函数的参数，{}为函数内的内容。规范：1、参数部分： 1）如果有多个参数，不能省略(),如果参数个数不明，可以用...rest表示，但是...rest必须放在最后 2）如果只有一个参数，可以省略()

2017-05-25 15:08:27 519

原创 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 1192

原创协议学习——HTTP2帧结构总结

前言： HTTP2引入了二进制分帧层，将普通的请求/响应，拆解为帧实现请求和响应的并发。HTTP2规定了10中类型的帧。本文将对这10种类型的帧做总结。帧的结构：所有的帧都包含一个9 byte的帧头 + 可边长的正文不同。根据帧的类型不同，正文部分的结构也不一样。帧头： Length（3 bypte）：表示帧的正文部分Payload的长度。初

2017-04-17 10:32:06 3077

原创 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 1099

原创协议学习——http2 与http／1.x

前言： http产生背景： http诞生之初主要用于web端内容获取。早期的http设计思想很简单，从http/0.9-1.x均在描述一个http请求的实现过程。早期的web页面内容较少，与用户的交互并不多，所以http可以较好的完成需求。但是随着技术的发展也业务量的提升，如今的网页内容更加丰富，排版更加精致，并且充斥着大量的用户交互。http协议带来了较大的性能瓶颈。其中广受人诟病的

2017-04-12 20:23:40 637

原创 javascript事件监听机制（二）——jquery的Event对象

jQuery封装了浏览器的事件监听方法，兼容了各个浏览器的区别，对外提供一套适合于jquery对象的事件监听接口。Event对象的核心方法主要有三个，add，remove和trigger。elem对于事件的维护，是通过在elem的内部空间里（_data访问的），用一个events对象来实现的{ events：{'click':handleObj, 'focusin':handleObj

2017-04-08 12:19:14 5363

原创模块化学习——AMD

模块化的由来：随着前端业务越来越庞大，javascript代码的体量和职责也越来越大。由于javascript语言本身的特性没有继承和封装的概念，因此需要一种规范来约束js代码块的功能职责，使之完成自己的职责，同时不会对其他的部分造成污染。前端模块化的想法应运而生。模块化的定义：模块就是实现特定功能的相互独立的一组方法。模块化的意义：开发者能够随心所

2017-04-07 18:27:27 805

原创 underscore.js源码学习——_.template()

前言：随着前端业务量的增长，页面的需求量越来越大。但是很多时候，页面的结构很多时候大同小异，区别在于数据量不同。因此借用mvc的思想，渲染模版和数据分离，即为前端的模版话。因此前端的模版在于，定义模版结构，和数据源。解析模版，把数据昂儒需要的地方，生成正常的html文档，然后插入到页面之中。一句话就是：模版+数据 ——（模版引擎） = html文档。引擎原理：引擎要

2017-03-30 10:47:46 1335

原创 javascript组件——lazyload

前言：lazyload是一个懒加载的基于jquery的懒加载的库。实现原理：实现原理是在当图片不在视图区域内时，用一个class lazy标识图片，先将该图片的src置为空，把真正的url放到一个自定义属性里面。当检测到该图片需要被展示时，获取自定义属性里真正的url，修改到src里面，实现图片的懒加载。基于lazyload的实现原理，写了一个demo。以下为代码分析：缺省配置

2017-03-28 11:32:41 576

原创自动化构建工具学习——fis3

FIS3是什么？：FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。配置文件：默认fis-config.js常用命令：fis3 release -d : 构建发布版本到地址fis3 inspect: 查看文件分配的属性，即在fis.match(sel

2017-03-27 16:41:45 296

原创 javascript事件机制学习（一）——个人实现

起因：在面试的时候被问到在不提供任何DOM API，不能使用jQuery，如何实现事件的监听和触发。需求：需要在全局范围监听事件。为了方便事件类型的扩展，提供注册事件，移除事件的方法。对于某一类的时间，提供监听事件，触发事件，和移除事件三种方法。因此针对需求，设计以下的数据结构：结构：用一个Object存储全部的事件，其中包括三个（或多个）handler，为addHandler，rem

2017-03-27 14:59:18 337

原创算法学习——算术表达式

题目描述：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 305

原创 javascript学习——浏览器嗅探优化技术

思路一：延时加载在使用的时候再判断该用哪个方法，并且在判断完了之后改写函数。之后再调用的时候，可以按照检测之后得结果进行操作。var addHandler = function(target,eventType,handle){ if(target.addEventListener){ addHandler = function(target,eventType,han

2017-01-12 10:25:32 686

原创 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 382

原创 jQuery学习——clickoutside应用

自定义clickoutside事件，使得点击绑定元素之外的位置可以执行handler。这个方法可以用event.special来实现，方法如下 (function($){ var elems = $([]); $.event.special.clickoutside = { setup: function(){ var elem = $(this);

2016-11-11 19:41:58 2212

原创 jQuery源码学习——event.special用于执行异步任务的实践

该内容翻译自http://benalman.com/news/2010/03/jquery-special-events/ 在页面执行任务的一个确切的时间点上，所有绑定的click事件需要暂时的disabled掉。这种技术在执行异步任务的时候非常管用。比如说当提交表单的时候，不希望用户在任务完成之前意外的再次提交任务。有一种优雅的做法，是使用special的add方法，这个方法将在每

2016-11-11 18:57:39 396

原创 javascript学习——高阶函数的几种常见应用

1、curring：部分求值。一个curring的函数会接收一些参数，接受了参数之后的该函数并不会立即求值，而是继续返回一个函数，并把之前传入的参数保存在闭包里面。等到函数真正需要求值的时候，之前传入的所有参数会一次性的用于求值。var curring = function(fn){ var args = []; return function(){ if(argument

2016-10-30 18:58:02 830

原创 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 607

原创 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 210

原创 jquery源码——buildFragment

buildFragment是在context上，根据args创建一个div区域。核心部分是调用了clean部分。但是buildFragment添加了cache的部分。如果能cache的话，则直接返回创建好的。具体情况加下：jQuery.buildFragment = function( args, context, scripts ) { //传入的html代码段（好几段）,上下文，是否有

2016-10-24 19:23:07 262

原创 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 2923

原创 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 341

原创 jquery源码分析——clean(elems,context,fragment,scripts)

目的：获取html代码段，生成DOM元素。流程：1、修正context为正确的文本对象 2、生成一个临时的div框，作为包裹必要的父对象。 3、处理传入的元素数组，处理之。 4、将处理好的元素数组安放在div里面。并且针对各个浏览器的特性进行适当的修正 5、如果传入了一个fragment，则

2016-10-16 19:56:22 263

原创 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 308

原创 javascript组件——可拖拽模态框

可拖拽模态框，根据项目需求在模态框中生成一个map。后续将抽象出contentArea部分var Shamen = (function(global,$,echarts){ var defaults = { dragHandle:null, } var html = { ovl : '' + '' + '', title

2016-10-13 17:33:47 543

原创 javascript学习——订阅发布抽象类

var Event = (function(){ var global = this, Event, _default = 'defalut'; Event = function(){ var _listen, _trigger, _remove, _slice

2016-10-13 17:31:21 250

原创 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 1182

原创 vue.js 学习——起步

Vue.js 是一个数据驱动的js框架。最方便的一点就是，模板和数据是完全绑定的。不需要在timeout的时候调用$apply,或者监听store的事件，完全是自动更新的。

2016-09-07 10:23:41 431

原创工具学习——webpack 项目打包

webpack是一个专注于打包的工具。也就是把许多零碎的文件组合在一起，达到前端优化的效果。打包原理确定入口文件：即所有程序的入口获取依赖：核心功能，分析依赖的顺序，并将各个文件按照依赖关系依次打包下去。确定出口文件：一般打包都是输出一个文件，但也有打包成多

2016-09-06 11:25:33 1362

原创组件总结——动态生成树状目录

思路：首先ajax申请目录节点。获取全部节点之后，依次生成和标签。 node结构： node = { text: '第一级', //entry名 id: '213', //entry id isexpand: false, //是否展开 hasChildren: true, //是

2016-08-25 10:56:29 1095

转载 JavaScript学习——web通信长连接

ajax实现长连接： $(function () { (function longPolling() {

2016-07-05 15:54:16 6660

原创 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 498

原创 javascript学习——样式

本文包括样式的各种属性和创建样式，获取样式和操作样式的各种方法。 1、样式：定义样式：1、可以通过在里面引用。 2、可以通过包含外部样式表 3、可以通过特性定义针对特定元素的样式。属性：style有各种属性。

2016-06-08 10:57:05 373

原创 javascript学习——DOM扩展

主要的两个扩展对象是Selector API和HTML5，添加了一些使用的方法和属性。 Selector API：可以根据CSS选择符选择与某个模式匹配的DOM元素，核心是通过CSS选择符查询DOM文档取得元素的引用。主要方法有querySelector()和querySelectorAll()方法。 querySelector():返回与模式匹配的第一个元素。可以支持元素，类

2016-05-26 10:24:24 298

空空如也

空空如也