3 huhudeni

尚未进行身份认证

我要认证

努力办好每一件事情

等级
TA的排名 4w+

写一个webpack中雪碧图的loader

在项目的开发中其实对于小素材的使用优化,有几种不同的方法分别是使用base64 这个的好处是直接与文本在一起,减少向服务器段请求资源的链接通信的时间。不好的是每次刷新页面,都会冲i重新下载刷新。 使用icon小图标,这个的方式也是大家采用的,但是只用于icon小图标,对于大一些的素材,来说并不能使用 使用SVG素材,优势1任意放缩 2文本独立 3较小文件 4超强显示效果svg不是所有浏览器都能支持,点击这里查看兼容性 就是雪碧图是的使用,将小的素材打包成为一张图片,然后使用图片上的素材,好..

2020-06-28 09:53:47

js 中发布与订阅者模式

发布与订阅者模式之前在unity做游戏的时候,尝尝使用到,发布于订阅者模式。目的是为了解耦。不然代码太黏不移维护。他的本质就是做到,发布者唯一的(key),凡是订阅者多个(value)具体的实现let eventMap = new Map();class Observe { /** * 发布信息 * @param {string} key key值 * @param {...any} args key之外的所有参数 */

2020-06-11 11:22:44

关于js es6之后的变量作用域的分析与总结

测试题关于这个标题的提问,我想使用一个代码引出var a = 1;let b = -1;if(true){ console.log('if里面:',a,b); var a = 2; let b = -2;} console.log('if后:',a,b);for (let index = 0; index < 2; index++) { ...

2020-04-28 19:18:19

浏览器环境下js引擎的事件循环机制

1.执行栈与事件队列当javascript代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)和栈(stack)中来加以区分。其中,堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。 但是我们这里说的执行栈和上面这个栈的意义却有些不同。我们知道,当我们调用一个方法的时候,js会生成一个与这个方法对应的执行环境(context),又叫执行上下文。这个执行环境中存在...

2020-03-27 09:50:14

手把手教你写一个自定义指令的基于webpack的脚手架

笔者做了一个基于webpack的脚手架。下面教你如何搭建自己的前端框架

2020-02-26 23:24:33

typeScript 的学习

类型基础 :强类型语言 弱类型语言强类型语言 :两个变量的赋值必须是同一种类型,或者经过转化后是同一种类型弱类型语言 :两个变量的赋值不必须是同一种类型//typeScript 强类型语言int a = 10;string b = 'test';char c = 'a'int d = 20;a = b //是错误的 因为 a 整数类型 b 字符串a = c /...

2020-02-26 11:19:03

js正则表达式学习记录

笔者在学习正则表达式的时候遇见了捕获组捕获组:捕获组就是把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显式命名的组里,方便后面引用console.log(/(\d)([a-z])\1\2/.test('1a1a'));//trueconsole.log(/(\d)([a-z])\1\2/.test('1a1b'));//falseconsole.log(/(\d)(...

2020-02-25 17:19:15

webpack process.env.NODE_ENV

在node中其实是没有这个全局变量的 process.env.NODE_ENV但是我们需要这个判断环境从而配置相关的参数我们需要使用一个插件来帮助我们实现这个功能npm install cross-env -D安装好这个插件之后我们需要在webpack.json中这样配置这个参数"scripts": { "test": "echo \"Error: no t...

2020-02-24 11:31:36

es6 新特性的学习

let const主要是看var 与 let const 至少有一下的几种其区别区别一:作用域类型1:全局作用域 window2:函数作用域 function(){} ()=>{}3:块状作用域 也就是 {}var 的作用域为 1,2let const 的作用域为 1,2,3区别二:var 了可以重复声明 (创建) le...

2020-02-22 13:27:00

单例,AMD,CMD,UMD

先列一下标题会在后续增添加内容

2020-02-20 21:38:27

vue-vuex的学习

vueX初步学习了vue,让我想起来在不使用definePropety()的时候,比如在写一个unity cocosCrator的项目时,我对于一个数据的管理。我可能创建会至少两个方法或者是更多,一个的数据的索取方法,一个是数据的变更方法。可以理解为是getter于setter。目的是为了方便对数据的第一级分发赋值的时候。方便对数据进行统一管理。持有的对于数据进行统一管理。常用变量的跨...

2020-02-20 12:50:17

vue-router 中的query与params的坑

下面这个必须路由的配置使用 query 传参(不需要关心是name 还是 path) 刷新刷新参数也在 { path: '/edit', name: 'edit', component: () => import(/* webpackChunkName: "about" */ '@/views/User/Edit.vue') ...

2020-02-19 00:11:17

取到canvas中字体宽与高的值

如何取到字体的宽度第一种方法:取到canvas的宽我相信大家很容易就找到,下面的apicontext.measureText('显示的文本信息').width第二种方法:我们是可以设置字体的,想一想是不是,显示的 文字的个数*字体尺寸 = 字体的宽度缺点是如果你使用下面的这个放大缩小的方法 上面的公式就不管用了 应该是文字的个数*字体尺寸*放大缩小值 = 字体的...

2020-02-11 23:53:41

专注于移动端互动页面的2Dcanvas框架--canvasWF(更新中)

目录目的优缺点优势缺点地址框架的使用资源注册器 GameSpiritTextDOTweenButtoncanvas的创建css对canvas的设置目的这个框架的目的是为了,让前端的开发者能够在保证包体尽可能小的情况下,让前端的开发人员快速的开发完成canvas的相关需求。下面给玩家提供一些在互动页面常常使用到的关...

2020-01-26 23:52:53

关于webpack的file-loader与url-loader打包出现路径不对的问题

这个是试验包链接:https://pan.baidu.com/s/17zlR7WIRDw3y18Kk7mJYUA提取码:o4pr复制这段内容后打开百度网盘手机App,操作更方便哦笔者在搭建的webpack的包目录结构如下但是打出来的包却说在src/css中找不到image/ceshi1.png文件。后来发现问题了需要这样去设置默认image是src中图...

2019-12-16 16:12:45

webGl shader的学习记录(六):如何画出一个渐变色填充的矩形

其实将两个两个三角形合并一下,就出现了。一个矩形使用两种方式 一个是两个buffer 一个是单一的bufferglcl代码<script type="shader-source" id="vertexShader"> //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标(X, Y) ...

2019-11-25 18:46:17

cocosCreate中http使用的模板文件

var httpUtils = cc.Class({ extends: cc.Component, properties: { // foo: { // default: null, // The default value will be used only when the component attaching ...

2019-11-19 21:38:48

webpack中使用zepto: zepto:Uncaught TypeError: Cannot read property 'createElement' of undefined

笔者在webpack中应用zepto的时候出现了上述的报错,然后参观了大神的文章还是没有处理好https://segmentfault.com/a/1190000012438982(参考的文章)然后我使用的是npm i -D zepto-webpack在你的入口文件下这样引用 找到这个文件的位置import $ from '../node_modules/zepto-...

2019-10-09 16:56:29

webpack学习的记录(三) 一篇带你搭建一个webpack4.0

这个是工程链接https://github.com/soGooday/canvasWF前言笔者为了学习webpack感觉也是走了不少的弯路。有很多点想知道,但是找不到。下面笔者就带着大家带着你快速的入门。这篇文章的宗旨的-我先带着你搭建起来。等你能跑通了,再去看那这些参数是做什么的,我会把官方的链接放在需要使用到的代码下面默认你已经安装好了node.js下面我们先初始化一个n...

2019-09-29 16:39:10

关于适配H5的问题 ( iOS ajax无法请求到后台) H5新手模板

因为同事之前写一个互动页面用了1M,领导说太大了,于是让我写一个初始环境下的H5互动,因为之前是做游戏的,没有接触过H5的适配,所以开始了爬坑之旅。看下 下面的这个文章是关于flexible.js的适配 地址:https://www.jianshu.com/p/04efb4a1d2f8,这个是文件地址你可以点进去赋值粘贴变成本地的文件:http://g.tbcdn.cn/mtb/lib-f...

2019-09-23 11:22:15

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。