kirinlau的专栏

项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。

基于浏览器历史栈判断是否可以“前进”和“后退”

近期我接过了之前部门内部的一个开源包的的运维工作，业余时间解决一下开发者提的问题，所以又熟悉了一遍npm包的发布流程，大致如下：去npm官网注册一个账号package的制作：1.创建项目目录2.打开命令行窗口在新建的项目目录下执行npm init 命令后， 按照要求填写package相关信息npm login遇到如下报错的话npm ERR! network request to http://registry.cnpmjs.org/-/v1/login failed, reason

前几天准备回去架构组来着，但是那边新来了个妹子在搞，新项目有还没启动，小程序一直有项目，又没人，一直在小程序的feature-team中，这不又来个几个需求。其中一个新需求是需要做一个协议更新的功能，即老用户登录后，接口检查一遍协议是否已更新，需要重新同意协议，否则直接退出小程序。查了一下没有全局组件的说法，问了隔壁老王，老徐有什么比较好的方法，都丢下一句话，写个component然后挨个页面引入，在每个页面做一遍标签引入，然后传值给子组件，子组件observe即可。按照常规实现我感觉这个改动还挺大的

接上个博客的，文本跑马灯的animate实现上个版本是根据setinterval定时器修改位置实现动画效果，体验还行，但是太耗资源，如果想体验流畅那么频率就很小，步长也不能太长，但是会很慢，由于频率高，一秒钟执行三四十次，太耗费资源，于是我这边就使用小程序的animate做了另一种实现主要思路：根据文本的长度设定过渡时间，动画结束后再次滚动即可，直接看代码wxml<view class='marquee_container'> <view id="marquee_wrap" c

想必大家都遇到了在vue项目中更新了data数据后视图并不会更新的问题。 我遇到这个主要是在一个weex的UI组件库项目中，因为组件库一部分组件是使用vue在weex下实现的，一部分组件是原生实现的，即不需要导入直接传值使用，移动端原生app会自动解析数据渲染，我这里是使用了原生的组件做了一个示例修改了数据后原生组件视图并没有更新，主要功能是根据状态码判断是否显示当前组件，define-view为自定义组件：伪代码如下：<div v-if="chartIsShow" v-if="statusCo

