
前端
文章平均质量分 82
蔡俊锋
这个作者很懒,什么都没留下…
展开
-
前端调试你还在console.log吗,那你就out, debugger那么好用,你都不用呀
定义和用法debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。使用 debugger 语句类似于在代码中设置断点。通常,你可以通过按下 F12 开启调试工具, 并在调试菜单中选择 “Console” 。注意: 如果调试工具不可用,则调试语句将无法工作。浏览器都支持语法只需要在你代码里面加这样一句 debugger ,就开启了debug大门了,so easy !debugger;访问所调试的页面会跳出debuggerF12 查看控制台 你的变量都可原创 2021-08-25 12:59:56 · 1027 阅读 · 3 评论 -
JavaScript 编码规范大全-Eslint(持续更新,欢迎关注点赞加评论)
JavaScript 编码规范大全(持续更新,欢迎关注点赞加评论)文章目录JavaScript 编码规范大全(持续更新,欢迎关注点赞加评论)前言0. 相关工具1. 类型2. 引用3. 对象4. 数组5. 解构6. 字符7. 函数8. 箭头函数9. 类和构造器10. 模块11. 迭代器和发生器12. 属性13. 变量14. 变量提升15. 比较运算符和等号16. 代码块17. 控制语句18. 注释19. 空白20. 逗号21. jQuery22. 类型转换和强制类型转换23. 命名规范24. 存取器25.原创 2021-06-24 11:35:52 · 661 阅读 · 1 评论 -
我参与的编程导航项目 荣获 腾讯第一届云开发大赛一等奖 #云开发
前言最近跟腾讯的一位同学(鱼皮)一起参加了腾讯第一届云开发大赛,我们提交的作品:编程导航(https://www.code-nav.cn) 荣获 腾讯第一届云开发大赛一等奖????目录作品简介云开发能力应用情况功能模块介绍编程导航主站静态程序员主页编程导航微信公众号服务端编程导航小程序编程导航文档体验二维码/网址进一步了解项目作品简介一站式编程资源导航项目,包括响应式网站、静态主页、小程序、公众号矩阵,帮助大家高效灵活地发现优质编程...原创 2021-06-17 11:45:11 · 904 阅读 · 2 评论 -
大前端学习路线,完整知识体系(持续更新,欢迎关注点赞)
大前端学习路线,完整知识体系(持续更新,欢迎关注点赞)大家好,我是ITCJF ~~最近家里的事情太多了,很久没更新技术文了。期间,也收到了很多小伙伴的鼓励,谢谢大家的帮助和支持,我想感谢大家最好的方式就是持续分享好的技术文章了吧,让自己和他人持续有所收获。小伙伴们如果觉得文章不错,点赞、收藏、评论,分享走一起呀,记得给个一键三连~~好了,我们开始今天的正文。前言一直以来都有很多想学习Web的朋友们问我,学Web怎么学?web开发的学习路线能教教我吗?我先告诉大家一个点,不管你是报了什么培原创 2021-06-16 23:53:19 · 1542 阅读 · 12 评论 -
React Ant Design UI 表格时间列格式化 代码片段
{title: '创建时间',dataIndex: 'updatedAt',sorter: true,render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,},原创 2018-07-19 15:58:01 · 6103 阅读 · 2 评论 -
前端 vue antdv table导出execl
主要用到了better-xlsx和file-saver两个库 yarn addbetter-xlsx file-saverimport { File } from 'better-xlsx';import { saveAs } from 'file-saver';function ExportExcel(column, dataSource, fileName = 'example') { // 新建工作谱 const file = new File(); // 新建表...原创 2020-09-14 17:02:20 · 1127 阅读 · 0 评论 -
js金额格式化最简单方法 JS对货币格式化,js钱三位一隔,javascript货币格式化
利用toLocaleString就解决了customRender:function (text) { return (text).toLocaleString('en-US')}原创 2020-08-14 14:29:22 · 1325 阅读 · 0 评论 -
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中。github仓库 https://github.com/JakHuang/form-generator 码云仓库https://gitee.com/mrhj/form-generator 演示地址https://mrhj.gitee.io/form-generator/#/2 特点可视化设计表单 一键生成原生的vue...原创 2020-06-12 18:07:03 · 4044 阅读 · 0 评论 -
前端性能优化的七大手段
减少请求数量【合并】 如果不进行文件合并,有如下3个隐患 1、文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2、受丢包问题影响更严重 3、经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1、首屏渲染问题 2、缓存失效问题 所以,对于文件合并,有如下改进建议 1、公共库合并 2、不同页面单独合并【图片处理】 1、雪碧图 CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网原创 2020-06-12 11:15:22 · 582 阅读 · 0 评论 -
Express入门 模板引擎hbs 服务端渲染
Express支持多种模板引擎,这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 。安装hbsnpm install hbs --save-dev安装hbs模板引擎后改写app.js//index.jsvar express=require('express');var app=express();//加载hbs模块var hbs = require('hbs');//指定模板后缀名为htmlapp.set('view engine','html');转载 2020-06-10 13:28:19 · 1207 阅读 · 1 评论 -
服务端渲染和客户端渲染区别?
首先,介绍一下 SPA、SEO、SSR 三者的区别SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案。 优点:页面之间切换快;减少了服务器压力; 缺点:首屏打开速度慢,不利于 SEO 搜索引擎优。 SEO(search engine optimization)搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 我们之前说 SPA 单页面应用,通过 ajax 获取数据,这就难保证我们的页面能被搜索引擎收到。并且有一些搜索引擎不支原创 2020-06-10 13:26:21 · 453 阅读 · 0 评论 -
JavaScript中必须掌握的10个难点(必看)
1. 立即执行函数立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: 1 2 3 4 (function() { // 代码 // ... })(); function(){…}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。..原创 2020-06-08 22:43:40 · 605 阅读 · 2 评论 -
什么是闭包?闭包的工作原理、优缺点、使用场景和对页面的影响
1、变量作用域要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。注意点:在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量!2、如何从外部读取函数内部的局部变量?出于种种原因,我们有时候需要获取到函数内部的局部变量。但是,上面已经说过了,正常情况下,这是办不到的!只有通过变通的方法原创 2020-06-05 22:06:31 · 934 阅读 · 0 评论 -
不同浏览器CSS隐藏元素滚动条
CSS隐藏元素滚动条Firefox浏览器对于Firefox,我们可以将滚动条宽度设置为none:scrollbar-width: none; /* Firefox */IE浏览器对于IE,我们需要使用-ms-prefix属性定义滚动条样式:-ms-overflow-style: none; /* IE 10+ */Chrome和Safari浏览器对于Chrome和Safari浏览器,我们必须使用CSS滚动条选择器,然后使用display:none隐藏它:::-..原创 2020-06-05 17:55:11 · 512 阅读 · 0 评论 -
js 浮点数精度问题 可以用accounting.js解决
js 浮点数精度问题 可以用accounting.js解决地址https://github.com/itcjf/accounting.js原创 2020-06-05 17:52:02 · 432 阅读 · 0 评论 -
Web前端面试常见问题
Web前端面试常见问题箭头函数箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值也就是说,看的是上下文的this,指向的是定义它的对象,而不是使用时所在的对象;普通函数指向的是它的直接调用者。vuex 中dispatch 和 commit 的用法和区别ispatch:含有异步操作,例如向后台提交数据,写法: this.$...原创 2020-04-11 10:17:19 · 714 阅读 · 0 评论 -
vue.js 教程 思维导图 百度脑图分享 会持续更新
vue 教程 - 蔡俊锋 百度脑图 http://naotu.baidu.com/file/7021fe563b3f330b47646176a0f57ec7有什么建议也可以留言原创 2017-10-12 17:11:31 · 3554 阅读 · 0 评论 -
史上最全JavaScript数组去重的十种方法(推荐)
一、前言:我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是“数组如何去重”。是的,这个问题有很多种解决方案,看看下面的十种方式吧!二、数组去重方式大汇总:Methods 1: 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。? 1 2 3 4 5 6...原创 2018-12-06 15:19:50 · 352 阅读 · 0 评论 -
“四大设计原则”在排版中的应用
最基本的原则,对齐原则对齐原则是最基本也是最简单的一个原则:页面上的所有元素应该是遵循秩序的,而不是随便放置的,有一条看不见的线将它们约束起来。对齐的方式有三种,居中对齐,居左对齐,居右对齐,在一个界面中最好只有一种对齐方式,也就是要么居中,要么居左,要么居右。好了,我们应用对齐原则,将所有元素都居中: 现在是不是感觉界面整洁了许多,显得有秩序了?其实在对齐原则中还有一条进阶的小技...原创 2018-12-10 11:35:39 · 1578 阅读 · 0 评论 -
vue 项目中 自定义过滤器 全局使用 filter
新建filter文件src目录下新建filters目录,filters目录里新建index.js文件 exports.formatMoney = (value) => { if (value) { value = Number(value); return '¥ ' + value.toFixed(2); }};exports.statusName ...原创 2018-12-12 09:54:28 · 789 阅读 · 0 评论 -
前端如何更精准的评估开发时间
引言在日常的前端项目中,我们经常需要对需求任务进行功能点Task分解,分解Task是为了更合理地进行开发资源分配,也是为了更准确地对项目进行评估和管理。然而如果分配不合理的话,便会带来许许多多的问题,导致开发及管理不畅,甚至会导致项目延期或失败。分配不合理导致的问题不好进行任务分配 不好对前端项目有个整体进度及风险把控 开发不好对具体点的实现聚焦 相关依赖遇到风险时,前端的开发也...原创 2019-01-21 18:09:21 · 2268 阅读 · 2 评论 -
TrueType、PostScript 和 OpenType 字体之间的区别是什么? truetype vs opentype
TrueType、PostScript 和 OpenType 字体之间的区别是什么?TrueType 字体可调整到任意大小,并且在所有大小情况下,都是清晰可读的。可以将它们发送给 Windows 支持的任何打印机或其他输出设备。OpenType 字体与 TrueType 字体相关,但包括更大的基本字符集扩展,包括小型大写、老样式数字及更复杂的形状,如“字形”和“连字”。OpenType 字体在...原创 2019-02-01 14:40:12 · 7560 阅读 · 0 评论 -
JS实现继承的几种方式
前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = f...原创 2019-02-18 09:51:57 · 315 阅读 · 0 评论 -
Web工程师必备的可视化工具
国外站点https://datavisualization.ch/为大家总结出了当前热用的43款可视化工具,包括Arbor、Chroma.js、D3.js、Google Chart Tools等,绝对让你一饱眼福。1.Arbor.jsArbor是一个免费的、可视化的图形库,基于矢量创建动态的连接图。它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。2.CartoDB...原创 2019-02-25 12:20:31 · 622 阅读 · 1 评论 -
input 模糊匹配功能 文本框模糊匹配(纯html+jquery简单实现) demo
input 模糊匹配功能 文本框模糊匹配(纯html+jquery简单实现) demo<!DOCTYPE HTML><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=dev原创 2018-09-17 17:24:16 · 3351 阅读 · 0 评论 -
给所有的input设置 autocomplete="off"
有些浏览器会自动填充表单, 比如firefox, 但有时我们又不希望浏览器自动填充 所以我们会使用 autocomplete="off" 属性告诉浏览器不要自动填充 但是每个input都要写一次autocomplete="off" 就显得很冗余了 还好,可以通过js在页面load后对所有的input修改此属性,下面是一个jquery的版本: // 去掉所有input的autocomplet...原创 2018-08-17 16:50:04 · 12995 阅读 · 3 评论 -
登录页面居中示例代码
登录页面居中示例代码<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2018-08-16 17:31:42 · 6823 阅读 · 0 评论 -
Web系统开发构架再思考-前后端的完全分离 MVVM
前言 前后端完全分离其实一直是Web开发人员的梦想,也一直是我的梦想,遥想当年,无论是直接在代码里面输出HTML,还是在HTML里面嵌入各种代码,都不能让人感到满意.期间的痛苦和纠结,我想所有Web开发人员都深有感触.由于最近几年一直在MS平台,从Web Form到MVC,MS平台虽然易用好学,但整合度太高而灵活性不足,一直没有找到很好的前后端分离的思路. (Java平台的兄弟如果已经有原创 2017-10-15 22:42:14 · 1429 阅读 · 0 评论 -
如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定转载 2017-10-24 11:03:42 · 841 阅读 · 1 评论 -
选择恐惧症的福音!教你认清MVC,MVP和MVVM
相信大家对MVC,MVP和MVVM都不陌生,作为三个最耳熟能详的Android框架,它们的应用可以是非常广泛的,但是对于一些新手来说,可能对于区分它们三个都有困难,更别说在实际的项目中应用了,有些时候想用MVP的,代码写着写着就变成了MVC,久而久之就对它们三个的选择产生了恐惧感,如果你也是这样的人群,那么这篇文章可能会对你有很大的帮助,希望大家看完都会有收获吧!文章重点:(1)了转载 2017-11-08 14:33:02 · 577 阅读 · 0 评论 -
MVC,MVP 和 MVVM详解
复杂的软件必须有清晰合理的架构,否则无法开发和维护。MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易了。一、MVCMVC模式的意思是,软件可以分成三个部分视图(View):用户界面。控制器(Controller):业务逻辑模型(M转载 2017-11-08 14:26:49 · 770 阅读 · 0 评论 -
Vue相关开源项目库汇总(史上最全)
目录UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui ★6253 - Vue 2的移动UI元素muse-ui ★原创 2017-10-13 08:39:29 · 35354 阅读 · 2 评论 -
Awesome Vue.js vue.js学习资源链接大全 中文
策划列表相关的vue.js可畏的事资源官方资源外部资源工作门户社区会议播客官方的例子教程实例书项目采用vue.js开源商业产品应用/网站互动体验企业使用组件&图书馆用户界面组件表通知装载机进度条工具提示覆盖视差图标菜单旋转木马排行时间日历地图音频/视频无限滚动下拉刷新降价PDF树社会共享QR码搜索其他形式选择器原创 2017-10-12 16:51:35 · 14555 阅读 · 0 评论 -
Awesome Vue.js vue.js学习资源链接大全 英文
A curated list of awesome things related to Vue.jsResourcesOfficial ResourcesExternal ResourcesJob PortalCommunityConferencesPodcastsOfficial ExamplesTutorialsExamplesBooksProjects Using V原创 2017-10-12 16:43:38 · 11894 阅读 · 1 评论 -
vue.js学习资源大全
下面整理了一些关于Vue以及Vue衍生的学习资源:官网教程: https://cn.vuejs.org/v2/guide/installation.html官网API:https://cn.vuejs.org/v2/api/#silentECMAScript 6 入门:http://es6.ruanyifeng.com/30分钟掌握ES6/ES2015核原创 2017-10-12 16:38:56 · 1531 阅读 · 0 评论 -
Vue2.0 之 自带浏览器里无法打开(兼容IE处理) - 解决方案 命令
Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个android真机测试下(机型版本为4.4以上),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.原创 2017-10-27 17:22:49 · 5314 阅读 · 0 评论 -
web前端中的命名规则
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服原创 2017-10-27 14:42:04 · 3387 阅读 · 0 评论 -
前端 如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定转载 2017-10-16 16:49:44 · 2931 阅读 · 0 评论 -
vue 常用命令
vue的安装 npm install vuevue的vue-cli 脚手架安装 cnpm install -g vue-cli创建vue项目模板vue init webpack projectName切换到项目目录cd projectName安装依赖模块npm install原创 2017-10-17 15:14:27 · 786 阅读 · 0 评论 -
动态生成li 根据后台返回个数动态生成li
//根据后台返回端口个数动态生成for (let i = 0; i < 8; i++) {var temp=` <li><p>P`+i+`</p><img id=`+`"$elementId$_p`+i+`Port"`+ ` data-id=`+`"$elementId$_p`+i+`Port"`+`src="/static/th原创 2018-08-16 17:30:20 · 2798 阅读 · 0 评论