叶小钗

【blade利刃出鞘】一起进入移动端webapp开发吧

前言

在移动浪潮袭来的时候，小钗有幸进入框架组做webapp框架开发，过程中遇到了移动端的各种坑，也产生了各种激情，就我们公司的发展历程来说

第一阶段：使用传统方式开发移动站点，少量引入HTML5元素

第二阶段：框架化，使用jquery mobile框架，发现慢，组件不好管理，不好维护给搞掉了

第三阶段：jquery+Backbone的组合，最后为了瘦身将jquery换成了zepto

第四阶段：框架适应Hybrid版本，Hybrid相关频道与H5站点一套代码，业务扩展遍地开花

第五阶段：框架适应ipad版本/实现前端ABTesting，由于不可控原因，计划夭折

框架使用过程中需要快速适应业务需求，框架中过多的掺杂了业务代码，并且随之发展，框架本身的耦合度、设计不合理的地方也体现了出来

小钗虽然知道哪里有问题，但框架的代码不是想象那么好改，一个API的改变会导致整个业务线的崩溃，听之任之又很不爽

开发一套干净webapp框架的想法油然而生，于是该框架便出现了

诚然，此框架比不上Backbone、比不了anglarJS，毕竟小钗的资历、水平有限，所以框架本身可能都会有一些缺陷，但作为初步接触前端的同学

或者想在前端看到一些设计思想的同学，或者想在移动webapp试水的公司。此框架还是有一些他一些优势，我们带着看看不吃亏的想法，还是可以看看嘛！！！

也希望各位多多支持，代码写的不好也在提高，因为小钗不是专业的重构，其中的CSS及DOM结构全部由在线网站down下来了，这里是抄袭我说清楚了哦。

① 这次首先出一篇大体介绍性文章，简单结束

② 而后有1,2篇博客对其中的全局MVC相关做说明，这里使用了hashChange与pushState两种方案

③ 然后对其中的UI继承关系做梳理，并拿其中比较复杂的几个UI组件说一下设计思路，预计会有3-5篇

④ 最后根据反馈对框架做一些调整，效果好的话，我也试试捐赠，我们家的左小萌居然也在搞捐赠，我觉得我也该搞个！！！

框架主要用途还是自我学习交流，以及框架思维整理，BUG在所难免，若是有BUG请给我留言！

框架简介

快速浏览

想简单看看demo的朋友请到： http://yexiaochai.github.io/blade/

对源码有兴趣的朋友请入：https://github.com/yexiaochai/blade

若是PC端浏览请使用chrome浏览器，不用谢我叫雷锋，若是只有IE的同学请装chrome暂时抛弃IE

支持情况

由于做是个人框架，并且是学习，框架便抛弃了一些系统现在支持情况是

IOS6+

android4+

那些手机不过千的浏览器上渲染可能会有问题，至于wp或者低版本兼容，小钗便需要看后续精力与工作强度

框架发展

第一期-MVC

该框架第一期的目标是简单的webapp MVC的实现，现在也基本实现了，app支持hashChange与pushState两种方式做路由加载view

对此有兴趣的同学可以看看helloWord，关于app与页面级View的关系如下：

第二期-通用工具

框架第二期的想法是，完善本身一些通用的东西，比如UI组件或者简单的flip手势工具等

这里小钗不是专业的前端，就直接从线上将公司的CSS Down下来了，也用了他的Dom结构但是

整个组件的扩展非常方便，有兴趣的同学看看UI一块的代码，UI的继承关系如下：

第三期-ABTesting

框架第三期目标是实现前端ABTesting方案

第四期-ipad适配

框架第四期的目标是一套业务代码，可以同时用于mobile与ipad

第五期-Hybrid

框架第五期目标是实现Hybrid交互适配，由于小钗本身不懂native开发所以此方案要靠后

随机期-疑难杂症

框架还会单开一个频道做一些疑难杂症处理，比如： ① fixed问题 ② 区域滚动问题 ③ app唤醒 ④ History路径问题等

目录简介

有些项目文件或者不相关的文件我们不予关注，整个框架代码在blade文件目录中主要

demo在demo中......

dest为框架打包后的文件

doc用于存放一些文档，暂时还未补齐，我的想法是博客作为文档，因为后期会源码解析，并分析设计思维

grunt存放着打包文件

helloworld为最简单的入门代码，教我们如何进入webapp开发

res存放资源样式文件，这里是直接用的别人的

test用于存放测试用例，当然现在很多用例未加上......

Helloworld

要进入webapp开发非常简单，只需要将代码下载下来即可，其中helloworld异常简单

