lovollll - 博客园

2018年12月15日

摘要：背景：目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信，这种情况下iframe并不是最好的选择，iframe存在跨域的问题，当然是postMessage还是可以通信的，但也并非是最好的。目前有这么一个阅读全文

posted @ 2018-12-15 19:37 lovollll 阅读(4523) 评论(0) 推荐(0) 编辑

vue中的适配：px2rem

摘要：这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib flexible 在main.js中：import 'lib flexible/flexible'2.引入px2rem loader 3.将px2rem loader添加到cssLoaders 阅读全文

posted @ 2018-12-15 19:35 lovollll 阅读(191) 评论(0) 推荐(0) 编辑

2018年12月14日

Vue.js的复用组件开发流程

摘要：本文由蔡述雄发表接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。下面先看看我们的需求列表组件quiList.vue 本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时可以根据不同的参数来决定当前列阅读全文

posted @ 2018-12-14 21:41 lovollll 阅读(134) 评论(0) 推荐(0) 编辑

Vue调试神器之Vue.js devTools

摘要： Vue项目中使用Vue.js devTools这款调试神器，可以极大程度的提高我们的开发效率。安装 1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店 2、从github上下载到本地。贵宾传送阵，请戳这里→vue de 阅读全文

posted @ 2018-12-14 21:39 lovollll 阅读(360) 评论(0) 推荐(0) 编辑

浅析Vue响应式原理（三）

摘要： Vue响应式原理之defineReactive defineReactive 不论如何，最终响应式数据都要通过defineReactive来实现，实际要借助ES5新增的Object.defineProperty。 defineReactive接受五个参数。obj是要添加响应式数据的对象；key是属性阅读全文

posted @ 2018-12-14 21:37 lovollll 阅读(152) 评论(0) 推荐(0) 编辑

逐行粒度的vuex源码分析

摘要： vuex源码分析了解vuex 什么是vuex vuex是一个为vue进行统一状态管理的状态管理器，主要分为state, getters, mutations, actions几个部分，vue组件基于state进行渲染，当state发生变化时触发组件的重新渲染，并利用了vue的响应式原理，衍生出ge 阅读全文

posted @ 2018-12-14 21:35 lovollll 阅读(164) 评论(0) 推荐(0) 编辑

vue源码解读-目录结构

摘要：目录结构 ├── scripts 构建相关的文件，一般情况下我们不需要动│ ├── git hooks git钩子│ ├── alias.js 别名配置│ ├── config.js rollup配置的文件│ ├── build.js 构建 config.js 中所有的rollup配置│ ├── c 阅读全文

posted @ 2018-12-14 21:29 lovollll 阅读(146) 评论(0) 推荐(0) 编辑

Vue源码探究-虚拟DOM的渲染

摘要： Vue源码探究虚拟DOM的渲染在虚拟节点的实现一篇中，除了知道了 VNode 类的实现之外，还简要地整理了一下DOM渲染的路径。在这一篇中，主要来分析一下两条路径的具体实现代码。按照创建 Vue 实例后的一般执行流程，首先来看看实例初始化时对渲染模块的初始处理。这也是开始 mount 路径的前阅读全文

posted @ 2018-12-14 21:28 lovollll 阅读(539) 评论(0) 推荐(0) 编辑

利用hash或history实现单页面路由

