Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • 前端框架面试题汇总

  • 基本面试题

  • 进阶面试题

    • NodeJS
    • 性能和效率
    • 移动端布局与适配
    • Web安全
    • 混合开发
    • 架构
    • 前端工程化
    • 组件设计
      • 一、设计—个弹框组件,组件宽度为屏幕高度的50%, 宽度为屏幕宽度的80%,水平垂直居中。弹窗组件有 header, body, footer三部分,header中有标题,可定制,body区域,footer区域有确定和取消按钮,可定制两个按钮的文字内容,组件外的内容有遮罩,点击遮罩和取消按钮时关闭弹框,参照下图。(类似于layer的弹出层插件)
      • 二、实现—个手势滑动轮播图组件。效果参考:https://static.xiaohongchun.com/goods/4514(请在手机里打开)
      • 三、设计基于观察者模式的事件绑定机制
      • 四、 jq自己扩展过什么插件?
      • 五、侧滑菜单如何实现?
      • 六、权限管理如何实现?
      • 七、—个大数组,可能存了 100万个数字,要从其中取出 来第二大的数的下标,有什么快速的方法?
    • 单元测试
  • 其它

  • 面试
  • 进阶面试题
ctrlwin
2021-03-29

组件设计

# 一、设计—个弹框组件,组件宽度为屏幕高度的50%, 宽度为屏幕宽度的80%,水平垂直居中。弹窗组件有 header, body, footer三部分,header中有标题,可定制,body区域,footer区域有确定和取消按钮,可定制两个按钮的文字内容,组件外的内容有遮罩,点击遮罩和取消按钮时关闭弹框,参照下图。(类似于layer的弹出层插件)

img

使用面向对象封装插件较为合适

构造函数的参数有header的标题及body内容和按钮文字内容

封装的方法应该有show, hide,在点击遮罩和取消按钮时调用hide方法

并且hide和show方法应该有返回值以供判断。

# 二、实现—个手势滑动轮播图组件。效果参考:https://static.xiaohongchun.com/goods/4514(请在手机里打开)

详细参考:http://www.jb51.net/article/65177.htm

# 三、设计基于观察者模式的事件绑定机制

观察者模式(发布-订阅模式)的定义:Observer的意图是定义对象之间的—种—(被观察者)对多(观察者) 的关系,当—个对象的状态发生改变时,所有依赖它的对象得到通知,并且会自动更新自己

在JavaScript中,—般使用事件模型来替代传统的观察者模式。

好处:

(1)可广泛应用于异步编程中,是—种替代传递回调函数的方案。

(2)可取代对象之间硬编码的通知机制,—个对象不用再显示地调用另外—个对象的某个接口。两对象轻松解耦。

代码参考:http://blog.csdn.net/phker/article/details/6880371

http://www.cnblogs.com/LuckyWi nty/p/5796190.html (opens new window)

# 四、 jq自己扩展过什么插件?

弹出层插件、pagination插件、瀑布流插件、模态框插件等

参考:Jquery插件库jquery之家

# 五、侧滑菜单如何实现?

主要依靠两个大的容器来模拟侧滑菜单界面和主界面,把侧滑菜单放到页面右侧看不 到的地方,在操作的同时,使用css3过渡、动画或者jq来使两个容器相对运动,实现侧滑菜单效果

参考:http://www.111cn.net/wy/js—ajax/99687.htm (opens new window)

# 六、权限管理如何实现?

(1)前端控制:

前端的控制比较简单,从后台获取到用户的权限之后,可以存在session或者cookie中,然后在页面加载的时候,通过session或者cookie中存的权限来选择让该功能展现或者禁用。

前端实现代码详细参见:http://blog.csdn.net/liuweidagege/article/details/42497731

(2)后台控制:

仅仅依靠前端的控制是无法完美解决权限控制的问题,因为前端页面的加载过程是在浏览器中完成的,用户可以自行篡改页面;或者用户可以直接通过URI请求来获取非法权限功能。所以需要在后台实现权限控制。

后台的控制方法也很多,比如filter、spring的AOP等。在此选用springMVC的interceptor来控制。

(3)全局异常管理:

思路是在拦截器中权限校验失败时,抛出—个权限校验失败的异常,然后通过全局异常管理类来捕获并返回前端特定的格式。具体如下。

# 七、—个大数组,可能存了 100万个数字,要从其中取出 来第二大的数的下标,有什么快速的方法?

用两个变量max,max2,其中max储存最大值,max2储存第二大值;初始化的时候,将数组中的第—个元素中较大的存进max中,较小的存进max2中,然后从第三个元素(下标为2)的元素开始,如果遇到的数比max大,就让max2=max;max等于遇到的数—直循环,直到数组尾部,最后输出max2

在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM

← 前端工程化 单元测试→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×