zoukankan      html  css  js  c++  java
  • 前端MVC学习——模块发开发、seajs学习

      这份学习链接已经足够了:http://seajs.org/docs/#intro

      我假设你至少已经浏览过上述链接文档、并且掌握了基本的seajs基础知识~

      手把手教你创建helloworld~

      HelloWorld

      程序员嘛,难免有helloworld情结~

      平台:win7、chrome

      ① 创建helloworld文件夹

      ② 在helloworld文件夹下,创建index.html、style.css、init.js、data.js、test-export.js、还有一个 lib 文件夹

      ③ 将网上download来的sea.js和jquery-1.10.2.min.js放在由第②步创建的 lib 文件夹中

      下面来看看我们在上述创建的文件里放入了什咩代码

      sea.js和jquery-1.10.2.min.js是库文件,理论上不需要我们修改或添加什么,但是这里有一个小细节,因为sea.js专注模块化开发,对于jquery-1.10.2.min.js的库文件引入,我们也需要将jquery-1.10.2.min.js进行模块化,模块化处理很简单——打开jquery-1.10.2.min.js文件,将jquery-1.10.2.min.js所有代码包括在define中,并且返回$.noConflict();

      jquery-1.10.2.min.js 具体如下:

    define(function() {
         
         //jquery-1.10.2.min.js的源码部分
    
         return $.noConflict();
    
    });

      index.html:

    <!doctype html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>seajs</title>
    	</head>
    	<body>
    		<div id="content">
    			<p class="author"></p>
    			<p class="blog"><a href="#">blog</a></p>
    		</div>
    		
    		<script src="./lib/sea.js"></script>
    		<script>
    			seajs.use("./init");
    		</script>
    		
    	</body>
    </html>

      init.js

    define(function(require,exports,module) {
    	var $ = require('./lib/jquery-1.10.2.min');
    	var data = require('./data');
    	var css =  require('./style.css');
    	var textExport = require('./test-export');
    	
    	$('.author').html(data.author);
    	$('.blog a').attr('href',data.blog);
    	
    	textExport.test();   /在控制台输出hello world
    });

      data.js

    define({
    	"author": '西红柿炒番茄',
    	"blog": 'http://www.cnblogs.com/Iwillknow/'
    });

      style.css

    .author {
    	color: red;
    	font-size: 16px;
    }
    .blog {
    	font-size: 16px;
    }

      test-export.js

    define(function(require,exports,module) {
    	exports.test = function() {
    		console.log("hello wolrd");
    	};
    });

      

  • 相关阅读:
    2020CCPC秦皇岛 K 【Kindom's Power】(树上贪心dp)
    对于树上状态机dp问题的一些总结与思考
    PTA_L3题解集
    PTA_L2题解集
    树上dp_学习笔记
    2020牛客国庆集训派对day2 B【Cheap Delivers】(最短路+状压dp)
    2020牛客国庆集训派对day1
    Codeforces 1426F【Number of Subsequences】(dp)
    2019icpc陕西省赛
    CF1281E【Jeremy Bearimy】(树上点对最大值/最小值和)
  • 原文地址:https://www.cnblogs.com/Iwillknow/p/3728561.html
Copyright © 2011-2022 走看看