小结之倪老师

关于正则的那些事
1.为字符串实现一个render方法，实现下面的变量替换功能
`var greeting = ‘My name is name,age{age}, i am a job.jobName,mylevelis{job.jobLevel}’;

var employee = {
name: ‘小明’,
age : 11,
job :{
jobName : ‘designer’,
jobLevel: ‘senior’
}
}

String.prototype.render = function(obj){
var result = this.replace(/${\w+.*\w+}/g, function(p1){
var ss = p1.slice(2, p1.length-1);

    if(ss.indexOf(".") == -1){        return obj[ss];    }else{        var arr = ss.split(".");        return obj[arr[0]][arr[1]];    }});return result;

}

var result = greeting.render(employee);

console.log(result);
//My name is 小明, age 11, i am a designer`

1. 物品价格 ：’100 100 99 99 100 99 101’,求：a.去除重复, b.保留重复元素的最后一个
   `var oldStr = ‘99 99 99 100 100 100 101 101 102 102 103’;
   //a-b <= 0时，不会触发元素换位
   var arr = oldStr.split(” “).sort(function(a, b){return a-b;});
   var newStr = arr.join(” “);//99 99 99 100 100 100 101

var startIndex = 0;
var indexes = [];
newStr.replace(/(\d+\s*)\1*/g,function(p1, p2){
var ind = startIndex + p1.length/p2.length;

startIndex = ind;indexes.push(ind - 1);

});

var result = [];
for(var i=0;i

第一次输入：产品数量  客户数量第二次输入：和客户数量相等的报价要求计算最优价格并返回[5, 4][2,10,8,7]2*4 = 8;10*1 = 10;8*2 = 167*3 = 21function Salor(){}Salor.prototype.setNums = function(num, cnum){    this.num = num;    this.cnum = cnum;}Salor.prototype.setPrices = function(prices){    this.prices = prices;}Salor.prototype.getPrice = function(){    var me = this;    if(this.cnum != this.prices.length){        alert("报价数量和客户数量不相等，请检查！");return;    }    //价格排序    this.prices = this.prices.sort(function(a,b){        return a-b    });    var maxAmount = -1;    var pri = -1;    for(var i=0;i<this.prices.length;i++){        var num = (this.prices.length - i);        if(num > me.num){            num = me.num;        }        var amount = this.prices[i] * num;        if(maxAmount < amount){            maxAmount = amount;            pri = this.prices[i];        }    }    return pri;}

关于项目
require js的优点
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
1. 是采用requirejs的模块化编程；
AMD编程方式：
project:common modules和resource；

//使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（index.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。因为三个模块与index.js不在同一目录，需要通过baseUrl来改变基目录。requirejs.config({    baseUrl : '/xijing/project/modules/schedule/',    paths : {        text:'../../common/lib/requirejs/text',        render:'js/render',        datasource:'js/datasource'    }});/** * Amd程序主函数；require.js加载的模块，采用AMD规范。具体来说，就是模块必须采用特定的define()函数来定义。 */ //加载模块require(['render'], function(RenderService){    RenderService.init();});

<script type="text/javascript" src="/xijing/project/common/lib/requirejs/require-min.js"     data-main="/xijing/project/modules/schedule/index.js"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载

2.当点击超链接不希望其跳转时

<a href="javascript:void(0)"></a>

3.样式定义尽量公用且易读，比如pad-r-5{padding-right:5px;}尽量复用；
line-h前缀代表样式内部声明height和line-height，修饰单行文本；
line-只声明line-height，其值为百分数，为默认的百分数，修饰多行文本；

.line-h24{line-height: 24px;}.lineh27{    line-height: 27px;    height: 27px;}

4.文本过长问题
单行文本：

.text-ellipsis{    overflow:hidden;    text-overflow:ellipsis;    white-space:nowrap;}

多行文本：
新建readmore.js readmore是一个依赖于jquery的插件类库，加载放在jquery的后面；

$(".dept-desc").readmore({            //声明文字个数            substr_len: 380,            //更多连接            more_link: '<a class="read-more pad-l-10" href="javascript:void(0)">展开>></a>'        });

5.动态渲染(mustache js)
引入text.js
（1）依赖于require.js的一个模块代码，需要由require js引入当前环境
（2）当我们需要在某个模块中引入非js文件，需要在模定义的依赖部分添加‘text!paths（模板路径名）/files’；
mustache js 用于动态解析，然后给出计算后的HTML代码
模板html文件

<!-- 声明html代码片段的编码方式为UTF-8，这样浏览器加载这个html片段时，不会出现乱码问题 --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">{{#datas}}<li class="mar-tb-20 clear">    <div class="dept-name float-l">{{name}}</div>    <div class="float-l">        <ul class="clear">            {{#depts}}            <li class="float-l mar-r-20 mar-b-14">{{name}}</li>            {{/depts}}        </ul>    </div></li>{{/datas}}

模板中的{{data}}可以是属性值，字符串或者函数
js文件

define(['datasource', 'text!templates/departments.html'],function(dataSource, deptTemp)

var depts = dataSource.getDepts();//利用mustache动态var dom = Mustache.render(deptTemp, {datas: depts});$(".dept-list > ul").append(dom);