![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
cyh的前端学习之路
锋芒神话霜
自学前端的小萌新
展开
-
ES6切换图片项目完整点击切换逻辑
Img.prototype._bind = function() { methods.$('.__Img__classify' , this.wrap).addEventListener('click',({target}) =>{ if(target.nodeName !== 'LI') return; const type = targ...原创 2020-03-30 07:09:41 · 265 阅读 · 0 评论 -
项目:通过ES6实现图片切换里的通过分类获取图片的方法
//根据分类获取图片 Img.prototype._getImgsByType = function (type) { return type === '全部' ? [...this.all] : this.classified[type].map(index => this.all[index]) //如果不是,就从ALL里面取出所有相应type的图片 }...原创 2020-03-29 06:10:28 · 224 阅读 · 0 评论 -
JS语法之:map()方法
https://blog.csdn.net/liminwang0311/article/details/86480829转载 2020-03-18 04:39:18 · 200 阅读 · 0 评论 -
内置对象,原生对象和宿主对象的区别
https://www.jianshu.com/p/6997a465583e转载 2020-02-18 10:59:28 · 324 阅读 · 0 评论 -
原生JS获取HTML元素的八种方法
https://blog.csdn.net/china_dou/article/details/83154800转载 2020-02-18 10:56:34 · 357 阅读 · 0 评论 -
ES6类的定义和自执行类
//类表达式const Person = class P { constructor(){ console.log(P) P.a = 1 }}new Person()const A = new class C{ constructor(){ console.log('我是自执行类') }}()上面给定义的类一个自己的名字主要是方便万一以后...原创 2020-02-12 06:37:57 · 305 阅读 · 0 评论 -
queryselector和queryselectorall的区别
Msg.prototype._show = function(el,overlay) { document.body.append(el); document.body.append(overlay); setTimeout(function() { el.style.transform = 'translate(-50%, -50%) scale(1, ...原创 2020-02-11 05:39:11 · 584 阅读 · 0 评论 -
使用promise.all来实现所有图片都加载完成后才一起出现的效果
const loadImg = (src) => { return new Promise((resolve, reject) => { const img = new Image() img.src = src img.onload = ()=>{ resolve(img) ...原创 2020-02-10 04:20:37 · 1445 阅读 · 0 评论 -
promise.all和promise.race
function getData1(){ return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('第1条数据加载成功') resolve('data1') },1000) }) }function getData...原创 2020-02-08 16:33:55 · 105 阅读 · 0 评论 -
promise函数常用配合对象以及状态的区分
function f(val) { return new Promise((resolve, reject) => { if(val){ resolve({name: '小明'}) } else{ reject('404') } }) }f(false).then((data) ...原创 2020-02-08 05:35:53 · 121 阅读 · 0 评论 -
promise使用实例
//这是旧版回调写法// function moveTo(el,x,y,cb){// el.style.transform = `translate(${x}px,${y}px)`// setTimeout(function(){// cb && cb()// },1000)// }// let el = document.q...原创 2020-02-08 04:47:00 · 119 阅读 · 0 评论 -
forin和for fo区别的个人理解
for in一般用于...转载 2020-02-05 23:10:34 · 1690 阅读 · 1 评论 -
html调用带参数的自执行js的方法
JS部分// 初始化一个弹出框// 生成dom元素// 插到页面中// 显示(function(window, document) { let Msg = function(options) { this._init(options); } Msg.prototype._init = function({ content = '' }) { this.co...原创 2020-02-03 15:11:29 · 1136 阅读 · 0 评论 -
解构赋值获取字符串长度,注意const后面跟着的是花括号
const str = 'i am the stone bone'const [a,b,c,...oth] = strconsole.log("TCL: a,b,c,...oth", a,b,c,...oth) //一个是一个字符const {length,split} = str原创 2020-02-03 05:16:47 · 849 阅读 · 1 评论 -
解构赋值的函数的乱序传参和乱序接收返回值
function AJAX({ url, data, type = 'get'}){ console.log("TCL: AJAX", AJAX) //解构乱序传参}AJAX({ url: '/getinfo', data: { a: 1 },})function getUserInfo(uid) { // ...ajax return { s...原创 2020-02-03 05:16:22 · 156 阅读 · 0 评论 -
千万注意解构赋值强调顺序而不是包含,还有const常量解构赋值时出现重名的解决方法
const player = { nickname: '感情的戏∫我没演技∆', master: '东海龙王', skill: [{ skillName: '龙吟', mp: '100', time: 6000 },{ skillName: '龙卷雨击', mp: '400', time: 3000 },{ skillName: '龙腾', mp: '90...原创 2020-02-03 01:10:37 · 298 阅读 · 0 评论 -
运用解构赋值得到函数返回的多个参数
function getUserInfo(id){ return [ true, { name:'xiaoming', sex:'male', age:'18', id:id }, '请求成功' ]}const [sta...原创 2020-02-03 00:42:12 · 393 阅读 · 0 评论 -
自己定义一个freeze方法
//我们自己定义的freeze方法Object.defineProperty(Object,'freezePolyFill'),{ value: function(obj){ var i for(i in obj){ if(obj.hasOwnProperty(i)){ Object.defineP...原创 2020-02-02 01:20:41 · 234 阅读 · 0 评论 -
微信小程序标准切换状态
onLoad: function (options) { var postId = options.id console.log("文章ID",postId) this.data.currentPostId = postId var postData = postsData.postList[postId] this.setData({postData})...原创 2020-02-01 04:29:03 · 222 阅读 · 0 评论 -
微信小程序wx:id和wx:else
<view class="circle-img"> <image wx:if="{{collected}}" bindtap="onCollectionTap" src="/images/icon/collection.png"></image> <image wx:else bindtap="onCollectionTap" s...原创 2020-01-31 23:30:38 · 492 阅读 · 0 评论 -
微信小程序通过文章不同的id去往不同的页面
onPostTap: function(e){ var postId = e.currentTarget.dataset.postid; wx.navigateTo({ url: 'post-detail/post-detail?id='+postId, }) },注意navigateto的写法,这是标准的分离ID的写法,至于上面的id,来自于我们在w...原创 2020-01-29 05:41:03 · 719 阅读 · 0 评论 -
微信小程序模板里使用扩展运算符
<template name="PostItem"> <view class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{item.headImgSrc}}"></image> ...原创 2020-01-28 14:32:55 · 671 阅读 · 0 评论 -
小程序,双向数据绑定的要点
<block wx:for="{{post_key}}" wx:for-item="item"> <view class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{item.headImgSrc...原创 2020-01-27 23:39:49 · 156 阅读 · 0 评论 -
美团项目计算图表上的红色小字
function changeDot(){ var $counts = $strTop.find('.count'); var total = 0; for(let i = 0 ; i < $counts.length; i++){ total += parseInt($($counts[i]).text()); } if (total>0){ $...原创 2020-01-13 03:05:24 · 194 阅读 · 0 评论 -
美团项目数据传导,关于用点击事件给json添加项目
(function(doc, win){//顶部模板字符串 var itemTopTmpl = `<div class="choose-content"> <div class="content-top"> <div class="clear-car">清空购物车</...原创 2020-01-07 02:30:33 · 136 阅读 · 0 评论 -
(极重要)在jquery中给jquery对象挂载数据以及不同js间的调用和传值
//这里因为外面穿入了data,我们就不自己get了function getList(data){ var list =data; initRightList(list);}//渲染列表 parma arrayfunction initRightList(list){ $('.right-list-inner').html(''); list.forEach((it...原创 2020-01-01 17:42:42 · 568 阅读 · 0 评论 -
jquery美团项目绑定点击事件
//左侧模板类目 var itemTmpl = `<div class="menu-item"> <img class="img" src="$picture" /> <div class="menu-item-right"> <...原创 2020-01-01 17:29:12 · 115 阅读 · 0 评论 -
CSS中自带的改善滑动的方法,以及弹性布局中的一种比较少见的居中方法
.menu-inner .left-bar{ width: 85px; background-color: #efefef; overflow: auto; height: 100%; -webkit-overflow-scrolling: touch;}.menu-inner .item-text{ line-height: 1.6rem; align-self...原创 2019-12-26 01:02:14 · 135 阅读 · 0 评论 -
vertical-align来调整同一父元素下子元素的垂直对齐,用他的具体数据值
vertival-align一般和display:inline-block配合,来调整同一父元素下子元素的垂直对齐.menu-inner .item-icon{ width: .533333rem; height: .533333rem; display: inline-block; margin-right: .16rem; vertical-align: -0.10666...原创 2019-12-25 22:02:15 · 228 阅读 · 0 评论 -
利用css来做伪类居中的方法
.tab-bar .tab-item{ flex: 1; height: 1.2rem; line-height: 1.2rem; position: relative; color: #666; text-align: center; text-decoration: none;}.tab-bar .tab-item.active::after{ conten...原创 2019-12-25 02:33:06 · 1359 阅读 · 1 评论 -
使用伪类快速定位一个图标
.items li{ height: 1.2rem; font-size: .373333rem; position: relative; padding-left: .693333rem; margin-left: .4rem; border-bottom: .026667rem solid #e4e4e4; line-height: 1.2rem;}.items...原创 2019-12-24 03:55:06 · 236 阅读 · 0 评论 -
replace方法里简单的全局替换
var itemTmpl = `<a class="$key btn-item" href="../$key/$key.html"> <div class="tab-icon"></div> <div class="btn-name">$text</div> ...原创 2019-12-24 01:36:50 · 836 阅读 · 0 评论 -
关于replace方法改变模板字符串数据时的数据传递问题
// @param string 获取数据function getList(){ $.get("../../json/orders.json", function (data, textStatus, jqXHR) { console.log("我是订单数据组",data); var list = data.data.digestlist || []; ...原创 2019-12-23 03:36:49 · 242 阅读 · 0 评论 -
meituan项目里的渲染星级的方法,json里是一个浮点数
我们在模块js里写好逻辑之后通过window方法发射出来,在上级js里通过new的形式让系统自己去找到发射出来的方法,下面的this.score和 _getStars方法里的this.score是一样的,下面的方法同理,这个this.score的score来自被调用的时候所用的参数,也就是json里的wm_poi_score var itemTmpl = `<div class="sta...原创 2019-12-22 22:27:31 · 148 阅读 · 0 评论 -
占位符后面一定不能紧跟标签截止符
'<img class="item-img" src=$pic_url />'这样是对的'<img class="item-img" src=$pic_url/>'如果这样写的话这个/会被记录到网址里,谨记原创 2019-12-21 17:43:15 · 88 阅读 · 0 评论 -
父元素如果子元素都进行了浮动的话,父元素需要清除浮动,否则父元素高度会有问题
.clearfix:before,.clearfix:after{ content: " "; display: inline-block; height: 0; clear: both; visibility: hidden;}原创 2019-12-21 16:20:37 · 932 阅读 · 0 评论 -
单行文字溢出后省略的轮子
.one-line{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}原创 2019-12-21 03:10:39 · 54 阅读 · 0 评论 -
jq和js实现滚动加载
首先纪律性的定义page和isLoadingvar page = 0;var isLoading = false;// 获取商家列表function getList(){ page++; isLoading = true; $.getJSON("../json/homelist.json", (data, textStatus, jqXHR) => { ...原创 2019-12-21 02:46:04 · 90 阅读 · 0 评论 -
利用pathname来定位被激活的模块
//根据url来确定key值 var arr = window.location.pathname.split('/'); console.log('我是以/为分隔的pathname',arr); var page = arr[arr.length-1].replace('.html',''); //给key值对应的模块加上active console.lo...原创 2019-12-21 01:55:48 · 168 阅读 · 0 评论 -
关于flex布局下子元素居中的问题,关于align-item和flex:1
父元素只用设定display:flex,每个子元素都设定flex:1相当于每个子元素宽度一样,之后再子元素内部再使用item-align:center居中里面的东西比较好原创 2019-12-20 23:26:17 · 755 阅读 · 0 评论