blade框架每个页面为一个页面片，一个页面片对应一个js文件，并且可能会对应一个html模板文件

一个频道的运行只需要这些文件即可（其实有点多的），最外层的index.html是基本入口

 1 doctype html>
 2 
 3 <html class="ie">
 4 
 5 <html>
 6   <head>
 7     <meta charset="utf-8" />
 8     <title>hello worldtitle>
 9     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
10     <meta content="telephone=no" name="format-detection" />
11     <meta name="apple-mobile-web-app-capable" content="yes" />
12     <link href="../res/style/style.css" rel="stylesheet" type="text/css" />
13 
14   head>
15   <body onselectstart="return false">
16 
17     <script src="../blade/libs/require.js" type="text/javascript">script>
18 
19     <script src="../blade/libs/zepto.js" type="text/javascript">script>
20     <script src="../blade/libs/underscore.js" type="text/javascript">script>
21     <script src="../blade/libs/underscore.extend.js" type="text/javascript">script>
22     <script src="../blade/libs/fastclick.js" type="text/javascript">script>
23 
24     <script src="../blade/common.js" type="text/javascript">script>
25     <script type="text/javascript" src="./main.js">script>
26   body>
27 html>

他这里引入了源码文件，我这里未做任何处理，实际使用请参考demo的dest.html

可以看到，js入口为对应的main.js：

 1 (function () {
 2 
 3   window.getViewTemplatePath = function (path) {
 4     return 'text!helloworld/templates/' + path + '.html';
 5   }
 6 
 7   require.config({
 8     baseUrl: '../',
 9     paths: {
10     }
11   });
12 
13   require(['AbstractApp'], function (App) {
14     //实例化App
15     var app = new App({
16       'defaultView': 'index',
17       'viewRootPath': 'helloworld/views/'
18     });
19 
20   });
21 })();

那里引入了我们全局抽象App，并进行了实例化，这个时候整个代码便开始运行了，这里默认加载的是index View

 1 define(['AbstractView', getViewTemplatePath('index')], function (View, viewhtml) {
 2   return _.inherit(View, {
 3     onCreate: function () {
 4       this.$el.html(viewhtml);
 5       console.log('大家好，我是omCreate事件，我会执行并且只会执行一次');
 6     },
 7 
 8     events: {
 9       'click h2': function (e) {
10         this.forward('list');
11       },
12         'click .icon_home': function () {
13         window.location = '../index.html';
14       }
15     },
16 
17     onPreShow: function () {
18       console.log('大家好，我是onPreShow事件，我每次都会执行，执行最后执行turning方法便可显示view');
19       this.turning();
20     },
21 
22     onShow: function () {
23       console.log('大家好，我是onShow事件，我在onPreShow执行turning后会执行');
24 
25     },
26 
27     onHide: function () {
28       console.log('大家好，我是onHide事件，每次切换我将隐藏时候我会触发');
29     }
30 
31   });
32 });

View Code

我们每个View皆是继承至MVC中的View，对于业务层的View只需要关注上面四个事件点即可，描述文字写的比较清楚了，我这里便不多说了

这个时候直接运行index.html便会默认加载index.js的逻辑代码，webapp卡片设计由此开始

demo

是否引入第三方组件？

demo中会列举出框架中的一些UI组件与一些通用功能的API，并做简单示例，一个框架是否好用的一个标识便是其API是否丰富好用

blade这里还需要很多努力，这里还望各位多多提点

稍微成熟点的公司一般不会使用什么第三方组件，什么创业团队就最喜欢使用第三方的插件，或者通用功能，我原来就见过一个公司：

① 需要一个弹出层组件便引用国外的，1000-2000行代码，功能非常全面

② 需要一个flip手势工具也引用一个第三方的，代码500-2000行，功能非常全面

但是一来程序员抓不住其中的关键，一旦遇到不能适应项目的功能便完蛋了，这个时候对程序员的水准要求便高了可能需要源码修改

往往完全读懂后却发现自己只是需要其中的一点点功能而已，这个时候很有可能会重写，或者寻找另外的库，所以只有2B公司才会完全依赖什么第三方库

一般放出来的库文件，都是十分全面，会满足很多场景，但是你只会用到一个，或者你基本适用，但是总有一个两个地方不适用，那么怎么办呢？再从新引入一个第三方库么？？？

这样的话产品前端代码便会越发臃肿难以维护，并且BUG无数，又烂又慢。

demo简介

算了，这里扯远了，回到demo中来，demo中的代码逻辑便稍微复杂一点了，首先他存在着两个入口文件，分别是：

① debug.html 用于调试，其中的所有文件皆是源码形式

