- 博客(49)
- 收藏
- 关注
RSS订阅
原创 angular Elements自定义组件使用（一） 可用于任意框架(vue,react,h5...)
借鉴文献：https://medium.com/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b当前angular版本: v 9.1.2第一步: 创建需要用在其他项目中的自定义组件ng g m web-component 创建业务模块 ng g c test -创建自定义组件import { BrowserModu..
2020-07-13 18:21:51
1572
转载 mergeAll,switchAll,switchMap和mergeMap细节区别
假设现在有一个简单的任务：页面上有一个按钮，当你点击按钮的时候，需要启动一个定时器。使用 RxJS 我们可以可以很方便地实现上述功能： 12345678 import { fromEvent, interval } from 'rxjs';const button = document.querySelector('button');fro...
2019-05-30 17:37:26
3158
原创 对Promise链式操作一种聪明的用法
this.getRes = () => { return new Promise(res, rej) { setTime(() => { res('success') }, 1000) }.then((res) => { console.log(res) return...
2019-03-23 17:47:14
177
原创 JSON Web Token
JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。1、用户向服务器发送用户名和密码。2、服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等。3、服务器向用户返回一个 session_id，写入用户的 Cookie。4、用户随后的每一次请求，都会通过 Cookie，将 session_id 传回服务器。5、服务器收到 ses
2020-05-13 14:30:56
215
原创 关于 package.json 和 package-lock.json 文件说明，区别
package.json在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。package.json 属性说明：name - 包名； version - 包的版本号； description - 包的描述； homepage - 包的官网URL； author - 包的作者，它的值是你在 https://npmj
2020-05-12 16:09:21
247
原创 写一下常用的ES6 import export规则
import * as actions from '.../'这里把.../目录所有export的接口全部集合成actions对象，可以用actions.a actions.b去取export 和 export default用法区别在一个js模块中，export可以有无数多个如果模块只有一个接口/方法/变量， 可以直接用export defalut () => {}...
2019-04-11 00:36:36
476
原创 box-shadow各种阴影小工具
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <style> .shadow div{ float:left; margin:...
2019-04-03 10:44:27
569
原创 严选taro项目request Promise链式操作一点理解
redux中定义request请求回调export function createAction(options) { const { url, payload, method, fetchOptions, cb, type } = options return (dispatch) => { return fetch({ url, payload, method, ......
2019-03-23 17:54:00
1721
转载 rxjsSubject、BehiverSubject区别
Subject 昨天我们讲到了 Subject 实际上就是 Observer Pattern 的实作，他会在内部管理一份 observer 的清单，并在接收到值时遍历这份清单并送出值，所以我们可以这样用 Subject var subject = new Rx.Subject(); var observerA = { next: value => console.log('A nex...
2019-03-21 11:58:35
316
原创 Promise.all方法使用
let p1 = new Promise((res, rej) => {setTimeout(()=>{res(111);}, 1000);})let p2 = new Promise((res, rej) => {setTimeout(()=>{rej(222);}, 2000);})let p3 = new Promise((re...
2019-01-11 16:39:23
334
原创 函数节流与防抖区别详细理解
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就...
2019-01-03 10:49:34
218
原创 angular2+ 引用layDate日期选择插件
layDate日期选择插件使用npm安装好像是行不通的，但angular2+的日期选择控件库又不能够支持时分秒的选择在angular项目中引用layDate1. 首先官网下载layDate独立版，把laydate文件夹下的文件放入assets文件夹下 2. 在angular-cli.json文件里添加 "styles": [ "assets/theme/defau...
2018-12-27 11:11:21
353
原创 angularJS自带筛选方法
ng-repeat="item in vm.school_list | filter: {searchName : vm.school_alias.toLowerCase()}"<li ng-repeat="user in data.users | filter:{name:search}:{account:search}> <li ng-repeat="user in d...
2018-12-26 23:50:26
397
原创 对象转化成数组
search_alias() { this.school_list = this.school_list_params; let count_list = []; for (const key in this.school_list) { if((this.school_list[key]['alias'].toLowerCa...
2018-12-26 23:49:58
444
原创 防止抖动的简单写法:(实现搜索功能)
var timeout; this.$scope.$watch(()=>{return this.school_alias}, (inputText) => { if (inputText) { if(timeout) { this.$...
2018-12-26 23:49:41
1672
原创 打开新标签页跳转某网站
gotoWebsite(e, v) { e.stopPropagation(); //正则表达式判断字符串是否为网址 var RegUrl = new RegExp(); RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"); if (!RegUrl.tes...
2018-12-26 23:48:57
765
原创 四种常见状态颜色
.completed{ background: #7ED321; } .ongoing{ background: #F5A623; } .hurry{ background: #D0021B; } .nostart{ border:1px solid #979797; ...
2018-12-26 23:47:35
8268
1
原创 autocomplete的使用方法总结，直接套用
<md-autocomplete md-no-cache="false" md-min-length="0" md-selected-item="vm.selectedItem" md-search-text="vm.searchText" md-items="item in vm.querySearch(vm.searchText,vm.list)" md-item-tex..
2018-12-26 23:46:56
1894
原创 点击打开新标签页
openInterview() { window.open(`#!/module/application/${this.user_id}/interview`); }
2018-12-26 23:46:39
659
原创 angularJSDialog打开代码:
function showMoreController(){ row.close = false; this.postData = row; this.title = that.head[flag]['name']; that.$scope.$watch(()=> {return this.pos...
2018-12-26 23:45:59
412
原创 事件监听，$watch(a, b)，a可用箭头函数return一个变量，如果此变量改变，执行b，b中可带两个参数(newVal, oldVal)
that.$scope.$watch(()=> {return this.postData.close}, (newVal) => { if(newVal){ td = Object.assign(td,this.postData) that.DialogService.hi...
2018-12-26 23:45:36
467
转载 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop简易分析
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop2017.04.18 14:37 6427浏览每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区...
2018-12-05 11:52:38
76
原创 angular JS中 ‘=’与angular.copy的区别
先来看代码：<b>{{test1}}</b><input type="text" ng-model="test2" title="test" />$scope.list = 'band';$scope.editModi = function(idx){ $scope.editItem = $scope.list; }..
2018-11-14 10:51:07
178
原创 angular安装部署的坑
1、打包前在app.module.ts中加入import { LocationStrategy, HashLocationStrategy } from '@angular/common';providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },],2、检查所有的静态文件应该以assets/开头...
2018-09-29 23:09:02
238
原创 关于angular2动画效果以及缓动动画相关
animations: [ trigger('square', [ state('green', style({'background': 'green', 'height': '100px', 'transform': 'translateY(-100%)'})), state('red', style({'background': 'red', 'heig...
2018-09-29 19:27:28
575
转载 CentOS7安装git
yum -y install gitPermission denied (publickey). fatal: Could not read from remote repository. 博主在github上下载tiny face的的源代码的时候，遇到git clone命令为：git clone --recursive git@github.com:peiyunh/tiny.git...
2018-09-20 17:01:08
244
转载 服务器Centos7安装NODE.JS
2、选择一个合适的版本下载2、安装步骤1、将安装包上传到指定位置(我习惯放到：/usr/local/application/目录)，并解压1 tar -xvf node-v10.6.0-linux-x64.tar.xz2、重命名文件夹1 mv node-v10.6.0-linux-x64 nodejs3、通过建立软连接变为全局1 ln -s /usr/lo...
2018-09-20 16:35:02
220
原创 cookie操作函数
什么是cookie?cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。有关cookie的例子：名字 cookie当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welc...
2018-09-01 18:55:03
962
原创 angular6.x路由配置重定向问题
更新了angularCLI之后发现原有的{ path: '**', component: HomeComponent }无法使用，现在使用下边的方法:{ path: '**', redirectTo: 'home', pathMatch:'full' }
2018-08-30 09:35:59
1452
2
原创 angularJS使用$scope.est绑定后，变量更新页面不更新的解决方法
$scope.$apply(function(){ $scope.est = "Just A Test!" })
2018-08-28 16:59:00
1003
原创 动态添加a标签可复用导出.csv模块代码
function exportCsv(obj){ //title ["","",""] var title = obj.title; //titleForKey ["","",""] var titleForKey = obj.titleForKey; var data
2018-08-28 16:26:32
244
原创 关于Webpack里边static和assets目录区别
一针见血把。static放经常更改的图，比如商品图之类的。assets放很少修改的比如logo、小图标等。static一般使用绝对路径，/static/...assets一般使用相对路径...
2018-06-08 12:52:20
3394
原创 Rem手淘
使用Flexible实现手淘H5页面的终端适配作者：大漠 日期：2015-11-19 点击：204469双11前端技术连载Layoutmobile编辑推荐：诚征广告商金主入驻此广告位置，如有感兴趣的金主，欢迎邮件至：airenliao@gmail.com咨询相关合作事宜!!!(^_^)曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理...
2018-06-07 19:07:53
319
转载 淘宝Rem自动转换器
vue2.0 类淘宝不同屏幕适配及px与rem转换问题因为项目需要，vue开发项目，必须将已写的以px为单位的部分，转换为rem。要是全部转换，这大量的计算量，哪怕是sublime Text 的cssrem插件，也是一个庞大的工作量。所以，直接使用插件没商量。举例子：1、iphone62、iphone5第一步：因为rem是根据更元素来计算大小，所以，捕捉到当前屏幕的大小并赋值给html，这是其一第...
2018-06-07 18:29:20
1349
原创 Vue自定义全局组件以及Vue.use()使用前提
废话不多说，直接上图第一步，创建components文件夹，目录结构如下需要讲解的是，index.js负责向外边express和定义Vue.ues()Loading.vue里边就放着模版、script、style第二步，定义Vue.use()并且exportLoading第三步，在main.js中引入并Vue.use()第四步，在任意地方使用全局组件...
2018-06-06 20:42:25
10715
原创 关于本地Mock测试api的使用规则
/*用mock模拟*/ Mock.mock('http://test.advance.ai/login',(options)=>{ console.log(options); return Mock.mock({ "username":"admin", "password":123456 }) });使用axiosaxio...
2018-06-06 15:34:57
707
原创 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程（自用）
1、vue-cil构建项目：官网的介绍vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。我们不需要知道它究竟是什么，只需要知道它是一个工具帮助我们辅助开发，而我们所要做的就是安装上它，来方便我们的开发。下面，我们来用vue-cil构建一个项目。首先，我们在终端中把当前目录定位到你准备存放项目的地方。即自己定义的一个目录下面我们首先需要安装vue-cil。我...
2018-06-04 11:18:30
2720
原创 vue2.0生命周期以及钩子函数使用规则及例子
vue是现在的热门前端框架之一，采用了虚拟dom，稍微介绍一下虚拟dom的概念。在使用原生js的时候，我们总数需要去获取dom元素，这样的话，每次要获取元素都要操作一次dom,我们就要执行一次，那么我们就要考虑如何减少操作的次数，虚拟dom就是为这个考虑而设计的。先简单介绍几个钩子函数，因为现在已经跟新到了vue2.0,因此，将主要介绍vue2.0的。beforeCreated:我们在用Vue时都...
2018-06-03 16:42:43
677
原创 关于table标签创建不规则表格的流程
1、<table border="1" width="1000" style = "border- text-align:margin: 0 auto;">指定table宽度、边框、以及边框合并2、给td加高度table tr td {height:50px}3、接下来说明一个思路，如果第一行的标题td不添加colspan直接写了宽度为100%的话，会规定第一行只有一列，接下来的几行不...
2018-05-31 16:46:01
4471
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人