html的textarea标签，在火狐、safari等现代浏览器里，右下角会出现一个可拖动的标示，让用户可以修改编辑区域的大小，用起来很方便。但有些时候，我们并不希望用户可以改变这个textarea的大小，比如下图，textarea变大后，整个个页面布局都乱了：
这种时候，我们希望可以锁住这个textarea，如何锁住哪？
很简单，只需要一个css属性：resize:none;
——————–
查了一下文档，resize可以设置如下的属性：
none：UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。 both：UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。 horizontal：UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。 vertical：UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。 inherit：默认继承。
一个多月前，去百度技术沙龙听了全站式ajax(er)框架的介绍后，曾觉得和自己之前做的东西差不多，还在日志里结尾处豪迈的说了一句“大家都是探路者”，可是，后来看了er框架的源码后，自己就只有自惭形秽了~~虽然基本的思路差不多，但是除了这个“基本思路”外，人家都要比咱完善的多，特别是在代码的写法上，完全是成熟的js的写法，可是回顾我自己之前做的东西，还处在用java的思路写js的水平上；另外就是mvc模式的应用上，层次分的也不清晰，和业务逻辑结合的太紧密，让别人只有在十分了解框架的原理后，才能使用他，这样用起来很费劲。
趁着十一假期的时间，结合这之前的思路，将这个框架再次整理了一遍，并给他去了一个名字：jLeaf。leaf，叶子，取“页”与“叶”的谐音。
目前框架基本功能已经整理完成，不过800多行代码（和er的十万行代码差远了），但已经是一个相对比较完善的前端mvc框架了：
1. 仿照cakephp，分成view/controller/component/db/util五种组件，使用者只要根据业务逻辑去实现这五种组件，不需要关注其他的部分
2. 仿照spring添加了bean池；组件内调用其他组件时，直接“this.xxx”就可以了
3. 添加了filter模块，使用这可以添加beforeFilter和afterFilter，框架本身和业务逻辑是完全分离的，使用filter完成之前使用header完成的功能
4. 添加了debug模块，可以将log和error显示到页面上
本来想利用它给wp做一个“单页模式”，但可惜时间有限，只做了分页，等以后做好了再拿给大家看吧~~
function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" script.readyState == "complete"){ script.onreadystatechange = null; if(typeof callback == 'function') callback(); } } }else{ //others script.onload = function(){ if(typeof callback == 'function') callback(); } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } |
当前端js代码越来越多越来越复杂时，按逻辑分层就会变得势在必行，否则代码会逐渐变乱，维护成本就会越来越高。之前曾做个一个复杂的模块，大部分逻辑都是在前端实现的，其中有一个两千多行的js文件，ajax数据访问、业务逻辑、html生成全都搅在一起…..每次改动都是一场噩梦…..往事不堪回首呀
扯远了，当对代码分层后，各层之间的互相调用也会是一个问题，本文介绍的方法，仿照cakephp的方式，提供了一种为controller层自动添加component组件的思路
首先，是Controller的抽象类，供所有的Controller继承，它的主要功能是为controller的实现类添加它们所需要的component等组件
controller = {}; controller.AbstractController = function(){ function AbstractController(){ if(this.components.length > 0){ for(var i = 0; i < this.components.length; i++){ var compName = this.components[i]; if(component[compName]){ this[compName] = new component[compName](); } } } } return AbstractController; }(); |
下面视一个controller的一个实现，通过this.components定义自己需要加载的component,然后通过call方式继承AbstractController,让AbstractController完成component的加载。然后在下面的方法中，通过this.xxxComponent的方式调用该component
controller.ListController = function(){ function ListController(){ this.components = ['newsComponent']; controller.AbstractController.call(this); } ListController.prototype = { listNews : function(){ var news = this.newsComponent.getNewsList(); //TODO:... } } return ListController; }(); |
newsComponent
component = {}; component.newsComponent = function(){ function NewsComponent(){ } NewsComponent.prototype = { getNewsList : function(){ alert('call function : newsComponent.getNewsList()'); } } return NewsComponent; }(); |
测试
var listCont = new controller.ListController(); listCont.listNews();//alert |
另外，对于比较大的前端应用，可以构造一个组件池，在实例化一个component后，将其放到组件池内，下次其它controller再要使用这个component时，直接从组件池中拿出来用就行了，可以省去很多资源
call方法是将一个对象的方法在另一个对象的上下文环境中执行，用它可以实现javascript的多继承：
function C1(){ this.sub = function(a,b){ alert(a-b); } } function C2(){ this.add = function(a,b){ alert(a+b); } } function C12(){ C1.call(this); C2.call(this); } |
这样，C12就具有了sub和add方法。
昨天下午跑去参加的百度技术沙龙，之所以回去，是因为这一期的主题是“全站式ajax应用”，正是自己近半年一直在做的东西—-闭门造车这么久，终于有机会看看别人是怎么做的了。
两场讲座，一个是百度的人在讲自己的一个前端框架，领一个是IBM的的人在讲Dojo。
百度董睿所讲的ER框架(这里)，用来做所谓整站式ajax应用，在前端实现了MVC的分离、url的前进后退、参数的传递、html模版等等，以及DOM操作～～～听他刚开始讲ER框架用途和亮点时，自己突然，第一次有了一种站在了技术最前沿的感觉—-几个月前为空间通讯录做的前端框架，实现的正是这套东西，MVC/url参数传递等的思想方式与ER很类似，不同的是DOM操作是基于jquery的，另外，为了应对页面灵活多变的显示方式，没有使用html模版。
不过听了ER的一些做法，自己还是受了一些启发的，比如url参数传递方式可以更精简，MVC分层可以更清晰，引入html模版降低使用难度和维护成本等等～～～四个小时的公车算是没白坐吧。
另一场关于Dojo的讲座(这里)—-本来主要式冲着这一场去的—-讲的有些泛泛，基本上就是在推广Dojo，感觉没有多少实质性的内容。
第一次参加这种行业内的技术讲座，本来以为会有更权威的人讲解怎么做 “全站式ajax应用”，但实际两位都只是在介绍、推广自己的东西，所以，刚听完的时候感觉有些失望。但后来想了想，这种技术分享，也只能做到什么程度～～～大家只是将自己的实践经验推广给别人，没有所谓的权威，没有绝对的对与错，大家都是探路者。。。
看下面的例子：
$('button.b').click(function(){ var d = new O1(); d.ooo(); d.oo(); function O1(){ this.ooo = function(){ alert('sss'); } } O1.prototype.oo = function(){ alert('ss'); } }); |
点击按钮，首先会弹出“sss”，标识ooo()执行了，但是，之后会报错：”d.oo is not a function“
具体原因，我猜是这样：
再new O1的对象的时候，回去找O1的构造函数“function O1()”，然后执行这个构造函数的时候，将ooo()方法添加给O1类，但这时并不会执行构造函数之外的东西
而“O1.prototype.oo”会按照顺序，执行完前面的代码后，再添加oo()
偶然发现了jquery模板方法tmpl()，看起来还不错：
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script> |
转自：http://api.jquery.com/tmpl/
function Base() { // private attribute var i = 2; // public attribute this.k = 3; // private method function setI(j) { i = j; } // public method this.resetI = function() { setI(0); }; // public method this.getI = function() { return i; } } // public attribute Base.prototype.j = 1; // static attribute Base.l = 4; // public method Base.prototype.getJ = function() { return this.j; }; // static method Base.setL = function(m) { Base.l = m; } |
转自：http://sinkiangcai.blog.163.com/blog/static/77664420084702020485/
/** * a1/a2为要合并的两个数组 */ function arrIntersection(a1, a2){ var ao = {}; for(var i = a1.length - 1; i >= 0 ; i--){ ao[a1[i]] = true; } var ai = a1.concat([]);//防止a1被改变 for(i = 0; i < a2.length; i++){ if(!ao[a2[i]]){ ai.push(a2[i]); } } return ai; } |
关于本站