② dest.html 这个文件稍有不同，其使用的框架文件和控制器js文件全部被grunt打包好了，我们这里不存在Ajax数据请求，所以整个浏览不会发生请求延时，按道理来说比较快

dest目录便是装的压缩后的文件，我们其实将所有相关文件全部打包至了其中的dest/main.js，包括模板文件，这个多亏grunt与requireJS之功

整个demo的设计我们放到下一章节再说，这里简单描述下，其中比较关键的是ex_mvc中的文件，顾名思义，他代表对框架mvc的扩展

扩展的基石是继承，业内前端面试一道必考提便是继承，但是前端真正使用该技术的人感觉不多，很多前端都喜欢堆代码，还停留在面向过程。

blade这里便对js的继承做了一个很好的示例，希望对js的继承、面向对象知识点有所了解的朋友，不妨看看两个MVC中的代码有何不同

 1 define(['AbstractView', 'cHighlight'], function (AbstractView, cHighlight) {
 2 
 3   var hljs = new cHighlight();
 4 
 5   hljs.registerLanguage("javascript", function(a) {
 6     return {aliases: ["js"],k: {keyword: "in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal: "true false null undefined NaN Infinity",built_in: "eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require"},c: [{cN: "pi",b: /^\s*('|")use strict('|")/,r: 10}, a.ASM, a.QSM, a.CLCM, a.CBLCLM, a.CNM, {b: "(" + a.RSR + "|\\b(case|return|throw)\\b)\\s*",k: "return throw case",c: [a.CLCM, a.CBLCLM, a.REGEXP_MODE, {b: /;/,r: 0,sL: "xml"}],r: 0}, {cN: "function",bK: "function",e: /\{/,c: [a.inherit(a.TM, {b: /[A-Za-z$_][0-9A-Za-z$_]*/}), {cN: "params",b: /\(/,e: /\)/,c: [a.CLCM, a.CBLCLM],i: /["'\(]/}],i: /\[|%/}, {b: /\$[(.]/}, {b: "\\." + a.IR,r: 0}]}
 7 });
 8 hljs.registerLanguage("xml", function(a) {
 9     var c = "[A-Za-z0-9\\._:-]+";
10     var d = {b: /<\?(php)?(?!\w)/,e: /\?>/,sL: "php",subLanguageMode: "continuous"};
11     var b = {eW: true,i: /]+/}]}]}]};
12     return {aliases: ["html"],cI: true,c: [{cN: "doctype",b: "",r: 10,c: [{b: "\\[",e: "\\]"}]}, {cN: "comment",b: "",r: 10}, {cN: "cdata",b: "<\\!\\[CDATA\\[",e: "\\]\\]>",r: 10}, {cN: "tag",b: "|$)",e: ">",k: {title: "style"},c: [b],starts: {e: "",rE: true,sL: "css"}}, {cN: "tag",b: "|$)",e: ">",k: {title: "script"},c: [b],starts: {e: "<\/script>",rE: true,sL: "javascript"}}, {b: "<%",e: "%>",sL: "vbscript"}, d, {cN: "pi",b: /<\?\w+/,e: /\?>/,r: 10}, {cN: "tag",b: "",c: [{cN: "title",b: "[^ /><]+",r: 0}, b]}]}
13 });
14 hljs.registerLanguage("markdown", function(a) {
15     return {c: [{cN: "header",v: [{b: "^#{1,6}",e: "$"}, {b: "^.+?\\n[=-]{2,}$"}]}, {b: "<",e: ">",sL: "xml",r: 0}, {cN: "bullet",b: "^([*+-]|(\\d+\\.))\\s+"}, {cN: "strong",b: "[*_]{2}.+?[*_]{2}"}, {cN: "emphasis",v: [{b: "\\*.+?\\*"}, {b: "_.+?_",r: 0}]}, {cN: "blockquote",b: "^>\\s+",e: "$"}, {cN: "code",v: [{b: "`.+?`"}, {b: "^( {4}|\t)",e: "$",r: 0}]}, {cN: "horizontal_rule",b: "^[-\\*]{3,}",e: "$"}, {b: "\\[.+?\\][\\(\\[].+?[\\)\\]]",rB: true,c: [{cN: "link_label",b: "\\[",e: "\\]",eB: true,rE: true,r: 0}, {cN: "link_url",b: "\\]\\(",e: "\\)",eB: true,eE: true}, {cN: "link_reference",b: "\\]\\[",e: "\\]",eB: true,eE: true,}],r: 10}, {b: "^\\[.+\\]:",e: "$",rB: true,c: [{cN: "link_reference",b: "\\[",e: "\\]",eB: true,eE: true}, {cN: "link_url",b: "\\s",e: "$"}]}]}
16 });
17 hljs.registerLanguage("css", function(a) {
18     var b = "[a-zA-Z-][a-zA-Z0-9_-]*";
19     var c = {cN: "function",b: b + "\\(",e: "\\)",c: ["self", a.NM, a.ASM, a.QSM]};
20     return {cI: true,i: "[=/|']",c: [a.CBLCLM, {cN: "id",b: "\\#[A-Za-z0-9_-]+"}, {cN: "class",b: "\\.[A-Za-z0-9_-]+",r: 0}, {cN: "attr_selector",b: "\\[",e: "\\]",i: "$"}, {cN: "pseudo",b: ":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"}, {cN: "at_rule",b: "@(font-face|page)",l: "[a-z-]+",k: "font-face page"}, {cN: "at_rule",b: "@",e: "[{;]",c: [{cN: "keyword",b: /\S+/}, {b: /\s/,eW: true,eE: true,r: 0,c: [c, a.ASM, a.QSM, a.NM]}]}, {cN: "tag",b: b,r: 0}, {cN: "rules",b: "{",e: "}",i: "[^\\s]",r: 0,c: [a.CBLCLM, {cN: "rule",b: "[^\\s]",rB: true,e: ";",eW: true,c: [{cN: "attribute",b: "[A-Z\\_\\.\\-]+",e: ":",eE: true,i: "[^\\s]",starts: {cN: "value",eW: true,eE: true,c: [c, a.NM, a.QSM, a.ASM, a.CBLCLM, {cN: "hexcolor",b: "#[0-9A-Fa-f]+"}, {cN: "important",b: "!important"}]}}]}]}]}
21 });
22 hljs.registerLanguage("json", function(a) {
23     var e = {literal: "true false null"};
24     var d = [a.QSM, a.CNM];
25     var c = {cN: "value",e: ",",eW: true,eE: true,c: d,k: e};
26     var b = {b: "{",e: "}",c: [{cN: "attribute",b: '\\s*"',e: '"\\s*:\\s*',eB: true,eE: true,c: [a.BE],i: "\\n",starts: c}],i: "\\S"};
27     var f = {b: "\\[",e: "\\]",c: [a.inherit(c, {cN: null})],i: "\\S"};
28     d.splice(d.length, 0, b, f);
29     return {c: d,k: e,i: "\\S"}
30 });
31 
32 
33   return _.inherit(AbstractView, {
34 
35     propertys: function ($super) {
36       $super();
37 
38     },
39 
40     _initHead: function () {
41 
42       this.$('header').append($(''));
43     },
44 
45     events: {
46       'click .returnico': function () {
47         this.back('index');
48       }
49     },
50 
51     initialize: function ($super, app, id) {
52       $super(app, id);
53 
54       this._initHead();
55     },
56 
57     onPreShow: function ($super) {
58       $super();
59 
60     },
61 
62     show: function ($super) {
63       $super();
64 
65       hljs.initHighlighting(this);
66 
67     }
68 
69 
70   });
71 
72 });

