首页 发现 帮助
登录
chuck
/
custom-tool-function
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

字符串处理、事件、订阅与发布

DESKTOP-MK04A0R\chuck 3 年之前
父节点
e54492cbfb
当前提交
0f3872401d
共有 7 个文件被更改，包括 261 次插入 和 0 次删除
分列视图 显示文件统计
  1. 17 0
      08/index.html
  2. 29 0
      08/src/index.js
  3. 72 0
      09/index.html
  4. 56 0
      09/src/index.js
  5. 35 0
      10/index.html
  6. 48 0
      10/src/index.js
  7. 4 0
      README.md

+ 17 - 0
08/index.html
查看文件 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./src/index.js"></script>
 
+</head>
 
+<body>
 
+    <script>
 
+        console.log(reverseString('123456'))
 
+        console.log(palindrome('123321'))
 
+        console.log(truncate('123456',4))
 
+    </script>
 
+</body>
 
+</html>

+ 29 - 0
08/src/index.js
查看文件 

@@ -0,0 +1,29 @@
 
+/**
 
+ * 字符串反转
 
+ * @param {*} str 
+ * @returns 
+ */
 
+function reverseString(str){
 
+    //let arr = str.split('')
 
+    let arr = [...str]
 
+    arr.reverse()
 
+    let s = arr.join('')
 
+    return s
 
+}
 
+/**
 
+ * 判断是否是回文字符串
 
+ * @param {*} str 
+ * @returns 
+ */
 
+function palindrome(str){
 
+    return reverseString(str) === str
 
+}
 
+/**
 
+ * 字符串截断
 
+ * @param {*} str 
+ * @param {*} size 
+ * @returns 
+ */
 
+function truncate(str,size){
 
+    return str.slice(0,size) + '...'
 
+}

+ 72 - 0
09/index.html
查看文件 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./src/index.js"></script>
 
+    <style>
 
+        #outter{
 
+            width:200px;
 
+            background:red;
 
+            height:200px;
 
+        }
 
+        #inner{
 
+            width:100px;
 
+            background:green;
 
+            height:100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="outter">
 
+        <div id="inner"></div>
 
+    </div>
 
+    <ul id="items">
 
+        <li>1111</li>
 
+        <li>2222</li>
 
+        <li>3333</li>
 
+        <li>4444</li>
 
+        <li>5555</li>
 
+        <div>666</div>
 
+    </ul>
 
+    <script>
 
+        //1、事件捕获冒泡-- 先触发outer
 
+        let outter = document.querySelector('#outter')
 
+        let inner = document.querySelector('#inner')
 
+        outter.addEventListener('click',function(){
 
+            console.log('捕获outter')
 
+        },true)   // true 是否为捕获
 
+        inner.addEventListener('click',function(){
 
+            console.log('捕获inner')
 
+        },true)   // true 是否为捕获
 
+        outter.addEventListener('click',function(){
 
+            console.log('冒泡outter')
 
+        })   // true 是否为捕获
 
+        inner.addEventListener('click',function(){
 
+            console.log('冒泡inner')
 
+        })   // true 是否为捕获
 
+
 
+        //2、事件委托函数封装
 
+        addEventListener('#items','click',function(e){
 
+            console.log(this.innerHTML)
 
+        },'li')
 
+
 
+        //3、手写事件总线 -- 一个事件绑定多个回调
 
+        eventBus.on('login',data=>{
 
+            console.log(data+'2222')
 
+        })
 
+        eventBus.on('login',data=>{
 
+            console.log(data+'3333')
 
+        })
 
+        //触发
 
+        setTimeout(()=>{
 
+            eventBus.emit('login','张三')
 
+        },2000)
 
+        //注销事件
 
+        eventBus.off('login')
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 56 - 0
09/src/index.js
查看文件 

@@ -0,0 +1,56 @@
 
+/**
 
+ * 事件委托函数封装
 
+ * @param {*} el 
+ * @param {*} type 
+ * @param {*} fn 
+ * @param {*} selector 
+ */
 
