MoLvSHan的博客_CSDN博客-功能,学习,less领域博主

原创兼容性问题整理（二）

记被IE浏览器教做人的一天1.色值格式IE浏览器不识别AHEX和HEXA格式，支持HEX、RGBA、HSLA格式2.事件DOM参数火狐浏览器事件DOM没有path属性3.location的兼容性IE浏览器的location对象没有origin属性，得使用protocol和host属性自己拼4.element-ui中table组件的宽度IE浏览器中，table宽度有时会出现无法自适应的情况，原因暂时还不清楚，但是可以通过设置table组件的data参数来解决，我们通常习惯会设置data为一.

2020-07-27 17:23:31 17

原创兼容问题整理（一）

IE10代码块中，函数声明提前的兼容问题var obj = {bol: true}function fun() { if (obj.bol) { time(callback) function callback() { console.log('callback1') } } else { time(callback) function callback() {

2020-06-29 13:29:17 38

原创 echarts使用方法总结
原力计划

关于数据可视化的开发，在第三方库的帮助下，从来没觉得复杂，但是一直都觉得颇为繁琐。恰好前段时间产品经理那边安排了一个需求，粗略一看很简单，实际上手的时候，有很多卡壳需要研究的地方。目前，需求已开发完毕，特此做个总结。折线图或者柱状图坐标系中展示固定数量数据主要设置option.dataZoom属性，此属性主要功能是控制区域缩放，要实现上述需求，只需要禁止缩放并且保持可以鼠标或者滚轮拖动即可，...

2020-05-06 15:51:08 175

原创 webpack常用loader和plugin总结
原力计划

webpack常用loader和plugin总结loaderstyle-loader & css-loaderless-loaderpostcss-loaderfile-loader & url-loaderbabel-loader & @babel/preset-env & @babel/corebabel-polyfillpluginhtml-webpack-p...

2020-04-23 11:14:42 211

原创 javascript之手写bind函数

简单粗暴，直接上代码Function.prototype.myBind = function() { const self = this const context = [].shift.call(arguments) const args = [].slice.call(arguments) self.apply(context, args)}调用方法如下：function g...

2020-03-07 00:32:25 39

原创 javascript常用函数之防抖和节流

节流(throttle)和防抖(debounce)防抖当持续触发事件时，一段时间内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前又一次触发了事件，就重新开始延时。function debounce(fn, wait) { let timeout = null; return function() { if (timeout !== null...

2020-03-06 19:05:19 46

原创 JavaScript 之prototype与继承
原力计划

prototype 每个构造函数都有一个prototype属性，这个属性就是这个构造函数的原型对象。构造函数实例所共享的属性和方法都存在这个原型对象上。继承原型链继承基本原理就是让构造函数A的原型对象等于另一个构造函数B的实例，那么A便继承了Bfunction Parent() { this.role = 'parent'}function Children() { ...

2020-03-05 01:57:17 100

原创 node的全局变量整理

__filename __filename表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径，且和命令行参数所指定的文件名不一定相同。如果是在模块中，返回的就是模块的路径。// main.jsconsole.log(__filename) // /web/com/runoob/nodejs/main.js__dirname 表示当前执行脚本所在的目录// main....

2020-02-25 18:11:50 89

原创解决PhantomJs安装失败的问题

公司最近要迁移前端测试服务器，在迁移过程中，发现了一个PhantomJs的问题。配置文件中有这个依赖包，但是在本地下载依赖的时候没有问题，但是，在push代码以后，在测试服务器上下载依赖的过程中，总是报phantoms安装失败报错信息如下:error /***/node_modules/phantomjs-prebuilt: Command failed.Exit code: 1Comma...

2019-08-16 13:52:33 1949

原创抽离不同项目的node_modules到一个项目外的公共目录

问题问题描述：因工作业务关系，需要将各个前端项目的node_modules抽离到一个公共路径思路：有两个修改NODE_PATH，然后全局安装所有依赖使用软链接遇到的问题：搞懂系统的环境变量以及node的模块加载机制使用node运行shell脚本，或直接执行shell命令搞懂npm以及yarn的相关命令以及相应的包管理机制软链接下连续使用两次npm install 会有问...

2019-08-05 15:05:59 2503

原创 ES6学习（六）——Set和Map数据结构

SetMapSetSet结构是ES6提供的新数据格式，类似于数组，但是没有重复值Set结构的实例属性属性名描述constructor构造函数，默认就是Set函数size返回Set实例的成员总数Set结构的实例方法方法名参数描述addvalue添加某个值，返回 Set 结构本身deletevalue删除某个值...

2019-05-27 14:43:47 116

原创钉钉小程序踩坑

钉钉开发者平台创建好的应用不能删除钉钉小程序IDE快捷键渣的一批父组件无法调用子组件方法，所以开发自定义组件时，如果在子组件中有处理数据的逻辑，那么一定要在父子组件之间留一个沟通桥梁使页面可以触发子组件的生命周期钩子dd.navigateBack方法返回页面时，会触发页面的onShow钩子，但不会触发onLoad钩子各个单独页面的json文件的defaultTitle配置不生效开发页面...

2019-05-27 13:49:25 3312 5

原创 ES6学习（五）——数组的扩展

扩展运算符Array.from()Array.of()数组实例的 copyWithin()数组实例的 find() 和 findIndex()数组实例的fill()数组实例的entries(),keys(),values()数组实例的includes()数组实例的flat(),flatMap()数组的空位1.扩展运算符扩展运算符...将一个数组转换成逗号分隔的有序数列。...

2019-04-18 15:02:22 53

原创 ES6学习（四）——函数的扩展

函数参数的默认值基本用法function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello注意参数变量是默认声明的，所以不能用let或const再次声明，否则会...

2019-04-17 16:33:17 39

原创 ES6学习（三）——字符串的扩展

列举常用字符串方法如下includes(),startWith(),endsWith()这三个方法返回的都是布尔值，都接受两个参数，第一个参数是字符串；第二个参数是数字，表示开始搜索的位置，但是endsWith()方法的第二个参数表示前n个字符includes()：表示是否找到了字符串startWith()：表示参数字符串是否在原字符串的头部endsWith()：表示参数字符串...

2019-04-04 13:18:03 52

原创 vue-cli项目配置多页面

思路首先要修改项目目录结构，然后修改webpack的entry和html-webpack-plugin插件如上图所示，src/page是我的目录结构，activity和index是需要构建的两个单独的页面，page目录下的每个子目录都需要一个入口文件（main.js），一个html模板（index.html）和一个vue文件（index.vue）entry的修改vue项目的entry配置...

2019-01-28 15:02:32 649

原创 promise用法

Promise用法此篇文章主要参考大白话讲解Promise一、基础用法new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000);});在上面的代码中，首先执行了一个...

2018-10-30 15:29:36 477

原创工作总结——H5站重构

公司移动端项目之前比较乱，主要以后端集成页面为主，后来开始搞前后端分离，技术栈是Vue全家桶，不过因为时间关系，并没有进行全站重构，导致公司移动端项目出现了既包含集成页面，又包含前后端分离页面，页面之间的逻辑也很凌乱，有集成的老页面和分离的新页面之间的逻辑交互，也有app客户端和老页面的交互，也有分离页面和app客户端的交互。不堪忍受之下，启动了全站重构的项目。一、需求阶段为了解决移动端页...

2018-08-19 11:38:37 680

原创获取地址栏参数

采用es6写法，单独写在js文件里，通过import引用export function getUrlParams() { let str = location.href; let num = str.indexOf('?'); const param = {}; str = str.substr(num + 1); const arr = str.split('&amp;...

2018-04-08 18:18:37 641

原创时间格式转化

采用es6写法，单独写在js文件里，通过import引用export function formatDateTime(date) { const y = date.getFullYear(); let m = date.getMonth() + 1; m = m &lt; 10 ? '0' + m : m; let d = date.getDate(); d = d &l...

2018-04-08 18:12:56 126

原创 vue——组件之elementTable组件再封装

首先先上代码，下面是一个vue类型的文件，代码如下 <el-table v-loading="table.loading" :show-summary="table.hasShowSummary" :summary-method="table.getSummaries" ref="TlRlTable"

2018-04-08 11:43:43 14475 19

原创 git常用命令

开始用git管理项目（初始化git）在项目所在目录执行 git init从现有仓库克隆项目 git clone [url] [name] // 第二个参数是自定义项目目录名称，可不传检查当前文件状态 git status跟踪文件 git add &lt;filename&gt; // * 跟踪所有修改文件，提交更新 git commit -m ''...

2018-03-16 11:45:41 122

原创 ES6学习（二）——变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构一、数组解构let [x,y] = [1,2]上面这行代码是最基本的数组解构。本质上这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。let [foo, [[bar], baz]] = [1, [[2], 3]]foo // 1bar // 2baz // 3let [ , ,

2017-12-16 09:50:22 171

原创 ES6学习（一）——let和const命令

要想学习let和const命令，首先需要了解什么是块级作用域ES5只有全局作用域和函数作用域，没有块级作用域，这就导致了很多不合理的场景eg1、内层变量覆盖外层变量var tmp = new Date();function f() { console.log(tmp); if(false) { var tmp = 'hello world'; }}f() // un...

2017-12-10 21:15:44 203

原创移动端验证码效果的实现

效果如下图所示，代码如下，html代码： &lt;div class="numberBox clearfix" onclick="judgeval();"&gt; &lt;input type="tel" id="userinfo" index='0' maxlength="1" onfocus="focusinput(this);" /&a

2017-11-15 11:01:44 1387

原创 less学习（十）—循环与合并

循环在 Less 中，mixin 可以被自己调用。当这种递归形式的 mixin 与 Guard Expressions 和 Pattern Matching 一起联合使用的话，就可以创造出各种迭代/循环结构。普通案例.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration

2017-11-14 15:19:36 568

原创 less学习（九）—关于Guards

Less Mixin Guards如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。下面列出了不同类型的mixins g

2017-11-14 14:57:05 289

原创 less学习（八）— 关于导入

导入指令@import 伪指令用于在代码中导入文件。它将LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。您可以将 @import 语句放在代码中的任何位置。文件扩展名您可以使用 @import 语句，具体取决于不同的文件扩展名，例如:如果您使用 .css 扩展名，那么它将被视为CSS和 @import 语句保持不变。如果它包含任何其他扩展名，那么它将被视为L

2017-11-14 11:34:39 275

原创 less学习（七）—作为函数使用的Mixin

All variables defined in a mixin are visible and can be used in caller's scope (unless the caller defines its own variable with the same name)（所有在混合里定义的变都是可见的并且可以在调用混合的css规则集里使用，除非这个调用混合的css有它自己的相同名字的

2017-11-09 17:59:08 739

原创 less学习（六）— 关于带参数的Mixin

Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（当使用混合时，可以通过选择器块带变量参数。）.border-radius(@radius) { -webkit-border-radius: @radius; -moz-

2017-11-09 15:41:52 2152

原创 less学习（五）—关于Mixin

今天进入到Mixin（混合）的学习，经过前面几天的学习已经初步掌握了关于变量和关于Extend的一些语法和规则，如果有朋友觉得我写的实在渣的话，可以移步less官方文档自行学习。先上一个基本用法的例子.box1 { color: red;}.box3 { .box1();}编译为：/* line 1, http://localhost/about-less/styles.le

2017-11-08 09:17:22 420

原创 less学习（四）—关于Extend

官方文档是这么介绍Extend的Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references.简单翻译就是Extend是less的伪类选择器，这个伪类选择器会将引用它的选择器与匹配它的选择器合并（英语太渣，不知道翻译的是否准确，下

2017-11-06 15:13:22 300

原创 less学习（三）—关于变量

变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护。1、普通变量用法// Variables@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%);// 用法a,.link { color: @link-color;}a:hover {

2017-11-06 11:28:58 235

原创 less学习（二）—简单基础

一、变量 This is color1@nice-blue: #5b83ad;@light-blue: @nice-blue + #111;.color1 { width: 200px; height: 200px; background-color: @light-blue;}渲染结果为：注意：由于变量只能定义一次，所以其本质就是常量二、混合（Mixin）

2017-11-03 13:58:57 254

原创 less学习（一）—安装使用

官方文档上是这样描述less的Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。本文采取的是客户端用法在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便

2017-11-03 10:32:49 177

转载跨域资源共享 CORS 详解

转载自阮一峰的网络日志CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通...

2017-10-31 09:46:34 184

原创汉字转首字母大写并排序

刚接到上述功能要求时，去找后台要接口，被告知，没有分类接口，只有一个查询所有商家的接口，排序分类要自己做(我有句MMP一定要讲)，没办法，工作还得做以下是代码HML A 航管红木关于汉字转拼音，是网上找的代码，如下var PinYin = { "a": "\u554a\u963f\u9515", "ai": "\u57

2017-10-23 16:20:58 5408

原创 vue踩坑系列——计算属性

先贴源代码 export default { name: 'topImg', data() { return { imgsrc: 'http://imgpb.hmjshop.com/img/sy_banner/App/shangcheng/banner222.png', index: 0 } }, methods: { c

2017-10-17 11:00:06 976

原创 vue踩坑系列——swiper

在vue项目中，引入swiper后，会报下面这个错误Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'项目代码是 {{item.text}} import swipercss from '../../../assets/css/swiper-

2017-10-16 15:19:40 5024

原创 vue踩坑系列——vue-cli的安装

使用vue-cli时的安装步骤1、npm install -g vue-cli（全局安装vue脚手架）2、vue init webpack myProject（初始化项目，myProject是项目文件夹）过程中会询问一些项目相关信息可以一直输入y跳过，不过在第七条ESlint最好输入no（语法验证，容易报错），之后，会出现上图红框部分，根据红框中的提示完成操作即可

2017-10-16 11:53:42 486