View Code

这里代码比较简单，主要是继承至AbstractView，然后做了demo项目的一些通用工作

其中有一大段代码是对代码高亮做处理的，这里小钗可耻的引用了一个第三方库。。。。。。

实现继承的代码在underscore.extend中，这段代码需要各位仔细研读，是本项目的基石。

//继承相关逻辑
(function () {

  // 全局可能用到的变量
  var arr = [];
  var slice = arr.slice;
  /**
  * inherit方法，js的继承，默认为两个参数
  *
  * @param  {function} origin  可选，要继承的类
  * @param  {object}   methods 被创建类的成员，扩展的方法和属性
  * @return {function}         继承之后的子类
  */
  _.inherit = function (origin, methods) {

    // 参数检测，该继承方法，只支持一个参数创建类，或者两个参数继承类
    if (arguments.length === 0 || arguments.length > 2) throw '参数错误';

    var parent = null;

    // 将参数转换为数组
    var properties = slice.call(arguments);

    // 如果第一个参数为类（function），那么就将之取出
    if (typeof properties[0] === 'function')
      parent = properties.shift();
    properties = properties[0];

    // 创建新类用于返回
    function klass() {
      if (_.isFunction(this.initialize))
        this.initialize.apply(this, arguments);
    }

    klass.superclass = parent;

    // 父类的方法不做保留，直接赋给子类
    // parent.subclasses = [];

    if (parent) {
      // 中间过渡类，防止parent的构造函数被执行
      var subclass = function () { };
      subclass.prototype = parent.prototype;
      klass.prototype = new subclass();

      // 父类的方法不做保留，直接赋给子类
      // parent.subclasses.push(klass);
    }

    var ancestor = klass.superclass && klass.superclass.prototype;
    for (var k in properties) {
      var value = properties[k];

      //满足条件就重写
      if (ancestor && typeof value == 'function') {
        var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');
        //只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定）
        if (argslist[0] === '$super' && ancestor[k]) {
          value = (function (methodName, fn) {
            return function () {
              var scope = this;
              var args = [
                function () {
                  return ancestor[methodName].apply(scope, arguments);
                }
              ];
              return fn.apply(this, args.concat(slice.call(arguments)));
            };
          })(k, value);
        }
      }

      //此处对对象进行扩展，当前原型链已经存在该对象，便进行扩展
      if (_.isObject(klass.prototype[k]) && _.isObject(value) && (typeof klass.prototype[k] != 'function' && typeof value != 'fuction')) {
        //原型链是共享的，这里处理逻辑要改
        var temp = {};
        _.extend(temp, klass.prototype[k]);
        _.extend(temp, value);
        klass.prototype[k] = temp;
      } else {
        klass.prototype[k] = value;
      }

    }

    if (!klass.prototype.initialize)
      klass.prototype.initialize = function () { };

    klass.prototype.constructor = klass;

    return klass;
  };

})();

