weixin_43249993的博客

3-7策略模式实例之电影票打折 某电影院售票系统为不同类型的用户提供了不同的打折方式(Discount)，学生凭学生证可以享受8折优惠(StudentDiscount)，儿童可以享受减免10元的优惠(ChildrenDiscount)，VIP用户享受半折优惠还可以进行积分(VIPDiscount)。使用策略模式设计该系统，结合场景绘制相应的类图并编码实现。

此项目为外卖App核心的商家模块的SPA，包括商品、评论、商家介绍、购物车等多个子模块，使用Vuejs全家桶+ES6+Webpack等前端最新最热的技术，采用模块化、组件化、工程化的模式开发； 显示/隐藏优惠和公告详情 <template> <div class="header"> <div class="content-wrapper"> <div class="avatar"> <img width="64" height="64"src="seller.avatar"> </div> <div class="content"> <div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span> </div> <div class="description"> {{seller.description}}/{{seller.deliveryTime}}分钟到达 </div> <div class="support" v-if="seller.supports"> <span class="icon" :class="classMap[seller.supports[0].type]"></span> <span class="text">{{seller.supports[0].description}}</span> </div> </div> <div class="supports_count" v-if="seller.supports" @click="showDetail(true)"> <span class="count">{{seller.supports.length}}个</span> <span class="icon-keyboard_arrow_right"></span> </div> </div> <div class="bulletin-wrapper" @click="showDetail(true)"> <span class="bulletin-title"></span> <span class="bulletin-text">{{seller.bulletin}}</span> <i class="icon-keyboard_arrow_right"></i> </div> <div class="background"> <img width="100%" height="100%"src="seller.avatar"> </div> <div class="detail" v-show="detailShow"> <div class="detail-wrapper"> <div class="detail-main clearfix"> <div class="name">{{seller.name}}</div> <div class="star-wrapper">star组件内容</div> <div class="title"> <div class="line"></div> <div class="text">优惠信息</div> <div class="line"></div> </div> <ul class="supports" v-if="seller.supports"> <li class="support" v-for="item in seller.supports"> <span class="icon" :class="classMap[item.type]"></span> <span class="text">{{item.description}}</span> </li> </ul> <div class="title"> <div class="line"></div> <div class="text">商家公告</div> <div class="line"></div> </div> <div class="content"> <p>{{seller.bulletin}}</p> </div> </div> </div> <div class="detail-close" @click="showDetail(false)"> <span class="icon-close"></span> </div> </div> </div> </template> [removed] export default{ props: { seller: { type: Object } }, data () { return { detailShow: false } }, created () { this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"] }, methods: { showDetail (isShow) { this.detailShow = isShow } } } [removed]

这个文档包含了HTML/css的一些基础，还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX、jQuery的一些总结，还有些Web前端与移动开发面试宝典； 6、什么是事件冒泡/捕获？ 事件冒泡： 事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，也就是子元素事件的触发会影响父元素的事件； 开关事件冒泡： A，开启事件冒泡：event.addEventListener(eventName，handler，false)； B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过e.stopPropagation()来关闭事件冒泡； C ,return false; 同时具有阻止冒泡和阻止默认行为的功能 事件捕获：父元素的事件会影响子元素的事件； 开启事件捕获：event.addEventListener(eventName，handler，true) 7、请说说事件委托机制？这样做有什么好处？ 事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。 打个比方：一个 button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己 的点击事件。 优点： A，提高性能：列如，当有很多li同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每 一个li注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。 B，新添加的元素还会有之前的事件； 11、怎么理解jQuery？ JQuery就是JavaScript和查询（Query），是一个Javascript库。可以用来操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax等。 优点： a、轻量级 b、具有强大的选择器 c、封装了大量的DOM操作 d、事件处理机制相当可靠 e、完善的Ajax f、不污染顶级变量 g、出色的浏览器兼容性 h、链式操作方式 i、隐式迭代 j、行为与结构分离 k、支持丰富的插件 l、完善的文档 m、开源 12、Jquery.on这个方法怎么看？ 答： jQuery.on()方法可以给匹配元素（可以是多个）绑定一个或多个函数, off 可以解除绑定

js基本ECMAScript的基本语法，还有ECMAScript的内置对象，比如Math、Date、arr、函数、对象等一些总结