当前位置:  编程技术>WEB前端
本页文章导读:
    ▪context js 开发浏览器插件。      给梦利网(http://www.mengliw.com),开发了梦利开心淘客,对于可以用context js 的开发插件的浏览器。 各版本下载:http://www.mengliw.com/OAuth/alllogin.html 作者:Jockey 发表于2013-3-13 14:56:.........
    ▪Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog      项目地址:https://github.com/mz121star/  demo项目来源: 最近一年学习前端方面技术,不敢说有所成绩,但是也是收获了颇多的经验,前端是个大水坑,学习路上总是遇上各种的坑,新技术的层.........
    ▪利用jQuery的deferred异步按顺序加载JS文件        前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是.........

[1]context js 开发浏览器插件。
    来源: 互联网  发布时间: 2013-11-06

给梦利网(http://www.mengliw.com),开发了梦利开心淘客,对于可以用context js 的开发插件的浏览器。


各版本下载:http://www.mengliw.com/OAuth/alllogin.html

作者:Jockey 发表于2013-3-13 14:56:54 原文链接
阅读:84 评论:0 查看评论

    
[2]Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
    来源:    发布时间: 2013-11-06

项目地址:https://github.com/mz121star/ 

demo

项目来源:

最近一年学习前端方面技术,不敢说有所成绩,但是也是收获了颇多的经验,前端是个大水坑,学习路上总是遇上各种的坑,新技术的层出不穷让人眼花缭乱。出于想对前端方面的技术做一些总结 ,所以就花了一些时间边学习边增加的建立了这个项目,由我和我的同事共同维护中。今天分享出来,希望能和各路高手共同学习交流,更希望可以得到诸如看官您这样的神人来指导一下。

 

项目介绍:

  •   NJBlog后台采用Nodejs+express来提供Restful API.
  •   数据库采用 Mongodb,通过Mongoose驱动。
  •   NJBlog前台采用AngularJs进行开发。
  •   NJBlog目前所有前端JS代码全部采用模块化编写,使用Requirejs驱动(将来可能考虑采用国产Seajs哦~)。
  •   NJBlog使用mocha+jasmine来编写js单元测试。
  •   前端UI使用了bootstrap。
  •   NJBlog使用强大的grunt对项目进行构建工作。
  •   NJBlog全部代码托管在GitHub上,使用牛逼的travis-ci进行持续集成(可用来跑单元测试)。
  •   项目的demo由appfog和mongohq提供动力。
  •  

    获得并运行项目:

      首先确保您系统中安装了Mongodb和Nodejs,一起准备完善之后。按照如下操作。

      1,clone代码

    git clone https://github.com/mz121star/NJBlog.git

     

       2,安装依赖 

      npm install

       3,启动程序

      node app.js

     

     最后,NJBlog仅为一个前端方向的学习总结性项目,NJBlog仍在进行不断地更改完善,NJBlog不是最好的,但是可能有您所需要的,欢迎各路高手为NJBlog添砖加瓦。

    本文链接


        
    [3]利用jQuery的deferred异步按顺序加载JS文件
        来源:    发布时间: 2013-11-06

      前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正。

      如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文。

      加载JS文件的代码如下:

    /*
    Loading JavaScript Asynchronously
    loadScript.load(["a.js", "b.js"]);
    */

    var loadScript = (function() {
    var loadOne = function (url) {
    var dtd = $.Deferred();
    var node = document.createElement('script');
    node.type = "text/javascript";
    var onload = function(){
    dtd.resolve();
    };
    $(node).load(onload).bind('readystatechange', function(){
    if (node.readyState == 'loaded'){
    onload();
    }
    });
    document.getElementsByTagName('head')[0].appendChild(node);
    node.src = url;
    return dtd.promise();
    };

    var load = function(urls) {
    if(!$.isArray(urls)) {
    return load([urls]);
    }
    var ret = [];
    for (var i = 0; i < urls.length; i++) {
    ret[i] = loadOne(urls[i]);
    };
    return $.when.apply($, ret);
    }

    return {
    load: load
    };
    })();

      代码比较简单,这里就不解释了,下面给个调用示例。

      例如项目中有两个JS文件:a.js和b.js,代码如下:

      a.js:

    var a = "i am in a.js";
    var b = "i am in a.js";

      b.js:

    var a = "i am in b.js";
    var b = "i am in b.js";

      如果我们想先载入b.js,后载入a.js,示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Loading JavaScript Asynchronously</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"type="text/javascript"></script>
    <script src="/blog_article/jls.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
    loadScript.load(["b.js", "a.js"]).done(function() {
    test();
    });

    function test(){
    console.log("var a = " + a + " , var b = " + b);
    }
    </script>
    </body>
    </html>

      结果如下:

      这里我们可以看到,b.js中定义的变量被a.js中的覆盖了。

      转到Elements面板,我们可以看到b.js和a.js被顺序地加到了head中:

      对此类问题,欢迎大家分享自己的方案。

    本文链接


        
    最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    java开源软件 iis7站长之家
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    ▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解(css排版隐藏溢...
    ▪页面遮罩层,并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框,像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3