设计模式重读

##单体模式(Singleton Pattern)
单体模式最简单的结构:
其作用:
1.最基本最有用的模式之一
2.划分逻辑单元, 如命名空间
其缺点:强耦合

1
2
3
4
5
6
7
var Singleton = {
attribute1: true,
attribute2: 10,
_privateAttr: null, //表面私有成员
method1: function(){},
method2: function(arg){}
};

为了解决表面私有成员实现真正私有成员单体模式更好的结构是(如下又称:模块模式[module pattern]):

1
2
3
4
5
6
7
8
var Singleton = (function(){
var privateAttribute = false;
function privateMethod = function(){}
return {
publicAttribute: true,
publicMethod: function(){}
}
})();

开发nodejs的MVC webapp? 管理多web应用的环境?

一个Nodejs MVC jcmvc的使用示例框架,jcmvc可以用来开发基于Nodejs的MVC模式的Web应用 或者 作为前端的前端模块化组织的web服务器

引入依赖jcmvc: npm install jcmvc
jcmvc的npm地址:https://www.npmjs.com/package/jcmvc
jcmvc的example的使用实例: jc-mvc

使用方法:

  • 下载代码: 假设到如下目录 /Users/shaofengliu/IT/git/jc-mvc
    1
    git clone git@github.com:ccjoe/jc-mvc.git

Web前端架构路径

MVC - BackBone

╔═════════╗       ╔════════╗       ╔═══════╗
║   Model ║──────>║ Control║──────>║ View  ║
╚═════════╝       ╚════════╝       ╚═══════╝
     ^                 │              ^
     │          ╔════════════╗        │
      ────────  ║    Action  ║ ───────
                ╚════════════╝  

react web的构建

构建解决浏览器端的requireUMD

  • AMD: AMD以浏览器为第一(browser-first)的原则发展,选择异步加载模块。它的模块支持对象(objects)、函数(functions)、构造器(constructors)、字符串(strings)、JSON等各种类型的模块。因此在浏览器中它非常灵活。

  • CMD: CommonJS module以服务器端为第一(server-first)的原则发展,选择同步加载模块。它的模块是无需包装的(unwrapped modules)且贴近于ES.next/Harmony的模块格式。但它仅支持对象类型(objects)模块。

  • UMD: 这迫使一些人又想出另一个更通用格式 UMD(Universal Module Definition)。希望提供一个前后端跨平台的解决方案。
    UMD的实现很简单,先判断是否支持NodeJS模块格式(exports是否存在),存在则使用NodeJS模块格式。
    再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。前两个都不存在,则将模块公开的全局(window或global)。

javascript正则表达式之场景分析示例

javascript常见正则匹配场景 的匹配分析。

正则模式

###贪婪模式与非贪婪模式
/./
/.
?/
/.+/
/.+?/

正则应用

从html里的string里分离出各标签元素,如图片地址

假设为<img src="http://ccjoe.github.io/test.png">要满足的条件应该是:

  • <img>标签
  • 带有src地址
  • src地址为某域
    正则是:/<img\b[^>]*src\s*=\s*"(http:\/\/ccjoe\.github\.io\/([^>"]*))"[^>]*>/g
    其中:
  • \b 匹配单词边界
  • [^>]* 在一起表示匹配除了>以外的字符0到多次
  • src\s=\s“ 匹配 src = 间的多种空格情况
  • “(http:\/\/ccjoe.github.io\/([^>”]*))” 匹配src=””里,其中http:\/\/ccjoe.github.io\/指定匹配的域
  • [^>]*> 匹配标签回>前不能出现>
  • g 全局匹配
    所以,类似的标签匹配问题皆可以上类似的方法去实现

web 性能分析及相应处理方法

一个Web应用的性能分析包含服务端的性能分析及浏览器端的性能分析,这里只罗列相关浏览器端(前端)的性能分析。

总体来讲:终端用户响应时间
= 页面下载时间 + 服务器响应时间 + 浏览器处理及渲染时间
= 页面大小 / 网络带宽 + (网络延迟 × HTTP 请求数)/ 并发度 + 服务器响应时间 + 浏览器处理及渲染时间
http://www.ibm.com/developerworks/cn/lotus/web20-perf-2/

并行下来即有以下因素影响浏览器响应时间:

A:页面下载时间

页面下载时间的模型涉及三方面:

  • 互联网应用的网络传输行为 : 它包括这个互联网应用通过浏览器发出了多少个 HTTP 请求,页面大小(HTTP 响应的总和),同时有多少个 HTTP 连接,这个互联网应用是如何并发使用这些 HTTP 连接的,等等。
    关键点:HTTP请求,页面大小,HTTP连接并发数
  • 网络参数 : 网络参数一般可以用QoS (Quality of Service)来描述,Qos包括带宽、延迟、丢包率等等一系列参数。但简化的说,带宽和网络延迟是最主要的因素。
  • 页面下载时间 : 终端用户响应时间就是指从这个用户触发一个页面请求到这个页面被完全展示时,有多少时间是花费在网络传输上。

根据以上要素总结的优化点:

  1. 处理页面大小(压缩html,css,js,image,svg,font…, GZIP)
  2. 处理Http请求数 (合并css,js,image,svg,font…文件, 缓存http请求)
  3. 处理HTTP连接并发数(尽量提高并发量,但尽量减少不同域的资源的请求及连接,即减少域名查询。)

Js排序相关...

##冒泡排序(BUBBLE SORT)

数组相邻位置对比大小,左<右则交换位置,
冒泡排序遍历->
第一轮最大的将冒泡至最右边, 遍历次数:arr.length
第二轮,第二大将至最右边, 遍历次数:arr.length-1
依次…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//冒泡排序
function bubbleArr(arr){
var i = arr.length, j, temp;
while(i){
for(var j=0; j<i-1; j++){
if(arr[j] > arr[j+1]){
temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
}
// console.log(arr, 'arrSub');
};
// console.log(arr, 'arr');
i--;
}
return arr;
}