+function addEventListener(el,type,fn,selector){
 
+    if(typeof el === 'string'){
 
+        el = document.querySelector(el)
 
+    }
 
+    if(!selector){
 
+        el.addEventListener(type,fn)
 
+    }else{
 
+        //事件委托
 
+        el.addEventListener(type,function(e){
 
+            //获取点击事件源
 
+            const target = e.target
 
+            if(target.matches(selector)){
 
+                fn.call(target,e)
 
+            }
 
+        })
 
+    }
 
+}
 
+
 
+/**
 
+ * 手写事件总线 -- 一个事件绑定多个回调
 
+ */
 
+const eventBus = {
 
+    //保存类型和回调的容器
 
+    callbacks:{}
 
+}
 
+//注册事件
 
+eventBus.on = function(type,callback){
 
+    if(this.callbacks[type]){
 
+        this.callbacks[type].push(callback)
 
+    }else{
 
+        this.callbacks[type] = [callback]
 
+    }
 
+}
 
+//触发事件
 
+eventBus.emit = function(type,data){
 
+    if(this.callbacks[type] && this.callbacks[type].length > 0){
 
+        this.callbacks[type].forEach(callback => {
 
+            callback(data)
 
+        });
 
+    }
 
+}
 
+//注销事件
 
+eventBus.off = function(eventName){
 
+    if(eventName){
 
+        delete this.callbacks[eventName]
 
+    }else{
 
+        this.callbacks[type] = {}
 
+    }
 
+}

+ 35 - 0
10/index.html
查看文件 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./src/index.js"></script>
 
+</head>
 
+<body>
 
+    
+    <script>
 
+        //订阅一个频道
 
+        let pid = PubSub.subscribe('pay',data=>{
 
+            console.log('商家接到了订单')
 
+            console.log(data)
 
+        })
 
+        let pid2 = PubSub.subscribe('cancel',data=>{
 
+            console.log('骑手接到了订单')
 
+            console.log(data)
 
+        })
 
+        console.log(PubSub)
 
+        //发布消息
 
+        PubSub.publish('pay',{
 
+            title:'hihi',
 
+            price:20,
 
+            pos:'youxi'
 
+        })
 
+
 
+        //取消订阅
 
+        PubSub.unsubscribe('token_1')
 
+        console.log(PubSub)
 
+    </script>
 
+</body>
 
+</html>

+ 48 - 0
10/src/index.js
查看文件 

@@ -0,0 +1,48 @@
 
+
 
+const PubSub = {
 
+    id:1,
 
+    callbacks:{
 
+        // pay:{
 
+        //     token_1:fn,
 
+        //     token_2:fn2
 
+        // }
 
+    }
 
+}
 
+//订阅
 
+PubSub.subscribe = function(channel,callback){
 
+    let token = "token_" + this.id++
 
+    if(this.callbacks[channel]){
 
+        this.callbacks[channel][token] = callback
 
+    }else{
 
+        this.callbacks[channel] = {
 
+            [token]:callback
 
+        }
 
+    }
 
+    return token
 
+}
 
+//发布
 
+PubSub.publish = function(channel,data){
 
+    if(this.callbacks[channel]){
 
+        Object.values(this.callbacks[channel]).forEach(callback=>{
 
+            callback(data)
 
+        })
 
+    }
 
+}
 
+/**
 
+ * 取消订阅
 
+ * @param {*} flag 
+ */
 
+PubSub.unsubscribe = function(flag){
 
+    if(flag === undefined){
 
+        this.callbacks = {}
 
+    }else if(typeof flag === 'string'){
 
+        if(flag.indexOf('token_') === 0){
 
+            let callbackObj = Object.values(this.callbacks).find(obj=>obj.hasOwnProperty(flag))
 
+            if(callbackObj){
 
+                delete callbackObj[flag]
 
+            }
 
+        }else{
 
+            delete this.callbacks[flag]   
+        }
 
+    }
 
+}

+ 4 - 0
README.md
查看文件 

@@ -6,6 +6,10 @@
 
 * 05 es6数组函数封装 map、reduce、filter、find、findIndex、every、some
 
 * 06 数组的去重、合并、slice、扁平化、分块、差集、删除、获取
 
 * 07 对象创建、类型比对、合并、浅拷贝、深拷贝
 
+* 08 字符串函数
 
+* 09 事件：捕获和冒泡、事件委托、手写事件总线
 
+* 10 消息订阅与发布
 
+
 
 ## 运行
 
 npm i
 
 npm start