require

主要： 常量优化路径 自动加载类 优化入口文件 安全访问项目目录 --------------文件结构：-------------------------------------- blog├─App│ ├─Model 模型│ │ └─UserModel.class.php 用户模型类 │ ├─View 视图│ │ ├─Back后台│ │ │ └─Index│ │ │ └─index.html 后台首页面│ │ └─Home前台│ │ └─User 用户视图目录│ │ └─login.html 登录表单页面│ ├─Controller 控制器│ │ ├─Back后台│ │ │ └─IndexController.class.php 后台首页控制器│ │ └─Home前台│ │ └─UserController.class.php 用户控制器├─Public 静态公共文件（js,css,images）│ ├─Plugins 插件│ │ └─layui 前端框架插件│ ├─Back后台│ │ ├─js/ js文件│ │ ├─css/ css样式文件│ │ └─image img图片 │ └─Home前台│ ├─js/ js文件│ ├─css/ css样式文件│ └─image img图片 ├─Frame 公共使用的类│ ├─BaseModel.class.php 数据库连接类│ ├

模块化(切记：学习思想) 如果不用模块化编写代码，那么会具有以下问题： 代码杂乱无章，没有条理性，不便于维护，不便于复用 很多代码重复、逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本实现：闭包的自调用函数 //日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV=(function(){ return { pay(){ }, xiaofei(){ } } })() AMD模块化 -->requireJS AMD：async module define：异步模块定义 AMD其实就是requireJS实现的模块化解决方案 其他模块化解决方案： CommonJS：Node中使用的模块化解决方案 CMD（common module define）：seajs中提出来的模块化解决方案 其实CMD可以认为是CommonJS的前端实现 seajs由阿里的（玉帛）编写 seajs在2，3年前比较火，从去年开始已经停止更新 vue 、angular、react已经集成了各自的模块化 es6模块化 webpack也有模块化的解决方案 vue、angular

vue.config.js const path = require('path'); module.exports = { // 环境配置 devServer: { host: '0.0.0.0', port: '8090', https: false, open: true }, // 设置路径别名 chainWebpack: config => { config.resolve.alias .set('@', path.join(__dirname, 'src')) .set('@assets', path.join(__dirname, 'src/assets')) .set('@components', path.join(__dirname, 'src/components')) .set('@views', path.join(__dirname, 'src/views')) .set('@router', path.join(__dirname, 'src/router')) .set('@utils', path.join(__dirname, 'src/utils')) } }; 来源： CSDN 作者： sleepwalker_1992 链接： https://blog.csdn.net/sleepwalker_1992/article/details

const path = require('path'); const webpack = require('webpack'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js', publicPath:'dist/' }, plugins: [ new webpack.BannerPlugin('最终版权归小马哥所有') //加入横幅插件 ], ... } 结果： 来源： CSDN 作者： 千里小马哥 链接： https://blog.csdn.net/qianlixiaomage/article/details/104202999

Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。 安装 Express 安装 Express 并将其保存到依赖列表中： $ npm install express --save 以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。 以下几个重要的模块是需要与 express 框架一起安装 的： body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。 cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。 multer - node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径 允许 http://www.domain.com/lab/c

├── index.js ├── router.js └── server.js index.js var server = require ( "./server" ) ; var router = require ( "./router" ) ; server . start ( router . route ) ; router.js function route ( pathname ) { console . log ( "About to route a request for" + pathname ) ; } exports . route = route ; server.js var http = require ( "http" ) ; var url = require ( "url" ) ; function start ( route ) { function onRequest ( request , response ) { var pathname = url . parse ( request . url ) . pathname ; console . log ( "Request for" + pathname + "received." ) ; route ( pathname ) ; response . writeHead ( 200

16.12.0版本React中的webpack如何配置less 其中"scripts"帮你自动下载需要的 webpack-dev-server 依赖,包括开始start，打包build，测试test，配置都放在eject中，所以如果想要配置自带的依赖外的less的东西需要暴露出eject依赖文件 yarn add less - loader或者npm install less - loader //先安装依赖 yarn eject 或者npm run eject //解构目录 执行上面操作之后，自动会生成config文件夹，需要修改webpack.config.js,打开config目录下的webpack.config.js，修改webpack配置，如下图 第一处是找到 cssRegex 和 cssModuleRegex 在他们得我下面新建 lessRegex 和 lessModuleRegex 变量 第二处是增加 less-loader 的配置 具体修改如下 //第一大块大概在47行左右 const lessRegex = /\.less$/ ; const lessModuleRegex = /\.module\.less$/ ; //第二大块大概在493行左右 //配置less { test : lessRegex , exclude : lessModuleRegex ,

他首先会遍历enableRegistry取出其中定义的模块，并且将没有加载成功的模块标识注入noLoads数组，如果过期了这里就会报错 如果上述没问题还会做循环依赖的判断，主要逻辑在breakCycle中，因为我们这里不存在循环依赖便跳出了，但还未结束 我们这里开始了递归检测依赖是否载入 if ((!expired || usingPathFallback) && stillLoading) { //Something is still waiting to load. Wait for it, but only //if a timeout is not already in effect. if ((isBrowser || isWebWorker) && !checkLoadedTimeoutId) { checkLoadedTimeoutId = setTimeout(function () { checkLoadedTimeoutId = 0; checkLoaded(); }, 50); } } 来源： https://www.cnblogs.com/chenxijywc/p/5377470.html

就在前天晚上RequireJS发布了一个大版本，直接从version 1.0.8 升级到了 2.0 。随后的几小时James Burke又迅速的将版本调整为2.0.1，当然其配套的打包压缩工具 r.js 也同时升级到了2.0.1。此次变化较大，代码也进行了重构，层次更清晰可读。功能上主要变化如下： 1，延迟模块的执行。 这是一个很大变化，以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现，再没人诟病 AMD 的模块是立即执行的。现在也可以等到require的时候才执行。 2，config增加了shim，map，module，enforceDefine。 shim 参数解决了使用非AMD方式定义的模块（如jQuery插件）及其载入顺序。使用shim参数来取代1.0版本的 order 插件。其实在1.0版本中就曾经有人开发过 use 和 wrap 插件来解决此类问题。考虑到很多开发者有此类需求（比如某些JS模块是较早时候其他人开发的，非AMD方式）此次2.0版本直接将其内置其中。 下面是一个使用jQuery插件形式配置的参数。我们知道jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。而jQuery插件都依赖于jQuery，即在require插件时得保证jQuery先下载下来。可以如下配置 require