jquery学习笔记一(7.21)（ueditor）

因为有些老师对网页几何画板，提出这样一个需求：常见的工具项列出来，就是一般的软件常见的工具栏：

刘工让研究一些其他在线工具是怎么实现的，提到umeditor（和ueditor类似），我就决定好好研究下ueditor的代码，看下它是如何实现工具栏自定义。顺便用实例学习js（jquery）。

umeditor的核心代码：umeditor.js(核心)

                                   umeditor.config.js（配置）

                                  um_desc_edit.css（样式）  其他可暂时忽略。

编辑器位置：

 <div id='dyna_txt' placeholder='请不吝分享您的意见,建议等 ...'>   </div>

自定义配置：

<script>
  UM.getEditor('dyna_txt', {
        toolbar:[
            'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
            'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | emotion image video  | map',
            '| horizontal print preview fullscreen', 'drafts', 'formula'
        ], 
            initialFrameHeight: 180,
            autoHeightEnabled:true,
            maximumWords:50000,
            scaleEnabled:false,
            autoFloatEnabled:false,
            autoClearEmptyNode :true,
            autoSyncData:true,
            allHtmlEnabled:false,
            pasteImageEnabled:true,
            autoClearinitialContent:true
            });       
   </script>

首先分析umeditor的代码：

大框架：(function($){ })(jQuery)

对其很疑惑，于是网上查资料，怎么这么样写：：http://blog.csdn.net/javazw123/article/details/6217988

(function($) {…})(jQuery);

这里实际上是匿名函数，如下：

function(arg){…}
这就定义了一个匿名函数，参数为arg

而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery
相当于funtion output(s){…};output(jQuery);或者var fn=function(s){…};fn(jQuery);

$(function(){…});

或者：

jQuery(function($) {
…
});

允许你绑定一个在DOM（不包含图片）文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函 数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。

全写是：
$(document).ready(function(){
…
});

有必要来分析下js的实参和形参：http://www.jb51.net/article/29703.htm

（1、基本数据类型传递参数：

复制代码 代码如下:
　　funciton addTen(num){
　　　　num+=10;
　　　　return num;
　　}
　　var count=20;
　　var result=addTen(count);
　　alert(count);//20
　　alert(resullt);//30
　 　执行结果是：20和30。在这段代码中，将变量count当做参数传递给了函数addTen，也就是相当于将变量count的值复制给了函数 addTen的参数。这时addTen的参数num可以看做是函数内部的一个变量。在上段代码中，就相当于两个基本数据类型变量之间的值复制。而基本数据 类型都有自己独立的内存地址，所以num和count是没有任何关系的，他们只是值相等而已，函数执行完毕后，count的值并没有改变。而函数外面的 result是被直接赋值的，所以result的值就是函数的结果30。
　　2、引用类型传递参数:

复制代码 代码如下:
　　function setName(obj){
　　　　obj.name="LSN";
　　}
　　var person=new Object();
　　setName(person);
　　alert(person.name);//LSN
　 　执行结果是：LSN。在这段代码中，函数setName的作用是给obj对象添加了一个属性name并给该属性赋值为"LSN",因为obj是引用类 型，所以这里属于是将引用类型person赋值给了obj，也就是说person和obj引用了一个内存地址，所以当给obj新加了属性name时，在函 数外面的person也跟着改变，最后person.naem的结果为LSN。
　　3、引用类型传递参数到底传的是值还是引用?

复制代码 代码如下:
　　function setName(obj){
　　　　obj.name="ABC";
　　　　obj=new Object();
　　　　obj.name="BCD";
　　}
　　var person=new Object();
　　setName(person);
　　alert(person.name);// ABC
　 　执行结果是：ABC。实例3与实例2的区别是在函数中又加了2行代码，在给obj对象新加一个属性name并赋值后 又将obj定义成了一个新的对象（new Object()），定义新对象后又name赋上新的值“BCD”。这个时候如果是按引用传递的话，那么最后person对象就会自动修改为指向其 name属性为"BCD"的新对象，但最后显示的却是“ABC”，这说明即使在函数内部修改了参数的值，但原始的引用还保持不变。实际上，当在函数内部 obj=new Object()时 这个新的obj就已经成为函数内部的局部对象了，这个对象会在函数执行完毕后自动销毁）

总结：(function($) {…})(jQuery)

<script type= "text/javascript" >
    (function(name){
        alert(name);
    })( "GaoHuanjie" );
</script>

说明：在浏览器中运行上面代码，会弹出一个对话框，对话框的内容为GaoHuanjie。

第一：函数会自动被执行

第二：function($){...}是定义的匿名函数，参数为$（之所以将参数声明为$是为了不与其他库冲突）

第三：为了调用该函数则在该匿名函数的后面添上了括号和实参（这里为jQuery），但又由于操作符的优先级，函数本身也需要用括号，所以又为匿名函数添加了括号。

一句话：“$(function(){ });”用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在；“(function(){})(jQuery);”用于存放开发插件的代码，执行其中代码时DOM不一定存在。