js
文章平均质量分 73
江木
前端攻城狮一枚
展开
-
REST 以及RESTful API
先说REST名称REST -- REpresentational State Transfer首先,之所以晦涩是因为前面主语被去掉了,全称是 Resource Representational State Transfer:通俗来讲就是:资源在网络中以某种表现形式进行状态转移。分解开来:Resource:资源,即数据(前面说过网络的核心)。比如 newsfeed,friends等;Repr...原创 2019-12-20 12:43:16 · 2467 阅读 · 0 评论 -
前端----------------异常处理及监控
前言其实,在前端工作中,对错误异常处理做的比较少,因为我们知道,JavaScript 有基本的异常处理能力,前端开发过程中,很多错误js会直接抛出,但是这仅仅是表象的,有时候会因为环境不同,例如线下是好的,线上有问题,或者API等原因,造成js报错。针对这些报错,我们要及时捕获,才能不影响线上体验,减少损失!异常捕获的方式常见的js异常捕获一般有2中方式:1、try..catch...转载 2018-09-06 15:11:02 · 880 阅读 · 0 评论 -
微信自定义分享IOS环境下-----失效的问题
最近在做一个公众号,涉及到分享的功能,但是在安卓机上,自定义的分享配置参数能够被触发,而在ios苹果手机上却失效了,在百度上搜索解决办法,但都没有效果,配置参数如下: var content = { title: '少时诵诗书所所', // 分享标题 desc: '实打实大发', // 分享描述 link: 'sdsssssss, // 分享链...原创 2018-08-27 14:39:01 · 5835 阅读 · 2 评论 -
h5的web push---------h5的Notification
前言本文主要介绍h5的桌面通知和web push,h5的Notification主要用于向用户展示通知,而web push 主要用于订阅推送消息。h5的Notification关于h5的Notification已经不是什么新的技术,但是最新chrome浏览器也是只有在https协议下面才有效。下面简单介绍一下Notification语法let myNotification =...转载 2018-07-24 12:03:58 · 3401 阅读 · 0 评论 -
forEach-------break不能跳出循环
用forEach遍历数组的话,不能用break跳出循环,也不能用return返回外层。如果要提前终止,必须把forEach()方法放在一个try块中,并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止。try { a.forEach(f,t); } catch(e){ if(e === foreach.break)retur...原创 2018-07-04 15:35:14 · 8843 阅读 · 0 评论 -
跨域-------------同源策略
在前端开发中,经常遇到"跨域"的问题,以下的文章将探讨一下为什么会有"跨域"问题的出现,和所谓的"同源策略"同源策略1995 年由 Netscape 公司提出,之后被其他浏览器厂商采纳。同源策略只是一个规范,并没有指定其具体的使用范围和实现方式,各个浏览器厂商都针对同源策略做了自己的实现。一些 web 技术都默认采取了同源策略,这些技术范围包括但不限于Silverlight, Adobe Flas...原创 2018-06-01 16:45:28 · 299 阅读 · 0 评论 -
drag-----拖拽
1、设置元素可拖拽属性:draggabletrue表示可拖拽。false表示不可拖拽。auto默认值,img和带href属性的a标签则表示可拖拽,其他标签表示不可被拖拽。其他值表示不可拖拽。兼容FF:需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。2、拖拽元素事件:dragstart:拖拽前触发,即鼠标按下,被拖拽元素被拖拽的瞬...原创 2018-06-14 11:27:47 · 433 阅读 · 0 评论 -
webpack
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的...转载 2018-05-16 18:57:41 · 151 阅读 · 0 评论 -
新型应用形态-----快应用----------1
快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装,即点即用,享受原生应用的性能体验。-------------------(个人感觉有点对标小程序的意思)一:环境的搭建 1.安装NodeJS 2.安装hap-toolkit npm install -g hap-toolkit 3.手机安装调试器---------...原创 2018-05-08 14:01:39 · 375 阅读 · 0 评论 -
Mustache
Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty,这里主要介绍基于 Javascript 语言的模板引擎,目前流行有 Mustache、Hogan、doT.js、JsRender...原创 2018-05-18 13:37:34 · 563 阅读 · 0 评论 -
gulp 详细教程
一、gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript、coffee、sass、...转载 2018-05-03 18:03:39 · 456 阅读 · 1 评论 -
[ -webkit-box-orient: vertical ] 打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。 1. 加上这注释命令/*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */2. optimiz...原创 2018-11-06 19:12:26 · 763 阅读 · 0 评论 -
js 中replace中的回调函数
定义和用法replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。我们常用的是: 使用replace进行字符替换,第二个参数传入替换的参数:"yyyy-MM-dd".replace(/y+/g,"年")// 年-MM-dd其实replace的第二个参数可以传入一个回调函数 str.replace(ext, funct...原创 2018-11-09 11:06:15 · 3306 阅读 · 0 评论 -
前端单元测试Unit Test---1---初探
早就知道单元测试这样一个概念,但是一直没有使用到;只知道后端用到单元测试;直到最近,在真正开始接触和使用它。究竟什么是单元测试?很多人也不一定能描述的十分清楚,故整理记录下,以备自己查看同时帮助他人。waht is the unit test ?In computer programming, unit testing is a method by which individual uni...原创 2018-11-10 11:06:05 · 1960 阅读 · 0 评论 -
vue父子通信的方式
最近团队在做 Vue项目代码层面上的优化。在此整理下vue父子组件通信的方式。大纲:几种通信方式无外乎以下几种:Prop(常用) $emit (组件封装用的较多) .sync语法糖 (较少) $attrs & $listeners (组件封装用的较多) provide & inject (高阶组件/组件库用的较多) slot-scope & v-slo...原创 2019-06-18 17:14:23 · 2492 阅读 · 0 评论 -
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑。因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,从浏览器多进程到JS单线程,将JS引擎的运行机制系统的梳理一遍。展现形式:由于是属于系统梳理型,就没有由浅入深了,而是从头到尾的梳理知识体系,重点是将关键节点的知识点串联起来,而不是仅仅剖析某一部分知...转载 2019-06-13 12:23:20 · 224 阅读 · 0 评论 -
webpack4-------缓存
本文为手摸手使用 webpack4,主要分为两部分:怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存默认分包策略webpack 4 最大的改动就是废除了CommonsChunkPlugin引入了optimization.splitChunks。webpack 4 的Code Splitting它最大的特点就是配置简单,如果你的mode是production,那么 w...转载 2019-05-18 16:40:52 · 1481 阅读 · 0 评论 -
ajax中的withCredentials使用效果
XMLHttpRequest.withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。XMLHttpRequest.withCredentials 怎么用?withCredentials属于XMLHttpRequest对象下的属性,可以对其进行查看或配置。...原创 2019-05-16 17:56:37 · 46272 阅读 · 4 评论 -
基于 webpack 的持久化缓存方案
如何基于 webpack 做持久化缓存似乎一直处于没有最佳实践的状态。网路上各式各样的文章很多,open 的 bug 反馈和建议成堆,很容易让人迷茫和心智崩溃。作为开发者最大的诉求是:在 entry 内部内容未发生变更的情况下构建之后也能稳定不变。TL;DR;拉到最后看总结 XDhash 的两种计算方式想要做持久化缓存的首要一步是 hash,在 webpack 中提供了两种...转载 2019-01-23 11:21:25 · 782 阅读 · 0 评论 -
多页应用的webpack4配置优化
webpack这款工具虽然很难学,但是自由度很大,玩转之后有种随心所欲的感觉。在学习webpack之前,有几个基础的概念:JavaScript, nodejs, CommonJS, 如果以上几个技能都具备,那么就可以开始学习webpack了。webpack的打包原理,就是将各个模块变成字符串,存入健值或者数组之中,然后每个模块之间的关系,通过__webpack_require...转载 2019-01-22 18:17:48 · 663 阅读 · 0 评论 -
前端单元测试Unit Test---2---入门
上篇简单介绍了下前端单元测试的背景;以及主要的框架断言库的选择;本文以mocha+chai为主简单介绍下单元测试的入门简介Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异步测试更简单更有趣。Mocha 可以持续运行测试,支持灵活又准确的报告,当映射到未捕获异常时转到正确的测试示例。Chai 是一个针对 Node.js ...原创 2018-11-20 16:56:54 · 979 阅读 · 0 评论 -
ejs 模板语言的使用
特性<% %> 用于控制流<%= %> 用于转义的输出<%- %> 用于非转义的输出-%> 结束标签用于换行移除模式带有<%_ _%>的控制流使用空白字符移除模式自定义分隔符 (例如,使用 '<? ?>' 代替 '<% %>')包含客户端支持中介JavaScript的静态缓存模板的静态缓存与 Express 视图系统兼容...原创 2018-04-25 18:21:33 · 1105 阅读 · 1 评论 -
window.open() 某些情况会被浏览器阻止弹出窗口
window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源,这是一个原生的 Javascript API 接口。有关 window.open() 的基本使用可以参考 mozilla 提供的 API 文档:window.open 。大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window....原创 2018-03-06 10:12:51 · 6460 阅读 · 0 评论 -
上传plupload的使用
plupload具体的使用原创 2017-12-04 20:11:17 · 1673 阅读 · 0 评论 -
禁止chrome-----翻译网页
chrome浏览器翻译成中文时,结构里会多出文字(原因未知)解决:(阻止浏览器翻译网页)原创 2017-12-01 17:38:58 · 4426 阅读 · 1 评论 -
使用vue开发的你是不是 真正需要Vuex
写这篇文章的主要目的是现在公司刚使用 Vue开发了一个全新的项目,而在使用 Vue 的时候很多同事对是否用Vuex , 为什么要使用 Vuex 不理解,我本身在这个项目之前是没有使用过 Vue 或者 Vuex 写过实际项目; 主要是根据此次项目的的一点经验所写;不当之处,欢迎讨论。 组件通信在使用Vue进行组件化开发这个。组件通信是一个十分重要的部分。应用在组件化之后,原创 2017-12-08 16:59:43 · 8722 阅读 · 0 评论 -
从零开始搭建vue
公司的项目前端框架选择了vue,最近也一直在学习它,今天写一篇Vue-cli搭建的过程,主要分以下几步:1.Node.js(JavaScript运行环境)安装 2.Vue.js安装 3.脚手架搭建 4.项目文件描述1.Node.js安装node下载mac推荐下载最新稳定版,windows下载最新版本下载完成后,打开命令原创 2017-08-10 09:00:35 · 577 阅读 · 0 评论 -
跨域问题的解决
前端开发的工程师门,只要不是单纯的写静态页面,只要不是还停留在原始的后台嵌套jsp等模式中,开发工程中都会遇到跨域的问题;今天简要整理下解决跨域的几个方法;1.无论是开发还是生产模式------后台配置(CORS)参数//指定允许其他域名访问 header("Access-Control-Allow-Origin:*");//响应类型 header("Access-Control-Allow-Me...原创 2017-12-08 16:28:18 · 467 阅读 · 0 评论 -
微信小程序缓存-------缓存时效性
关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB2.localStorage 是永久存储 相应的api---------- wx.setStorag...原创 2017-11-29 15:46:43 · 39518 阅读 · 1 评论 -
手机整屏滑动插件-----fullPage.js------使用
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,正好最近公司的一个项目用到整屏,并且只要首页整屏滑动,其他正常滑动;当然还要其他的需求,这里就不唠叨了。直接上干货-----------原创 2017-11-17 16:41:58 · 4772 阅读 · 0 评论 -
微信小程序之----上传图片
微信小程序上传图片用到的apiwx.chooseImage(OBJECT)wx.previewImage(OBJECT)wx.uploadFile(OBJECT)这几个基本的api的使用方法可以去看微信小程序的官方文档------------官方文档-------这里就不重复赘述了在此谈几点开发中会遇到的问题:1.wx.chooseImage(OBJECT)coun原创 2017-10-19 19:58:28 · 2648 阅读 · 0 评论 -
meta 标签禁止缩放失效
meta 标签禁止缩放失效原创 2017-09-12 17:34:20 · 8615 阅读 · 0 评论 -
Canvas 简介及适配
-----------最近做了一个项目用到canvas(移动端)之前没怎么用过,再此将canvas一些基本用法以及适配的坑分享出来---------------原创 2017-08-23 09:40:59 · 2544 阅读 · 0 评论 -
vue--------之axios的使用与二次封装
注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。npm:$ npm install axiosbower:$ bower install axiosUsing cdn:script src="https://unpkg.com/axios/dist/axios.min.js">script>基本使用方法GET请求// Mak原创 2018-01-02 12:49:52 · 14236 阅读 · 1 评论 -
vue--------------之vue-router如何使用
vue使用params,query传参的区别 vue使用params,query传参的区别 vue-router 的全局路由钩子 vue 路由页面滑动到指定位置原创 2018-01-02 13:30:10 · 1427 阅读 · 0 评论 -
H5-------------- script 标签的 crossorigin 属性有何作用
先来看下使用:src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="shdsfaafa/342/42342/werfadf/GpGFF93hXpG5KkN" crossorigin="anonymous">看起来比以前的写法复杂好多-----------多了一个 int原创 2018-01-31 14:46:54 · 23365 阅读 · 0 评论 -
浅谈Object.defineProperty()
what is Object.definePropertyThe Object.defineProperty() method defines a new property directly on an object, or modifies an exisiting property on an object, and returns the object.从上面得知,我们可以通过 Object...原创 2018-03-12 17:24:07 · 1624 阅读 · 0 评论 -
Vuex的基本使用
在使用Vue的一些小型应用的时候,组件之前的通信场景场景较为简单,状态管理基本在可控范围之内,父子组件之间的通信可以使用props来传递,默认为单向绑定,在vue 1.x版本中可以添加sync实现双向绑定。 但是在vue 2中删除了sync属性,因为当你props传递的链路过长时,万一数据发生了错误,定位问题将是一件很麻烦的事。如果子组件需要向父组件传递数据,可以原创 2018-03-12 10:12:35 · 525 阅读 · 0 评论 -
react中constructor( )和super( )的具体含义以及如何使用
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用;今天整理一下,方便自己查看同时方便大家。1.constructor( )-----super( )的基本含义constructor( )——构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的原创 2018-02-08 16:43:09 · 20021 阅读 · 2 评论 -
前后端分离之SEO优化--------以vue为例
前言----SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。 历史概况:十年前,几乎所有网站都使用 ASP、Java...原创 2018-02-27 15:34:45 · 37607 阅读 · 0 评论