Web前端
文章平均质量分 95
小平果118
我是一匹奔腾的野马,需要你来征服。。。。。
展开
-
[浅析] vue3.0中的自定义渲染器
Vue3.0中支持 自定义渲染器 (Renderer):这个 API 可以用来自定义渲染逻辑。它可以将 Virtual DOM 渲染为 Web 平台的真实 DOM。(在以往像weex和mpvue,需要通过fork源码的方式进行扩展)。1.自定义渲染器的原理渲染器是围绕 Virtual DOM 而存在的,在 Web 平台下它能够把 Virtual DOM 渲染为浏览器中的真实 DOM 对象,通过前面几章的讲解,相信你已经能够认识到渲染器的实现原理,为了能够将 Virtual DOM 渲染为真实 DOM,渲原创 2020-10-19 23:58:19 · 2278 阅读 · 0 评论 -
PixiJS核心概念及简单上手
PixiJS核心概念及简单上手0. PixiJS 介绍PixiJS是一个轻量级的2D渲染引擎,它能自动侦测使用WebGL还是Canvas来创建图形。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体,创建动画或管理交互式图像(精灵),从而制作一个游戏或应用。它拥有语义化简洁的 API 接口。比如支持纹理贴图集和为精灵提供了一些简单的动画系统。它也提供了一个完备的场景图,你可以在精灵图层里面创建另一个精灵原创 2020-10-19 23:55:37 · 7838 阅读 · 2 评论 -
你不知道的JavaScript--Item16 for 循环和for...in 循环的那点事儿
大家都知道在JavaScript中提供了两种方式迭代对象:for 循环; for..in循环; 1、for循环不足:在于每次循环的时候数组的长度都要去获取;终止条件要明确;在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下:// 次佳的循环for (var i = 0; i < myarray.lengt原创 2015-10-21 21:08:04 · 2213 阅读 · 0 评论 -
超实用的JavaScript代码段 Item2 --伸缩菜单栏
伸缩菜单栏点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding原创 2015-10-31 10:02:46 · 1651 阅读 · 0 评论 -
ECMAScript 6 入门 ----Generator 函数
本文转自:阮一峰老师的ECMAScript 6 入门,有时间可以看下评论!Generator 函数简介基本概念Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍Generator函数的语法和API,它的异步编程应用请看《异步操作》一章。Generator函数有多种理解角度。从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部转载 2015-10-31 14:18:46 · 1132 阅读 · 0 评论 -
JavaScript设计模式Item 1—多态
多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。从字面上来理解多态不太容易,下面我们来举例说明一下。主人家里养了两只动物,分别是一只鸭和一只鸡,当主人向它们发出“叫”的命令时,鸭会“嘎嘎嘎”地叫,而鸡会“咯咯咯”地叫。这两只动物都会以自己的方式来发出叫声。它们同样“都是动物,并且原创 2015-11-01 14:17:38 · 1317 阅读 · 0 评论 -
你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年转载 2015-10-31 13:51:27 · 1836 阅读 · 2 评论 -
JavaScript设计模式 Item 2 -- 接口的实现
1、接口 (1)什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段。尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现。例如,如果一个接口包含有一个名为setName的方法,那么你有理由认为这个方法的实现应该具有一个字符串参数,并且会把这个参数赋给一个name变量。有了这个工具,你就能按对象提供的特性对它们进行分组。例如,即使一批对象彼此存在着极大的原创 2015-11-01 16:13:16 · 1570 阅读 · 1 评论 -
JavaScript设计模式 Item 3 --封装
在JavaScript 中,并没有对抽象类和接口的支持。JavaScript 本身也是一门弱类型语言。在封装类型方面,JavaScript 没有能力,也没有必要做得更多。对于JavaScript 的设计模式实现来说,不区分类型是一种失色,也可以说是一种解脱。从设计模式的角度出发,封装在更重要的层面体现为封装变化。通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开来,在系统的演变过程中,原创 2015-11-01 20:52:31 · 1174 阅读 · 0 评论 -
JavaScript设计模式 Item 4 --继承
1、继承在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可。与它们不同,在javascript中要想达到传承公用成员的目的,需要采取一系列措施。更有甚者,javascript属于使用原型式继承的少数语言之一。利益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些的原型式继承。2原创 2015-11-01 21:27:20 · 969 阅读 · 0 评论 -
你不知道的JavaScript--Item26 异步的脚本加载
先来看这行代码:<script src = "allMyClientSideCode.js"></script>这有点儿……不怎么样。“这该放在哪儿?”开发人员会奇怪,“靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?”这两种做法都会让富脚本站点的下场很凄惨。<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于“白屏死机”状态。而<body>标签末原创 2015-11-03 14:38:31 · 1729 阅读 · 0 评论 -
你不知道的JavaScript--Item23 定时器的合理使用
1、定时器概述window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下: window.setTimeout(expression,milliseconds); window.setInterval(expression,原创 2015-10-29 21:59:47 · 2685 阅读 · 3 评论 -
超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .第一步、获取按钮、绑定事件、设置定时器变量和计时变量第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”<!doctype html><html lan原创 2015-10-31 10:48:10 · 1781 阅读 · 0 评论 -
超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果图片尺寸 统一设置成:490*170px;一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数提示:1、 index不能一直无限制的递增下去,需做判断2、调用切换图片函数时需将递增之后的index作为参数传过去三、定义图片切换函数提示: 1.遍历所有放数原创 2015-10-31 10:17:17 · 1838 阅读 · 3 评论 -
你不知道的JavaScript--Item20 作用域与作用域链(scope chain)
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。1、JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在J原创 2015-10-23 11:42:35 · 2409 阅读 · 3 评论 -
jQuery学习之旅 Item7 区别this和$(this)
刚开始以为this和(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与(this)的区别。1、jQuery中this与$(this)的区别$("#textbox").hover( function() {原创 2015-10-27 19:27:06 · 1325 阅读 · 1 评论 -
深入理解BootStrap Item1 -- 学习从现在开始
前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootS转载 2015-11-12 21:44:12 · 2597 阅读 · 1 评论 -
深入理解BootStrap Item4 -- 表格
前言本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示:1.基本案例2.条纹状表格3.带边框的表格4.鼠标悬停5.紧缩表格6.状态class7.响应式表格8.转载 2015-11-12 22:15:02 · 2002 阅读 · 1 评论 -
jQuery学习之旅 Item5 $与jQuery对象
1、$符号的由来$符号本质就是函数的名字。 jquery源码分析通过分析我们知道,在jquery里边不只可以使用$符号,还可以使用jQuery标志解决冲突问题有的项目是中间过渡项目(prototype和jquery框架都有使用)prototype框架也使用$符号jquery里边也使用符号现在就分不清楚符号 现在就分不清楚符号到底是prototype框架的 还是 jquery框架的jqu原创 2015-10-27 16:03:02 · 1282 阅读 · 0 评论 -
jQuery学习之旅 Item6 好用的each()
1、javascript 函数的调用方式首先来研究一下jquery的each()方法的源码,在这之前,先要回顾一下javascript函数具体调用样式:普通函数调用 setName();可以作为对象的属性调用作为构造函数使用,new 函数,实例化对象call() apply() //1、函数作为对象成员使用 var cat = {'climb':function(){alert原创 2015-10-27 18:20:43 · 1205 阅读 · 0 评论 -
jQuery学习之旅 Item8 DOM事件操作
1、jquery页面载入事件1、传统加载事件<body onload=”函数名()”> 页面全部html和css代码加载完成之后再调用指定的onload函数window.onload = function(){ 加载过程}2、jquery实现加载事件① $(document).ready(function(){加载代码});② $().ready(function(){加载代码});原创 2015-10-28 11:09:58 · 1342 阅读 · 0 评论 -
jQuery学习之旅 Item9 动画效果
1、元素的显示和隐藏display:none; 隐藏display:block; 显示简单显示和隐藏方法a) show() 显示b) hide() 隐藏c) toggle() 开关,显示则隐藏,隐藏则显示<script type="text/javascript"> function f1(){ //隐藏 $("di原创 2015-10-28 13:59:11 · 3222 阅读 · 6 评论 -
jQuery学习之旅 Item10 ajax快餐
1. 摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.2. 前言Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个转载 2015-10-28 19:11:48 · 1882 阅读 · 0 评论 -
你不知道的JavaScript--Item22 Date对象全解析
本篇主要介绍 Date 日期和时间对象的操作。1. 介绍1.1 说明Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。1.2 属性无; Date对象对日期和时间的操作只能通过方法。2. 构造函数2.1 new Date() :返回当前的本地日期和时间参数:无返回值:{Date} 返回一个表示本地日期和时间的Date对象。示例:var dt = new Date();原创 2015-10-29 21:09:12 · 1498 阅读 · 0 评论 -
前端工程与性能优化
每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题。我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:《高性能网站建设指南》、《高性能网站建设进阶指南》。经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来。这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义。然而,对于构建大型 web 应转载 2016-03-13 20:20:40 · 1237 阅读 · 0 评论 -
你不知道的JavaScript--Item32 DOM基础详解2
先上几张图简要看看DOM的一些方法属性:大概这些就是常用的,下面具体聊聊。节点类型的判断其中元素节点Element的判定最为重要,下面给出4个主要的方法;1、如何判断节点是元素节点可以用isElement()方法<div id="test">aaa</div><!--这是一个注释节点--><script>var isElement = function (el){ return !!e原创 2015-11-11 18:37:56 · 2948 阅读 · 7 评论 -
Hybrid App性能优化之路
Hybrid App性能优化之路主要从两个方面讲一下首屏数据展示耗时优化和局部滚动长行列表优化首屏数据展示耗时优化1.首屏渲染的一般时序可以用如下的几个步骤:首先点击打开页面,创建webview,进行页面的加载,页面加载完后,发送cdn请求去拉一些js和css的数据。首先看一下首屏数据渲染,时候不用cgi?首先想到的一点就是利用缓存。让cgi第一次拉取的数据是直接从缓存里读取出来的,等到加载完后再用原创 2017-01-04 21:33:34 · 4665 阅读 · 1 评论 -
【微信小程序】IOS/Android兼容坑
一、时间转换问题:这不只是小程序上面的问题是ios系统 都有这个问题 就是new Date(“2017-06-16”) 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下1.替换”-“为”/“2.删除”.“后面的字符串(带毫秒也会有问题)代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ s原创 2017-12-02 16:12:46 · 2386 阅读 · 0 评论 -
小程序中吸底按钮适配 iPhone X 方案
小程序中吸底按钮适配 iPhone X 方案随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与Home Indicator横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图:是bug就得转载 2017-12-12 00:19:57 · 1154 阅读 · 0 评论 -
【Deep Linking】:从浏览器调起 APP
Deep Linking 只是一个概念, 是指通过一个链接进入另一个网站/App,并直接浏览其内部的某个页面。 Deep Linking 给用户带来的是非常顺滑的浏览体验,尤其在 Web 世界中 Deep Linking 的实现非常容易。但如果要进入 App 并定位到对应的页面则较为困难,URI Scheme, Universal Links, Android App Links, 以及 Chro转载 2017-12-31 01:09:23 · 2031 阅读 · 0 评论 -
lerna -- 多包管理工具
什么是 lerna ?Lerna 它是基于 Monorepo 理念在工具端的实现。lerna 出现的历史背景Lerna 出现的历史背景,其实就是 Monorepos 和 Multirepos 在进行项目管理时优与劣。说说我个人的感触:Multirepos缺点:在 Multirepos 方案中我们通常一个项目会有一个 repo 或者说是一个 module 一个 rep...原创 2018-02-11 23:33:17 · 5289 阅读 · 0 评论 -
微信小程序:一些运行细节及针对性的优化策略
原文链接:https://juejin.im/post/5b496d5d5188251a90187635为什么要做性能优化?一切性能优化都是为了体验优化1. 使用小程序时,是否会经常遇到如下问题?打开是一直白屏打开是loading态,转好几圈我的页面点了怎么跳转这么慢?我的列表怎么越滑越卡?2. 我们优化的方向有哪些?启动加载性能渲染性能3....原创 2018-07-14 12:09:06 · 15111 阅读 · 6 评论 -
JavaScript设计模式与实践--适配器模式
适配器模式(Adapter) 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解...原创 2018-08-05 16:44:25 · 1163 阅读 · 0 评论 -
深入分析Node.js事件循环与消息队列
多数的网站不需要大量计算,程序花费的时间主要集中在磁盘 I/O 和网络 I/O 上面SSD读取很快,但和CPU处理指令的速度比起来也不在一个数量级上,而且网络上一个数据包来回的时间更慢:一个数据包来回的延迟平均320ms(我网速慢,ping国内网站会更快),这段时间内一个普通 cpu 执行几千万个周期应该没问题因此异步IO就要发挥作用了,比如用多线程,如果用 Java 去读...原创 2018-08-03 00:05:44 · 9573 阅读 · 7 评论 -
【Promise 】必知必会经典题
题目转载来自:https://github.com/nswbmw/node-in-debugging/blob/master/3.1 Promise.md如何写出清晰优雅的代码也是调试重要的一部分,而在过去很长一段时间内,JavaScript 最令人吐槽的就是回调地狱(callback hell)了。先看一段代码:现在,我们以十道题巩固一下前面所学到的 Promise 的知识点。题目一: P...原创 2019-07-07 10:28:13 · 768 阅读 · 0 评论 -
lerna+yarn workspace+monorepo项目的最佳实践
1.monorepo管理对于维护过多个package(功能相近)的同学来说,都会遇到一个选择题,这些package是放在一个仓库里维护还是放在多个仓库里单独维护。Multirepo 是比较传统的做法,即每一个 package 都单独用一个仓库来进行管理。Monorepo 是管理项目代码的一个方式,指在一个项目仓库 (repo) 中管理多个模块/包 (package),不同于常见的每个模块建一个 ...原创 2019-08-18 10:59:24 · 12430 阅读 · 6 评论 -
【微信小程序】video视频组件问题
前言将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代码转换的想法。本文不是分析babel源码,仅仅是看看babel转换的最终产物。es6在babel中又称为es2015。由于es2015语法众多,本文仅挑选了较为常用的一些语法点,而且主要是分析babel-原创 2017-12-02 16:02:39 · 53077 阅读 · 6 评论 -
Web性能优化中的一些关键点get了吗?
##Web性能优化:Performance,数据搜集方法###浏览器新提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析。 它是浏览器的直接实现,比之前在网页中用js设置Date.time或者cookie来分析网页时间上要精确很多。readyStart = timing.fetchStart - timin转载 2017-08-06 09:55:16 · 668 阅读 · 0 评论 -
前端工程师的小伙伴--chrome
作为一个前端工程师你了解你的小伙伴么--chromechrome的常用功能我就不说了,F12,element,network,timeline,resources,aduits,console这些我就默认大家都已经掌握了。估计很多人不知道Chrome地址栏功能,我作为一个low到家的前端工程师,必须懂的。以下我要介绍的这些指令在Chrome地址栏输入即可about:version – 显示当前版本转载 2017-08-06 09:52:01 · 857 阅读 · 0 评论 -
用全栈神器electron 打全平台桌面级 app--Music Player
什么是Electron?Electron 技术方案进行桌面端的开发,跨平台兼容 macOS、Windows、Linux 等操作系统。可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。快速入门Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服原创 2016-08-21 20:43:36 · 11880 阅读 · 11 评论