模块化

目前在vue-cli2运用 webpack.base.conf.js new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', Gdata: ['@/api/index.js', 'default'], RequestApi: resolve('/static/config/index.js') }) static/config/index.js const peconfig = 'devCompXs'; switch (peconfig) { case 'devPloce': var DUTY_URL_INTERNET = '//10.95.1.210:10021'; var WEBSOCKET_INTERNET = 'ws://10.95.1.210:10021/commonwebsocket/channels/test'; var MAPCONTROL_SOCKET_INTERNET = 'ws://10.95.1.210:10021/websocket/mapControl/127.0.0.1'; //这条目前没有业务用注释着 var VIDEO_SOCKET_INTERNET = 'ws://10.95.1.210:10021/websocket/vidoControl/127.0.0.1'; var

个人认为： 前端发展最终的导向是前端工程化，智能化，模块化，组件化，层次化。 一个项目的开发在未来人工智能+物联网的时代，必定走向以下的五化 原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。 1.前端工程化。 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发。 具体是： a.Node服务，提供数据代理，路由，服务器渲染。 b.Web应用开发，专注于web交互体验。 c.前端运维：构建，测试，部署，监控。 2.前端模块化(页面模块化开发+基础模块化)。 （1）基础模块化： A. CommonJS———— 同步加载、服务器端的模块化规范，采用案列： Node.js 实现原理： 一个单独的文件就是一个模块 ； 加载模块采用同步方式，加载完成后才能执行后面的操作 ； 加载模块使用 require 方法，该方法读取一个文件并执行，最后返回内部的 exports 对象； 特点： 比较适合运用于 服务器的编程 ，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载 B. AMD———— 异步加载，采用案例： require.js 实现原理： 异步模块定义 ， 通过一个函数封装所有所需要

我们提供 apkplug 下OSGI使用demo 源码托管地址为 http://git.oschina.net/plug/OSGIService 一 OSGI与android Service 异同点 OSGI服务与android Service概念差不多也是Service ,Client 关系。 android Service接口 --service.AIDL OSGI接口 --java interface 所以android 进程间通信Service只能传递序列化过的数据 而OSGI服务可以传递任何java对象。 二 OSGI与android Service注册/查询方式对比 1.服务注册 android Service Intent intent=new Intent(Context,Service.class); Context.startService(intent); OSGI Service BundleContext context; //插件上下文 ServiceRegistration m_reg = context.registerService( sayHelloImp.class.getName(),//服务名称 一般为接口类名 my, //服务具体实现类 null); 2.服务查询 android Service Intent intent=new

组件化 注册组件的基本步骤 创建组件构造器 （调用Vue.extend()方法） 注册组件 （调用Vue.component()方法） 注册组件语法糖 省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替 使用组件 （在Vue实例的作用范围内使用组件） 组件模板的分离写法 语法糖简化了Vue组件的注册过程，但是template模块中js和html代码混杂的写法仍让我们苦恼 于是Vue提供了两种方式，来分离模板中的js和html代码 - 使用 标签 ，再通过id来关联 js <script type="text/x-template" id="cpn"> 模板内容 </script> Vue.component('cpn', { template: '#cpn' }) //全局组件 - 使用 <template> 标签，再通过id来关联 js <template id="cpn"> 模板内容 </template> 注册组件方式于上相同 组件可以访问Vue实例数据吗？ 组件是一个单独功能模块的封装 这个模板有属于自己的HTML模板，也应该有自己的数据data 组件中的数据是保存再哪里呢？顶层的Vue实例中的data吗 通过实践，我们发现是不能访问的，即使可以，如果将所有的数据都放在Vue实例中，Vue也会变的非常臃肿 结论：Vue组件应该有自己保存数据的地方

