神刀安全网

“高三”笔记之动态JS、动态样式

动态JS、动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本;包括加载外部文件和添加内部代码块两种;动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行;下面将主要以JS为例,小小的探索下动态脚本的加载、执行以及jQuery的做法、Angularjs的相关做法;

1、动态加载外部文件

因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理;这里的重点是怎么知道脚本已加载完成呢?呵呵,那么浏览器的兼容性问题就来咯!bsie!

//动态加载外部js文件 //params:url,loaded,error var AsyncScripts=function() {     function load() {         var args=arguments;         var head = document.getElementsByTagName('head')[0];                   var js = document.createElement('script');                   js.type='text/javascript';                    js.src=args[0];                    head.appendChild(js);                   if (document.all) {                    js.onreadystatechange = function () {                      if (js.readyState == 'loaded' || js.readyState == 'complete') {                     args[1]&&args[1]();                 }                            }                   } else {                              js.onload = function () {                 args[1]&&args[1]();             }                    }         js.onerror=function(){             args[2]&&args[2]();         }     }     function execJSblock() {      }     return {         load:load,         exec:execJSblock     } }();  AsyncScripts.load('http://cdn.famanoder.com/lib/jquery0.js',function() {     alert($) });

2、立即执行动态加载的代码块

理论上讲,script.appendChild(createTextNode(codeStr));能够正常运行,在此不得不继续bsie了,因为在IE中,<script>被视为一个特殊元素(<style>与其类似) ,不允许DOM访问其子节点;不过,可以使用<script>的text属性来指定代码块,让其正常运行;

//params:scriptsStr var AsyncScripts=function() {     function execJSblock(scriptsStr) {      var script=document.createElement('script');      script.type='text/javascript';      if (document.all) {       script.text=scriptsStr;      }else {       script.appendChild(document.createTextNode(scriptsStr));      }      document.body.appendChild(script);     }     return {         exec:execJSblock     } }(); AsyncScripts.exec('var a=1000;alert(document.body.clientWidth+";"+a)'); //实际上该方法与eval(scriptsStr)是一样的;

3、动态加载style

动态加载JS与动态加载style二者基本上是一样的做法,存在基本一样的问题;不一样的是一个创建script,一个创建style/link;在IE上是script.text,而正常的做法是script.appendChild(document.createTextNode(scriptsStr));在IE上是style.stylesheet.cssText,正常的做法还是style.appendChild(document.createTextNode(stylesStr));还要注意link只在head里有效,这个不能像script/style标签可以在body里;

动态加载JS、成功错误的回调、代码块立即执行,稍作整理,大概这样:

var AsyncScripts=function() {     function load() {         var args=arguments;         var head = document.getElementsByTagName('head')[0];                   var js = document.createElement('script');                   js.type='text/javascript';                    js.src=args[0];                    head.appendChild(js);                   if (document.all) {                    js.onreadystatechange = function () {                      if (js.readyState == 'loaded' || js.readyState == 'complete') {                     args[1]&&args[1]();                 }                            }                   } else {                              js.onload = function () {                 args[1]&&args[1]();             }                    }         js.onerror=function(){             args[2]&&args[2]();         }     }     function execJSblock(scriptsStr) {      var script=document.createElement('script');      script.type='text/javascript';      if (document.all) {       script.text=scriptsStr;      }else {       script.appendChild(document.createTextNode(scriptsStr));      }      document.body.appendChild(script);     }     return {         load:load,         exec:execJSblock     } }();

4、jQuery怎么做的

在jQuery1.4.1及之前动态DOM操作添加的脚本是不会执行的,这个问题在1.4.2及以后的版本做了修复,跪拜我伟大的jQuery吧!继续bsie!那么就是说下面的代码里的script和style都会立即看到效果:

$(selector).append(&#8221;); $(selector).html(&#8221;); $(selector).append(&#8221;);

5、Angularjs对动态添加的html及指令的处理

在Angular里如果ng-bind=’html string’,Angular会把html string当做text对待,而不像上面的jQuery会帮你执行里面的脚本;即使ng-bind-html=’html string’,也不会如你所愿;是的,angular很强大的,这个问题它早想到了,$sce服务即是处理这个的,$sce翻译过来就是“严格的上下文模式”;那么可以先注入$sce服务,然后调用trustAsHtml(_html),通过ng-bind-html达到我们想要的结果;

[&#8216;$scope&#8217;,&#8217;$sce&#8217;,function($scope,$sce) { $scope.trustHtml=function(_html) { return $sce.trustAsHtml(_html); }; }];

为了方便其他地方调用,我们可以把它封装成一个过滤器:

app.filter(&#8216;trustHTML&#8217;, [&#8216;$sce&#8217;, function ($sce) { return function (_html) { return $sce.trustAsHtml(_html); }; }]); //使用:ng-bind-html=&#8217;_htmlString | trustHTML&#8217;;

刚学Angularjs还碰到过个问题:动态添加的指令无法运行;由于页面加载后angular会从ng-app开始搜集指令然后编译,所以动态添加的指令已经不在范围内了,这时需要再次编译指令,由$compile服务在link里做这件事;

link:function($scope,$element,$attrs) { angular.element(DOMobj).html(_html); $compile(angular.element(DOMobj).contents())($scope); };

6、叽叽歪歪完了

初学Angularjs,正在改造博客的后台程序,呵呵,继续挖坑,慢慢填坑;

“高三”是本不错的书,闲来多看看总有收获;

有人说习惯了jQuery,要换个思维方式才能学好Angular;有人说写Angular最好不要用jQuery的搞法,比如DOM操作;可也有人Angular与jQuery一起混用;

我感觉jQuery与Angular是两种完全不同的思维方式下的产物,因为避免不了操作DOM,所以有人二者混用是可以理解的,但我看着总感觉别扭;我想以当一个项目适合Angular的思维来做,就应该摒弃脑子里大量的DOM操作,试着以Angular的搞法来做,即便有DOM操作,angular也有对应的做法,这时jQuery可以歇歇了;看看Angular的服务都带着$符,自带土豪气啊,同学们一起加油!!!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » “高三”笔记之动态JS、动态样式

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