前端优化之 -- 使用 require.context 让项目实现路由自动导入
最近接手了公司两个项目，一个PC端后台管理系统，一个app端项目，当然使用的依然是熟悉“Vue全家桶”那套！但是，当我打开项目时，里面的代码是这样的（路由模块）： 就是所有路由配置都放到一个index.js中，这多少还是让我有点惊呆的，显然，项目会越做越大，模块会越加越多，那这种不分模块的架构方式明 ...
babel环境安装与编译
babel是一个js编译器 能够把浏览器不支持的代码编译成浏览器的代码（把不支持的ES6特性编译为ES5） babel官网 https://www.babeljs.cn/ 演示1 演示2 要安装babel，首先需要安装node.js 我之前已经安装过了，cmd里输出node -v即可查看 安装nod ...
ES6中class的继承
ES6中class的继承 父类（基类） 子类 extends 关键字 //父类 class Human{ //父类的构造函数 constructor(name,age,sex,hobby){ this.name=name this.age=age this.sex=sex this.hobby=ho ...
ES6 class -- Class 的方法
静态方法与静态属性 不会被类的实例所拥有，只有类自身拥有的属性和方法 只能通过类来调用、 static 关键字（静态方法） 类名.属性名=属性值（静态属性） //车类 class Car{ //构造函数 constructor(wheel,color,length,width){//接收参数 //给 ...
输出(1-25)该数组右下半三角
<script> var arr = [ [1,2,3,4,5], [6,7,8,9,10], [11,12,13,14,15], [16,17,18,19,20], [21,22,23,24,25] for(var i=0; i<arr.length;i++){ var newArr=arr[i] ...
表单输入需求数量，自动生成总价格
<html> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding:0} #Tb{width:480px ;margin: 20px auto ; border-collapse: collapse; b ...
js空对象值检察判断
if(Object.getOwnPropertyNames(data).length 0){ console.log("该对象为空") } ...
Ajax和Http的常用状态码
Ajax的状态：xhr.readyState ·UNSENT 0 ：创建完XHR默认就是0 ·OPENED 1 ：已经完成OPEN操作 ·HEADERS_RECEIVED 2 ：服务器已经把响应头信息返回了 ·LOADING 3 ：响应主体正在返回中 ·DONE 4 ：响应主体已经返回 Http的状 ...
ES6 class -- Class 的基本语法
类： 降低维护成本、使代码高度复用、扩充方便灵活 OOP 面向对象开发 核心：封装 类->工厂->对象 ES6中的类 //车类 class Car{ //构造函数 constructor(){ console.log("开始造车"); } } //实例化，类->对象 let c=new Car(); ...
ES6 Promise --回调与Promise的对比、信任问题、错误处理、Promise的状态、以及Promise对象的常用方法
之前怎么用回调解决异步的问题： function f(callback){ setTimeout(function(){ callback && callback(); }); } f(function(){ console.log(1); f(function(){ console.log(2); ...
React常用hook的优化useEffect浅比较
先说说react原版的useEffect使用起来不便的地方 useEffect( function() { // effect操作 }, ['a', 'b', { name: 'c' }] ); 这里的effect每次更新都会执行，因为第三个参数一直是不等的，{name: 'c'} !== {nam ...
React封装强业务hook的一个例子
最近因为使用列表展示的需求有点多，就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook，也不能满足业务需要，于是就自己写了一个，支持本地分页筛选和接口分页筛选。 思路就是，筛选的字段都使用form表单控制，然后在hook里面将form和table联合起来。 下面贴出源码 1 ...
web前端开发学，新手学习前端应该先学vue还是react？
新手学vue还是react？下面本篇文章给大家分析一下。有一定的参考价值，正在学习或者有需要的朋友可以参考一下，希望对大家有所帮助。 出身背景： react是facebook团队开发，2013.3月发布。目前版本15.5.4（初始版本是13开头），社区较成熟，拥有更大的生态圈 vue是Evan Yo ...
[热]全网最全的官方1+x证书web前端初级中级高级全课程分析及大纲
Web前端开发-职业技能等级标准1.pdf 更多尽在http://yueguang.online ...
给webstorm换个背景图
1、打开setting——plugins 2、下载一个webstorm插件 Sexy Editor 如下图： 3、下载完成之后重启 4、重启之后打开setting 找到 SexyEditor 选项 并点击右侧底部的 Add images 按钮 5、 选择自己喜欢的图片 6、可以调整透明度 尺寸等 7 ...
Vue项目页面跳转时，窗口上方显示进度条
在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。 然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们 ...
node 版本管理工具--nvm
使用背景: 项目中使用了jquery-weui的左滑删除组件，但在苹果上使用会有左滑点击穿透的现象，只能改源码了。 在github上找，发现是gulp构建的，但版本很低，对于node版本大概要4.5.0才行，本机node版本过高用不了，所以把 node卸载了装nvm来管理。 使用步骤： 1. 卸载本 ...
