Part1:Web
文章平均质量分 50
朝阳若蓝
专注于HTML5、CSS3、Javascript、JQuery、Vue、Vuex、Axios、ElementUI、React等常见前端技术栈
展开
-
前端必须要注意的规范(三)之js规范
上一章主要讲了css的书写顺序以及一些可以省略精简更优的写法,这一章主要讲述js的一些前端规范////////////// 一.空格/////////////////1.二元运算符必须有一个空格,一元运算符与操作对象之间不允许有空格 var a = !arr.length; a++; a = b + c;//2.用作代码块其实的左花括号 "{" 前必须有一个...原创 2017-10-08 14:11:20 · 743 阅读 · 0 评论 -
前端必须要注意的规范(二)之css规范
前一章主要讲了html的规范和html在webstorm里的一些快捷书写方式,这一章主要讲css的规范和书写顺序/* 属性书写顺序,提高代码的可读性 *//* Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) *//* Formatting Model:posi原创 2017-10-08 14:06:00 · 739 阅读 · 0 评论 -
前端必须要注重的规范(一)之html规范
前端基本上第一课都是需要掌握前端的各种编码规范,但是实际上并不是所有的人都能够在后期的项目开发中明白这一点的,所以需要我们在项目进行中,时刻用这些规范激励自己,进一步地明白这些规范的深层次的意义,从而能够达到灵活自如地运用到工作中。今天我就总结下html的前端规范,包括书写的规范和html标签的使用规范。以及在webstorm中html里可以使用的快捷键<!DOCTYPE h...原创 2017-09-26 11:19:16 · 500 阅读 · 0 评论 -
Vue基础教程学习(六)
一. VUEX的小案例五个属性:store, mulation, action, modules, getters1) modules文件夹下的user.js:const user = { state:{ self: null, token: '', }, mutations:{ SET_SELF: (state, self) => { ...原创 2021-05-17 15:34:09 · 241 阅读 · 0 评论 -
前端面试题总结
1.rem的计算原理打个比方,要计算375px的屏幕,设计稿给的是750px的,此时屏幕1px相当于设计稿的0.5px,所以设计稿上某个元素类imgTest100px,相当于屏幕上50px设置html 下font-size 默认值为 0.5px,为了计算方便一般会以100倍计算,也就是50px,如下,即1rem = 50px:@media screen and (min-width:375px) { html { font-size: 50px; }}.i原创 2021-05-08 10:00:29 · 430 阅读 · 2 评论 -
项目总结
总算是到了项目的 片尾,开始进行测试了,一个月周期的死磕到了一决雌雄的最后关头,为了让自己有所成长,今天进行一个小结,内容都是干货,有需要的可以拿去。虽然都是看起来非常简单的东西,用老大的话说就是就这么点东西,但是都是血和泪的历史。好了,开始进入正题。一. 首先总结一下项目中常用的小插件,当然网上一堆堆,不知道可自行百度谷歌:1. 时间日历插件 laydate.js2...原创 2017-08-17 16:36:07 · 416 阅读 · 0 评论 -
设置logo和背景以及语言包切换
因为项目是一个海外项目,所以涉及到一些语言的问题,中文简体已经无法满足客户的小宇宙了,当老大轻松地把js这部分语言切换问题交给我的时候,感觉整个人都不好了。还有设置logo和背景的问题,乍一听感觉高大上的样子,但是真正去做的时候会发现其实并没有那么难,也许仅仅只要你能够搞清思路就可以了。当然我是激情满满的。下面就开始说一下这两个扛把子。先来说一下设置logo和背景,其实我们来理一下思路,就...原创 2017-08-24 16:18:08 · 816 阅读 · 0 评论 -
浅谈框架页与登录页的布局问题
作为一个小前端,不能离开的经典问题就是页面样式的调试,对于普通页面的样式当然大部分人都没问题,但是一遇到框架页,登录这样的有一点分量的页面,想要做的有水准,做的漂亮,代码还能简洁,其实还是需要有一个清晰地思路的。当然,无论是登录页还是框架页,掌握了思路,知道它的难点和问题,其实所有的bug就能迎刃而解了。主要讲三点:一.登录页要注意的问题 二.框架页要注意的问题 三原创 2017-08-29 16:13:33 · 467 阅读 · 0 评论 -
总结骏汇项目的一些js问题(四)之公司中文名称与公司英文名称之提交
项目中遇到的一些琐碎的小逻辑,虽然这些小问题不仔细观察不能发现其中的关系,但是我们作为开发还是必须要注意的。虽然作为一个标题党只写了公司中文名称和公司英文名称这个逻辑,但是我还是要仔细地说一下下面这几个问题。其一,要讲的如标题,是关于公司中文名称和公司英文名称提交的问题其二,要讲的是附件上传的问题,逻辑比较简单,但是需要注意细节其三,要讲的是输入金额的时候,从右往左能够每隔3个数字用逗...原创 2017-09-14 09:22:07 · 796 阅读 · 0 评论 -
总结骏汇项目的js问题(三)之充值优惠
项目中充值优惠相关的就要说到两处,一处是增加优惠活动规则,另一处就是充值时选择优惠充值活动。这两处相对个人而言,如果没有任何参照物还是很难完成的。但是既然说到了这里,那么我们就一起来探索一下这两个功能模块的思路和代码难点。一.首先来说一下这两个功能模块的思路(增加优惠活动规则,选择优惠充值活动)二.然后来看看这两个代码有什么难点并奉上代码以供后续遗忘参考。先来说说增加优惠活动规则的思路...原创 2017-09-04 16:38:34 · 392 阅读 · 0 评论 -
总结骏汇项目的一些js逻辑问题(二)之添加意向银行并可排序
说到这个添加意向银行排序的问题,刚开始的时候自己没有思路,硬是写了很多代码去实现,最后发现其实是没有掌握问题的要点,没有理清问题的思路,虽然效果能实现但绝不是所最好的解决办法,所以也给之后的我做项目一个信号,功能问题一定要理清思路再去解决,否则只会让开始的问题不清晰,忽略了我们真正需要实现的功能。由于业务需要,现在是看不到的,但是我也来说一说这个需求需要实现的功能,以及如何实现的思路。 首先...原创 2017-09-01 11:13:46 · 334 阅读 · 0 评论 -
总结骏汇项目的一些js逻辑问题(一)之数据提交
之前就一直想要总结一下项目里面遇到的js问题,但是因为项目一直在跟进,有些内容其实也一直没有考虑全面,现在确实是项目已经结束,所以特来总结一下自己的在项目里面遇到的一些逻辑问题并总结一些简单轻便的js写法。首先说一下数据提交的问题,所谓的数据提交就是用ajax请求吧需要传的参数带给请求的url,我建议当传的参数比较多的时候,不要一个一个地传,而是直接定一个param,把你所需要的参数放进去。当...原创 2017-09-01 09:31:34 · 417 阅读 · 0 评论 -
appcan图片上传最新实现方式
今天我来说说我最新在做的新的模块,意见反馈,其中用appcan实现图片上传是一个技术难点。所以,这一节,我就来说一说appcan实现图片上传。 首先,我们要先搞清楚图片上传的具体步骤和难点。 先来说说图片上传的步骤: 图片上传的步骤: 1.当我点击添加图片的按钮时,去打开图片选择器 2.当我选择完图片,点击完成的时候,我要判断是否有选中的图片,如果有的话,选中了图片的路径是...原创 2018-09-09 18:16:19 · 2351 阅读 · 3 评论 -
后台管理系统之侧边栏滑动打开
我相信我们在做后台管理系统的时候,一定会遇到打开关闭左侧或者右侧导航侧边栏的问题。那么今天我就来总结一下PC端和H5端打开关闭左侧导航栏的问题。 首先说一下PC的后台管理系统,当然不仅是js代码需要合理,html和css代码也需要合理才可以实现那么我们先看一下效果: 正如我前面所说,合理的html,css和js配合在一起才能实现用最简单的方法实现这个展开收起侧边栏的功能。 代...原创 2018-06-26 16:27:37 · 3687 阅读 · 0 评论 -
后台管理系统之详解(一)
后台管理系统其实无非就是“品”字框架,那么你们是怎么搭建这个“品”字框架的呢? 细细拆分开,就像剥洋葱,这个别之间都是有千丝万缕的关系的。 这篇文章主要是说说适配问题,具体分类见下面表格: 适配内容 具体适配方案 品字结构 关于左侧导航栏和右侧内容栏(具体方案下面详述) 屏幕分辨率 1024px*768px以上(为了适配平板电脑) 浏览器 ...原创 2018-06-05 14:01:50 · 16983 阅读 · 1 评论 -
vue结合appcan与极光实现消息推送
项目业务的需要,需要对用户进行消息推送,现如今已经告一段落,那么这一节我就来说一说消息推送的一些思路和注意点,后面有需要的小伙伴可以进行参考。 AppCan,是基于HTML5技术的Hybird跨平台移动应用的开发工具。开发者利用HTML5+CSS3+Javascript,通过App[Can IDE集成开发系统。 也就是说前端基于H5即可实现Android,IOS的原生效果开发。 ...原创 2018-08-19 19:48:16 · 4256 阅读 · 5 评论 -
vue基础教程学习(五)
这一节主要是总结一些在实际Vue的项目开发当中遇到的一些疑难问题,但是踩过这些坑之后就会豁然开朗,请君悉知。 一.运行代码后报如下的错误:Component template should contain exactly one root element. If you are using v-if on multiple elemen我猜你的代码结构一定是这样的:<tem...原创 2018-08-19 15:20:13 · 608 阅读 · 0 评论 -
vue基础教程学习(四)
这一章呢,主要和大家分享vue环境安装或者重装之中遇到的问题。 一.80端口被占用 解决方法: 1.cmd命令行开启 2.命令行中输入netstat -ano ,得到对应端口号的PID 3.ctrl+alt+delete ,打开任务管理器,找到对应PID的进程,结束进程就可以了 二.windows安装了最新的node,但是命令行却始终显示nod...原创 2018-08-19 09:48:39 · 412 阅读 · 0 评论 -
vue基础教程学习(三)
今天主要是想和大家分享一下Vue的数据绑定,这是vue的基础,是我们进行开发最基本需要掌握的知识,所以有需要的小伙伴赶紧学起来吧。 一.数据渲染{{message}} // 数据绑定<div v-html="htmlMess"></div> // html绑定<div v-text="message"></div> ...原创 2018-08-18 17:21:52 · 737 阅读 · 0 评论 -
vue基础教程学习(二)
上一节我主要讲了Vue是什么,为什么要学Vue,以及使用Vue编写最好的IDE——Atom,它的快捷键及必备插件,和它的初级使用。 今天这一节我们主要来讲讲下面这几点: 1.什么是钩子(HOOK)函数 2.Vue的生命周期 3.Vue的相关指令 4.Vue的调试插件一.什么是钩子函数在我具体介绍Vue的生命周期之前,我先来说说钩子函数。 讲到钩子函数,又...原创 2018-07-03 15:59:06 · 1608 阅读 · 1 评论 -
vue基础教程学习(一)
最近公司在用vue开发项目,所以想要完全掌握,首先就必须扫一遍它的基础用法,然后再深入了解其模块化,组件化的具体内容。如果有小伙伴和我一样,就跟着我一起开始推开vue的大门,一起打开前端的新世界吧。 今天这节主要是讲讲三点: 1.vue(/vjuː/)是什么 2.为什么要学习vue,即vue的优势 3.怎么用vue实现数据的基本绑定一.Vue是什么(What ...原创 2018-07-02 16:50:55 · 4467 阅读 · 0 评论 -
vue的环境搭建
VUE的环境搭建主要分三步走:一.安装node 二.配置vue环境 三.安装vue cli脚手架一.去https://nodejs.org/en/下载最新版本的Node,然后一步安装,记得选择添加到路径,直到最后的完成检测是否成功 node -v 二.使用淘宝镜像npm install -g cnpm -registry = https://registry.npm...原创 2018-04-18 16:03:56 · 241 阅读 · 0 评论 -
H5 背景音乐自动播放(兼容IOS和Android)
首先看下效果图原创 2019-02-24 13:08:36 · 6553 阅读 · 1 评论 -
H5页面vue让网页长按保存为图片
思路如下:1.图片长按可以弹出是否保存为图片2.想要让网页转为图片,使用html2Canvas3.想要让网页长按可以弹出为是否保存为图片,就让图片覆盖在整个网页的最上方4.想要让网页里的二维码,一起生成到图片中,二维码的生成请使用QRCode5.想要让网页显示的内容和最后生成的图片不一致,就把内容copy两次,显示的内容放在下方,保存为图片的内容放在上方,上方的内容隐藏6.网页没有滚...原创 2019-02-24 11:09:43 · 5565 阅读 · 0 评论 -
搭建Gulp环境的那些事儿
最近了解了一些关于自动化构建工具的一些内容,比较常见的就属grunt,gulp,webpack,当然各个公司大佬们也有用自己公司的的构建工具。百度科普了一下,对比了一下上文所说的那三个工具,grunt/gulp是一种能够优化前端的开发流程工具,而webpack是一种模块化的解决方案。既然如此,那我就不急,慢慢开始。废话不多说,今天就来讲讲gulp安装的那点小事。首先去其官网下载NodeJs原创 2017-07-25 08:41:09 · 1059 阅读 · 0 评论 -
前端面试题-----有点意思(二)
一.JQuery 中 $.fn.extend 函数的实现(实现核心代码即可)//关键:修正参数deep、target、源对象的起始下标 => 逐个遍历源对象 jQuery.extend = jQuery.fn.extend = function() { /** * options: 指向某一个源对象 * name: 代表某个源对象里的某个属性名 ...原创 2018-06-19 15:50:26 · 221 阅读 · 0 评论 -
前端面试题---有点意思
1.对于http://a.com?q=1 ,window.location.search返回的是 ? 答案:?q=1 2.为确保所有h3元素不会放在左浮动元素的右边,可声明 h3? h3{clear:both;}3.尝试将URL中参数转化为一个json对象,如“http://a.com?a=1&b=2&c=3”转化为{a:1,b:2,c:3} function ...原创 2018-06-15 17:55:45 · 455 阅读 · 1 评论 -
前端面试套路之HTML,CSS,JS(二)
HTML相关相关: 1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 3.介绍一下你对浏览器内核的理解? 4.常见的浏览器内核有哪些? 5.HTML5的离线储存怎么使用,工作原理能不能解释一下? 6.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢? 7.iframe有那些缺点? 8.Lab...原创 2018-05-31 14:00:11 · 283 阅读 · 1 评论 -
前端面试套路之性能,测试,网络
测试相关问题: 1.对代码进行测试的有什么优缺点? 2.你会用什么工具测试你的代码功能? 3.单元测试与功能/集成测试的区别是什么? 4.代码风格 linting 工具的作用是什么?效能相关问题: 1.你会用什么工具来查找代码中的性能问题? 2.你会用什么方式来增强网站的页面滚动效能? 3.请解释 layout、painting 和 compositing 的区别。网络相关问...原创 2018-05-29 11:40:34 · 634 阅读 · 0 评论 -
前端面试题之二
HTML相关问题: 1.doctype(文档类型) 的作用是什么? 2.浏览器标准模式 (standards mode) 、几乎标准模式(almost standards mode)和怪异模式 (quirks mode) 之间的区别是什么? 3.HTML 和 XHTML 有什么区别? 4.如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗? 5.如果网页内容需要...原创 2018-05-29 11:28:06 · 391 阅读 · 2 评论 -
前端面试题之一
1.你在昨天/本周学到了什么? 2.编写代码的哪些方面能够使你兴奋或感兴趣?3.你最近遇到 过什么技术挑战? 4.是在制作一个网页应用或网站的过程中,你是如何考虑其UI,安全性,高性能,SEO,可维护性及技术因素的? 5.清谈谈你喜欢的开发环境? 6.你最熟悉哪一套版本控制系统? 7.你能描述当你制作一个网页的工作流程吗? 8.假若你有5个不同的样式文件,...原创 2018-05-29 10:36:59 · 679 阅读 · 0 评论 -
前端js技巧(三)
一.switch/case中的case条件,还可以这样写function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age ...原创 2018-06-29 14:55:26 · 1236 阅读 · 1 评论 -
前端js技巧(二)
一.获取指定范围内的随机数这个功能在生成测试用的假数据时特别有用var max = 100;var min = 50;var x = Math.floor(Math.random() * (max - min + 1)) + min;console.log(x); 二.生成从0到指定值的数字数组var numbersArray = [];var max =...原创 2018-06-29 11:17:41 · 1296 阅读 · 1 评论 -
前端js技巧(一)
很多前端只会谢谢页面,一让他们接触js,就非常害怕。 我想有的东西,你越害怕,就越要了解它,读懂它,就会发现它还有你不知道的那一面美好。 好的,直入主题,直接说说js相关的一些奇淫技巧。 一.运算相关console.log('10.567890'|0); //10console.log('10.567890'^0); //10console.log(-2.2345...原创 2018-06-28 17:58:10 · 3345 阅读 · 2 评论 -
简单的css效果原理(二)之导航栏的全部服务分类
废话不多说,直接看效果:今天主要是想讲一下这个全部服务分类的列表及鼠标移入后的效果的实现,但最重要的其实是这个页面html结构以及css的实现。本着把项目各功能做到最优,复用性更强的原则,我们来分析一下它js后面要实现的功能,然后我们通过js要实现的功能去判断怎样让html的代码结构可以让js更流利。首先,我们要考虑到的是这个全部服务分类下面的这些分类在其他页面是隐藏的,只有当鼠标...原创 2017-09-20 10:18:28 · 1904 阅读 · 0 评论 -
简单的css效果原理(一)之边框变色
项目中经常会遇到一些重复的问题,搞清原理,随时mark的话,下次再遇到同样的问题就不会那么束手无策了。今天我想说的是鼠标移动到盒子上,盒子的边框自动变色的问题,如果有间距的话,不能称为一个点,但是没有间距的话,存在-1px的情况下,那么这里就能用到这样一个小技巧了。先看下要实现的效果,如图所示:我想看到这个图应该就能够臆想出来要实现的效果了。这里最关键的是鼠标移入怎么能让我移入的这个盒原创 2017-09-19 11:12:35 · 1994 阅读 · 0 评论 -
前端奇淫技巧(二)之上下左右居中
当我们做弹窗的时候,避免不了的就是要做一个上下左右都居中的盒子,公司里面现在内用的方法我觉得并不够简单,适应性也不够强。偶尔有一次看知乎的时候发现一个更简单的方法,并且适应性也更强,个人觉得很好用,这里mark一下,同时也分享给大家。先来说一下公司里面的用法,直接上代码,这里只贴中间要居中的css了,其他的不多说:.container{position:absolute;top:50%;...原创 2017-09-15 16:22:10 · 927 阅读 · 0 评论 -
前端奇淫技巧(一)之前端遇到需要数据遍历的如何处理
前端经常会遇到需要数据遍历的盒子,即内容结构相同的Html代码,很多小伙伴都是直接copy,但是很容易出现最后因为复制粘贴的问题,而且如果需要修改,就要把全部删掉,重新复制一遍,很麻烦,所以为了解决这个问题,让我们能够一劳永逸,于是我决定写一个脚本去解决这个问题。如果有小伙伴觉得这个方法可行的,大可以在自己的项目中用起来。真的可以节省很多的时间和精力。废话不想多说,先直接贴代码,代码如下所示:...原创 2017-09-15 16:04:35 · 3009 阅读 · 0 评论 -
前端必须要了解的浏览器常识
一.首先来说说浏览器的构成(用户界面,浏览器引擎,渲染引擎,js解释器,数据存储,网络,UI后端) 用户界面:包括地址栏,后退/前进按钮,书签目录等 浏览器引擎:用来查询和操作渲染引擎的接口 渲染引擎:用来显示请求的内容,eg.如果请求的内容为html,就负责解析html及 css,并将解析后的结果显示出来 网络:用来完成网络调用,eg.http请求,有与平台无关的接口,可以在...原创 2018-05-18 10:22:21 · 1623 阅读 · 0 评论 -
浏览器相关的扩展
作为一个有经验的前端来说,能够快速锁定问题的原因并解决是非常重要的。合理的使用一些工具,一些浏览器扩展绝对可以让你三秒钟高大上。想要浏览器装扩展,最重要的就是可以登录你的google账号。 这篇文章暂且不讲登录google账号的方式,如果想要了解的,可以看我的此分类的下一篇文章。好的,步入正题,有哪些好用的扩展呢? 对于前端来说,我推荐一些常用的扩展:一.用于管理你的扩展的扩展: 1...原创 2018-05-23 13:56:35 · 679 阅读 · 0 评论