javascript知识
文章平均质量分 64
Corner1990
以为自己什么都有,仔细想想什么都没有!
展开
-
前端实现分页打印(二)
关于分页计算,分页统计的代码篇原创 2022-12-16 11:49:30 · 556 阅读 · 3 评论 -
前端实现分页打印(一)
实现页面为结算单,也页面由固定头部,订单信息,产品列表,金额汇总,订单明细其中产品列表需要动态计算分压,订单明细由于存在多个子单,订单收费项目可配置化,导致也存在多个分页需要处理原创 2022-12-16 10:44:44 · 4772 阅读 · 2 评论 -
微信h5调试环境搭建
微信h5调试环境搭建VConsole手机网页的前端开发者调试面板, vConsole 传送门安装$ npm install vconsoleor$ yarn add vconsole使用vue react 项目可以直接在入口文件 引入,然后创建实例import VConsole from 'vconsole';const vConsole = new VConsole();// 或者使用 options 选项初始化const vConsole = new VCon原创 2021-08-07 11:45:03 · 733 阅读 · 0 评论 -
vue配置webpack素自动转为 rem
安装amfe-flexible(用于设置 rem 基准值)yarn add amfe-flexibleor npm i -S amfe-flexible使用amfe-flexible// src/main.js 中引入 amfe-flexibleimport 'amfe-flexible'安装 postcss-pxtorem(postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem)注意 版本太高会报错,需要安装指定版本npm install postc原创 2021-07-28 09:06:37 · 330 阅读 · 0 评论 -
vue cli Mock的使用
mock模拟接口,使用默认的devserve 完成,考虑到这边有后台提供的模拟数据,随不需要自己随机生成数据,如果说有需要自己随机生成数据,可以使用[mockjs](Mock.js (mockjs.com))写mock接口在src/目录下新建mock目录,存放所有的mock文件在src/mock/目录下新建home.jshome.js mock 文件内容/** * @desc 处理返回banner 数据 * @param { object } request express 请.原创 2021-07-21 22:50:30 · 308 阅读 · 0 评论 -
vue cli 生成vue项目
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,官网 [vue cli ](介绍 | Vue CLI (vuejs.org))安装vue clinpm install -g @vue/cli-service-global创建项目# 创建项目vue create project name# 选择默认选项 完成安装# 进入项目目录cd project name# 启动项目npm run serve or yarn serve路由配置在scr目录下创建如.原创 2021-07-21 22:47:22 · 96 阅读 · 0 评论 -
基于qiankunjs的微前端搭建
什么是qiankunqiankun: 一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台微前端基本架构#mermaid-svg-IHseDMMMqVX3w5Iq .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#merm原创 2020-12-15 17:03:04 · 5907 阅读 · 1 评论 -
什么是微前端
将多个独立的系统,通过统一的入口提供给用户使用的聚合系统 。而开发,测试,上线,都是子系统自行研发,测试 ,上线。微前端的特点代码库更小,可以将系统拆分成多个子系统。独立部署,子系统堵路部署,没有技术栈限制无需重新开发当前项目,可以直接集成微前端的不足开发中需要运行多个子系统才能开发和调试(至少是base系统和业务系统)多个系统之间的约定,已经架构设计性能问题(单页面系统=>ios, 微架构=> Android)生产环境多个系统之间的版本控制(业务流程可能.原创 2020-12-15 10:33:08 · 668 阅读 · 2 评论 -
JS优化之回收机制理解
回忆这几年,经常使用的技术栈从jq,bootstarp,cmd, 到MVVM(vue, react, angular). 我们的js从最开始的几百K到现在动辄几兆,处理对的数据也越来越复杂,随之而来的就是对性能的优化。围绕着优化,肯定要不开内存占用的问题。。。首先如下:科普一下简单的技术概念JS中的栈(stack)栈的特点是**“LIFO,即后进先出(Last in, first out)”**。数据存储时只能从顶部逐个存入,取出时也需从顶部逐个取出。打个比喻,当我们洗盘子得时候,会边洗边摞一起.原创 2020-12-09 16:22:10 · 295 阅读 · 0 评论 -
设计模式之-组合模式
组合模式-> 又称部分模式将对象和恒树行结构以表示部分-整体的层次结构使用者可以使用统一的方式对待组合对象和叶子对象优点高层模块化调用简单节点自由增加缺点在使用组合模式是,其叶子和树枝的声明都是实现类,而不是接口,违反了依赖倒置使用场景部分,整体场景, 如树形菜单。文件,文件夹。实现虚拟dom案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.原创 2020-11-27 17:17:02 · 126 阅读 · 0 评论 -
设计模式之策略模式
类的行为或其算法可以在运行时更改。这种类型的设计模式属于行为型模式策略模式中, 创建表示各种策略的对象和一个行为随着策略对象改变而改变的 context 对象。策略对象改变 context 对象的执行算法策略模式的优点算法(功能)可以自由切换避免使用多重条件判断扩展性好策略模式的缺点策略类会增多所有的策略都会暴露在外部代码这里是按照超市支付的角色为模型创建,有四个策略,普通顾客,熟客,会员,老板等,在支付的时候使用不同的策略策略内置实现class Customer.原创 2020-11-19 16:31:10 · 74 阅读 · 0 评论 -
状态模式
对象类的行为是根据他的状态改变的。这种类型的设计模式称为设计模式我们通常创建各种状态的抽象对象和一个行为随着状态的改变而改变context对象主要作用解决对象行为过于依赖他的状态(属性), 并需要根据不同的状态触发不同的行为使用场景大量的对象状态需要管理的时候,通过对具体状态的抽象,封装,实现解耦核心实现思想创建不同的状态类,进行上下文的状态切换,已经该状态下的行为创建上下文对象,更具不同的状态调用对应的 状态类状态模式的优点:封装了转.原创 2020-11-19 16:16:21 · 65 阅读 · 0 评论 -
设计模式之外观模式
外观模式(Facade Pattern)又叫门面模式,定义一个将子系统的一组接口集成在一起的高层接口,以提供一个一致的外观外观模式让外界减少与子系统内多个模块的直接交互,从而减少耦合,让外界可以更轻松地使用子系统外观模式的组成门面角色:外观模式的核心。它被客户角色调用,它熟悉子系统的功能。内部根据客户角色的需求预定了几种功能的组合子系统角色:实现了子系统的功能。它对客户角色和Facade是未知的客户角色:通过调用Facede来完成要实现的功能代码实现// 定义求和方法class Su.原创 2020-11-11 21:26:41 · 125 阅读 · 0 评论 -
video 播放视频被x5内核浏览器劫持时的处理记录
因为业务关系,最近一直做微信相关的东西。一直被教育,过了一段时间,我已经我我已经成成长了,成长到足够可以处理日常事务,可是,可是我还是太年轻了。。。查询资料要做视频播放发现视频在播放的时候调用Android原生的视频播放器导致界面布局失效,网页无法继续糙操作。。。。然后我找了好久 好久。。。网上各种解决方案, 。。。无效到目前为止 之确定了只有x5内核会有此问题此时已过去了半天的时间,翻遍了百度。google,没有办法,只有放大招了,查看官方文档腾讯x5官方文档https://x5..原创 2020-09-25 17:11:59 · 3404 阅读 · 1 评论 -
微信小程序h5页面分享设置
前言(废话): 最近开发新项目,因为公司希望能在开发完h5后顺便吧微信小程序也上了,但是人力有限,只能做到h5,开发小程序压根做不到,只能投机了, 我真是个机灵鬼。。。然后我就看API,咦,贼拉简单,一。使用web-view标签嵌入网页,后台配置合法域名,二,使用postmessage通信,然后保存地址就好了。。。代码如下:<template> <div class="index"> <web-view :src="path" @message="messa.原创 2020-07-02 21:26:41 · 4265 阅读 · 0 评论 -
微信支付又一次成功的教我做人
时间过得飞快,转眼间从业前端已经有些年头了,见了太多的场景,意想不到的的错误,以为自己足够成熟和冷静的时候,支付再一次教了我一回,怎么做一个人。。。事情的经过大致是这样子的,公司有一个h5新项目,然后再开发的时候需要对接支付。经过调研,后来只打算上微信支付和支付宝支付,在这里首先对支付宝支付api的开发者表示致敬,真心好用。然后再说会微信。。。。有h5支付,公众号支付,还有小程序支付。。。。在这里奉劝大家,如果是真的设计多方登录,支付的时候,还是使用微信开放平台把,毕竟找个属于少生优生,幸福一生的选择,.原创 2020-06-10 09:40:57 · 313 阅读 · 0 评论 -
vue 图片上传,图片预览
因为项目是vue+vant,这里图片预览直接使用vant的组件,不做多余的封装html 结构主要选择图片按钮,图片预览区, 选择图片的input<div class="img-upload"> <ul class="preview-list" > <li class="img-item" v-for="...原创 2020-04-16 19:16:57 · 733 阅读 · 3 评论 -
es6 之 new Function
恩么么,有一种这样的场景,随着开发的场景越来越多,我们很多时候需要动态几算,以前只要把函数封装好就可以用了,有没有考虑过讲方法也动态封装呢。。。怎么说呢,大神就是大神,很多我还没用到的东西别人已经实现了,最近刚好用到…new Function语法let func = new Function ([arg1, arg2, ...argN], functionBody);// 上边的...原创 2019-12-16 11:50:20 · 1081 阅读 · 0 评论 -
js闭包理解
要理解javascript的闭包,首先要理解javascript的变量的作用域。变量的作用域就两种,全局变量和局部变量。在javascript中内部函数可以读取全局变量,而外部函数不能读取内部变量。但是我们有时候又不要在外部读取函数内部的变量,那么需要怎么做呢。这是就可以在函数内部再定义一个函数,function fn1(){ var n=999; function f原创 2016-08-22 13:11:54 · 271 阅读 · 0 评论 -
常用的BOM操作
JavaScript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.b原创 2016-11-01 10:43:23 · 504 阅读 · 0 评论 -
阻止冒泡小方法
function stopPropagation(e) { e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = t原创 2016-11-01 10:44:59 · 205 阅读 · 0 评论 -
es6学习一
es6 学习笔记一。letES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{let a=0;}1.for循环的计数器,就很合适使用let命令。2.let 有作用于的概念 ,不存在变量提升;3.暂时性死区 只要块级作用域内存在let 命令,它所声明的变量就"绑定"这个区域,不在受外部的影响; 注:ES原创 2016-11-01 17:18:18 · 235 阅读 · 0 评论 -
JavaScript常用算法 与 数据结构
一.数组几乎所哟的编程语言都原生支持数组类型,数组是最简单的内存数据结构 创建和初始化数组原创 2017-01-04 13:46:42 · 572 阅读 · 0 评论 -
面向对象练习
闲着无聊 拿来消遣 第一次写。。 勿喷(function(win,undefined){ var $ = function(){ this.init(); } $.prototype={ init:function(){原创 2017-03-03 15:08:03 · 854 阅读 · 0 评论 -
JavaScript性能优化
加载和执行JavaScript执行过程耗时越久,浏览器等待响应的实践就越长。 意味着:<script>标签每次出现都霸道的样页面等待脚本的解析和执行。无论当前的JavaScript代码是内嵌的还是包含在外链文件中,页面的下载和渲染都必须停下来等待脚本的执行完成。这是页面生存周期的必要环节,因为脚本执行过程中可能会修改页面内容, - 脚本位置 + 理论上来讲,把于样式和行有关原创 2017-02-27 09:54:45 · 662 阅读 · 0 评论 -
手写jspon实现跨域
'use strict';// 自己手写一个跨域组件(function(window){ 'use strict'; var jsonp = function(url,data,callback){ // 0.挂在回调函数 var callBackName = 'my_json_callBack'+Math.random().toString().r原创 2017-03-10 16:19:16 · 940 阅读 · 0 评论 -
框架封装基础
解决污染的几种方式 污染:全局变量! 函数 把所有的全局函数和变量使用一个函数包裹,这样的话对全局的污染源就只有一个 对象 把所有的属性和函数设置给一个对象,然后通过对象访问属性和方法 立即函数(匿名函数) 将我们需要的值赋值给任意一个全局变量,使其成为这个变量的值/方法存在的问题:无法在外部使用函数内部定义的变量和函数 解决方法:将我们需要的值/方法赋值给window,原创 2017-03-12 22:17:01 · 755 阅读 · 0 评论 -
javascript常见的封装方式
js是一门面向对象语言,其对象是用prototype属性来模拟原创 2017-04-17 15:59:10 · 298 阅读 · 0 评论 -
Ajax与Comet
ajax(Asynchronous Javascript + XML)。能够页面无刷新而向服务器发送请求。ajax的核心是xmlHttpRequest对象;XMLHttpRequest对象创建XMLHttpRequest对象function createXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new X原创 2017-05-24 18:03:34 · 504 阅读 · 0 评论 -
工作中积累的琐碎
1.根据给定的条件在原有的数组上,得到所需要的新数组 var a = [-1, -1, 1, 2, -2, -2, -3, -3, 3, -3]; function f(s, e) { var ret = []; for (var i in s) { // 根据原有的数组长度进行循环 ret.push(e(s...原创 2017-03-03 15:28:27 · 367 阅读 · 0 评论 -
javascript 深入学习之一
js中的数据类型1.基本数据类型 number、string、Null、boolean、undefined 2.引用数据类型 function, object: {}, [], /[0-9]/预加载浏览器在预加载的时候,首先会提供一个全局的js执行环境 -> 全局作用域(global/window)在当前作用域中,js代码执行之前,浏览器默认会把所有的关键字var,func原创 2017-08-23 01:50:48 · 727 阅读 · 0 评论 -
html5 FileReader 方法
FileReader的接口方法FileReader的接口方法有四个,其中三个用来读取文件,另一个用来终端读取。无论读取成功或者失败。方法并不会返回读取结果。这一结果存储在result属性中。readAsBinaryString(file): 将文件读取成二进制文件readAsText(file[,enconing]): 将文件读取为文本readAsDataURL(file): 将文件读取为D原创 2017-10-19 10:18:52 · 3706 阅读 · 0 评论 -
javascript深入学习之二
call深入理解call方法的作用: 首先我们让原型上的call方法执行,在执行call方法的时候,让我们的fn方法中的this变为第一个参数值obj,然后再把这个函数执行fn.call(ibj)function fn () { console.log(this)}//自己模拟内置call方法Function.prototype.myCall = function (conten原创 2017-10-15 12:01:20 · 226 阅读 · 0 评论 -
vue组件编写
toast组件模板文件<template><transition name="bounce"> <div class="toast" :class="{'hidden': !visiable}"> <i class="message">{{message}}</i> <i class="icon icon-tuichu" @click="closeToast原创 2017-11-17 18:13:50 · 3039 阅读 · 0 评论 -
DOM事件学习
什么是事件事件分为两部分: 行为本身: onclick:点击事件onmouseover,onmousemover(onmouserenter),onmousemove,onmouseout(onmouseleave),onmouseup,onmousewheel(鼠标滚动行为) ->等等鼠标事件onfocus,onblur //获取焦点和失去焦点keyup,keydown //键盘按下和原创 2017-12-05 18:14:16 · 354 阅读 · 0 评论 -
年会签到小项目总结
关于技术选型首先是选择不够严谨,其次是对时间的把控不是很好,导致在接受项目以后出现了连续一周的加班现象。对个人能力有些高估。表现的形式为之前认为很熟悉的技术,在很久没有使用过的时间以后发现变得生疏。技术覆盖范围不够,钻研深度也不够,需要在下一步提升自己的技术水平和范围,更多的利用自己的琐碎时间,对各个方面的知识进行整理和完善。在开发后期和后台对接的时候出现了扯皮的现象。接下来的开发阶段...原创 2018-01-16 10:07:52 · 690 阅读 · 0 评论 -
理解mvvm原理
通过以下demo,深入理解mvvm的原理,实现数据劫持,数据双向绑定,数据驱动页面,数据双向绑定,计算属性computed!注意:为了方便理解,我会在每个函数内部把执行顺序和执行思路用文字注释,望知晓...基本文档结构HTMLhtml lang="en">head>meta charset="UTF-8">title>vm的demotitle>head>body>d原创 2018-02-05 10:53:22 · 12774 阅读 · 1 评论 -
理解Promise 实现原理
实现基本调用/** * @desc 自定义promiseL类,模拟实现promise对象 * @param {function} excutor 用户在初始化Promise对象时传入的函数 */function PromiseL (excutor) { let self = this self.status = 'padding' //默认等待状态 self...原创 2018-02-07 09:45:44 · 501 阅读 · 0 评论 -
金额千位数格式化方法
公司做项目需要用到奖金额格式化,每千位用逗号隔开 随写一下方法实现思路: 首先对传入的数值进行字符串分割,然后分别对整数部分和小数部分进行整理,为实现的功能,小数位置目前只限制两位,因为公司没有需求,目前没有写 /** * @description 传入一个金额 格式化千位用逗号隔开 * @param {number} money 金额,可以是正整数或...原创 2018-03-02 14:52:27 · 3105 阅读 · 0 评论 -
简单的storage封装
最近项目用到storage 自己简单的封装了一下,方便自己后期拷贝和调用/* storage 主要放项目中的storage相关操作:存取等 没什么高深的,大神就不用看了*/var storage = { /** 对本地数据进行操作的相关方法,如localStorage,sessionStorage的封装 */ setStorage: fun...原创 2018-04-07 09:27:59 · 1956 阅读 · 0 评论