继承基石

总的来说，各个view页面卡片的代码存放与views里面，对应的模板文件存放与templates中，具体原理我们后面点说明

业务入口与全局控制器

这里入口的js文件为main.js，这个是最为关键一个js，我们将里面的动画相关逻辑去掉，来看看主干代码：

 1 (function () {
 2   var project = 'demo/';
 3 
 4   window.getViewTemplatePath = function (path) {
 5     return 'text!' + project + 'templates/' + path + '.html';
 6   }
 7 
 8   require.config({
 9     baseUrl: '../',
10     paths: {
11       'View': project + 'ex_mvc/view'
12     }
13   });
14 
15   var animations = {};
16 
17   require(['AbstractApp'], function (App) {
18     //实例化App
19     var app = new App({
20       //选择pushState还是hashChange
21       hasPushState: false,
22       'defaultView': 'index',
23       'viewRootPath': '' + project + 'views/',
24       animations: animations
25     });
26     
27   $.bindFastClick && $.bindFastClick();
28 
29   });
30 })();

核心代码是17-27行，这里首先做了一些初始化变量定义，然后使用requireJS引入了我们的全局控制器，这个文件虽然不到400行，却是整个框架的最大核心！

全局控制器的工作

这里点一下便是，后续我们会详解之，这里简单介绍全局控制器app应该干的事情

① 提供URL解析机制，以便让控制器可以根据URL获得当前是要加载哪个view的实例，比如

http://www.baidu.com/index.html#index

http://www.baidu.com/index

若是使用hashChange实现浏览器跳转便直接取出index这个键值；

若是使用pushState方案的话，便需要业务同事给出取出URL键值的方法，最终我们需要得到index这个键值

② app应该保留各个view的实例，并且维护一个队列关系

以现在博客园为例，我们可能具有两个view页面片：index->detail

我们首次便是加载index这个view，点击其中一个项目便加载detail这个view，这个时候app是应该同时保存两个view，并且内部要维系一个访问顺序队列

这个队列最好可与浏览器保存一致，若不能保存一致，后期便可能会出现点击浏览器后退死循环的问题

③ app应该提供view实例化的方法

所以的view实例若无特殊原因，皆应该由app生成，app应该具有实例化view的能力，view一般使用AMD规范管理，这里涉及异步加载

PS：真实工作环境中，view需要自建一套事件机制，比如实例化时候要触发什么事件，显示时候要触发什么事件，皆需要有，app只会负责

实例化->显示->隐藏

④ app应该提供监控浏览器事件，每次自动加载各个view

如上面所述，app会注册一个hashChange事件或者popState事件以达到改变URL不刷新页面的功能，这个功能主要用于用户点击浏览器原生后退键

可扩展性/共性与继承

blade的构想是高扩展性，比如我们核心的MVC的代码即可被继承扩展

无论是AbstractView还是AbstractAPP或者AbstractModel，皆是可继承扩展的

我们后面会根据需要以AbstractApp继承一个ipadAPP版本出来

我们也会根据AbstractModel继承至十月localstorage缓存请求数据的版本

AbstractView的继承扩展更是家常便饭

以上是MVC的扩展，完了就是UI组件的扩展，简单由日历组件的demo来看

