摘要:假设我们正在编写一个渲染广东省地图的页面,目前从第三方资源里获得了广东省的所有城市以及它们所对应的并且成功地渲染到页面中此处我们遍历老数据把它们添加到空对象中然后返回这个对象使用适配器模式可以解决参数类型有些许不一致造成的问题。
策略模式
定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。目的是将算法的使用与算法的实现分离开来。
一个基于策略模式的程序至少由两部分组成:
一组策略类,策略类封装了具体的算法,并且负责具体的计算过程。
环境类Context, Context接受客户的请求,随后把请求委托给某一个策略类。
validator = { validate: function (value, type) { switch (type) { case "isNonEmpty ": { return true; // NonEmpty 验证结果 } case "isNumber ": { return true; // Number 验证结果 break; } case "isAlphaNum ": { return true; // AlphaNum 验证结果 } default: { return true; } } } }; // 测试 alert(validator.validate("123", "isNonEmpty"));
var validator = { // 所有可以的验证规则处理类存放的地方,后面会多带带定义 types: {}, // 验证类型所对应的错误消息 messages: [], // 当然需要使用的验证类型 config: {}, // 暴露的公开验证方法 // 传入的参数是 key => value对 validate: function (data) { var i, msg, type, checker, result_ok; // 清空所有的错误信息 this.messages = []; for (i in data) { if (data.hasOwnProperty(i)) { type = this.config[i]; // 根据key查询是否有存在的验证规则 checker = this.types[type]; // 获取验证规则的验证类 if (!type) { continue; // 如果验证规则不存在,则不处理 } if (!checker) { // 如果验证规则类不存在,抛出异常 throw { name: "ValidationError", message: "No handler to validate type " + type }; } result_ok = checker.validate(data[i]); // 使用查到到的单个验证类进行验证 if (!result_ok) { msg = "Invalid value for *" + i + "*, " + checker.instructions; this.messages.push(msg); } } } return this.hasErrors(); }, // helper hasErrors: function () { return this.messages.length !== 0; } }; // 验证给定的值是否不为空 validator.types.isNonEmpty = { validate: function (value) { return value !== ""; }, instructions: "传入的值不能为空" }; // 验证给定的值是否是数字 validator.types.isNumber = { validate: function (value) { return !isNaN(value); }, instructions: "传入的值只能是合法的数字,例如:1, 3.14 or 2010" }; // 验证给定的值是否只是字母或数字 validator.types.isAlphaNum = { validate: function (value) { return !/[^a-z0-9]/i.test(value); }, instructions: "传入的值只能保护字母和数字,不能包含特殊字符" }; var data = { first_name: "Tom", last_name: "Xu", age: "unknown", username: "TomXu" }; //该对象的作用是检查验证类型是否存在 validator.config = { first_name: "isNonEmpty", age: "isNumber", username: "isAlphaNum" }; validator.validate(data); if (validator.hasErrors()) { console.log(validator.messages.join(" ")); }
通过策略模式,消除了大片的条件分支语句。将算法封装在独立的strategy中,使得它们易于切换,易于理解,易于扩展。同时,算法还可以复用在其他地方,从而避免许多重复的复制粘贴工作。
代理模式代理模式为一个对象提供一种代理以控制对这个对象的访问。
虚拟代理是我们最常用的代理模式,它把一些开销很大的对象,延迟到真正需要用到这个对象的时候才去创建
虚拟代理实现图片预加载
var addImg = (function(){ var img = document.createElement("img"); document.body.appendChild(img); return { setSrc: function(src){ img.src = src; } } })(); var proxyAddImg = (function(){ var img = new Image(); img.onload = function(){ addImg.setSrc(this.src); } return { setSrc: function(src){ addImg.setSrc("loading.gif"); img.src = src; } } })(); proxyAddImg.setSrc("demo.png");
虚拟代理合并Http请求
我们可以通过一个代理函数来收集一段时间之内的请求,最后把请求合并到一起发送给服务器
var proxySynData = (function(){ var cache = [], //缓存我们需要同步的内容 timer; //定时器 return function(ID){ if(!timer){ //定时器不存在就创建 timer = setTimeout(function(){ synData(cache.join()); //同步合并后的数据 cache.length = 0; //清空缓存 clearTimeout(timer); //清除定时器 timer = null; //方便垃圾回收 }, 2000); } cache.push(ID); //存入缓存 } })(); var list = document.getElementsByTagName("input"); for(var i = 0, item; item = list[i]; i++){ item.onclick = function(){ if(this.checked){ proxySynData(this.id); } }; }
缓存代理
缓存代理就很好理解了,可以缓存一些开销很大的运算结果;如果你第二次执行函数的时候,传递了同样的参数,那么就直接使用缓存的结果,如果运算量很大,这可是不小的优化
var add = function(){ var sum = 0; for(var i = 0, l = arguments.length; i < l; i++){ sum += arguments[i]; } return sum; }; var proxyAdd = (function(){ var cache = {}; //缓存运算结果的缓存对象 return function(){ var args = Array.prototype.join.call(arguments);//把参数用逗号组成一个字符串作为“键” if(cache.hasOwnProperty(args)){//等价 args in cache console.log("使用缓存结果"); return cache[args];//直接使用缓存对象的“值” } console.log("计算结果"); return cache[args] = add.apply(this,arguments);//使用本体函数计算结果并加入缓存 } })(); console.log(proxyAdd(1,2,3,4,5)); //15 console.log(proxyAdd(1,2,3,4,5)); //15 console.log(proxyAdd(1,2,3,4,5)); //15观察者模式
观察者模式又叫发布-订阅模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知。
定义一个事件对象,它有以下功能
监听事件(订阅公众号)
触发事件(公众号发布)
移除事件(取订公众号)
// subscription.js var CLEARED = null; var nullListeners = { notify: function notify() {} }; function createListenerCollection() { // the current/next pattern is copied from redux"s createStore code. // TODO: refactor+expose that code to be reusable here? var current = []; var next = []; return { clear: function clear() { next = CLEARED; current = CLEARED; }, notify: function notify() { var listeners = current = next; for (var i = 0; i < listeners.length; i++) { listeners[i](); } }, get: function get() { return next; }, subscribe: function subscribe(listener) { var isSubscribed = true; if (next === current) next = current.slice(); next.push(listener); return function unsubscribe() { if (!isSubscribed || current === CLEARED) return; isSubscribed = false; if (next === current) next = current.slice(); next.splice(next.indexOf(listener), 1); }; } }; } var Subscription = function () { function Subscription(store, parentSub, onStateChange) { _classCallCheck(this, Subscription); this.store = store; this.parentSub = parentSub; this.onStateChange = onStateChange; this.unsubscribe = null; this.listeners = nullListeners; } Subscription.prototype.addNestedSub = function addNestedSub(listener) { this.trySubscribe(); return this.listeners.subscribe(listener); }; Subscription.prototype.notifyNestedSubs = function notifyNestedSubs() { this.listeners.notify(); }; Subscription.prototype.isSubscribed = function isSubscribed() { return Boolean(this.unsubscribe); }; Subscription.prototype.trySubscribe = function trySubscribe() { if (!this.unsubscribe) { this.unsubscribe = this.parentSub ? this.parentSub.addNestedSub(this.onStateChange) : this.store.subscribe(this.onStateChange); this.listeners = createListenerCollection(); } }; Subscription.prototype.tryUnsubscribe = function tryUnsubscribe() { if (this.unsubscribe) { this.unsubscribe(); this.unsubscribe = null; this.listeners.clear(); this.listeners = nullListeners; } }; return Subscription; }();
Redux采用了观察者模式
createStore(rootReducer,initialState,applyMiddleware(thunkMiddleware))返回值:
(1) dispatch(action): 用于action的分发,改变store里面的state
(2) subscribe(listener): 注册listener,store里面state发生改变后,执行该listener。返回unsubscrib()方法,用于注销当前listener。
(3) getState(): 读取store里面的state
(4) replaceReducer(): 替换reducer,改变state修改的逻辑
所以store内部维护listener数组,用于存储所有通过store.subscribe注册的listener;当store tree更新后,依次执行数组中的listener
function subscribe(listener) { if (typeof listener !== "function") { throw new Error("Expected listener to be a function."); } var isSubscribed = true; ensureCanMutateNextListeners(); nextListeners.push(listener); 了 return function unsubscribe() { if (!isSubscribed) { return; } isSubscribed = false; ensureCanMutateNextListeners(); var index = nextListeners.indexOf(listener); nextListeners.splice(index, 1); }; }
dispatch方法主要完成两件事:
1、根据action查询reducer中变更state的方法,更新store tree
2、变更store tree后,依次执行listener中所有响应函数
function dispatch(action) { if (!(0, _isPlainObject2["default"])(action)) { throw new Error("Actions must be plain objects. " + "Use custom middleware for async actions."); } if (typeof action.type === "undefined") { throw new Error("Actions may not have an undefined "type" property. " + "Have you misspelled a constant?"); } if (isDispatching) { throw new Error("Reducers may not dispatch actions."); } try { isDispatching = true; currentState = currentReducer(currentState, action); } finally { isDispatching = false; } //循环遍历,执行listener,通知数据改变 var listeners = currentListeners = nextListeners; for (var i = 0; i < listeners.length; i++) { var listener = listeners[i]; listener(); } return action; }在redux中,我们用connect()方法将react中的UI组件与redux的状态、事件关联起来。
var Connect = function (_Component) { _inherits(Connect, _Component); /* * 构造函数中,构造一个订阅对象,属性有this.store,方法this.onStateChange.bind(this) */ function Connect(props, context) { _classCallCheck(this, Connect); var _this = _possibleConstructorReturn(this, _Component.call(this, props, context)); _this.version = version; _this.state = {}; _this.renderCount = 0; _this.store = props[storeKey] || context[storeKey]; _this.propsMode = Boolean(props[storeKey]); _this.setWrappedInstance = _this.setWrappedInstance.bind(_this); (0, _invariant2.default)(_this.store, "Could not find "" + storeKey + "" in either the context or props of " + (""" + displayName + "". Either wrap the root component in a装饰者模式, ") + ("or explicitly pass "" + storeKey + "" as a prop to "" + displayName + "".")); _this.initSelector(); _this.initSubscription(); return _this; } ··· // 调用store.subscribe(listener)注册监听方法,对store的变化进行订阅,当store变化的时候,更新渲染view Connect.prototype.componentDidMount = function componentDidMount() { if (!shouldHandleStateChanges) return; this.subscription.trySubscribe(); // //实际调用this.store.subscribe(this.onStateChange); this.selector.run(this.props); if (this.selector.shouldComponentUpdate) this.forceUpdate(); }; ··· Connect.prototype.componentWillUnmount = function componentWillUnmount() { if (this.subscription) this.subscription.tryUnsubscribe(); // 取消订阅 this.subscription = null; this.notifyNestedSubs = noop; this.store = null; this.selector.run = noop; this.selector.shouldComponentUpdate = false; }; ··· //初始化订阅逻辑 Connect.prototype.initSubscription = function initSubscription() { if (!shouldHandleStateChanges) return; var parentSub = (this.propsMode ? this.props : this.context)[subscriptionKey]; this.subscription = new _Subscription2.default(this.store, parentSub, this.onStateChange.bind(this)); //调用的是Subscription.js中方法,向store内部注册一个listener---this.onStateChange.bind(this) this.notifyNestedSubs = this.subscription.notifyNestedSubs.bind(this.subscription); }; Connect.prototype.onStateChange = function onStateChange() { this.selector.run(this.props); if (!this.selector.shouldComponentUpdate) { this.notifyNestedSubs(); } else { this.componentDidUpdate = this.notifyNestedSubsOnComponentDidUpdate; this.setState(dummyState); } }; ··· return Connect; }(_react.Component);
在不改变对象自身的基础上,在程序运行期间给对象动态地添加一些额外职责
// 给window绑定onload事件 window.onload = function() { alert(1) } var _onload = window.onload || function(){} //维护中间变量,但是如果装饰链太长,或需要的装饰函数太多,这些中间变量的数量就会越来越多 window.onload = function() { _onload() alert(2) } //可能会存在this被劫持问题 var getId = document.getElementById; //全局函数,this指向window document.getElementById = function(ID){ console.log(1); return getId(ID); } document.getElementById("demo"); //this预期指向document //需要手动把document当做上下文this传入getIdAOP装饰函数
AOP(Aspect Oriented Programming)面向切面编程
把一些与核心业务逻辑无关的功能抽离出来
再通过“动态织入”方式掺入业务逻辑模块
// 前置装饰 Function.prototype.before = function(beforeFunc){ var that = this; //保存原函数的引用 return function(){ //返回了了包含原函数和新函数的代理函数 beforeFunc.apply(this, arguments); // 执行新函数 return that.apply(this, arguments); //执行原函数并返回原函数的执行结果 } } document.getElementById = document.getElementById.before(function() { alet(1) })
//定义一个组件 class Home extends Component { //.... } //以往从状态树取出对应的数据,通过props传给组件使用通过react-redux自带的connect()方法 export default connect(state => ({todos: state.todos}))(Home); //使用装饰器的话就变成这样,好像没那么复杂 @connect(state => ({ todos: state.todos })) class Home extends React.Component { //.... }适配器模式
适配器模式是作为两个不兼容的接口之间的桥梁,它结合了两个独立接口的功能。
假设我们正在编写一个渲染广东省地图的页面,目前从第三方资源里获得了广东省的所有城市以及它们所对应的ID,并且成功地渲染到页面中:
var getGuangdongCity = function () { var GuangdongCity = [ { name:"shenzhen", id : "11" }, { name:"guangzhou", id:12 } ]; return GuangdongCity; }; var render = function (fn) { console.log("starting render Guangdong map"); document.write(JSON.stringify(fn())); }; /* var GuangdongCity = { // shenzhen:11, // guangzhou:12, // zhuhai:13 // }; */ var addressAdapter = function (oldAddressfn) { var address = {}, oldAddress = oldAddressfn(); for(var i = 0 , c; c = oldAddress[i++];){ address[c.name] = c.id; //此处我们遍历老数据把它们添加到空对象中然后返回这个对象 } return function () { return address; } }; render(addressAdapter(getGuangdongCity));
使用适配器模式可以解决参数类型有些许不一致造成的问题。
redux为了和react适配,所有有 mapStateToProps()这个函数来把state转为Props外部状态,这样就可以从外部又回到组件内了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94866.html
摘要:动态生成随机下单页面的为了避免用户直接访问下单需要将动态化,用随机数作为参数,只能秒杀开始的时候才生成。该文件不被缓存的做法随机数。浅谈秒杀系统架构设计如何只允许,第一个提交的单进入订单系统。未超过秒杀商品总数,提交到子订单系统。 秒杀是电子商务网站常见的一种营销手段。 原则 不要整个系统宕机。 即使系统故障,也不要将错误数据展示出来。 尽量保持公平公正。 实现效果 秒杀开始前,...
摘要:作用域链保证对环境中定义的变量和函数的有序访问。通俗来说,执行环境和作用域就是变量或函数有效执行所在的一个环境。总结要想搞清作用域,首先要搞清预解析,然后判断作用域范围,先判断本层环境有无声明及赋值,如果有声明,则判断调用前是否赋值。 这几天看了一下JS高级程序设计里的介绍作用域的章节,也参考了网上的资料,现在结合着自己的理解,给大家分享一下我自己对JS作用域的理解。 作用域及执行环境...
摘要:最后再说一下程序方面,因为小编是一名制作,所以程序方面的配合了解到的也就是平常项目中经常遇到的。最后做一下总结,在一个项目的进行中,设计制作程序三者之间是密不可分的,而各个部分之间需要相互配合,才能将项目做的更好。 以下是我在平常工作中所遇到的,文笔不是很好,求大神轻喷。在项目进行的过程中,主要分为设计--制作--程序这三个步骤,首先先从设计页面开始,包括页面上面的诸多效果在内。而制作...
摘要:最后再说一下程序方面,因为小编是一名制作,所以程序方面的配合了解到的也就是平常项目中经常遇到的。最后做一下总结,在一个项目的进行中,设计制作程序三者之间是密不可分的,而各个部分之间需要相互配合,才能将项目做的更好。 以下是我在平常工作中所遇到的,文笔不是很好,求大神轻喷。在项目进行的过程中,主要分为设计--制作--程序这三个步骤,首先先从设计页面开始,包括页面上面的诸多效果在内。而制作...
摘要:还有一个问题,就是不能在创建子类性时,像父类型的构造函数传递参数。组合继承将原型链和借用构造函数组合到一起,发挥两者之长的一张继承模式,下面来看个例子。组合继承最大的问题是无论在什么情况下,都会调用两次父类型构造函数。 继承 继承是面向对象语言中特别重要的概念,js的继承主要是靠原型链实现的。 原型链!!! 看到我给标题打了三个叹号吗,这里真的很重要!这里真的很重要!这里真的很重要!j...
阅读 4723·2021-11-15 11:39
阅读 2691·2021-11-11 16:55
阅读 2200·2021-10-25 09:44
阅读 3504·2021-09-22 16:02
阅读 2433·2019-08-30 15:55
阅读 3122·2019-08-30 13:46
阅读 2656·2019-08-30 13:15
阅读 1944·2019-08-30 11:12