随着互联网行业的发展，网页中的js脚本代码越来越庞大，现在一个庞大的网页体系也需要像桌面程序一样进行团队分工协作完成，开发者不得不使用软件工程的方法，管理网页的业务逻辑。 所以现在JavaScript的模块化编程是必不可少的，开发者只需要完成业务的核心逻辑，引入其他的模块即可。但是JavaScript语言本身没有提供模块化的功能（在ECMAScript2015标准已经支持，但还需很长时间才能投入使用），所以现在来学习一下以前的开发者们是如何实现JS模块化的。 一、函数封装 模块就是实现特定功能的一组方法，而一个函数就是一组特定逻辑的实现，所以可以用封装函数来完成模块化。 function f1 () { //函数体 } function f2 () { //函数体 } 这样在以后需要完成上面函数所完成的功能的时候直接调用这个函数就可以了。 这种做法的缺点也很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没有什么关系。 二、对象 为了解决函数产生的污染全局变量的问题，可以使用对象来完成模块化。 var myModule = { m1: 1 , m2: 2 , f1: function () { //函数体 } f2: function () { //函数体 } }; 这样如果想要使用对象中 f1 函数实现的功能那么可以 myModule.f1()

使用2.x来进行创建项目： 安装vue-router的依赖： 运行项目：npm run dev 生成的项目目录： 步骤： 1、创建组件 2、配置路由 3、创建路由对象 4、注入 新建几个： 创建组件： Home.vue <!--创建组件--> <template> <div class="home"> <h1>首页在这里</h1> </div> </template> Foods.vue <!--创建组件--> <template> <h1>美食广场</h1> </template> 配置路由： routers.js import Home from './views/Home.vue' import Foods from './views/Foods.vue' //配置路由 export default{ routes: [ { path:'/home', component:Home }, { path:'/foods', component:Foods } ] } 创建路由对象： import Routers from './routers.js' Vue.use(VueRouter) //创建路由对象 const router=new VueRouter(Routers) 注入： new Vue({ el: '#app', //注入 router, render: h =>

requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。 RequireJS的目标是鼓励代码的模块化，它使用了不同于传统"script"标签的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过: 　　<script src="1.js"></script> 　　<script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 这段代码依次加载多个js文件。 这样的写法有很大的缺点。 首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长 由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载

此文接上一篇《 运用 CSS in JS 实现模块化 》 一、什么是 CSS in JS 上图来源： https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种 设计模式 ，它的核心思想是把 CSS 直接写到各自组件中，而不是单独的样式文件里。 CSS in js 的发展： 最早就是内联样式 依旧使用 CSS，但使用 JS 来管理样式依赖，代表是 CSS Modules。 这种方式 在React框架中引入 的。 使用 JavaScript 生成 CSS 然后插入到页面中的方式。例如 Styled Components。 CSS Module 还是 JS 和 CSS 分离的写法，而 styled components 实际上是在 JS 上写 CSS了。 CSS in js 一次又一次的违背了 CSS 与 JS 分离的原则。 二、常见的 CSS in JS 1、CSS Modules CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力，API 简洁到几乎零学习成本。 （1）安装 CSS Modules 提供各种 插件 ，支持不同的构建工具。本文使用的是 Webpack 的 css-loader 插件。 CSS Modules不局限于你使用哪个前端库，无论是 React、Vue 还是

准备：目录结构与说明 top │ 1.txt │ main.py │ ├─father1 │ module1.py │ module1_1.py │ __init__.py │ └─father2 │ module2.py │ __init__.py │ └─son2 module2_son2.py __init__.py #module1.py name = 'father1' #module1_1.py age = '12' #module2.py name = 'father2'#module2_son2.py name = 'son2' 模块导入 #从 文件夹father1中 导入 模块module1 from father1 import module1 print(module1.name) #father1 包导入 ''' import 风格 缺点：使用的时候需要再重复一遍import的内容 ''' import father1.module1 print(father1.module1.name) #father1 ''' from xxx import xxx 风格 ''' #从 文件夹father1 -> 模块module1 中导入 变量name from father1.module1 import name print(name) #father1

>开始 （确认已经安装node环境和npm包管理工具） 1、新建项目文件名为vuedemo 2、 npm init -y 初始化项目 >安装项目依赖 3、 npm install --save vue 默认安装最新版vue 4、 npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器） *拓展：npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下， --save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。* 5、 npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5 6、