我只需要提供简单的实现，用户几行代码便可以实现假日日历，很多公司会出现价格日历，也仅仅是几行代码的事情

我们可以继承下来做单独实现，也可在实例化时候传入数据解决，总之这里的观点便是

UI需要寻找共性，做抽象，而不是重复编码

再以弹出层类为例：

我们的alert、toast、bubble.layer（冒泡层），皆是继承至ui.layer，这样做的好处是什么呢？

简单来说他们具有以下共性：

① 都需要mask蒙版，也可以不具有

② 点击mask可关闭

③ 居中排列

④ 以绝对定位的形式出现

于是我们可以轻易实现这样的代码：

 1 return _.inherit(UIView, {
 2 
 3     //默认属性
 4     propertys: function ($super) {
 5       $super();
 6       this.mask = new UIMask();
 7 
 8       //需要蒙版
 9       this.needMask = true;
10 
11       //需要点击蒙版删除
12       this.maskToHide = true;
13 
14       //需要居中定位
15       this.needReposition = true;
16 
17     },
18 
19     initialize: function ($super, opts) {
20       $super(opts);
21 
22       this.clearRes();
23     },
24 
25     //资源清理
26     clearRes: function () {
27       //      if (this.needMask == false) this.mask = null;
28     },
29 
30     addEvent: function () {
31       this.on('onCreate', function () {
32         this.$el.addClass('cui-layer');
33       });
34 
35       this.on('onPreShow', function () {
36         var scope = this;
37 
38         if (this.needMask) {
39           this.mask.show();
40         }
41 
42         if (this.needMask && this.maskToHide) {
43           //mask显示之前为mask绑定关闭事件，一次执行便不予理睬了
44           this.mask.$el.on('click.uimask' + this.mask.id, function () {
45             scope.hide();
46           });
47         }
48 
49       });
50 
51       this.on('onShow', function () {
52         if (this.needReposition) this.reposition();
53         this.setzIndexTop();
54       });
55 
56       this.on('onHide', function () {
57         this.mask.$el.off('.uimask' + this.mask.id);
58         this.mask.hide();
59 
60       });
61 
62     },
63 
64     //弹出层类垂直居中使用
65     reposition: function () {
66       this.$el.css({
67         'margin-left': -($(this.$el).width() / 2) + 'px',
68         'margin-top': -($(this.$el).height() / 2) + 'px'
69       });
70     }
71 
72   });

View Code

至于气泡弹层当然不是居中的，于是气泡弹层中只需要重写掉repositon接口罢了

前端经常会提到继承，经常会提到闭包，但是到底如何使用继承，或者闭包是什么，还是必须真正使用才能掌握

若是不使用就不会真正明白，那么如何成为优秀的前端，如何成为前端架构只是空想！更何论站在顶端呢？

PS：当然，小钗这里有点扯淡，并不是说小钗是高手，其实我在公司也只是小码农

结语

好了，扯着扯着，就扯多了，今天暂时到此，其实也没有什么好介绍的，代码在那里各位自己看吧，若是有什么问题请给位留言

最后，各位若能点一下推荐，或者在git中为我加一颗心便善莫大焉了

后面点，小钗会对框架进行源码解读，希望对入门级的前端朋友有所帮助，也不知道各位是否感兴趣

你可能感兴趣的:(【blade利刃出鞘】一起进入移动端webapp开发吧)