摘要： [toc] 在chrome(版本 70.0.3538.110)测试正常编写涉及：css, html,js, node(koa) 在线演示codepen html代码 css代码 JavaScript代码 hash方式 class HashRoute { setRoute() { const comm 阅读全文

posted @ 2018-12-14 21:26 lovollll 阅读(444) 评论(0) 推荐(0) 编辑

passive的作用和原理

摘要： passived到底有什么用？ passived主要用于优化浏览器页面滚动的性能，让页面滚动更顺滑~~ passived产生的历史时间线 addEventListener()：大家都是认识的，为dom添加触发事件，故事就从这里开始。在早期addEventListener是这样的： useCaptu 阅读全文

posted @ 2018-12-14 21:24 lovollll 阅读(893) 评论(0) 推荐(0) 编辑

vue中is的作用和用法

摘要：回顾vue官方文档的过程中发现了is这个特性，虽然以我的写代码风格实在用不上，不过还是记录一下这个知识点 is的作用总所周知，ul里面嵌套li的写法是html语法的固定写法（还有如table,select等）。 my component是我们自己写的组件，但是html在渲染dom的时候，my co 阅读全文

posted @ 2018-12-14 21:21 lovollll 阅读(443) 评论(0) 推荐(0) 编辑

2018年12月13日

vue2.0 兼容ie9及其以上

摘要： vue官方的意思是vue项目可以在ie8以上的ie版本中运行但其实使用vue cli构建的项目也还是不能在ie8【ie9,ie10,ie11】以上的版本中运行下面就来讲vue如何在ie8以上ie版本中运行 1.安装 babel polyfill 2.在项目入口文件，如本项目中的main.js文件阅读全文

posted @ 2018-12-13 12:18 lovollll 阅读(449) 评论(0) 推荐(0) 编辑

PHP协程：并发 shell_exec

摘要：在PHP程序中经常需要用shell_exec执行一些命令，而普通的shell_exec是阻塞的，如果命令执行时间过长，那可能会导致进程完全卡住。在Swoole4协程环境下可以用Co::exec并发地执行很多命令。本文基于Swoole 4.2.9和PHP 7.2.9版本协程示例返回值 Co::e 阅读全文

posted @ 2018-12-13 12:15 lovollll 阅读(715) 评论(0) 推荐(0) 编辑

React 按需加载 - 代码分隔

摘要：代码分隔我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起，并且由一个类似index.js的入口文件串联起来的单页面web页面。例如： App: 打完包后：从这个例子可以看出，打完包后将所有的js都压缩到一个文件里了。随着项目越来越大，打包阅读全文

posted @ 2018-12-13 12:12 lovollll 阅读(103) 评论(0) 推荐(0) 编辑

使用Redis管道提升性能

摘要：首发于樊浩柏科学院 Redis 的管道（pipelining）是用来打包多条无关命令批量执行，以减少多个命令分别执行带来的网络交互时间。在一些批量操作数据的场景，使用管道可以显著提升 Redis 的读写性能。原理演示 Redis 的管道实质就是命令打包批量执行，多次网络交互减少到单次。使用管阅读全文

posted @ 2018-12-13 12:10 lovollll 阅读(534) 评论(0) 推荐(0) 编辑

如何让 node 运行 es6 模块文件，及其原理

摘要：如何让 node 运行 es6 模块文件，及其原理最新版的 node 支持最新版 ECMAScript 几乎所有特性，但有一个特性却一直到现在都还没有支持，那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的，包括 node 项目，所以，node 阅读全文

posted @ 2018-12-13 12:08 lovollll 阅读(217) 评论(0) 推荐(0) 编辑

我从HTML的meta中学到了什么

摘要： meta meta中有这样几个常用属性：http equiv，name，content，包括html5新增的charset。注意：content属性用来存储meta信息的内容，所有的主流浏览器都支持它，但它一般很少单独使用，我们一般使用http equiv或name来定义content属性信息（或阅读全文

posted @ 2018-12-13 12:07 lovollll 阅读(84) 评论(0) 推荐(0) 编辑

浅探webpack优化

摘要：由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架中最关键的一环webpack相关的优化知之甚少，脚手架基本上已经为我们做好了相关的开发准备，但是当我们想要做一些定制化的优化操作时阅读全文

posted @ 2018-12-13 11:56 lovollll 阅读(136) 评论(0) 推荐(0) 编辑

7 种 Javascript 常用设计模式学习笔记

摘要： 7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制，并不是 23 种设计模式都常用。有的是没有使用场景，有的模式使用场景非常少，所以只是列举 7 个常见的模式本文的脉络：设计与模式 5 大设计原则 7 种常见的设计模式一句话解释含义列举生活中的场景、业务阅读全文

posted @ 2018-12-13 11:49 lovollll 阅读(242) 评论(0) 推荐(0) 编辑

2018年12月12日

前端与编译原理——用JS写一个JS解释器

摘要：说起编译原理，印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者，编译原理似乎离我们很远，对它的理解很可能仅仅局限于“抽象语法树（AST）”。但这仅仅是个开头而已。编译原理的使用，甚至能让我们利用JS直接写一个能运行JS代码的解释器。项目地址：https://github.com/j 阅读全文

posted @ 2018-12-12 20:04 lovollll 阅读(195) 评论(0) 推荐(0) 编辑

通用、封装、简化 webpack 配置

摘要：通用、封装、简化 webpack 配置现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候，总是免不了要配置 webpack，很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库，比如 roadhog。ro 阅读全文

posted @ 2018-12-12 19:58 lovollll 阅读(153) 评论(0) 推荐(0) 编辑

微服务架构：如何用十步解耦你的系统？

摘要：导言：耦合性，是对模块间关联程度的度量。耦合的强弱取决于模块间接口的复杂性、调用模块的方式以及通过界面传送数据的多少。模块间的耦合度是指模块之间的依赖关系，包括控制关系、调用关系、数据传递关系。模块间联系越多，其耦合性越强，同时表明其独立性越差。软件设计中通常用耦合度和内聚度作为衡量模块独立程度的阅读全文

posted @ 2018-12-12 19:56 lovollll 阅读(183) 评论(0) 推荐(0) 编辑

PHP 协程：Go + Chan + Defer

摘要： Swoole4为PHP语言提供了强大的CSP协程编程模式。底层提供了3个关键词，可以方便地实现各类功能。 Swoole4提供的PHP协程语法借鉴自Golang，在此向GO开发组致敬 PHP+Swoole协程可以与Golang很好地互补。Golang：静态语言，严谨强大性能好，PHP+Swoole：动阅读全文

posted @ 2018-12-12 19:46 lovollll 阅读(465) 评论(0) 推荐(0) 编辑

求非负元素数组所有元素能组合的最大字符串

摘要：首发于樊浩柏科学院问题叙述：将一个非负元素数组中的所有元素排列组合在一起，找出值最大的那个排列情况。例如 [0, 9, 523, 94, 10, 4]，排列组合后值最大数为：9945234100。本文废话较多，可以直接跳转到编码实现部分。背景描述这是我遇到的一道笔试题。首次遇见我也是很阅读全文

posted @ 2018-12-12 19:40 lovollll 阅读(206) 评论(0) 推荐(0) 编辑

DOM事件机制

摘要：前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，请多多支持与关注！一、DOM事件级别 DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分阅读全文

posted @ 2018-12-12 19:36 lovollll 阅读(120) 评论(0) 推荐(0) 编辑

详谈js防抖和节流

摘要：本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：效果：在输入框里输入一个，就会触发一次“ajax请求”（此处是console）。没有防抖和节流缺点：浪费请求资源，可以加入防抖和节流来优化一下。本文会分别介阅读全文

posted @ 2018-12-12 19:32 lovollll 阅读(142) 评论(0) 推荐(0) 编辑

深入探索WebSockets

摘要： WebSockets简介在2008年中期，开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限。通过在IRC和W3C邮件列表上的合作，他们制定了一项计划，在网络上引入现代实时双向通信的新标准，因此创造了“WebSock 阅读全文

posted @ 2018-12-12 19:17 lovollll 阅读(216) 评论(0) 推荐(0) 编辑

一眼看穿👀JS基本概念

摘要：前段时间忙，好久没更新了，继续梳理基础知识这期总结的是JS的基本概念标识符所谓的标识符是指变量，函数属性的名字，或者函数的参数第一个字符必须是一个字母，下划线(_)或者一个美元符号($)，其他字母可以是字母，下划线，美元符号或数字。严格模式严格模式是为JS定义一种不同的解析与执行模型，要启阅读全文

posted @ 2018-12-12 19:14 lovollll 阅读(222) 评论(0) 推荐(0) 编辑

前端常用插件、工具类库汇总

摘要：本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer.layui.com/ 独立维护的三大组件之一（layDate、layer、layim） dia 阅读全文

posted @ 2018-12-12 18:46 lovollll 阅读(602) 评论(0) 推荐(0) 编辑

理解跨域及常用解决方案

摘要：跨域，相信大家无论是在工作中还是在面试中经常遇到这个问题，常常在网上看到别人所整理的一些方法，看似知道是怎么回事，但如果没有动手实践过，总觉得自己没有真正的掌握，在这里，通过自己认真思考整理一些常用的方法。跨域的产生不用多讲，作为一名前端开发人员，相信大家都知道跨域是因为浏览器的同源策略所导致的阅读全文

posted @ 2018-12-12 18:42 lovollll 阅读(100) 评论(0) 推荐(0) 编辑

移动web图片高度自适应的解决方案

摘要：由于图片的加载是在dom加载完成之后进行的，于是，在手机端浏览网页时，经常会看到页面刚打开时很多内容叠在一起，当图片加载完成后，页面会由于图片加载完成出现明显的抖动针对这个问题，有以下几种解决方案媒体查询+px rem vm padding 媒体查询+px 移动端设备种类繁多，媒体查询固然精准，阅读全文

posted @ 2018-12-12 17:39 lovollll 阅读(370) 评论(0) 推荐(0) 编辑

高性能滚动 scroll 及页面渲染优化

摘要：最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知阅读全文

posted @ 2018-12-12 17:36 lovollll 阅读(121) 评论(0) 推荐(0) 编辑

Web学习之跨域问题及解决方案

摘要：在做前端开发时，我们时常使用ajax与服务器通信获取资源，享受ajax便利的同时，也知道它有限制：跨域安全限制，即同源策略。同源策略（SOP）,核心是确保不同源提供的文件之间是相互独立的默认情况下，XHR对象只能访问与包含它的页面处于同一域中的资源，这种限制可以预防某些恶意攻击，但同时也带来很多阅读全文

posted @ 2018-12-12 17:32 lovollll 阅读(185) 评论(0) 推荐(0) 编辑

apply和call用法

摘要： apply语法第一个参数指定函数体内this对象的指向．第二个参数为一个带下标的集合，可以是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数 call语法第一个参数：代表函数体内this指向第二个参数：数量不固定，每个参数依次传入函数当使用call或则apply的时阅读全文

posted @ 2018-12-12 17:30 lovollll 阅读(114) 评论(0) 推荐(0) 编辑

ES6学习之箭头函数

摘要：前言最开始接触箭头函数的时候，都是听到别人说”使用箭头函数的话就不需要绑定this，因为它会自动绑定的“，如今深入了解了一下该特性貌似上面的话只对了一半。什么是箭头函数箭头函数相对于以前的函数表达式有着更加简洁的语法，最重要的是它不会绑定自己的this、arguments、super或者new 阅读全文

posted @ 2018-12-12 17:29 lovollll 阅读(124) 评论(0) 推荐(0) 编辑

JS 对象封装的常用方式

摘要： JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装这种方式是比较常见的方式,比较直观,但是Person() 的职责是构造对象,如果把初始化的事情也放在里面完成,代码就会显得繁琐,如果放在一个方法里初始化会不会好点呢? 升级版 (常见) 可是, 阅读全文

posted @ 2018-12-12 17:26 lovollll 阅读(138) 评论(0) 推荐(0) 编辑

为Array对象添加一个去除重复项的方法

摘要：输入例子输出例子分析验证我们只需要在数组上直接调用 uniq 方法就可以了，如：结果为：进阶 ES6的实现 ES6新增了 Set 对象，也就是我们所说的“集合”，它类似于数组，但是成员的值都是唯一的，没有重复的值。所以可以方便去重。 Set本身是一个构造函数，用来生成Set数据结构。( 阅读全文

posted @ 2018-12-12 17:24 lovollll 阅读(398) 评论(0) 推荐(0) 编辑

最全的常用正则表达式大全

摘要：很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。校验数字的表达式校验字符的表达式特殊需求表达式原文链接：http://zxin.cnblog 阅读全文

posted @ 2018-12-12 17:21 lovollll 阅读(101) 评论(0) 推荐(0) 编辑

前端如何实现图片懒加载(lazyload) 提高用户体验

摘要：定义图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。实现懒加载的难点在于确定某张图片是否是用户阅读全文

posted @ 2018-12-12 17:19 lovollll 阅读(203) 评论(0) 推荐(0) 编辑

JavaScript 开发的40个经典技巧

摘要：首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。使用对象构造器小心使用ty 阅读全文

posted @ 2018-12-12 17:17 lovollll 阅读(156) 评论(0) 推荐(0) 编辑

公告