叶才鑫-CSDN博客

原创前端工程师必备之----移动端适配方案 hotcss

1.下载hotcss官网：http://imochen.github.io/hotcss/GitHub：https://github.com/imochen/hotcss下载hotcss，在main.js中导入：import '@/hotcss.js'全局样式文件中：$designWidth: 750; //如设计图是750@function px2rem($px) { @return $px*320/$designWidth/20+rem;}使用（不需要加单位）：...

2020-07-02 16:48:21 620

原创前端工程师必备之----yarn

过去一般软件包管理器用npm,现在用更高级的yarn；Yarn的优点：速度快并行安装离线模式安装版本统一更简洁的输出Yarn和npm命令对比npm yarn npm install yarn npm install react --save yarn add react npm uninstall react --save yarn remove react npm install react --save-dev yarn ad

2020-06-15 11:08:03 770

原创 Edge/Chrome 83新表单控件启用黑色边框给用户和开发者带来困扰

伴随着Edge/Chrome 83对表单控件的更新，这些基于Chromium的浏览器目前在访问大多数网站下拉菜单中的焦点输入文本字段和已选定的选项都会显示黑色边框。通常情况下，Chrome浏览器在聚焦的时候、以及等表单字段会显示蓝色或者橙色边框。不过现在Chrome显示了黑色的边框，给用户带来了视觉上的困扰。这个问题也让开发者比较苦恼，因为Chrome浏览器并没有遵守谷歌自己设定的CSS规则。Microsoft Edge和Google Chrome团队合作，为开源浏览器Chromium带来了更现代

2020-06-10 14:06:53 1406 1

原创前端工程师必备之----vue webpack 打包优化