芦花鞋一四许叶晗
又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
随笔 | 仙一般的灵气海思沧海
仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
谢谢你们，爱你们！鹿游儿
昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
那个抄袭的大张伟猫小努
最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
相信相信的力量孙丽_cdb3
孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰
我的黑历史袖手围观有来有去
孩子同学与我们一起共进晚餐，俩孩子加我三个人。小同学是一个大方率性礼貌的小孩，我们也都非常喜欢。好了，回到正题上来让我把这个故事讲完。俩孩子都喜欢吃鱼，所以就发生了小孩子之间常会发生的事。我狠狠的盯了我家孩子，孩子表情有些狼狈。和孩子单独一起的时候，见她尚未释怀，并谴责我不该狠盯她，让她没面子。也许是她触动了我的童年往事吧。由此，一狠心，给她讲了一段埋藏心里极深的黑历史：我奶奶有四个儿子，四个儿子
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
特殊的拜年飘雪的天堂
文/雪儿大年初一，家家户户没有了轰响的鞭炮声，大街上没有了人流涌动的喧闹，几乎看不到人影，变得冷冷清清。天刚亮不大会儿，村里的大喇叭响了起来：由于当前正值疾病高发期，流感流行的高峰期。同时，新型冠状病毒感染的肺炎进入第二波流行的上升期。为了自己和他人的健康安全着想，请大家尽量不要串门拜年，不要在街里走动。可以通过手机微信，视频，电话，信息拜年……今年的春节真是特别。禁止燃放鞭炮，烟花爆竹，禁止出村
万物难度不度己边度512
你好，陌生人！你是否有过迷茫，在别人的面前自己却不曾展示！你是否自己承担着所有的痛苦，却又笑对人生！你是否在很多时候想找人诉说，翻开手机却发现，手机里面空无一人！你是否有很多事情想做，最后却因你自己拖延，最后发现自己什么都做不了！对没有错，我的名字就叫你是否！不要怀疑！不要悲伤！我们的生活可是还有很到要继续的呢！还有很多那个人，很多地方我们都没有去过！所以我们已经没有退路了！那就继续向前吧！加油！
398顺境，逆境戴骁勇
2018.11.27周二雾霾最近儿子进入了一段顺境期，今天表现尤其不错。今天的数学测试成绩喜人，没有出现以往的计算错误，整个卷面书写工整，附加题也在规定时间内完成且做对。为迎接体育测试的锻炼有了质的飞跃。坐位体前屈成绩突飞猛进，估测成绩能达到12cm，这和上次测试的零分来比，简直是逆袭。儿子还在不断锻炼和提升，唯恐到时候掉链子。跑步姿势在我的调教下，逐渐正规起来，速度随之也有了提升。今晚测试的50
从0到500+，我是如何利用自媒体赚钱？一列脚印
运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子
想明白这个问题，你才能写下去文自拾
春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
每日算法&面试题，大厂特训二十八天——第二十天（树）肥学 ⚡算法题⚡面试题每日精进 java 算法数据结构
目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
ARM中断处理过程落汤老狗嵌入式linux
一、前言本文主要以ARM体系结构下的中断处理为例，讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述：1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候，ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外，本文注意描述ARM指令集的内容，有些sourcecode为了简短一些，删除了T
2022-11-17 无奇君
又去了一次社康，这次是急性支气管炎……太难了。半夜就猛咳，天天咳醒，还好他戴海绵耳塞睡吵不到他，要不然对他来说也是种煎熬。一累也会猛咳，希望这次是最后一次吃药，吃完就好。又想把头发剪短了，顺便染个色。可是刚刚去看人家还没开门，不是休息日老板好佛系。理发店是个夫妻店，一年多前刚搬来的时候老板还没对象呢，当时聊天老板就说希望能找个对象一起两个人守着店都比上班强。不久后再去他已经有对象了，而且在店里帮忙
嘿，谢谢你小小玛拉沁
突然想对一个女孩子说，谢谢你！很久很久以前，总是觉得和你不会有太多交集，充其量也只是普通的舍友吧，毕竟有很多习惯，性格等方面相差甚远。其实特别感谢2017这一段经历和我遇见的人，只会慢吞吞的过自己生活的安小蜗是不会主动去结交朋友的，所以她来到了我的世界，让我在不知不觉中发现了自己太多太多的问题，而我正在逐渐去改变这些的习惯，成为更好的自己！我总是超级佩服她不管什么时候精力都超级旺盛，可以在上了一天
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
冬天短期的暴利小生意有哪些？那些小生意适合新手做？一起高省
短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
怎么做淘客赚钱(2022最新免费淘客盈利的方法) 高省_飞智666600
很多人都不知道什么是淘宝客，今天小编为大家解答一下吧。淘宝客，现在简称淘客，是时下比较流行的一个词语，特质为淘宝店推广商品获取提成的人，这些人没有自己的产品，只是在淘宝里面选择适合自己的产品，在自己比较熟悉的领域推广，把产品卖出去之后，会从淘宝店家那里获得百分之五到百分之五十左右的佣金。淘宝客付出的是什么呢？时间。你需要花时间去选适合自己推广的产品，需要花时间去选自己的推广方法，如果你打算自己做个
2020-12-16 长寿富贵
9：56不知今天哪位亲来说说话呀？成萌：尽尽皆是道。道道皆相同。不解呀？成萌：郁郁不得志，混混过日子。哦……说谁的呀？成萌：说自己呀……还能说谁呢？那如何办呢？成萌：回头……如何回头？成萌：回见心源。如何回见心源？成萌：不追不随诸相迁，如如不动在心田。啊？成萌：慢慢守心吧。
第六集如何安装CentOS7.0，3分钟学会centos7安装教程 date分享
从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
【PG】常见数据库、表属性设置江无羡数据库
PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH
2019-05-13 王健_100a
【撒下18:2】大卫打发军兵出战，分为三队：一队在约押手下，一队在洗鲁雅的儿子约押兄弟亚比筛手下，一队在迦特人以太手下。大卫对军兵说：“我必与你们一同出战。”解释：大卫检阅部队，将它分成三队，每队由一位元帅统领；约押与兄弟亚比筛，并迦特人以太共同指挥。大卫想与他们一同出战！应用：作为领袖与军兵一起出战是很重要。领袖在事奉中与信徒一起，领袖在任何的环境里与信徒一起走过。我们要同心协力为主而战。祷告：
那个严厉的启蒙老师小米星的天空
本文参加鹏哥教师节征文活动我的启蒙老师李老师，大概是唯一动手打过我，但是我仍然很感恩的老师吧。李老师当年四十多岁，擅长珠心算教学，算是我们乡镇小学的王牌老师。李老师很严厉，不仅要骂学生，还要动手打人，他的大眼睛一瞪，全班同学都瑟瑟发抖。在九十年代，家长不像现在这样宠溺孩子。许多家长都跟老师说，管得严一点，不听话就给我打。那时候棍棒教育是很正常的，教室里的木质米尺，常常因为被用来打调皮男生的屁股而折
一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？王老师聊围棋
今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的
js动画html标签（持续更新中） 843977358 html js 动画 media opacity
1.jQuery 效果 - animate() 方法改变 "div" 元素的高度： $(".btn1").click(function(){ $("#box").animate({height:"300px
springMVC学习笔记 caoyong springMVC
1、搭建开发环境 a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar b>、在web.xml中配置前端控制器 <servlet> &nbs
POI中设置Excel单元格格式 107x poi style 列宽合并单元格自动换行
引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结：先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
jquery 获取A href 触发js方法的this参数无效的情况一炮送你回车库 jquery
html如下： <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>" j
md5 3213213333332132 MD5
import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：第一步：停用所有Oracle相关的已启动的服务；第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中 &
apache 的access.log 日志文件太大如何解决 darkranger apache
CustomLog logs/access.log common 此写法导致日志数据一致自增变大。直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log
Hadoop单机模式环境搭建关键步骤 aijuans 分布式
Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
PL/SQL DEVELOPER 使用的一些技巧 atongyeye java sql
1 记住密码这是个有争议的功能，因为记住密码会给带来数据安全的问题。但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。好！不说Ruby了，让我们来谈谈PHP PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分... 但无论如何，它并没有说我们不能做这样
ThreadLocal与线程安全 bijian1013 java java多线程 threadLocal
首先来看一下线程安全问题产生的两个前提条件： 1.数据共享，多个线程访问同样的数据。 2.共享数据是可变的，多个线程对访问的共享数据作出了修改。实例：定义一个共享数据： public static int a = 0;
Tomcat 架包冲突解决征客丶 tomcat Web
环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class 2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值
java 线程池管理机制 BlueSkator java线程池管理机制
编辑 Add Tools jdk线程池一、引言第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。
关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL 存储函数
转自于：http://www.iteye.com/problems/23775 问：我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
常用SQL chenjunt3 oracle sql C++c C#
--NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
数学是科学技术的语言 comsci 工作活动领域模型
从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
Linux系统手动安装rzsz 软件包 daizj linux sz rz
1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf rzsz-3.34.tar.gz 3、安装 cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
读源码之:ArrayBlockingQueue dieslrae java
ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
C语言学习九枚举的定义和应用 dcj3sjt126com c
枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
Vagrant 三种网络配置详解 dcj3sjt126com vagrant
Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
16.性能优化-完结 frank1234 性能优化
性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)，软件设计（比如多线程并行化，选择合适的数据结构），数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等）以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。性能水很深，笔者经验尚浅，赶脚也就了解了点皮毛而已，我觉得
Word Search hcx2013 search
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
Spring4新特性——Web开发的增强 jinnianshilongnian spring spring mvc spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
CentOS安装配置tengine并设置开机启动 liuxingguome centos
yum install gcc-c++ yum install pcre pcre-devel yum install zlib zlib-devel yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
第14章工具函数（上） onestopweb 函数
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Xelsius 2008 and SAP BW at a glance blueoxygen BO Xelsius
Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？以下Wiki文章应该提供了全面的概览。 http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
oracle表空间相关 tongsh6 oracle
在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件 ALTER TABLESPACE "表空间的名字" ADD DATAFILE '表空间的数据文件路径' SIZE 50M; &nb
.Net framework4.0安装失败 yangjuanjava .net windows
上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开