WWJ Blog

Thinking will not overcome fear but action will.

从模块学习到深入webpack源码

从模块学习到深入webpack源码 一、webpack简介 什么是webpack 一个javascript模块打包工具，其核心功能就是解决模块间的依赖关系，将各个模块按照特定的规则和顺序组织起来，最终合并成一个JS文件（可能有多个，大部分是一个） 使用webpack的意义 javascript语言没有模块之说，javascript语言之父-Brendan当初在设计这门语言的时候就没有考虑...

Posted by WWJ Blog on November 22, 2019

边框圆角和边框渐变色无法同时起作用

造成边框圆角和边框渐变色无法同时起作用的原因就是，在使用border-image的时候 允许在元素的边框下绘制图像 使用该属性时，将会替换掉border-style属性所设置的边框样式 <div class="content"></div> <style> .content { width: 190px; hei...

Posted by WWJ on May 31, 2019

Documentfragment的性能优化

DocumentFragment的性能优化 在项目中遇到了需要往父级dom中插入很多个子元素的情况，一开始就是直接在父级dom上使用appendChild方法，将多个子元素插入进来 const ownDom = document.createElement('div'); const goldenBorderDom = document.createElement('div'); co...

Posted by WWJ on May 5, 2019

图片的懒加载和预加载

图片懒加载和预加载 懒加载 什么是懒加载？ 简单一点来说就是图片延迟加载，就是当加载图片的时候，先用一张本地的占位符图片替代img元素的src值，当达到某个条件的时候，再去设置图片的真实路径 懒加载的原理？ 页面中的img标签，如果没有设置src属性，就不会去加载图片；只有通过javascript修改了img的src属性，浏览器才会去发送请求；懒加载的原理就是先将页面中的图片都统一用一...

Posted by WWJ Blog on March 23, 2019

Nginx简单入门

#nginx简单入门 安装 先安装homebrew官网，在终端里执行以下命令 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装nginx brew install nginx ...

Posted by WWJ on November 1, 2018

图片懒加载

图片懒加载 window.echo = (function (window, document) { 'use strict'; /* * 构造函数 */ var Echo = function (elem) { this.elem = elem; this.render(); this.listen(); }; /* * ...

Posted by WWJ on October 8, 2018

节流和防抖

节流和防抖 防抖 在学习有关这方面的知识的时候看到有个帖子，里面对于防抖是这么说的，觉得很有道理 防抖就像是法师放技能，进度条没有满的时候释放技能，进度条就会重新从0开始，等到技能满的时候才可以释放技能。防抖的原理就是这样的，在没有达到规定的时间之前如果一直去触发事件的话，事件是不会被真正触发的，只有当在规定的时间内没有去触发事件时，才会去真正触发这个事件 function deb...

Posted by WWJ on September 28, 2018

Web worker学习笔记

webWorker 允许一段javascript代码运行在主线程之外的另一个线程。 如何创建 index.js const worker = new Worker("./task.js"); 在谷歌浏览器下会报错，原因是谷歌浏览不支持使用本地方式使用Web Worker，简单的方法就是在本地开启一个服务，方法只需全局安装http-server，然后在index.js对应的文件路...

Posted by WWJ on August 31, 2018

Underscore.js源码学习笔记

underscore源码学习 将内置对象上的一些方法事先用一个变量给保存起来，以免每次需要使用Array.prototype、Object.prototype、Function.prototype的时候都要重新去获取，节省了时间，我觉得这是一个比较好的习惯，学习了。 var ArrayProto = Array.prototype, ObjProto = Object.prototype,...

Posted by WWJ on August 27, 2018

Javascript设计模式笔记

javasctipt设计模式 单例模式 保证一个类只有一个实例，实现的方法是使用闭包，先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。 透明的单例模式 const CreateDiv = (function() { let instance; let CreateDiv = function(html) { if (ins...

Posted by WWJ on August 19, 2018

ABOUT ME

Goals determine what you going to be!

✉️ wenjiewu2001@gmail.com