3分钟教会你把封装的js公共方法挂载在vue实例原型上

第一步:首先在src文件夹里面创建一个通用js文件夹,然后在创建的文件夹里面创建一个js文件第二步:const 一个方法,然后通过export暴露出来(在同一个页面可以写多个方法,和暴露多个方法,在export里面暴露的方法要用逗号分隔) 第三步:把方法挂载在原型上(具体操作看图) 第五步:使用,在页面的export default 里面的生命周期里面通过this.公共方法就能使用了. 结果: 就是这么简单,你学会了吗?…

全局组建封装（挂载到vue实例的原型中，通过this访问）

主题:组建的封装一:install注册的全局封装(v-grid九宫格组建) 1.九宫格的封装主要有三个api 点击功能每行个数是否隐藏边框 2.因为九宫格的内容自定义的可能性比较大,美容比较灵活,所以使用了slot插件,主要让用户自定义 3.主要技术就是组建中的传参二: prototype原型的全局封装(v-cnfirm框) 1.主要功能,点击后跳出弹出框,弹出框内容自定义,…

vue.js（1）--创建vue实例的基本结构

vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&…

react.js 公共方法集合

截取七牛上传图片的后缀名: export function getInputKey(info){ let self = this; let obj = JSON.parse(info); let qiniuKey; let imaName; let imgSuffix; if(obj){ qiniuKey = obj.key; imaName = obj.fileName; imgSuffix = imaName.substring(imaName.lastIndexOf('.') + 1);…

JS 公共方法

1.Format函数 $.GM.Format = function (source, params) { if (arguments.length == 1) return function () { var args = $.makeArray(arguments); args.unshift(source); return $.format.apply(this, args); }; if (arguments.length > 2 && params.constructor !…

在普通js文件里引入vue实例的方法

首先是我是写了一个 Loading 插件然后是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想在封装的axios的http.js文件里使用这个插件.所以我得想办法把vue实例引进来. 经过测试可以如下这样.(好吧上面,都是废话) 图中代码: import Vue from 'vue'; //引入vue //必须实例化 Vue let vm = new Vue(); /*这里有个点需要注意,直…

js继承之组合继承（结合原型链继承和借用构造函数继承）

在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可以保证每个实例都有它自己的属性,又能做到对一些属性和方法的复用.这样就 perfect 了. 一.回顾借用构造函数继承的缺点先看我们之前在借用构造函数继承中最后用到的代码: //父类:人 function Person () { this.head = '脑袋瓜子'; this.emotion =…

JS继承方法

1.原型链: 每个构造函数都有一个原型对象,且有一个指针指向该原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(proto).若实例的原型是另一个构造函数的实例,该实例的原型有一个指向另一个原型的指针,层层递进,构成原型链. 原型上的属性和方法为所有实例所共有,当访问一个实例属性时,首先会在实例中搜索该属性,如果没有找到该属性,则会继续搜索该实例的原型,沿着原型链网上搜索,到原型链末端或找到为止. 1 2 3…

在JS事件封装时，addEventListener()方法的this问题

最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发现报错: 为什么会报这样的错,原来是不同于单一的onclick之类的事件,这边的this指向的是调用addEventListenner的的对象; 为了简化问题,我们将其拿到全局范围中单独去测试: 发现这里的this指向的就是div标签,这就是为什么在原型中调用$(this)会出错因为是执行的上下文…

封装LocalStorage.js

之前使用vue开发的项目频繁使用到localStorage,封装了一下 localStorage.js文件代码如下: let obj = {}; /** * putLocalStorage 把数据放到本地存储 * @param {*} key * @param {*} value */ obj.putLocalStorage = function (key, value) { window.localStorage.setItem(key, JSON.stringify(value)); };…

基于原生JS封装数组原型上的sort方法

基于原生JS封装数组原型上的sort方法最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于个人理解用纯原生JS实现的功能.如有不对的地方,可以评论告诉我哟首先,我们先来看一下sort方法的作用.参数.以及方法的返回值,原有数组是否发生改变 sort方法主要用于数组的排序参数分为两种: 一种:传的参数是函数. (排序主要看函数的返回值) 另一种:传的不是函数.或者不传(只要传的不是函数…

JsQuick--个人封装的Js库

JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $={ /** * 根据ID获取对象 $.id("对象名称"); * @param {Object} id 对象名称 */ id:function(id){//根据ID获取对象 return "string" == typeof id ? document.getElem…

JS常用公共方法封装

_ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / \\||| : |||// \ / _||||| -:- |||||- \ | | \\\ - /// | | | \_| ''\---/'' | | \ .-\__ `-` ___/-. / ___`. .' /--.--\ `. . __ ."" '< `.___\_<|>_/___.' &…

自动化测试中执行JS脚本方法封装

执行JS脚本方法封装: class JavaScript(Base): def execute_javascript(self, js): """执行 JavaScript""" self.logger.info(f"执行 JavaScript:\n{js}") return self.driver.execute_script(js) def execute_async_javascript(self, js): "…

封装环形加载进度条（Vue插件版和原生js版）

1.效果预览 2.用到的知识主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性. 在看下面文章之前,你需要了解 <!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition: all 2s; stroke-dasharray:300,320;…

JS的封装（JS插件的封装）

JS中类的概念类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法.方法也是一种特殊的对象. 类的方法在构造方法中初始化实例的方法(就是在构造方法中直接编写方法,并new实例化)是不推荐的,消耗内存(每次实例化的时候都是重复的内容,多占用一些内存,既不环保,也缺乏效率).所有实例是共有的,创建多个实例不会产生新的function,推荐在类的prototype中定义实例的方法,prototype中的方法会被所有实例公用. 1. 仿照jQue…

像jq那样获取对象的js原生方法

使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 function getEle(ele,index){ var obj = document.querySelectorAll(ele); if(index){ if(obj.length ==1){ return obj; } return obj[inde…

JS日期Date详解与实例扩展

一:Date类型介绍要创建一个日期对象,使用new操作符和Date构造函数即可: var now = new Date(); Date.parse()方法其中Date.parse()方法接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数.ECMA-262没有定义Date.parse()应该支持哪种日期格式,因此这个方法的行为因实现而异,而且通常是因地区而异.将地区设置为美国的浏览器通常都接受下列日期格式: "月/日/年",如6/13/2004; "英…

vue项目中如何让外部引入的js模块的this值指向vue实例

当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObject.$router.push({name:name,query:query}); }else{ query.addressCode = this.getParam('addressCode'); this.$router.push({name:name,query:query}); } }else…

Js笔记（对象，构造函数，原型，原型链，继承）及一些不熟悉的语法

对象的特性: 1.唯一标识性,即使完全不一样的对象,内存地址也不同,所以他们不相等 2.对象具有状态,同一个对象可能处在不同状态下 3.对象具有行为,即对象的状态可能因为他的行为产生变迁 Js直到es6之前,有对象的概念,但是没有类的概念. 对象的分类: 1.内建对象 - 用Es标准中定义的对象,在任何的Es的实现中都可以使用(比如:Math,String,Number,Boolean,Function...) 2.宿主对象 -用Js运行环境提供的对象,目前来讲主要是指用浏览器提供的对象(BOM…

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('pa…

Vue.js—组件快速入门及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件以下就是我们注册…

封装常用的selenium方法

package com.yk.userlive.base; import java.net.MalformedURLException;import java.net.URL;import java.util.concurrent.TimeUnit; import org.openqa.selenium.By;import org.openqa.selenium.JavascriptExecutor;import org.openqa.selenium.Proxy;import org.open…

js 创建方法

贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return this; } function O2(user,pwd){ //use factory var obj=new Object(); obj.user=user; obj.pwd=pwd; obj.get=get; return obj; } function O3(){ //use prototype…