项目中要把生成.txt文本文件,网上查了一下，貌似由于浏览器差异有的不能直接对记事本进行操作，我这里试了一下都是okay的。直接贴上：function fakeClick(obj) { var ev = document.createEvent(&quot;MouseEvents&quot;); ev.initMouseEvent(&quot;click&quot;, true, false, window, 0, 0,...

外部的css样式为：#imageArea{ width: 200px; height: 300px; background-color: #eee !important;}通过 以下代码来修改其背景色是无效的$("#imageArea").css("background-color", "#444444")$("#imageArea").css("backgro...

项目中有遇到点击按钮出dialog，里面有申请的form表单，需要在其中的select下拉框带出当前点击的内容，类似于以下：本以为一个很简单的东西，但是折腾了半天，网上查了一下，找到以下方法：$("#selectShipperCode").find("option[text="+domtext+"]").attr("selected",true);事实证明没什么用，点了无效，自己摸索了半...

项目中又遇到一个小问题，测试完了都没发现~~ （醉）就是在账户添加时有两项超长的select下拉框的option列表是从服务端获取的，修改时的策略是直接请求数据构造成两个option赋值给两个select，然后给select设置value选中即可，而且这两项select为不可修改项（置灰项）。没毛病…一只是okay的，直到有个测试er说一次返回这么多东西，请求响应有延迟，建议把下拉改为可搜索的...

小程序迭代时，需要加入一个图片裁剪上传并识别的功能，在PC端调好之后，在移动端不能走通，报了一个奇怪的错误，大概是“wxfile://***”, 翻译过来的意思就是 wx.downloadFile不支持此协议，看了一下发现wx.chooseImage在pc端获取到的地址是http地址，而在移动端是wxfile开头的本地地址，wx.downloadFile只能下载https的资源。而我在开发时...

console.log：向web开发控制台打印一条消息，常用来在开发时调试分析。有时在开发时，需要打印一些对象信息，但发布时却忘记去掉console.log语句，这可能造成内存泄露。在传递给console.log的对象是不能被垃圾回收 ♻️，因为在代码运行之后需要在开发工具能查看对象信息。所以最好不要在生产环境中console.log任何对象。直接执行以下全局函数即可：//判断配置文件是否开...

实现思路为当服务端响应的结果告诉你验证码已经发出去了，做一个60秒的倒计时，禁止操作即可，60秒倒计时完毕后clear掉定时器即可。简单粗暴，直接code：var time = 60var timer = setInterval(function(){ if(time<1){ clearInterval(timer) $(".js-bindcard .code-btn")....

el-table默认选中项核心伪代码如下：this.$refs.multipleTable.toggleRowSelection(this.tableData[index],true); //row 选中外面套两层for循环，if判断想要选中的某项值和tableData中某对象的某个值相等即可...

vue项目打包后在production模式下提示图片 ‘404（not found），在dev环境下好好的，打包了就提示这个错误。这是为什么呢，以前第一次使用vue-cli构建项目的的时候只有两个图片文件，当时部署后报错路径问题， 当时的想法就是简单粗暴，直接在build好的文件修改了文件路径，再后来项目中遇到了一大堆静态资源，修改路径显然是不行的，看了一下生成文件大概知道是文件目录改变了，所以引...

在实际工作中经常拿到了一个对象类型的返回值，但是并不知道这个对象内部的属性，或者需要拿到对象的所有属性;ECMA Script5 引入了Object.keys()方法，它返回的是一个所有属性组成的数组，成员是参数对象自身的所有可遍历(enumerable)属性的键名

昨天看到了JS中基本类型互相转换的一些内容，遇到了pareInt()和Number()两种方式，感觉以前只是应用但是对其没有一个系统的了解，去网上大致了解了一下，自己总结了一下：parseInt(), parseInt()方法是把给定的字符串按照指定的进制转换为整型 int类型。 语法为 parseInt(str, radix)，radix参数表示要

将一个图表显示在前端页面上：var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts页面显示的空间//------------------------- begin----------------------------- var myOption = {//

通常我们知道在JS中只有对象才有属性和方法的，比如：var obj = {};obj.name = "jackie";console.log(obj.name);那基本类型有没有属性和方法呢？var num1 = 9527;var num2 = 32.54879;console.log(num1.toExponential(3)); // 9.527e+3 指数计数法console

js中的数据类型分为两种：基本类型和引用类型。 基本类型：number，string，boolean，undefined，null。 引用类型：object， function， array。 基本类型是存放在栈中的，而引用类型时存放在堆中的（可以理解为使用引用类型时，对引用类型的复制只是在栈中开辟一块内存存放指向了堆内存中的引用类型的地址，并没有真正的复制引用对象）。基本类型的复制： 基本

在javascript中遍历数组的最常见的方法就是用for循环。有时候当被问到遍历数组方法时可能不知道怎么说好，毕竟只用过一种最基础的方法，这里简单的介绍几种遍历方法。1. For循环 最常见，最简单，最方便顺手的一种数组遍历，但效率一般。 代码如下：for (var i = 0; i < Things.length; i++) { Things[i]

1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。好处呢：1，提高性能。我们可以看一个例子：需要触发每个li来改变他们的背景颜色。ul id="ul"> l

一、 跨域请求的含义浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器，分别监听 3000、 3001 端

在用到js原生xmlhttprequest 或者 ajax做数据提交时，我们需要给地址url后面拼接参数或者直接post发送，那么如果表单比较庞大时如果用逐个获取就比较耗时费力了，怎么获取并且传值，下面采用遍历表单中的元素然后以键值对的方式获取元素value的方法实现。function formValue(formId){ var formObj = document.getEl

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包，其在编程中作为一种通用的数据格式带给我们极大的方便。JSON中，有两种结构：对象和数组。object格式，用“｛｝”

在做web前端开发时，经常会遇到pc端和移动端的事件触发，显示内容以及兼容问题或者优雅渐进、兼容降级等问题，需要做一些判断，下面是一个比较全的判断方式：function goPAGE(){ if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|M

一直都没太明白apply()与call()的具体使用原理，今日闲来无事，决定好好研究一番。　　JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：/*apply()方法*/function.apply(thisObj[, argArray])/*call()方法*/function.call(thisObj[, arg1[, ar

由于业务需求需要做一个可视化的展示Demo，这个Demo需要前后端的共同支撑，所以思路大致是：首先我们想到的是用ajax动态请求服务端获取到json文件后，然后将其解析为可以直接使用的数据，最后把这些数据更新到Echarts中去。 简单的代码实现如下：HTML：<div id="myId"><div/>var myChart = echarts.init(document.getElementBy

数据解析遇到到一个小问题，json格式的数据多层嵌套， ex：{&amp;amp;quot;data&amp;amp;quot;:[ { &amp;amp;quot;刑事&amp;amp;quot;:[4,0,0,0,0,0,0,0,0,0,0,0], &amp;amp;quot;火灾&amp;amp;quot;:[0,0,0,0,0,0,0,0,0,0,0,0], &amp;amp;quot

MapJavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。Map类似Object，不过可以使用其他类型作为其键值。var m = n...