使用分析工具：安装：npm install --save-dev webpack-bundle-analyzer在webpack引入：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;newBundleAnalyzerPlugin({analyzerMode:'server',analyzerHost:'127.0...

2020-05-14 10:04:33 205

原创前端工程师必备之----内存泄露

什么是内存内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁。计算机中所有程序的运行都是在内存中进行的，因此内存的性能对计算机的影响非常大。造成内存泄露的原理： new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为nul...

2019-09-26 18:31:13 248

原创 input 正则限制只能输入数字且最多只有个小数点并保留2位小数

<inputtype="text"name="je"onkeyup="clearNoNum(this)"/>functionclearNoNum(obj){obj.value=obj.value.replace(/[^\d.]/g,"");//清除“数字”和“.”以外的字符obj.value=obj.value.rep...

2019-07-25 15:33:28 3806

原创前端工程师必备之----GIT工具 Sourcetree

1. SourceTree是什么拥有可视化界面的项目版本控制软件，适用于git项目管理 window、mac可用2.下载与安装百度看教程即可3.拉取项目clone : http或者ssh地址都可以即可克隆下项目4.提交待补充5.解决冲突待补充...

2019-04-17 10:08:51 310

原创前端工程师必备之----mpvue小程序框架

1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载nodejs并安装。然后打开命令行工具：# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源$ npm set registry https:...

2019-04-08 15:04:48 189

原创前端工程师必备之----npm发包

一、准备工作1、将npm包的镜像换成https://www.npmjs.com/npm config set registry https://www.npmjs.com/因为这个官方npm加载速度慢，之后再切换回来npm config set registryhttps://registry.npm.taobao.org2、自己电脑不是adminstrator权限，请...

2019-03-28 16:48:31 1185

原创前端工程师必备之----vue项目搭建

1.vue项目搭建第一步安装脚手架：cnpm install -g vue-cli 第二步创建vue-cli工程命令:vue init webpack第三步安装依赖：cnpm install 最后需要执行命令： npm run dev 来启动项目...

2019-03-28 10:39:40 282 1

原创前端工程师必备之----基础js知识

jQuery中的text()、html()和val()的区别text（）设置或者获取所选元素的文本内容；、html（）设置或者获取所选元素的内容（包括html标记）、val();设置或者获取表单字段的值（前提是表单设置了value属性）；JavaScript 语句标识符Break 用户跳出循环、return跳出函数、while 当条件为true执行语句块JavaScript数据类型...

2019-03-18 17:18:56 192

原创前端工程师必备之----webpack

概念webpack是一个现代 JavaScript 应用程序的静态模块打包器入口入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为bundles的文件中，我们将在下一章节详细讨论这个过程。可以通过在...

2019-03-18 17:03:32 302

原创前端工程师必备之----typescript

1.类型注解* @：类型名* @：anylet name: string = "bob";let age: number = 37;2.数字枚举首先我们看看数字枚举，如果你使用过其它编程语言应该会很熟悉。enum Direction { Up = 1, Down, Left, Right}如上，我们定义了一个数字枚举，U...

2019-03-18 15:31:09 117

原创前端工程师必备之----ES6

1.let 和 const 命令let 类似于var 但具有块级作用域，const不允许重复声明就是固定变量。2.解构赋值基本数组 let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3剩余运算符对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中 // a ...

2019-03-18 15:11:58 150

原创前端工程师必备之----LESS

一、为什么要用less？作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初学者第一印象就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起，在 Web 发展的这...

2019-02-15 14:16:59 645

原创前端工程师必备之----百度地图

1.初始化地图，并设置地图中心点var map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别当然也可以根据城市名称设置地图的中心点：map.centerAndZoom("上海",15); ...

2018-10-25 11:08:06 5484 1

原创 ES6 扩展运算符... 与rest

// ...arr1 = [1,2,3]arr2 = [4,5,6]arr3 = [7,8,9] arr4 = [...arr1, ...arr2, ...arr3] //[1,2,3,4,5,6,7,8,9] 用于数组合并console.log(arr4);// rest （相当于...的逆运算）let [a,...rest] = [1,2,3,4];console.l...

2018-09-11 16:38:13 322

原创使用fly post请求传递参数不成功问题解决

使用qs库来格式化数据npm install qs --save 在main.js中，我们引入qs库// post请求是格式化数据import qs from 'qs';Vue.prototype.$qs = qs;进行post请求 this.$axios .post( "/app/user/login.do", ...

2018-09-04 11:52:39 5445

原创使用mpvue开发小程序如何定义全局变量

我们创建好mpvue项目之后，找到src/main.js打开在后面添加一行代码（注意：不能在const app = new Vue(App) 之前添加）Vue.prototype.globalData = getApp().globalData这行代码的意思就是，将小程序的全局变量，挂载在Vue的原型上，这样我们在不同的页面就都可以获取到全局数据了不同页面使用 this.glob...

2018-09-03 14:13:40 2711 3

原创 vue中axios的封装

第一步还是先下载axioscnpm install axios -S第二步建立一个htttp.jsimport axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦...

2018-08-17 17:37:22 265

原创事件委托在哪些场景中使用，该如何使用，及其实现原理？

原理事件的冒泡；通过父元素监听子元素触发的事件。 DOM的遍历：父元素拥有多个子元素，当一个事件触发，那么就触发了某一类型的元素（拥有相同CLASS）使用场景很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件1 2为什么要使用绑定事件太多，浏览器占用内存变大，严重影响性能...

2018-08-13 10:54:30 1123

原创 JS判断PC还是手机

function IsPC(){ var userAgentInfo = navigator.userAgent; console.log(userAgentInfo) var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var

2018-08-02 14:40:51 959

原创 MongoDB由于目标计算机积极拒绝

MongoDB由于目标计算机积极拒绝，无法连接遇到这个问题的时候，可以通过以下步骤解决：1.打开Mongo安装包：进入Mongo下的data文件夹下的db文件夹，找到Mongod.lock，删除。2.在命令行中输入：mongod.exe --dbpath c:\Mongo\data\db如果出现错误：dbexit: rc:100（这是存储引擎出现错误），需要输入以下命令：mongod...

2018-07-17 11:50:40 946

原创从零构建vue项目

第一部分：安装1.安装node.js（官网自行下载） 2.安装cnpm （$ npm install -g cnpm --registry=https://registry.npm.taobao.org）3.vue安装（$ cnpm install vue）4.安装vue-cli脚手架构建工具（$ cnpm install --global vue-cli）...

2018-07-09 17:17:49 334

原创 vue配置element-ui问题

在学习vue期间，刚开始配置element-ui时总是遇到各种各样的问题，记录一下解决问题的一些大致思路，方便以后做项目，也希望对别人有所帮助。1：vue init webpack-simple element-ui2.cd element-ui（打开生成的vue项目）3.cnpm install （不用npm是个人习惯，防止产生错误）4.在这里我用的是webpack-simple 所以要先配置一...

2018-06-26 17:07:06 305

原创微信小程序 scroll-view横向滚动

看到有人将scroll-top属性用在了scroll-x=true的scroll-view组件上，问题显而易见 scroll-top=”10”设置竖向滚动条位置 scroll-x=”true” 设置组件横向滚动自己写了一个横向滚动的scroll-view scroll-x=true的组件，但是死活不滚动<scroll-view scroll-x="true" style="backgrou...

2018-06-14 10:41:25 360

原创小程序实现城市列表的选择

微信小程序实战—实现城市列表的选择实现效果预览实现功能简介城市的选择按中文/拼音/首字母条件搜索按首字字母快速定位到城市位置目录结构主要代码app.jsApp({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' }})app.json{ "pages":[ "pages/index/index",...

2018-06-14 10:40:44 7304 4

原创微信小程序常见问题

微信小程序页面跳转无效？1.跳转的位置位于TabBar中，要使用wx.switchTab 来跳转界面，不然会和wx.navigateTo冲突而失效；2.跳转的位置不位于TabBar中，要使用reLaunch来跳转页面，不然会和wx.navigateTo冲突而失效；3.那为什么要用navigateTo？因为有可以返回；小技巧：新建模块时要一个个新建wxss wxml js json未免过于麻烦解决...

2018-06-14 10:38:45 277

原创小程序生命周期函数

Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显...

2018-06-14 10:38:19 1899

原创图片懒加载技术

1.引入JQ和lazy.js2.src是默认图片地址 data-original是真实图片地址3.通过js执行函数

2018-04-11 15:06:11 112

原创日常BUG整理

PC:input属性为number，maxlength不比作用？解放方案：<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" /> mobile:按钮到iOS变成自带样式：1.ios按钮变灰色,给按钮加样式:-webkit-appearance: none;2.有圆角button{ ...

2018-02-24 11:06:14 257

原创 html页面里放视频支持的格式

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。格式 IE Firefox Opera Chrome SafariOgg No 3.5+ 10.5+ 5.0+ NoMPEG4 9.0+ No No 5.0+

2018-01-31 10:17:25 8424

原创移动端页面通过js自动适配

var phoneWidth = parseInt(window.screen.width),phoneScale = phoneWidth/750;document.write('<meta name="viewport" content="width=750, initial-scale=1, minimum-scale = '+phoneScale+', maximum-scal

2018-01-29 11:34:54 775

原创 Vue使用less

在建好的vue项目中：第一步：安装less依赖，npm install less less-loader --save第二步：修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{test: /\.less$/,loader: "style-loader!css-loader!less-load

2018-01-25 16:06:33 5543

原创 vue项目使用element UI

使用 vue-cli 搭建vue项目就不说了下载依赖：npm i element-ui -S在 main.js 中写入以下内容：import ElementUI from'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

2018-01-24 11:08:41 926

原创 vue项目中使用jq 和bootstrap

vue-cli快速构建项目:npm install -g vue-cli 全局安装vue-cli vue initwebpack ycx 生成项目名为ycx的的项目模板，ycx自定义 npm install 先cd到ycx项目中

2018-01-24 09:48:08 1639

原创 SEO

一、内部优化　　（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化　　（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接　　（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)二、外部优化　　（1）外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相

2018-01-16 11:46:39 563

原创 require 使用

requir.js使用方法： html引入require.js：script src="lib/js/require.js" data-main="js/main">/script>在main.js 配置：require.config({baseUrl: 'lib/js',});require(['jquery','common','artt

2017-12-30 10:38:21 333

原创 FastClick消除点击延时提高程序的运行效率

fastclick.js

2017-12-30 09:07:57 568

原创 bootstrap 使用 glyphicon图标

到bootstrap官网下载完整版 fonts 文件夹有下列这些文件：glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff相关的 CSS 规则写在 di

2017-12-29 11:35:24 5735