JavaScript
关注
分享
扫一扫
JavaScript相关
走在大前端的路上
一个走在大前端路上的程序猿。
展开
-
使用pkg打包nodejs项目并解决本地文件读取问题
使用pkg打包nodejs项目使用pkg对nodejs程序进行打包，能对项目源码和重要文件进行一定的保护，也能提升程序运行的便捷性，使用npm install -g pkg全局安装pkg。这里我的所有代码写在一个js文件（anyAPIcheck.js）中，并包含一些依赖文件：实际上这是一个非常小的项目，项目主体也只有一个js文件，使用pkg可将该项目主体文件及其引用文件打包为一个可执行文件。进入项目根目录，执行命令pkg anyAPIcheck.js 可同时打包windows、Linux及macos原创 2021-01-20 16:02:43 · 8802 阅读 · 1 评论 -
解决某些浏览器（例如谷歌）window.open(url)无效问题
在项目中需要用到预览功能，一开始采用window.open(url)直接打开链接进入预览界面，但是在谷歌浏览器中不生效，网上查了一下相关问题，原因总结有两点：在ajax请求的回调函数中window.open(url)是不生效的（尝试在回调函数外面调用window.open(url)，还是不行，坑）window.open(url)在用户操作事件中才能生效，否则浏览器判定该操作不是用户操作，会阻止窗口弹出。（这个比较靠谱）但是预览的URL是通过ajax请求得到的，倒是可以增加一个预览按钮绑定点击事件原创 2020-12-17 17:05:41 · 7711 阅读 · 1 评论 -
使用ajax或XMLHttpRequest实现文件上传
使用ajax或XMLHttpRequest实现文件上传前言方法一：使用ajax方法二：使用XMLHttpRequest前言方法一使用ajax封装XMLHttpRequest对象，方法二更加原生，直接创建并使用XMLHttpRequest对象，两种方法均使用formData上传文件。HTML：<div> <input type="file" id="file" name="myfile"/> <input type="button" @click="UploadM原创 2020-09-08 16:47:23 · 813 阅读 · 0 评论 -
JavaScript合并多个对象
JavaScript合并两个对象$.extend()遍历赋值Obj.assign()合并对象的浅拷贝与深拷贝$.extend()let obj1 = {'a': 1};let obj2 = {'b': 1};let obj3 = $.extend(obj1, obj2);console.log(obj1); // {a: 1, b: 1} obj1已被修改console.log(obj1); // {b: 1}console.log(obj3); // {a: 1, b: 1}obj1 =原创 2020-08-03 20:34:33 · 712 阅读 · 0 评论 -
使用原生HTML+CSS制作一个分割线
<html><title>分割线</title><body><div><span>设备：</span><span>1</span></div><div class="order"> <span style="white-space:pre"> </span><span class="line"></span>原创 2020-07-29 17:43:13 · 1090 阅读 · 0 评论 -
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法this.$router.go(0)location.reload()跳转空白页再跳回原页面使用provide / inject组合控制的显示（推荐）前记有时候，在当前页面添加或删除一条记录的时候希望当前页面可以刷新一下，从而更新页面数据。我们知道，在路由到另一页面的时候会重新加载该页面，相当于刷新了页面，但是使用vue-router重新路由到当前页面，页面是不进行刷新的。下面介绍几种刷新页面的方法。刷新当前页面的四种方法this.$ro原创 2020-07-24 18:30:08 · 55847 阅读 · 5 评论 -
Vue项目中使用路由$router在页面间传输对象数据
有时候需要在后一个页面使用前一个跳转页面的对象，一般使用vuex用来管理对象的状态，但仅仅使用一次该对象的话是没有必要去使用vuex的，直接使用$router在跳转页面时携带对象一起跳转到下一页面会更加方便，这样下一页面接收到上个页面的对象后即可直接使用。1. 在前一页面的跳转路由中使用query关键字包裹对象this.$router.push({ path: "/CompanyEdit", query: { clickCorporateId: this.zTreeNode }}原创 2020-07-23 18:28:06 · 2715 阅读 · 1 评论 -
Windows下使用git提交代码到gitee
Windows下使用git提交代码到gitee下载并安装Git设置帐号信息上传本地代码到gitee上下载并安装Git可以在清华大学开源软件镜像站或在Git官网下载Git安装软件。下载完成后自己选择安装路径，然后一路next即可。检验安装是否成功：git --version设置帐号信息进入到提交代码的目录下：cd x:\dd\sdd\dddd… 自己的盘符（很重要）执行命令：git config --global user.name “your name”git config --gl原创 2020-07-22 10:56:06 · 1557 阅读 · 0 评论 -
Vue项目中使用class强行绑定计算属性函数
在vue开发中，有时候我们需要使用计算属性函数，但是又没有具体的调用方式，这时可以将该函数强行绑定到class中。例如有如下函数在computed计算属性中：options: function () { let companyListData = this.$store.getters.getCompanyData || []; console.log("companyListData:", companyListData); let list = []; for (let i = 0;原创 2020-07-21 19:03:55 · 3407 阅读 · 0 评论 -
使用jQuery强制修改CSS设置
web移动端开发在使用cube-ui的input标签时发现使用class并不能完全覆盖ui中的CSS设定，这时采用jQuery的选择器可以很好的解决这个问题（项目中如何安装jQuery可自行百度，也可看我之前的文章）。jQuery提供了一系列的选择器帮助开发者快速高效地找到指定节点，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法，下面介绍jQuery基本选择器（更高深的自己百度）：查看cube-ui的源码（也可在浏览器后原创 2020-07-17 20:48:21 · 1231 阅读 · 0 评论 -
Vue项目中文件package.json和package-lock.json的区别
package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记原创 2020-07-17 20:36:09 · 1730 阅读 · 0 评论 -
rem屏幕适配及px转rem
rem屏幕适配及px转rem屏幕适配px转rem屏幕适配在vue项目中的index.html页面head标签内插入这段代码：(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var原创 2020-07-15 20:26:05 · 605 阅读 · 0 评论 -
CSS属性强制覆盖
在前端开发过程中我们经常使用一些UI组件，这些UI组件都有自己的CSS配置，有时候我们需要使用自己的配置，这时可以在标签中添加class属性强行覆盖原来的属性。template中修改代码如下：<div style="width: 100%;height: 100%;margin: 0;padding: 0;border: 0;"> <cube-tab-bar v-model="selectedLabelDefault" :data="tabs" @click=原创 2020-07-13 19:28:00 · 8396 阅读 · 0 评论 -
zTree应用于vue+cordova移动端
zTree应用于vue+cordova移动端搭建vue+cordova开发环境应用zTree安装ztree与jQueryzTree官网下载demo项目添加zTree至项目搭建vue+cordova开发环境这里不做叙述，具体可查看我的文章：vue+cordova移动端Android开发环境配置应用zTree安装ztree与jQuerynpm install vue-ztree -snpm install jquery -s打开vue项目中的package.json文件，在dependencie原创 2020-07-10 20:06:52 · 1030 阅读 · 0 评论 -
JavaScript回车事件等键盘事件
JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表JavaScript键盘事件在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会原创 2020-07-09 21:31:09 · 22154 阅读 · 0 评论 -
初学者如何配置vue开发环境
配置vue开发环境安装node.js配置nodejs prefix（全局）和cache（缓存）路径基于 Node.js 安装cnpm（淘宝镜像）设置node环境变量创建并运行vue项目安装node.js在node.js中文网下载需要的版本，如下图所示（现在的版本比图中的高）：此次安装是在win7 64位环境下，所以选择windows相应安装包，下载完成后直接双击默认安装即可（建议不要安装在系统盘即C盘，我这里只有C盘）。配置nodejs prefix（全局）和cache（缓存）路径在nodejs原创 2020-07-07 21:07:45 · 1760 阅读 · 0 评论 -
render函数与箭头函数
render函数与箭头函数render函数render函数怎么用箭头函数1. 箭头函数基本形式2. 箭头函数基本特点a.箭头函数this为父作用域的this，不是调用时的thisb.箭头函数不能作为构造函数，不能使用newc. 箭头函数没有arguments，caller，calleed.箭头函数通过call和apply调用，不会改变this指向，只会传入参数e.箭头函数没有原型属性f. 箭头函数不能作为Generator函数，不能使用yield关键字g. 箭头函数返回对象时，要加一个小括号h.箭头函数在E原创 2020-07-05 20:49:15 · 836 阅读 · 0 评论 -
JavaScript Set集合相关操作、Set转数组、数组去重
JavaScript Set集合相关操作、Set转数组、数组去重Set创建Set对象Set加入（add方法）或删除（delete方法）key操作Set转数组及数组去重SetSet是一种类似于Map的数据结构，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key，这种特性就起到数据去重的效果，重复的数据不会被写入到Set中。创建Set对象//创建一个空的SETlet sets = new Set();//可以传入数组-数组转setlet sets1 =原创 2020-07-03 19:52:25 · 2828 阅读 · 0 评论 -
JavaScript数组转字符串
JavaScript数组转字符串join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。arrayObject.join(separator)参数说明：separator 可选。指定要使用的分隔符。如果省略该参数则没有分隔符。返回值：返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符通过分隔符串连接起来。let arr = ["one", "two", "three", "four"];arr.join("")原创 2020-07-02 21:01:25 · 321 阅读 · 0 评论 -
JavaScript分割字符串（字符串转数组）、向数组指定位置添加（删除）元素
分割字符串：split()将字符串分割为字符串数组，并返回此数组。stringObject.split(separator,limit)参数说明：separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。limit：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。注意事项：如果把空字符串 ("") 用作 separator，那么 stringObj原创 2020-07-02 20:35:03 · 4641 阅读 · 0 评论 -
JavaScript截取字符串
JavaScript截取字符串slice()substring()substr()slice()stringObject.slice(start, end)参数说明：start（必需）：规定从何处开始选取。如果是负数，那么它规定从字符串尾部开始算起的位置。也就是说，-1 指最后一个字符，-2 指倒数第二个字符，以此类推。end（可选）：规定从何处结束选取，即结束处的字符下标。如果没有指定该参数，那么截取的字符串包含从 start 到结束的所有字符。如果这个参数是负数，那么它规定的是从数组尾部开始转载 2020-07-02 20:13:15 · 201 阅读 · 0 评论 -
JavaScript深拷贝
JavaScript深拷贝浅拷贝深拷贝JSON实现深拷贝递归实现深拷贝浅拷贝对于引用数据类型，对象名存储在栈内存中，对象值则存储在堆内存中，同时栈内存会提供一个引用指向堆内存中的值。浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅拷贝会导致两个对象引用指向同一块堆内存地址。如果需要两个指向不同堆内存且值相同的对象，则需要使用深拷贝。深拷贝定义如下对象：var student = { id : '01', name : '张三原创 2020-07-01 21:08:20 · 156 阅读 · 0 评论